/* ── Tipografías auto-alojadas: sin Google Fonts, sin peticiones a terceros ──
   V2-TIPO · escala y parejas calcadas de la web de referencia
   ────────────────────────────────────────────────────────────────────────
   La referencia monta su tipografía sobre dos familias:

     texto    IBM Plex Sans   → se usa LA MISMA. Es OFL, así que se puede
                                auto-alojar y publicar sin licencia.
     display  Diagramm        → NO se puede usar. Es una fuente comercial y en
                                la referencia viaja incrustada en base64, que es
                                la copia con licencia de ESA empresa. Meterla
                                aquí sería usar una licencia ajena.
                                En su lugar va Schibsted Grotesk (OFL): misma
                                familia de grotesca estrecha de caja alta, y con
                                la prosa cerrada de la referencia (-.04/-.06em)
                                el aire del titular es el mismo.

   Las dos son variables: un archivo por subconjunto cubre toda la escala de
   pesos. Descargadas de Google Fonts (latin y latin-ext) y servidas desde
   assets/fonts: cero peticiones a fonts.gstatic.com en producción.
   ─────────────────────────────────────────────────────────────────────── */

/* Funnel Display · titulares · variable 300–800 */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/funnel-display-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/funnel-display-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans · texto · variable 100–700 · la misma de la referencia */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-var-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-var-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HeliOx Consulting Boutique
   Paleta y tipografía del Manual de Identidad Visual 2026.
   Todas las parejas de color usadas para texto superan 4.5:1 (WCAG AA).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Los dos mundos de la marca: la superficie y la profundidad */
  --prof:#03141E;
  --sup:#FFFFFF;
  --blanco:#FFFFFF;

  /* Paleta corporativa */
  --navy:#004B87;      /* PANTONE 301C  */
  --cielo:#00A3E0;     /* PANTONE 299C  */
  --acero:#4B81A9;     /* PANTONE 2149C */
  --gris:#555960;      /* PANTONE 425C  */
  --grisaz:#B7C9D3;    /* PANTONE 5445C */
  --naran:#E14602;     /* PANTONE 1665C */

  /* Variantes oscurecidas: los acentos saturados no llegan a AA sobre la
     superficie clara, así que para texto y botones se usan estas. */
  --naran-txt:#B43802;   /* 4.94:1 sobre --sup */
  --cielo-txt:#006A92;   /* 4.99:1 sobre --sup */

  --filete:rgba(3,20,30,.14);
  --filete-d:rgba(183,201,211,.22);

  --display:"Funnel Display",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Los titulares de la referencia van TODOS en --semibold (600). Es la
     mitad del carácter: a 400 la misma escala se lee flaca y pequeña. */
  --peso-display:600;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* ESCALA DE LA REFERENCIA — valores literales suyos.
     Va en vw, como allí: en escritorio todo crece con el viewport y no hay
     techo en px. Debajo de 1100 px se cambia por la pareja min(vw,px) que
     usa la propia referencia (bloque al final de este archivo).
     Entre paréntesis, el px que sale a 1440 y el escalón equivalente:

       --t-xl   16.667vw  240px  display-xl   lh .8    ls -.06em
       --t-l     7.083vw  102px  display-l    lh .882  ls -.06em
       --t-h1        5vw   72px  display-m    lh .916  ls -.04em
       --t-h2     3.75vw   54px  display-s    lh .888  ls -.04em
       --t-h2s   3.056vw   44px  (interpolado entre s y xs)
       --t-h3      2.5vw   36px  display-xs   lh 1     ls -.03em
       --t-h4    1.667vw   24px  display-xxs  lh 1     ls -.02em
       --t-lead    1.5vw   22px  text-xl      lh 1.222
       --t-body  1.167vw   17px  text-m       lh 1.214
       --t-micro  .875vw   13px  text-xs      lh 1.238               */
  --t-xl:16.667vw;
  --t-l:7.083vw;
  --t-h1:5vw;
  --t-h2:7.083vw;
  --t-h2s:3.75vw;
  --t-h3:2.5vw;
  --t-h4:1.667vw;
  --t-lead:1.5vw;
  --t-body:1.167vw;
  --t-s:1vw;
  --t-micro:.875vw;
  --t-cifra:5vw;

  --gut:clamp(1.375rem,0.41rem + 3.95vw,2.5rem);
  /* .component de la referencia: padding 10vw 0 */
  --sec:10vw;
  /* .container.--l de la referencia: 90vw */
  --max:90vw;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:clamp(84px,6.5vw,108px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--sup);color:var(--prof);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.45;
  font-weight:400;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:var(--peso-display);line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:2px}
