/* ============================================================
   ROSSANA RUIZ · REAL ESTATE CONSULTANT
   Identidad: ondas topográficas · navy + oro + crema
   Tono: profesional, inspirador, ejecutivo, humano
   ============================================================ */

:root{
  /* Paleta de marca (manual 2.4) */
  --navy:#30314E;          /* Pantone 275C  RGB 48/49/78 */
  --navy-700:#272840;
  --navy-800:#1f2035;
  --navy-900:#171829;
  --gold:#CEAE7A;          /* Pantone 4525C RGB 206/174/122 */
  --gold-deep:#B68F52;     /* oro para acentos sobre claro */
  --gold-text:#7D5F2B;     /* oro oscurecido: texto pequeño sobre claro (WCAG AA) */
  --gold-soft:#E6D2AE;
  --gray:#EDEDED;          /* Pantone 663C */
  --paper:#F7F2E9;         /* crema cálido (lienzo) */
  /* BANDA ALTERNA (ajuste ago-2026 — pedido del cliente: «los márgenes anchos
     generan sensación de vacío», puntualmente antes de #sobre-mi).
     El bloque YA tenía fondo alterno; el problema era que no se veía. Medido
     en Chrome sobre la portada:
         #F7F2E9 (paper) vs #FBF8F1 (paper-2 anterior) → 1,05:1 · ΔL* 1,98
     Dos unidades de L* sobre un borde difuso están por debajo del umbral de
     detección: el límite entre secciones no existía y el aire se leía como
     página vacía, no como cambio de banda.
     El valor nuevo NO cambia el color, sólo su lugar en la rampa: mismo tono
     (H 39°) y misma saturación (S 45% vs 47%) que --paper, un escalón más
     abajo en luminosidad — queda entre --paper y --gold-soft (#E6D2AE), que
     es el otro extremo de esa misma rampa crema.
         #F7F2E9 vs #EFE6D5 → 1,11:1 · ΔL* 4,08  (el borde se lee)
     Contraste de texto sobre el fondo nuevo (AA normal = 4,5:1):
         --ink       #2A2B40 → 11,17:1
         --navy      #30314E → 10,12:1
         --ink-soft  #5B5C74 →  5,25:1
         --gold-text #7D5F2B →  4,78:1
     Y las tarjetas blancas (--paper-3) que se apoyan en estas bandas
     (.aud-card) ganan definición: 1,05:1 antes → 1,24:1 ahora. */
  --paper-2:#EFE6D5;
  --paper-3:#FFFFFF;
  --ink:#2A2B40;
  --ink-soft:#5B5C74;
  --line:rgba(48,49,78,.14);
  --line-strong:rgba(48,49,78,.26);

  /* Tipografía */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Escala / ritmo */
  --container:1280px;
  --gutter:clamp(1.25rem,5vw,3.5rem);
  /* RITMO VERTICAL (ajuste ago-2026 — pedido del cliente: «reducir
     drásticamente el padding vertical entre contenedores, unificando con el
     patrón más compacto del resto del sitio»).
     Antes: clamp(5rem,10vw,9rem) → 128px por lado a 1280 y 80px a 375, contra
     los 88/56px que ya usaban .stats y .footer (el patrón más compacto que el
     sitio ya tenía). Once secciones con ese padding sumaban 1.760px de aire de
     más a 1280px.
     Ahora --section adopta exactamente ese patrón compacto, así que TODAS las
     bandas de la portada respiran igual. */
  --section:clamp(3.5rem,7vw,5.5rem);
  /* Aire entre el encabezado de una sección y su grilla. Antes cada bloque
     tenía el suyo (4,5rem en .aud-grid/.diff-grid/.tst-grid/.timeline y 4rem
     en .ins-grid/.reels-grid): 72px y 64px a 1280. Unificado y compactado. */
  --head-gap:clamp(2.2rem,4.5vw,3.4rem);
  --radius:18px;
  --radius-lg:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ----------------------------- Reset ----------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ANCLAS vs HEADER FIJO — medición real en Chrome sobre index.html (ago-2026),
   getBoundingClientRect() de #header con la transición ya terminada:

     ancho de viewport │ header normal │ header .scrolled
     ──────────────────┼───────────────┼─────────────────
        1280px         │    94.00px    │     73.19px
        1024px         │    94.00px    │     73.19px
         375px         │    94.00px    │     73.19px

   La altura NO depende del ancho: la fija .logo-mark (46px) + el padding del
   header (1.5rem×2 = 48px normal · .85rem×2 = 27.2px scrolled).

   Antes se compensaba con `section[id]{scroll-margin-top:clamp(78px,11vw,104px)}`,
   que a 375px resolvía 78px — 16px MENOS que el header alto (94px), así que al
   tocar un ítem del menú móvil el arranque de la sección quedaba debajo del
   header. Además sólo cubría <section id>, no el resto de destinos de scroll.

   Se reemplaza por scroll-padding-top en <html>: aplica a TODOS los destinos del
   documento (clic en ancla, carga con #hash, foco por teclado, scrollIntoView)
   con una sola regla. 118px = 94px (header alto) + 24px de respiro visual;
   con el header ya encogido el respiro real es de ~45px. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:118px}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  font-size:clamp(1rem,.55rem + .55vw,1.075rem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--gold);color:var(--navy-900)}

/* Grano sutil para textura premium */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Barra de progreso de scroll */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));transition:width .1s linear}

/* ----------------------------- Utilidades ----------------------------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.eyebrow{
  font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  color:var(--gold-text);display:inline-flex;align-items:center;gap:.85em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold-text);opacity:.7;display:inline-block}
/* Sobre fondos navy el oro claro sí contrasta (y el oscuro no) */
.path .eyebrow{color:var(--gold)}
.path .eyebrow::before{background:var(--gold)}
.eyebrow.center::before{display:none}
section{position:relative}
/* El desfase del header fijo se compensa con scroll-padding-top en <html>
   (ver la nota con las medidas en el bloque Reset, arriba). */

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.012em;color:var(--navy)}
h2{font-size:clamp(2rem,1rem + 3.4vw,3.55rem)}
h3{font-size:clamp(1.35rem,1rem + 1.2vw,1.9rem);line-height:1.12}
.lead{font-size:clamp(1.08rem,.9rem + .7vw,1.4rem);color:var(--ink-soft);line-height:1.55;font-weight:300}
em,.it{font-style:italic}
.gold-it{font-style:italic;color:var(--gold-deep)}

