/* Iberbotics · web v3 · sistema «Turno de noche» (concepto B), compartido por la portada y las páginas legales.
   Mejora progresiva: todo se ve sin JavaScript. Los estados ocultos de las animaciones solo existen bajo
   html.ib-motion (o html.ib-soft con movimiento reducido), que se pone cuando GSAP y ScrollTrigger han cargado. */

@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; }
@font-face { font-family: "Sofia Sans"; src: url("fonts/sofia-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; }
/* Chino (zh-Hans): Noto Sans SC (OFL) recortada a los caracteres de la web con research/i18n/recorte-noto-sans-sc.py. Con unicode-range
   CJK solo se descarga si hay texto chino que pintar con ella: la grande (variable 250-400), solo en la versión china; la mini
   (el botón 中文 y el enlace chino de la portada), en las demás. */
@font-face { font-family: "Noto Sans SC Iber"; src: url("fonts/noto-sans-sc-iber-wght.woff2") format("woff2"); font-weight: 250 400; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Noto Sans SC Iber UI"; src: url("fonts/noto-sans-sc-iber-ui.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+3000-303F, U+4E00-9FFF, U+FF00-FFEF; }

:root {
  --night: #06080b;
  --night-2: #0c1016;
  --cold: #e2e8ee;
  --cold-2: #a6b0bb;
  --line: rgba(226, 232, 238, 0.16);
  --line-2: rgba(226, 232, 238, 0.32);
  --sodium: #f2a03d;
  --sodium-2: #ffb862;
  /* El turno termina al amanecer: noche (portada y focos) → grafito (líneas, piloto, medidas) → transición (para quién,
     fabricantes) → papel (sobre nosotros, contacto, pie). Cada tramo redefine --tone y, en papel, las tintas. */
  --graphite: #151b22;
  --dusk: #1f262e;
  --paper: #efe9df;
  --ink: #14171b;
  --ink-2: #4f5761;
  --sodium-ink: #8f4f00;
  --tone: var(--night);
  --tone-rgb: 6, 8, 11;
  --underline: rgba(226, 232, 238, 0.35);
  --focus: var(--sodium);
  --accent-text: var(--sodium-2);
  --g: clamp(20px, 3.3vw, 3rem);
  --nav-h: 4.5rem;
  --sec: clamp(6rem, 16vh, 11.25rem);
  --col: 34rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Sofia Sans", system-ui, sans-serif;
  color-scheme: dark;
  scrollbar-color: #26303b var(--night);
}
@media (max-width: 1199px) { :root { --nav-h: 4rem; } }
/* Pantallas grandes: a partir de 1920 px todo crece con el ancho (16 px a 1920, 21,3 px a 2560). */
@media (min-width: 1920px) { html { font-size: calc(100vw / 120); } }
html[lang="zh-Hans"] { --text: "Sofia Sans", "Noto Sans SC Iber", system-ui, sans-serif; --display: "Sofia Sans Extra Condensed", "Noto Sans SC Iber", "Arial Narrow", sans-serif; }
html:not([lang="zh-Hans"]) [lang="zh-Hans"] { font-family: "Sofia Sans", "Noto Sans SC Iber UI", system-ui, sans-serif; }

* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--night); color: var(--cold); font: 300 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--sodium); overflow-x: clip; font-variant-numeric: tabular-nums; }
::selection { background: var(--sodium); color: var(--night); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--g); top: 12px; z-index: 100; padding: 10px 14px; background: var(--cold); color: var(--night); font-size: 0.875rem; text-decoration: none; transform: translateY(-160%); }
.skip:focus { transform: none; }

/* ---------- Tipografía ---------- */
.display { font-family: var(--display); font-weight: 230; text-transform: uppercase; line-height: 0.93; letter-spacing: 0.006em; text-wrap: balance; }
h1.display { font-size: clamp(3rem, min(6.4vw, 12vh), 6rem); max-width: 7.6em; }
.h2 { font-size: clamp(2.5rem, min(5vw, 9.5vh), 4.75rem); max-width: 11em; }
.t3 { font: 260 clamp(1.75rem, 2.3vw, 2.5rem)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.lede { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.6; max-width: 30rem; color: var(--cold); }
.muted { color: var(--cold-2); }
.label { font: 400 0.75rem/1.3 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cold-2); }
.note { font-size: 0.75rem; line-height: 1.45; letter-spacing: 0.02em; color: var(--cold-2); text-wrap: pretty; }

/* ---------- Botones y enlaces ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.375rem; background: var(--sodium); color: var(--night); font: 500 0.875rem/1 var(--text); letter-spacing: 0.04em; text-decoration: none; border-radius: 2px; white-space: nowrap; transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-sm { height: 2.5rem; padding: 0 1rem; font-size: 0.8125rem; }
.link { color: var(--cold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; text-decoration-color: var(--underline); transition: text-decoration-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--sodium-2); }
  .link:hover { text-decoration-color: var(--sodium); }
}

/* ---------- Tramos de luz (CSS estático: igual sin JS y con movimiento reducido) ---------- */
.tone-graphite { --tone: var(--graphite); --tone-rgb: 21, 27, 34; background-color: var(--graphite); }
.tone-dusk { --tone: var(--dusk); --tone-rgb: 31, 38, 46; background-color: var(--dusk); }
.tone-paper { --tone: var(--paper); --tone-rgb: 239, 233, 223; background-color: var(--paper); color: var(--ink); color-scheme: light;
  --cold: var(--ink); --cold-2: var(--ink-2); --line: rgba(20, 23, 27, 0.16); --line-2: rgba(20, 23, 27, 0.32); --underline: rgba(20, 23, 27, 0.4); --focus: var(--sodium-ink); --accent-text: var(--sodium-ink); }