.prof :focus-visible,.hero :focus-visible{outline-color:var(--cielo)}
::selection{background:var(--navy);color:#fff}

/* ── utilidades ────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap--n{max-width:1240px}
.wrap--s{max-width:1180px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.sec{padding-block:var(--sec)}
.prof{background:var(--prof);color:var(--blanco)}
.muted{color:var(--gris)}
.muted-d{color:var(--grisaz)}
.lead{font-size:var(--t-lead);line-height:1.28;font-weight:400;letter-spacing:-.02em}

.eb{font-size:var(--t-micro);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--naran-txt);margin:0}
.eb--c{color:var(--cielo)}

/* Oxygen Light sobre fondo oscuro se afina ópticamente: el texto claro sobre
   negro «come» trazo, y a 300 los remates finos de esta fuente se deshacen.
   En las bandas oscuras el cuerpo sube a 400 para leerse con la misma
   densidad que el 300 sobre la superficie clara. El contraste de color es el
   mismo en los dos casos (10,96:1 gris azulado sobre profundidad); lo que
   cambia es el grosor aparente, que WCAG no mide pero el ojo sí.
   Va con :where() a propósito: especificidad cero, así sube solo lo que
   hereda del cuerpo y no pisa ningún peso puesto a mano (.lead en 300,
   .tri__n y .hdx__marca por encima). */
:where(.prof,.hero,.zona-lienzo) :where(p,li,dd,figcaption){font-weight:400}


/* line-height y letter-spacing son los de la referencia, escalón por
   escalón. Son la mitad del efecto: un titular a 72 px con interlineado
   .916 y prosa -.04em ocupa un bloque muy distinto al de 92 px con 1.04. */
.h1{font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h1);
  line-height:.916;letter-spacing:-.04em}
.h2{font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h2);
  line-height:.882;letter-spacing:-.06em}
.h2s{font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h2s);
  line-height:.888;letter-spacing:-.04em}
.h3{font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h3);
  line-height:1;letter-spacing:-.03em}

/* ═══ CABECERA ══════════════════════════════════════════════════════════ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--prof);color:#fff;padding:.9rem 1.5rem;
  font-weight:600;text-decoration:underline;text-underline-offset:4px;
}
.skip:focus{position:fixed;left:.875rem;top:.875rem;outline:3px solid var(--cielo);
  outline-offset:3px}

/* Cabecera encapsulada: una pastilla que flota sobre el contenido, sin tocar
   los bordes del viewport. El hero empieza por debajo de ella, no después. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:1010;
  padding:clamp(.5rem,.9vw,.85rem) 0;
  background:none;backdrop-filter:none;border:0;
}
.hdr__in{
  /* mismo ancho que .wrap: la píldora empieza y acaba donde empieza y
     acaba el contenido de todas las secciones */
  width:var(--max);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2vw,2rem);
  min-height:clamp(58px,4.2vw,74px);
  /* a la izquierda, el sangrado de .wrap: así el logotipo cae en la misma
     vertical que el H1 del hero y que «Los socios, se mojan».
     A la derecha se resta lo que el botón ya trae de su propio radio,
     para que su borde caiga en la vertical opuesta. */
  padding:clamp(.4rem,.5vw,.55rem) calc(var(--gut) - clamp(.4rem,.5vw,.55rem))
          clamp(.4rem,.5vw,.55rem) var(--gut);
  background:var(--sup);
  border-radius:clamp(12px,.9vw,16px);
  box-shadow:0 clamp(8px,.85vw,16px) clamp(22px,2.1vw,40px) rgba(3,20,30,.07);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.hdr.is-stuck .hdr__in{box-shadow:0 clamp(10px,1vw,20px) clamp(26px,2.6vw,48px)
  rgba(3,20,30,.13)}
.hdr__logo{display:inline-flex;align-items:center;min-height:44px}
.hdr__logo img{width:clamp(112px,9.5vw,138px);height:auto;
  transition:opacity .3s var(--ease)}
.hdr__logo:hover img{opacity:.72}

.nav{display:flex;align-items:center;gap:clamp(1.25rem,2.2vw,2.125rem);
  list-style:none;flex-wrap:wrap}
.nav a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:max(13px,1vw);font-weight:500;color:var(--prof);text-decoration:none;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.55rem;height:1px;
  background:var(--navy);transition:right .32s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="true"]::after{right:0}

.burger{display:none;align-items:center;gap:.7rem;background:none;border:0;
  min-height:44px;padding:0 .25rem;cursor:pointer;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.burger__b{position:relative;display:block;width:22px;height:1px;background:var(--prof);
  transition:background-color .2s var(--ease)}
.burger__b::before,.burger__b::after{content:"";position:absolute;left:0;width:22px;
  height:1px;background:var(--prof);transition:transform .3s var(--ease)}
.burger__b::before{top:-6px} .burger__b::after{top:6px}
.burger[aria-expanded="true"] .burger__b{background:transparent}
.burger[aria-expanded="true"] .burger__b::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__b::after{transform:translateY(-6px) rotate(-45deg)}

/* ═══ 1 · HERO ══════════════════════════════════════════════════════════ */
/* ═══ ZONA DEL LIENZO ═════════════════════════════════════════════ */
/* El hero y la mezcla comparten un único lienzo WebGL, igual que en la
   referencia: entre las dos secciones no hay corte de fondo, solo cambia
   lo que se apoya encima. El canvas vive aquí, no dentro del hero, porque
   .hero lleva overflow:hidden y no lo dejaría pasar de su altura. */
.zona-lienzo{position:relative;isolation:isolate;overflow:hidden;
  background:var(--prof);color:var(--blanco)}
.zona-lienzo__gl{position:absolute;inset:0;z-index:-4;display:block;
  width:100%;height:100%;background:var(--prof)}
/* Plan B sin WebGL: el mismo reparto de color, en estático */
.zona-lienzo--plano .zona-lienzo__gl{
  background:
    radial-gradient(120% 60% at 72% 26%,rgba(0,163,224,.20) 0%,transparent 62%),
    linear-gradient(102deg,#03141E 0%,#062a3f 42%,#00436f 70%,#03141E 100%);
}

.hero{
  position:relative;overflow:hidden;
  min-height:min(94svh,980px);display:flex;align-items:center;
  padding-block:clamp(8.5rem,17vh,12rem) clamp(7rem,16vh,11rem);
  background:transparent;
}
/* El scrim se abre por la derecha: el lienzo tiene que verse. A la
   izquierda, donde vive el H1, sigue cerrado para no perder contraste.
   ⚠ Y MUERE ANTES DE LLEGAR ABAJO. Si acaba de golpe en el borde del
   hero, en la costura con la mezcla sale una raya horizontal: encima el
   lienzo va velado al 16-82 % y debajo arranca en 0. Con la máscara los
   dos velos se encuentran en 0 y la costura desaparece. El corte de la
   máscara empieza al 58 %, muy por debajo del H1, que vive entre el 19 y
   el 36 % de la altura del hero. */
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(3,20,30,.82) 0%,rgba(3,20,30,.54) 46%,
    rgba(3,20,30,.16) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%)}