/* Botones */
.btn{
  display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans);
  font-weight:500;font-size:.95rem;letter-spacing:.02em;padding:1.02em 1.7em;border-radius:100px;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;position:relative;line-height:1;white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em;transition:transform .4s var(--ease)}
.btn-primary{background:var(--gold);color:var(--navy-900);box-shadow:0 12px 30px -12px rgba(182,143,82,.7)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(182,143,82,.85)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy);color:var(--paper);transform:translateY(-3px)}
.btn-ghost:hover svg{transform:translateX(4px)}
.btn-light{border:1px solid rgba(255,255,255,.32);color:#fff}
.btn-light:hover{background:#fff;color:var(--navy);transform:translateY(-3px)}
.btn-light:hover svg{transform:translateX(4px)}

/* Enlace con subrayado animado */
.link-u{display:inline-flex;align-items:center;gap:.55em;font-weight:500;color:var(--navy);
  letter-spacing:.02em;position:relative;padding-bottom:3px}
.link-u svg{width:.95em;height:.95em;transition:transform .35s var(--ease)}
.link-u::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--gold-deep);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.link-u:hover::after{transform:scaleX(1)}
.link-u:hover svg{transform:translate(3px,-3px)}

/* Motivo de ondas decorativo (marca) */
.waves{position:absolute;pointer-events:none;color:var(--gold);opacity:.5;z-index:0}
.waves svg{width:100%;height:100%;display:block}

/* Foco visible (teclado) coherente con la marca — aplica a las 3 páginas */
.chip:focus-visible,.btn:focus-visible,.link-u:focus-visible,.back-link:focus-visible,
.faq-item summary:focus-visible,.lang button:focus-visible,.menu a:focus-visible,
.m-menu a:focus-visible,.ins-body h3 a:focus-visible,.feat-title a:focus-visible,
.burger:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wa-float:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
  padding:1.5rem 0}
.header.scrolled{background:rgba(247,242,233,.86);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line),0 16px 40px -30px rgba(31,32,53,.5);padding:.85rem 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

/* Logo lockup
   ------------------------------------------------------------------
   BUG DEL HEADER STICKY EN MÓVIL (reporte del cliente ago-2026: «al
   scrollear, el texto Rossana Ruiz / Real Estate Consultant se desplaza y
   se superpone con el logotipo»). Medido en Chrome sobre index.html:

   a) REFLOW DEL LOCKUP POR FOUT. Las fuentes se cargan con `display=swap`,
      así que el lockup se dibuja primero con la tipografía del sistema y
      recién después con Jost. Ancho de .logo-word a 375px:
         Jost .......... 172,5px      → lockup total 227,7px
         system-ui ..... 185,7px      → lockup total 240,9px  (+13,2px)
         Arial ......... 181,3px  ·  Helvetica Neue 179,1  ·  Roboto 177,8
      Ese salto de 13px llega cuando la fuente termina de bajar, que en el
      celular suele ser justo mientras la persona está scrolleando: de ahí
      el «se desplaza» del reporte.

   b) EL LOCKUP NO ENTRABA a anchos chicos. Ancho disponible para el logo
      = viewport − 2×gutter − gap del .nav − burger:
         375px → 335 − 24 − 30 = 281  (entra: sobran 53px con Jost)
         320px → 280 − 24 − 30 = 226  (NO entra: 227,7 con Jost y 240,9
                                       con la fuente de sistema)
      Con .logo encogible (flex-shrink:1 por defecto) y las dos líneas en
      `white-space:nowrap`, el sobrante se desborda: el burger se montaba
      sobre el final de la bajada — el «se superpone» del reporte.

   La corrección ataca las dos causas y no toca el lenguaje visual:
     1. `flex:none` en .logo y en .nav-right: el lockup nunca se comprime ni
        empuja al burger.
     2. Cuerpos fluidos del wordmark: bajan ~13% entre 390px y 320px, así
        que a 320 sobran ~20px aun con la tipografía de sistema.
     3. Fallback métrico ('RR Logo Fallback', abajo): la pisada previa al
        swap coincide con la de Jost y el lockup deja de saltar.
     4. Interlineados y separación entre las dos líneas en unidades
        deterministas (rem), no en `em` del cuerpo chico: la altura del
        lockup ya no depende de las métricas de la fuente que esté
        dibujando, así que la transición de padding del header lo mueve
        como un bloque rígido.
   ------------------------------------------------------------------ */
/* Fallback métrico del wordmark: mientras Jost está en vuelo, el sistema
   dibuja Arial/Helvetica/Roboto (~7,5% más anchas). size-adjust iguala la
   pisada para que al hacer swap el logo no se mueva. Si el navegador no
   soporta size-adjust (Safari <17) simplemente cae en la fuente local y el
   comportamiento es el de antes: nunca empeora. */