/* ---------- Navegación ----------
   Barra fija y siempre visible, en la retícula del contenido (margen var(--g)): logotipo a la izquierda, enlaces al centro y, a la
   derecha, el idioma (ES · EN · 中文) y «Proponer un piloto». Sobre la portada es transparente; fuera de ella, opaca en el tono
   del tramo que tiene debajo (data-nav-tone, desde iber.js) y con un filete fino abajo. */
.nav { --nav-bg: 6, 8, 11; position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); padding: 0 var(--g); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background-color: rgba(var(--nav-bg), 0); box-shadow: 0 1px 0 rgba(226, 232, 238, 0); transition: background-color 240ms ease, box-shadow 240ms ease, color 200ms ease; }
/* Sobre la portada, un degradado de noche que se funde (por opacidad) al volverse opaca. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 8, 11, 0.62), rgba(6, 8, 11, 0)); transition: opacity 240ms ease; }
.nav-solid .nav::before, html.menu-open .nav::before { opacity: 0; }
.nav-solid .nav { background-color: rgb(var(--nav-bg)); box-shadow: 0 1px 0 var(--line); } /* opaca: ningún texto se ve a través de ella */
html[data-nav-tone="graphite"] .nav { --nav-bg: 21, 27, 34; }
html[data-nav-tone="dusk"] .nav { --nav-bg: 31, 38, 46; }
/* Sobre el papel, la barra clara: tinta oscura y el logotipo de una tinta (los dos están superpuestos y se cruzan por opacidad). */
.nav-light .nav { --nav-bg: 239, 233, 223; --cold: var(--ink); --cold-2: var(--ink-2); --line: rgba(20, 23, 27, 0.14); --line-2: rgba(20, 23, 27, 0.32); --focus: var(--sodium-ink); }
/* Hueco del logotipo: 28 px de alto como máximo y 22 como mínimo (cede en el móvil estrecho), y el ancho que pida el SVG, así que
   uno nuevo entra sin tocar el CSS. El relleno vertical lleva el objetivo táctil a 44 px sin mover nada. */