.hero__in{display:flex;gap:clamp(2.5rem,5vw,4.5rem);justify-content:space-between;
  align-items:flex-start}
.hero__l{flex:0 1 58%}
.hero__r{flex:0 1 34%;display:flex;flex-direction:column;align-items:flex-start;
  gap:2rem;padding-top:.875rem}
.hero h1{color:#fff}
/* nunca más de cuatro líneas: el tamaño lo ajusta el JS. `pretty` evita
   además que la última línea se quede con una palabra suelta. */
.hero__p{color:#fff;text-wrap:pretty}

/* ── titular líquido: "Consultores" fijo + palabra que muta ────────────── */
.hero__sub{
  margin-top:clamp(.6rem,1.1vw,1rem);
  font-weight:400;color:var(--grisaz);
  font-size:var(--t-body);line-height:1.45;max-width:36ch;
}
/* "más" no se mueve: solo muta la palabra que cambia, así las letras
   compartidas no se duplican al cruzarse. Alineado por arriba y no por
   línea base, porque la caja que muta no tiene contenido en flujo. */
/* Alineación óptica de «Consultores» con el «más» de la línea de abajo.
   ⚠ EL VALOR Y EL SIGNO DEPENDEN DE LA FUENTE: hay que volver a medirlo
   cada vez que se cambie --display. Medido en canvas a 100 px con el peso
   y la prosa reales de la línea, en Funnel Display 600 la tinta de
   «Consultores» arranca a 3,99 px de la caja y la de «más» a 2,83 px, así
   que la C se mete 1,16 px y hay que sacarla.
   Para comparar: Didot pedía -.055em y Schibsted Grotesk +.036em. */
.hero__l .split-t{margin-left:-.0116em}
.hero__morph-line{display:flex;align-items:flex-start;flex-wrap:wrap}
.hero__morph-fijo,.hero__morph{flex:0 0 auto}
.hero__morph-fijo{margin-right:.22em}
/* Sin JS (o con "menos movimiento") la palabra queda en flujo normal,
   tamaño natural: la animación solo se activa cuando el script añade
   .is-listo, que es también el momento en que JS fija un ancho en px para
   poder animarlo (a "auto" no se puede hacer transition). */
.hero__morph{position:relative;display:inline-block}
.hero__morph.is-listo{transition:width .62s var(--expo)}
.hero__morph-w{font:inherit;color:inherit;white-space:nowrap}
/* max-content es imprescindible: sin él la palabra en posición absoluta se
   mide contra el ancho que JS acaba de fijar en su propia caja, y cada ciclo
   la dejaba un poco más estrecha hasta hacerla desaparecer. */
.hero__morph.is-listo .hero__morph-w{position:absolute;left:0;top:0;
  width:max-content}
/* La palabra se cambia letra a letra y en dos tiempos: primero se vacía la
   que sale —rápida, levantándose en cascada— y solo cuando ya no queda nada
   entra la nueva desde abajo. Así no hay ni un fotograma con las dos frases
   superpuestas, que es lo que ensuciaba la lectura. Sin desenfoque: a este
   cuerpo los remates finos de la grotesca lo acusan. */
.hero__morph-w i{font-style:normal;display:inline-block;white-space:pre}
.hero__morph.is-listo .hero__morph-w i{
  opacity:0;transform:translateY(.28em);
  transition:opacity .4s var(--expo),transform .52s var(--expo);
}
.hero__morph.is-listo .hero__morph-w.is-activa i{opacity:1;transform:none}
.hero__morph.is-listo .hero__morph-w.is-sale i{
  opacity:0;transform:translateY(-.3em);
  transition:opacity .26s var(--expo),transform .32s var(--expo);
}

.hero__down{position:absolute;left:50%;bottom:clamp(1.5rem,4vh,2.5rem);
  transform:translateX(-50%);z-index:2;display:grid;place-items:center;
  width:44px;height:44px;color:var(--grisaz);text-decoration:none}
.hero__down svg{width:15px;height:24px;animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}

/* ═══ bloque a dos columnas asimétrico ═════════════════════════════════ */
.split{display:flex;gap:clamp(2.5rem,5.5vw,5rem);justify-content:space-between;
  align-items:flex-start}
.split__l{flex:0 1 55%} .split__r{flex:0 1 36%}
.split--wide .split__l{flex:0 1 52%} .split--wide .split__r{flex:0 1 40%}
.stack{display:flex;flex-direction:column;gap:1.125rem}

/* cabecera de sección sobre filete */
.shead{display:flex;gap:clamp(1.5rem,3.4vw,3rem);justify-content:space-between;
  align-items:flex-end;border-bottom:1px solid var(--filete);
  padding-bottom:1.75rem;margin-bottom:clamp(2.5rem,4.6vw,4.125rem)}
.prof .shead{border-color:var(--filete-d)}
.shead__l{flex:0 1 48%} .shead__c{flex:0 1 32%} .shead__r{flex:0 0 auto}
/* Funnel Display no trae cursiva: el descriptor va en la cursiva de IBM Plex,
   que sí la tiene dibujada. */
.shead__c p{font-family:var(--sans);font-style:italic;font-weight:400;
  font-size:var(--t-lead);line-height:1.28;letter-spacing:-.02em}

/* ═══ 4 · SOCIOS ════════════════════════════════════════════════════════ */
/* ═══ SOCIOS · dos columnas y relevo al hacer scroll ════════════════════════
   Izquierda: titular y descriptor, quietos. Derecha: un socio cada vez.
   Mientras dura la pista el bloque se queda pegado arriba y el scroll pasa
   de un socio al siguiente; cuando se acaban, la página sigue como siempre.

   Sin JS o con «menos movimiento» NO se activa nada de esto: la clase
   .is-fijo la pone el script. Sin ella queda una sección normal de dos
   columnas con los dos socios uno debajo del otro, que es perfectamente
   legible y es lo que ve un lector de pantalla recorriendo el DOM. */
.socios-sec{position:relative}
.socios-fijo{padding-block:var(--sec)}
.socios-grid{
  display:grid;grid-template-columns:38% 54%;
  gap:clamp(2rem,4vw,4rem);justify-content:space-between;align-items:center;
}
.socios-des{margin-top:clamp(1rem,1.8vw,1.6rem);max-width:34ch}

/* índice 01/02: da idea de cuántos quedan sin añadir texto nuevo */
.socios-idx{list-style:none;display:flex;gap:1.25rem;margin-top:clamp(2rem,3.5vw,3rem)}
.socios-idx li{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;
  color:var(--gris);opacity:.42;transition:opacity .5s var(--ease),color .5s var(--ease);
}
.socios-idx li::after{
  content:"";display:block;height:1px;margin-top:.5rem;
  background:currentColor;transform:scaleX(.34);transform-origin:left;
  transition:transform .6s var(--ease);
}
.socios-idx li.is-activo{opacity:1;color:var(--naran-txt)}
.socios-idx li.is-activo::after{transform:scaleX(1)}

.socios-lista{position:relative}
.socio + .socio{margin-top:clamp(3rem,6vw,5rem)}
.socio__fig{margin:0;position:relative;width:100%}
.socio__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-card)}
/* la pastilla vuela sobre la esquina de la foto: va DENTRO de la figura para
   que se pegue a la foto y no al ancho de la columna */