@font-face{
  font-family:'RR Logo Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Roboto'),local('Segoe UI');
  size-adjust:92.5%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
  font-weight:400 700;font-style:normal;font-display:swap;
}
.logo{display:flex;align-items:center;gap:.7rem;color:#fff;flex:none;transition:color .5s var(--ease)}
.scrolled .logo{color:var(--navy)}
/* Marca R oficial (extraída del manual). background-image en vez de mask:
   funciona también al abrir el archivo con file:// (Chrome bloquea mask-image cross-origin) */
.logo-mark{width:44px;height:46px;flex:none;
  background:center/contain no-repeat url('../img/logo-mark-white.png');
  transition:transform .5s var(--ease)}
.scrolled .logo-mark{background-image:url('../img/logo-mark-navy.png')}
.foot-brand .logo-mark{background-image:url('../img/logo-mark-white.png')}
.logo:hover .logo-mark{transform:translateY(-2px) rotate(-2deg)}
.logo-word{display:flex;flex-direction:column;justify-content:center;flex:none;line-height:1;
  font-family:'Jost','RR Logo Fallback',system-ui,-apple-system,'Segoe UI',sans-serif}
/* clamp: 1,06rem a partir de 390px y 0,92rem a 320px (y proporcional la
   bajada), para que el lockup entre siempre con aire en pantallas chicas. */
.logo-word b{font-family:inherit;font-weight:600;font-size:clamp(.92rem,.28rem + 3.2vw,1.06rem);
  line-height:1.08;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.logo-word span{font-size:clamp(.47rem,.15rem + 1.6vw,.54rem);line-height:1.1;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-top:.26rem;font-weight:500;white-space:nowrap}
/* NOTA (auditoría ago-2026): con el header scrolleado sobre fondo crema, esta
   bajada queda en 1,89:1 de contraste (WCAG AA pide 4,5:1). Se dejó el color
   de marca por decisión del cliente: el diseño no se toca. Para corregirlo
   algún día, la regla es:
   body:not(.menu-open) .header.scrolled .logo-word span{color:var(--gold-text)} */

/* Menú */
.menu{display:flex;align-items:center;gap:2rem}
.menu a{font-size:.86rem;letter-spacing:.04em;color:rgba(255,255,255,.86);font-weight:400;
  position:relative;transition:color .35s var(--ease);padding:.3em 0;white-space:nowrap}
.scrolled .menu a{color:var(--ink-soft)}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.menu a:hover{color:#fff}.scrolled .menu a:hover{color:var(--navy)}
.menu a:hover::after{width:100%}

/* flex:none — el bloque derecho tampoco se comprime: el burger conserva sus
   30px y su área táctil de 44px pase lo que pase con el ancho del lockup. */
.nav-right{display:flex;align-items:center;gap:1.3rem;flex:none}
.lang{display:flex;align-items:center;gap:.1rem;font-size:.72rem;letter-spacing:.12em;font-weight:500}
.lang button{padding:.35em .5em;color:rgba(255,255,255,.55);transition:color .3s var(--ease);border-radius:6px}
.scrolled .lang button{color:var(--ink-soft)}
.lang button.active{color:var(--gold)}
.lang button:hover{color:#fff}.scrolled .lang button:hover{color:var(--navy)}
.lang i{opacity:.3;font-style:normal}

.nav-cta{font-size:.85rem;padding:.85em 1.45em}
.header:not(.scrolled) .nav-cta{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;box-shadow:none}
.header:not(.scrolled) .nav-cta:hover{background:#fff;color:var(--navy)}
/* Llamada a la acción del header: pulso sutil de ESCALA (transform, no ocupa
   layout ni desplaza al menú) + latido del borde/fondo en color sólido.
   Sin sombras, blur ni glow nuevos: la estética sigue siendo plana.
   Sólo afecta a .nav-cta, no al resto de .btn-primary. */
@keyframes navCtaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes navCtaEdge{0%,100%{border-color:rgba(255,255,255,.4)}50%{border-color:var(--gold)}}
@keyframes navCtaFill{0%,100%{background-color:var(--gold)}50%{background-color:var(--gold-soft)}}
.nav-cta{animation:navCtaPulse 3.4s var(--ease) infinite;transform-origin:center}
.header:not(.scrolled) .nav-cta{animation:navCtaPulse 3.4s var(--ease) infinite,navCtaEdge 3.4s var(--ease) infinite}
.header.scrolled .nav-cta{animation:navCtaPulse 3.4s var(--ease) infinite,navCtaFill 3.4s var(--ease) infinite}
/* Al interactuar manda el estado hover/focus, no el pulso.
   Se califica con .header para igualar la especificidad de las dos reglas de
   estado de arriba (si no, el pulso les gana al hover y anula el translateY). */
.header .nav-cta:hover,.header .nav-cta:focus-visible{animation:none}

.burger{display:none;width:30px;height:22px;position:relative;z-index:210}
/* Área táctil de 44x44 (mínimo recomendado) sin tocar el tamaño visual de
   las tres rayitas: el ::before es transparente, se centra sobre el botón y
   se pinta antes que los <span>, así que no cambia nada de lo que se ve. */
.burger::before{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.burger span{position:absolute;left:0;height:2px;width:100%;background:currentColor;border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease),top .4s var(--ease);color:#fff}
.scrolled .burger span{color:var(--navy)}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:18px}
body.menu-open .burger span{color:#fff}
body.menu-open .burger span:nth-child(1){top:10px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:10px;transform:rotate(-45deg)}

/* Overlay menú móvil */
body.menu-open{overflow:hidden}
/* El header es position:fixed con z-index propio: sin esto el overlay (z-200)
   lo tapa y la X del burger queda invisible e intocable en el celular. */
body.menu-open .header{z-index:210;background:transparent;box-shadow:none;
  backdrop-filter:none;padding:1.5rem 0}
body.menu-open .header .logo,body.menu-open .header .logo-word{color:#fff}
body.menu-open .header .logo-mark{background-image:url('../img/logo-mark-white.png')}
.m-menu{position:fixed;inset:0;z-index:200;background:var(--navy-900);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);
  clip-path:circle(0% at calc(100% - 40px) 40px);transition:clip-path .7s var(--ease);visibility:hidden}
body.menu-open .m-menu{clip-path:circle(150% at calc(100% - 40px) 40px);visibility:visible}
/* ESCALA DEL MENÚ MÓVIL (ajuste ago-2026)
   Antes: font-size:clamp(1.7rem,8vw,2.6rem) con el interlineado heredado del
   body (1.6) y padding .18em. A 375px eso daba 30px de cuerpo y 58,8px por
   ítem: con 8 enlaces + el pie el menú abierto no entraba en una pantalla de
   667px de alto (iPhone SE/8) y el overlay no tiene scroll.
   Ahora: 6,2vw acotado, interlineado propio 1,22 y padding/gap en proporción.
   Medido a 375×667 → ver la verificación en el reporte. */
.m-menu nav{display:flex;flex-direction:column;gap:.42rem}
.m-menu a{font-family:var(--serif);font-size:clamp(1.32rem,6.6vw,2.35rem);line-height:1.22;
  color:#fff;padding:.14em 0;
  opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
.m-menu a:hover{color:var(--gold)}
body.menu-open .m-menu a{opacity:1;transform:none}
body.menu-open .m-menu a:nth-child(1){transition-delay:.18s}
body.menu-open .m-menu a:nth-child(2){transition-delay:.24s}
body.menu-open .m-menu a:nth-child(3){transition-delay:.3s}
body.menu-open .m-menu a:nth-child(4){transition-delay:.36s}
body.menu-open .m-menu a:nth-child(5){transition-delay:.42s}
body.menu-open .m-menu a:nth-child(6){transition-delay:.48s}
body.menu-open .m-menu a:nth-child(7){transition-delay:.54s}
body.menu-open .m-menu a:nth-child(8){transition-delay:.6s}
.m-menu .m-foot{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.9rem 1.2rem;color:rgba(255,255,255,.6);font-size:.85rem;letter-spacing:.04em}
.m-menu .m-foot a{font-family:var(--sans);font-size:.85rem;color:var(--gold)}
/* Selector de idioma dentro del menú móvil (el del header se oculta <1240px) */
.m-lang{width:100%;font-size:.9rem}
.m-lang button{padding:.35em .6em .35em 0;color:rgba(255,255,255,.55);letter-spacing:.12em;font-weight:500}
.m-lang button.active{color:var(--gold)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--navy-900);color:#fff;overflow:hidden;
  padding-top:clamp(7rem,13vh,9.5rem);padding-bottom:clamp(3rem,7vw,5rem)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:120%;object-fit:cover;
  filter:grayscale(38%) contrast(1.04) brightness(.62);will-change:transform}
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(23,24,41,.62) 0%,rgba(23,24,41,.34) 38%,rgba(23,24,41,.55) 72%,rgba(23,24,41,.92) 100%),
    linear-gradient(100deg,rgba(31,32,53,.86) 0%,rgba(31,32,53,.52) 48%,rgba(31,32,53,.6) 100%)}
.hero .container{position:relative;z-index:2;width:100%}
.hero-eyebrow{color:var(--gold);margin-bottom:1.6rem}
.hero-eyebrow::before{background:var(--gold)}
.hero h1{color:#fff;font-size:clamp(2.2rem,1rem + 3.5vw,3.9rem);font-weight:340;
  letter-spacing:-.018em;max-width:17ch;text-wrap:balance}
.hero h1 .gold-it{color:var(--gold)}
.hero-sub{max-width:54ch;margin-top:1.8rem;color:rgba(255,255,255,.82);
  font-size:clamp(1.05rem,.9rem + .6vw,1.3rem);font-weight:300;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem}

/* Meta lateral del hero */
.hero-meta{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(1.4rem,3.5vw,2.2rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
.hero-meta .loc{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgba(255,255,255,.6);
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase}
.scroll-cue .line{width:1px;height:54px;background:linear-gradient(rgba(255,255,255,.6),transparent);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:var(--gold);animation:scrolldown 2.2s var(--ease) infinite}
@keyframes scrolldown{0%{top:-50%}60%,100%{top:100%}}

/* Hero en dos columnas — marca personal: texto + retrato de Rossana */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center;width:100%}
.hero-text{min-width:0}
.hero-portrait{position:relative;display:flex;justify-content:center}
.hero-portrait .frame{height:min(66vh,580px);width:auto;max-width:100%;aspect-ratio:4/5;
  border:1px solid rgba(206,174,122,.3);box-shadow:0 50px 95px -50px rgba(0,0,0,.85)}
.hero-portrait .frame .tag{left:50%;transform:translateX(-50%);bottom:1.1rem;white-space:nowrap}

/* Avatar circular en el bloque de testimonio (refuerza marca personal) */
.quote-avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;margin:0 auto 1.6rem;
  border:2px solid var(--gold);box-shadow:0 22px 45px -22px rgba(31,32,53,.55)}
.quote-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 16%}

/* ============================================================
   MARQUEE de valores
   ============================================================ */
.marquee{background:var(--navy);color:#fff;padding:1.35rem 0;overflow:hidden;border-block:1px solid rgba(255,255,255,.08)}
.marquee-track{display:flex;width:max-content;gap:0;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.7rem);font-style:italic;
  font-weight:300;padding:0 1.6rem;display:inline-flex;align-items:center;gap:3.2rem;color:rgba(255,255,255,.9);white-space:nowrap}
.marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--paper-2);padding-block:var(--section);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--paper-2);padding:1.4rem clamp(1rem,2.5vw,2.2rem)}
.stat .n{font-family:var(--serif);font-size:clamp(2.4rem,1.4rem + 3.4vw,4.2rem);color:var(--navy);
  line-height:1;font-weight:380;display:flex;align-items:flex-start;gap:.06em}
