/* Company History — hoja de página. Generada por build-webflow.py desde
   assets/design-studio/prototype/company-history.html. NO editar a mano:
   se regenera. El marcador del final existe porque Webflow deduplica
   assets por hash de contenido y devolvería el fichero viejo. */

/* ── armadura contra la cascada del sitio ──────────────────────────────────
   ultratug.webflow.shared.css declara reglas por selector de elemento que se
   aplican dentro del embed: p{letter-spacing:1px}, h1..h6{margin-top:20px;
   font-weight:700}, ul/ol{padding-left:40px}. :where() las neutraliza con
   especificidad 0, así que cualquier regla propia de más abajo sigue mandando. */
.hst-root :where(p){letter-spacing:normal}
.hst-root :where(h1,h2,h3,h4,h5,h6){margin-top:0;font-weight:inherit}
.hst-root :where(ul,ol){padding-left:0;margin-bottom:0}
.hst-root :where(figure,blockquote,dl,dd){margin:0}
.hst-root :where(img,video){max-width:100%;display:block}

/* El prototipo se maquetó sobre el reset del design system (`*{margin:0;padding:0}`), y el
   normalize de Webflow devuelve márgenes por elemento dentro del embed: p y h2 con 10 px
   de margen inferior, h2 con 20 px arriba… Medido en staging a 390 px: el abanico crecía
   211 px y sus flechas quedaban fuera de la pantalla (y=927 en 844). Se repone el mismo
   reset, acotado al embed y a especificidad 0, y la base del body del DS (color, cuerpo
   e interlineado) que el prototipo daba por heredada. Compliance no lo necesitó porque
   declara todos sus márgenes; History no, y no tiene por qué. */
.hst-root :where(*, *::before, *::after){box-sizing:border-box;margin:0;padding:0}
.hst-root :where(a){text-decoration:none;color:inherit}
.hst-root{color:#fff;line-height:1.6;font-family:'Inter','HNLT',Helvetica,Arial,sans-serif}

/* ── reveal del design system (solo esto; la hoja entera choca con el
   sitio: lleva reset * y clases .container/.footer-*/.btn-pill) ── */