.socio__plus{
  position:absolute;right:0;bottom:0;z-index:2;
  display:grid;place-items:center;
  width:clamp(52px,5.2vw,68px);aspect-ratio:1;border-radius:50%;
  background:var(--sup);border:1px solid var(--naran);color:var(--naran);
  font-size:var(--t-h4);font-weight:var(--peso-display);line-height:1;
  letter-spacing:-.02em;margin:0;
  transform:translate(34%,34%);
}
.socio--b .socio__plus{border-color:var(--cielo-txt);color:var(--cielo-txt)}

/* ── modo relevo: solo cuando el script dice que sí ──────────────────────── */
.socios-sec.is-fijo .socios-pista{height:var(--pista,240svh)}
/* La cabecera es fija y tapa los primeros ~74 px, así que centrar en 100svh
   deja el conjunto ópticamente bajo. Se le descuenta la altura de la
   cabecera por arriba y se centra en lo que queda, que es la pantalla que
   el lector ve de verdad. */
.socios-sec.is-fijo .socios-fijo{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;
  padding-block:var(--hdr-h,74px) 0;
}
.socios-sec.is-fijo .socios-grid{width:100%;align-items:center}
.socios-sec.is-fijo .socio{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;transform:translateY(26px);
  transition:opacity .55s var(--ease),transform .7s var(--ease),visibility .55s;
}
.socios-sec.is-fijo .socio.is-activo{opacity:1;visibility:visible;transform:none}
/* la foto no puede comerse la pantalla: se topa en alto y la caja se
   estrecha con ella para que la pastilla siga en su esquina */