.brand { position: relative; justify-self: start; display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; padding-block: 8px; margin-block: -8px; text-decoration: none; color: var(--cold); }
.brand img { display: block; height: clamp(22px, calc(12.5vw - 22px), 1.75rem); width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; transition: opacity 200ms ease; }
.brand .logo-light { position: absolute; left: 0; top: 8px; opacity: 0; }
.nav-light .nav .brand .logo-dark { opacity: 0; }
.nav-light .nav .brand .logo-light { opacity: 1; }
/* Objetivos táctiles de 44 px: en enlaces en línea el relleno vertical amplía la zona sin mover el texto; en elementos de rejilla o flex se compensa con margen negativo. */
a.link { padding-block: 12px; }
.foot-links a { padding-block: 14px; }
.actions .link { display: inline-block; padding-block: 9px; margin-block: -9px; }
/* Enlaces: legibles (15 px, peso medio, sin mayúsculas forzadas); el de la sección en la que se está, con su trazo de luz. */
.nav-links { display: flex; gap: clamp(20px, 2.4vw, 2.5rem); }
.nav-links a { position: relative; padding: 13px 0; font: 500 0.9375rem/1.2 var(--text); letter-spacing: 0; color: var(--cold-2); text-decoration: none; transition: color 200ms ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--ease-out), background-color 200ms ease; }
.nav-links a[aria-current] { color: var(--cold); }
.nav-links a[aria-current]::after { transform: scaleX(1); background: var(--sodium); }
.nav-end { display: flex; align-items: center; gap: 20px; justify-self: end; grid-column: 3; }
/* Idioma: un solo grupo discreto, ES · EN · 中文; el activo, en tinta principal y con su trazo. 44 px de objetivo aunque se vea pequeño. */
.lang { display: flex; align-items: center; }
.lang button { position: relative; min-width: 0; min-height: 2.75rem; padding: 0 14px; background: none; border: 0; font: 500 0.8125rem/1 var(--text); letter-spacing: 0.02em; color: var(--cold-2); cursor: pointer; transition: color 200ms ease, transform 160ms var(--ease-out); }
.lang button + button::before { content: "·" / ""; position: absolute; left: 0; top: 50%; transform: translate(-50%, -52%); color: var(--cold-2); opacity: 0.6; pointer-events: none; }
.lang button::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 1.1em; height: 1px; margin-left: -0.55em; background: var(--sodium); transform: scaleX(0); transition: transform 240ms var(--ease-out); }
.lang button[aria-pressed="true"] { color: var(--cold); }
.lang button[aria-pressed="true"]::after { transform: scaleX(1); }
.lang button:active, .menu-btn:active { transform: scale(0.97); }
/* «Proponer un piloto», compacto: 40 px a la vista y 44 de objetivo. */
.nav-cta { position: relative; height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }
.nav-cta::before { content: ""; position: absolute; inset: -2px 0; }
.nav-cta .cta-short { display: none; }
/* Sobre la portada, el botón de la barra va en filete frío (el ámbar es del titular); al volverse opaca, ámbar. */
html:not(.nav-solid):not(.menu-open) .nav-cta { background: transparent; color: var(--cold); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Menú en móvil: un icono de dos trazos que se cruzan al abrir. */
.menu-btn { display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-right: -10px; padding: 0; background: none; border: 0; color: var(--cold); cursor: pointer; transition: transform 160ms var(--ease-out); }
.burger { position: absolute; left: 11px; right: 11px; top: 50%; height: 8px; margin-top: -4px; }
.burger i { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: currentColor; transition: transform 260ms var(--ease-out); }
.burger i:last-child { transform: translateY(6.5px); }
.menu-btn[aria-expanded="true"] .burger i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:last-child { transform: translateY(3.25px) rotate(-45deg); }
.menu-nojs { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover, .lang button:hover { color: var(--cold); }
  html:not(.nav-solid):not(.menu-open) .nav-cta:hover { background: rgba(226, 232, 238, 0.1); }
  .nav-links a:hover::after { transform: scaleX(1); }
}
@media (max-width: 1199px) {
  .nav { display: flex; justify-content: space-between; }
  .nav-links, .nav-end .lang { display: none; }
  button.menu-btn { display: inline-block; }
}
/* Seguro (iber.js): si en escritorio no cabe la barra completa, la de móvil. */
html.nav-tight .nav { display: flex; justify-content: space-between; }
html.nav-tight .nav-links, html.nav-tight .nav-end .lang { display: none; }
html.nav-tight button.menu-btn { display: inline-block; }
/* Móvil estrecho: el piloto sigue en la barra, compacto y con el texto corto (36 px a la vista y 44 de objetivo); el logotipo
   cede hasta 22 px. Por debajo de 360 px no caben los tres sin apretarse: el piloto se queda en el menú. */
@media (max-width: 599px) {
  .nav-end { gap: 12px; }
  .nav-end .nav-cta { height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem; }
  .nav-end .nav-cta::before { inset: -4px 0; }
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
}
@media (max-width: 359px) { .nav-end .nav-cta { display: none; } }
/* Con el menú abierto (que es de noche), la barra vuelve siempre a su versión de noche. */
html.menu-open .nav { --nav-bg: 6, 8, 11; background-color: var(--night); background-image: none; box-shadow: 0 1px 0 rgba(226, 232, 238, 0.16); --cold: #e2e8ee; --cold-2: #a6b0bb; --line: rgba(226, 232, 238, 0.16); --line-2: rgba(226, 232, 238, 0.32); --focus: var(--sodium); }
html.menu-open .nav .brand .logo-dark { opacity: 1; }
html.menu-open .nav .brand .logo-light { opacity: 0; }
html.menu-open .nav-end .nav-cta { display: none; } /* con el menú abierto, el piloto es su primera acción: no se repite en la barra */
.page .nav-end .btn { display: none; }
/* Sin JavaScript: la barra no se fija; el idioma (que no funcionaría) se oculta y, en móvil, el menú se abre como ancla (#menu). */
html:not(.js) .nav { position: absolute; }
html:not(.js) .lang, html:not(.js) button.menu-btn { display: none; }
@media (max-width: 1199px) { html:not(.js) .menu-nojs { display: inline-block; } }
html:not(.js) .menu:target { display: flex; }
.menu-close-nojs { display: none; }
html:not(.js) .menu:target .menu-close-nojs { display: inline-block; align-self: flex-end; margin: -12px 0 12px; }

/* El menú: mismo lenguaje que la barra. Primero la acción, luego las secciones como filas de rack y, abajo, el idioma. */
.menu { position: fixed; inset: 0; z-index: 45; background: var(--night); padding: calc(var(--nav-h) + 24px) var(--g) calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu .menu-cta { align-self: stretch; margin-bottom: 28px; }
.menu-list { border-top: 1px solid var(--line); }
.menu-list a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); font: 400 1.375rem/1.25 var(--text); color: var(--cold); text-decoration: none; }
.menu .lang { margin-top: auto; padding-top: 28px; margin-left: -12px; }
.menu .lang button { font-size: 0.9375rem; }
html.menu-open { overflow: hidden; }

/* ---------- Turno de noche: portada y secuencia de los focos ---------- */
.shift { position: relative; }
.stage-box { position: sticky; top: 0; z-index: 0; height: max(100svh, 560px); margin-bottom: calc(-1 * max(100svh, 560px)); overflow: hidden; background: var(--night); container-type: size; }
.stage { --ar: 1.7768; --shift: min(5cqw, max(0px, calc((100cqh * var(--ar) - 100cqw) / 2))); position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--ar))); height: max(100cqh, calc(100cqw / var(--ar))); transform: translate(calc(-50% + var(--shift)), -50%); }
.stage picture, .stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage img { object-fit: cover; }
/* Sin animación se ve la nave encendida (.full). Con animación: base apagada + una capa de luz por foco,
   cada una con su alfa sacado de la propia foto; solo se anima su opacidad. */
.stage .lamp { display: none; inset: auto; left: var(--x); top: var(--y); width: var(--w); height: var(--h); opacity: 0; }
.stage-zoom { position: absolute; inset: 0; transform-origin: 46% 64%; }
/* Cajas de las capas de luz (research/qa/luces-f.py): l1 portada (R2 y el operario), l2 foco cercano sin robots, l3 R1, l4 R3, l5 fondo del pasillo. */
.lamp-1 { --x: 31.100%; --y: 0.000%; --w: 68.900%; --h: 100.000%; }
.lamp-2 { --x: 83.134%; --y: 0.000%; --w: 16.866%; --h: 63.868%; }
.lamp-3 { --x: 25.658%; --y: 10.946%; --w: 36.483%; --h: 81.934%; }
.lamp-4 { --x: 36.782%; --y: 24.336%; --w: 30.861%; --h: 65.037%; }
.lamp-5 { --x: 25.538%; --y: 24.442%; --w: 27.751%; --h: 55.260%; }
.scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #06080b 0%, rgba(6, 8, 11, 0) 14%), linear-gradient(90deg, rgba(6, 8, 11, 0.74) 0%, rgba(6, 8, 11, 0.38) 30%, rgba(6, 8, 11, 0) 48%), linear-gradient(0deg, rgba(6, 8, 11, 0.62) 0%, rgba(6, 8, 11, 0) 30%); }

