/* ── Tipografías auto-alojadas: sin Google Fonts, sin peticiones a terceros ──
   V3 · TITULARES Y CUERPOS EN BROWN PRO · etiquetas en CHIVO MONO
   ───────────────────────────────────────────────────────────────────────────
   Toda la web usa UNA sola familia —Brown Pro, la del Manual de Identidad—
   y reserva una monoespaciada para las etiquetas pequeñas en versales (la
   pastilla del hero, los antetítulos). Es el mismo reparto que hace la
   referencia de composición: una grotesca geométrica para todo y una mono
   para el dato pequeño.

   ⚠⚠ BROWN PRO ES DE LINETO Y NO ESTÁ EN LOS RECURSOS DE MARCA ⚠⚠
   Mientras no lleguen los .woff2 con licencia, el `src` la busca en este
   orden:
     1. `local('Brown Pro')` — si está instalada en el equipo que abre la
        web, se usa la real.
     2. `brownpro-stand-in-*.woff2` — SUSTITUTO PROVISIONAL. Es **Satoshi**
        (Indian Type Foundry, licencia libre vía Fontshare): grotesca
        geométrica con las mismas proporciones y altura de x que Brown, de
        modo que el ritmo de línea y las medidas de columna no cambian al
        poner la real.

   CUANDO LLEGUEN LOS ARCHIVOS DE BROWN PRO:
     1. Súbelos a `assets/fonts/` como `brownpro-300.woff2`,
        `brownpro-400.woff2`, `brownpro-500.woff2`, `brownpro-700.woff2` y
        `brownpro-italic.woff2`.
     2. Descomenta aquí abajo las líneas marcadas `⇽ BROWN PRO REAL`.
     3. Borra los cinco `brownpro-stand-in-*.woff2` y sus líneas `url()`.
     4. En `index.html`, cambia el `preload` de `brownpro-stand-in-400.woff2`
        a `brownpro-400.woff2`.

   Chivo Mono sí es definitiva: Google Fonts, licencia SIL OFL 1.1, se puede
   incrustar sin pagar ni pedir permiso. Los .woff2 se han descargado de
   fonts.gstatic.com y viven aquí, así que la web no hace ni una sola
   petición a un tercero.
   ─────────────────────────────────────────────────────────────────────────── */

/* 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 · el peso de casi toda la web */
@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 · botones y etiquetas */
@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 · 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-700.woff2") format('woff2'), ⇽ BROWN PRO REAL */
       url("../fonts/brownpro-stand-in-700.woff2") format('woff2');
}

/* Brown Pro · Italic 300-700 */
@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');
}

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

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

