/* =========================================================
   CQM — Consorcio Qutub Minar · sitio web
   Tokens: noche andina (navy), acero galvanizado (zinc),
   naranja alta visibilidad (marca), verde de aprobación.
   ========================================================= */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  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: "Archivo Variable";
  font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  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: "Inter Variable";
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/inter-greek-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

:root {
  --night: #041427;
  --navy: #022147;
  --navy-2: #0a2c52;
  --zinc-50: #f1f4f6;
  --zinc-200: #d3dae1;
  --zinc-300: #b6c1cb;
  --zinc-400: #8d9aa7;
  --hivis: #ff7d00;
  --hivis-soft: #ffa64d;
  --signal: #ffba08;
  --ok: #2ebd85;
  --sky: #8fe3ff;
  --glass: rgba(4, 20, 39, .58);
  --label-bg: rgba(5, 22, 42, .86);
  --label-edge: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px -8px rgba(2, 10, 22, .7);
  --hair: rgba(241, 244, 246, .16);

  --font-display: "Archivo Variable", "Inter Variable", "Segoe UI", system-ui, sans-serif;
  --font-text: "Inter Variable", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 76px;
  --rail-h: 86px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: rgba(141, 154, 167, .5) var(--night); }
::selection { background: rgba(255, 125, 0, .38); color: #fff; }
button, .btn, .nav a, .lang-menu a, .mobile-menu a { touch-action: manipulation; }
button, .btn { -webkit-user-select: none; user-select: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--night);
  color: var(--zinc-50);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--zinc-50); color: var(--night);
  padding: 10px 14px; border-radius: 2px; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  height: 44px; padding: 0 18px;
  font-family: var(--font-display); font-stretch: 100%; font-weight: 560; font-size: 15px;
  text-decoration: none; border-radius: 2px; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-line { border: 1px solid rgba(241, 244, 246, .42); color: var(--zinc-50); }
.btn-line.is-current { border-color: var(--hivis); color: #fff; }
.btn-solid { background: var(--hivis); color: #1a0d00; border: 1px solid var(--hivis); }
@media (hover: hover) and (pointer: fine) {
  .btn-line:hover { border-color: var(--zinc-50); background: rgba(241, 244, 246, .08); }
  .btn-solid:hover { background: var(--hivis-soft); border-color: var(--hivis-soft); }
  .nav a:hover { color: #fff; }
  .nav a:hover::after { transform: scaleX(1); }
      }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: env(safe-area-inset-top, 0px) max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
  transition: background-color .4s, backdrop-filter .4s, box-shadow .4s;
}
.site-header.is-solid {
  background: rgba(4, 20, 39, .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--hair);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 46px; width: auto; }
.nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.nav a {
  position: relative; text-decoration: none;
  font-weight: 500; font-size: 15px; color: #fff;
  padding: 8px 0; transition: color .2s ease; text-shadow: 0 1px 10px rgba(4, 20, 39, .55);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--hivis); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav a.is-current { color: #fff; }
.nav a.is-current::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 12px; }

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 12px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 560; font-size: 14px; color: #fff; text-shadow: 0 1px 10px rgba(4, 20, 39, .55);
}
@media (hover: hover) and (pointer: fine) { .lang-btn:hover { color: #fff; } }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
  margin: 0; padding: 6px; list-style: none;
  background: rgba(4, 20, 39, .94); border: 1px solid var(--hair); border-radius: 4px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s, transform .2s var(--ease-out), visibility 0s .2s;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 2px; text-decoration: none; font-size: 15px; color: var(--zinc-200);
}
@media (hover: hover) and (pointer: fine) { .lang-menu a:hover { background: rgba(241, 244, 246, .07); color: #fff; } }
.lang-menu a[aria-current="true"] { color: #fff; }
.lang-menu a[aria-current="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hivis); }
.lang-menu a.is-soon { color: var(--zinc-400); }
.lang-menu a.is-soon::after { content: attr(data-soon); font-size: 12px; color: var(--zinc-400); }

/* =========================================================
   HERO · proceso con scroll del video
   ========================================================= */
.hero { position: relative; height: 1370vh; }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--night) var(--hero0, url(../hero/hd5m/f000.webp)) center / cover no-repeat;   /* --hero0: lo fija el <head> con la serie de esta pantalla */
}
.hero-sticky.is-ready { background-image: none; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 20, 39, .8) 0, rgba(4, 20, 39, .6) 60px, rgba(4, 20, 39, .28) 104px, rgba(4, 20, 39, 0) 170px),
    linear-gradient(0deg, rgba(4, 20, 39, .9) 0, rgba(4, 20, 39, .64) 22%, rgba(4, 20, 39, .26) 42%, rgba(4, 20, 39, 0) 60%),
    linear-gradient(90deg, rgba(4, 20, 39, .62) 0, rgba(4, 20, 39, .3) 30%, rgba(4, 20, 39, 0) 52%);
}

/* ---------- Textos por etapa ---------- */
.stages {
  position: absolute; z-index: 4;
  left: var(--gutter); bottom: calc(var(--rail-h) + clamp(22px, 4vh, 44px));
  width: min(40rem, calc(100% - 2 * var(--gutter)));
}
.stage {
  position: absolute; left: 0; bottom: 0; width: 100%;
  visibility: hidden; transition: visibility 0s .5s;
}
.stage.is-on { visibility: visible; transition-delay: 0s; }
.stage > * {
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .22s ease, transform .3s var(--ease-out);
}
.stage.is-past > * { transform: translate3d(0, -14px, 0); }
.stage.is-on > * {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease-out), transform .7s var(--ease-out);
}
.stage.is-on > :nth-child(2) { transition-delay: .05s; }
.stage.is-on > :nth-child(3) { transition-delay: .11s; }
.stage.is-on > :nth-child(4) { transition-delay: .17s; }
.stage.is-on > :nth-child(5) { transition-delay: .23s; }
.stages.is-measuring .stage > *, .stages.is-measuring .stage-title > span { transition: none !important; transform: none !important; }

.stage-title, .stage-kicker, .stage-lead, .stage-fact, .intro-facts, .scroll-hint { text-shadow: 0 1px 14px rgba(4, 20, 39, .5); }
.stage-title {
  margin: .2em 0 .36em;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 640;
  font-size: clamp(2.05rem, 1rem + 2.75vw, 3.9rem);
  line-height: .98; letter-spacing: -.026em; color: #fff;
  text-wrap: balance; overflow: hidden; padding-bottom: .06em;
}
.nw { white-space: nowrap; }
.stage-title > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform .3s var(--ease-out); }
.stage.is-on .stage-title > span { transform: none; transition: transform .8s var(--ease-out) .04s; }
.stage-intro .stage-title { font-size: clamp(2.3rem, 1rem + 3.4vw, 4.6rem); max-width: 15ch; }

.stage-kicker {
  margin: 0; display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-display); font-stretch: 82%; font-weight: 560; font-size: .98rem;
  color: #fff; font-variant-numeric: tabular-nums;
}
.module {
  font-style: normal; margin-left: .55em;
  padding: .12em .5em .14em; border: 1px solid rgba(255, 125, 0, .75); border-radius: 2px;
  font-size: .8rem; font-weight: 600; color: var(--hivis-soft); letter-spacing: .02em; background: rgba(4, 20, 39, .72);
}
.stage-lead {
  margin: 0 0 1rem; max-width: 46ch;
  font-size: clamp(.98rem, .9rem + .25vw, 1.1rem); line-height: 1.5;
  color: rgba(241, 244, 246, .9);
}
.stage-fact {
  position: relative; margin: 0; padding-left: 30px; width: fit-content;
  font-family: var(--font-display); font-stretch: 86%; font-weight: 500; font-size: 1rem;
  color: var(--zinc-200); font-variant-numeric: tabular-nums;
}
.stage-fact::before { content: ""; position: absolute; left: 0; top: .72em; width: 20px; height: 1px; background: var(--hivis); }
.stage-fact-key b { font-stretch: 100%; font-weight: 650; font-size: 1.35rem; color: var(--hivis-soft); margin-right: .2em; }
.stage-cta { margin-top: 1.3rem; }

.intro-facts { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.intro-facts li { padding: 0 18px; border-left: 1px solid var(--hair); font-size: .95rem; color: var(--zinc-300); }
.intro-facts li:first-child { padding-left: 0; border-left: 0; }
.intro-facts b { font-family: var(--font-display); font-weight: 620; font-size: 1.12rem; color: #fff; margin-right: .25em; }
.scroll-hint {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--font-display); font-stretch: 86%; font-size: .95rem; color: var(--zinc-300);
}
.scroll-hint i { position: relative; width: 1px; height: 38px; overflow: hidden; background: rgba(241, 244, 246, .2); }
.scroll-hint i::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
  background: var(--hivis); animation: hint 1.8s var(--ease-out) infinite;
}
@keyframes hint { to { top: 100%; } }

/* ---------- Etiquetas técnicas ---------- */
.annos { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.anno, .mg { position: absolute; left: 0; top: 0; transition: opacity .25s ease; }
.anno.is-on, .mg.is-on { will-change: transform; }
.anno.is-blocked, .mg.is-blocked { opacity: 0; }
.anno-dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--hivis); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 5px rgba(4, 20, 39, .35);
  opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .2s var(--ease-out);
}
.anno-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255, 166, 77, .8); opacity: 0; }
.anno.is-on .anno-dot { opacity: 1; transform: none; transition: opacity .2s ease, transform .35s var(--ease-out); }
.anno.is-on .anno-dot::after { animation: ping 1.8s var(--ease-out) .5s infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.anno-line { position: absolute; left: 0; top: 0; width: 2px; height: 2px; max-width: none; overflow: visible; }
.anno-line path {
  fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.3;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s var(--ease-out);
}
.anno.is-on .anno-line path { stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--ease-out) .06s; }
.anno-label {
  position: absolute; white-space: nowrap; padding: 6px 10px 7px;
  font-family: var(--font-display); font-stretch: 84%; font-weight: 540; font-size: 15px; line-height: 1.15;
  color: #fff; background: var(--label-bg); border: 1px solid var(--hair); border-radius: 3px; box-shadow: var(--label-edge);
  opacity: 0; clip-path: inset(0 100% 0 0);
  transition: opacity .15s ease, clip-path .2s var(--ease-out);
}
.anno.is-on .anno-label { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .2s ease .18s, clip-path .45s var(--ease-out) .18s; }
.anno-strong .anno-label { font-size: 16.5px; font-weight: 600; border-color: rgba(255, 125, 0, .7); }
.dir-ne .anno-label { left: 64px; top: -38px; transform: translateY(-50%); }
.dir-se .anno-label { left: 64px; top: 38px; transform: translateY(-50%); }
.dir-nw .anno-label { left: -64px; top: -38px; transform: translate(-100%, -50%); clip-path: inset(0 0 0 100%); }
.dir-sw .anno-label { left: -64px; top: 38px; transform: translate(-100%, -50%); clip-path: inset(0 0 0 100%); }
.dir-e .anno-label { left: 58px; top: 0; transform: translateY(-50%); }
.dir-w .anno-label { left: -58px; top: 0; transform: translate(-100%, -50%); clip-path: inset(0 0 0 100%); }
.dir-n .anno-label { left: 0; top: -54px; transform: translate(-50%, -100%); clip-path: inset(100% 0 0 0); }
.dir-s .anno-label { left: 0; top: 54px; transform: translate(-50%, 0); clip-path: inset(0 0 100% 0); }

/* Composición química ASTM A572 Gr. 50 (dentro de la etiqueta del ángulo) */
.anno-chem .anno-label { display: grid; gap: 8px; padding: 9px 11px 9px; white-space: normal; }
.anno-chem .chem-title { white-space: nowrap; }
.chem { display: grid; grid-template-columns: repeat(6, auto); gap: 4px; }
.chem i {
  display: grid; justify-items: start; gap: 1px; min-width: 42px; padding: 4px 6px 5px;
  font-style: normal; font-family: var(--font-display); font-stretch: 86%; font-weight: 520; font-size: 12.5px;
  color: var(--zinc-200); font-variant-numeric: tabular-nums;
  background: rgba(241, 244, 246, .05); border: 1px solid rgba(241, 244, 246, .12); border-radius: 2px;
  opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .2s var(--ease-out);
}
.chem b { font-stretch: 100%; font-weight: 650; font-size: 15px; line-height: 1; color: #fff; }
.chem .is-fe { background: rgba(255, 125, 0, .12); border-color: rgba(255, 125, 0, .5); }
.chem .is-fe b { color: var(--hivis-soft); }
.chem-note { font-family: var(--font-display); font-stretch: 84%; font-weight: 480; font-size: 12px; color: var(--zinc-300); white-space: nowrap; }
.galv.is-on .chem i { opacity: 1; transform: none; transition: opacity .3s ease, transform .5s var(--ease-out); }
.galv.is-on .chem i:nth-child(1) { transition-delay: .5s; }
.galv.is-on .chem i:nth-child(2) { transition-delay: .55s; }
.galv.is-on .chem i:nth-child(3) { transition-delay: .6s; }
.galv.is-on .chem i:nth-child(4) { transition-delay: .65s; }
.galv.is-on .chem i:nth-child(5) { transition-delay: .7s; }
.galv.is-on .chem i:nth-child(6) { transition-delay: .75s; }

/* Sello de aprobación */
.mg-stamp { display: flex; align-items: center; gap: 10px; }
.mg-stamp svg { width: 42px; height: 42px; flex: none; max-width: none; }
.mg-ring, .mg-check { fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mg-ring { stroke-dasharray: 107; stroke-dashoffset: 107; transition: stroke-dashoffset .25s var(--ease-out); }
.mg-check { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .15s ease; }
.mg-stamp span {
  padding: 7px 11px; font-family: var(--font-display); font-stretch: 86%; font-weight: 600; font-size: 15px; white-space: nowrap;
  background: rgba(8, 40, 30, .9); border: 1px solid rgba(46, 189, 133, .6); border-radius: 3px; color: #d9fbe9; box-shadow: var(--label-edge);
  opacity: 0; transform: translateX(-8px); transition: opacity .15s ease, transform .2s var(--ease-out);
}
.mg-stamp.is-on .mg-ring { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-out); }
.mg-stamp.is-on .mg-check { stroke-dashoffset: 0; transition: stroke-dashoffset .35s var(--ease-out) .4s; }
.mg-stamp.is-on span { opacity: 1; transform: none; transition: opacity .3s ease .45s, transform .5s var(--ease-out) .45s; }

/* Marco QR */
.mg-qr { width: 0; height: 0; }
.mg-qr .c, .mg-qr .scan { position: absolute; display: block; }
.mg-qr .c { width: 26px; height: 26px; border: 0 solid #fff; opacity: 0; transition: transform .25s var(--ease-out), opacity .15s ease; }
.mg-qr .tl { left: -86px; top: -110px; border-width: 2px 0 0 2px; transform: translate(-24px, -24px); }
.mg-qr .tr { left: 60px;  top: -110px; border-width: 2px 2px 0 0; transform: translate(24px, -24px); }
.mg-qr .bl { left: -86px; top: 84px;  border-width: 0 0 2px 2px; transform: translate(-24px, 24px); }
.mg-qr .br { left: 60px;  top: 84px;  border-width: 0 2px 2px 0; transform: translate(24px, 24px); }
.mg-qr.is-on .c { opacity: 1; transform: none; transition: transform .55s var(--ease-out), opacity .25s ease; }
.mg-qr .scan {
  left: -82px; width: 164px; height: 2px; top: -106px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--hivis), transparent); box-shadow: 0 0 14px 2px rgba(255, 125, 0, .55);
}
.mg-qr.is-on .scan { opacity: 1; animation: scan 1.6s ease-in-out .4s infinite alternate; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(206px); } }
.mg-qr-tag {
  position: absolute; left: -86px; top: 124px; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 8px 12px 8px 10px; font-family: var(--font-display); font-stretch: 86%;
  background: var(--label-bg); border: 1px solid var(--hair); border-radius: 3px; box-shadow: var(--label-edge);
  opacity: 0; transform: translateY(8px); transition: opacity .15s ease, transform .2s var(--ease-out);
}
.mg-qr-tag svg { width: 22px; height: 22px; flex: none; max-width: none; color: var(--hivis-soft); }
.qr-text { display: grid; gap: 2px; }
.qr-text b { font-weight: 600; font-size: 15px; color: #fff; }
.qr-text small { font-weight: 480; font-size: 13px; color: var(--zinc-200); }
.mg-qr.is-on .mg-qr-tag { opacity: 1; transform: none; transition: opacity .3s ease .4s, transform .5s var(--ease-out) .4s; }

/* Inspección pre-embarque: registro técnico que se completa con el scroll */
.mg-psi { width: 0; height: 0; }
.psi-lead { position: absolute; left: 0; top: 0; width: 2px; height: 2px; max-width: none; overflow: visible; }
.psi-lead path { fill: none; stroke: rgba(255, 255, 255, .88); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s var(--ease-out); }
.mg-psi.is-on .psi-lead path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease-out); }
.mg-psi::before {
  content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--hivis); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .2s var(--ease-out);
}
.mg-psi.is-on::before { opacity: 1; transform: none; }
.psi-list {
  position: absolute; left: 40px; top: 6px; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 4px; width: max-content;
}
.mg-psi.dir-w .psi-list { left: auto; right: 40px; }
.psi-list li {
  display: flex; align-items: center; gap: 9px; padding: 5px 11px 6px 9px;
  font-family: var(--font-display); font-stretch: 84%; font-weight: 520; font-size: 14.5px; line-height: 1.15; white-space: nowrap;
  color: var(--zinc-300); background: var(--label-bg); border: 1px solid var(--hair); border-radius: 3px; box-shadow: var(--label-edge);
  opacity: 0; transform: translateX(-10px); transition: opacity .15s ease, transform .2s var(--ease-out), color .3s ease, border-color .3s ease;
}
.mg-psi.is-on .psi-list li { opacity: 1; transform: none; transition: opacity .35s ease, transform .55s var(--ease-out), color .3s ease, border-color .3s ease; }
.mg-psi.is-on .psi-list li:nth-child(2) { transition-delay: .06s, .06s, 0s, 0s; }
.mg-psi.is-on .psi-list li:nth-child(3) { transition-delay: .12s, .12s, 0s, 0s; }
.mg-psi.is-on .psi-list li:nth-child(4) { transition-delay: .18s, .18s, 0s, 0s; }
.mg-psi.is-on .psi-list li:nth-child(5) { transition-delay: .24s, .24s, 0s, 0s; }
.psi-list .psi-head { color: #fff; font-weight: 640; font-stretch: 90%; border-color: rgba(255, 125, 0, .7); }
.psi-list li i {
  position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(241, 244, 246, .55); transition: background-color .3s ease, border-color .3s ease;
}
.psi-list li i::after {
  content: ""; position: absolute; left: 3.5px; top: 1px; width: 3.5px; height: 7px;
  border: solid #04210f; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(.4); opacity: 0; transition: transform .2s var(--ease-out), opacity .15s ease;
}
.psi-list li.is-done { color: #fff; border-color: rgba(46, 189, 133, .55); }
.psi-list li.is-done i { background: var(--ok); border-color: var(--ok); }
.psi-list li.is-done i::after { transform: rotate(45deg) scale(1); opacity: 1; transition: transform .35s var(--ease-out) .05s, opacity .2s ease .05s; }

/* ---------- Capas del galvanizado ---------- */
.galv { position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; }
.galv.is-on { visibility: visible; }
.galv-lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.galv-line { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s var(--ease-out); }
.galv-dot { fill: var(--hivis); stroke: #fff; stroke-width: 1.6; opacity: 0; transition: opacity .2s ease; }
.galv-cap, .galv-row { position: absolute; left: 0; top: 0; margin: 0; }
.galv.is-on .galv-cap, .galv.is-on .galv-row { will-change: transform; }
.galv-cap {
  font-family: var(--font-display); font-stretch: 86%; font-weight: 600; font-size: 14px; color: #0b1a2c;
  padding: 4px 9px; background: rgba(241, 244, 246, .92); border-radius: 3px;
  opacity: 0; transition: opacity .2s ease;
}
.galv-row {
  display: grid; grid-template-columns: 14px auto 1fr; column-gap: 9px; row-gap: 1px; align-items: center;
  padding: 7px 12px 8px 10px; min-width: 214px;
  background: var(--label-bg); border: 1px solid var(--hair); border-radius: 3px; box-shadow: var(--label-edge);
  opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity .15s ease, clip-path .2s var(--ease-out);
}
.galv-row .sw { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; width: 14px; border-radius: 2px; background: linear-gradient(180deg, var(--sw), color-mix(in srgb, var(--sw) 70%, #041427)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.galv-row b { grid-column: 2; font-family: var(--font-display); font-stretch: 96%; font-weight: 640; font-size: 16px; color: #fff; }
.galv-row small { grid-column: 3; justify-self: end; font-family: var(--font-display); font-stretch: 84%; font-size: 12.5px; color: var(--zinc-300); font-variant-numeric: tabular-nums; }
.galv-row span { grid-column: 2 / -1; font-family: var(--font-display); font-stretch: 86%; font-weight: 540; font-size: 14.5px; color: var(--hivis-soft); font-variant-numeric: tabular-nums; }
.galv.is-on .galv-cap { opacity: 1; transition-delay: .1s; }
.galv.is-on .galv-row { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .25s ease, clip-path .5s var(--ease-out); }
.galv.is-on .galv-line { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out); }
.galv.is-on .galv-dot { opacity: 1; }
.galv.is-on .galv-row:nth-of-type(2) { transition-delay: .06s; }
.galv.is-on .galv-row:nth-of-type(3) { transition-delay: .12s; }
.galv.is-on .galv-row:nth-of-type(4) { transition-delay: .18s; }
.galv.is-on .galv-row:nth-of-type(5) { transition-delay: .24s; }
.galv.is-on .galv-row:nth-of-type(6) { transition-delay: .3s; }

/* ---------- Prueba de carga: pantalla dividida ---------- */
.loadtest {
  position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: var(--panel-w, 40vw);
  transform: translate3d(100%, 0, 0);
  visibility: hidden; background: var(--night);
  border-left: 1px solid rgba(255, 125, 0, .55);
}
.loadtest.is-on { visibility: visible; will-change: transform; }
.loadtest-media { position: absolute; inset: 0; overflow: hidden; }
.lt-scene { position: absolute; left: 0; right: 0; top: calc(var(--header-h) * .55); bottom: 0; transform-origin: 50% 0; }
.loadtest.is-on .lt-scene { will-change: transform; }
.lt-scene img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.loadtest-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.loadtest-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--night) 0, rgba(4, 20, 39, .92) calc(var(--header-h) * .55), rgba(4, 20, 39, .25) calc(var(--header-h) + 40px), rgba(4, 20, 39, 0) calc(var(--header-h) + 90px)),
    linear-gradient(0deg, rgba(4, 20, 39, .97) 0, rgba(4, 20, 39, .9) 30%, rgba(4, 20, 39, .4) 50%, rgba(4, 20, 39, 0) 64%);
}
.lt-load, .lt-heads { filter: drop-shadow(0 1px 2px rgba(4, 20, 39, .85)); }
.lt-load path { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lt-load .lt-t { stroke: var(--hivis); }
.lt-load .lt-v { stroke: var(--signal); }
.lt-load .lt-l { stroke: var(--sky); }
.lt-nodes circle { fill: #fff; stroke: var(--hivis); stroke-width: 5; }
.lt-heads .h-t { fill: var(--hivis); }
.lt-heads .h-v { fill: var(--signal); }
.lt-heads .h-l { fill: var(--sky); }
.loadtest-hud {
  position: absolute; left: 8%; right: 8%; bottom: calc(var(--rail-h) + 26px);
  display: grid; gap: 4px;
}
.lt-title { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 640; font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); color: #fff; letter-spacing: -.01em; }
.lt-std { margin: 0 0 10px; font-family: var(--font-display); font-stretch: 86%; font-size: 14.5px; color: var(--zinc-200); }
.lt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; padding: 0; list-style: none; }
.lt-legend li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-stretch: 86%; font-weight: 540; font-size: 14px; color: var(--zinc-50); }
.lt-legend li::before { content: ""; width: 16px; height: 4px; border-radius: 2px; }
.lt-legend .lg-t::before { background: var(--hivis); }
.lt-legend .lg-l::before { background: var(--sky); }
.lt-legend .lg-v::before { background: var(--signal); }
.lt-gauge { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
.lt-value { margin: 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 640; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.lt-unit { margin: 0; font-family: var(--font-display); font-stretch: 86%; font-size: 14.5px; color: var(--zinc-200); }
.lt-bar { position: relative; grid-column: 1 / -1; height: 4px; margin-top: 12px; background: rgba(241, 244, 246, .18); border-radius: 2px; }
.lt-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--signal), var(--hivis)); transform-origin: 0 50%; transform: scaleX(0); border-radius: 2px; }
.lt-bar b { position: absolute; top: -4px; width: 1px; height: 12px; background: rgba(241, 244, 246, .5); }
.lt-ok {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0; width: fit-content;
  padding: 6px 11px; font-family: var(--font-display); font-stretch: 86%; font-weight: 600; font-size: 14.5px;
  color: #d9fbe9; background: rgba(8, 40, 30, .9); border: 1px solid rgba(46, 189, 133, .6); border-radius: 3px;
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .25s var(--ease-out);
}
.lt-ok svg { width: 16px; height: 16px; max-width: none; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.loadtest.is-ok .lt-ok { opacity: 1; transform: none; transition: opacity .4s ease, transform .55s var(--ease-out); }

/* ---------- Seguimiento del embarque ---------- */
.voyage {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--header-h) + 14px);
  width: min(640px, calc(100% - 2 * var(--gutter))); transform: translate(-50%, -8px);
  padding: 10px 18px 8px; background: rgba(4, 20, 39, .84); border: 1px solid var(--hair); border-radius: 4px; box-shadow: var(--label-edge);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s .25s;
}
.voyage.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .5s ease, transform .7s var(--ease-out); }
.voyage-track { position: relative; height: 2px; margin: 0 6px; background: rgba(241, 244, 246, .28); }
.voyage-fill { position: absolute; inset: 0; background: var(--hivis); transform-origin: 0 50%; transform: scaleX(0); }
.voyage-ship {
  position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: grid; place-items: center;
  background: var(--night); border: 1px solid var(--hivis); border-radius: 50%; will-change: transform;
}
.voyage-ship svg { width: 16px; height: 10px; max-width: none; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.voyage-stops { position: relative; height: 26px; margin: 0 6px; padding: 0; list-style: none; }
.voyage-stops li {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display); font-stretch: 84%; font-weight: 540; font-size: 13.5px; line-height: 1; color: var(--zinc-300);
  transition: color .3s ease;
}
.voyage-top li { bottom: 12px; }
.voyage-bot li { top: 12px; }
.voyage-stops li[data-f="0"] { transform: none; }
.voyage-stops li[data-f="1"] { transform: translateX(-100%); }
.voyage-stops li::before {
  content: ""; position: absolute; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--night); border: 1.5px solid rgba(241, 244, 246, .6); transition: background-color .3s ease, border-color .3s ease;
}
.voyage-top li::before { bottom: -16px; }
.voyage-bot li::before { top: -17px; }
.voyage-stops li[data-f="0"]::before { left: 0; }
.voyage-stops li[data-f="1"]::before { left: 100%; }
.voyage-stops li.is-done { color: #fff; }
.voyage-stops li.is-done::before { background: var(--hivis); border-color: var(--hivis); }

/* ---------- Riel: línea de transmisión ---------- */
.line-rail { position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: var(--rail-h); }
.line-rail-svg { position: absolute; left: 0; top: 0; width: 100%; height: 44px; max-width: none; overflow: visible; }
.rail-span-base { fill: none; stroke: rgba(241, 244, 246, .26); stroke-width: 1; }
.rail-span-fill { fill: none; stroke: var(--hivis); stroke-width: 1.6; }
.rail-tower { fill: none; stroke: rgba(241, 244, 246, .38); stroke-width: 1.1; stroke-linejoin: round; transition: stroke .4s; }
.rail-tower.is-past { stroke: rgba(241, 244, 246, .8); }
.rail-tower.is-on { stroke: var(--hivis); }
.rail-glow { fill: var(--hivis); opacity: 0; transition: opacity .4s; }
.rail-glow.is-on { opacity: .9; }
.line-rail-stops { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.line-rail-stops li { position: absolute; top: 0; transform: translateX(-50%); }
.line-rail-stops button {
  display: block; padding: 46px 6px 6px; margin-top: -4px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-stretch: 82%; font-weight: 520; font-size: 13.5px; white-space: nowrap;
  color: var(--zinc-300); transition: color .25s ease;
}
.line-rail-stops button:active { color: #fff; }
@media (hover: hover) and (pointer: fine) { .line-rail-stops button:hover { color: #fff; } }
.line-rail-stops li.is-past button { color: var(--zinc-200); }
.line-rail-stops li.is-on button { color: #fff; }
.line-rail-stops button span { font-variant-numeric: tabular-nums; color: var(--zinc-400); margin-right: .35em; }
.line-rail-stops li.is-on button span { color: var(--hivis-soft); }
.line-rail-load {
  position: absolute; right: 0; top: -22px; margin: 0;
  font-family: var(--font-display); font-stretch: 86%; font-size: 12.5px; color: var(--zinc-400); transition: opacity .6s;
}
.line-rail-load.is-done { opacity: 0; }
.hero-sticky.is-intro .line-rail { opacity: .75; }

/* ---------- Secciones siguientes (provisionales) ---------- */
.next-stub { padding: clamp(96px, 18vh, 200px) 0; background: var(--navy); border-top: 1px solid var(--hair); }
.next-stub-alt { background: var(--night); }
.wrap { width: min(1400px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.next-stub h2 {
  margin: 0 0 .4em; font-family: var(--font-display); font-stretch: 116%; font-weight: 650;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem); letter-spacing: -.02em;
}
.next-stub p { margin: 0; max-width: 52ch; color: var(--zinc-300); }

/* ---------- Menú móvil ---------- */
.menu-btn {
  display: none; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 560; font-size: 15px; color: var(--zinc-50);
}
.menu-btn-lines { position: relative; width: 22px; height: 10px; }
.menu-btn-lines i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out), top .35s var(--ease-out); }
.menu-btn-lines i:first-child { top: 0; }
.menu-btn-lines i:last-child { top: 8.5px; }
.menu-open .menu-btn-lines i:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-open .menu-btn-lines i:last-child { top: 4.25px; transform: rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 24px) var(--gutter) 48px;
  background: rgba(4, 20, 39, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity .35s; }
.mobile-menu nav { display: grid; gap: 6px; }
.mobile-menu a {
  text-decoration: none; font-family: var(--font-display); font-stretch: 112%; font-weight: 620;
  font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -.02em; line-height: 1.15; color: #fff;
  opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s;
}
.menu-open .mobile-menu a { opacity: 1; transform: none; transition: opacity .5s, transform .6s var(--ease-out); }
.menu-open .mobile-menu a:nth-child(2) { transition-delay: .05s; }
.menu-open .mobile-menu a:nth-child(3) { transition-delay: .1s; }
.menu-open .mobile-menu a:nth-child(4) { transition-delay: .15s; }
.menu-open .mobile-menu a:nth-child(5) { transition-delay: .2s; color: var(--hivis-soft); }
.lang-btn svg { flex: none; max-width: none; }


/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 1081px) {
  .mobile-menu { display: none; }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; --rail-h: 70px; }
  .brand img { height: 38px; }
  .anno:not(.key) { display: none; }
  .galv-row small { display: none; }
}
/* Teléfono vertical: video en franja superior, textos abajo */
@media (orientation: portrait) and (max-width: 900px) {
  .hero-sticky { background-image: var(--hero0, url(../hero/mb5/f000.webp)); background-size: auto var(--band-h, 62vh); background-position: center top; }
  .hero-sticky.is-band .hero-shade {
    background:
      linear-gradient(180deg, rgba(4, 20, 39, .5) 0, rgba(4, 20, 39, 0) 100px),
      linear-gradient(180deg, rgba(4, 20, 39, 0) calc(var(--band-h, 62vh) - 120px), var(--night) calc(var(--band-h, 62vh) - 2px));
  }
  .stages { bottom: calc(var(--rail-h) + 16px); }
  .stage-title { font-size: clamp(1.75rem, 1rem + 4vw, 2.5rem); font-stretch: 104%; }
  .stage-intro .stage-title { font-size: clamp(1.9rem, 1rem + 4.6vw, 2.7rem); }
  .stage-lead { font-size: .95rem; margin-bottom: .7rem; }
  .stage-fact { font-size: .92rem; }
  .intro-facts { margin-bottom: 1rem; flex-wrap: nowrap; }
  .intro-facts li { display: grid; padding: 0 14px; font-size: .875rem; line-height: 1.25; }
  .intro-facts b { font-size: 1.02rem; margin: 0; }
  .anno-label { font-size: 13px; padding: 4px 8px 5px; }
  .anno-strong .anno-label { font-size: 13.5px; }
  .anno-chem .anno-label { gap: 6px; padding: 7px 8px; }
  .chem { gap: 3px; }
  .chem i { min-width: 0; padding: 3px 5px 4px; font-size: 11px; }
  .chem b { font-size: 13px; }
  .chem-note { font-size: 11px; }
  .mg-qr .tl { left: -60px; top: -78px; }
  .mg-qr .tr { left: 34px; top: -78px; }
  .mg-qr .bl { left: -60px; top: 50px; }
  .mg-qr .br { left: 34px; top: 50px; }
  .mg-qr .scan { left: -56px; width: 112px; top: -74px; }
  @keyframes scan { from { transform: translateY(0); } to { transform: translateY(146px); } }
  .mg-qr-tag { left: -150px; top: 88px; gap: 8px; padding: 6px 9px 6px 8px; }
  .mg-qr-tag svg { width: 18px; height: 18px; }
  .qr-text b { font-size: 12.5px; }
  .qr-text small { font-size: 11.5px; }
  .psi-list li { font-size: 12.5px; padding: 4px 8px 5px 7px; }
  .psi-list li i { width: 12px; height: 12px; }
  .galv-row { min-width: 0; padding: 4px 8px 5px; }
  .galv-row b { font-size: 13.5px; }
  .galv-row span { font-size: 12px; }
  .galv-cap { font-size: 12px; }
  .loadtest { bottom: auto; height: var(--band-h, 62vh); width: 100%; border-left: 0; border-bottom: 1px solid rgba(255, 125, 0, .55); }
  .loadtest-hud { left: 16px; right: 16px; bottom: 16px; }
  .lt-title { font-size: 1.15rem; }
  .lt-std { margin-bottom: 4px; font-size: 13px; }
  .lt-legend { gap: 4px 12px; margin-bottom: 8px; }
  .lt-legend li { font-size: 12.5px; gap: 6px; }
  .lt-legend li::before { width: 12px; }
  .lt-value { font-size: 2rem; }
  .lt-ok { margin-top: 8px; font-size: 13px; }
  .voyage { top: calc(var(--header-h) + 6px); padding: 8px 12px 6px; }
  .voyage-stops li { font-size: 11.5px; }
  .voyage-stops .m-hide { display: none; }
  .line-rail-stops li:not(.is-on) button { width: 44px; height: 64px; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  .line-rail-stops li:not(.is-on) button span { color: transparent; }
  .header-actions .btn { display: none; }
  .hero-sticky.is-split .stages { opacity: 1; }
}

/* Movimiento reducido: se conservan los cambios de estado (opacidad), sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .anno.is-on .anno-dot::after, .mg-qr.is-on .scan, .scroll-hint i::after { animation: none; }
  .stage > *, .stage.is-past > *, .stage-title > span, .chem i, .psi-list li, .mg-stamp span, .mg-qr-tag, .lt-ok { transform: none !important; }
  .stage > *, .stage-title > span, .anno-label, .galv-row, .chem i, .psi-list li { transition-duration: .2s !important; transition-delay: 0s !important; }
  .anno-label, .galv-row { clip-path: none !important; }
}

/* Composición del acero base dentro de la fila del galvanizado */
.galv-steel .chem { grid-column: 2 / -1; margin-top: 5px; }
.galv-steel .chem i { min-width: 36px; padding: 3px 5px 4px; font-size: 11.5px; }
.galv-steel .chem b { grid-column: auto; font-size: 13.5px; font-stretch: 100%; font-weight: 650; color: #fff; }
.galv-steel .chem .is-fe b { color: var(--hivis-soft); }
.galv-steel .chem i { justify-items: start; color: var(--zinc-200); }
@media (orientation: portrait) and (max-width: 900px) {
  .galv-steel .chem { grid-template-columns: repeat(6, auto); gap: 2px; margin-top: 3px; }
  .galv-steel .chem i { min-width: 0; font-size: 10.5px; padding: 2px 4px 3px; }
  .galv-steel .chem b { font-size: 12px; }
}

/* ---------- Salto largo: cortina + atajo para saltar el hero ---------- */
.jump-curtain {
  position: fixed; inset: 0; z-index: 48; pointer-events: none;
  background: var(--night); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
}
.jump-curtain i {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--hivis); box-shadow: 0 0 18px 2px rgba(255, 125, 0, .45);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease-out);
}
.jump-curtain.is-on { opacity: 1; visibility: visible; transition: opacity .2s var(--ease-out), visibility 0s; }
.jump-curtain.is-on i { transform: scaleX(1); }
.hero-skip {
  position: fixed; z-index: 40; right: var(--gutter); bottom: calc(var(--rail-h) + 30px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 18px;
  border: 1px solid rgba(241, 244, 246, .32); border-radius: 22px;
  background: rgba(4, 20, 39, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--zinc-50); text-decoration: none; font-family: var(--font-display); font-stretch: 92%; font-weight: 560; font-size: .95rem;
  transition: opacity .3s ease, transform .4s var(--ease-out), border-color .2s ease, background-color .2s ease;
}
.hero-skip svg { width: 18px; height: 18px; fill: none; stroke: var(--hivis); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-skip.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-skip:hover { border-color: var(--hivis); background: rgba(4, 20, 39, .8); }
  .hero-skip:hover svg { transform: translateY(2px); transition: transform .2s var(--ease-out); }
}
@media (max-width: 900px) {
  .hero-skip { bottom: auto; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 10px); padding: 0; width: 44px; justify-content: center; }
  .hero-skip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .jump-curtain, .jump-curtain i, .hero-skip { transition: none; }
}

/* ---------- Acceso a las aplicaciones (cabecera) ---------- */
.apps { position: relative; }
.apps-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px;
  border: 1px solid rgba(241, 244, 246, .22); border-radius: 18px; background: rgba(4, 20, 39, .25); cursor: pointer;
  font-family: var(--font-display); font-stretch: 94%; font-weight: 560; font-size: 14px; color: #fff;
  transition: border-color .2s ease, background-color .2s ease;
}
.apps-btn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; }
.apps-btn svg rect:last-child { stroke: var(--hivis); }
.apps.is-open .apps-btn { border-color: rgba(241, 244, 246, .5); background: rgba(4, 20, 39, .7); }
@media (hover: hover) and (pointer: fine) { .apps-btn:hover { border-color: rgba(241, 244, 246, .5); } }
.apps-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 316px; padding: 8px;
  background: rgba(4, 20, 39, .96); border: 1px solid var(--hair); border-radius: 6px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: 90% 0;
  transition: opacity .18s ease, transform .2s var(--ease-out), visibility 0s .2s;
}
.apps.is-open .apps-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.apps-k { margin: 4px 8px 8px; font-size: 12px; color: var(--zinc-400); }
.apps-menu a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 14px; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 4px; text-decoration: none; color: var(--zinc-50);
}
.apps-menu a + a { margin-top: 2px; }
.apps-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: rgba(241, 244, 246, .06); border: 1px solid rgba(241, 244, 246, .12); }
.apps-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--zinc-200); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.apps-t { display: grid; gap: 2px; min-width: 0; }
.apps-t b { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.apps-t small { font-size: 12px; color: var(--zinc-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apps-go { width: 14px; height: 14px; fill: none; stroke: var(--zinc-400); stroke-width: 1.5; stroke-linecap: round; transition: transform .2s var(--ease-out), stroke .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .apps-menu a:hover { background: rgba(241, 244, 246, .06); }
  .apps-menu a:hover .apps-go { stroke: var(--hivis); transform: translate(2px, -2px); }
  .apps-menu a:hover .apps-ic svg { stroke: #fff; }
}
.mobile-menu { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.mobile-apps { display: grid; gap: 2px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hair); }
.mobile-menu .mobile-apps a { font-family: var(--font-text); font-stretch: 100%; font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--zinc-200); padding: 10px 0; }
@media (max-width: 1100px) { .apps { display: none; } }
@media (min-width: 1101px) { .mobile-apps { display: none; } }


/* =========================================================
   Pase móvil (ronda 6): plataforma, toque, áreas seguras
   ========================================================= */
/* Sin "tirar para recargar" en una página que se recorre con el scroll (el rebote local se conserva) */
html { overscroll-behavior-y: contain; }
/* iOS amplía la página si un campo tiene menos de 16 px */
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em); } }

/* Menú móvil: se desplaza si no cabe (teléfono horizontal), bloquea el fondo y respeta las áreas seguras */
.mobile-menu {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px) var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu > nav { margin-top: auto; }
html.menu-open { overflow: hidden; }
@media (max-height: 520px) and (orientation: landscape) {
  .mobile-menu { overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .mobile-menu a { font-size: clamp(1.5rem, 8.5vh, 2.2rem); }
  .mobile-apps { margin-top: 12px; padding-top: 8px; }
}

/* Elementos fijos fuera de la muesca y del indicador de inicio */

/* Teléfono horizontal (poca altura): el texto de la etapa y el panel de la prueba de carga caben bajo el encabezado */
@media (max-height: 520px) and (orientation: landscape) {
  .stages { bottom: calc(var(--rail-h) + 14px); width: min(36rem, calc(100% - 2 * var(--gutter))); }
  .stage-title { font-size: clamp(1.45rem, 1rem + 2.2vw, 1.9rem); }
  .stage-intro .stage-title { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.1rem); }
  .stage-lead { font-size: .92rem; line-height: 1.42; margin-bottom: .55rem; }
  .intro-facts { margin-bottom: .6rem; }
  .scroll-hint { display: none; }
  .stage-intro .stage-title { max-width: 26ch; }
  .galv-steel .chem, .galv-row span { display: none; }
  .loadtest-hud { bottom: calc(var(--rail-h) + 12px); gap: 2px; }
  .lt-legend { display: none; }
  .lt-value { font-size: 2.1rem; }
}