.frame { position: relative; z-index: 1; height: max(100svh, 560px); }
.hero-copy, .steps-live { position: absolute; left: var(--g); right: var(--g); top: calc(var(--nav-h) + clamp(12px, 3vh, 3rem)); bottom: clamp(28px, 6vh, 4rem); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.hero-copy > *, .steps-live > * { pointer-events: auto; }
.hero-low { display: grid; gap: 22px; } /* cada hijo lleva su ancho: la entradilla, 30rem; los enlaces para fabricantes, en una línea si caben */
.actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.maker { font-size: 0.875rem; color: var(--cold-2); justify-self: start; padding-block: 11px !important; margin-block: -11px; }
.frame > .note { position: absolute; right: var(--g); bottom: clamp(28px, 6vh, 4rem); max-width: 18rem; text-align: right; }

.steps { display: grid; gap: 22px; max-width: 30rem; }
@media (min-aspect-ratio: 4/5) and (max-width: 1599px) { .steps, .hero-low .lede { max-width: 26rem; } }
.step-list { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 16px; }
.step-list li { position: relative; display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 14px; font: 400 clamp(1.0625rem, 1.3vw, 1.25rem)/1.35 var(--text); color: var(--cold-2); }
.step-list .dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(226, 232, 238, 0.45); position: relative; z-index: 1; }
/* La línea de luz: un tramo ámbar une cada punto encendido con el siguiente */
.step-list .seg { position: absolute; left: 3px; top: calc(50% + 4px); height: calc(100% - 4px); width: 1px; background: var(--sodium); transform-origin: 50% 0; transform: scaleY(0); }
.step-details { display: grid; }
.step-details > p { grid-area: 1 / 1; color: var(--cold); max-width: 30rem; font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.5; }

/* Estado estático (sin JavaScript o sin librería): los cuatro pasos se leen apilados sobre la nave encendida */
.steps-live { display: none; }
.steps-static { position: relative; z-index: 1; min-height: max(100svh, 560px); padding: calc(var(--nav-h) + clamp(32px, 8vh, 6rem)) var(--g) clamp(48px, 10vh, 7rem); display: grid; align-content: center; gap: 32px; background: linear-gradient(90deg, rgba(6, 8, 11, 0.86) 0%, rgba(6, 8, 11, 0.62) 34%, rgba(6, 8, 11, 0) 62%); }
.steps-static .step-list { max-width: 32rem; gap: 18px; }
.steps-static .step-list li { color: var(--cold); align-items: start; }
.steps-static .step-list li p { color: var(--cold); opacity: 0.86; font: 300 1rem/1.6 var(--text); margin-top: 6px; }
.steps-static .step-list .seg { transform: none; top: 1.1em; height: calc(100% + 18px - 1.1em); }
.steps-static .dot { background: var(--sodium); border-color: var(--sodium); margin-top: 0.55em; }

/* Con la librería cargada: secuencia fijada sobre la nave apagada */
.ib-motion .stage-box { position: absolute; inset: 0; height: auto; margin: 0; }
.ib-motion .stage .lamp { display: block; }
.ib-motion .stage .full { display: none; }
.ib-motion.lamps-armed .stage .full { display: block; opacity: 0; }
/* Capa propia para las luces mientras la secuencia está fijada: su opacidad se compone sin volver a rasterizar las fotos. */
/* Solo en vertical: en escritorio componer seis capas grandes cuesta más que repintarlas (medido con CPU 4×). */
@media (max-aspect-ratio: 4/5) { .ib-motion.seq-active .stage .lamp, .ib-motion.lamps-armed.seq-active .stage .full { will-change: opacity; } }
/* Antes de que ScrollTrigger monte el pin, la altura del tramo ya está reservada: la carga diferida mide bien desde el principio. */
.ib-motion:not(.pin-ready) .shift { margin-bottom: 300svh; }
/* Las fotos a sangre no se piden hasta estar a una pantalla (el umbral de la carga diferida del navegador llega a 2500 px). */
.ib-motion .plate:not(.is-near) .plate-media picture { display: none; }
/* Cada capa de luz entra con un fundido corto cuando termina de decodificarse: con red lenta nunca aparece de golpe. */
.ib-motion .stage .lamp img, .ib-motion .stage .full img { opacity: 0; transition: opacity 240ms var(--ease-out); }
.ib-motion .stage .lamp img.is-ready, .ib-motion .stage .full img.is-ready { opacity: 1; }
/* Si el seguro del <head> tiene que quitar la animación, el contenido aparece con un fundido corto. */
@keyframes ib-fade { from { opacity: 0; } to { opacity: 1; } }
html.ib-fallback main, html.ib-fallback .nav { animation: ib-fade 320ms var(--ease-out) both; }
.ib-motion .stage .base { opacity: 0; }
.ib-motion .hero-copy, .ib-motion .frame > .note { visibility: hidden; }
.ib-motion .steps-live { display: flex; visibility: hidden; }
/* Los pasos completos siguen en el árbol de accesibilidad (la secuencia visual va con aria-hidden). */
.ib-motion .steps-static { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Retrato y tableta vertical: la imagen ocupa el 45 % superior y el texto empieza a 68 px de su borde (su caja de línea sube unos 14 px), sobre negro
   (regla de los 48 px: un texto o va sobre la foto o queda a 48 px o más de ella). */
@media (max-aspect-ratio: 4/5) {
  .frame { height: max(100svh, 640px); }
  .stage-box, .ib-motion .stage-box { position: absolute; inset: 0 0 auto; height: calc(max(100svh, 640px) * 0.45); margin: 0; }
  /* El texto va debajo: la foto no se desplaza para dejarle sitio a la izquierda. */
  .stage { --shift: 0px; }
  .step-details > p { font-size: 1.0625rem; line-height: 1.55; }
  .stage-box::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(0deg, var(--night), rgba(6, 8, 11, 0)); }
  .scrim { display: none; }
  .hero-copy, .steps-live { top: calc(45% + 68px); bottom: clamp(20px, 3vh, 40px); justify-content: flex-start; gap: 18px; }
  h1.display { font-size: clamp(2.5rem, 10.8vw, 4.5rem); max-width: none; }
  .steps-live .h2 { font-size: clamp(2.2rem, 9.6vw, 3.75rem); max-width: none; }
  .hero-low { gap: 12px; }
  .hero-low .lede { font-size: 1rem; }
  .frame > .note { top: calc(max(100svh, 640px) * 0.45 - 2.6rem); bottom: auto; }
  .steps-static { min-height: 0; background: none; padding-top: clamp(48px, 8vh, 80px); }
}
/* Móvil (hasta 3/5): la caja de la foto es casi cuadrada y va la nave vertical (f-*-v), acercada ×1,3 en la familia (58 % / 44 %):
   R2 y el operario enteros, con las cabezas bajo la barra, y R1 y R3 dentro. Base y capas escalan juntas.
   En tableta (de 3/5 a 4/5) la caja es apaisada (de 1,3 a 1,8) y va la nave horizontal entera, con sus capas: se ve toda la familia. */