/* v5 · Títulos: Montserrat (variable 300–700) + Playfair Display cursiva
   para las palabras que se destacan. Auto-alojadas, solo latin y latin-ext. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/montserrat-var-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/playfair-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}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/playfair-italic-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}

/* ═══════════════════════════════════════════════════════════════════════════
   HeliOx · VERSIÓN 3 · «La línea de flotación»
   ───────────────────────────────────────────────────────────────────────────
   Dirección de la v3, tomada de la GUÍA DE DISEÑO y de las REFERENCIAS:
   más luz y menos profundidad · aire + luz + agua · el mar cerca de la
   superficie · círculos como elemento gráfico · degradados, grano y
   transparencias · espacios en blanco. El fondo es blanco; el color lo
   pone la fotografía, no el papel.

   La v2 era una web oscura con el agua como fondo. La v3 invierte el peso:
   la página es aire —blanco, con un azulado grisáceo mínimo en las bandas
   alternas— y el agua entra en franjas de fotografía. Todo el sitio se
   ordena alrededor de una línea horizontal —la línea de flotación— que
   separa lo que se ve de lo que hay debajo.

   CONTRASTE · verificado con contraste.py sobre el blanco #FFFFFF:
     tinta   #0B1B24 → 17.55:1      navy    #004B87 →  8.91:1
     gris    #555960 →  7.04:1      naranja #B43802 →  5.99:1
     cielo   #006A92 →  6.04:1      acero   #3D6C8F →  5.61:1
   Y sobre el azulado #F5F8F9 de las bandas alternas: 16.45 · 8.35 · 6.59 ·
   5.61 · 5.66 · 5.26. Los acentos saturados (#00A3E0 2.6:1 · #E14602 3.9:1 ·
   #4B81A9 3.8:1) NO llegan a AA para texto normal: se quedan como
   decorativos —filetes, anillos, puntos, cifras ≥ 44 px— y para texto se
   usan las variantes oscurecidas de arriba.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── los dos mundos: aire y agua ───────────────────────────────────── */
  --espuma:#FFFFFF;      /* blanco · el fondo por defecto de la web        */
  --aire:#F5F8F9;        /* azulado grisáceo mínimo, para bandas alternas  */
  --aire-2:#EAF0F2;      /* el mismo tono un punto más denso               */
  --tinta:#0B1B24;       /* el texto                                       */
  --prof:#03141E;        /* la única profundidad real, usada dos veces     */

  /* ── PALETA DE PORTADA · replicada de la referencia de composición ───
     La cabecera y el hero se han rehecho copiando la referencia al
     milímetro, y eso incluye sus grises y su naranja. Son cinco valores y
     viven aquí para poder cambiarlos de una sola línea.

     El acento ya NO es el naranja de la referencia: David lo cambió por el
     azul principal de HeliOx, que es además el del logotipo de HIDEOX
     (#159FDB en el archivo original). */
  --papel:#E4E3E1;       /* el fondo de la página: gris cálido muy claro   */
  --panel:#F4F4F3;       /* la tarjeta del hero y la cápsula de la cabecera*/
  --grafito:#181513;     /* la tinta de la portada: casi negro, cálido     */
  --acento:#139DD9;      /* AZUL PRINCIPAL · fondo de botón y grafismo     */
  --acento-hover:#0F86BA;/* el mismo, un punto más oscuro, para :hover     */
  /* El acento saturado NO llega a 4,5:1 sobre claro (2,78:1 sobre el panel
     y 3,06:1 sobre blanco): se queda para fondos y grafismo. Para TEXTO se
     usa esta variante oscurecida, que da 4,61:1 sobre el panel y 5,07:1
     sobre blanco. Es la misma regla que ya se aplicaba a los acentos
     corporativos. */
  --acento-txt:#0E76A3;
  --acento-tinta:#0B0B0B;/* el texto que va ENCIMA del acento · 6,42:1     */
  --marino:#07131D;      /* el fondo de la carta náutica · blanco 18,4:1  */
  /* El azul de la carta náutica. NO es el acento: es el azul vivo de la
     referencia que pasó David para esa sección, más ultramar que el de
     marca. Vive solo ahí —curvas y discos— y es una línea si se quiere
     devolver a `var(--acento)`. Sobre el marino da 4,05:1, de sobra para
     grafismo, que es lo único que pinta. */
  --carta:#2F5FE0;

  /* ── paleta corporativa (Manual de Identidad 2026) ─────────────────── */
  --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 para texto (las saturadas no llegan a AA) ───────────── */
  --naran-txt:#B43802;
  --cielo-txt:#006A92;
  --acero-txt:#3D6C8F;

  /* ── filetes: la rejilla técnica de las referencias ────────────────── */
  --filete:rgba(11,27,36,.13);
  --filete-fuerte:rgba(11,27,36,.26);
  --filete-d:rgba(183,201,211,.20);
  /* La retícula de fondo va bastante más floja que los filetes de
     contenido: tiene que leerse como papel, no como tabla. */
  --rejilla:rgba(11,27,36,.055);
  --rejilla-mas:rgba(11,27,36,.13);

  /* ── tipografía ────────────────────────────────────────────────────── */
  /* UNA sola familia para todo —titulares y cuerpos— como hace la
     referencia de composición, y una monoespaciada para las etiquetas
     pequeñas en versales. `--display` y `--sans` apuntan a la misma para
     no tener que tocar los cientos de usos repartidos por el CSS. */
  --display:"Brown Pro","Brown",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Brown Pro","Brown",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Escala 390 → 1680. El H1 es ~5,5× el cuerpo: la v3 sube el contraste
     de escala porque la referencia editorial lo pide. */
  --t-xl:clamp(2.35rem,1rem + 4.85vw,5.5rem);    /* titular de portada    */
  --t-h1:clamp(2.6rem,1.15rem + 5.95vw,5.5rem);
  --t-h2:clamp(1.9rem,1.12rem + 3.2vw,3.4rem);
  --t-h2s:clamp(1.6rem,1.14rem + 1.9vw,2.6rem);
  --t-h3:clamp(1.25rem,1.06rem + .8vw,1.75rem);
  --t-body:clamp(1rem,.965rem + .145vw,1.0625rem);
  --t-lead:clamp(1.125rem,.97rem + .64vw,1.4375rem);
  --t-cifra:clamp(4rem,1.5rem + 10.3vw,9.5rem);  /* las cifras gigantes   */
  --t-lab:clamp(.6875rem,.66rem + .115vw,.75rem);/* etiquetas versalita   */

  /* ── medidas ───────────────────────────────────────────────────────── */
  --gut:clamp(1.375rem,.41rem + 3.95vw,2.75rem);
  --sec:clamp(5rem,2.2rem + 11.5vw,10rem);
  --max:1480px;
  --radio:clamp(14px,1.1vw,20px);

  /* ── movimiento ─────────────────────────────────────────────────────
     Un muelle críticamente amortiguado (sin rebote) para lo que aparece,
     y uno con un punto de rebote solo donde hubo impulso del puntero.   */
  --muelle:linear(0,.0018 1.2%,.0166 3.5%,.0722 7.4%,.1655 11.7%,.2891 16.3%,
      .4334 21.1%,.5859 25.8%,.7352 30.4%,.8716 34.9%,.9268 37.2%,.9743 39.5%,
      1.0141 41.9%,1.0464 44.5%,1.0674 46.7%,1.0819 49.2%,1.0879 52%,1.0854 55.3%,
      1.0759 59.2%,1.0576 64.6%,1.0339 71%,1.0113 79%,.9999 89%,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-suave:cubic-bezier(.32,.72,0,1);
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:clamp(82px,6.5vw,112px);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--espuma);color:var(--tinta);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
  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.08;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--navy);outline-offset:4px;border-radius:3px}