.stat .n sup{font-size:.62em;color:var(--gold-deep);margin-top:.32em;font-style:italic}
.stat .l{margin-top:.9rem;font-size:.92rem;color:var(--ink-soft);line-height:1.45;max-width:24ch}
.stat .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);font-weight:500}

/* «360°» — jerarquía y caja de impacto (pedido del cliente ago-2026).
   Las cuatro cifras no pueden llevar el mismo número: la del ticket es una
   frase de dos renglones y la de RE/MAX es texto. Lo que se iguala es la
   MANCHA. Medido a 1280px, ancho de tinta de cada cifra:
       10+ ....... 86,8px      RE/MAX .... 179,1px
       ticket .... 227,3px     360° ...... 127,0px   ← la más liviana
   «360°» es el token más corto de la banda y al mismo cuerpo que «10+»
   quedaba ópticamente por debajo de las otras tres. Sube un 10% de cuerpo
   (a 1280: 65,9 → 72,8px) y el ° se recalibra a .38em para conservar su
   tamaño absoluto actual (~27px) y seguir leyéndose como un signo, no como
   un quinto dígito.
   Se usan dos selectores equivalentes en reglas SEPARADAS (si un navegador
   viejo no entiende :has() sólo descarta esa regla, no la otra) y los dos
   están acotados a esta cifra: el `:not([style])` deja fuera las cifras de
   residencia.html, que llevan su font-size en el atributo style. */
.stats-grid .stat:nth-child(4) .n:not([style]){font-size:clamp(2.65rem,1.55rem + 3.75vw,4.6rem)}
.stats-grid .stat:nth-child(4) .n:not([style]) sup{font-size:.56em;margin-top:.35em}
.stat .n:has(.count[data-to="360"]){font-size:clamp(2.65rem,1.55rem + 3.75vw,4.6rem)}
.stat .n:has(.count[data-to="360"]) sup{font-size:.56em;margin-top:.35em}

/* ============================================================
   Layout editorial (split)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.split.reverse .col-media{order:2}
.section-pad{padding-block:var(--section)}
.col-copy .lead{margin-top:1.5rem}
.col-copy h2{margin-top:1.4rem}
.col-copy .body{margin-top:1.6rem;display:flex;flex-direction:column;gap:1.15rem;color:var(--ink-soft);
  font-weight:300;font-size:1.06rem;line-height:1.66}
.col-copy .body strong{color:var(--navy);font-weight:500}
/* Fila de CTA de las columnas de texto. Es flex desde que #sobre-mi lleva dos
   enlaces (trayectoria + blog): con un solo hijo el resultado es idéntico al
   anterior, con dos se acomodan en la misma línea y bajan uno debajo del otro
   cuando no entran. Mismo patrón que .feature .cta-row. */