.socios-sec.is-fijo .socios-lista{min-height:min(74svh,640px)}
.socios-sec.is-fijo .socio__fig{width:min(100%,34svh)}
.socios-sec.is-fijo .socio__n{margin-top:clamp(1.4rem,2.4vw,2rem)}
/* estas dos venían de la versión anterior de la sección y siguen valiendo */
.socio__n{margin-top:1.125rem}
.socio__c{font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--naran-txt);margin:.6rem 0 .875rem}
.socio--b .socio__c{color:var(--cielo-txt)}

@media (prefers-reduced-motion:reduce){
  .socios-sec.is-fijo .socio{transition:none}
}

@media (max-width:1080px){
  .socios-grid{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
  .socios-des{max-width:52ch}
  /* en columna el relevo estorba: los dos socios, uno debajo del otro */
  .socios-sec.is-fijo .socios-pista{height:auto}
  .socios-sec.is-fijo .socios-fijo{position:static;height:auto;
    padding-block:var(--sec);display:block}
  .socios-sec.is-fijo .socio{position:static;opacity:1;visibility:visible;
    transform:none}
  .socios-sec.is-fijo .socios-lista{min-height:0}
  .socios-sec.is-fijo .socio__fig{width:100%}
  .socios-idx{display:none}
}
/* Tarjeta tipográfica: el segundo socio no tiene retrato propio todavía,
   así que su lugar lo ocupa el monograma sobre el sonar. */
.socio__mono{
  position:relative;display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;
  background:var(--prof);
}
.socio__mono span{position:relative;z-index:2;font-family:var(--display);
  font-size:var(--t-l);line-height:.882;color:var(--blanco);
  letter-spacing:-.06em;font-weight:var(--peso-display)}
.socio__mono span i{font-style:normal;color:var(--cielo)}
.socio__mono::before,.socio__mono::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  border-radius:50%;border:1px solid rgba(0,163,224,.3)}
.socio__mono::before{width:56%;aspect-ratio:1}
.socio__mono::after{width:92%;aspect-ratio:1;border-color:rgba(225,70,2,.26)}

/* ═══ 5 · PERSPECTIVAS + SONAR ══════════════════════════════════════════ */
.persp{position:relative;overflow:hidden}
.sonar{position:absolute;right:clamp(-420px,-16vw,-160px);top:50%;translate:0 -50%;
  width:min(900px,68vw);aspect-ratio:1;pointer-events:none;z-index:0}
.sonar span{position:absolute;top:50%;left:50%;translate:-50% -50%;border-radius:50%;
  border:1px solid rgba(0,163,224,.26)}
.sonar span:nth-child(1){width:20%;aspect-ratio:1}
.sonar span:nth-child(2){width:40%;aspect-ratio:1}
.sonar span:nth-child(3){width:62%;aspect-ratio:1;border-color:rgba(225,70,2,.26)}
.sonar span:nth-child(4){width:84%;aspect-ratio:1}
.sonar span:nth-child(5){width:100%;aspect-ratio:1;border-color:rgba(225,70,2,.16)}
.persp__in{position:relative;z-index:2}
.persp__h{max-width:60ch;flex:0 1 62%;margin-bottom:clamp(2.75rem,5.4vw,5.375rem)}
.persp__cols{display:flex}
.persp__c{flex:1 1 0;padding-inline:clamp(1rem,2.4vw,2.125rem)}
.persp__c + .persp__c{border-left:1px solid var(--filete-d)}
.persp__c:first-child{padding-left:0} .persp__c:last-child{padding-right:0}
.persp__n{display:block;font-size:var(--t-micro);letter-spacing:.2em;color:var(--cielo)}
.persp__c h3{margin:1rem 0}

/* ═══ 7 · LÍNEA DE FLOTACIÓN ════════════════════════════════════════════ */
/* La foto se ve SIEMPRE entera: `contain` en vez de `cover`. Las franjas que
   quedan a los lados las cubre un degradado que replica los colores exactos
   de la fotografía (muestreados de ella), así que no se ve la costura y la
   sección puede ser tan alta como haga falta. */
.flot{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;
  min-height:clamp(680px,70vw,1100px);
  /* El corte del degradado sigue a la línea de agua de la foto cuando ésta se
     desplaza con el scroll: así las bandas de color y el mar nunca se separan. */
  /* color de respaldo mientras carga la foto: la línea de agua de la nueva
     está al 45,7 % de su alto */
  background:linear-gradient(to bottom,#FFFFFF 0 45.7%,#0A1520 45.7% 100%);
}
.flot__bg{
  /* a sangre y con alto de sobra: ese excedente es el recorrido del parallax,
     bastante más largo que antes */
  position:absolute;left:0;top:-11%;z-index:-2;width:100%;height:122%;
  object-fit:cover;object-position:center center;
  transform:translate3d(0,var(--pimg,0px),0);
  will-change:transform;
}
/* Cierre inferior: la foto se mueve con el parallax, así que el último tramo
   de la sección se apaga siempre al mismo negro con el que arranca la sección
   siguiente. Sin esto, según el scroll, la junta cambiaba de tono. */
.flot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;
  height:clamp(80px,14vh,190px);pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(0,4,12,.55) 55%,#00040C 100%);
}
.flot__in{
  grid-area:1/1;z-index:1;
  /* la primera fila acaba en la línea de agua de la foto, no a la mitad */
  display:grid;grid-template-rows:45.7% 1fr;
  align-content:stretch;
}
/* Esta banda es la única columna estrecha que lleva un .h2. A 102 px (el
   escalón display-l de la referencia) la palabra «profundidad.» mide 563 px
   y no cabe: ninguna división de línea la salva. Aquí el titular baja al
   escalón display-s —que es justo lo que hace la referencia con los
   titulares metidos en columna estrecha— y la banda se ensancha lo justo
   para que la palabra larga (311 px a 54 px) entre con holgura. */