.prof :focus-visible,.cli :focus-visible,.mez :focus-visible{outline-color:var(--cielo)}
::selection{background:var(--navy);color:#fff}

/* ── grano: el tratamiento de la referencia «waves» ─────────────────────
   Una sola textura SVG en línea, sin petición extra, sin coste de red.   */
.grano::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.34;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── utilidades ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap--n{max-width:1240px}
.wrap--s{max-width:1080px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.sec{position:relative;padding-block:var(--sec)}
.sec--corta{padding-block:clamp(3rem,5.5vw,5.5rem)}
.prof{background:var(--prof);color:var(--espuma)}
.blanco{background:var(--espuma)}
.aire{background:var(--aire)}
.aire-2{background:var(--aire-2)}
.muted{color:var(--gris)}
.muted-d{color:var(--grisaz)}
.lead{font-size:var(--t-lead);line-height:1.6;font-weight:300}

/* Titulares · BROWN PRO.

   GROSOR · con Forum había que falsear el peso con `-webkit-text-stroke`
   porque la serif solo traía un corte. Brown Pro tiene cortes reales
   (300/400/500/700), así que el engorde sintético SE HA QUITADO: deformaba
   el dibujo y en una grotesca geométrica se nota mucho más que en una
   serif. Los titulares van al 400 limpio, igual que la referencia.

   TRACKING · la referencia aplica el mismo −0.02em a toda la escala en vez
   de ir aflojando por tamaños. En una geométrica funciona: cierra el hueco
   que dejan las letras redondas (O, C, G) sin que el texto pequeño se
   apelmace. Se copia tal cual. */
.xl,.h1,.h2,.h2s,.h3{
  font-family:var(--display);
  font-weight:400;
}
.xl{font-size:var(--t-xl);line-height:1.06;letter-spacing:-.02em}
.h1{font-size:var(--t-h1);line-height:1.08;letter-spacing:-.02em}
.h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.02em}
.h2s{font-size:var(--t-h2s);line-height:1.2;letter-spacing:-.02em}
.h3{font-size:var(--t-h3);line-height:1.26;letter-spacing:-.018em}
/* Brown Pro sí trae cursiva, pero el énfasis por color que montó la v3
   sigue siendo más legible sobre fondo claro. Se mantiene. */
.destacado{color:var(--navy)}
.prof .destacado,.claim .destacado{color:var(--cielo)}

/* ── la rejilla técnica ─────────────────────────────────────────────────
   Filetes verticales de 1 px con una marca «+» en el arranque. Sale de las
   dos referencias impresas (Gabriel y Pepperwall): es lo que da la lectura
   de plano técnico. Decorativa: aria-hidden y sin capturar el puntero.

   Dos reglas que la hacen respirar:
   · NO se dibujan las líneas de los extremos. Cuando coinciden con el borde
     de la caja de contenido, el texto queda pegado a un filete y la sección
     se lee agobiada. Quedan solo las tres divisiones interiores.
   · Las líneas no llegan al alto completo de la sección: entran y salen con
     margen, así que tampoco encajan con el borde de arriba ni el de abajo.
   Y el trazo es la mitad de flojo que el de los filetes de contenido.    */
.rejilla{
  position:absolute;inset:clamp(2rem,4.5vw,4.5rem) 0;z-index:0;pointer-events:none;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.rejilla i{position:relative}
.rejilla i + i{border-left:1px solid var(--rejilla)}
.rejilla i + i::before,.rejilla i + i::after{
  content:"";position:absolute;left:-4.5px;width:9px;height:9px;
  background:
    linear-gradient(var(--rejilla-mas),var(--rejilla-mas)) center/1px 9px no-repeat,
    linear-gradient(var(--rejilla-mas),var(--rejilla-mas)) center/9px 1px no-repeat;
}
.rejilla i + i::before{top:clamp(1.5rem,3.5vw,3.5rem)}
.rejilla i + i::after{bottom:clamp(1.5rem,3.5vw,3.5rem)}
.prof .rejilla i + i{border-color:rgba(183,201,211,.10)}
.prof .rejilla i + i::before,.prof .rejilla i + i::after{
  background:
    linear-gradient(rgba(183,201,211,.22),rgba(183,201,211,.22)) center/1px 9px no-repeat,
    linear-gradient(rgba(183,201,211,.22),rgba(183,201,211,.22)) center/9px 1px no-repeat;
}
@media (max-width:900px){.rejilla{grid-template-columns:repeat(2,1fr)}}

/* Contenido por encima de la rejilla */
.sec > .wrap,.sec > .wrap--n,.sec > .wrap--s{position:relative;z-index:1}

/* ── la línea de flotación ──────────────────────────────────────────────
   Un filete de 1 px con la marca de nivel a la izquierda. Aparece entre
   secciones y es el hilo conceptual de toda la web.                      */
.flot{
  display:flex;align-items:center;gap:1rem;
  margin:0;border:0;height:auto;color:var(--gris);
}
.flot::before{
  content:"";flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  border:1px solid currentColor;
}
.flot::after{content:"";flex:1 1 auto;height:1px;background:var(--filete-fuerte)}
.prof .flot{color:var(--grisaz)}
.prof .flot::after{background:var(--filete-d)}

/* ═══ APARICIONES ════════════════════════════════════════════════════════
   Solo transform + opacity (compositor). Empiezan visibles: si el JS no
   llega, no se pierde nada. La clase .js del <html> es la que las esconde. */
.js .rv{opacity:0;transform:translate3d(0,26px,0)}
.js .rv.is-dentro{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-suave),transform .78s var(--ease-suave);
}
.js .rv-d1.is-dentro{transition-delay:.08s}
.js .rv-d2.is-dentro{transition-delay:.16s}
.js .rv-d3.is-dentro{transition-delay:.24s}
.js .rv-d4.is-dentro{transition-delay:.32s}

/* Titular palabra a palabra: cada palabra sube desde debajo de su línea. */
/* El recorte que esconde la palabra antes de subir se llevaba por delante
   los descendentes (la «g» de «significa», la «j» de «mojarse»). Se baja el
   borde de la caja .2em y se compensa con el margen: mismo layout, pero ya
   no corta nada. */
.js .palabras .pal{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.2em;margin-bottom:-.2em}
.js .palabras .pal > i{display:inline-block;font-style:inherit;
  transform:translate3d(0,102%,0)}
.js .palabras.is-dentro .pal > i{
  transform:none;transition:transform .82s var(--ease-suave);
  transition-delay:calc(var(--i,0) * 42ms);
}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .palabras .pal > i{opacity:1!important;transform:none!important;
    transition:opacity .25s linear!important}
  /* Menos movimiento no es «ningún acuse de recibo»: se conservan los
     cambios de color y de opacidad, y se apaga todo lo que se desplaza. */
  .btn--ref .btn__i svg{transform:none!important}
  .btn--ref,.btn__i svg,.burger__b::before,.burger__b::after,
  .hdr,.hdr__in,.hdr__nav{
    transition-duration:.15s!important}
}

/* ── Menos transparencia ────────────────────────────────────────────────
   Si el sistema pide opacidad, el velo de la cabecera deja de ser cristal
   y pasa a ser un plano sólido: la legibilidad manda sobre el material. */