.col-copy .cta-row{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 2rem}

/* Marco de imagen con duotono navy */
.frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy-800);
  aspect-ratio:4/5;box-shadow:0 40px 80px -50px rgba(23,24,41,.7)}
.frame.wide{aspect-ratio:5/4}
.frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(28%) contrast(1.03);
  transition:transform 1.4s var(--ease)}
.frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(48,49,78,.42),rgba(48,49,78,.05) 45%,rgba(206,174,122,.18));mix-blend-mode:multiply}
.frame:hover img{transform:scale(1.05)}
.frame .tag{position:absolute;z-index:3;left:1.3rem;bottom:1.3rem;background:rgba(23,24,41,.55);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);color:#fff;padding:.7em 1.1em;
  border-radius:100px;font-size:.78rem;letter-spacing:.05em;display:flex;align-items:center;gap:.6em}
.frame .tag svg{width:1em;height:1em;color:var(--gold)}
/* Retrato de persona: color natural y cálido, sólo un tinte de marca en los bordes */
.frame.portrait img{filter:grayscale(0%) contrast(1.02) saturate(1.03);object-position:center 22%}
.frame.portrait::after{background:linear-gradient(165deg,rgba(48,49,78,.12),transparent 28%,transparent 68%,rgba(48,49,78,.34));mix-blend-mode:normal}

/* Lista de chequeo */
.checklist{margin-top:2rem;display:flex;flex-direction:column;gap:.95rem}
.checklist li{display:flex;gap:.9rem;align-items:flex-start;color:var(--ink);font-weight:400;font-size:1.02rem}
.checklist svg{width:1.35em;height:1.35em;flex:none;color:var(--gold-deep);margin-top:.05em}

/* Firma manuscrita estilo */
.signature{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--navy);margin-top:1.8rem;font-weight:300}
.signature small{display:block;font-family:var(--sans);font-style:normal;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-top:.4em;font-weight:500}

/* ============================================================
   Encabezado de sección centrado
   ============================================================ */
.s-head{max-width:62ch;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.3rem}
.s-head .lead{margin:0}
.s-head.left{text-align:left;align-items:flex-start;margin-inline:0}
/* ALINEACIÓN IZQUIERDA en TESTIMONIOS y PARA QUIÉN (pedido del cliente
   ago-2026). Eran los dos únicos encabezados centrados de la portada: el
   resto (.path, .areas, .diff, .insights) ya usa .s-head.left y arranca sobre
   el borde izquierdo del .container. Se replica exactamente ese patrón —el
   mismo que aplica .s-head.left— para que el eyebrow, la línea del ::before y
   el h2 caigan en la misma vertical que los demás títulos, también en móvil. */
.audience > .container > .s-head,
.tst > .container > .s-head{text-align:left;align-items:flex-start;margin-inline:0}

/* ============================================================
   Cards "Para quién"
   ============================================================ */
.audience{padding-block:var(--section);background:var(--paper-2)}
.aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:var(--head-gap)}
.aud-card{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:2.1rem 1.8rem;position:relative;overflow:hidden;transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s}
.aud-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -40px rgba(31,32,53,.55);border-color:transparent}
.aud-card .ic{width:54px;height:54px;border-radius:14px;background:var(--navy);color:var(--gold);
  display:grid;place-items:center;margin-bottom:1.5rem;transition:background .5s var(--ease)}
.aud-card .ic svg{width:26px;height:26px}
.aud-card:hover .ic{background:var(--gold);color:var(--navy)}
.aud-card h3{font-size:1.32rem}
.aud-card p{margin-top:.85rem;color:var(--ink-soft);font-size:.97rem;font-weight:300;line-height:1.6}
.aud-card .num{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--serif);font-style:italic;
  color:var(--line-strong);font-size:1.5rem}

/* ============================================================
   Áreas de acompañamiento (filas numeradas)
   ============================================================ */
.areas{padding-block:var(--section)}
.area-row{display:grid;grid-template-columns:auto 1.1fr 1fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:center;padding:clamp(2.2rem,4vw,3.4rem) 0;border-top:1px solid var(--line)}
.area-row:last-child{border-bottom:1px solid var(--line)}
.area-num{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--gold-deep);font-weight:300}
.area-main h3{font-size:clamp(1.5rem,1rem + 1.6vw,2.3rem)}
.area-main p{margin-top:1rem;color:var(--ink-soft);font-weight:300;line-height:1.62;max-width:50ch}
.area-main .link-u{margin-top:1.5rem}
.area-media{aspect-ratio:16/11;border-radius:var(--radius);overflow:hidden;background:var(--navy-800);position:relative}
.area-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(30%) contrast(1.03);transition:transform 1.3s var(--ease)}
.area-media::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(48,49,78,.4),rgba(206,174,122,.14));mix-blend-mode:multiply}
.area-row:hover .area-media img{transform:scale(1.06)}

/* ============================================================
   Bloque destacado oscuro (Residencia / Asu Legal)
   ============================================================ */
.feature{background:var(--navy-900);color:#fff;padding-block:var(--section);overflow:hidden}
.feature .container{position:relative;z-index:2}
.feature .split{align-items:center}
.feature h2{color:#fff}
.feature .lead{color:rgba(255,255,255,.78)}
.feature .body{color:rgba(255,255,255,.72);margin-top:1.6rem;display:flex;flex-direction:column;gap:1.1rem;font-weight:300;line-height:1.66}
.feature .body strong{color:var(--gold);font-weight:500}
.pass{display:inline-flex;align-items:center;gap:.7em;border:1px solid rgba(206,174,122,.4);
  color:var(--gold);border-radius:100px;padding:.55em 1.1em;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:1.6rem;font-weight:500}
.pass svg{width:1.1em;height:1.1em}
.feature .cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.3rem}
.legal-card{background:linear-gradient(160deg,var(--navy-700),var(--navy-800));border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);padding:clamp(2rem,4vw,3rem);position:relative;overflow:hidden}
.legal-steps{display:flex;flex-direction:column;gap:0;position:relative;z-index:2}
.legal-steps li{display:flex;gap:1.2rem;padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.legal-steps li:last-child{border-bottom:none}
.legal-steps .s-n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.2rem;flex:none;width:1.5em}
.legal-steps b{color:#fff;font-weight:500;display:block;font-size:1.05rem}
.legal-steps span{color:rgba(255,255,255,.6);font-size:.92rem;font-weight:300}
.asu{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:.8rem;color:rgba(255,255,255,.7);font-size:.92rem}
.asu b{color:var(--gold);font-weight:500}

/* ============================================================
   Diferenciales
   ============================================================ */
.diff{padding-block:var(--section);background:var(--paper-2)}
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:var(--head-gap)}
.diff-item{position:relative;padding-top:2.2rem}
.diff-item .n{position:absolute;top:0;left:0;font-family:var(--serif);font-style:italic;
  font-size:1rem;color:var(--gold-deep)}