.flot__t1 .h2{font-size:var(--t-h2s);line-height:.888;letter-spacing:-.04em}
/* 40ch y no 34: con 34 «Nuestro nombre» no cabía en una línea y rompía en
   cuatro, dejando «de» solo. Con 40 entran las tres que toca:
   «Nuestro nombre / habla de / profundidad.» */
.flot__t1{
  grid-row:1;align-self:end;justify-self:start;
  max-width:min(40ch,50%);
  padding-bottom:clamp(3rem,6.5vw,7rem);
  transform:translate3d(0,var(--p1,0px),0);will-change:transform;
}
/* el bloque de abajo va a la DERECHA del iceberg */
.flot__t2{
  grid-row:2;align-self:start;justify-self:end;
  max-width:min(46ch,38%);
  padding-top:clamp(3.5rem,7.5vw,8rem);
  transform:translate3d(0,var(--p2,0px),0);will-change:transform;
}
.flot__t1 .eb{color:var(--naran-txt)}
.flot__t1 h2{color:var(--prof)}
.flot__t2 p{color:var(--grisaz)}
.flot__t2 .lead{color:#fff}
.flot__t2 p + p{margin-top:clamp(1rem,1.5vw,1.4rem)}

/* ═══ 9 · CASOS ═════════════════════════════════════════════════════════ */
.caso{display:flex;gap:clamp(2.5rem,5.5vw,4.5rem);align-items:center;
  justify-content:space-between}
.caso + .caso{margin-top:clamp(3.5rem,7vw,6.25rem)}
.caso--rev{flex-direction:row-reverse}
.caso__fig{flex:0 1 46%;margin:0;overflow:hidden}
.caso__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:scale .7s var(--ease)}
.caso:hover .caso__fig img{scale:1.04}
.caso--rev .caso__fig{margin-top:clamp(0rem,4vw,3.5rem)}
.caso__t{flex:0 1 46%}
.caso__t p{margin-top:1.125rem;font-size:var(--t-lead)}
.caso__rule{display:block;width:150px;height:1px;background:var(--cielo);
  margin-top:1.5rem;transform-origin:left;transform:scaleX(.64);
  transition:transform .5s var(--ease)}
.caso:hover .caso__rule{transform:scaleX(1)}

/* ═══ 10 · EQUIPOS ══════════════════════════════════════════════════════ */
.equipos{position:relative;isolation:isolate;overflow:hidden;
  background:var(--prof);color:var(--blanco)}
.equipos h2,.equipos h3{color:var(--blanco)}
.equipos__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover}
.equipos__scrim{position:absolute;inset:0;z-index:-1;background:rgba(3,20,30,.78)}

/* ═══ CONTACTO DENTRO DEL PIE ═══════════════════════════════════════════
   Lo que antes era una sección propia justo antes del pie: mismo formulario,
   ahora bajo el claim y en dos columnas. */
.fcont{
  display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,4.5rem);
  justify-content:space-between;align-items:flex-start;
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.fcont__l{flex:0 1 38%;min-width:0}
.fcont__r{flex:0 1 54%;min-width:0}
.fcont h2{color:#fff}
.fcont__l p{margin-top:clamp(1rem,1.6vw,1.4rem);max-width:38ch}
.fdir--grande{margin-top:clamp(1.5rem,2.4vw,2.25rem)}
.fdir--grande a{font-size:var(--t-lead);color:#fff;min-height:56px;
  border-bottom:1px solid var(--filete-d)}
.fdir--grande a:hover{color:var(--cielo)}
/* el textarea no estaba contemplado en el pie: sin esto sale texto negro */
.ftr .f textarea{color:#fff;border-bottom-color:rgba(183,201,211,.42)}
.ftr .f textarea:hover{border-bottom-color:rgba(183,201,211,.75)}
.ftr .f textarea:focus{border-bottom-color:var(--cielo)}
.ftr .btn--navy{background:var(--cielo);color:var(--prof)}

.form{display:flex;flex-wrap:wrap;gap:1.625rem}
.f{display:flex;flex-direction:column;gap:.5rem;flex:1 1 100%;min-width:0}
.f--half{flex:1 1 calc(50% - .82rem)}
.f label{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.f input,.f textarea{
  width:100%;border:0;border-bottom:1px solid rgba(3,20,30,.28);background:transparent;
  padding:.7rem 0;font:400 1.06rem/1.5 var(--sans);color:var(--prof);border-radius:0;
  transition:border-color .25s var(--ease);
}
.f input:hover,.f textarea:hover{border-bottom-color:rgba(3,20,30,.5)}
.f input:focus,.f textarea:focus{outline:0;border-bottom-color:var(--navy);
  border-bottom-width:2px;padding-bottom:calc(.7rem - 1px)}
.f textarea{resize:vertical;min-height:132px}
.f--err input,.f--err textarea{border-bottom-color:var(--naran-txt);border-bottom-width:2px}
.f__err{font-size:var(--t-micro);color:var(--naran-txt);min-height:0}
.f__err:empty{display:none}

.ck{display:flex;gap:.75rem;align-items:flex-start;flex:1 1 100%}
.ck input{flex:0 0 auto;width:24px;height:24px;margin:.18rem 0 0;accent-color:var(--navy);
  cursor:pointer}
.ck label{cursor:pointer}
.ck label{font-size:var(--t-s);letter-spacing:0;text-transform:none;font-weight:400;
  color:var(--gris)}
.ck a{color:var(--navy)}
.form__msg{flex:1 1 100%;margin:0;font-size:var(--t-body)}
.form__msg:empty{display:none}
.form__msg--ok{color:var(--navy);font-weight:600}
.form__msg--ko{color:var(--naran-txt)}

/* ═══ PIE ═══════════════════════════════════════════════════════════════ */
.ftr{background:var(--prof);color:#fff;
  padding-block:clamp(4rem,8vw,6.5rem) 2.5rem}
.claim{font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h1);
  line-height:.916;letter-spacing:-.04em}
.flotline{padding:.5rem 0 1.625rem}
.flotline i{display:block;width:7px;height:7px;border-radius:50%;background:var(--cielo)}
.flotline i:first-child{margin:0 0 .8rem 3.875rem}
.flotline i:last-child{margin:.8rem 0 0 6.5rem;background:var(--naran)}
.flotline hr{border:0;height:1px;background:var(--cielo);opacity:.55;margin:0}
.fgrid{display:flex;gap:clamp(2rem,4.4vw,3.5rem);justify-content:space-between;
  padding-block:clamp(2.5rem,4.4vw,4rem) 3.5rem}
.fgrid__c1{flex:0 1 24%} .fgrid__c2{flex:0 1 26%} .fgrid__c3{flex:0 1 36%}
.fgrid--2{gap:clamp(2rem,6vw,5rem)}
.fgrid--2 .fgrid__c1{flex:0 1 32%}
.fgrid h2{font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h4);
  line-height:1;letter-spacing:-.02em;
  margin-bottom:.625rem}
.fnav{list-style:none}
.fnav a,.fdir a,.fdir span{display:flex;align-items:center;min-height:48px;
  color:var(--grisaz);text-decoration:none;transition:color .25s var(--ease)}
.fnav a:hover,.fdir a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.fdir{font-style:normal}
.ftr .f label{color:#fff}
.ftr .f input{color:#fff;border-bottom-color:rgba(183,201,211,.42)}
.ftr .f input:hover{border-bottom-color:rgba(183,201,211,.75)}
.ftr .f input:focus{border-bottom-color:var(--cielo)}
.ftr .ck label{color:var(--grisaz)}
.ftr .ck a{color:var(--cielo)}
.ftr .ck input{accent-color:var(--cielo)}
.ftr .form__msg--ok{color:var(--cielo)}
.ftr .form__msg--ko{color:#FF9C6B}
.fbase{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  border-top:1px solid var(--filete-d);padding-top:1.375rem}
.fbase p{font-size:var(--t-micro);color:var(--grisaz)}
.soc{display:flex;gap:1.75rem;list-style:none}
.soc a{display:flex;align-items:center;min-height:44px;font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--grisaz);text-decoration:none}
.soc a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.ftr__logo{width:132px;margin-bottom:2rem}

/* ═══ ANIMACIÓN DE ENTRADA ══════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */
/* El corte de 1100 px y los pares min(vw,px) son los de la referencia, tal
   cual. Por debajo de ese ancho la escala deja de crecer con el viewport y se
   topa en un px fijo, que es lo que evita que un titular de 16,7vw se coma el
   móvil entero.
   Dos desviaciones conscientes, las dos por accesibilidad:
   · --t-body no baja del par de la referencia pero se le pone suelo de 16 px
     (la referencia se queda en 14,3 px en algunos textos largos).
   · el botón conserva min-height 44 px (área táctil). */
@media (max-width:1100px){
  :root{
    --t-xl:min(25vw,99.23px);
    --t-l:min(16.667vw,66.15px);
    --t-h1:min(11.667vw,46.31px);
    --t-h2:min(16.667vw,66.15px);
    --t-h2s:min(10.556vw,41.9px);
    --t-h3:min(8.333vw,33.08px);
    --t-h4:min(5.833vw,23.15px);
    --t-lead:min(5vw,19.85px);
    --t-body:max(16px,min(4.444vw,17.64px));
    --t-s:max(15px,min(3.611vw,14.33px));
    --t-micro:min(3.611vw,14.33px);
    --t-cifra:min(11.667vw,46.31px);
    --sec:min(20vw,79.38px);
    --max:100%;
  }
  .h1,.claim{line-height:.952}
  .h2{line-height:.947}
  .h2s{line-height:.95}
  .h3{line-height:1}
  .lead{line-height:1.16}
  .agua__t,.numlist__v{line-height:.88}
  .prepie__t{line-height:.83}
}

/* ── reflujos de columna ─────────────────────────────────────────────── */
/* Entre 860 y 1280 px el descriptor del hero necesita más columna para caber
   en cuatro líneas sin bajar de 16 px, que es el suelo de cuerpo del proyecto:
   con el reparto 58/34 no llegaba. */
@media (max-width:1280px){
  .hero__l{flex:0 1 50%}
  .hero__r{flex:0 1 46%}
}

@media (max-width:1080px){
  .split,.socios,.shead,.flot__in{flex-wrap:wrap}
  .split__l,.split__r,.split--wide .split__l,.split--wide .split__r{flex:1 1 100%}
  .shead__l,.shead__c{flex:1 1 100%}
  .shead{align-items:flex-start;gap:1.5rem}
  .persp__h{flex:1 1 100%}
  .faq{flex:1 1 100%}
}

@media (max-width:860px){
  .burger{display:flex}
  .hdr__nav{
    position:fixed;left:clamp(.625rem,2vw,1.75rem);right:clamp(.625rem,2vw,1.75rem);
    top:calc(var(--hdr-h,72px) + .35rem);z-index:99;
    background:var(--sup);border-radius:clamp(12px,3vw,16px);
    box-shadow:0 14px 34px rgba(3,20,30,.14);
    padding:.35rem 1.15rem 1rem;
    display:grid;grid-template-rows:0fr;
    overflow:hidden;visibility:hidden;
    transition:grid-template-rows .4s var(--ease),visibility .4s;
  }
  .hdr__nav>*{min-height:0;overflow:hidden}
  .hdr__nav.is-open{grid-template-rows:1fr;visibility:visible}
  .hdr__nav.is-open>*{overflow-y:auto;max-height:min(70svh,560px)}
  .nav{flex-direction:column;align-items:stretch;gap:0}
  .nav li + li{border-top:1px solid var(--filete)}
  .nav a{min-height:56px;font-size:1.06rem}
  .nav a::after{display:none}
  .hdr__cta{display:none}

  .hero{min-height:auto;padding-block:clamp(4.5rem,11vh,6rem) clamp(5rem,12vh,7rem)}
  .hero__in{flex-wrap:wrap}
  .hero__l,.hero__r{flex:1 1 100%}
  .hero__r{padding-top:.5rem}
  .hero__down{display:none}

  .persp__cols{flex-direction:column}
  .persp__c{padding:0}
  .persp__c + .persp__c{border-left:0;border-top:1px solid var(--filete-d);
    padding-top:1.75rem;margin-top:1.75rem}

  /* en móvil el texto necesita todo el ancho; la foto sigue detrás, con
     la costura al 50 % y una banda de refuerzo para que el texto se lea */
  /* en móvil la foto se reduce mucho: se coloca entre los dos bloques de
     texto, entera, y las bandas de color siguen dando la línea de flotación */
  /* en columna: titular sobre crema, foto entera en medio, texto sobre
     profundidad. `display:contents` saca los dos bloques del wrap para poder
     intercalar la foto entre ellos con `order`. */
  .flot{min-height:0;display:flex;flex-direction:column;background:var(--sup)}
  .flot__in{display:contents}
  .flot__t1,.flot__t2{max-width:100%;transform:none;
    padding-inline:var(--gut);width:100%}
  .flot__t1{order:1;padding-block:clamp(3.5rem,14vw,5rem) clamp(1.75rem,6vw,2.5rem)}
  /* en móvil la foto va entera, con su proporción real */
  .flot__bg{order:2;position:static;width:100%;height:auto;
    aspect-ratio:3038/2610;object-fit:cover;transform:none;z-index:0}
  .flot__t2{order:3;background:var(--prof);
    padding-block:clamp(2rem,7vw,3rem) clamp(3.5rem,14vw,5rem)}

  .caso,.caso--rev{flex-direction:column;gap:1.75rem}
  .caso__fig,.caso__t{flex:1 1 100%;width:100%}
  .caso--rev .caso__fig{margin-top:0}

  /* el bloque de contacto se repartía 38/54 también en móvil: con el titular
     al escalón de la referencia, 38 % de 390 px son 131 px y «Bajemos» no
     cabe ni en su propia línea. Apilado. */
  .fcont{flex-wrap:wrap}
  .fcont__l,.fcont__r{flex:1 1 100%}
  .fgrid{flex-direction:column;gap:2.5rem}
  .fgrid__c1,.fgrid__c2,.fgrid__c3{flex:1 1 100%}
  .fbase{flex-direction:column;align-items:flex-start;gap:.25rem}
  .f--half{flex:1 1 100%}
}

/* ═══ IMPRESIÓN ═════════════════════════════════════════════════════════ */
@media print{
  .hdr,.burger,.hero__down,.sonar,.form,.fform{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .prof,.hero,.ftr,.equipos,.flot{background:#fff!important;color:#000!important}
  .hero__bg,.equipos__bg,.hero__scrim,.equipos__scrim{display:none}
  .h1,.h2,.h2s,.h3,.claim,.muted-d,.hero h1,.hero__p{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}