/* ── Tipografías auto-alojadas: sin Google Fonts, sin peticiones a terceros ──
   V2 · Titulares en DIDOT · cuerpos en BROWN PRO
   ───────────────────────────────────────────────────────────────────────────
   DIDOT: convertido desde el Didot.ttc de RECURSOS MARCA (Regular / Italic /
   Bold), subconjunto latin + latin-ext.
   ⚠ Ese .ttc es la versión del sistema macOS (Linotype). Para publicar hace
   falta licencia webfont de Linotype Didot; ver LEEME-PROGRAMADOR.md.

   BROWN PRO: fuente comercial (lineto), no incluida en RECURSOS MARCA. El
   @font-face la busca primero instalada en el equipo y, si no está, usa el
   sustituto geométrico de abajo para que la maqueta se lea con las mismas
   proporciones. Cuando lleguen los .woff2 reales: súbelos a assets/fonts con
   los nombres brownpro-300/400/500/600.woff2 y descomenta las líneas url()
   marcadas ⇽ BROWN PRO REAL.
   ─────────────────────────────────────────────────────────────────────────── */

/* Didot · Regular · latin-ext */
@font-face {
  font-family: 'Didot Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/didot-regular-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;
}

/* Didot · Regular · latin */
@font-face {
  font-family: 'Didot Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/didot-regular-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;
}

/* Didot · Italic · latin-ext */
@font-face {
  font-family: 'Didot Web';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/didot-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;
}

/* Didot · Italic · latin */
@font-face {
  font-family: 'Didot Web';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/didot-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;
}

/* Didot · Bold · latin-ext */
@font-face {
  font-family: 'Didot Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/didot-bold-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;
}

/* Didot · Bold · latin */
@font-face {
  font-family: 'Didot Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/didot-bold-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;
}

/* Brown Pro · Light 300 */
@font-face {
  font-family: 'Brown Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Brown Pro Light'), local('BrownPro-Light'), local('Brown Light'),
       /* url("../fonts/brownpro-300.woff2") format('woff2'), ⇽ BROWN PRO REAL */
       url("../fonts/brownpro-stand-in-300.woff2") format('woff2');
}

/* Brown Pro · Regular 400 */
@font-face {
  font-family: 'Brown Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Brown Pro'), local('BrownPro-Regular'), local('Brown'),
       /* url("../fonts/brownpro-400.woff2") format('woff2'), ⇽ BROWN PRO REAL */
       url("../fonts/brownpro-stand-in-400.woff2") format('woff2');
}

/* Brown Pro · Medium 500 */
@font-face {
  font-family: 'Brown Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Brown Pro Medium'), local('BrownPro-Medium'),
       /* url("../fonts/brownpro-500.woff2") format('woff2'), ⇽ BROWN PRO REAL */
       url("../fonts/brownpro-stand-in-500.woff2") format('woff2');
}

/* Brown Pro · Italic 300-700 (una sola cursiva variable; la real trae cortes) */
@font-face {
  font-family: 'Brown Pro';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: local('Brown Pro Italic'), local('BrownPro-Italic'),
       /* url("../fonts/brownpro-italic.woff2") format('woff2'), ⇽ BROWN PRO REAL */
       url("../fonts/brownpro-stand-in-italic.woff2") format('woff2');
}

/* Brown Pro · Bold 600-700 */
@font-face {
  font-family: 'Brown Pro';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: local('Brown Pro Bold'), local('BrownPro-Bold'), local('Brown Bold'),
       /* url("../fonts/brownpro-600.woff2") format('woff2'), ⇽ BROWN PRO REAL */
       url("../fonts/brownpro-stand-in-700.woff2") format('woff2');
}

/* ═══════════════════════════════════════════════════════════════════════════
   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:"Didot Web",Didot,"Didot LT Pro","Bodoni MT",Georgia,serif;
  --sans:"Brown Pro","Brown",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Escala tipográfica fluida: 390px → 1440px */
  --t-h1:clamp(2.75rem,1.24rem + 6.2vw,5.75rem);
  --t-h2:clamp(2rem,1.19rem + 3.32vw,3.625rem);
  --t-h2s:clamp(1.75rem,1.14rem + 2.49vw,2.97rem);
  --t-h3:clamp(1.5rem,1.19rem + 1.24vw,2.125rem);
  --t-h4:clamp(1.25rem,1.1rem + 0.62vw,1.56rem);
  --t-body:clamp(1rem,0.97rem + 0.12vw,1.06rem);
  --t-lead:clamp(1.06rem,0.94rem + 0.5vw,1.25rem);
  --t-cifra:clamp(2.5rem,1.28rem + 5vw,3.875rem);

  --gut:clamp(1.375rem,0.41rem + 3.95vw,2.5rem);
  --sec:clamp(4.5rem,2.24rem + 9.26vw,8.75rem);
  --max:1400px;
  --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.7;
  font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:400;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.7;font-weight:300}

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