.diff-item::before{content:"";position:absolute;top:0;left:0;width:46px;height:1px;background:var(--gold-deep)}
.diff-item h3{font-size:1.25rem;margin-bottom:.8rem}
.diff-item p{color:var(--ink-soft);font-weight:300;font-size:.98rem;line-height:1.6}

/* ============================================================
   Mi Mirada (insights)
   ============================================================ */
.insights{padding-block:var(--section)}
.ins-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:var(--head-gap)}
.ins-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper-3);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);display:flex;flex-direction:column}
.ins-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -42px rgba(31,32,53,.5)}
.ins-media{aspect-ratio:16/10;overflow:hidden;background:var(--navy-800);position:relative}
.ins-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(34%) contrast(1.03);transition:transform 1.3s var(--ease)}
.ins-media::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(48,49,78,.35),rgba(206,174,122,.12));mix-blend-mode:multiply}
.ins-card:hover .ins-media img{transform:scale(1.07)}
.ins-body{padding:1.7rem;display:flex;flex-direction:column;flex:1}
.ins-meta{display:flex;gap:.8rem;align-items:center;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-text);font-weight:500;margin-bottom:1rem}
.ins-meta span{color:var(--ink-soft);letter-spacing:.08em}
.ins-body h3{font-size:1.28rem;line-height:1.18;flex:1}
.ins-body .link-u{margin-top:1.4rem;font-size:.92rem}

/* ============================================================
   Testimonios (voces de clientes)
   Tarjetas planas: mismos tokens que .aud-card (paper-3 + --line + --radius).
   Sin sombras nuevas: el énfasis lo dan el borde y el avatar sólido.
   ============================================================ */
/* Va después de .diff (paper-2): se queda con el crema base (--paper) para no
   repetir el fondo del bloque anterior. Antes le seguía .insights, también en
   crema base; al retirarse ese bloque el turno de la banda alterna pasa a
   .quote, que es quien ahora cierra el tramo claro antes de .contact. */
.tst{padding-block:var(--section)}
.tst-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:var(--head-gap)}
.tst-card{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:2.1rem 1.8rem;display:flex;flex-direction:column;transition:border-color .55s var(--ease)}
.tst-card:hover{border-color:var(--line-strong)}
.tst-card .tst-mark{width:26px;height:26px;color:var(--gold);opacity:.75;flex:none;margin-bottom:1.2rem}
/* Puntuación de la reseña (el markup lo pone index.html: .tst-stars con
   role="img" + 5 <svg class="tst-star"><use href="#i-star"/>).
   Escala deliberadamente discreta: 14px de estrella contra los 26px de la
   comilla y los ~17px de la cita, para que se lea como sello de reseña y no
   compita con el testimonio. Color --gold-deep, el mismo oro que ya usan
   .checklist y el <sup> de las cifras sobre fondo claro (el --gold claro se
   diluye sobre el blanco de la tarjeta). El símbolo del sprite ya trae
   fill="currentColor", así que basta con fijar `color`.
   Los márgenes contemplan las dos posiciones posibles dentro de la tarjeta:
   arriba de la cita (caso actual) o entre la cita y la firma. */
.tst-stars{display:flex;align-items:center;gap:.24rem;line-height:0;flex:none;
  align-self:flex-start;margin:-.2rem 0 1.05rem}
.tst-star{width:14px;height:14px;flex:none;display:block;color:var(--gold-deep)}
.tst-quote + .tst-stars{margin:1.35rem 0 0}
.tst-stars + .tst-author{margin-top:1.35rem}
.tst-quote{font-family:var(--serif);font-weight:300;font-size:1.06rem;line-height:1.55;
  color:var(--navy);letter-spacing:-.005em;flex:1}
.tst-author{display:flex;align-items:center;gap:.95rem;margin-top:1.7rem;padding-top:1.4rem;
  border-top:1px solid var(--line)}
.tst-avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--sans);font-weight:600;font-size:.85rem;letter-spacing:.06em;line-height:1;
  background:var(--navy);color:#fff}
.tst-name{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.tst-name b{color:var(--navy);font-weight:500;font-size:1rem}
.tst-name span{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-text);font-weight:500}
/* Avatares sin foto: iniciales sobre color sólido de la paleta.
   Contraste medido (WCAG 2.1, mínimo AA 4,5:1):
     1 · #30314E (navy)      + #fff     → 12,5:1
     2 · #B68F52 (gold-deep) + #171829  →  5,9:1
     3 · #272840 (navy-700)  + #CEAE7A  →  6,8:1
     4 · #7D5F2B (gold-text) + #fff     →  5,9:1
   Se usa nth-child(4n+…) para que el ciclo se repita si algún día hay más. */