.hst-root /* Reveal base: fade + rise. data-reveal en el elemento; .is-in al entrar al viewport. */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
.hst-root [data-reveal].is-in { opacity: 1; transform: none; }
.hst-root [data-reveal="fade"] { transform: none; }
.hst-root [data-reveal="left"] { transform: translateX(-32px); }
.hst-root [data-reveal="right"] { transform: translateX(32px); }
.hst-root [data-reveal="scale"] { transform: scale(0.96); }
.hst-root [data-reveal].is-in { transform: none; }
.hst-root [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
.hst-root [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.hst-root [data-reveal], .hst-root [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   COMPANY HISTORY — Ultratug · Figma nodo 5000:1697 (1440 × 6898)
   Diseño: cT9O6tUlAhxHGuXwJOREe8
   Vanilla CSS, sin frameworks. Breakpoints 991/767/478.

   El CONTENIDO manda sobre el diseño (decisión de cliente): los 19 hitos, sus
   textos y su reparto por décadas salen de ultratug.com/company-history/, no de
   la lista de años del Figma (que separa 1993/1995 y no tiene 2002).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reveal degradable: el DS oculta [data-reveal] de base; sin JS debe verse todo. */
.hst-root:not(.js-on) [data-reveal],
.hst-root:not(.js-on) [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }

/* ─── TIPOGRAFÍA DE MARCA REAL — Helvetica Neue LT Std ─── */





.hst-root {
  --hst-navy-950: #000e1e;   /* Foundation/Blue/Darker — fondo base   */
  --hst-navy-900: #001226;
  --hst-navy-870: #001830;   /* texto sobre superficies claras / cian */
  --hst-navy-800: #002855;   /* Foundation/Blue/Normal                */
  --hst-cyan:     #019cde;
  --hst-cyan-dim: #015478;
  --hst-cyan-lit: #3ecbf8;
  --hst-ice:      #e6f5fc;   /* Foundation/Blue/Light                 */
  --hst-gray:     #737373;   /* Foundation/White/Dark:active          */
  --hst-line:     rgba(255,255,255,.25);

  --hst-display: 'HNLT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hst-body:    'Inter', 'HNLT', Helvetica, Arial, sans-serif;

  --hst-max: 1280px;
  --hst-pad: 64px;

  /* ── Group History ── */
  --gh-pitch:      540px;
  --gh-x0:         max(24px, calc(50% - 523px));   /* dónde nace la línea */
  --gh-travel:     min(720px, 50vw);               /* cuánto viaja el hito activo */
  --gh-node:       62px;
  --gh-node-sm:    48px;
  --gh-year-fs:    clamp(54px, 10.6vw, 152px);
  --gh-year-word:  clamp(30px, 5.6vw, 80px);
  --gh-copy-w:     296px;
  --gh-gap:        30px;
  /* Despeje del rótulo gigante respecto al borde del anillo activo (31 + 6 de halo).
     La clienta pidió «por lo menos 24 px»: ese 24 es --gh-year-clear. */
  --gh-year-clear: 24px;
  --gh-year-off:   calc(var(--gh-node) / 2 + 6px + var(--gh-year-clear));
  --gh-year-unit:  clamp(15px, 1.5vw, 22px);
  --hst-fan-mask:  linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 74px, #000 190px),
                   linear-gradient(to left,   transparent 0, rgba(0,0,0,.55) 92px, #000 232px);
  --hst-fan-arrow-pad: max(16px, calc(50% - 700px));
  --gh-i:          0;

  /* ── Abanico 3D ──
     El escorzo ya NO vive aquí: se calcula por tarjeta desde una distancia
     CONTINUA al centro (ver HST_FAN en el script). En CSS queda solo lo que
     cambia por breakpoint. */
  --hst-persp:     1380px;
  --hst-card-w:    300px;
  --hst-card-h:    411px;
  --hst-fan-h:     616px;
  --hst-fan-top:   45%;
  --hst-year-fs:   25px;

  /* ── Cifras clave ── */
  --hst-fig-h:     356px;
  --hst-fig-r:     28px;
  --hst-fig-photo: 44%;
  --hst-fig-title: clamp(28px, 3.2vw, 46px);
  --hst-fig-sub:   clamp(15px, 1.35vw, 19px);
  --hst-fig-num:   clamp(46px, 5vw, 72px);
}

.hst { font-family: var(--hst-body); background: var(--hst-navy-950); }
/* La navbar flota fija sobre los primeros 76 px: sin este margen, un salto de ancla
   deja el titular de la sección justo debajo de ella. */
.hst-group, .hst-our, .hst-figs { scroll-margin-top: 96px; }
.hst-container { max-width: var(--hst-max); margin: 0 auto; padding: 0 var(--hst-pad); }
.hst-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hst ::selection { background: var(--hst-cyan); color: #fff; }
:focus-visible { outline: 2px solid var(--hst-cyan); outline-offset: 3px; }

/* Titular de sección: 82px HNLT 75 Bold, uppercase, line-height 86 (del Figma). */
.hst-h2 { font-family: var(--hst-display); font-weight: 700; text-transform: uppercase; font-size: clamp(29px, 4.1vw, 59px); line-height: .95; color: #fff; }
.hst-lede { font-family: var(--hst-display); font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.12; color: rgba(255,255,255,.8); }

/* ═══ 1 · NAVBAR — pastilla flotante (clon del patrón de Compliance) ═══ */


/* ═══ 2 · HERO — cuatro capas ═══
   El Figma apila: foto → carta náutica (blur 2px, luminosity, .2) → titular →
   recorte del remolcador con alfa. El titular queda INTERCALADO: por delante de
   la carta y por detrás del barco. */
/* Esquinas inferiores redondeadas: es la firma de los hero del sitio actual —el
   bloque lee como una diapositiva que se desplaza. */
.hst-hero { position: relative; isolation: isolate; height: 748px; max-height: 88vh; min-height: 500px; overflow: hidden; background: var(--hst-navy-950);
            border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; }
.hst-hero-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hst-hero-bg    { z-index: 1; }
/* La carta náutica pasa de veladura a TEXTURA DE MAPA legible: es lo que se
   aprobó en la grabación, en vez de un vídeo de fondo. */
.hst-hero-chart { z-index: 2; filter: blur(var(--hst-hero-chart-blur, 1.4px)); mix-blend-mode: var(--hst-hero-chart-blend, luminosity); opacity: var(--hst-hero-chart-op, .26); }
/* «Subir el remolcador, que hoy sale muy abajo»: con object-fit:cover, mostrar
   una franja más BAJA del original sube el barco en pantalla. */
.hst-hero-tug   { z-index: 4; pointer-events: none; object-position: 50% var(--hst-hero-tug-y, 80%); }
.hst-hero::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(to bottom, rgba(0,14,30,.10) 0%, rgba(0,14,30,0) 40%, rgba(0,14,30,.45) 100%); }
.hst-hero-title {
  position: absolute; z-index: 3; left: 0; right: 0; top: 35%;
  font-family: var(--hst-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 8vw, 116px); line-height: .84; letter-spacing: -.005em;
  color: #fff; text-align: center; text-shadow: 0 4px 44px rgba(0,14,30,.5);
}
/* Entra desde detrás del barco: arranca 96 px más abajo y a opacidad 0 —el z-index 3
   ya lo deja por detrás del recorte— y sube a su sitio dos segundos tras la carga. */
.hst-root.js-on .hst-hero-title { opacity: 0; transform: translateY(96px); }
.hst-root.js-on .hst-hero-title.is-in { opacity: 1; transform: none; transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .hst-root.js-on .hst-hero-title { opacity: 1; transform: none; }
}
.hst-hero-title span { display: block; }
.hst-hero-anchors { position: absolute; z-index: 6; left: 0; right: 0; bottom: 11%; display: flex; justify-content: space-between; gap: 24px; padding: 0 max(24px, calc(50% - 650px)); }
.hst-anchor {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 11px 30px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.62); background: rgba(0,14,30,.22);
  backdrop-filter: blur(3px);
  font-family: var(--hst-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(14px, 1.55vw, 22px); line-height: 1; letter-spacing: .06em; color: #fff;
  transition: background .22s, color .22s, border-color .22s, transform .25s;
}
.hst-anchor:hover { background: #fff; color: var(--hst-navy-950); border-color: #fff; transform: translateY(-2px); }

/* ═══ FLECHAS (componente compartido — los SVG son los Component 47/48 del Figma) ═══ */
.hst-arrows { display: flex; justify-content: center; gap: 16px; }
.hst-arrows button { width: 63px; height: 63px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 8px; transition: transform .2s, opacity .2s; }
.hst-arrows button:hover:not(:disabled) { transform: translateY(-2px); }
.hst-arrows button:disabled { opacity: .35; cursor: default; }
.hst-arrows button:focus-visible { outline: 2px solid var(--hst-cyan); outline-offset: 3px; }
.hst-arrows img { width: 100%; height: 100%; display: block; }
.hst-fan-hint { display: none; margin-top: 6px; text-align: center; font-family: var(--hst-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.hst-count { font-family: var(--hst-display); font-weight: 700; font-size: 14px; letter-spacing: .1em; color: rgba(255,255,255,.55); text-align: center; margin-top: 14px; }

/* ═══ 3 · GROUP HISTORY — línea de tiempo horizontal ═══ */
.hst-group { position: relative; padding: clamp(32px, 3.4vw, 48px) 0 clamp(22px, 2.4vw, 34px); background: var(--hst-navy-950); overflow: hidden; }
/* Textura de fondo (ajuste 5). El asset definitivo está pendiente del cliente:
   cambiar --hst-group-tex y ya está, no hay que tocar la regla. */
.hst-group::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hst-group-tex, url(https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e37108d9c98b9eb4aa_cmp-card-topo.webp));
  background-size: var(--hst-group-tex-size, 720px);
  background-repeat: repeat;
  opacity: var(--hst-group-tex-op, .05);
}
.hst-gh-stage { position: relative; z-index: 1; }
.hst-gh-head { max-width: var(--hst-max); margin: 0 auto; padding: 0 var(--hst-pad); text-align: right; }
.hst-gh-head .hst-lede { margin-left: auto; width: 275px; max-width: 100%; margin-top: 11px; }
/* El año gigante vive FUERA del carril: no se desplaza, se sustituye. */
.hst-gh-year {
  position: absolute; z-index: 2;
  /* Acotado al margen: entre 768 y 1024 el nodo cae tan cerca del borde que el rótulo
     salía 22 px por la izquierda («952», QA del 08-sep). A 1440 el max() no actúa. */
  left: max(var(--hst-pad), calc(var(--gh-x0) + var(--gh-p, 0) * var(--gh-travel) - 46px));
  bottom: 50%; margin-bottom: var(--gh-year-off);
  transition: left .6s cubic-bezier(.16,1,.3,1), transform .22s ease, opacity .22s ease;
  font-family: var(--hst-display); font-weight: 700; text-transform: uppercase; color: #fff;
  font-size: var(--gh-year-fs); line-height: .78; letter-spacing: -.02em;
  transition: transform .22s ease, opacity .22s ease;
}
.hst-gh-year[data-pos="down"] { bottom: auto; top: 50%; margin-bottom: 0; margin-top: var(--gh-year-off); }
/* La unidad bajo la cifra: «220» a secas no se entiende. Va en dos líneas y pequeña. */
.hst-gh-year[data-unit]:not([data-unit=""])::after { content: attr(data-unit); display: block; margin-top: .12em;
  font-size: var(--gh-year-unit); line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--hst-cyan-lit); }
.hst-gh-year[data-kind="word"] { font-size: var(--gh-year-word); letter-spacing: .02em; }
.hst-gh-year.is-out { transform: translateY(-18px); opacity: 0; }
.hst-gh-year.is-in  { animation: hst-year-in .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes hst-year-in { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }

.hst-gh-viewport { position: relative; overflow: hidden; padding: 10px 0 10px var(--gh-x0); margin-top: 0; }
.hst-gh-viewport:focus-visible { outline: 2px solid var(--hst-cyan); outline-offset: -4px; }
/* Velo de salida: sin él, el párrafo que abandona la pantalla se corta a media
   palabra y parece un fallo de maquetación. */
.hst-gh-viewport::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 96px; z-index: 3; pointer-events: none;
  background: linear-gradient(to right, var(--hst-navy-950) 12%, rgba(0,14,30,0) 100%); }
/* Y por la DERECHA, por la misma razón: el capítulo vecino asomaba cortado a mitad de
   palabra a plena opacidad (a 375, 51 px de texto troceado; a 1440, el tercero). QA 08-sep. */
.hst-gh-viewport::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 140px; z-index: 3; pointer-events: none;
  background: linear-gradient(to left, var(--hst-navy-950) 18%, rgba(0,14,30,0) 100%); }
.hst-gh-rail {
  display: flex; list-style: none; position: relative;
  transform: translateX(calc(var(--gh-i) * var(--gh-pitch) * -1 + var(--gh-p, 0) * var(--gh-travel)));
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
/* La barra vive en el VIEWPORT, no en el carril: si se moviera con los hitos, el
   relleno sería siempre igual de largo y no diría nada. Estática, el porcentaje
   lleno es legible de un vistazo. Se sale por la derecha como la línea del Figma. */
.hst-gh-track {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; margin-top: -2px; border-radius: 999px; z-index: 0;
  background: rgba(255,255,255,.13); overflow: hidden;
}
/* El relleno acaba EXACTAMENTE bajo el hito activo, así que todo lo que queda a su
   izquierda —los puntos ya recorridos— se apoya en la parte llena. */
.hst-gh-track i {
  display: block; height: 100%; border-radius: 999px;
  width: calc(var(--gh-x0) + var(--gh-p, 0) * var(--gh-travel) + 31px);
  background: linear-gradient(90deg, var(--hst-cyan-dim) 0%, var(--hst-cyan) 60%, var(--hst-cyan-lit) 100%);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
.hst-gh-step { flex: 0 0 var(--gh-pitch); display: grid; grid-template-rows: 1fr var(--gh-node) 1fr; justify-items: start; position: relative; }
.hst-gh-node { grid-row: 2; align-self: center; width: var(--gh-node-sm); height: var(--gh-node-sm); border-radius: 999px; box-shadow: inset 0 0 0 2px var(--hst-cyan); background: rgba(0,14,30,.6); transition: width .4s, height .4s, background .4s, box-shadow .4s; }
.hst-gh-step.is-active .hst-gh-node { width: var(--gh-node); height: var(--gh-node); background: rgba(255,255,255,.82); box-shadow: inset 0 0 0 10px rgba(0,14,30,.06), 0 0 0 6px rgba(255,255,255,.10); }
.hst-gh-copy { width: var(--gh-copy-w); max-width: 76vw; font-family: var(--hst-display); font-weight: 700; font-size: 15.5px; line-height: 24.5px; color: rgba(255,255,255,.7); transition: color .4s; }
.hst-gh-step.is-active .hst-gh-copy { color: rgba(255,255,255,.95); }
.hst-gh-step[data-side="up"]   .hst-gh-copy { grid-row: 1; align-self: end;   margin-bottom: var(--gh-gap); }
.hst-gh-step[data-side="down"] .hst-gh-copy { grid-row: 3; align-self: start; margin-top: var(--gh-gap); }
.hst-gh-foot { margin-top: clamp(14px, 1.8vw, 26px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hst-gh-hint {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 6px;
  font-family: var(--hst-display); font-weight: 700; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  transition: opacity .45s ease, visibility .45s;
}
.hst-gh-hint.is-gone { opacity: 0; visibility: hidden; }
.hst-gh-hint svg { width: 26px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; animation: hst-nudge 1.9s ease-in-out infinite; }
@keyframes hst-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .hst-gh-hint svg { animation: none; } }

/* ═══ 4 · OUR HISTORY — abanico 3D ═══ */
/* Margen inferior a cero: la baraja llega hasta el final y se gana el aire que
   pedía el QA del 1-sep. */
.hst-our { position: relative; padding: clamp(52px, 5.6vw, 80px) 0 0; background: var(--hst-navy-950); overflow: hidden; }
.hst-our-water { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: hard-light; opacity: .10; pointer-events: none; }
.hst-our-inner { position: relative; z-index: 1; }
/* Cabecera centrada: la clienta lo pide dos veces en la grabación del 28-ago —«el
   Our History y aquí centrado» y «poner acá el título centrado, poner acá las
   pestañas»— y el abanico que va debajo también es simétrico. */
.hst-our-head { max-width: var(--hst-max); margin: 0 auto; padding: 0 var(--hst-pad); text-align: center; }
/* Aire sobre el titular, pedido en la revisión del 1-sep. */
.hst-our-head .hst-h2 { margin-top: 66px; }
.hst-our-head .hst-lede { width: 392px; max-width: 100%; margin: 11px auto 0; }

.hst-fan-wrap { position: relative; margin-top: clamp(10px, 1.4vw, 18px); }
/* Escala del abanico. Se escala la ESCENA entera —tarjetas, separación, profundidad
   y rótulos— con una sola transformación: así el gradiente de profundidad conserva
   sus proporciones exactas. El alto reservado se recupera con el margen negativo.
   Las flechas NO escalan: son UI y tienen que seguir en 44 px o más. */
.hst-fan-stage {
  --k: .85;
  transform: scale(var(--k));
  transform-origin: 50% 50%;
  margin-block: calc((var(--hst-fan-h) * (var(--k) - 1)) / 2);
}
/* Aire por arriba para que el desvanecido tenga DÓNDE ocurrir: sin él, la
   máscara se come el borde pero el filo recto sigue ahí. */
@media (min-width: 992px) { .hst-fan-stage { padding-top: 132px; margin-top: -132px; } }
/* El recorte va AQUÍ y no en .hst-fan. Es la trampa que hundió la primera versión:
   un `overflow` distinto de `visible` obliga a `transform-style` a calcularse como
   `flat`, así que un contenedor que recorta NO puede ser a la vez el contexto 3D.
   Por eso la primera versión no tenía profundidad ninguna. */
.hst-fan-stage { position: relative; z-index: 2; overflow: hidden; }
/* La máscara va en el MISMO elemento que recorta: así el borde deja de ser un filo
   recto y las tarjetas se desvanecen al salir por arriba y por la derecha, como ya
   lo hacen por abajo y por la izquierda.
   SOLO en escritorio: los degradados están calibrados para un escenario de 1440 px
   y bajo 992 —donde además los velos laterales van ocultos— apagaban el borde
   superior y el derecho sin que nadie lo hubiera pedido. */
@media (min-width: 992px) {
  .hst-fan-stage {
    -webkit-mask-image: var(--hst-fan-mask); mask-image: var(--hst-fan-mask);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}

.hst-fan {
  position: relative; height: var(--hst-fan-h); list-style: none;
  perspective: var(--hst-persp); perspective-origin: 50% var(--hst-fan-top);
  /* preserve-3d es lo que hace que el navegador ORDENE POR Z. Con él, el z-index
     deja de existir aquí — y eso es exactamente lo que se quiere: la oclusión la
     calcula el motor a partir de la profundidad real, no una lista que mantengo yo. */
  transform-style: preserve-3d;
  cursor: grab; touch-action: pan-y;
  /* El <ol> NO recibe el puntero (UT-39b, 10-sep). En un contexto preserve-3d el
     plano del propio contenedor está en z = 0 y, para el hit-test, tapa a toda
     tarjeta con translateZ negativo: elementFromPoint devolvía el <ol> sobre
     cualquier vecina —medido: 0 puntos alcanzables en las 19 no activas, a 390 y
     a 1440— y «solo la primera tarjeta abría». Con el plano transparente al
     puntero, cada tarjeta responde donde se ve; el arrastre sigue funcionando
     porque los eventos de las tarjetas burbujean hasta aquí, que es el trigger.
     El z-index:1 pone el anillo POR ENCIMA de las zonas de avance, que siendo
     hermanas posteriores con z-index:0 quedaban encima de las tarjetas. */
  pointer-events: none; z-index: 1;
}
.hst-fan.is-dragging { cursor: grabbing; }
.hst-fan:focus-visible { outline: none; }

.hst-fan-card {
  position: absolute; left: 50%; top: var(--hst-fan-top);
  width: var(--hst-card-w); height: var(--hst-card-h);
  /* Centrado por margen negativo, no por translate(-50%,-50%): el transform entero
     lo escribe GSAP y mezclarle porcentajes propios es pedir peleas. */
  margin: calc(var(--hst-card-h) / -2) 0 0 calc(var(--hst-card-w) / -2);
  border-radius: 14px; overflow: hidden; background: var(--hst-navy-900);
  backface-visibility: hidden;
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.75);
  pointer-events: auto; touch-action: pan-y;   /* la tarjeta sí se toca; el <ol> no (UT-39b) */
}
.hst-card-inner { position: absolute; inset: 0; }
.hst-card-face { position: absolute; inset: 0; }
.hst-card-era { display: none; }
.hst-fan:focus-visible .hst-fan-card[data-state="active"] { outline: 3px solid var(--hst-cyan); outline-offset: 4px; }
.hst-fan-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Las 19 fotos históricas del cliente son de 260 × 260 px y van de 1966 a 2014:
     grano, color y encuadre incompatibles. Se homogenizan por CSS, no editando. */
  filter: contrast(1.06) saturate(.9);
}
/* El velo de lejanía va en una capa de fondo, NO en la opacidad de la tarjeta:
   una tarjeta con opacity < 1 se aplana y deja de participar del contexto 3D.
   Además así el fondo de agua no se transparenta a través de la baraja. */
.hst-fan-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(0,14,30,0) 45%, rgba(0,14,30,.55) 100%),
    rgba(0,14,30, var(--scrim, 0));
}
/* Tarjeta terminal del anillo: no es un hito, es el puente a las cifras. */
/* «La carta especial». El borde es un degradado que gira mientras la carta está a
   la vista, para invitar al clic. Va en ::before con `mask` de dos capas para que
   solo se pinte el filo: un borde real no admite degradado animado.
   NO se usa `opacity` en la tarjeta: la aplanaría y la sacaría del contexto 3D. */
.hst-fan-card--end { background: linear-gradient(158deg, #0a3d63 0%, var(--hst-navy-800) 46%, var(--hst-navy-950) 100%);
  box-shadow: 0 24px 44px -16px rgba(0,0,0,.8); }
@property --hst-end-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.hst-fan-card--end::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 14px; padding: 2px;
  background: conic-gradient(from var(--hst-end-ang), var(--hst-cyan-lit), var(--hst-navy-950) 38%, var(--hst-navy-950) 62%, var(--hst-cyan-lit));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hst-end-gira 5.5s linear infinite;
}
@keyframes hst-end-gira { to { --hst-end-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hst-fan-card--end::before { animation: none; } }
/* Carta terminal, rediseñada tras el QA del 1-sep: logo pegado arriba, título
   grande al centro y la llamada convertida en botón abajo. */
.hst-fan-card--end .hst-card-front { display: grid; grid-template-rows: auto 1fr auto;
  justify-items: center; align-items: center; gap: 0; text-align: center; padding: 20px 22px 22px; }
.hst-fan-card--end::after { background: rgba(0,14,30, var(--scrim, 0)); }
/* 10% más grande y a 20 px del borde superior. */
.hst-fan-card--end img { width: 229px; height: auto; object-fit: contain; filter: none; align-self: start; margin-top: 0; }
/* 48 px sobre una tarjeta de 300: se escala con el ancho para que quepa en una
   línea también a 991 y en móvil. */
.hst-fan-card--end b { font-family: var(--hst-display); font-weight: 700; text-transform: none;
  font-size: calc(var(--hst-card-w) * 48 / 300); line-height: 1.05; letter-spacing: -.01em; color: #fff; max-width: 100%; }
/* La llamada pasa de texto suelto a botón, abajo. */
.hst-fan-card--end .hst-end-cta { align-self: end; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 10px 20px; border-radius: 999px;
  /* Fondo sólido, no un velo blanco: sobre el degradado de la carta el texto
     blanco quedaba sin contraste medible (1,00:1 en el QA). */
  background: rgba(0,14,30,.62); border: 1.5px solid var(--hst-cyan);
  font-family: var(--hst-display); font-weight: 700; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; }

/* Rótulos de año: capa PLANA fuera del contexto 3D — el texto no debe girar. */
.hst-fan-years { position: absolute; inset: 0; pointer-events: none; z-index: 85; }
/* El año activo va centrado bajo su tarjeta: es el «estás aquí» de la baraja.
   Se ocultó el 31-ago por parecer un duplicado del que va sobre la foto, pero sin
   él no hay forma de saber en qué año estás cuando los rótulos se solapaban. */
.hst-fan-year {
  position: absolute; left: 50%; top: var(--hst-fan-top); white-space: nowrap;
  margin-left: -60px; margin-top: -22px;
  font-family: var(--hst-display); font-weight: 700; font-size: var(--hst-year-fs);
  color: #fff; text-align: center; width: 120px;
}

/* Zonas laterales de navegación: invisibles, sin borde y sin foco visible propio
   —el foco lo llevan las flechas—, por debajo de la baraja para no interceptarla. */
.hst-fan-zona { position: absolute; top: 0; bottom: 0; width: 28%; z-index: 0;
  border: 0; background: transparent; padding: 0; cursor: pointer; }
.hst-fan-zona--l { left: 0; }
.hst-fan-zona--r { right: 0; }
.hst-fan-zona:focus-visible { outline: 2px solid var(--hst-cyan); outline-offset: -6px; }

/* Velos de borde: son los Rectangle 113/114 del Figma. */
.hst-fan-fade { position: absolute; top: 0; bottom: 0; width: 211px; z-index: 86; pointer-events: none; }
.hst-fan-fade--l { left: 0;  background: linear-gradient(to right, var(--hst-navy-950) 8%, rgba(0,14,30,0) 100%); }
.hst-fan-fade--r { right: 0; background: linear-gradient(to left,  var(--hst-navy-950) 8%, rgba(0,14,30,0) 100%); }

/* ═══ Pestañas de década ═══
   Antes no había forma de volver al principio: solo flechas, teclado y arrastre,
   todos secuenciales. Las construye el JS desde data-era. */
.hst-fan-tabs {
  position: relative; z-index: 3;
  display: flex; gap: 8px;
  /* `safe center` centra cuando caben y se comporta como flex-start cuando NO,
     que es lo único que deja llegar a la primera pestaña en móvil. Con un
     `center` a secas el desbordamiento se reparte a los dos lados y la primera
     queda fuera de alcance: comprobado a 390 px. */
  justify-content: flex-start;   /* reserva si el navegador no entiende `safe` */
  justify-content: safe center; margin-top: clamp(16px, 2vw, 24px);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.hst-fan-tabs::-webkit-scrollbar { display: none; }
.hst-fan-tabs button {
  flex: none; scroll-snap-align: start;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.26); background: rgba(255,255,255,.04);
  font-family: var(--hst-display); font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.72);
  white-space: nowrap; cursor: pointer;
  transition: background .22s, color .22s, border-color .22s;
}
.hst-fan-tabs button:hover { color: #fff; border-color: rgba(255,255,255,.55); }
.hst-fan-tabs button[aria-selected="true"] {
  background: var(--hst-cyan); border-color: var(--hst-cyan);
  color: var(--hst-navy-870);      /* 5,81:1 — el blanco sobre cian se queda en 3,1 */
}
.hst-fan-foot { position: relative; z-index: 90; margin-top: clamp(20px, 3vw, 40px); }
@media (min-width: 992px) {
  /* El pie pasa a ser una capa que cubre el escenario y NO intercepta el puntero:
     así las flechas pueden irse a los bordes sin robarle el arrastre al abanico
     ni el hit-test a la tarjeta activa. */
  .hst-fan-foot { position: absolute; inset: 0; margin-top: 0; transform: none; pointer-events: none; }
  .hst-fan-foot .hst-arrows {
    position: absolute; left: 0; right: 0; top: var(--hst-fan-top);
    transform: translateY(-50%);
    justify-content: space-between; align-items: center;
    padding: 0 var(--hst-fan-arrow-pad); gap: 0;
  }
  .hst-fan-foot .hst-arrows button { pointer-events: auto; }
  /* El contador estaba «muy escondido» abajo a la izquierda: sube al borde superior
     de la tarjeta activa, pequeño y a media luz. */
  .hst-fan-foot .hst-count { position: absolute; left: 0; right: 0; top: calc(var(--hst-activa-top, 120px) - 40px);
    text-align: center; padding: 0; font-size: 10px; letter-spacing: .18em; opacity: .8; }
  /* El hint también sube: es una instrucción, no un pie. */
  .hst-fan-foot .hst-fan-hint { display: block; position: absolute; left: 0; right: 0;
    top: calc(var(--hst-activa-top, 120px) - 62px);
    text-align: center; font-size: 10px; letter-spacing: .16em; opacity: .55; }

  /* ═══ El volteo, que hasta hoy era solo de móvil, pasa a escritorio ═══
     Va con .hst-root.js-on a propósito: sin JS la tarjeta no debe girar 180° o el texto
     del hito desaparecería y la página dejaría de leerse. */
  .hst-root.js-on .hst-fan-card { cursor: pointer; }
  .hst-root.js-on .hst-card-inner { transform-style: preserve-3d; transition: transform .62s cubic-bezier(.16,1,.3,1); }
  .hst-root.js-on .hst-fan-card.is-flipped .hst-card-inner { transform: rotateY(180deg); }
  .hst-root.js-on .hst-card-face { backface-visibility: hidden; border-radius: 14px; overflow: hidden; }
  /* La cara trasera se oculta POR ESTADO, no solo por culling: WebKit no respeta
     backface-visibility en las caras de una tarjeta plana y las pintaba en espejo
     (QA 08-sep). Se oculta con opacity, NO con visibility: visibility:hidden saca el
     texto de los hitos del árbol de accesibilidad y la suite dejó de encontrar los 19
     años. El cambio va retardado medio giro (.31 s de .62 s) para que en Chromium el
     volteo siga viéndose entero. */
  .hst-root.js-on .hst-card-face { transition: opacity 0s linear .31s; }
  .hst-root.js-on .hst-fan-card:not(.is-flipped) .hst-card-back { opacity: 0; }
  .hst-root.js-on .hst-fan-card.is-flipped .hst-card-front { opacity: 0; }
  .hst-root.js-on .hst-card-front { background: var(--hst-navy-900); }
  .hst-root.js-on .hst-card-back { transform: rotateY(180deg); background: var(--hst-navy-800); padding: 30px 32px; overflow-y: auto; }
  .hst-root.js-on .hst-card-back .hst-fan-copy { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding: 0; }
  .hst-root.js-on .hst-card-back .hst-fan-copy b { font-size: 34px; }
  .hst-root.js-on .hst-card-back .hst-fan-copy p { font-size: 14px; line-height: 22px; }
  /* Vuelta: sin el degradado de la cara, que ahí solo estorbaría al texto. */
  .hst-root.js-on .hst-fan-card.is-flipped::after { background: rgba(0,14,30, var(--scrim, 0)); }
  /* El año y el kicker se leen SOBRE la foto, en el degradado que ya existía. */
  .hst-root.js-on .hst-fan-card[data-state="active"] .hst-card-era { display: block; position: absolute; z-index: 2; left: 22px; bottom: 20px;
    font-family: var(--hst-display); font-weight: 700; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--hst-cyan-lit); }
  .hst-root.js-on .hst-fan-card--end .hst-card-face { background: transparent; }
}

/* ═══ 6 · ULTRATUG AT PRESENT — apilado sticky por scroll ═══
   Ya no es un acordeón por clic: las cuatro tarjetas van desplegadas y se apilan
   una sobre otra según se baja, dejando 20 px de la anterior asomando. */
.hst-figs { background: var(--hst-navy-950); padding: clamp(40px, 4.4vw, 64px) 0 clamp(40px, 4.4vw, 64px); }

.hst-figs-head { position: relative; z-index: 0; text-align: center; margin-bottom: clamp(22px, 2.8vw, 38px); }
/* ×3: el pequeño quedaba «perdido en el océano». Ahora es EL logo de la sección. */
.hst-figs-mark { display: block; width: clamp(228px, 21vw, 312px); height: auto; margin: 0 auto clamp(14px, 1.6vw, 22px); opacity: .96; }
/* Minúsculas y en una línea: en versales competía con el logo de encima. */
.hst-figs-title { font-family: var(--hst-display); font-weight: 700; text-transform: none; font-size: clamp(23px, 3.5vw, 52px); line-height: 1.04; white-space: nowrap; color: #fff; }
/* Entra desde detrás de las tarjetas: z-index 0 contra el 1 de la pila, arranca 72 px
   más abajo y a opacidad 0, y sube a su sitio al asomar la sección. */
.hst-root.js-on .hst-figs-head { opacity: 0; transform: translateY(72px); }
.hst-root.js-on .hst-figs-head.is-in { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) { .hst-root.js-on .hst-figs-head { opacity: 1; transform: none; } }

.hst-figs-stack { position: relative; z-index: 1; max-width: 1108px; margin: 0 auto; padding: 0 var(--hst-pad); }
.hst-fig + .hst-fig { margin-top: 34px; }
/* Recorrido extra para que la CUARTA tarjeta llegue a montarse: sin él, la última
   es el último hijo y el contenedor se acaba justo cuando iba a pegarse. Va como
   elemento real y no como padding ni margen — a un sticky lo limita la caja de
   CONTENIDO del padre, así que ni el relleno ni un margen que se colapsa cuentan. */
.hst-figs-tail { display: block; height: 210px; }
.hst-fig {
  position: sticky; top: calc(96px + var(--i) * 20px);
  height: var(--hst-fig-h);
  background: #fff; border-radius: var(--hst-fig-r); box-shadow: 0 20px 44px -20px rgba(0,0,0,.62);
  overflow: hidden; display: grid; grid-template-columns: var(--hst-fig-photo) 1fr;
}
.hst-fig-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.hst-fig-body { position: relative; padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
/* Marca de agua: es el MISMO patrón topográfico que la image 96 del Figma. */
.hst-fig-topo { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%) rotate(89.91deg); opacity: .05; pointer-events: none; }
.hst-fig h3 { position: relative; z-index: 1; font-family: var(--hst-display); font-weight: 700; text-transform: uppercase; font-size: var(--hst-fig-title); line-height: 1.02; color: var(--hst-navy-950); }
.hst-fig-sub { position: relative; z-index: 1; margin-top: 11px; max-width: 400px; font-family: var(--hst-display); font-weight: 300; font-size: var(--hst-fig-sub); line-height: 1.18; color: var(--hst-gray);
  text-align: justify; text-wrap: pretty; }
.hst-fig-num { position: relative; z-index: 1; margin-top: 18px; font-family: var(--hst-display); font-weight: 700; font-size: var(--hst-fig-num); line-height: .95; color: var(--hst-navy-950); }

/* ═══ 7 · FOOTER (el real del sitio, según el Figma) ═══ */
/* El logo emerge por DETRÁS del casco: este velo se interpone entre el vídeo y el
   logotipo, así que lo va descubriendo según sube. */

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* El abanico a tamaño de diseño solo cabe a partir de ~1200. Entre 992 y 1199 se
   encoge; por debajo deja de ser abanico (ver más abajo). */
@media (max-width: 1199px) {
  .hst-root {
    --hst-card-w: 252px; --hst-card-h: 345px;
    --hst-fan-h: 540px; --hst-persp: 1180px;
    --hst-year-fs: 21px;
  }
  .hst-fan-foot { bottom: 14px; }
}

@media (max-width: 991px) {
  .hst-root { --hst-pad: 40px; --gh-pitch: clamp(300px, 46vw, 420px); --hst-fig-photo: 44%; }
  .hst-hero { height: 596px; }

  /* En móvil SIGUE siendo un abanico 3D, no un slide plano: solo la anterior y la
     siguiente asoman en perspectiva. Y la tarjeta se VOLTEA al tocarla, así que el
     texto ya no necesita una ficha aparte y las flechas ocupan su sitio. */
  .hst-root { --hst-card-w: 236px; --hst-card-h: 324px; --hst-fan-h: 400px; --hst-fan-top: 46%; --hst-persp: 900px; }
  .hst-fan-years, .hst-fan-fade { display: none; }
  .hst-fan-card { cursor: pointer; perspective: 900px; background: transparent; box-shadow: none; }
  .hst-fan-card::after { display: none; }
  .hst-card-inner { transform-style: preserve-3d; transition: transform .62s cubic-bezier(.16,1,.3,1); }
  .hst-fan-card.is-flipped .hst-card-inner { transform: rotateY(180deg); }
  .hst-card-face { backface-visibility: hidden; border-radius: 14px; overflow: hidden; background: var(--hst-navy-900); box-shadow: 0 20px 34px -16px rgba(0,0,0,.72); }
  .hst-card-face { transition: opacity 0s linear .31s; }
  .hst-fan-card:not(.is-flipped) .hst-card-back { opacity: 0; }
  .hst-fan-card.is-flipped .hst-card-front { opacity: 0; }
  .hst-card-front::after { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(0,14,30,0) 34%, rgba(0,14,30,.82) 100%); }
  .hst-fan-card[data-state="active"] .hst-card-badge { display: block; z-index: 2; left: 18px; bottom: 40px; font-size: 34px; }
  .hst-fan-card[data-state="active"] .hst-card-era { display: block; position: absolute; z-index: 2; left: 18px; bottom: 18px;
    font-family: var(--hst-display); font-weight: 700; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--hst-cyan-lit); }
  .hst-card-back { transform: rotateY(180deg); background: var(--hst-navy-800); padding: 22px 20px; overflow-y: auto; }
  .hst-card-back .hst-fan-copy { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding: 0; }
  .hst-card-back .hst-fan-copy b { font-size: 26px; }
  .hst-card-back .hst-fan-copy p { font-size: 13px; line-height: 20px; }
  .hst-fan-card--end .hst-card-front { padding: 20px; gap: 12px; }
  .hst-fan-card--end .hst-card-front::after { display: none; }
  .hst-fan-foot { position: static; margin-top: 18px; display: flex; flex-direction: column; align-items: center; }
  .hst-fan-foot .hst-arrows { justify-content: center; order: 2; }
  /* «El contador puede estar ahí pero un poco más pequeño… bajarle la opacidad
     a un 80%», y el hint arriba del todo, que es una instrucción. */
  .hst-fan-foot .hst-count { text-align: center; padding-left: 0; order: 3; font-size: 10px; letter-spacing: .18em; opacity: .8; margin-top: 6px; }
  .hst-fan-hint { display: block; order: 1; font-size: 10px; letter-spacing: .16em; opacity: .55; margin-bottom: 10px; }

  /* Cifras: la foto se va arriba y el apilado sticky se mantiene — es justo lo que
     pidió el cliente para móvil, con la primera desplegada y las siguientes
     montándose al bajar. */
  .hst-figs-stack { max-width: 560px; }
  .hst-fig + .hst-fig { margin-top: 26px; }
  .hst-fig { grid-template-columns: 1fr; grid-template-rows: 148px 1fr; height: auto; min-height: 340px; top: calc(88px + var(--i) * 18px); }
  .hst-fig-photo { height: 148px; }
  .hst-fig-body { padding: 24px 26px 28px; }
  .hst-fig-topo { width: 320px; height: 320px; }
}

@media (max-width: 767px) {
  /* --gh-gap era 60 px entre el subtítulo y la palabra clave de cada momento:
     «demasiado grande, redúcelo por lo menos a la mitad, 36 y 48 por mucho». */
  .hst-root { --hst-pad: 24px; --gh-gap: 34px; --gh-copy-w: 240px; }
  /* El titular del hero, separado de la navbar y centrado en pantalla. */
  .hst-hero-title { top: auto; margin-top: 48px; }
  /* «Group History» con aire respecto al contenedor. */
  .hst-gh-head { padding-top: clamp(48px, 12vw, 66px); }
  /* Título y párrafo compartían eje mal: se alinean los dos al margen de la página. */
  .hst-gh-year { padding-left: 0; }
  .hst-gh-copy { margin-left: 0; }
  /* Alternar arriba/abajo en móvil obliga a subir y bajar para leer. Con
     data-gh-alt="off" el rótulo va SIEMPRE arriba y el párrafo SIEMPRE abajo.
     Se quita el atributo y vuelve el alternado: sirve para enseñar las dos. */
  .hst-group[data-gh-alt="off"] .hst-gh-step .hst-gh-copy {
    grid-row: 3; align-self: start; margin-top: var(--gh-gap); margin-bottom: 0; }
  /* UT-39a (10-sep): con el rótulo siempre arriba, la fila 1 del grid (1fr) se
     igualaba a la fila del párrafo —205 px medidos a 390— y quedaban ~130 px de
     vacío sobre el año; las flechas caían a y = 812 en una pantalla de 844 y había
     que bajar y volver a subir. La fila 1 se ajusta al rótulo: su altura (line-height
     .78) + la unidad («220 vessels») + el mismo despeje de 30 px que tenía sobre el
     anillo. El año se ancla al pie de esa fila en vez de al centro del carril. */
  .hst-group[data-gh-alt="off"] { --gh-year-room: calc(var(--gh-year-fs) * .78 + var(--gh-year-unit) * 1.12 + 6px + var(--gh-year-clear)); }
  .hst-group[data-gh-alt="off"] .hst-gh-step { grid-template-rows: var(--gh-year-room) var(--gh-node) 1fr; }
  .hst-group[data-gh-alt="off"] .hst-gh-year,
  .hst-group[data-gh-alt="off"] .hst-gh-year[data-pos="down"] {
    top: auto; margin-top: 0; margin-bottom: 0;
    bottom: calc(100% - 10px - var(--gh-year-room) + 6px + var(--gh-year-clear)); }
  .hst-hero { height: 520px; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
  .hst-hero-title { top: 24%; }
  .hst-hero-anchors { flex-direction: column; align-items: center; justify-content: center; gap: 10px; bottom: 8%; }
  .hst-anchor { width: min(280px, 76vw); }
  .hst-gh-head { text-align: left; }
  .hst-gh-head .hst-lede { margin-left: 0; }
  .hst-gh-year { padding-left: 0; left: max(var(--hst-pad), calc(var(--gh-x0) + var(--gh-p, 0) * var(--gh-travel) - 46px)); }
  .hst-gh-viewport { padding-left: var(--hst-pad); }
  .hst-fig-body { padding: 22px 22px 26px; }
}

@media (max-width: 478px) {
  .hst-hero { height: 452px; }
  .hst-root { --hst-card-w: 214px; --hst-card-h: 294px; --hst-fan-h: 368px; }
  .hst-arrows button { width: 56px; height: 56px; }
  .hst-arrows { gap: 12px; }
}

/* El tamaño mínimo no lo decide el ancho de pantalla sino con qué se toca: una
   tablet a 768 o un portátil táctil también necesitan 44 px. */
@media (hover: none) and (pointer: coarse) {
  .hst-anchor { min-height: 48px; }
  /* Un dedo grande no puede cambiar de tarjeta al arrastrar por los rótulos. */
  .hst-fan-years, .hst-fan-year { pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hst-fig, .hst-gh-rail, .hst-gh-year, .hst-gh-node, .hst-gh-copy { transition: none !important; animation: none !important; }
  .hst-gh-year.is-out { transform: none; opacity: 1; }
}

/* ═══════════════════ SIN JAVASCRIPT ═══════════════════
   El abanico es JS puro, así que la degradación no es opcional: sin JS los 19
   hitos, los 11 bloques del grupo y las 4 cifras tienen que seguir leyéndose. */
.hst-root:not(.js-on) .hst-fan-stage { overflow: visible; }
.hst-root:not(.js-on) .hst-fan { perspective: none; transform-style: flat; height: auto; overflow: visible; display: grid; gap: 24px; justify-items: center; }
.hst-root:not(.js-on) .hst-fan-card { position: static; width: min(460px, 100%); height: auto; margin: 0; transform: none; opacity: 1; display: block; padding: 0 0 22px; background: var(--hst-navy-900); }
.hst-root:not(.js-on) .hst-fan-card::after { display: none; }
.hst-root:not(.js-on) .hst-fan-card img { height: 240px; }
.hst-root:not(.js-on) .hst-fan-card--end { padding: 40px; }
.hst-root:not(.js-on) .hst-fan-copy { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding: 20px 24px 0; }
.hst-root:not(.js-on) .hst-gh-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; display: block; font-family: var(--hst-display); font-weight: 700; font-size: 28px; color: #fff; margin-bottom: 10px; }
.hst-root:not(.js-on) .hst-fan-years, .hst-root:not(.js-on) .hst-fan-fade,
.hst-root:not(.js-on) .hst-arrows, .hst-root:not(.js-on) .hst-count, .hst-root:not(.js-on) .hst-gh-node,
.hst-root:not(.js-on) .hst-gh-track, .hst-root:not(.js-on) .hst-gh-hint, .hst-root:not(.js-on) .hst-gh-year { display: none; }
.hst-root:not(.js-on) .hst-gh-viewport { overflow: visible; padding-left: var(--hst-pad); }
.hst-root:not(.js-on) .hst-gh-rail { flex-wrap: wrap; transform: none; gap: 44px 32px; }
.hst-root:not(.js-on) .hst-gh-rail::before { display: none; }
.hst-root:not(.js-on) .hst-gh-step { flex: 0 0 300px; display: block; }
.hst-root:not(.js-on) .hst-gh-step .hst-gh-copy { margin: 0; }
.hst-root:not(.js-on) .hst-fig { position: static; }

/* Copia dentro de la tarjeta: solo para lectores de pantalla y para el caso sin
   JS. La ficha de detalle es su espejo VISUAL y va aria-hidden, para no anunciar
   el mismo hito dos veces. */
.hst-fan-copy, .hst-gh-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hst-fan-copy b { display: block; font-family: var(--hst-display); font-weight: 700; font-size: 30px; color: #fff; }
.hst-fan-copy span { display: block; font-family: var(--hst-display); font-weight: 700; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--hst-cyan-lit); margin: 4px 0 10px; }
.hst-fan-copy p { font-size: 14px; line-height: 22.75px; color: rgba(255,255,255,.78); }
.hst-fan-copy p + p { margin-top: 10px; }
.hst-card-badge { display: none; position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--hst-display); font-weight: 700; font-size: 30px; color: #fff; text-shadow: 0 2px 12px rgba(0,14,30,.9); }

@font-face { font-family: 'HNLT'; src: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e32e179766f5e3a30e_hnlt-light.woff2')  format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNLT'; src: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e3f870ac00542c755f_hnlt-roman.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNLT'; src: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e35850f3c2a795e711_hnlt-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNLT'; src: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e32e179766f5e3a280_hnlt-bold.woff2')   format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── capa de porte: lo que solo se rompe sobre el sitio ────────────────────
/* El vídeo del hero tiene que arrancar POR DETRÁS de la barra, no debajo. Medido en
   staging: la barra global ocupa 72 px de flujo y `.hst-root` empezaba justo a 72, así
   que quedaba una franja oscura encima del vídeo. Se sube el bloque esos 72 px; la
   barra sigue pintando por encima porque lleva z-index máximo. */
.hst-root--1{margin-top:-72px}

/* build ea3da50274 */

/* ═══ Ajuste del 23-oct · móvil y tablet: los carriles de Our History llegan a los bordes ═══
   Paula y Andrés (19-oct): «en móvil la sección se corta, no está justificada a los márgenes».
   Las pestañas recortaban en el relleno de la cabecera (24-40 px dentro de la pantalla) y el abanico
   recortaba un 7,5 % por lado, porque el escenario que recorta está escalado a --k. Ahora los dos
   recortan en el borde de la pantalla y la primera pestaña sigue alineada al margen. En escritorio
   no cambia nada: ahí el borde lo funde la máscara. */
@media (max-width: 991px) {
  .hst-fan-tabs { margin-inline: calc(-1 * var(--hst-pad)); padding-inline: var(--hst-pad); scroll-padding-inline: var(--hst-pad); }
  .hst-fan-stage { width: calc(100% / var(--k)); margin-inline: calc(50% - 50% / var(--k)); }
}