/* =========================================================
   Especialistas HCG — sitio de una sola página
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

:root{
  --navy:#0B1B34;
  --navy-soft:#132745;
  --gold:#F3A62A;
  --gold-light:#FDC24A;
  --paper:#FFFFFF;
  --grey-bg:#F4F5F7;
  --ink:#22283A;
  --ink-soft:#6B7280;
  --line:#E4E6EA;
  --ok:#1A7F37;
  --error:#C0392B;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.nav-locked{overflow:hidden;}
h1,h2,h3,h4{
  font-family:'Poppins',Arial,sans-serif;
  color:var(--navy);
  line-height:1.25;
  margin:0 0 .6em;
  font-weight:700;
}
p{margin:0 0 1.1em; color:var(--ink-soft); max-width:56ch;}
a{color:inherit;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 1.6rem;}
.section{padding:5.5rem 0;}
.section-tight{padding:4.5rem 0;}

.eyebrow{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:1.9rem;
  font-weight:700;
  color:var(--navy);
  position:relative;
  padding-bottom:.75rem;
  margin-bottom:1.4rem;
}
.eyebrow::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:56px; height:4px; background:var(--gold);
}

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--navy);
}
.brand-row{
  display:flex; justify-content:center; align-items:center;
  padding:1.1rem 1.6rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{
  display:flex; align-items:center; gap:.8rem; text-decoration:none;
}
.brand img{height:46px; width:auto;}
.brand-text{
  display:flex; flex-direction:column; line-height:1.15;
  color:#fff; text-align:left;
}
.brand-text strong{
  font-family:'Poppins',sans-serif; font-size:1.15rem; letter-spacing:.03em;
}
.brand-text span{font-size:.7rem; letter-spacing:.08em; color:var(--gold-light);}

.nav-row{
  max-width:var(--max); margin:0 auto; padding:0 1.6rem;
  display:flex; align-items:center; justify-content:space-between;
}
nav.main-nav ul{display:flex; gap:2.2rem;}
nav.main-nav a{
  display:block; padding:1rem 0;
  text-decoration:none; font-size:.92rem; font-weight:500;
  color:#D7DBE6; position:relative;
}
nav.main-nav a:hover, nav.main-nav a.active{color:#fff;}
nav.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:.55rem;
  height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{transform:scaleX(1);}

/* Hamburger button (hidden on desktop) */
.hamburger{
  display:none;
  -webkit-appearance:none; appearance:none;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
}
.hamburger:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px;}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--navy);}
.hero-media{
  height:min(70vh,620px); min-height:340px;
  overflow:hidden;
}
.hero-media img{width:100%; height:100%; object-fit:cover;}

.quote-card{
  position:relative; z-index:5;
  max-width:560px;
  margin:-70px auto 0 0;
  background:var(--paper);
  padding:2.3rem 2.4rem;
  box-shadow:0 20px 45px rgba(11,27,52,.18);
}
.quote-card .wrap-inner{max-width:var(--max); margin:0 auto; padding:0 1.6rem;}
.quote-mark{color:var(--gold); font-size:1.6rem; font-weight:700; line-height:1; margin-bottom:.6rem; display:block;}
.quote-card p{
  font-style:italic; color:var(--navy); font-size:1.15rem; font-weight:500;
  margin:0; max-width:none;
}

/* ---------- Nosotros ---------- */
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;
}
.about-copy p{font-size:1.02rem;}
.about-collage{position:relative; height:420px;}
.about-collage img{
  position:absolute; width:62%; object-fit:cover; box-shadow:0 16px 30px rgba(11,27,52,.15);
}
.about-collage .img-a{top:0; left:0; height:58%;}
.about-collage .img-b{bottom:0; right:0; height:58%;}
.about-collage .block-a{
  position:absolute; top:34%; right:6%; width:34%; height:22%;
  background:var(--gold);
}
.about-collage .block-b{
  position:absolute; bottom:6%; left:2%; width:26%; height:18%;
  background:var(--gold-light);
}

/* ---------- Misión / Visión ---------- */
.mv-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:center;
}
.mv-media img{width:100%; height:auto; object-fit:cover; box-shadow:0 16px 30px rgba(11,27,52,.12);}
.mv-copy p{font-size:1.02rem;}
.mv-copy strong{color:var(--navy);}

/* ---------- Servicios ---------- */
.services{background:var(--grey-bg);}
.services-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; align-items:start;
}
.services-copy p{font-size:1.02rem;}
.service-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;
}
.service-card{
  background:var(--paper);
  padding:2.1rem 1.7rem;
  box-shadow:0 8px 22px rgba(11,27,52,.06);
  transition:box-shadow .2s ease, transform .2s ease;
}
.service-card:hover{
  box-shadow:0 14px 30px rgba(11,27,52,.12);
  transform:translateY(-3px);
}
.service-icon{
  width:2.6rem; height:2.6rem; /*border:2px solid var(--gold);*/
  margin-bottom:1.3rem;
  display:flex; align-items:center; justify-content:center;
}
.service-icon svg{width:1.4rem; height:1.4rem; stroke:var(--gold); fill:none;}
.service-card h3{font-size:1.08rem; margin:0;}

/* ---------- Contacto ---------- */
.contact-panel{
  display:grid; grid-template-columns:1.1fr .9fr;
  box-shadow:0 20px 45px rgba(11,27,52,.1);
}
.contact-form-side{background:var(--paper); padding:3.2rem;}
.contact-form-side p{font-size:1.02rem;}
form.contact-form{display:flex; flex-direction:column; gap:1.1rem; margin-top:1.6rem;}
form.contact-form .row-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
form.contact-form label{font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:.35rem; display:block;}
form.contact-form input, form.contact-form textarea{
  width:100%; padding:.8rem .9rem; border:1px solid var(--line);
  background:var(--grey-bg); font-family:inherit; font-size:.95rem; color:var(--ink);
}
form.contact-form textarea{min-height:120px; resize:vertical;}
form.contact-form input:focus, form.contact-form textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px; background:#fff;
}
form.contact-form input:invalid:not(:placeholder-shown){border-color:var(--error);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.7rem; text-decoration:none; border:none; cursor:pointer;
  font-weight:600; font-size:.95rem; font-family:inherit;
  background:var(--navy); color:#fff; align-self:flex-start;
  transition:background .2s ease, color .2s ease;
}
.btn:hover{background:var(--gold); color:var(--navy);}
.btn:disabled{opacity:.65; cursor:not-allowed;}

.form-status{
  margin:0; font-size:.9rem; min-height:1.3em;
}
.form-status--ok{color:var(--ok);}
.form-status--error{color:var(--error);}

.contact-info-side{background:var(--navy); color:#fff; padding:3.2rem;}
.contact-info-side h3{color:#fff; font-size:1.5rem; margin-bottom:2rem;}
.info-item{display:flex; gap:1.1rem; margin-bottom:2.1rem;}
.info-item:last-child{margin-bottom:0;}
.info-icon{
  flex:none; width:2.4rem; height:2.4rem; /*border:2px solid var(--gold);*/
  display:flex; align-items:center; justify-content:center;
}
.info-icon svg{width:1.15rem; height:1.15rem; stroke:var(--gold-light); fill:none;}
.info-item h4{color:var(--gold-light); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 .4rem; font-weight:600; font-family:'Source Sans 3',sans-serif;}
.info-item p{color:#D7DBE6; margin:0; font-size:.95rem;}
.info-item a{color:#D7DBE6; text-decoration:none;}
.info-item a:hover{color:var(--gold-light);}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--grey-bg); border-top:1px solid var(--line);
  padding:3rem 0 1.6rem;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
  padding-bottom:2.2rem; border-bottom:1px solid var(--line);
}
.footer-brand{display:flex; align-items:center; gap:.7rem;}
.footer-brand img{height:34px; width:auto;}
.footer-brand strong{font-family:'Poppins',sans-serif; color:var(--navy); font-size:1.05rem;}
.footer-nav ul{display:flex; gap:1.8rem; flex-wrap:wrap;}
.footer-nav a{text-decoration:none; font-size:.9rem; color:var(--ink-soft);}
.footer-nav a:hover{color:var(--navy);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem;
  padding-top:1.6rem; font-size:.83rem; color:var(--ink-soft);
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .about-grid, .mv-grid, .services-grid{grid-template-columns:1fr; gap:2.4rem;}
  .contact-panel{grid-template-columns:1fr;}
  .quote-card{margin:-40px 1.6rem 0;}
}
@media (max-width:680px){
  .brand-row{padding:1rem 1.2rem .8rem;}
  .brand img{height:38px;}
  .brand-text strong{font-size:1rem;}
  nav.main-nav{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:320px;
    background:var(--navy-soft);
    transform:translateX(100%); transition:transform .25s ease;
    padding:5.5rem 2rem 2rem; z-index:60;
    box-shadow:-8px 0 24px rgba(0,0,0,.25);
  }
  nav.main-nav ul{flex-direction:column; gap:0;}
  nav.main-nav a{padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:1.05rem;}
  nav.main-nav.is-open{transform:translateX(0);}
  .hamburger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:30px; height:24px;
    position:absolute; right:1.2rem; top:1.1rem; z-index:61;
  }
  .hamburger span{display:block; width:100%; height:2px; background:#fff; transition:transform .25s ease, opacity .2s ease;}
  .hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.is-active span:nth-child(2){opacity:0;}
  .hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .service-cards{grid-template-columns:1fr;}
  .quote-card{padding:1.7rem 1.6rem; margin-top:-30px;}
  .quote-card p{font-size:1.02rem;}
  .about-collage{height:320px;}
  .contact-form-side, .contact-info-side{padding:2.2rem 1.6rem;}
  .footer-top{flex-direction:column;}
}