.tst-card:nth-child(4n+1) .tst-avatar{background:var(--navy);color:#fff}
.tst-card:nth-child(4n+2) .tst-avatar{background:var(--gold-deep);color:var(--navy-900)}
.tst-card:nth-child(4n+3) .tst-avatar{background:var(--navy-700);color:var(--gold)}
.tst-card:nth-child(4n+4) .tst-avatar{background:var(--gold-text);color:#fff}

/* ============================================================
   Instagram Reels (la grilla la puebla el panel; oculta si no hay)
   ============================================================ */
.reels{padding-block:var(--section);background:var(--paper-2)}
.reels[hidden]{display:none}
.reels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:var(--head-gap)}
/* Proporción vertical de reel (9:16) para cualquier hijo que inserte el panel */
.reels-grid>*{aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;
  background:var(--navy-800);border:1px solid var(--line);position:relative}
.reels-grid iframe,.reels-grid video,.reels-grid img,.reels-grid blockquote{
  width:100%;height:100%;border:0;margin:0;display:block;object-fit:cover}
#reelsEmpty{margin-top:2rem;text-align:center;font-size:.9rem;color:var(--ink-soft);font-style:italic}
#reelsEmpty[hidden]{display:none}

/* ============================================================
   Trayectoria (timeline)
   ============================================================ */
.path{padding-block:var(--section);background:var(--navy-900);color:#fff;overflow:hidden}
.path h2{color:#fff}
.path .lead{color:rgba(255,255,255,.76)}
.timeline{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tl-item{padding:2rem clamp(1.2rem,2.5vw,2.4rem) 0;border-top:2px solid rgba(255,255,255,.16);position:relative}
.tl-item::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 5px rgba(206,174,122,.18)}
.tl-item .yr{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.05rem;margin-bottom:.8rem}
.tl-item h3{color:#fff;font-size:1.4rem;margin-bottom:.9rem}
.tl-item p{color:rgba(255,255,255,.66);font-weight:300;font-size:.98rem;line-height:1.62}

/* ============================================================
   Frase destacada / pull-quote (Rossana)
   ============================================================ */
/* Toma la banda alterna que dejó libre .insights, para que el tramo claro
   siga leyéndose como paper / paper-2 / paper / paper-2 hasta .contact.
   Si el panel publica reels, esa sección ya usa paper-2 y sería dos bandas
   iguales seguidas: en ese caso .quote vuelve al crema base. */
.quote{padding-block:var(--section);text-align:center;background:var(--paper-2)}
.reels:not([hidden]) + .quote{background:var(--paper)}
.quote .mark{font-family:var(--serif);font-size:6rem;line-height:.6;color:var(--gold);opacity:.55;height:.55em}
.quote blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,1rem + 2.6vw,3.1rem);
  line-height:1.28;color:var(--navy);max-width:20ch;margin:2rem auto 0;letter-spacing:-.01em;text-wrap:balance}
.quote blockquote em{color:var(--gold-deep)}
.quote cite{display:block;margin-top:2.2rem;font-style:normal;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.quote cite b{color:var(--navy)}
/* .tnote: se fue con la nota interna «Espacio reservado para testimonios…»
   que quedó publicada en la portada. La sección de testimonios ya existe. */

/* ============================================================
   CONTACTO / AGENDA
   ============================================================ */
.contact{padding-block:var(--section);background:var(--navy-900);color:#fff;overflow:hidden}
.contact .container{position:relative;z-index:2}
/* minmax(0,…) y no 1fr a secas: con el mínimo automático de grid, un hijo
   con contenido indivisible (el botón del panel de éxito, que es nowrap)
   estiraba la columna más allá del contenedor y la .form-card se salía de
   la pantalla en móvil. */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}
.contact-grid > *{min-width:0}
.contact h2{color:#fff;max-width:16ch}
.contact .lead{color:rgba(255,255,255,.78);margin-top:1.5rem;max-width:46ch}
.contact-info{margin-top:2.5rem;display:flex;flex-direction:column;gap:.2rem}
.ci-row{display:flex;align-items:center;gap:1rem;padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);transition:color .3s var(--ease)}
.ci-row:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.ci-row:hover{color:var(--gold)}
.ci-row .ic{width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:var(--gold);flex:none;transition:background .3s,border-color .3s}
.ci-row:hover .ic{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.ci-row .ic svg{width:20px;height:20px}
.ci-row b{display:block;color:#fff;font-weight:500;font-size:1rem}
.ci-row span{font-size:.85rem;color:rgba(255,255,255,.55)}

/* Formulario */
.form-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);padding:clamp(1.8rem,3.5vw,2.8rem);backdrop-filter:blur(8px)}
.form-card h3{color:#fff;font-size:1.5rem;margin-bottom:.5rem}
.form-card .fc-sub{color:rgba(255,255,255,.6);font-size:.95rem;margin-bottom:1.8rem;font-weight:300}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.55rem;font-weight:500}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:.95em 1.1em;color:#fff;
  font-family:var(--sans);font-size:1rem;transition:border-color .3s,background .3s}
/* 1rem = 16px exactos y no menos: por debajo de 16px Safari de iPhone hace
   auto-zoom al enfocar cada campo y saca al visitante de la página. */
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23CEAE7A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1em center}
.field select option{background:var(--navy-800);color:#fff}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.form-card .btn{width:100%;justify-content:center;margin-top:.6rem}
.form-note{margin-top:1.1rem;font-size:.78rem;color:rgba(255,255,255,.5);text-align:center;font-weight:300}
.form-ok{display:none;text-align:center;padding:1rem 0}
.form-ok.show{display:block;animation:fadeup .6s var(--ease)}
.form-ok .ok-ic{width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:grid;place-items:center;margin:0 auto 1.3rem}
.form-ok .ok-ic svg{width:32px;height:32px}
.form-ok h3{margin-bottom:.6rem}
.form-ok p{color:rgba(255,255,255,.7);font-weight:300}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy-800);color:rgba(255,255,255,.7);padding-top:clamp(3.5rem,7vw,5.5rem)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .logo{color:#fff;margin-bottom:1.4rem}
.foot-brand p{font-weight:300;line-height:1.6;max-width:34ch;color:rgba(255,255,255,.6);font-size:.95rem}
.foot-brand .socials{display:flex;gap:.7rem;margin-top:1.8rem}
.foot-brand .socials a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:#fff;transition:background .35s var(--ease),color .35s,transform .35s,border-color .35s}
.foot-brand .socials a:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px);border-color:var(--gold)}
.foot-brand .socials svg{width:19px;height:19px}
.foot-col h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.3rem;font-weight:500}
.foot-col a{display:block;padding:.42rem 0;font-size:.94rem;color:rgba(255,255,255,.66);font-weight:300;transition:color .3s,padding-left .3s}
.foot-col a:hover{color:#fff;padding-left:.4rem}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  padding:2rem 0;font-size:.82rem;color:rgba(255,255,255,.45);letter-spacing:.02em}
.foot-bottom .tag-line{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1rem}

/* Botón flotante WhatsApp */
.wa-float{position:fixed;right:clamp(1.2rem,3vw,2rem);bottom:clamp(1.2rem,3vw,2rem);z-index:90;
  width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.6);transition:transform .4s var(--ease);
  animation:wapulse 2.6s ease-in-out infinite}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:30px;height:30px}
@keyframes wapulse{0%,100%{box-shadow:0 14px 34px -10px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,.4)}
  50%{box-shadow:0 14px 34px -10px rgba(37,211,102,.6),0 0 0 14px rgba(37,211,102,0)}}