@media (prefers-reduced-transparency:reduce){
  .hdr.is-fijo .hdr__in,.hdr.is-abierta .hdr__in{
    background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
  .grano::after{display:none}
}

/* ── Más contraste ──────────────────────────────────────────────────────
   Los filetes de 1 px al 13 % desaparecen para quien pide más contraste:
   se suben, y los velos sobre foto se cierran un punto más. */
@media (prefers-contrast:more){
  :root{
    --filete:rgba(11,27,36,.42);
    --filete-fuerte:rgba(11,27,36,.68);
    --filete-d:rgba(183,201,211,.55);
    --gris:#3F434A;
    --grisaz:#D2DFE6;
  }
  .claim__velo{filter:brightness(.88)}
  .logos img{opacity:.9}
}

/* ═══ CABECERA ═══════════════════════════════════════════════════════════
   Capa translúcida: el contenido pasa por debajo. Sin borde inferior duro;
   el borde se resuelve con un degradado que solo aparece al hacer scroll. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--tinta);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 ═══════════════════════════════════════════════════════════
   Réplica de la cabecera de la referencia, medida sobre el original a
   1440 px de ancho:

   · barra `fixed` con 8 px de aire sobre el borde superior de la ventana;
   · dentro, una cápsula de 58 px de alto, fondo #F4F4F3, radio 6 px,
     separada 10 px de cada costado. Son los MISMOS 10 px que deja la
     tarjeta del hero, y por eso los dos cantos quedan alineados en
     vertical: es el detalle que sostiene toda la composición;
   · relleno asimétrico de la cápsula —14 px a la izquierda, 8 px a la
     derecha— porque a la derecha lo que termina es un botón con fondo
     propio y necesita menos aire que el texto;
   · a la izquierda logotipo + menú con 40 px entre ambos y 32 px entre
     enlaces; a la derecha la pastilla naranja;
   · un filete de 0,5 px en el canto inferior, sangrado como el contenido.

   La cabecera de la referencia NO cambia al hacer scroll: no encoge, no se
   desenfoca, no aparece ni desaparece. Se ha retirado el cristal esmerilado
   que montaba la v3 y con él el estado `.is-fijo`. El JS sigue poniendo esa
   clase; ahora simplemente no pinta nada.                                 */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:1010;
  padding:8px 10px 0;
}
.hdr__in{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:58px;padding:0 8px 0 14px;
  background:var(--panel);border-radius:6px;
}
.hdr__in::after{
  content:"";position:absolute;left:14px;right:8px;bottom:0;height:.5px;
  background:rgba(24,21,19,.09);pointer-events:none;
}
.hdr__izq{display:flex;align-items:center;gap:40px;min-width:0}
.hdr__logo{display:inline-flex;align-items:center;min-height:44px;flex:0 0 auto}
.hdr__logo img{width:112px;height:auto;transition:opacity .25s var(--ease)}
.hdr__logo:active img{opacity:.6}

/* Los enlaces: 14 px en versales con el mismo −0.02em que el resto de la
   web. El subrayado que crece de izquierda a derecha es el de la v3 y se
   conserva: la referencia no tiene ninguno y el menú se quedaba mudo. */
.nav{display:flex;align-items:center;gap:32px;list-style:none;flex-wrap:wrap}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:0.875rem;line-height:1.4;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--grafito);text-decoration:none;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:14px;height:1px;
  background:var(--grafito);transition:right .34s var(--ease)}
.nav a:hover::after,.nav a[aria-current="true"]::after{right:0}

.nav__cta{display:none}
.burger{display:none;align-items:center;gap:.65rem;background:none;border:0;
  min-height:44px;padding:0 .25rem;cursor:pointer;color:var(--grafito);
  font-size:0.875rem;font-weight:500;letter-spacing:-.02em;text-transform:uppercase}
.burger__b{position:relative;display:block;width:22px;height:1px;background:var(--grafito);
  transition:background-color .2s var(--ease)}
.burger__b::before,.burger__b::after{content:"";position:absolute;left:0;width:22px;
  height:1px;background:var(--grafito);transition:transform .34s var(--muelle)}
.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)}

/* ── el botón de la referencia ──────────────────────────────────────────
   Naranja macizo, radio 4, relleno de 12 px por los cuatro lados y el texto
   en versales a peso 500. La flecha entra desde la izquierda al pasar por
   encima, dentro de una ventana que la recorta: es la misma mecánica que la
   referencia usa en todos sus botones.

   El alto de la referencia es 43,6 px. Aquí se sube a 44 para no bajar del
   área táctil mínima; la diferencia no se ve.                             */
.btn--ref{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:12px;min-height:44px;border-radius:4px;
  background:var(--acento);color:var(--acento-tinta);
  font-family:var(--sans);font-size:0.875rem;font-weight:500;line-height:1.4;
  letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;
  transition:background-color .3s var(--ease);
}
.btn--ref:hover{background:var(--acento-hover)}
.btn--ref .btn__i{display:block;width:13px;height:13px;overflow:hidden;flex:0 0 auto;
  /* Anula el disco relleno de `.btn__i` (componentes.css): aquí la flecha no
     va dentro de un círculo, va dentro de una ventana que la recorta. */
  background:none;border-radius:0}
.btn--ref .btn__i svg{width:13px;height:13px;fill:currentColor;
  transform:translateX(-100%);transition:transform .6s cubic-bezier(.65,0,.35,1)}
.btn--ref:hover .btn__i svg,.btn--ref:focus-visible .btn__i svg{transform:none}
/* El botón en fantasma: mismo tamaño, sin fondo. Para el segundo enlace. */
.btn--ref-2{background:transparent;color:var(--grafito)}
.btn--ref-2:hover{background:rgba(24,21,19,.06)}
/* La variante para fondo oscuro. Vivía en el bloque de la sección de
   números y se fue con él cuando se retiró esa sección; sin ella, el botón
   del cierre se quedaba con el azul de `.btn--ref` sobre la fotografía.
   Ahora está aquí, junto a las otras dos variantes, que es su sitio. */
.btn--ref-b{background:#fff;color:var(--acento-tinta)}
.btn--ref-b:hover{background:#EDEDEC}

/* ═══ 1 · PORTADA ════════════════════════════════════════════════════════
   Réplica de la portada de la referencia. La página deja de ser blanca: el
   fondo pasa a un gris cálido (#E4E3E1) y todo lo que va encima son piezas
   de 8 px de radio que flotan sobre él con 10 px de sangrado. El hero es
   una de esas piezas.

   Reparto vertical, tal cual la referencia:
     tarjeta (70 vh) → pastilla · titular · entradilla · botón, todo
     centrado y apilado con 32 px entre bloques
     ↓
     carrusel de clientes, pegado al borde inferior de la tarjeta
     ↓
     70 px de aire
     ↓
     la fotografía grande

   EL ALTO ES 70 vh, NO UNA ALTURA FIJA: medido en el original a tres
   anchos distintos da siempre el 70 % de la ventana. `min-height` en vez de
   `height` para que la tarjeta crezca si el titular cae en tres líneas.   */
.hero{
  position:relative;
  padding:74px 10px 10px; /* 8 (aire) + 58 (cápsula) + 8 (hueco) = 74 arriba,
                             y los mismos 10 px de gris por los cuatro lados */
  background:var(--papel);
}
.hero__card{
  background:var(--panel);border-radius:8px;overflow:hidden;
}
.hero__cont{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;padding:70px 60px;min-height:70vh;
}
.hero__bloque{
  display:flex;flex-direction:column;gap:32px;
  width:100%;max-width:1120px;
}

/* ── la pastilla ────────────────────────────────────────────────────────
   Fondo blanco, radio 4, relleno 4/8, un cuadradito naranja de 9×9 y el
   texto en monoespaciada a 14 px en versales. Se escribe sola al cargar
   (ver `.tag-char` más abajo).                                            */
.hero__tagw{display:flex;justify-content:center}
.hero__tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 8px;border-radius:4px;background:#fff;
  font-family:var(--mono);font-size:0.875rem;line-height:1.4;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--grafito);
}
.hero__tag i{width:9px;height:9px;background:var(--acento);flex:0 0 auto}