.h1{font-family:var(--display);font-size:var(--t-h1);line-height:1.04;letter-spacing:-.008em}
.h2{font-family:var(--display);font-size:var(--t-h2);line-height:1.1;letter-spacing:-.008em}
.h2s{font-family:var(--display);font-size:var(--t-h2s);line-height:1.12;letter-spacing:-.006em}
.h3{font-family:var(--display);font-size:var(--t-h3);line-height:1.18;letter-spacing:-.003em}

/* ═══ CABECERA ══════════════════════════════════════════════════════════ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--prof);color:#fff;padding:.9rem 1.5rem;
  font-weight:500;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{
  width:min(1500px,calc(100% - clamp(1.25rem,4vw,3.5rem)));
  margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2vw,2rem);
  min-height:clamp(58px,4.2vw,74px);
  padding:clamp(.4rem,.5vw,.55rem) clamp(.4rem,.5vw,.55rem)
          clamp(.4rem,.5vw,.55rem) clamp(1.1rem,1.8vw,2rem);
  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:.94rem;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:.8rem;font-weight:500;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 ══════════════════════════════════════════════════════════ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(94svh,980px);display:flex;align-items:center;
  padding-block:clamp(8.5rem,17vh,12rem) clamp(7rem,16vh,11rem);
  background:var(--prof);
}
.hero__bg{position:absolute;inset:0;z-index:-4;width:100%;height:100%;
  object-fit:cover;object-position:center;background:#03141E}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(3,20,30,.9) 0%,rgba(3,20,30,.74) 44%,
    rgba(3,20,30,.42) 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:clamp(1.02rem,1.3vw,1.25rem);line-height:1.55;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. */
/* La «C» de Didot es redonda y su tinta arranca 0,057em más adentro que la
   «m» de «más», con las dos cajas alineadas al mismo píxel: por eso el
   titular parecía desalineado. Se compensa casi entero, dejando a la curva
   un pelo de vuelo, que es lo que el ojo lee como alineado. */
.hero__l .split-t{margin-left:-.055em}
.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 la Didot lo acusa. */
.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}
.shead__c p{font-style:italic;font-size:var(--t-lead)}

/* ═══ 4 · SOCIOS ════════════════════════════════════════════════════════ */
.socios{display:flex;gap:clamp(2.5rem,5.5vw,4.5rem);justify-content:space-between;
  align-items:flex-start}
.socio{flex:0 1 46%}
.socio--b{margin-top:clamp(0rem,5vw,4.5rem)}
.socio__fig{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden}
.socio__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.socio__plus{
  position:relative;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:clamp(1.4rem,2vw,1.85rem);font-weight:300;line-height:1;
  margin:calc(clamp(52px,5.2vw,68px) / -2) 0 0 auto;
  transform:translateX(clamp(10px,1.6vw,22px));
}
.socio--b .socio__plus{border-color:var(--cielo-txt);color:var(--cielo-txt)}
.socio__n{margin-top:1.125rem}
.socio__c{font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--naran-txt);margin:.6rem 0 .875rem}
/* 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:clamp(4rem,9vw,7rem);line-height:1;color:var(--blanco);letter-spacing:.02em}
.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:.8rem;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;
}
.flot__t1{
  grid-row:1;align-self:end;justify-self:start;
  max-width:min(26ch,42%);
  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:.75rem;font-weight:500;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:.85rem;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:.94rem;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:.98rem}
.form__msg:empty{display:none}
.form__msg--ok{color:var(--navy);font-weight:500}
.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-size:var(--t-h1);line-height:1.06;
  letter-spacing:-.008em}
.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-size:var(--t-h4);line-height:1.25;
  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:.85rem;color:var(--grisaz)}
.soc{display:flex;gap:1.75rem;list-style:none}
.soc a{display:flex;align-items:center;min-height:44px;font-size:.82rem;
  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 ════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  /* 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 */
  .hero__l{flex:0 1 50%}
  .hero__r{flex:0 1 46%}
  .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}
  .socio{flex:1 1 calc(50% - 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}

  .socios{flex-wrap:wrap}
  .socio{flex:1 1 100%}
  .socio--b{margin-top:0}

  .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}

  .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}
}