@media (max-aspect-ratio: 3/5) {
  .stage { --ar: 0.6667; width: calc(max(100cqw, 100cqh * var(--ar)) * 1.3); height: calc(max(100cqh, 100cqw / var(--ar)) * 1.3); transform: translate(-58%, -44%); }
  .lamp-1 { --x: 19.043%; --y: 1.758%; --w: 80.957%; --h: 98.242%; }
  .lamp-2 { --x: 0.000%; --y: 0.000%; --w: 100.000%; --h: 100.000%; }
  .lamp-3 { --x: 0.000%; --y: 11.979%; --w: 58.691%; --h: 68.099%; }
  .lamp-4 { --x: 16.602%; --y: 32.747%; --w: 51.074%; --h: 43.229%; }
  .lamp-5 { --x: 8.789%; --y: 22.070%; --w: 41.895%; --h: 45.964%; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) { .hero-copy .lede { font-size: 0.875rem; line-height: 1.5; } h1.display { font-size: clamp(2.2rem, 10vw, 3.6rem); } }

/* ---------- Fotografía a sangre con su banda de texto (líneas, fabricantes, sobre nosotros) ---------- */
.plate { position: relative; height: max(100svh, 560px); overflow: hidden; background: var(--tone); }
.plate-media, .plate-media picture, .plate-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-media img { object-fit: cover; object-position: var(--op, 50% 50%); }
.plate-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--veil); }
.plate { --veil: linear-gradient(180deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0) 16%), linear-gradient(0deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0.9) 13%, rgba(var(--tone-rgb), 0.55) 24%, rgba(var(--tone-rgb), 0.18) 40%, rgba(var(--tone-rgb), 0) 56%); }
.plate-copy { position: absolute; z-index: 1; left: var(--g); right: var(--g); bottom: clamp(28px, 7vh, 5rem); }
.plate-copy .h2 { max-width: 14em; }
.plate-media > .note { position: absolute; z-index: 2; left: auto; top: auto; right: var(--g); bottom: clamp(28px, 7vh, 5rem); max-width: 17rem; text-align: right; }
/* Texto arriba, sobre la zona oscura alta de la foto */
.plate--top { --veil: linear-gradient(180deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0) 16%), linear-gradient(180deg, rgba(6, 8, 11, 0.7) 0%, rgba(6, 8, 11, 0.2) 26%, rgba(6, 8, 11, 0) 40%), linear-gradient(0deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0.5) 12%, rgba(var(--tone-rgb), 0) 30%); }
.plate--top .plate-copy { top: calc(var(--nav-h) + clamp(16px, 5vh, 4rem)); bottom: auto; }
/* Texto a la izquierda, sobre el fondo oscuro del retrato */
.plate--left { --veil: linear-gradient(180deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0) 16%), linear-gradient(90deg, rgba(var(--tone-rgb), 0.88) 0%, rgba(var(--tone-rgb), 0.52) 28%, rgba(var(--tone-rgb), 0) 50%), linear-gradient(0deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0) 22%); }
/* La línea 1 llega desde la nave de noche: su foto empieza en #06080b y el paso a grafito ocurre dentro de ella. */
#lineas .plate { --veil: linear-gradient(180deg, #06080b 0%, rgba(6, 8, 11, 0) 16%), linear-gradient(0deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0.9) 13%, rgba(var(--tone-rgb), 0.55) 24%, rgba(var(--tone-rgb), 0.18) 40%, rgba(var(--tone-rgb), 0) 56%); }
/* Díptico (logística e industria): dos mitades a sangre con 2 px de separación; en vertical, apiladas. */
.duo .half { position: absolute; top: 0; bottom: 0; width: calc(50% - 1px); overflow: hidden; }
.duo .half:first-child { left: 0; }
.duo .half:nth-child(2) { right: 0; }
.duo .half:nth-child(2) img { object-position: var(--op-2, 50% 50%); }
/* Amanecer: la foto de las manos llega oscura desde la transición y se funde en papel por abajo; el título va sobre su negro alto. */
.plate--dawn { background: var(--dusk); --veil: linear-gradient(180deg, rgb(31, 38, 46) 0%, rgba(31, 38, 46, 0.6) 30%, rgba(31, 38, 46, 0) 55%); }
/* Fabricantes: la foto es una franja de cine (32:9) bajo una banda del alto de la barra, para que R1 no quede debajo de ella al
   llegar por el ancla. Si la franja sale más baja que el texto (pantallas bajas), crece hasta 30rem y se recorta por los lados
   (--op la mantiene a la derecha). En vertical, la foto es la suya de 4:3, entera, encima del texto. */