/* ── el titular ─────────────────────────────────────────────────────────
   56 px en escritorio y 36 px en móvil, con un único salto en 767 px: la
   referencia no usa escala fluida aquí y se replica tal cual. Versales,
   peso 400, interlineado 1.1.                                             */
.hero__t{
  font-family:var(--display);font-weight:400;
  font-size:56px;line-height:1.1;letter-spacing:-.02em;
  text-transform:uppercase;text-align:center;color:var(--grafito);
  text-wrap:balance;margin:0;
}
.hero__p{
  max-width:64ch;margin-inline:auto;text-align:center;
  font-size:1.125rem;line-height:1.5;letter-spacing:0;color:var(--grafito);
}
.hero__p b{font-weight:500;font-style:normal}
.hero__acc{display:flex;align-items:center;justify-content:center;gap:6px;
  flex-wrap:wrap}

/* ── el carrusel de clientes ────────────────────────────────────────────
   Tarjetas blancas de 90 px de alto con 8 px entre ellas, cada una con el
   logotipo a 35 px, un filete vertical de 1 px y el texto del proyecto en
   una columna de 370 px. La pista se mueve a 35 px/s y se para al pasar el
   puntero por encima (ver heliox.js).                                     */
.marq{overflow:hidden;background:var(--panel)}
.marq__pista{display:flex;flex-wrap:nowrap;width:max-content;gap:8px;
  margin:0;padding:0;list-style:none;will-change:transform}
.marq__it{
  flex:0 0 auto;display:flex;align-items:center;gap:32px;
  min-height:90px;padding:20px;border-radius:4px;background:#fff;
}
.marq__logo{display:flex;align-items:center;justify-content:center;
  height:35px;flex:0 0 auto}
.marq__logo img{height:35px;width:auto;max-width:140px;object-fit:contain}
.marq__sep{width:1px;height:38px;background:var(--papel);flex:0 0 auto}
.marq__tx{width:370px;font-size:1.125rem;line-height:1.45;letter-spacing:0;
  color:var(--grafito)}
.marq__tx b{display:block;font-weight:500}

/* ── el aire y la fotografía grande ─────────────────────────────────────
   La referencia deja 70 px entre el carrusel y la pieza grande, y esa pieza
   lleva el mismo sangrado de 10 px y el mismo radio de 8 px que todo lo
   demás. La banda de la orilla, que en la v3 iba a sangre completa, se mete
   dentro de ese sistema.                                                  */
.hero__aire{height:70px}
/* El ancho va forzado a mano. `aspect-ratio` con un `max-height` encima no
   recorta solo el alto: para conservar la proporción encoge TAMBIÉN el
   ancho, y la fotografía se quedaba 24 px corta por la derecha mientras por
   la izquierda seguía pegada a sus 10 px. Fijando el ancho, el alto se
   sigue topando en el `max-height` y lo que sobra lo recorta el
   `object-fit: cover` de la imagen, que es lo que se quería. */
.banda{position:relative;margin:0 10px 32px;overflow:hidden;
  width:calc(100% - 20px);
  aspect-ratio:16/9;max-height:min(86vh,820px);
  border-radius:8px;background:var(--aire-2)}
.banda__img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* ── la pastilla se escribe sola ────────────────────────────────────────
   Copiado de la referencia: el fondo blanco entra barriendo de izquierda a
   derecha, el cuadradito naranja parpadea tres veces y las letras van
   apareciendo una a una. Con `prefers-reduced-motion` no pasa nada de esto
   y la pastilla sale ya montada.                                          */
.hero__tag{position:relative;isolation:isolate;overflow:hidden}
.hero__tag > *{position:relative;z-index:2}
.hero__tag::before{
  content:"";position:absolute;inset:0;background:#fff;border-radius:inherit;
  transform:scaleX(0);transform-origin:left center;z-index:1;
}
.js .hero__tag.is-anim{background-color:transparent}
.js .hero__tag.is-anim i{opacity:0}
.js .hero__tag.is-anim .tag-char{visibility:hidden}
.js .hero__tag.is-anim .tag-char.is-shown{visibility:visible}
/* Dos tiempos encadenados: el parpadeo duro de la carga —tres destellos en
   800 ms, copiado de la referencia— y, a partir de ahí, un latido lento y
   suave que no se para. Van en la misma declaración porque los dos animan
   `opacity` y el segundo tiene que ganar: en `animation` manda el último de
   la lista, y su retardo de 900 ms lo deja entrar justo cuando el primero
   ya ha terminado y se ha quedado fijo con `forwards`. */
.js .hero__tag.is-visto i{
  animation:
    tag-parpadeo 800ms steps(1,end) forwards,
    tag-latido 3.2s cubic-bezier(.4,0,.6,1) 900ms infinite;
}
.js .hero__tag.is-visto::before{
  animation:tag-relleno 700ms cubic-bezier(.65,0,.35,1) 800ms forwards}
