/* ═══════════════════════════════════════════════════════════
   09 — RESPONSIVE
   Carga al final: corrige reglas heredadas y define los tramos.
   ═══════════════════════════════════════════════════════════ */

/* ── limpieza de reglas que apuntan a nodos inexistentes ── */
.hero{ padding-top:0 !important; }

/* ═══════════ MENÚ MÓVIL ═══════════
   El nav es transparente sobre el hero. Al abrir el menú necesita
   fondo propio, si no los links quedan flotando sobre el video. */
.mobile-menu{
  width:100%;
  background:rgba(14,18,22,.97);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  padding:22px 0 26px;
  margin:0 -32px;
  padding-left:32px; padding-right:32px;
  width:calc(100% + 64px);
  border-top:1px solid rgba(255,255,255,.14);
}
.mobile-menu a{ color:#fff; font-size:1rem; padding:6px 0; }
.mobile-menu a:hover{ color:#8FB4F2; }

/* el nav se vuelve sólido mientras el menú está abierto */
nav.menu-open{
  background:rgba(14,18,22,.97) !important;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom-color:rgba(255,255,255,.14) !important;
}
nav.menu-open .brand-name{ color:#fff !important; }
nav.menu-open .brand-desc{ color:rgba(255,255,255,.62) !important; }
nav.menu-open .burger i{ background:#fff !important; }
nav.menu-open .lang button{ color:rgba(255,255,255,.7) !important; }
nav.menu-open .lang button.on{ color:#fff !important; border-bottom-color:#fff !important; }
nav.menu-open .brand svg rect{ stroke:#fff !important; }
nav.menu-open .brand svg path{ stroke:#fff !important; }

/* la hamburguesa se cruza al abrir */
.burger{ padding:8px; width:38px; height:38px; justify-content:center; align-items:center; }
.burger i{ transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .25s; }
nav.menu-open .burger i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
nav.menu-open .burger i:nth-child(2){ opacity:0; }
nav.menu-open .burger i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ═══════════ ESCRITORIO CHICO — hasta 1100px ═══════════ */
@media (max-width:1100px){
  .wrap{ padding:0 28px; }
  section{ padding:88px 0; }
  .sec-head{ margin-bottom:46px; }
  .focus-grid{ gap:48px; }
  .contact-grid{ gap:44px; }
  .fees{ gap:18px; }
  .fee{ padding:28px 24px; }
  .unit-body, .unit .pilar-body{ padding:28px 26px 32px; }
}

/* ═══════════ TABLET — hasta 900px ═══════════ */
@media (max-width:900px){
  .wrap{ padding:0 24px; }
  nav .wrap{ height:68px; flex-wrap:wrap; }
  .brand svg{ width:26px; height:26px; }
  .brand-name{ font-size:1.08rem; }
  .brand-desc{ font-size:0.46rem; letter-spacing:0.2em; }

  /* el botón de contacto del nav sale: ya está el menú */
  nav .nav-right > a.btn-solid{ display:none; }
  .lang{ margin-left:auto; margin-right:14px; }

  section{ padding:68px 0; }
  .sec-head{ margin-bottom:38px; }
  .sec-head h2{ font-size:clamp(1.6rem,4.6vw,2.1rem); }
  .band{ padding:76px 0; }

  .units{ grid-template-columns:1fr; }
  .unit-photo{ aspect-ratio:21/9; }
  .fees{ grid-template-columns:1fr; gap:14px; }
  .focus-grid, .contact-grid{ grid-template-columns:1fr; gap:34px; }
  .focus-photo{ aspect-ratio:21/9; }
  .info-photo{ aspect-ratio:21/9; }
  .card-info{ padding:26px 24px; }
}

/* ═══════════ MÓVIL — hasta 640px ═══════════ */
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .mobile-menu{ margin:0 -20px; padding-left:20px; padding-right:20px; width:calc(100% + 40px); }

  nav .wrap{ height:62px; }
  section{ padding:54px 0; }
  .sec-head{ margin-bottom:30px; }
  .sec-head h2{ font-size:clamp(1.5rem,7vw,1.95rem); line-height:1.22; }
  .sec-head p, .sec-lead{ font-size:0.94rem; }
  .band{ padding:62px 0; }
  .band-inner h2{ font-size:clamp(1.5rem,7vw,2rem); }
  .band-inner p{ font-size:0.94rem; }

  /* filete de sección más corto para que no domine */
  section:not(.band)::before{ width:56px; height:2px; }

  /* unidades */
  .unit .pilar-body, .unit-body{ padding:24px 20px 28px; }
  .unit h3{ font-size:1.18rem; }
  .unit p{ font-size:0.9rem; }
  .unit li{ font-size:0.86rem; padding:10px 0; }

  /* enfoque */
  .focus-item{ grid-template-columns:34px 1fr; gap:14px; padding:20px 0; }
  .focus-item h4{ font-size:0.96rem; }
  .focus-item p{ font-size:0.86rem; }
  .quote-card{ padding:22px 20px; }
  .quote-card p{ font-size:0.98rem; }

  /* honorarios */
  .fee{ padding:24px 20px; }
  .fee h4{ font-size:1.02rem; }

  /* contacto */
  .field input, .field select, .field textarea{ padding:13px 14px; font-size:16px; }
  .field label{ font-size:0.6rem; }
  .consent{ font-size:0.76rem; }
  .card-info{ padding:22px 20px; }
  .wa-big{ padding:15px 16px; font-size:0.78rem; letter-spacing:.06em; }
  .info-row{ padding:13px 0; }
  .info-row .v{ font-size:0.9rem; }

  /* footer */
  footer{ padding:38px 0 26px; }
  .foot-top{ flex-direction:column; gap:20px; margin-bottom:24px; }
  .foot-units{ gap:16px; }
  .foot-units span{ font-size:0.62rem; }
  .foot-bot{ flex-direction:column; gap:10px; align-items:flex-start; }
}

/* ═══════════ MÓVIL ANGOSTO — hasta 380px ═══════════ */
@media (max-width:380px){
  .wrap{ padding:0 16px; }
  .mobile-menu{ margin:0 -16px; padding-left:16px; padding-right:16px; width:calc(100% + 32px); }
  .brand-desc{ display:none; }
  .sec-head h2{ font-size:1.42rem; }
  .unit .pilar-body, .unit-body{ padding:20px 16px 24px; }
  .fee{ padding:20px 16px; }
}

/* ═══════════ APAISADO BAJO ═══════════ */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  nav .wrap{ height:56px; }
  section{ padding:48px 0; }
}

/* ═══════════ el input no debe hacer zoom en iOS ═══════════ */
@media (max-width:900px){
  input, select, textarea{ font-size:16px; }
}