.makers > .plate { height: auto; padding-top: var(--nav-h); }
.makers > .plate .plate-media { position: relative; inset: auto; height: auto; aspect-ratio: 32 / 9; min-height: calc(30rem - var(--nav-h)); }
/* Una foto sobre papel acaba en borde recto, como una copia sobre la mesa; su nota va debajo, sobre papel. */
.about-note { justify-self: end; text-align: right; max-width: 17rem; }
.about-band .sec-head { margin-bottom: 0; }
/* Contacto en papel: la foto ocupa la derecha y se disuelve en papel por la izquierda, arriba y abajo; el texto, en tinta, sobre papel. */
.plate--paper .plate-media { left: 46%; top: 0; bottom: 0; right: 0; width: auto; height: auto; }
.plate--paper { --veil: linear-gradient(0deg, rgba(6, 8, 11, 0.7) 0%, rgba(6, 8, 11, 0) 18%); } /* solo un degradado corto para la nota */
.plate--paper .plate-media > .note { color: #a6b0bb; }
/* Cada nota sobre foto lleva su propio velo, local y difuminado, para leerse con contraste AA sobre cualquier fondo (también sobre
   un suelo al sol): una nube oscura que cubre la caja del texto y se deshace hacia fuera, sin bordes. */
.frame > .note, .plate-media > .note { isolation: isolate; }
.frame > .note::before, .plate-media > .note::before { content: ""; position: absolute; z-index: -1; inset: -1.5rem calc(-1 * min(2rem, var(--g) - 4px)) -1.5rem -2rem; background: rgba(6, 8, 11, 0.78); filter: blur(12px); pointer-events: none; }
/* Por la derecha el velo no pasa del margen lateral: en móvil, la nota de la portada no está dentro de una caja que recorte. */
.plate--paper .plate-copy { max-width: min(34rem, calc(46% - var(--g) - 3rem)); }
.plate--left .plate-copy { top: calc(var(--nav-h) + clamp(16px, 6vh, 5rem)); bottom: auto; right: auto; max-width: 30rem; display: grid; gap: 18px; }
.plate--left .plate-copy p { max-width: 30rem; }

.band { padding: clamp(48px, 8vh, 5rem) var(--g) var(--sec); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 6rem); align-items: start; }
.band > p { max-width: var(--col); }
.rack { border-top: 1px solid var(--line); }
.rack li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--cold); }

@media (max-aspect-ratio: 4/5), (max-width: 699px) {
  .plate { height: auto; overflow: visible; display: flex; flex-direction: column; }
  .plate-media { position: relative; inset: auto; height: clamp(300px, 58svh, 560px); flex: none; overflow: hidden; }
  .plate { --veil: linear-gradient(180deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0) 14%), linear-gradient(0deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0) 34%); }
  #lineas .plate { --veil: linear-gradient(180deg, #06080b 0%, rgba(6, 8, 11, 0) 14%), linear-gradient(0deg, rgb(var(--tone-rgb)) 0%, rgba(var(--tone-rgb), 0) 34%); }
  .plate--dawn { --veil: linear-gradient(180deg, rgb(31, 38, 46) 0%, rgba(31, 38, 46, 0.6) 30%, rgba(31, 38, 46, 0) 55%); }
  .plate--paper .plate-media { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; height: clamp(300px, 58svh, 560px); }
  .plate--duo .plate-media { height: clamp(480px, 88svh, 920px); display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
  .duo .half { position: relative; top: auto; bottom: auto; width: auto; }
  .duo .half:nth-child(2) img { object-position: var(--op-v-2, var(--op-2, 50% 50%)); }
  .plate--paper { --veil: linear-gradient(0deg, rgba(6, 8, 11, 0.7) 0%, rgba(6, 8, 11, 0) 22%); }
  .makers > .plate { padding-top: 0; }
  .makers > .plate .plate-media { aspect-ratio: 720 / 534; min-height: 0; }
  .plate--paper .plate-copy { max-width: none; }
  .plate-media img { object-position: var(--op-v, var(--op, 50% 50%)); }
  .plate-copy, .plate--top .plate-copy, .plate--left .plate-copy { position: relative; inset: auto; padding: 56px var(--g) 0; max-width: none; }
  /* Si la sección acaba en texto y le sigue otra foto, el texto no se pega a ella */
  .who, .contact { padding-bottom: clamp(72px, 12vh, 112px); }
  .plate-media > .note { bottom: 12px; max-width: 15rem; }
  .band { grid-template-columns: 1fr; padding-top: 40px; }
}

/* ---------- Piloto: rotulación de rack ---------- */
.section { padding: var(--sec) var(--g) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(24px, 5vw, 6rem); align-items: end; margin-bottom: clamp(48px, 9vh, 6.5rem); }
.sec-head .lede { max-width: var(--col); }
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 3.5rem); }
.phase { border-top: 1px solid var(--line-2); padding-top: 18px; display: grid; gap: 22px; align-content: start; }
.phase-id { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: end; }
.phase-n { font: 200 clamp(4.5rem, 8vw, 6rem)/0.78 var(--display); color: var(--cold); }
.phase-id .label { margin-top: 10px; }
.phase > p { max-width: 30rem; color: var(--cold); }
.verdict { margin-top: clamp(64px, 12vh, 8rem); padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 18px; }
.verdict > p { max-width: var(--col); }
.verdict-words { display: flex; flex-wrap: nowrap; gap: clamp(20px, 3vw, 3rem); }
.verdict-words li { font: 260 clamp(1.75rem, 2.3vw, 2.5rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
@media (max-width: 899px) {
  .sec-head { grid-template-columns: 1fr; }
  .phases { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- Qué medimos: campo de trazos de ciclo (ilustración, sin datos) ---------- */
.field { margin: 0; display: grid; gap: 14px; }
.field-grid { position: relative; display: grid; grid-template-columns: clamp(7rem, 13vw, 12rem) minmax(0, 1fr); column-gap: clamp(14px, 2vw, 2rem); row-gap: clamp(12px, 2.4vh, 1.5rem); align-items: center; }
.frow-label { font: 300 clamp(1.25rem, 1.6vw, 1.625rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cold); }
.frow-ink { position: relative; height: clamp(56px, 11vh, 7.5rem); }
.frow-ink svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.frow-ink path { fill: none; stroke: var(--sodium); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.faxis { grid-column: 2; position: relative; height: 2.75rem; border-top: 1px solid var(--line-2); }
.faxis span { position: absolute; top: 12px; white-space: nowrap; }
.faxis .tick { top: -1px; width: 1px; height: 8px; background: var(--line-2); }
.faxis .ph { padding-left: 8px; }
@media (max-width: 1099px) { .faxis .eval { left: auto !important; right: 0; padding-left: 0; } }
@media (max-width: 699px) { .faxis { font-size: 0.6875rem; letter-spacing: 0.06em; } .faxis .ph { padding-left: 6px; } }
.fcursor { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--sodium-2); opacity: 0; pointer-events: none; }
.field figcaption { color: var(--cold); }
.small { font-size: 0.875rem; line-height: 1.5; }
.measures { margin-top: clamp(56px, 10vh, 7rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 2.5rem); }
.measures li { border-top: 1px solid var(--line-2); padding-top: 16px; display: grid; gap: 10px; align-content: start; }
.measures li p { font-size: 1rem; color: var(--cold); }
.measures li p.label { font-size: 0.75rem; color: var(--cold-2); }
.fine { margin-top: clamp(40px, 7vh, 4.5rem); color: var(--cold-2); max-width: var(--col); }
.measure { padding-bottom: var(--sec); }
.measure.tone-graphite { background-image: linear-gradient(180deg, var(--graphite) 70%, var(--dusk) 100%); }
@media (max-width: 1199px) { .measures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .measures { grid-template-columns: 1fr; gap: 28px; }
  .field-grid { grid-template-columns: 1fr; }
  .faxis { grid-column: 1; }
  .frow-ink .dense { display: none; }
}

/* ---------- Para quién ---------- */
.who-list { border-top: 1px solid var(--line-2); }
.who-list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px clamp(24px, 5vw, 6rem); align-items: baseline; padding: clamp(18px, 3vh, 1.75rem) 0; border-bottom: 1px solid var(--line); }
.who-list li p { max-width: var(--col); color: var(--cold); }
@media (max-width: 899px) { .who-list li { grid-template-columns: 1fr; } }
.plate .who-list { margin-top: 6px; }
.plate .who-list li { grid-template-columns: 1fr; gap: 6px; padding: clamp(12px, 2.2vh, 1.25rem) 0; }
.who-makers { text-decoration: none; color: var(--cold); transition: color 200ms ease; }
.who-makers span { color: var(--sodium); }
@media (hover: hover) and (pointer: fine) { .who-makers:hover { color: var(--accent-text); } }

/* ---------- Sobre nosotros: principios ---------- */
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vh, 3.5rem) clamp(24px, 3vw, 3.5rem); }
.principles > li { border-top: 1px solid var(--line-2); padding-top: 18px; display: grid; gap: 12px; align-content: start; }
.principles > li > p { color: var(--cold); max-width: 30rem; }
.principles .reg { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 12px clamp(24px, 5vw, 6rem); }
.principles .reg ul { grid-column: 2; grid-row: 1 / span 2; border-top: 1px solid var(--line); }
.principles .reg li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--cold-2); }
.principles .reg li b { color: var(--cold); font-weight: 400; }
.about-band { grid-template-columns: 1fr; gap: clamp(40px, 8vh, 5.5rem); }
@media (min-width: 1200px) { .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .principles { grid-template-columns: 1fr; }
  .principles .reg { grid-template-columns: 1fr; }
  .principles .reg ul { grid-column: 1; grid-row: auto; }
}