@keyframes tag-parpadeo{
  0%{opacity:0} 20%{opacity:1} 40%{opacity:0}
  60%{opacity:1} 80%{opacity:0} 100%{opacity:1}
}
@keyframes tag-relleno{to{transform:scaleX(1)}}
/* El latido. Ni se apaga del todo ni cambia de tamaño: solo respira. */
@keyframes tag-latido{
  0%,100%{opacity:1}
  50%{opacity:.34}
}
@media (prefers-reduced-motion:reduce){
  .js .hero__tag.is-anim{background-color:#fff}
  .js .hero__tag.is-anim i{opacity:1}
  .js .hero__tag.is-anim .tag-char{visibility:visible}
  .hero__tag::before{transform:scaleX(1);animation:none}
  .js .hero__tag.is-visto i{animation:none}
}

/* ── la portada en móvil ────────────────────────────────────────────────
   Los valores del original por debajo de 767 px: titular a 36, relleno de
   la tarjeta a 70/20, y las tarjetas del carrusel en columna —logotipo
   arriba, filete horizontal, texto debajo— con el texto a 16 px.          */
@media (max-width:767px){
  .hero__cont{padding:70px 20px}
  /* El descriptor de HeliOx es más largo que el de la referencia y a 375 px
     no cabe en una línea: se deja partir y se centra. El resto de la
     pastilla —relleno, radio, cuadradito— no cambia. */
  .hero__tag{align-items:flex-start}
  .hero__tag span{text-align:center}
  .hero__tag i{margin-top:5px}
  .hero__t{font-size:36px}
  .hero__p{font-size:1rem}
  .marq__it{flex-direction:column;align-items:flex-start;gap:24px;padding:16px}
  .marq__sep{width:100%;height:1px}
  .marq__tx{width:245px;font-size:1rem}
  .banda{aspect-ratio:4/3;max-height:none;margin-bottom:20px}
  .hero__aire{height:40px}
}

/* ═══ PIE ════════════════════════════════════════════════════════════════
   Una sola banda: marca y legal, datos de contacto y tres columnas de
   enlaces. El bloque grande de contacto con el formulario se retiró. En
   claro, como el resto: el pie era la última sección oscura de la web.

   Contraste sobre el fondo del pie (#F5F8F9), verificado:
     tinta   #0B1B24 → 16,45:1     gris    #555960 →  6,59:1
     naranja #B43802 →  5,61:1     navy    #004B87 →  8,35:1
   La primera línea del titular usa el naranja saturado #E14602 (3,87:1):
   solo vale porque a 54 px es «texto grande» y ahí el mínimo es 3:1. En
   cuerpo pequeño se usa siempre la variante oscurecida.               */
.ftr{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--aire);color:var(--tinta);
  padding-block:clamp(4rem,7vw,6.5rem) clamp(2rem,3.5vw,3rem);
}
.ftr--corto{padding-block:clamp(2.5rem,4.5vw,4rem) clamp(2rem,3.5vw,3rem);
  border-top:1px solid var(--filete)}
.ftr a{color:inherit}

/* El bloque grande de contacto —«Bajemos juntos» y el formulario— se
   retiró: el pie es ahora solo la barra de cierre. Sus reglas se han ido
   con él.                                                                */

/* ── 2 · barra de cierre ──────────────────────────────────────────────── */
.ftr__base{
  display:grid;gap:clamp(2rem,3.5vw,3rem) clamp(1.5rem,3vw,2.75rem);
  grid-template-columns:minmax(0,30fr) minmax(0,20fr) repeat(3,minmax(0,16fr));
  align-items:start;
}
.ftr__logo{width:clamp(112px,9vw,138px);height:auto;margin-bottom:1.25rem}
.ftr__legal{font-size:.82rem;line-height:1.6;color:var(--gris);max-width:34ch}
.ftr__legal + .ftr__legal{margin-top:.4rem}

.ftr__dir{display:flex;flex-direction:column;font-style:normal}
.ftr__dir a,.ftr__col a{
  display:inline-flex;align-items:center;min-height:44px;width:fit-content;
  font-size:.925rem;color:var(--gris);text-decoration:none;
  transition:color .25s var(--ease);
}
.ftr__dir a{color:var(--tinta)}
.ftr__dir a:hover,.ftr__col a:hover{color:var(--naran-txt)}
.ftr__col ul{list-style:none;display:flex;flex-direction:column}

@media (max-width:980px){
  .ftr__base{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__marca{grid-column:1 / -1}
}
@media (max-width:560px){
  .ftr__base{grid-template-columns:1fr}
}

/* ═══ FORMULARIOS ════════════════════════════════════════════════════════
   Campos de solo línea inferior: la opción editorial del kit. Nunca la
   caja gris por defecto.                                                 */
.form{display:flex;flex-wrap:wrap;gap:clamp(1.1rem,2vw,1.6rem)}
.f{flex:1 1 100%;display:flex;flex-direction:column;gap:.35rem}
.f--half{flex:1 1 calc(50% - 1.6rem)}
.f label,.ck label{font-size:.82rem;font-weight:500;letter-spacing:.04em;
  color:var(--gris)}
.f input,.f textarea{
  width:100%;padding:.7rem 0 .8rem;background:none;color:var(--tinta);
  border:0;border-bottom:1px solid var(--filete-fuerte);border-radius:0;
  font:inherit;min-height:48px;
  transition:border-color .3s var(--ease);
}
.f textarea{min-height:110px;resize:vertical}
.f input:hover,.f textarea:hover{border-color:var(--tinta)}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--navy);
  border-bottom-width:2px;padding-bottom:calc(.8rem - 1px)}
.f input:focus-visible,.f textarea:focus-visible{outline:2px solid var(--navy);
  outline-offset:6px}
.f__err{min-height:1.15rem;font-size:.8rem;color:#A5240B;margin:0}
.f__nota{flex:1 1 100%;margin:0;font-size:.78rem;line-height:1.55;
  color:var(--gris);max-width:54ch}
.ck{display:flex;align-items:flex-start;gap:.7rem;flex:1 1 100%;
  padding-block:.35rem}
.ck input{flex:0 0 auto;width:22px;height:22px;margin-top:.15rem;
  accent-color:var(--navy)}
.ck label{line-height:1.55}
.ck a{color:var(--navy)}
.form__msg{flex:1 1 100%;margin:0;font-size:.9rem;color:var(--navy)}

/* Enviar: enlace de texto con flecha, no pastilla. El acuse de recibo va en
   el pulsar, como en el resto de la web. */
.enviar{
  display:inline-flex;align-items:center;gap:.85rem;
  min-height:48px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-lab);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--naran-txt);
  -webkit-tap-highlight-color:transparent;
  transition:transform .09s ease-out,color .3s var(--ease);
}
.enviar svg{width:24px;height:12px;overflow:visible;
  transition:transform .42s var(--muelle)}