/* Toast */
.toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,140%);z-index:130;
  background:var(--navy-800);color:#fff;border:1px solid rgba(206,174,122,.4);padding:.95em 1.6em;
  border-radius:100px;font-size:.9rem;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);transition:transform .55s var(--ease)}
.toast.show{transform:translate(-50%,0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .aud-grid{grid-template-columns:repeat(2,1fr)}
  .diff-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem}
  .ins-grid{grid-template-columns:1fr 1fr}
  .ins-grid .ins-card:last-child{grid-column:1/-1;flex-direction:row}
  .ins-grid .ins-card:last-child .ins-media{width:45%;aspect-ratio:auto}
  .ins-grid .ins-card:last-child .ins-body{justify-content:center}
  .reels-grid{grid-template-columns:repeat(2,1fr)}
}
/* El menú de 6-7 items + CTA no entra en una línea por debajo de ~1240px:
   colapsar a hamburguesa antes de que haya wrap o recorte del CTA. */
@media(max-width:1240px){
  .menu,.nav-right .lang,.nav-right .nav-cta{display:none}
  .burger{display:block}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:2.5rem}
  .split.reverse .col-media{order:0}
  .frame{aspect-ratio:5/4}
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  /* TRAYECTORIA APILADA (ajuste ago-2026).
     En escritorio los tres hitos van uno al lado del otro y cada uno se abre
     con una regla horizontal con el punto dorado en su extremo izquierdo: se
     lee como una línea de tiempo porque el eje es horizontal.
     Al apilarse esa misma regla queda ENTRE dos hitos y deja de tener lado.
     Medido en Chrome a 375px (getClientRects de la última línea del <p> y del
     ::before del hito siguiente):
         último renglón del hito N   →  halo del punto del hito N+1 : 15,4px
         punto del hito N+1          →  su propio año («La consolidación»): 29,5px
     No hay superposición de cajas —hay 20,4px libres hasta el punto—, pero el
     marcador del hito N+1 está al doble de distancia de lo que anuncia que de
     lo que ya terminó, así que se lee como cierre del párrafo anterior y no
     como apertura del siguiente. Tres reglas de ancho completo terminan
     pareciendo separadores genéricos, no una secuencia.
     Acá el eje se pone donde corresponde cuando la lista es vertical: una
     línea continua a la izquierda con los puntos apoyados sobre ella. El
     punto queda a la altura del año que le pertenece (ambigüedad cero) y la
     línea, al ser una sola y no tres, dice «esto es una secuencia».
     Escritorio no se toca: todo vive dentro del breakpoint. */
  .timeline{grid-template-columns:1fr;gap:0}
  .tl-item{
    border-top:0;
    /* La línea del eje. Es el mismo trazo de 2px y el mismo blanco al 16%
       que usaba el border-top, sólo que ahora corre en vertical. */
    border-left:2px solid rgba(255,255,255,.16);
    padding:0 0 2.6rem 1.6rem;
  }
  /* El eje termina con el último hito: sin esto la línea sobraría por debajo
     del texto final. */
  .tl-item:last-child{padding-bottom:0}
  .tl-item::before{
    /* Centrado sobre el trazo: el ::before se posiciona desde la caja de
       relleno, que arranca después de los 2px de borde, así que -7px deja el
       círculo de 12px repartido 5px/7px alrededor del eje.
       Vertical: .44em (7,04px sobre 16px) deja el centro del círculo sobre el
       centro de la caja de línea del año en cursiva —el primer elemento del
       hito—, medido con getClientRects: desfase 0,04px. */
    top:.44em;left:-7px;
  }
  .area-row{grid-template-columns:1fr;gap:1.5rem}
  .area-num{font-size:1.4rem}
  .area-media{order:-1;aspect-ratio:16/10}
  .hero-meta{display:none}
  .hero{align-items:flex-start;min-height:auto;padding-top:clamp(6rem,16vh,7.5rem);padding-bottom:3rem}
  .hero-grid{grid-template-columns:1fr;gap:1.7rem}
  .hero-portrait{order:-1}
  .hero-portrait .frame{height:46vh;max-height:430px;width:auto;aspect-ratio:4/5}
  .foot-top{grid-template-columns:1fr 1fr;gap:2rem}
  .foot-brand{grid-column:1/-1}
  .tst-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .aud-grid{grid-template-columns:1fr}
  .diff-grid{grid-template-columns:1fr}
  .ins-grid{grid-template-columns:1fr}
  .ins-grid .ins-card:last-child{flex-direction:column}
  .ins-grid .ins-card:last-child .ins-media{width:100%;aspect-ratio:16/10}
  .row-2{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .foot-top{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;text-align:center}
  .reels-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .tst-card{padding:1.8rem 1.4rem}
  /* El botón flotante de WhatsApp comía el final de los renglones: el círculo
     de 60px —más el halo de 14px del pulso— se apoyaba sobre el texto, que en
     el celular ocupa todo el ancho del contenedor. Acá baja a 44px (el mínimo
     táctil recomendado), se corre al vértice y pierde el pulso: el área que
     pisa el texto pasa de 74px a 44px de lado y se corre fuera de donde
     terminan los renglones. El footer suma un colchón para que la última
     línea de la página nunca quede debajo del botón. */
  .wa-float{width:44px;height:44px;right:.5rem;bottom:.9rem;
    animation:none;box-shadow:0 10px 24px -10px rgba(37,211,102,.6)}
  .wa-float svg{width:23px;height:23px}
  /* En el celular el botón se apoya sobre el final de los renglones y come
     palabras. Achicarlo no alcanza (el margen libre a la derecha es de 20px),
     y ensanchar el margen del texto cambiaría dónde cortan TODAS las líneas
     del sitio móvil. Solución que no toca un pixel del diseño: se aparta
     mientras se lee hacia abajo y vuelve apenas se sube (que es cuando la
     persona busca cómo contactar). Lo maneja main.js. */
  .wa-float{transition:transform .35s var(--ease),opacity .35s var(--ease)}
  body.wa-away .wa-float{transform:translateY(150%);opacity:0;pointer-events:none}
  .foot-bottom{padding-bottom:3.5rem}
}

/* Accesibilidad: reducir movimiento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;
    transition-delay:0s!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  /* El CTA del header queda quieto: sin pulso de escala ni de color.
     Sólo se anula la animación (única fuente del transform); el hover del
     botón se deja intacto para no cambiar el comportamiento previo. */
  .nav-cta,.header:not(.scrolled) .nav-cta,.header.scrolled .nav-cta{animation:none!important}
}