/* ---------- Contacto y pie ---------- */
.contact .h2 { max-width: 11em; }
.mail-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-top: clamp(6px, 2vh, 1.5rem); }
.mail { font: 220 clamp(2.4rem, min(5.2vw, 11vh), 4.75rem)/1.05 var(--display); letter-spacing: 0.01em; color: var(--cold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; text-decoration-color: var(--line-2); overflow-wrap: anywhere; transition: color 200ms ease, text-decoration-color 200ms ease; }
@media (min-width: 700px) { .mail { white-space: nowrap; overflow-wrap: normal; } }
@media (hover: hover) and (pointer: fine) { .mail:hover { color: var(--accent-text); text-decoration-color: var(--sodium); } }
.copy { background: none; border: 0; padding: 16px 2px; margin-block: -6px; font: 400 0.75rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cold-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; text-decoration-color: var(--line-2); cursor: pointer; transition: color 200ms ease, transform 160ms var(--ease-out); }
.copy:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .copy:hover { color: var(--cold); } }
.copy[hidden] { display: none; }
.contact .include { margin-top: clamp(8px, 2vh, 1.5rem); grid-template-columns: 1fr; gap: 6px; }
.include { margin-top: clamp(40px, 7vh, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 18px; max-width: 64rem; }
.include h3 { grid-column: 1 / -1; }
.include ul { display: contents; }
.include li { color: var(--cold); font-size: 1rem; }
.contact .include h3 { margin-bottom: 4px; }
@media (max-width: 699px) { .include { grid-template-columns: 1fr; gap: 12px; } }

.foot { padding: 48px var(--g) 44px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px clamp(24px, 4vw, 4rem); align-items: start; font-size: 0.8125rem; color: var(--cold-2); }
.foot-text { display: grid; gap: 6px; max-width: 46rem; text-wrap: pretty; }
.foot-links { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.foot a { color: var(--cold-2); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--cold); } }
@media (max-width: 899px) { .foot { grid-template-columns: 1fr; } }

/* ---------- Páginas legales ---------- */
.legal { max-width: 46rem; padding: calc(var(--nav-h) + clamp(48px, 10vh, 7rem)) var(--g) var(--sec); }
.legal h1 { font-size: clamp(2.5rem, min(5vw, 9.5vh), 4.75rem); }
.legal .updated { margin-top: 18px; color: var(--cold-2); font-size: 0.875rem; }
.legal h2 { margin-top: clamp(40px, 7vh, 3.5rem); padding-top: 16px; border-top: 1px solid var(--line); font: 280 clamp(1.6rem, 2.2vw, 2.1rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.legal p, .legal ul { margin-top: 16px; }
.legal p { color: var(--cold); }
.legal p, .legal li { max-width: 34rem; }
.legal ul li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--cold); }
.legal ul li:first-child { border-top: 1px solid var(--line); }
.legal .lead { margin-top: 28px; font-size: clamp(1rem, 1.15vw, 1.125rem); }
/* Dato pendiente: la luz de estado sin encender, porque la sociedad está en constitución */
.pending { color: var(--cold-2); }
.pending::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 0 2px; border-radius: 50%; border: 1px solid var(--sodium); vertical-align: 0.08em; }
.legal .k { color: var(--cold-2); }

/* ---------- Portada: los dos enlaces para fabricantes (en inglés y en chino), en una fila ---------- */
.makers-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; justify-self: start; } /* en una línea siempre que quepa en el ancho de la portada */
.lang-hint { margin-left: 0.15em; font-size: 0.92em; opacity: 0.85; }

/* ---------- Versión china (zh-Hans) ----------
   Sin mayúsculas ni el espaciado de la extracondensada, a tamaños propios (un carácter chino ocupa un cuadrado entero) y con
   interlínea de CJK. Los titulares no se parten dentro de una palabra: keep-all y <wbr> entre palabras en los largos. */
html[lang="zh-Hans"] body { line-height: 1.8; }
html[lang="zh-Hans"] :is(.display, .t3, .label, .frow-label, .verdict-words li, .menu-list a, .faxis) { text-transform: none; letter-spacing: 0; }
html[lang="zh-Hans"] .display { line-height: 1.24; word-break: keep-all; overflow-wrap: break-word; }
html[lang="zh-Hans"] h1.display { font-size: clamp(2.25rem, min(4.2vw, 8.6vh), 4rem); max-width: 11em; }
html[lang="zh-Hans"] .h2 { font-size: clamp(1.75rem, min(3.1vw, 6.2vh), 3rem); }
html[lang="zh-Hans"] .t3, html[lang="zh-Hans"] .verdict-words li { font-size: clamp(1.25rem, 1.65vw, 1.75rem); line-height: 1.35; word-break: keep-all; }
html[lang="zh-Hans"] .frow-label { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.35; }
html[lang="zh-Hans"] .label { letter-spacing: 0.04em; }
html[lang="zh-Hans"] :is(.lede, .step-details > p, .rack li, .phase > p, .measures li p, .principles p, .principles .reg li, .who-list p, .include li) { line-height: 1.8; }
html[lang="zh-Hans"] .step-list li { line-height: 1.5; }
html[lang="zh-Hans"] .note { line-height: 1.6; }
html[lang="zh-Hans"] .menu-list a { font-size: 1.25rem; }
@media (max-aspect-ratio: 4/5) {
  html[lang="zh-Hans"] h1.display { font-size: clamp(1.75rem, 7.6vw, 3rem); max-width: none; }
  html[lang="zh-Hans"] .steps-live .h2 { font-size: clamp(1.6rem, 6.4vw, 2.5rem); }
}

/* ---------- Entradas suaves (solo con la librería cargada) ---------- */
.ib-motion [data-rv] { opacity: 0; transform: translateY(14px); }
.ib-motion [data-rv-lines] { visibility: hidden; }
.ib-motion .plate-media img { opacity: 0; transform: scale(1.05); }
.ib-motion .frow-ink svg { clip-path: inset(0 100% 0 0); }
/* Movimiento reducido: más suave, no cero. Solo fundidos de opacidad, sin desplazamientos. */
.ib-soft [data-rv], .ib-soft [data-rv-lines] { opacity: 0; }
@media print { .ib-motion .plate .plate-media picture { display: block !important; } }
@media print { .ib-motion [data-rv], .ib-soft [data-rv], .ib-motion [data-rv-lines], .ib-soft [data-rv-lines], .ib-motion .plate-media img { visibility: visible !important; opacity: 1 !important; transform: none !important; } }