.enviar:hover svg{transform:translateX(30%)}
.enviar:active{transform:scale(.97);color:var(--tinta)}

/* Páginas legales: el mismo sistema, en claro. */
.legal{background:var(--aire);padding-block:clamp(7rem,12vw,10rem) var(--sec)}
.legal h1{font-family:var(--display);font-size:var(--t-h2);margin-bottom:2rem}
.legal h2{font-family:var(--display);font-size:var(--t-h3);
  margin:clamp(2.25rem,4vw,3rem) 0 .75rem}
.legal p,.legal li{max-width:74ch;color:var(--gris)}
.legal__t > p + p{margin-top:1rem}
.legal ul{margin:.75rem 0 0 1.1rem;list-style:disc;display:flex;
  flex-direction:column;gap:.4rem}
.legal a{color:var(--navy)}
.volver{display:inline-flex;align-items:center;min-height:44px;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  font-size:var(--t-lab);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);text-decoration:none;
  transition:color .25s var(--ease)}
.volver:hover{color:var(--tinta)}


@media (max-width:760px){
  .f--half{flex:1 1 100%}
  .hdr__in{min-height:58px}
  .nav{display:none}
  .burger{display:inline-flex}
  /* El desplegable cuelga de la cápsula: `--aire` vale 0 arriba del todo y
     el valor de la cápsula al hacer scroll, así que el anclaje sale bien en
     los dos estados sin repetir ningún número. */
  .hdr__nav{
    position:fixed;
    /* La cápsula ocupa 8 px de aire + 58 px de alto: el desplegable arranca
       en 74 px y se sangra los mismos 10 px que ella, para que los cantos
       verticales queden alineados. */
    inset:74px 10px auto 10px;
    /* Ya no cuelga pegado de un filete: es una segunda pieza suelta bajo la
       cápsula, así que se cierra por los cuatro lados y lleva su sombra. */
    background:var(--espuma);border:1px solid var(--filete);border-radius:20px;
    box-shadow:0 18px 44px -20px rgba(11,27,36,.42);
    padding:.5rem var(--gut) 1rem;
    transform:translate3d(0,-8px,0);opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease-suave),transform .4s var(--muelle),
      visibility 0s .3s;
  }
  .hdr.is-abierta .hdr__nav{opacity:1;transform:none;visibility:visible;
    transition-delay:0s}
  .hdr.is-abierta .nav{display:flex;flex-direction:column;align-items:stretch;
    gap:0}
  /* Cada fila ocupa el ancho del desplegable: si no, el filete inferior se
     queda del largo del texto y la lista se lee como escalonada. */
  .hdr.is-abierta .nav li{width:100%}
  .hdr.is-abierta .nav a{min-height:54px;font-size:1.1rem;width:100%;
    border-bottom:1px solid var(--filete)}
  .hdr .hdr__cta{display:none}
  .nav__cta{display:block}
  /* El desplegable va sobre fondo panel, igual que la cápsula de la que
     cuelga, y sus enlaces usan la tinta cálida de la portada. */
  .hdr__nav{background:var(--panel);border-color:rgba(24,21,19,.12);
    box-shadow:0 18px 44px -20px rgba(24,21,19,.38)}
  .hdr.is-abierta .nav a{border-bottom-color:rgba(24,21,19,.12)}
}

/* ═══ v5 · PORTADA CON VÍDEO ══════════════════════════════════════════════
   La tarjeta del hero ocupa el alto completo de la ventana con el vídeo a sangre dentro de
   ella (mismo radio 8 y mismos 10 px de gris alrededor). SIN velo ni
   filtro: el vídeo se ve tal cual.

   El bloque de texto baja a la esquina inferior izquierda con 72 px de aire
   abajo y 60 a la izquierda, y ocupa como mucho 62 % del ancho. Tipografías
   y textos, los mismos.

   Contraste sin velo, medido sobre la arena de la mitad inferior izquierda
   del vídeo (media de tres fotogramas, #7A6656–#816E5E):
     blanco → 4,86–5,44:1 (pasa AA en cuerpo)  ·  grafito → 3,3–3,7:1 (no)
   Por eso el titular y la entradilla van en blanco.                       */
.hero--video{padding-top:10px}
.hero--video .hero__cont{
  position:relative;isolation:isolate;overflow:hidden;
  /* v5 · a pantalla completa siempre: el alto visible menos los 10 px de
     gris de arriba y de abajo. `svh` para que en móvil no salte al
     esconderse la barra del navegador; `min-height` para que, en una
     ventana muy baja, crezca antes que recortar el contenido. */
  height:auto;min-height:calc(100vh - 20px);min-height:calc(100svh - 20px);
  align-items:flex-start;justify-content:flex-end;gap:56px;
  padding:120px 60px 10px;background:#0C2139;
}
.hero--video .hero__bloque{position:relative;z-index:2} /* por encima de la banda de cristal */
.hero__vid{position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:50% 50%}
.hero--video .hero__bloque{max-width:62%;gap:28px}
.hero--video .hero__tagw{justify-content:flex-start}
.hero--video .hero__t{text-align:left;color:#fff}
.hero--video .hero__p{text-align:left;margin-inline:0;color:#fff}
.hero--video .hero__acc{justify-content:flex-start}
.hero--video :focus-visible{outline-color:#fff}

@media (max-width:1024px){
  .hero--video .hero__bloque{max-width:80%}
}
@media (max-width:767px){
  /* 900 px en un móvil son más de una pantalla: se topa al alto visible. */
  .hero--video .hero__cont{padding:92px 20px 6px;gap:24px}
  .hero--video .hero__bloque{max-width:100%}
  .hero--video .hero__tag span{text-align:left}
}

/* ═══ v5 · CABECERA Y CARRUSEL DENTRO DEL VÍDEO · cristal oscuro ════════
   La tarjeta del hero sube hasta arriba (10 px de gris) y la cápsula de la
   cabecera flota DENTRO de ella, 10 px por dentro de cada canto, sobre el
   vídeo. Solo en la portada (`:has`); las páginas legales no cambian.

   Cristal OSCURO con todo el contenido en blanco: tinta marina al 40 % +
   desenfoque de 8 px (se ve el vídeo detrás, no una mancha). Peor caso medido —el hielo blanco del vídeo, ~#E8EEF0,
   o las secciones claras de la página al hacer scroll— el fondo resultante
   ronda #8C9093 y el blanco baja a ~3,4:1 (solo en el plano del hielo;
   sobre el resto del vídeo y de la página pasa de 7:1). */
html:is(:has(.hero--video),.pag-int) .hdr{padding:20px 20px 0}
html:is(:has(.hero--video),.pag-int) .hdr__in{
  background:rgba(8,16,24,.4);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
html:is(:has(.hero--video),.pag-int) .hdr__in::after{display:none}
html:is(:has(.hero--video),.pag-int) .hdr__logo img{filter:brightness(0) invert(1)}
html:is(:has(.hero--video),.pag-int) .burger{color:#fff}
html:is(:has(.hero--video),.pag-int) .burger__b,
html:is(:has(.hero--video),.pag-int) .burger__b::before,
html:is(:has(.hero--video),.pag-int) .burger__b::after{background:#fff}
html:is(:has(.hero--video),.pag-int) .burger[aria-expanded="true"] .burger__b{background:transparent}
html:is(:has(.hero--video),.pag-int) .hdr :focus-visible{outline-color:#fff}
@media (min-width:761px){
  html:is(:has(.hero--video),.pag-int) .nav a{color:#fff}
  html:is(:has(.hero--video),.pag-int) .nav a::after{background:#fff}
}
@media (max-width:760px){
  /* el desplegable cuelga de la cápsula, que ahora está 12 px más abajo */
  html:is(:has(.hero--video),.pag-int) .hdr__nav{inset:86px 20px auto 20px}
}

/* ── la banda inferior ──────────────────────────────────────────────────
   No hay tarjetas: el cristal sale del propio hero, de abajo a arriba. Es
   pleno en la franja del carrusel y se va perdiendo hacia arriba a lo largo
   de 360 px, así que el titular, la entradilla y los botones quedan encima
   de la parte que ya se está desvaneciendo. Tinta marina al 62 % + 24 px de
   desenfoque; encima, logotipos y textos en blanco, sueltos.

   Contraste del texto del carrusel, peor caso (hielo bajo la banda):
   fondo ~#5C5E60 → blanco 6,5:1. */
.hero__pie{position:relative;z-index:1;align-self:stretch;margin-inline:-60px}
.hero__pie::before{
  content:"";position:absolute;left:0;right:0;top:-360px;bottom:-10px;z-index:-1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(6,14,22,.62) 0%,rgba(6,14,22,.5) 35%,rgba(6,14,22,0) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 32%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,#000 32%,transparent 100%);
}
.hero--video .marq{background:transparent;padding-block:6px 14px}
.hero--video .marq__pista{gap:0}
.hero--video .marq__it{background:none;box-shadow:none;border-radius:0;
  padding:20px 40px}
.hero--video .marq__logo img{filter:brightness(0) invert(1)}
.hero--video .marq__sep{background:rgba(255,255,255,.3)}
.hero--video .marq__tx{color:#fff}

@media (max-width:767px){
  html:is(:has(.hero--video),.pag-int) .hdr{padding:20px 20px 0}
  .hero__pie{margin-inline:-20px}
  .hero--video .marq__it{padding:12px 20px;gap:16px}
}
/* Si el sistema pide menos transparencia, el cristal pasa a plano. */
@media (prefers-reduced-transparency:reduce){
  html:is(:has(.hero--video),.pag-int) .hdr__in{background:#0C1720;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .hero__pie::before{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(6,14,22,.85)}
}

/* ═══ v5 · BOTONES ═══════════════════════════════════════════════════════
   Rediseño de todos los botones: más sobrios y corporativos. Rectángulo de
   radio 2, 48 px de alto, 22 px de relleno lateral, versales a 13 px con
   peso 600 y algo de tracking.

   La flecha está visible desde el principio. Al pasar por encima se va
   hacia la derecha y se desvanece, y el texto se desplaza a ocupar el
   centro (la mitad de flecha + hueco), así que el botón no cambia de ancho
   y no empuja a nada de alrededor. */
.btn--ref{
  gap:12px;padding:0 22px;min-height:48px;border-radius:2px;
  font-size:0.8125rem;font-weight:600;letter-spacing:.06em;
  transition:background-color .3s var(--ease),color .3s var(--ease),
    box-shadow .3s var(--ease);
}
button.btn--ref{border:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.btn--ref .btn__tx{display:inline-block;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.btn--ref .btn__i{width:13px;height:13px;overflow:visible;
  transition:opacity .3s var(--ease),transform .45s cubic-bezier(.65,0,.35,1)}
.btn--ref .btn__i svg{transform:none;transition:none}
.btn--ref:hover .btn__i,.btn--ref:focus-visible .btn__i{opacity:0;transform:translateX(10px)}
.btn--ref:hover .btn__tx,.btn--ref:focus-visible .btn__tx{transform:translateX(12.5px)}
.btn--ref:hover .btn__i svg,.btn--ref:focus-visible .btn__i svg{transform:none}
/* secundaria: filete de 1 px en vez de fantasma pelado */
.btn--ref-2{background:transparent;color:var(--grafito);
  box-shadow:inset 0 0 0 1px currentColor}
.btn--ref-2:hover{background:rgba(24,21,19,.06)}
.hero--video .btn--ref-2{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.hero--video .btn--ref-2:hover{background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion:reduce){
  .btn--ref .btn__tx,.btn--ref .btn__i{transition:opacity .15s linear}
  .btn--ref:hover .btn__i,.btn--ref:focus-visible .btn__i{transform:none}
  .btn--ref:hover .btn__tx,.btn--ref:focus-visible .btn__tx{transform:none}
}

/* ═══ v5 · MENÚ DE LA CABECERA ══════════════════════════════════════════
   Los enlaces pasan a la palo seco de los títulos (Montserrat), a peso 600
   y en versales con un punto de tracking: a 14 px la versal apretada de los
   titulares se empasta. En todas las páginas y también en el desplegable
   de móvil. */
.nav a,.burger{font-family:var(--titulo);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase}