/* Druppify · sitio «origen» (Red de metro · origen, aprobado el 11-oct-2026).
   Portado al repo desde prototipo/metro.css; plan y reglas en
   docs/sitio-2026/09-origen.md. CSS plano: no pasa por Tailwind. Diferencias con el prototipo: rutas
   root-absolutas, la cabecera pinta su vidrio en ::before (el cajón vive dentro de <header> para
   que su texto caiga en el bucket compartido de i18n, y un backdrop-filter en la cabecera lo
   encerraría), el selector de idioma real (.lang-switch, lo escribe i18n-build), los textos que
   el JS alternaba van como spans en el HTML (pausa, tema), comillas por idioma en <q> y el aviso
   de cookies dentro del <footer>. Todo eso está al final, en «Sitio real».

   Variante de la segunda versión: el mismo diagrama de transporte sobre papel blanco liso (tinta
   navy, líneas a plena fuerza, «La red», Sense discontinua por debajo, andén con producto real),
   pero cada línea nace en su estación de origen: una foto de su cliente en su terreno. Las seis
   fotos abren la home como acordeón horizontal; de la banda de cada una baja su línea hasta «La
   red» y la pantalla de andén. Contenedor ancho: min(100% - 2 × gutter, 1680 px).
   Todo estado oculto de animación cuelga de .movimiento-listo (comun.js). */

/* ================= Fuentes (auto-hospedadas: la CSP es font-src 'self') =================
   Archivo variable completa (peso 100–900, ancho 62–125 %, subset latin) con nombre nuevo:
   archivo-ancho-* es otra fuente y /assets/* es inmutable. Inter y las flechas son las del repo.
   El chino no pasa por estas fuentes: cae a la pila CJK de html[lang="zh-CN"] (al final). */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-origen-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-ancho-arrows.woff2") format("woff2");
  font-weight: 600 800;
  font-stretch: 70% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2190, U+2192;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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";
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-arrows.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2190, U+2192;
}

/* ================= Tokens ================= */
:root {
  color-scheme: light;
  --navy: #1a2044;
  --navy-2: #242c59;
  --teal: #1ca390;
  --teal-tinta: #0f7a6b;

  --fondo: #ffffff;
  --fondo-2: #f4f6fb;
  --superficie: #ffffff;
  --superficie-2: #f1f4fa;
  --tinta: #1a2044;
  --tinta-2: #424a6e;
  --tinta-3: #5a6286;
  --borde: #dde2ee;
  --borde-fuerte: #c3cadf;

  --estacion-relleno: #ffffff;
  --estacion-trazo: #1a2044;
  --letrero-fondo: #1a2044;
  --letrero-tinta: #ffffff;
  --tren-relleno: #ffffff;

  --l-workforce: #2b59ff;
  --l-retail: #7a3ff2;
  --l-3pl: #00a97a;
  --l-freight: #e68a00;
  --l-delivery: #e0457b;
  --l-sense: #0ea5c9;
  /* relleno + tinta AA de cada insignia */
  --b-workforce: #2b59ff; --t-workforce: #ffffff;
  --b-retail: #7a3ff2; --t-retail: #ffffff;
  --b-3pl: #00a97a; --t-3pl: #1a2044;
  --b-freight: #e68a00; --t-freight: #1a2044;
  --b-delivery: #ab1e56; --t-delivery: #ffffff;
  --b-sense: #0ea5c9; --t-sense: #1a2044;
  /* color de cada línea sobre mobiliario navy (tableros, andén), igual en ambos temas */
  --c-workforce: #7090ff;
  --c-retail: #a783ff;
  --c-3pl: #22c594;
  --c-freight: #f5a63b;
  --c-delivery: #f2719f;
  --c-sense: #3fc6e6;

  --tablero: #1a2044;
  --tablero-celda: #262f60;
  --tablero-borde: rgba(255, 255, 255, 0.1);
  --tablero-tinta: #ffffff;
  --tablero-tinta-2: #bcc3df;
  --ambar: #ffc861;
  --cabecera: rgba(255, 255, 255, 0.88);
  --cierre: #1a2044;
  --pie: #151a3a;

  --primario: #1a2044;
  --primario-hover: #2a336a;
  --primario-tinta: #ffffff;
  --foco: #0f7a6b;
  --seleccion: rgba(28, 163, 144, 0.26);

  --sombra-tono: rgba(26, 32, 68, 0.55);
  --sombra-tono-suave: rgba(26, 32, 68, 0.12);
  --sombra: 0 1px 2px rgba(26, 32, 68, 0.06), 0 8px 18px -10px rgba(26, 32, 68, 0.22);
  --sombra-alta: 0 2px 4px rgba(26, 32, 68, 0.06), 0 22px 40px -22px rgba(26, 32, 68, 0.4);
  /* ventana de producto: anillo de 1 px teñido + sombra ancha teñida de navy */
  --sombra-ventana: 0 0 0 1px rgba(26, 32, 68, 0.09), 0 2px 5px rgba(26, 32, 68, 0.05), 0 32px 52px -30px rgba(26, 32, 68, 0.42);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --cab: 72px;
  --radio: 10px;
  --radio-letrero: 6px;
  /* Ancho del sitio (BRIEF, 10-oct-2026): 90 % de la ventana hasta un tope de 1680 px. El ancho
     extra es para el layout (fotos, grillas, capturas, diagrama); el texto conserva su medida. */
  --gutter: clamp(16px, 5vw, 96px);
  --contenedor: min(100% - 2 * var(--gutter), 1680px);
  --g: clamp(16px, 1.7vw, 32px);
  --esp-seccion: clamp(72px, 7.6vw, 120px);
  --esp-estacion: clamp(64px, 6.4vw, 104px);
  --ciclo: 6s;
  --f-display: "Archivo", "Inter", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, sans-serif;
}
/* El riel vive en el margen izquierdo: su distancia al contenido se resuelve a px para que el JS
   del tren la lea */
@property --riel-x { syntax: "<length>"; inherits: true; initial-value: 34px; }

html[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #1a2044;
  --fondo-2: #1e2550;
  --superficie: #242c59;
  --superficie-2: #29326a;
  --tinta: #f3f5fb;
  --tinta-2: #ccd2e8;
  --tinta-3: #aab1d1;
  --borde: rgba(220, 226, 255, 0.14);
  --borde-fuerte: rgba(220, 226, 255, 0.28);

  --estacion-relleno: #1a2044;
  --estacion-trazo: #f3f5fb;
  --letrero-fondo: #f3f5fb;
  --letrero-tinta: #1a2044;
  --tren-relleno: #1a2044;

  --l-workforce: #7090ff;
  --l-retail: #a783ff;
  --l-3pl: #22c594;
  --l-freight: #f5a63b;
  --l-delivery: #f2719f;
  --l-sense: #3fc6e6;
  --b-workforce: #7090ff; --t-workforce: #1a2044;
  --b-retail: #a783ff; --t-retail: #1a2044;
  --b-3pl: #22c594; --t-3pl: #1a2044;
  --b-freight: #f5a63b; --t-freight: #1a2044;
  --b-delivery: #f2719f; --t-delivery: #1a2044;
  --b-sense: #3fc6e6; --t-sense: #1a2044;

  --tablero: #141a3d;
  --tablero-celda: #232b5c;
  --tablero-borde: rgba(220, 226, 255, 0.12);
  --cabecera: rgba(26, 32, 68, 0.86);
  --cierre: #242c59;
  --pie: #161c40;

  --primario: #f3f5fb;
  --primario-hover: #ffffff;
  --primario-tinta: #1a2044;
  --foco: #5fd4bf;
  --seleccion: rgba(95, 212, 191, 0.32);
  --sombra-tono: rgba(0, 0, 0, 0.42);
  --sombra-tono-suave: rgba(0, 0, 0, 0.2);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 18px -10px rgba(0, 0, 0, 0.5);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.25), 0 22px 40px -22px rgba(0, 0, 0, 0.6);
  --sombra-ventana: 0 0 0 1px rgba(220, 226, 255, 0.14), 0 2px 5px rgba(0, 0, 0, 0.2), 0 32px 52px -30px rgba(0, 0, 0, 0.7);
}

/* Color por línea: cualquier elemento con data-linea hereda su acento */
[data-linea="workforce"] { --l: var(--l-workforce); --lb: var(--b-workforce); --lt: var(--t-workforce); --lc: var(--c-workforce); }
[data-linea="retail"] { --l: var(--l-retail); --lb: var(--b-retail); --lt: var(--t-retail); --lc: var(--c-retail); }
[data-linea="3pl"] { --l: var(--l-3pl); --lb: var(--b-3pl); --lt: var(--t-3pl); --lc: var(--c-3pl); }
[data-linea="freight"] { --l: var(--l-freight); --lb: var(--b-freight); --lt: var(--t-freight); --lc: var(--c-freight); }
[data-linea="delivery"] { --l: var(--l-delivery); --lb: var(--b-delivery); --lt: var(--t-delivery); --lc: var(--c-delivery); }
[data-linea="sense"] { --l: var(--l-sense); --lb: var(--b-sense); --lt: var(--t-sense); --lc: var(--c-sense); }

/* ================= Base y superficies del navegador ================= */
*, *::before, *::after { box-sizing: border-box; }
/* Desplazamiento suave solo para los clics dentro de la página: comun.js pone .desplazamiento-suave
   después de cargar, así quien llega con un #ancla salta de inmediato (no recorre 45.000 px de un
   documento legal); con movimiento reducido no se pone nunca. */
html.desplazamiento-suave { scroll-behavior: smooth; }
html {
  scroll-padding-top: calc(var(--cab) + 24px);
  scrollbar-color: var(--borde-fuerte) var(--fondo-2);
  -webkit-text-size-adjust: 100%;
}
html.sin-scroll { overflow: hidden; }
body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--f-texto);
  color: var(--tinta);
  background: var(--fondo);
  caret-color: var(--teal-tinta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Cifras proporcionales en prosa, bajadas y titulares: con tnum en todo el documento el guion
     quedaba separado («e - commerce», «436 - 5»). Tabulares solo donde las cifras se alinean:
     tablas, flaps, insignias, KPI del kit (pantallas.css) y el eje de la brecha (paginas.css). */
  font-variant-numeric: normal;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
::selection { background: var(--seleccion); color: var(--tinta); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fondo-2); }
::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 99px; border: 3px solid var(--fondo-2); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-stretch: 104%; color: var(--tinta); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sin-corte { white-space: nowrap; font-variant-numeric: normal; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icono { width: 18px; height: 18px; flex: none; }

.saltar {
  position: absolute; left: 16px; top: 12px; z-index: 100; transform: translateY(-150%);
  background: var(--letrero-fondo); color: var(--letrero-tinta);
  padding: 12px 18px; border-radius: var(--radio); font-weight: 600; text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.saltar:focus { transform: none; }

.contenedor {
  width: var(--contenedor);
  margin-inline: auto;
}

/* ================= Señalética ================= */
.letrero {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 32px; padding: 5px 12px 5px 8px;
  background: var(--letrero-fondo); color: var(--letrero-tinta);
  border-radius: var(--radio-letrero);
  font: 650 0.78rem/1.2 var(--f-display); font-stretch: 106%;
  letter-spacing: 0.07em; text-transform: uppercase;
  box-shadow: 0 1px 2px var(--sombra-tono-suave), 0 6px 14px -10px var(--sombra-tono);
}
.letrero > a { display: inline-flex; align-items: center; gap: 10px; }
a.letrero, .letrero a { color: var(--letrero-tinta); text-decoration: none; }
h2.letrero, h3.letrero, .seccion__cabeza h2.letrero { font-size: 1.05rem; line-height: 1.2; letter-spacing: 0.07em; min-height: 46px; padding: 9px 18px 9px 10px; }
h2.letrero:not(:has(.insignia)) { padding-left: 16px; }
.letrero .insignia { outline: 2px solid var(--letrero-tinta); }
.letrero .insignia--sense { color: var(--letrero-tinta); outline: 0; }

.insignia {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lb, var(--navy)); color: var(--lt, #fff);
  font: 700 0.75rem/1 var(--f-display); font-stretch: 100%; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.insignia--sense { background: transparent; color: var(--tinta); border: 2.5px dashed var(--l); }
.insignia--grande { width: 40px; height: 40px; font-size: 0.95rem; }

/* Estado de una línea: texto siempre, el punto solo acompaña */
.estado {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.8125rem/1.3 var(--f-texto); color: var(--tinta);
}
.estado::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 2px var(--l, var(--teal));
}
.estado[data-estado="produccion"]::before { background: var(--l, var(--teal)); }
.estado__rotulo { color: var(--tinta-3); font-weight: 500; }

/* ================= Botones y enlaces ================= */
.boton {
  --b-bg: var(--primario); --b-tinta: var(--primario-tinta); --b-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px;
  border: 2px solid var(--b-borde); border-radius: var(--radio);
  background: var(--b-bg); color: var(--b-tinta);
  font: 650 0.95rem/1 var(--f-display); font-stretch: 104%; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.boton .icono { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.boton:hover { --b-bg: var(--primario-hover); transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(26, 32, 68, 0.55); }
.boton:hover .icono--diagonal { transform: translate(3px, -3px); }
.boton:hover .icono--avanza { transform: translateX(4px); }
.boton:hover .icono--baja { transform: translateY(3px); }
.boton:active { transform: translateY(0); box-shadow: none; }
.boton--grande { min-height: 54px; padding: 0 24px; font-size: 1.02rem; }
/* Deshabilitado (p. ej. mientras se envía un formulario): sin el realce del puntero */
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.boton:disabled:hover { --b-bg: var(--primario); }
.boton--secundario:disabled:hover { --b-bg: transparent; }
.boton--secundario { --b-bg: transparent; --b-tinta: var(--tinta); --b-borde: var(--tinta); }
.boton--secundario:hover { --b-bg: color-mix(in srgb, var(--tinta) 7%, transparent); }
/* Acción primaria: navy en la home, el color de la línea en las páginas de línea; en el cierre,
   el color de la estación terminal (la línea se vuelve clara sobre la franja navy). */
.pagina-linea[data-linea] { --primario: var(--lb); --primario-tinta: var(--lt); --primario-hover: color-mix(in srgb, var(--lb) 84%, #10153a); }
html[data-theme="dark"] .pagina-linea[data-linea] { --primario-hover: color-mix(in srgb, var(--lb) 84%, #fff); }
.boton--terminal { --b-bg: #f3f5fb; --b-tinta: #1a2044; }
.boton--terminal:hover { --b-bg: #ffffff; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 650 0.98rem/1.2 var(--f-display); font-stretch: 104%;
  color: var(--tinta); text-decoration: none;
}
.enlace-flecha span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.3s var(--ease); padding-bottom: 2px; }
.enlace-flecha:hover span { background-size: 100% 2px; }
.enlace-flecha .icono { transition: transform 0.25s var(--ease); }
.enlace-flecha:hover .icono { transform: translate(3px, -3px); }
.enlace-flecha--claro { color: #ffffff; }

/* ================= Cabecera ================= */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--borde);
  transition: box-shadow 0.25s var(--ease);
}
/* El vidrio de la cabecera vive en ::before: un backdrop-filter en .cabecera haría de bloque
   contenedor del cajón (position: fixed), que va dentro de <header>. */
.cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--cabecera);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: background-color 0.3s var(--ease);
}
.cabecera.is-desplazada { box-shadow: 0 10px 24px -20px rgba(26, 32, 68, 0.55); }
.cabecera__fila { display: flex; align-items: center; gap: 28px; height: var(--cab); }
.marca { display: flex; align-items: center; flex: none; border-radius: 8px; }
.marca img { width: 138px; height: auto; }
.marca__oscuro { display: none; }
html[data-theme="dark"] .marca__claro { display: none; }
html[data-theme="dark"] .marca__oscuro { display: block; }

.nav__lista { display: flex; align-items: center; gap: 4px; }
.nav__item { position: static; }
.nav__boton, .nav__enlace {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent;
  font: 600 0.92rem/1 var(--f-texto); color: var(--tinta); text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__boton:hover, .nav__enlace:hover, .nav__boton[aria-expanded="true"] { background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.nav__boton .icono { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.nav__boton[aria-expanded="true"] .icono { transform: rotate(180deg); }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.tema {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta); transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.tema:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.tema .icono { position: absolute; transition: opacity 0.2s var(--ease), transform 0.35s var(--ease); }
.tema .icono--sol { opacity: 0; transform: rotate(-60deg) scale(0.6); }
html[data-theme="dark"] .tema .icono--luna { opacity: 0; transform: rotate(60deg) scale(0.6); }
html[data-theme="dark"] .tema .icono--sol { opacity: 1; transform: none; }


.menu-movil {
  display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie);
  font: 650 0.92rem/1 var(--f-display); font-stretch: 104%;
}

/* Mega menú */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 24px 40px -28px rgba(26, 32, 68, 0.55);
}
.mega:not([hidden]) { animation: mega-entra 0.18s var(--ease) both; }
@keyframes mega-entra { from { opacity: 0; transform: translate(-6px, -6px); } }
.mega__interior { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 40px; padding-block: 28px 32px; }
.mega__titulo { font: 650 0.74rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 14px; }
.mega__lista { display: grid; gap: 4px; }
.mega__linea {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start;
  padding: 12px 12px; border-radius: 10px; text-decoration: none;
  transition: background-color 0.15s var(--ease);
}
.mega__linea:hover, .mega__linea:focus-visible { background: color-mix(in srgb, var(--l) 9%, transparent); }
.mega__linea b { display: block; font: 650 1.02rem/1.2 var(--f-display); font-stretch: 104%; }
.mega__linea .mega__actor { display: block; font-size: 0.88rem; line-height: 1.4; color: var(--tinta-2); margin: 2px 0 6px; }
.mega__linea .estado { font-size: 0.78rem; }
.mega__capa {
  margin: 14px 12px 6px; padding-top: 14px; border-top: 2px dashed var(--borde-fuerte);
  font: 650 0.74rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3);
}
.mega__red { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.mega__propuesta { display: grid; gap: 4px; }
.mega__propuesta a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; transition: background-color 0.15s var(--ease); }
.mega__propuesta a:hover { background: var(--superficie-2); }
.mega__propuesta strong { display: block; font: 650 1rem/1.2 var(--f-display); font-stretch: 104%; }
.mega__propuesta span { font-size: 0.88rem; color: var(--tinta-2); }
.mega__escena { position: relative; overflow: hidden; border-radius: 12px; min-height: 150px; background: var(--superficie-2); }
.mega__escena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s var(--ease); }
.mega__escena.is-cambiando img { opacity: 0.2; }

/* Cajón móvil */
.cajon { position: fixed; inset: 0; z-index: 60; }
.cajon__fondo { position: absolute; inset: 0; background: rgba(15, 20, 48, 0.5); opacity: 0; transition: opacity 0.25s var(--ease); border: 0; width: 100%; }
.cajon__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--fondo); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.28s var(--ease);
}
.cajon.is-abierto .cajon__fondo { opacity: 1; }
.cajon.is-abierto .cajon__panel { transform: none; }
.cajon__cabeza { display: flex; align-items: center; justify-content: space-between; height: var(--cab); padding: 0 var(--gutter); border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--fondo); z-index: 1; }
.cajon__cerrar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: var(--superficie); }
.cajon__cuerpo { padding: 20px var(--gutter) 28px; display: grid; gap: 22px; }
.cajon__lineas { display: grid; gap: 2px; position: relative; }
.cajon__lineas a { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 10px 4px; text-decoration: none; border-radius: 10px; }
.cajon__lineas a:active { background: var(--superficie-2); }
.cajon__lineas b { display: block; font: 650 1.05rem/1.2 var(--f-display); font-stretch: 104%; }
.cajon__lineas small { display: block; color: var(--tinta-2); font-size: 0.86rem; line-height: 1.35; margin: 2px 0 4px; }
.cajon__lineas .estado { font-size: 0.78rem; }
.cajon__lineas .mega__capa { margin: 8px 4px 4px; }
.cajon__enlaces { display: grid; padding-top: 6px; border-top: 1px solid var(--borde); }
.cajon__enlaces a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--borde); font: 650 1.05rem/1 var(--f-display); font-stretch: 104%; text-decoration: none; }
.cajon__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cajon__pie .boton { flex: 1 1 100%; }


/* ================= El riel: la línea continua de la página ================= */
/* Arranca bajo la apertura (en Workforce, desde la línea de la apertura), entra a cada sección
   como su estación —el titular o el letrero cuelga de ella con un tramo de trazo— y termina en
   el cierre como estación terminal. Cada bloque dibuja su propio tramo, del alto de su relleno. */
.tramo { position: relative; --rl: var(--tinta); --riel-x: clamp(24px, var(--gutter) - 38px, 34px); --riel-w: 8px; --est: 26px; }
.pagina-linea[data-linea] .tramo { --rl: var(--l); }
.tramo > .contenedor { position: relative; }
.tramo > .contenedor::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(-1 * var(--riel-x) - var(--riel-w) / 2); width: var(--riel-w);
  top: calc(-1 * var(--tramo-pt, var(--esp-seccion)) - 1px); bottom: calc(-1 * var(--tramo-pb, var(--esp-seccion)) - 1px);
  background: var(--rl);
}
.tramo--terminal > .contenedor::before { bottom: auto; height: calc(var(--esp-seccion) + 0.52 * clamp(2.1rem, 1.2rem + 2.3vw, 3.4rem)); }
.cierre.tramo, .datos.tramo { --rl: #f3f5fb; --estacion-relleno: var(--tablero); }
.cierre.tramo { --estacion-relleno: var(--cierre); }
.pagina-linea[data-linea] .cierre.tramo, .pagina-linea[data-linea] .datos.tramo { --rl: var(--lc); }

/* Estación: el letrero (o el titular) cuelga de ella */
.letrero--estacion, .estacion { position: relative; z-index: 1; }
.letrero--estacion::before, .estacion::before {
  content: ""; position: absolute; z-index: 1;
  left: calc(-1 * var(--riel-x) - var(--est) / 2); top: 50%;
  width: var(--est); height: var(--est); margin-top: calc(var(--est) / -2);
  border-radius: 50%; background: var(--estacion-relleno);
  box-shadow: inset 0 0 0 calc(var(--est) / 6.5) var(--rl);
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.letrero--estacion::after, .estacion::after {
  content: ""; position: absolute; right: 100%; top: 50%;
  width: calc(var(--riel-x) - var(--est) / 2); height: var(--riel-w); margin-top: calc(var(--riel-w) / -2);
  background: var(--rl);
}
.estacion::before, .estacion::after { top: 0.55em; }
.estacion::after { width: max(0px, calc(var(--riel-x) - var(--est) / 2 - 10px)); right: calc(100% + 10px); }
.letrero--estacion.is-pasada::before, .estacion.is-pasada::before { background: var(--rl); }
.letrero--estacion:hover::before { transform: scale(1.12); }

/* Parada del riel: sin letrero sobre el titular. La estación queda unida por su tramo al inicio
   del H2 y el nombre de la sección se lee en vertical junto al riel (es navegación). */
.seccion__cabeza, .cita, .cierre__texto-col, .datos__cabeza { position: relative; }
.parada-riel {
  --parada-y: calc(0.55 * clamp(2rem, 1.15rem + 2.1vw, 3.1rem));
  position: absolute; z-index: 2; left: calc(-1 * var(--riel-x) - var(--est) / 2); top: calc(var(--parada-y) - var(--est) / 2);
  width: var(--est); height: var(--est); border-radius: 50%;
  background: var(--estacion-relleno); box-shadow: inset 0 0 0 calc(var(--est) / 6.5) var(--rl);
  text-decoration: none; transition: background-color 0.35s var(--ease), transform 0.3s var(--ease);
}
.parada-riel::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: calc(var(--riel-x) - var(--est) / 2 - 12px); height: var(--riel-w); margin-top: calc(var(--riel-w) / -2);
  background: var(--rl);
}
.parada-riel.is-pasada { background: var(--rl); }
.parada-riel:hover { transform: scale(1.12); }
.parada-riel:focus-visible { outline-offset: 4px; border-radius: 50%; }
.parada-riel__nombre {
  position: absolute; right: calc(100% + 6px); bottom: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 650 0.72rem/1 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta-3); white-space: nowrap; transition: color 0.2s var(--ease);
}
.parada-riel:hover .parada-riel__nombre, .parada-riel.is-actual .parada-riel__nombre { color: var(--tinta); }
.cita > .parada-riel { --parada-y: calc(0.54 * clamp(2rem, 1.2rem + 2.2vw, 3.2rem)); }
.cita > .parada-riel::after { width: calc(var(--riel-x) - var(--est) / 2); }
.cierre__texto-col > .parada-riel { --parada-y: calc(0.52 * clamp(2.1rem, 1.2rem + 2.3vw, 3.4rem)); }
.datos__cabeza > .parada-riel { --parada-y: calc(0.66 * clamp(1.9rem, 1.1rem + 2vw, 2.9rem)); }
.cierre .parada-riel__nombre, .datos .parada-riel__nombre { color: #aab1d1; }
.cierre .parada-riel:hover .parada-riel__nombre, .cierre .parada-riel.is-actual .parada-riel__nombre,
.datos .parada-riel:hover .parada-riel__nombre, .datos .parada-riel.is-actual .parada-riel__nombre { color: #ffffff; }
.parada-riel--terminal {
  --est: 38px; box-shadow: none;
  background: radial-gradient(circle, var(--rl) 0 7px, var(--estacion-relleno) 7.5px 12px, var(--rl) 12.5px);
}
.parada-riel--terminal::after { width: max(0px, calc(var(--riel-x) - 19px - 12px)); }
.parada-riel--terminal.is-pasada { background: radial-gradient(circle, var(--rl) 0 7px, var(--estacion-relleno) 7.5px 12px, var(--rl) 12.5px); }

/* El tren de lectura recorre el riel (solo escritorio; en celular, la tira bajo la cabecera) */
.riel-tren {
  position: fixed; z-index: 30; left: 0; top: 0; display: none;
  width: 16px; height: 30px; border-radius: 8px;
  background: var(--tren-relleno); box-shadow: inset 0 0 0 3px var(--rl, var(--tinta)), 0 4px 10px -4px var(--sombra-tono);
  transform: translate(var(--tx, -100px), var(--ty, 0)); opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.riel-tren::after { content: ""; position: absolute; left: 5px; right: 5px; top: 6px; height: 5px; border-radius: 2px; background: var(--rl, var(--tinta)); }
.riel-tren.is-visible { opacity: 1; }
@media (min-width: 1180px) { .riel-tren { display: block; } }

/* Tira móvil bajo la cabecera */
.tira-movil { position: relative; height: 4px; margin: 0 var(--gutter); display: none; --rl: var(--tinta); }
.tira-movil::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: color-mix(in srgb, var(--rl) 14%, transparent); }
.tira-movil__avance { position: absolute; inset: 0; border-radius: 2px; background: var(--rl); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tira-movil__punto { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--estacion-relleno); box-shadow: inset 0 0 0 2px var(--rl); }
.tira-movil__punto.is-pasada { background: var(--rl); }
.tira-movil__tren { position: absolute; top: 50%; left: 0; width: 18px; height: 10px; margin: -5px 0 0 -9px; border-radius: 5px; background: var(--tren-relleno); box-shadow: inset 0 0 0 2.5px var(--rl); transform: translateX(var(--tren-x, 0)); }
.pagina-linea[data-linea] .tira-movil { --rl: var(--l); }
@media (max-width: 1179px) { .tira-movil { display: block; } .cabecera__fila { height: calc(var(--cab) - 4px); } }

/* ================= Secciones genéricas ================= */
.seccion { position: relative; padding-block: var(--esp-seccion); }
.seccion--alterna { background: var(--fondo-2); border-block: 1px solid var(--borde); }
.seccion__cabeza { max-width: 52rem; margin-bottom: clamp(40px, 5vw, 64px); }
.seccion__cabeza h2, .bloque h2 { font-size: clamp(2rem, 1.15rem + 2.1vw, 3.1rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.022em; }
.seccion__bajada { margin-top: 20px; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem); line-height: 1.6; color: var(--tinta-2); max-width: 66ch; }

/* Aparición: los bloques entran siguiendo los 45° de las líneas */
.movimiento-listo [data-revela] { opacity: 0; transform: translate(-16px, 16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.movimiento-listo [data-revela].is-visible { opacity: 1; transform: none; }
.movimiento-listo [data-revela][data-retardo="1"] { transition-delay: 0.08s; }
.movimiento-listo [data-revela][data-retardo="2"] { transition-delay: 0.16s; }
.movimiento-listo [data-revela][data-retardo="3"] { transition-delay: 0.24s; }

/* ================= Apertura ================= */
/* Primer viewport: la franja del titular a todo el contenedor y, debajo, las seis estaciones de
   origen (la foto de cada cliente en su terreno) en una fila, como acordeón horizontal. De la banda
   de cada foto baja su línea; las seis convergen en «La red» y de ahí el conector llega a la
   pantalla de andén, que muestra el producto de la línea activa. Bajo 1000 px las seis estaciones
   pasan a una grilla (3 × 2 en tableta, 2 × 3 en celular) y la red y el andén siguen debajo. */
.apertura {
  position: relative; isolation: isolate; overflow: hidden;
  border-bottom: 1px solid var(--borde);
  --la: var(--l-workforce); --lca: var(--c-workforce);
}
.apertura[data-activa="retail"] { --la: var(--l-retail); --lca: var(--c-retail); }
.apertura[data-activa="3pl"] { --la: var(--l-3pl); --lca: var(--c-3pl); }
.apertura[data-activa="freight"] { --la: var(--l-freight); --lca: var(--c-freight); }
.apertura[data-activa="delivery"] { --la: var(--l-delivery); --lca: var(--c-delivery); }
.apertura[data-activa="sense"] { --la: var(--l-sense); --lca: var(--c-sense); }

.apertura__vista { display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding-top: clamp(28px, 4.4vh, 60px); }
.apertura__titular { display: grid; gap: 22px 56px; align-items: end; }
.apertura__titulo {
  font-size: clamp(2.3rem, 1.2rem + 3vw, 4.6rem);
  line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; font-stretch: 102%;
  max-width: 13em;
}
.apertura__lado { min-width: 0; }
.apertura__bajada { margin-top: 0; font-size: clamp(1.06rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; color: var(--tinta-2); max-width: 34rem; }
.apertura__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Entrada del titular: renglones que suben con máscara */
.movimiento-listo .apertura__titulo .renglon { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.movimiento-listo .apertura__titulo .renglon > span { display: inline-block; animation: renglon 0.9s var(--ease) both; animation-delay: calc(0.1s + var(--r, 0) * 0.07s); }
@keyframes renglon { from { transform: translateY(105%); } }
.movimiento-listo .apertura__entra { animation: entra-45 0.9s var(--ease) both; animation-delay: calc(0.35s + var(--r, 0) * 0.08s); }
@keyframes entra-45 { from { opacity: 0; transform: translate(-14px, 14px); } }

/* Fila de control sobre las fotos: «Próxima» y Pausar */
.origen__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin: clamp(22px, 3.4vh, 40px) 0 12px; }
.origen__control { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.origen__proxima { font: 500 0.8rem/1.2 var(--f-texto); color: var(--tinta-2); white-space: nowrap; opacity: 0; transition: opacity 0.3s var(--ease); }
.origen__proxima .anden__proxima-rotulo { color: var(--tinta-3); }
.apertura.is-ciclando .origen__proxima { opacity: 1; }

/* ---------- Las seis estaciones de origen ---------- */
/* Orden numérico de staging: 01 Workforce, 02 Retail, 03 3PL, 04 Freight, 05 Delivery y, tras un
   hueco mayor, 06 Sense. Cada estación dice siempre quién es: insignia, nombre de la línea y el
   rótulo de su segmento (también cerrada; pedido del usuario del 10-oct). */
.origen { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; --hueco-sense: 14px; --gap-fila: 10px; }
.origen__estacion { position: relative; min-width: 0; aspect-ratio: 1 / 1.12; }
.origen__estacion--sense { margin-left: 4px; aspect-ratio: auto; align-self: stretch; }
.origen__panel {
  position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; display: block;
  border-radius: 4px; background: var(--navy); color: #ffffff; text-decoration: none;
}
.origen__panel:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
/* Encuadre por foto: --fx para los recortes angostos (fila y acordeón), --fy para los casi
   cuadrados (grillas), de modo que cada recorte conserve la señal de su terreno */
.origen__foto {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--fx, 50%) var(--fy, 60%);
}
/* Velo navy en el tercio inferior, solo donde hay texto (contraste AA sobre cualquier foto) */
.origen__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(17, 22, 54, 0.93) 0, rgba(17, 22, 54, 0.86) 196px, rgba(17, 22, 54, 0.6) 252px, rgba(17, 22, 54, 0) 340px);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
/* La banda de la línea: de ella sale el trazo que baja a «La red» */
.origen__panel::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 6px; background: var(--l);
}
.origen__estacion--sense .origen__panel::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='10'%3E%3Crect width='16' height='10' fill='%230ea5c9'/%3E%3C/svg%3E") left center / 27px 100% repeat-x;
}
html[data-theme="dark"] .origen__estacion--sense .origen__panel::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='10'%3E%3Crect width='16' height='10' fill='%233fc6e6'/%3E%3C/svg%3E");
}
/* Rótulo de la estación: insignia, nombre de la línea y segmento (dos renglones como máximo) */
.origen__cerrado {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: grid; justify-items: start; gap: 5px; padding: 44px 12px 16px;
  background: linear-gradient(to top, rgba(17, 22, 54, 0.92) 0, rgba(17, 22, 54, 0.85) 68%, rgba(17, 22, 54, 0) 100%);
  transition: opacity 0.3s var(--ease) 0.12s;
}
.origen__rotulo { display: flex; align-items: center; gap: 8px; }
.origen__nombre { font: 700 0.95rem/1.15 var(--f-display); font-stretch: 104%; letter-spacing: 0.005em; color: #ffffff; }
.origen__segmento {
  font: 600 0.78rem/1.25 var(--f-display); font-stretch: 88%; letter-spacing: 0.01em; color: #e7eaf6;
  max-width: 24ch; text-wrap: balance;
  min-height: 2.5em; min-height: 2lh;
}
.origen__panel .insignia { outline: 2px solid #ffffff; }
.origen__panel .insignia--sense { color: #ffffff; border-color: var(--c-sense); outline: 0; }
/* Abierta (solo en el acordeón de escritorio): insignia, «Druppify {Línea}», segmento, frase y estado */
.origen__abierto { display: none; }
.origen__progreso { display: none; }

@media (min-width: 600px) {
  .origen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .origen__estacion { aspect-ratio: 1 / 1.06; }
  .origen__estacion--sense { margin-left: 6px; }
  .origen__cerrado { padding: 52px 14px 18px; }
}

/* Desde 1000 px: las seis en una fila a todo el contenedor, del alto que queda en el viewport */
@media (min-width: 1000px) {
  .apertura__vista { min-height: min(calc(100svh - var(--cab)), 1120px); }
  .apertura__titular { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .apertura__lado { padding-bottom: 0.4em; }
  .origen {
    container-type: inline-size;
    gap: 0 var(--gap-fila); min-height: 380px;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr var(--hueco-sense) 1fr;
  }
  .origen__estacion { grid-row: 1; aspect-ratio: auto; }
  .origen__estacion:nth-child(1) { grid-column: 1; }
  .origen__estacion:nth-child(2) { grid-column: 2; }
  .origen__estacion:nth-child(3) { grid-column: 3; }
  .origen__estacion:nth-child(4) { grid-column: 4; }
  .origen__estacion:nth-child(5) { grid-column: 5; }
  .origen__estacion--sense { grid-column: 7; margin-left: 0; }
  .origen__foto { object-position: var(--fx, 50%) 50%; }
  .origen__panel::after { height: 10px; }
  .origen__cerrado { padding: 72px clamp(12px, 1.2vw, 18px) 24px; gap: 6px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .origen { --gap-fila: 8px; --hueco-sense: 10px; min-height: 330px; }
}

/* Desde 1200 px: acordeón horizontal. La activa a 2,4 fr frente a 1 fr; el ancho se anima con
   grid-template-columns y la curva de la casa */
@media (min-width: 1200px) {
  .origen {
    grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr var(--hueco-sense) 1fr;
    transition: grid-template-columns 0.8s var(--ease);
  }
  .apertura[data-activa="retail"] .origen { grid-template-columns: 1fr 2.4fr 1fr 1fr 1fr var(--hueco-sense) 1fr; }
  .apertura[data-activa="3pl"] .origen { grid-template-columns: 1fr 1fr 2.4fr 1fr 1fr var(--hueco-sense) 1fr; }
  .apertura[data-activa="freight"] .origen { grid-template-columns: 1fr 1fr 1fr 2.4fr 1fr var(--hueco-sense) 1fr; }
  .apertura[data-activa="delivery"] .origen { grid-template-columns: 1fr 1fr 1fr 1fr 2.4fr var(--hueco-sense) 1fr; }
  .apertura[data-activa="sense"] .origen { grid-template-columns: 1fr 1fr 1fr 1fr 1fr var(--hueco-sense) 2.4fr; }
  .origen__rotulo { flex-direction: column; align-items: flex-start; gap: 8px; }
  .origen__estacion.is-activa .origen__cerrado { opacity: 0; transition: opacity 0.2s var(--ease); }
  .origen__estacion.is-activa .origen__panel::before { opacity: 1; }
  .origen__abierto {
    position: absolute; z-index: 2; left: 0; bottom: 10px;
    /* ancho final de la activa: el texto no se reacomoda mientras la columna crece */
    width: calc((100cqw - 6 * var(--gap-fila) - var(--hueco-sense)) * 2.4 / 7.4);
    display: grid; justify-items: start; gap: 9px;
    padding: 0 clamp(16px, 1.6vw, 28px) clamp(20px, 2vw, 28px);
    opacity: 0; visibility: hidden; transform: translate(-10px, 10px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s 0.2s;
  }
  .origen__estacion.is-activa .origen__abierto {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.5s var(--ease) 0.3s, transform 0.7s var(--ease) 0.3s, visibility 0s;
  }
  .origen__cabeza { display: flex; align-items: center; gap: 10px; }
  .origen__linea { font: 700 1.04rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.005em; }
  .origen__actor { font: 500 0.84rem/1.35 var(--f-texto); color: #dfe3f2; }
  .origen__frase { font: 600 clamp(1rem, 0.72rem + 0.5vw, 1.26rem)/1.32 var(--f-display); font-stretch: 102%; letter-spacing: -0.006em; color: #ffffff; max-width: 30ch; }
  .origen__abierto .estado { color: #dfe3f2; font-weight: 500; font-size: 0.8rem; }
  .origen__abierto .estado::before { box-shadow: inset 0 0 0 2px var(--lc); }
  .origen__abierto .estado[data-estado="produccion"]::before { background: var(--lc); }
  /* Avance del ciclo, sobre la banda de la activa (temporizador: avance lineal) */
  .origen__progreso { display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px; height: 3px; background: rgba(255, 255, 255, 0.16); opacity: 0; transition: opacity 0.3s var(--ease); }
  .origen__avance { position: absolute; inset: 0; background: #ffffff; transform-origin: left; transform: scaleX(0); }
  .apertura.is-ciclando .origen__estacion.is-activa .origen__progreso { opacity: 1; }
  .movimiento-listo .apertura.is-ciclando .origen__estacion.is-activa .origen__avance.is-corriendo { animation: avance var(--ciclo) linear both; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
  .origen__nombre { font-size: 0.9rem; }
  .origen__actor { font-size: 0.8rem; }
}

/* Las fotos entran una sola vez con un recorte de arriba abajo, en el sentido de su línea */
.movimiento-listo .origen__estacion { animation: foto-baja 0.95s var(--ease) backwards; animation-delay: calc(0.32s + var(--k, 0) * 0.07s); }
@keyframes foto-baja { from { clip-path: inset(0 0 100% 0 round 4px); } to { clip-path: inset(0 0 0 0 round 4px); } }

/* ---------- El diagrama vivo (común a la red de la apertura) ---------- */
.red { position: relative; }
.red__svg { overflow: visible; }
.red__hit { fill: none; stroke: transparent; stroke-linecap: butt; pointer-events: stroke; cursor: pointer; }
.red__ruta { fill: none; stroke: var(--l); stroke-width: 10; stroke-linecap: butt; stroke-linejoin: round; pointer-events: none; }
.red__ruta--sense { stroke-width: 7; stroke-dasharray: 16 11; stroke-linecap: butt; }
.red__grupo { transition: opacity 0.3s var(--ease); }
.red__pildora { fill: var(--estacion-relleno); stroke: var(--estacion-trazo); stroke-width: 3.5; pointer-events: none; }
.red__punto { fill: var(--estacion-trazo); transform-box: fill-box; transform-origin: center; transition: transform 0.35s var(--ease); }
.red__punto.is-llega { transform: scale(1.7); }
.red__tren { transition: opacity 0.4s var(--ease); }
.red__tren rect { fill: var(--tren-relleno); stroke: var(--l); stroke-width: 3; }
/* El conector del andén: vía neutra; el color de la línea activa baja por ella hasta la pantalla */
.red__conector { fill: none; stroke: var(--borde-fuerte); stroke-width: 10; stroke-linecap: butt; }
.red__flujo { fill: none; stroke: var(--la); stroke-width: 10; stroke-linecap: butt; }
.red__flujo--alto { transition: opacity 0.3s var(--ease); }
.apertura[data-activa="sense"] .red__flujo--alto { opacity: 0; }
.apertura[data-activa="sense"] .red__flujo--bajo { stroke-dasharray: 9 7; }
.movimiento-listo .red__flujo.is-bajando { animation: flujo-baja 0.45s var(--ease) both; }
.movimiento-listo .red__flujo--bajo.is-bajando { animation-delay: 0.18s; }
@keyframes flujo-baja { from { clip-path: inset(-20px -20px 100% -20px); } to { clip-path: inset(-20px); } }
.red__combinacion { fill: var(--estacion-relleno); stroke: var(--estacion-trazo); stroke-width: 4; }
.red__fin { fill: var(--estacion-relleno); stroke: var(--l); stroke-width: 3.5; stroke-dasharray: 5 3.5; }

/* La línea activa (la que muestra la pantalla) en su color pleno; las demás al 30 % */
.red[data-activa] .red__grupo:not([data-linea]),
.red[data-activa="workforce"] [data-linea]:not([data-linea="workforce"]):is(.red__grupo, .red__tren),
.red[data-activa="retail"] [data-linea]:not([data-linea="retail"]):is(.red__grupo, .red__tren),
.red[data-activa="3pl"] [data-linea]:not([data-linea="3pl"]):is(.red__grupo, .red__tren),
.red[data-activa="freight"] [data-linea]:not([data-linea="freight"]):is(.red__grupo, .red__tren),
.red[data-activa="delivery"] [data-linea]:not([data-linea="delivery"]):is(.red__grupo, .red__tren),
.red[data-activa="sense"] [data-linea]:not([data-linea="sense"]):is(.red__grupo, .red__tren) { opacity: 0.3; }
.red[data-activa="workforce"] .red__grupo[data-linea="workforce"] .red__ruta,
.red[data-activa="retail"] .red__grupo[data-linea="retail"] .red__ruta,
.red[data-activa="3pl"] .red__grupo[data-linea="3pl"] .red__ruta,
.red[data-activa="freight"] .red__grupo[data-linea="freight"] .red__ruta,
.red[data-activa="delivery"] .red__grupo[data-linea="delivery"] .red__ruta { stroke-width: 14; }
.red[data-activa="sense"] .red__grupo[data-linea="sense"] .red__ruta { stroke-width: 9; }

/* La red de origen: las líneas bajan desde la banda de cada foto (geometría en px de pantalla,
   calculada por metro.js con tramos a 0°, 45° y 90° y radio constante) */
.apertura__red { position: relative; z-index: 1; padding-bottom: clamp(40px, 5vw, 80px); }
.red--origen { position: relative; height: var(--alto-red, 220px); }
.red--origen .red__svg { position: absolute; left: 0; top: 0; }
html:not(.js) .red--origen { height: auto; padding-block: 28px; }
html:not(.js) .red--origen .red__svg { display: none; }
.red--origen .red__nodo { position: absolute; left: var(--nx, 50%); top: var(--ny, 50%); transform: translateY(-50%); }
html:not(.js) .red--origen .red__nodo { position: static; transform: none; }
.red__insignias { display: none; }
.red--origen.is-grilla .red__insignias { display: inline; }
.red__insignia circle { fill: var(--lb); }
.red__insignia text { fill: var(--lt); font: 700 11px var(--f-display); text-anchor: middle; dominant-baseline: central; }
.red__insignia--sense circle { fill: var(--fondo); stroke: var(--l); stroke-width: 2.5; stroke-dasharray: 4 3; }
.red__insignia--sense text { fill: var(--tinta); }
.red--origen.is-grilla .red__ruta { stroke-width: 7; }
.red--origen.is-grilla .red__ruta--sense { stroke-width: 5; stroke-dasharray: 11 8; }
.red--origen.is-grilla .red__conector, .red--origen.is-grilla .red__flujo { stroke-width: 7; }
.red--origen.is-grilla .red__pildora { stroke-width: 3; }
.red--origen.is-grilla[data-activa] .red__grupo:not(.red__grupo--sense) .red__ruta { stroke-width: 7; }
.red--origen.is-grilla[data-activa="workforce"] .red__grupo[data-linea="workforce"] .red__ruta,
.red--origen.is-grilla[data-activa="retail"] .red__grupo[data-linea="retail"] .red__ruta,
.red--origen.is-grilla[data-activa="3pl"] .red__grupo[data-linea="3pl"] .red__ruta,
.red--origen.is-grilla[data-activa="freight"] .red__grupo[data-linea="freight"] .red__ruta,
.red--origen.is-grilla[data-activa="delivery"] .red__grupo[data-linea="delivery"] .red__ruta { stroke-width: 10; }
/* Las líneas se descubren de arriba abajo cuando las fotos ya entraron (una sola vez) */
.movimiento-listo .red--origen .red__grupo { animation: baja-revela 1.1s var(--ease) backwards; animation-delay: calc(0.95s + var(--i, 0) * 0.06s); }
@keyframes baja-revela { from { clip-path: inset(-30px -30px 100% -30px); } to { clip-path: inset(-30px); } }
.movimiento-listo .red--origen :is(.red__pildora, .red__punto, .red__anden, .red__insignias) { animation: aparece 0.6s var(--ease) 1.45s both; }
.movimiento-listo .red--origen .red__nodo { animation: entra-45 0.7s var(--ease) 1.5s both; }
@keyframes aparece { from { opacity: 0; } }

.red__nodo {
  position: absolute; z-index: 2; display: grid; gap: 2px; text-decoration: none; color: var(--tinta);
  padding: 6px 8px; border-radius: 8px;
}
.red__nodo-nombre { font: 750 1.9rem/1 var(--f-display); font-stretch: 104%; letter-spacing: -0.02em; }
.red__nodo-sub { font: 600 0.74rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.red__nodo:hover .red__nodo-nombre { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.16em; }
.red--origen .red__nodo { white-space: nowrap; }
.red--origen.is-grilla .red__nodo { padding: 4px 0 4px 4px; }
.red--origen.is-grilla .red__nodo-nombre { font-size: 1.45rem; }

/* ---------- La pantalla de andén ---------- */
/* El andén: una banda del color de la línea activa (el borde del andén) sobre la pantalla —la
   captura real de esa línea o su vista de diseño— y el tablero con su letrero, su promesa, su
   estado y su enlace. El conector de la red llega a esa banda. */
.anden {
  position: relative; width: 100%; max-width: 640px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pantalla" "tablero" "tiendas";
}
.anden::before {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -6px; height: 6px;
  background: var(--la); transition: background-color 0.45s var(--ease);
}
.anden__pantalla { grid-area: pantalla; position: relative; display: grid; min-width: 0; }
.anden__vista { grid-area: 1 / 1; visibility: hidden; }
.anden__vista.is-activa, .anden__vista.is-saliente { visibility: visible; }
.anden__vista.is-activa { z-index: 2; }
.anden__vista.is-saliente { z-index: 1; }
.anden .captura__marco { border-radius: 0 0 12px 12px; }
.anden .captura__marco::before { display: none; }
.anden .captura__leyenda { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.anden .diseno.anden__vista { position: absolute; inset: 0; border-radius: 0 0 14px 14px; border-top-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.anden .diseno .diseno__marco { flex: 1; min-height: 0; overflow: hidden; }
.anden .diseno .pantalla { height: 100%; }
/* El barrido: la pantalla nueva baja desde la banda, en el sentido del conector (90°) */
.movimiento-listo .anden__vista.is-entrando { animation: barre-baja 0.7s var(--ease) both; }
@keyframes barre-baja { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.anden__tablero {
  grid-area: tablero; position: relative; min-width: 0;
  display: grid; grid-template-rows: 1fr auto; gap: 16px;
  padding: 20px 22px 16px; border-radius: 0 0 14px 14px;
  background: var(--tablero); color: var(--tablero-tinta);
  box-shadow: var(--sombra-alta);
}
html[data-theme="dark"] .anden__tablero { outline: 1px solid var(--tablero-borde); outline-offset: -1px; }
.anden__infos { display: grid; }
.anden__info { grid-area: 1 / 1; display: grid; align-content: start; gap: 12px; visibility: hidden; opacity: 0; transition: opacity 0.3s var(--ease), visibility 0s 0.3s; }
.anden__info.is-activa { visibility: visible; opacity: 1; transition: opacity 0.4s var(--ease) 0.15s, visibility 0s; }
.movimiento-listo .anden__info.is-activa > * { animation: entra-45 0.6s var(--ease) both; }
.movimiento-listo .anden__info.is-activa > :nth-child(2) { animation-delay: 0.06s; }
.movimiento-listo .anden__info.is-activa > :nth-child(3) { animation-delay: 0.12s; }
.anden__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tablero-borde); }
.anden__linea { font: 700 1rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.005em; }
.anden .estado { color: var(--tablero-tinta-2); font-weight: 500; font-size: 0.8rem; }
.anden .estado::before { box-shadow: inset 0 0 0 2px var(--lc); }
.anden .estado[data-estado="produccion"]::before { background: var(--lc); }
.anden .insignia { outline: 0; }
.anden .insignia--sense { color: #ffffff; border-color: var(--lc); }
.anden__promesa { font: 650 clamp(1.12rem, 0.96rem + 0.45vw, 1.42rem)/1.3 var(--f-display); font-stretch: 102%; letter-spacing: -0.008em; color: #ffffff; max-width: 26ch; text-wrap: balance; }
.anden .enlace-flecha { min-height: 40px; font-size: 0.92rem; justify-self: start; }
.anden__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.anden__siguiente { flex: 1 1 190px; display: grid; gap: 7px; min-width: 0; }
.anden__proxima { font: 500 0.78rem/1.2 var(--f-texto); color: var(--tablero-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.3s var(--ease); }
.anden__proxima-rotulo { font: 650 0.72rem/1 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar); }
.apertura.is-ciclando .anden__proxima { opacity: 1; }
.anden__letra { display: inline-block; }
.anden__letra.is-gira { animation: gira 0.07s var(--ease); }
.anden__progreso { position: relative; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.anden__avance { position: absolute; inset: 0; background: var(--lca); transform-origin: left; transform: scaleX(0); }
.movimiento-listo .apertura.is-ciclando .anden__avance.is-corriendo { animation: avance var(--ciclo) linear both; }
@keyframes avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pausa {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; white-space: nowrap;
  border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie);
  font: 600 0.82rem/1 var(--f-texto); color: var(--tinta);
  box-shadow: var(--sombra);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), transform 0.2s var(--ease);
}
.pausa:hover { border-color: var(--tinta-3); transform: translateY(-1px); }
.pausa .icono { width: 16px; height: 16px; }
.pausa .icono--play, .pausa[aria-pressed="true"] .icono--pausa { display: none; }
.pausa[aria-pressed="true"] .icono--play { display: block; }
.pausa--tablero { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #ffffff; box-shadow: none; min-height: 44px; }
.pausa--tablero:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); }
.anden :focus-visible { outline-color: #5fd4bf; }

/* «Operamos en tiendas de»: al pie del andén, lejos de las fotos (ninguna foto junto a un logo) */
.apertura__tiendas { grid-area: tiendas; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }
.tiendas__rotulo { font: 650 0.76rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.tiendas__logos { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); flex-wrap: wrap; }
.logo-cadena { display: block; height: 22px; background: var(--tinta); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; opacity: 0.82; transition: opacity 0.2s var(--ease); }
.logo-cadena:hover { opacity: 1; }
.logo-cadena--walmart { --m: url("/assets/img/clientes/walmart.svg"); width: 94px; }
.logo-cadena--tottus { --m: url("/assets/img/clientes/tottus.svg"); width: 112px; }
.logo-cadena--smu { --m: url("/assets/img/clientes/smu.png"); width: 100px; }

@media (min-width: 1000px) {
  .apertura .anden {
    max-width: none; column-gap: var(--g);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "tablero pantalla" "tiendas pantalla";
    align-items: start;
  }
  .captura--ajustada .captura__pantalla { aspect-ratio: 2400 / 1195; background: #ffffff; }
  .captura--ajustada .captura__img { height: 100%; object-fit: contain; object-position: top center; }
  .apertura__tiendas { align-self: end; margin-top: 28px; }
}

/* ================= Ventanas de producto ================= */
/* Captura real: marco de navegador sobrio, banda de la línea arriba, URL app.druppify.com y su
   leyenda. Siempre clara (el producto es claro), también en modo oscuro. */
.captura { position: relative; margin: 0; min-width: 0; container: ventana / inline-size; }
.captura__marco { position: relative; overflow: hidden; border-radius: 12px; background: #ffffff; box-shadow: var(--sombra-ventana); }
.captura__marco::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 4px; background: var(--l); }
.captura__barra {
  position: relative; display: flex; align-items: center; gap: 14px; min-width: 0;
  min-height: 42px; padding: 8px 14px; background: #f5f7fb; border-bottom: 1px solid #e3e8f1;
  font: 500 12px/1 var(--f-texto); color: #5b6585;
}
.captura__puntos { display: flex; gap: 6px; flex: none; }
.captura__barra > .captura__url { flex: 0 1 auto; margin-right: 10px; }
.captura__puntos i { width: 10px; height: 10px; border-radius: 50%; background: #d2d8e5; }
.captura__url {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 26px; padding: 0 12px;
  border-radius: 999px; background: #ffffff; box-shadow: inset 0 0 0 1px #e0e5ee;
  font: 500 12.5px/1 var(--f-texto); color: #424a6e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.captura__url .icono { width: 12px; height: 12px; color: #66708f; }
.captura__real { margin-left: auto; flex: none; white-space: nowrap; font: 600 12px/1 var(--f-texto); color: #5b6585; }
.captura__pantalla { background: #f7fbfe; }
.captura__img { width: 100%; height: auto; }
.captura__foto, .captura__franja { display: block; }
/* Recortes legibles con bordes limpios (herramientas/recortes.py). La principal de escritorio
   muestra la vista completa; las secundarias, la «franja» (todo el ancho de la vista, del título a
   la tercera o cuarta fila) a todo el ancho de la galería. Bajo 960 px todas usan la franja (o el
   recorte angosto, si la vista tiene columnas propias) a 60 % de escala, dentro de un marco que se
   desplaza a lo ancho: el texto se lee y ningún borde de la imagen corta una columna. */
.captura__franja { display: none; }
@media (min-width: 960px) {
  .galeria__escenario > :not(:first-child) .captura__img--completa { display: none; }
  .galeria__escenario > :not(:first-child) .captura__franja { display: block; }
}
@media (max-width: 959px) {
  [data-galeria] .captura__img--completa { display: none; }
  [data-galeria] .captura__franja { display: block; }
  [data-galeria] .captura__franja .captura__img, .anden--fijo .captura__foto .captura__img { width: max(100%, calc(var(--ui-angosta) * 0.6px)); max-width: none; }
  [data-galeria] .captura__pantalla, .anden--fijo .captura__pantalla { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--l) #e6eaf2; }
}
@media (max-width: 999px) {
  .apertura .anden .captura__foto .captura__img { width: max(100%, calc(var(--ui-angosta) * 0.6px)); max-width: none; }
  .apertura .anden .captura__pantalla { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--l) #e6eaf2; }
}
/* Capturas anchas que se desplazan a lo ancho (tableta y celular): mientras quede imagen a la
   derecha, una sombra lateral marca el borde (sin tapar contenido) y la barra del marco dice
   «Desliza» con una flecha. Al llegar al final, ambas se van. */
.captura__marco::after {
  content: ""; position: absolute; z-index: 3; right: 0; top: 42px; bottom: 0; width: 26px; pointer-events: none;
  background: linear-gradient(90deg, rgba(26, 32, 68, 0), rgba(26, 32, 68, 0.2));
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.captura.is-desliza .captura__marco::after { opacity: 1; }
.captura__desliza {
  display: none; align-items: center; gap: 5px; margin-left: auto; flex: none;
  height: 24px; padding: 0 9px 0 10px; border-radius: 999px;
  background: #1a2044; color: #ffffff; font: 600 12px/1 var(--f-texto);
}
.captura__desliza .icono { width: 13px; height: 13px; }
.captura.is-desliza .captura__desliza { display: inline-flex; }
.captura.is-desliza .captura__barra .captura__real { display: none; }
.captura__leyenda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 12px; font: 500 0.86rem/1.4 var(--f-texto); color: var(--tinta-3); }
.captura__modulo { font-weight: 600; color: var(--tinta-2); }
.captura__real--pie { display: none; margin: 0; font: inherit; color: inherit; }
@container ventana (max-width: 560px) {
  .captura__barra .captura__real { display: none; }
  .captura__real--pie { display: inline; }
  .captura__marco::after { top: 34px; }
  .captura__barra { min-height: 34px; gap: 10px; padding: 6px 10px; }
  .captura__puntos i { width: 8px; height: 8px; }
  .captura__url { height: 22px; font-size: 11px; }
}

/* Vista de diseño: lo que aún no tiene módulo en producción. Marco punteado, sin URL ni sombra,
   con su rótulo «Vista de diseño · estado de la línea». */
.diseno { position: relative; margin: 0; min-width: 0; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo-2); padding: 0 14px 14px; box-shadow: 0 1px 2px rgba(26, 32, 68, 0.05), 0 8px 24px -12px rgba(26, 32, 68, 0.18); }
.estacion-linea--alterna .diseno { background: var(--fondo); }
.diseno__rotulo { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 2px; font: 650 0.84rem/1.3 var(--f-display); font-stretch: 104%; color: var(--tinta-2); }
.diseno__marca { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--l); }
.diseno .pantalla { --p-sombra: 0 0 0 1px rgba(26, 32, 68, 0.09), 0 1px 2px rgba(26, 32, 68, 0.05); --p-radio: 10px; }
/* Las tablas del kit no cortan sus chips: bajo 660 px de pantalla se ocultan las columnas
   secundarias (las mismas que el kit oculta bajo 560 px) y, si aún no cabe, la tabla se desplaza
   dentro del marco. */
.diseno .tabla { overflow-x: auto; }
@container (max-width: 660px) { .diseno .pantalla .ocultar-angosto { display: none; } }

/* Celular: el marco del kit con la pantalla real de la app */
.telefono { margin: 0; width: 100%; display: grid; justify-items: center; gap: 4px; }
.telefono__marco.app-movil { width: min(264px, 100%); aspect-ratio: auto; height: auto; box-shadow: 0 0 0 1.5px #3a4270, 0 30px 44px -26px rgba(26, 32, 68, 0.5); }
.telefono .app-movil__pantalla { height: auto; background: #ffffff; }
.telefono .app-movil__estado { background: #ffffff; padding-top: 16px; }
/* Capturas de la app que traen su propia barra de estado (hora y batería, p. ej. inducciones): sin isla
   encima y con un margen arriba para que la esquina redondeada de la pantalla no la recorte. */
.telefono--con-barra .app-movil__isla { display: none; }
.telefono--con-barra .app-movil__pantalla { padding-top: 14px; background: #ffffff; }
.telefono__img { width: 100%; height: auto; }
.telefono .captura__leyenda { justify-content: center; text-align: center; max-width: 280px; }
.telefono .captura__real--pie { display: inline; }

/* ================= Galería de cada estación ================= */
.galeria { margin-top: clamp(32px, 3.4vw, 48px); }
.galeria > .tira { margin: 0 0 clamp(30px, 3vw, 44px); }
/* Galería de una estación con el ancho nuevo: la principal a dos tercios o tres cuartos, la app del
   prestador (o las secundarias) a la derecha y el resto debajo. Sin JS se ven todas, en orden. */
.galeria-est { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); align-items: start; margin-top: clamp(40px, 4.4vw, 72px); }
.galeria-est__app { display: grid; justify-items: center; }
@media (min-width: 960px) {
  .galeria-est { column-gap: var(--g); }
  .galeria-est > .galeria__escenario { display: contents; }
  .galeria-est--app { --app: clamp(280px, 22%, 340px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--app); }
  .galeria-est--app > .galeria__escenario > :first-child { grid-column: 1 / 3; grid-row: 1; }
  .galeria-est--app > .galeria__escenario > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .galeria-est--app > .galeria__escenario > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .galeria-est--una > .galeria__escenario > :nth-child(2) { grid-column: 1 / 3; }
  .galeria-est--app > .galeria-est__app { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .galeria-est--lado { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .galeria-est--lado > .galeria__escenario > :first-child { grid-column: 1; grid-row: 1 / 3; }
  .galeria-est--lado > .galeria__escenario > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .galeria-est--lado > .galeria__escenario > :nth-child(3) { grid-column: 2; grid-row: 2; }
}
.galeria__escenario { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); align-items: start; }
.js .galeria__escenario > [data-slot="oculta"] { display: none; }
.galeria__escenario > [data-slot="secundaria"] { cursor: pointer; }
.galeria__escenario > [data-slot="secundaria"] .captura__marco,
.galeria__escenario > [data-slot="secundaria"].diseno { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.2s var(--ease); }
.galeria__escenario > [data-slot="secundaria"]:hover .captura__marco { transform: translateY(-3px); box-shadow: var(--sombra-ventana), 0 0 0 3px color-mix(in srgb, var(--l) 55%, transparent); }
.galeria__escenario > [data-slot="secundaria"].diseno:hover { border-color: var(--l); }
.galeria__ampliar {
  position: absolute; z-index: 4; top: 6px; right: 8px; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #424a6e;
}
.galeria__ampliar::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 1px #d8deea, 0 4px 10px -6px rgba(26, 32, 68, 0.5); transition: transform 0.2s var(--ease); }
.galeria__ampliar .icono { position: relative; width: 16px; height: 16px; }
.galeria__ampliar[hidden] { display: none; }
.galeria__escenario > :not(:first-child) .captura__barra, .galeria__escenario > :not(:first-child) .diseno__rotulo { padding-right: 52px; }
.galeria__escenario > :not(:first-child) .captura__barra .captura__real { display: none; }
.galeria__escenario > :not(:first-child) .captura__real--pie { display: inline; }
.galeria__escenario > :not(:first-child) .captura__url { flex: 0 1 auto; }
[data-slot="secundaria"]:hover .galeria__ampliar::before { transform: scale(1.1); }
.galeria__ampliar:focus-visible { outline-offset: 0; border-radius: 50%; }
.diseno .galeria__ampliar { top: 2px; right: 0; }
.movimiento-listo .galeria__escenario > .is-entrando .captura__marco,
.movimiento-listo .galeria__escenario > .diseno.is-entrando { animation: barre-baja-r 0.7s var(--ease) both; }
@keyframes barre-baja-r { from { clip-path: inset(0 0 100% 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
.movimiento-listo .galeria__escenario > .is-asoma { animation: aparece 0.5s var(--ease) both; }

/* Mapa de tira: las cuatro capacidades como estaciones, cada una lleva a su captura */
.tira { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; padding-top: 30px; }
.tira::before { content: ""; position: absolute; top: 9px; left: 12px; right: 12px; height: 8px; border-radius: 4px; background: var(--l); }
.tira--sense::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='8'%3E%3Crect width='16' height='8' fill='%230ea5c9'/%3E%3C/svg%3E") left center / 27px 8px repeat-x; border-radius: 0; }
html[data-theme="dark"] .tira--sense::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='8'%3E%3Crect width='16' height='8' fill='%233fc6e6'/%3E%3C/svg%3E"); }
.tira__estacion { position: relative; padding-right: 10px; }
.tira__estacion a, .tira__estacion > span { display: block; padding-top: 6px; font: 650 0.94rem/1.32 var(--f-display); font-stretch: 102%; text-decoration: none; }
.tira__estacion a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tira__estacion::before {
  content: ""; position: absolute; top: -30px; left: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--estacion-relleno); box-shadow: inset 0 0 0 4px var(--estacion-trazo);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.tira__estacion.is-actual::before { background: var(--estacion-trazo); transform: scale(1.08); }
.tira__estacion.is-actual a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.tira__estacion:last-child { text-align: right; padding-right: 0; }
.tira__estacion:last-child::before { left: auto; right: 4px; }
.tira__estacion:nth-child(2)::before, .tira__estacion:nth-child(3)::before { left: calc(50% - 13px); }
.tira__estacion:nth-child(2), .tira__estacion:nth-child(3) { text-align: center; padding-inline: 6px; }
.movimiento-listo .tira:not(.is-visible)::before { clip-path: inset(0 100% 0 0 round 4px); }
.movimiento-listo .tira::before { transition: clip-path 0.9s var(--ease); }
.movimiento-listo .tira:not(.is-visible) .tira__estacion::before { transform: scale(0.3); opacity: 0; }
.movimiento-listo .tira .tira__estacion::before { transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), background-color 0.3s var(--ease); transition-delay: calc(0.15s + var(--k, 0) * 0.1s), calc(0.15s + var(--k, 0) * 0.1s), 0s; }

/* ================= Estaciones de las líneas ================= */
.lineas__intro { padding-block: var(--esp-seccion) calc(var(--esp-seccion) * 0.25); --tramo-pt: var(--esp-seccion); --tramo-pb: calc(var(--esp-seccion) * 0.25); }
.lineas__intro .seccion__cabeza { margin-bottom: 0; }
.estacion-linea { position: relative; padding-block: var(--esp-estacion); --tramo-pt: var(--esp-estacion); --tramo-pb: var(--esp-estacion); }
.estacion-linea--alterna { background: var(--fondo-2); border-block: 1px solid var(--borde); }
.estacion-linea__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: clamp(26px, 3vw, 40px); }
.estacion-linea__cabeza .estado { font-size: 0.86rem; }
.estacion-linea__capa { font: 650 0.76rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.estacion-linea__intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.estacion-linea__intro--texto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.estacion-linea--diseno .estacion-linea__intro { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; }
.estacion-linea__frase { font: 600 clamp(1.5rem, 1.1rem + 1.1vw, 2.15rem)/1.22 var(--f-display); font-stretch: 102%; letter-spacing: -0.016em; text-wrap: balance; max-width: 34rem; }
.estacion-linea__actor { margin-top: 12px; font-size: 0.95rem; color: var(--tinta-3); }
.estacion-linea__promesa { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--borde); font-size: clamp(1.2rem, 1.06rem + 0.5vw, 1.5rem); line-height: 1.3; font-weight: 700; letter-spacing: -0.012em; max-width: 36rem; }
/* En la home, cada capítulo abre con la promesa (la frase del cliente ya protagonizó la apertura) */
.estacion-linea__texto > .estacion-linea__promesa:first-child { margin-top: 0; padding-top: 0; border-top: 0; font: 650 clamp(1.6rem, 1.05rem + 1.3vw, 2.4rem)/1.16 var(--f-display); font-stretch: 102%; letter-spacing: -0.018em; max-width: 24ch; text-wrap: balance; }
.estacion-linea__cita { margin-top: 16px; max-width: 46ch; font: 500 0.98rem/1.5 var(--f-texto); color: var(--tinta-2); }
.estacion-linea__autor { display: block; margin-top: 2px; color: var(--tinta-3); }
.estacion-linea__cita + .estacion-linea__parrafo { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--borde); }
.estacion-linea__intro--texto .estacion-linea__promesa { margin-top: 6px; padding-top: 0; border-top: 0; }
.estacion-linea__parrafo { margin-top: 12px; color: var(--tinta-2); max-width: 40rem; }
.estacion-linea__texto > .enlace-flecha { margin-top: 18px; }
.estacion-linea__texto > .tira { margin-top: 30px; }
.estacion-linea__lado { display: grid; justify-items: center; min-width: 0; }
.estacion-linea--diseno .estacion-linea__lado { justify-items: stretch; }

/* Cada capítulo abre con su estación de origen: la foto del cliente en su terreno a la izquierda
   (5 de 12 columnas, 4:5, con la banda de su línea) y el texto a la derecha; la tira de
   capacidades cierra la columna de texto a la altura del pie de la foto. */
.estacion-linea__origen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.estacion-linea__cuerpo { display: grid; align-content: start; gap: 34px; min-width: 0; }
.estacion-linea__cuerpo > .tira { margin-top: 0; }
.origen-foto { position: relative; margin: 0; min-width: 0; aspect-ratio: 1 / 1; }
.origen-foto__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fx, 50%) 62%; border-radius: 4px; background: var(--superficie-2); }
.origen-foto::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 0 0 4px 4px; background: var(--l);
}
.origen-foto[data-linea="sense"]::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='10'%3E%3Crect width='16' height='10' fill='%230ea5c9'/%3E%3C/svg%3E") left center / 27px 100% repeat-x;
}
html[data-theme="dark"] .origen-foto[data-linea="sense"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='10'%3E%3Crect width='16' height='10' fill='%233fc6e6'/%3E%3C/svg%3E");
}
/* Entra una sola vez con un recorte de arriba abajo, en el sentido de su línea. El recorte va en
   la imagen y no en la figura: IntersectionObserver respeta el clip-path del propio elemento
   observado, y una figura recortada por completo nunca «entra en vista». */
.movimiento-listo .origen-foto[data-revela] { opacity: 1; transform: none; }
.movimiento-listo .origen-foto[data-revela] .origen-foto__img { clip-path: inset(0 0 100% 0 round 4px); transition: clip-path 1s var(--ease); }
.movimiento-listo .origen-foto[data-revela].is-visible .origen-foto__img { clip-path: inset(0 0 0 0 round 4px); }
.movimiento-listo .origen-foto[data-revela]::after { opacity: 0; transition: opacity 0.4s var(--ease) 0.75s; }
.movimiento-listo .origen-foto[data-revela].is-visible::after { opacity: 1; }
/* Líneas sin módulo en producción: la foto y su tira de capacidades a la izquierda, el texto y la
   vista de diseño (punteada y rotulada) a la derecha, a un ancho en que el kit no se deforma */
.estacion-linea__origen--diseno > .tira { order: 2; margin-top: 0; }
.estacion-linea__origen--diseno .estacion-linea__vista { order: 3; }
@media (max-width: 999px) {
  .estacion-linea__origen--diseno > .estacion-linea__cuerpo { display: contents; }
  .estacion-linea__origen--diseno .estacion-linea__texto { order: 1; }
}
.estacion-linea__componentes { font-size: 0.95rem; }
@media (min-width: 1000px) {
  .estacion-linea__origen { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: stretch; }
  .estacion-linea__origen > .origen-foto { grid-column: 1 / span 5; aspect-ratio: 4 / 5; max-height: 720px; }
  .origen-foto__img { object-position: var(--fx, 50%) 50%; }
  .origen-foto::after { height: 10px; }
  .estacion-linea__cuerpo { grid-column: 6 / -1; align-content: space-between; padding-left: clamp(8px, 2.4vw, 48px); padding-block: 4px; }
  /* Capítulos con producto: la columna de texto termina con la tira, justo bajo el enlace, y la foto
     se estira a ese mismo alto (recorte más apaisado, con su encuadre vertical --fy-ancho): sin aire
     muerto entre el enlace y la tira */
  .estacion-linea__origen:not(.estacion-linea__origen--diseno) > .origen-foto { aspect-ratio: auto; max-height: none; min-height: 440px; }
  .estacion-linea__origen:not(.estacion-linea__origen--diseno) .origen-foto__img { position: absolute; inset: 0; object-position: 50% var(--fy-ancho, 50%); }
  .estacion-linea__origen:not(.estacion-linea__origen--diseno) > .estacion-linea__cuerpo { align-content: start; gap: 40px; }
  .estacion-linea__origen--diseno { row-gap: clamp(32px, 3vw, 48px); align-items: start; }
  .estacion-linea__origen--diseno > .origen-foto { grid-row: 1; }
  .estacion-linea__origen--diseno > .tira { grid-column: 1 / span 5; grid-row: 2; }
  .estacion-linea__origen--diseno > .estacion-linea__cuerpo { grid-row: 1 / span 2; align-content: start; gap: clamp(32px, 3vw, 48px); padding-block: 0; }
}

/* ================= La operación en datos: tablero de andén ================= */
.datos { position: relative; background: var(--tablero); color: var(--tablero-tinta); padding-block: var(--esp-seccion); }
html[data-theme="dark"] .datos { border-block: 1px solid var(--tablero-borde); }
.datos__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 56px; align-items: end; padding-bottom: clamp(26px, 3vw, 40px); border-bottom: 1px solid var(--tablero-borde); }
.datos__titulo { color: #ffffff; font-size: clamp(1.9rem, 1.1rem + 2vw, 2.9rem); line-height: 1.34; font-weight: 700; letter-spacing: -0.02em; max-width: 50rem; }
.datos__periodo { display: flex; align-items: baseline; gap: 8px; font: 600 0.84rem/1 var(--f-texto); color: var(--tablero-tinta-2); white-space: nowrap; }
.datos__periodo b { font: 700 1.5rem/1 var(--f-display); font-stretch: 100%; color: var(--ambar); letter-spacing: 0.02em; }
/* Escala del despliegue bajo el titular de los datos, con su propia fuente */
.datos__escala { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 0; }
.datos__escala > span:first-child { font: 650 clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem)/1.4 var(--f-display); font-stretch: 102%; color: #ffffff; }
.datos__filas { display: grid; }
.datos__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--tablero-borde); }
.datos__fila dt { display: flex; align-items: center; gap: 20px; font: 600 clamp(1.08rem, 1rem + 0.35vw, 1.3rem)/1.4 var(--f-display); font-stretch: 102%; letter-spacing: -0.006em; color: #ffffff; }
.datos__lineas { display: flex; gap: 6px; flex: none; width: 62px; }
.datos__fila .insignia--sense { color: #ffffff; border-color: var(--c-sense); }
.datos__fila dd { justify-self: end; }
.datos__fuente { margin-top: 22px; max-width: 46rem; font-size: 0.88rem; line-height: 1.5; color: var(--tablero-tinta-2); }

/* Celdas de flap: un carácter por celda, con la ranura central del flap real */
.flap { display: inline-flex; align-items: center; gap: 4px; }
.flap__c {
  position: relative; display: inline-grid; place-items: center;
  width: 0.78em; height: 1.18em; border-radius: 5px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--tablero-celda) 88%, #fff) 0 50%, var(--tablero-celda) 50% 100%);
  font: 700 clamp(1.7rem, 1.2rem + 1.2vw, 2.45rem)/1 var(--f-display); font-stretch: 100%;
  color: #fff; font-variant-numeric: tabular-nums; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 5px -1px rgba(0, 0, 0, 0.38);
}
.flap__c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(6, 9, 28, 0.8); }
.flap__c--punto { width: 0.38em; background: none; box-shadow: none; }
.flap__c--punto::after { display: none; }
.flap__c.is-gira { animation: gira 0.07s var(--ease); }
@keyframes gira { from { transform: perspective(200px) rotateX(-70deg); filter: brightness(0.7); } }
.flap__flecha { width: 0.9em; height: 0.9em; color: var(--ambar); margin-inline: 2px; font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.45rem); }
.flap--frase { gap: 3px; margin-inline: 0.06em; vertical-align: -0.16em; }
.flap--frase .flap__c { font-size: 0.9em; border-radius: 4px; }
.flap--frase .flap__c--punto { width: 0.3em; }
.flap--fila .flap__c { font-size: clamp(1.45rem, 1.1rem + 0.9vw, 2rem); }
.flap--fila .flap__c--punto { width: auto; min-width: 0.5em; padding-inline: 0.04em; color: var(--ambar); }
.flap--letras .flap__c { width: 0.72em; font-size: clamp(1.3rem, 1rem + 0.9vw, 1.9rem); }
/* La celda del espacio no toma el ancho de una letra (la regla de arriba le ganaba a .flap__c--punto) */
.flap--letras .flap__c--punto { width: 0.38em; }

/* Una línea secundaria: el caso de un cliente, lejos de las cifras de la operación */
.caso-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: clamp(28px, 3vw, 44px); padding-top: 22px; border-top: 1px solid var(--borde); color: var(--tinta-2); }
.caso-linea__texto { max-width: 44rem; }

/* Legibilidad de las pantallas del kit dentro de estas páginas: ningún texto funcional bajo 11 px
   (rótulos de KPI, encabezados de tabla, ficha y barra de la app). Solo cambia el tamaño. */
.pantalla .kpi__rotulo, .pantalla .tabla th, .pantalla .ficha dt, .app-movil .app-movil__barra span, .pantalla .grafico .eje-texto { font-size: 11px; }
.pantalla tbody tr { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background-color 0.15s var(--ease); }

/* ================= Cómo funciona ================= */
.recorrido-red { position: relative; }
.recorrido-red__svg { width: 100%; height: auto; overflow: visible; }
.recorrido-red__svg :is(path, circle, rect) { vector-effect: non-scaling-stroke; }
.recorrido-red__base { fill: none; stroke: var(--borde-fuerte); stroke-width: 10; stroke-linecap: round; }
.recorrido-red__avance { fill: none; stroke: var(--tinta); stroke-width: 10; stroke-linecap: round; }
.recorrido-red__rama { fill: none; stroke: var(--l); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.recorrido-red__estacion { fill: var(--estacion-relleno); stroke: var(--estacion-trazo); stroke-width: 4; }
.recorrido-red__combinacion { fill: var(--estacion-relleno); stroke: var(--estacion-trazo); stroke-width: 4; }
.recorrido-red__prestador circle:first-child { fill: var(--tinta); stroke: var(--estacion-relleno); stroke-width: 3; }
.recorrido-red__copia { fill: var(--estacion-relleno); stroke: var(--l); stroke-width: 3.5; }
.recorrido-red__insignia circle { fill: var(--lb); }
.recorrido-red__insignia text { fill: var(--lt); font: 700 13px var(--f-display); text-anchor: middle; dominant-baseline: central; }
.recorrido-red__etiqueta { font: 650 13px var(--f-display); fill: var(--tinta-3); letter-spacing: 0.07em; text-transform: uppercase; }
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 10px; }
.pasos li { text-align: center; padding-inline: 8px; }
.pasos__n { display: block; font: 700 0.8rem/1 var(--f-display); letter-spacing: 0.08em; color: var(--tinta-3); margin-bottom: 10px; }
.pasos h3 { font-size: 1.28rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.pasos p { margin-top: 6px; color: var(--tinta-2); font-size: 0.98rem; }
.pasos__ramas { display: none; }
.ventanas { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(56px, 6vw, 88px); padding-top: 48px; }
.ventanas::before { content: ""; position: absolute; z-index: -1; top: 9px; left: calc((100% - 48px) / 6); right: calc((100% - 48px) / 6); height: 8px; border-radius: 4px; background: var(--estacion-trazo); }
.ventana { position: relative; }
.ventana::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -48px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--estacion-relleno); box-shadow: inset 0 0 0 4px var(--estacion-trazo); }
.ventana::after { content: ""; position: absolute; left: 50%; top: -22px; width: 6px; height: 22px; margin-left: -3px; background: var(--estacion-trazo); }
.ventana__marco { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; background: var(--superficie-2); border: 3px solid var(--estacion-trazo); }
.ventana__marco video, .ventana__marco img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.ventana:hover .ventana__marco video { transform: scale(1.02); }

/* Letrero de salida: el rótulo de cada foto */
.salida {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px 5px 8px;
  border-radius: 6px; background: var(--ambar); color: #1a2044;
  font: 700 0.78rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.05em; text-transform: uppercase;
}
.salida .icono { width: 16px; height: 16px; }

/* ================= Contra qué competimos ================= */
.transbordo { width: 100%; }
.transbordo caption { text-align: left; font: 600 0.95rem/1.4 var(--f-texto); color: var(--tinta-2); padding-bottom: 18px; }
.transbordo thead th { text-align: left; font: 650 0.76rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); padding: 0 0 12px; }
.transbordo tbody tr { border-top: 1px solid var(--borde); transition: background-color 0.2s var(--ease); }
.transbordo tbody tr:last-child { border-bottom: 1px solid var(--borde); }
.transbordo tbody tr:hover { background: color-mix(in srgb, var(--l) 5%, transparent); }
.transbordo th[scope="row"] { width: 22%; padding: 26px 16px 22px 0; text-align: left; vertical-align: top; }
.transbordo__linea { display: inline-flex; align-items: center; gap: 12px; font: 700 1.12rem/1.1 var(--f-display); font-stretch: 104%; }
.transbordo td { position: relative; width: 39%; padding: 40px 28px 22px 0; vertical-align: top; font-size: 1.06rem; line-height: 1.45; }
.transbordo td::before { content: ""; position: absolute; left: 0; right: 28px; top: 22px; height: 0; }
.transbordo .hoy { color: var(--tinta-3); }
.transbordo .hoy::before { border-top: 3px dashed var(--borde-fuerte); }
.transbordo .con { color: var(--tinta); font-weight: 600; }
.transbordo .con::before { height: 8px; top: 19px; border-radius: 4px; background: var(--l); transform-origin: left; }
.transbordo .con::after { content: ""; position: absolute; left: -12px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--estacion-relleno); box-shadow: inset 0 0 0 4px var(--estacion-trazo); }
.movimiento-listo .transbordo:not(.is-visible) .con::before { transform: scaleX(0); }
.movimiento-listo .transbordo .con::before { transition: transform 0.9s var(--ease); transition-delay: calc(var(--k, 0) * 0.09s + 0.15s); }

/* ================= Video ================= */
.videos__grid { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
/* Con el contenedor ancho, el reel vertical queda a su tamaño de teléfono y los dos tutoriales van
   lado a lado; la línea del caso cierra la columna */
@media (min-width: 1200px) {
  .videos__grid { grid-template-columns: clamp(250px, 19vw, 330px) minmax(0, 1fr); align-items: stretch; }
  .videos__lado { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: space-between; column-gap: clamp(20px, 2vw, 36px); }
  .videos__lado > .caso-linea { grid-column: 1 / -1; }
}
.videos__cabeza { margin-bottom: clamp(32px, 4vw, 52px); display: flex; align-items: center; gap: 14px; }
.videos__lado { display: grid; gap: clamp(20px, 3vw, 36px); align-content: space-between; }
.video { display: grid; align-content: start; }
.video__pantalla { background: var(--tablero); color: var(--tablero-tinta); border-radius: 16px; padding: 10px 10px 18px; box-shadow: var(--sombra-alta); }
.video__cabeza { display: flex; align-items: center; gap: 10px; padding: 6px 6px 12px; }
.video__linea { font: 700 0.95rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.01em; }
.video__ficha { margin-left: auto; font: 700 0.95rem/1 var(--f-display); font-stretch: 100%; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--ambar); }
.video__marco { position: relative; border-radius: 10px; overflow: hidden; background: #0f1430; }
.video--vertical .video__marco { aspect-ratio: 9 / 16; }
.video--horizontal .video__marco { aspect-ratio: 16 / 9; }
.video__titulo { margin: 14px 6px 0; color: #ffffff; font: 700 1.15rem/1.3 var(--f-display); font-stretch: 104%; letter-spacing: -0.005em; }
.insignia--ayuda { background: transparent; color: #ffffff; border: 2px solid #ffffff; }
.insignia--ayuda .icono { width: 14px; height: 14px; }
/* Portada del video: el cuadro del video bajo un velo navy, el botón «Ver video» al centro (con un
   pulso lento que se detiene con movimiento reducido) y, en los tutoriales, sus cinco pasos. */
.fachada { position: absolute; inset: 0; display: block; overflow: hidden; color: #fff; container-type: inline-size; }
.fachada img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.4s var(--ease); }
.fachada::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 20, 48, 0.2) 0%, rgba(15, 20, 48, 0.34) 48%, rgba(15, 20, 48, 0.84) 100%);
}
.fachada:hover img, .fachada:focus-visible img { transform: scale(1.045); filter: saturate(1.06) brightness(1.04); }
.fachada__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px;
  background: rgba(15, 20, 48, 0.52); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  font: 650 0.98rem/1 var(--f-display); font-stretch: 104%; white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease);
}
.fachada__play i { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--navy); }
.fachada__play i::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); opacity: 0; }
.movimiento-listo .fachada__play i::before { animation: fachada-pulso 2.8s var(--ease) infinite; }
@keyframes fachada-pulso { 0% { transform: scale(0.86); opacity: 0.9; } 70%, 100% { transform: scale(1.42); opacity: 0; } }
.fachada__play .icono { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 3px; }
.fachada:hover .fachada__play, .fachada:focus-visible .fachada__play { transform: translate(-50%, -50%) scale(1.05); background: rgba(15, 20, 48, 0.66); }
.fachada:focus-visible { outline-offset: -6px; border-radius: 14px; }
.fachada__pasos { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.fachada__pasos li {
  counter-increment: paso; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px;
  background: rgba(15, 20, 48, 0.58); color: #e8ebf7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 0.74rem/1 var(--f-display); font-stretch: 104%;
}
.fachada__pasos li::before { content: counter(paso); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #0f1430; font-size: 0.68rem; font-weight: 700; }
/* En el reel vertical el botón va al pie, para no tapar la frase con que abre el video */
.video--vertical .fachada__play { top: auto; bottom: 7%; transform: translateX(-50%); }
.video--vertical .fachada:hover .fachada__play, .video--vertical .fachada:focus-visible .fachada__play { transform: translateX(-50%) scale(1.05); }
@container (max-width: 400px) { .fachada__pasos { display: none; } }
@container (max-width: 240px) { .fachada__ver { display: none; } .fachada__play { padding: 8px; } }

/* Vista ampliada (el <template id="visor-video"> del pie): el marco crece desde la tarjeta hasta el
   centro y vuelve a ella al cerrar (comun.js); el fondo es el navy del sitio con desenfoque. */
html.visor-abierto { overflow: hidden; }
.visor { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.visor::backdrop { background: transparent; }
.visor__fondo { position: absolute; inset: 0; background: rgba(10, 14, 36, 0.74); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.visor__panel { --pad: clamp(12px, 3vw, 32px); position: relative; z-index: 1; height: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; padding: var(--pad); pointer-events: none; }
.visor--horizontal { --ar: 16 / 9; --ancho: min(1180px, calc(100vw - 2 * var(--pad, 24px)), calc((100svh - 132px) * 16 / 9)); }
.visor--vertical { --ar: 9 / 16; --ancho: min(calc(100vw - 2 * var(--pad, 24px)), calc((100svh - 132px) * 9 / 16)); }
.visor__barra, .visor__marco { width: var(--ancho); pointer-events: auto; }
.visor__barra { display: flex; align-items: center; gap: 16px; }
.visor__titulo { flex: 1; min-width: 0; margin: 0; color: #fff; font: 700 clamp(1rem, 1.6vw, 1.25rem)/1.3 var(--f-display); font-stretch: 104%; }
.visor__cerrar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.visor__cerrar:hover { background: rgba(255, 255, 255, 0.26); transform: scale(1.06); }
.visor__cerrar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.visor__cerrar .icono { width: 20px; height: 20px; }
.visor__marco { position: relative; aspect-ratio: var(--ar); border-radius: 14px; overflow: hidden; background: #0f1430; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08); transform-origin: center; will-change: transform; }
.visor__marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0f1430; }

/* ================= Cierre ================= */
.cierre { position: relative; overflow: hidden; background: var(--cierre); color: #fff; padding-block: var(--esp-seccion); }
.cierre h2, .cierre h3 { color: #fff; }
.cierre__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cierre__grid > :last-child { align-self: center; }
.cierre h2 { margin-top: 0; font-size: clamp(2.1rem, 1.2rem + 2.3vw, 3.4rem); line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; }
.cierre__texto { margin-top: 20px; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem); line-height: 1.6; color: #ccd2e8; max-width: 34rem; }
.cierre .boton { margin-top: 32px; }
.etapas { position: relative; display: grid; gap: 0; }
.etapas::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 8px; border-radius: 4px; background: #f3f5fb; }
.etapas li { position: relative; padding: 4px 0 30px 62px; }
.etapas li:last-child { padding-bottom: 4px; }
.etapas li::before { content: ""; position: absolute; left: 4px; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--cierre); box-shadow: inset 0 0 0 4px #fff; }
.etapas li:last-child::before { width: 38px; height: 38px; left: 0; top: -2px; box-shadow: none; background: radial-gradient(circle, #fff 0 9px, var(--cierre) 9.5px 14px, #fff 14.5px); }
.etapas strong { display: block; font: 700 1.3rem/1.3 var(--f-display); font-stretch: 104%; }
.etapas p { margin-top: 6px; color: #ccd2e8; }

/* Preguntas del cierre (líneas) */
.preguntas { margin-top: 0; }
.preguntas__titulo { font: 650 0.78rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: #ccd2e8; margin-bottom: 18px; }

/* ================= Pie ================= */
.pie { background: var(--pie); color: #ccd2e8; padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid rgba(220, 226, 255, 0.1); }
.pie a { color: #eef1fa; text-decoration: none; }
.pie a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.pie__grid { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.pie__marca img.pie__logo { width: 150px; }
.pie__lema { margin-top: 16px; font: 600 1.06rem/1.4 var(--f-display); font-stretch: 102%; color: #fff; max-width: 20rem; }
.pie__respaldo { margin-top: 24px; display: grid; gap: 10px; font-size: 0.88rem; }
.pie__respaldo img { width: 96px; margin-bottom: 4px; }
.pie__titulo { font: 650 0.74rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: #aab1d1; margin-bottom: 16px; }
.pie__lista { display: grid; gap: 2px; font-size: 0.94rem; }
.pie__lista a, .pie__lista button { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; }
.pie__lista .insignia { width: 24px; height: 24px; font-size: 0.72rem; }
.pie__lista .insignia--sense { color: #fff; }
.pie__lista .pie__sep { border-top: 2px dashed rgba(220, 226, 255, 0.22); margin: 8px 0 6px; width: 80%; }
.pie__boton { border: 0; background: none; padding: 0; color: #eef1fa; text-align: left; font-size: 0.94rem; }
.pie__boton:hover { text-decoration: underline; }
.pie__redes { display: flex; gap: 8px; margin-top: 14px; }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(220, 226, 255, 0.18); transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease); }
.pie__redes a:hover { border-color: rgba(220, 226, 255, 0.5); background: rgba(255, 255, 255, 0.05); }
.pie__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-block: 24px 32px; border-top: 1px solid rgba(220, 226, 255, 0.12); font-size: 0.84rem; color: #aab1d1; }
.pie :focus-visible { outline-color: #5fd4bf; }

/* ================= Cookies ================= */
.cookies {
  position: fixed; left: 16px; bottom: 16px; z-index: 50; width: min(400px, calc(100% - 32px));
  padding: 18px 18px 16px; border-radius: 14px;
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}
.cookies:not([hidden]) { animation: entra-45 0.6s var(--ease) 1.2s both; }
.cookies.is-reabierto:not([hidden]) { animation-delay: 0s; }
.cookies__titulo { font: 700 1rem/1.2 var(--f-display); font-stretch: 104%; }
.cookies p + p { margin-top: 6px; font-size: 0.9rem; line-height: 1.5; color: var(--tinta-2); }
.cookies__botones { display: flex; gap: 10px; margin-top: 14px; }
.cookies__botones .boton { flex: 1; min-height: 44px; padding: 0 14px; font-size: 0.88rem; }

/* ================= Workforce ================= */
/* La apertura es su estación de origen a gran escala: el H1 y la ficha a la izquierda, la foto de
   la coordinadora a la derecha (5 de 12 columnas) y, debajo, la pantalla de andén fija en Turnos.
   De la banda de la foto baja la línea 01 hasta la banda del andén. */
.apertura-linea { position: relative; overflow: hidden; padding-block: clamp(28px, 4vw, 60px) clamp(56px, 6vw, 96px); --bajada-wf: clamp(44px, 4.4vw, 72px); }
.apertura-linea__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.apertura-linea__texto { order: 0; }
.apertura-linea > .contenedor .ficha-linea { order: 1; }
.origen-foto--apertura { order: 2; margin-bottom: var(--bajada-wf); }
.apertura-linea__anden { order: 3; }
.apertura-linea h1 { margin-top: 0; font-size: clamp(2.3rem, 1.25rem + 2.7vw, 4.1rem); line-height: 1.03; font-weight: 700; letter-spacing: -0.028em; max-width: 13em; }
.apertura-linea .apertura__bajada { margin-top: 22px; max-width: 34rem; }
.apertura-linea__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.ficha-linea { display: grid; grid-template-columns: auto 1fr; margin-top: 34px; border-top: 1px solid var(--borde); max-width: 34rem; }
.apertura-linea .ficha-linea { margin-top: 0; }
.ficha-linea > div { display: contents; }
.ficha-linea dt, .ficha-linea dd { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.ficha-linea dt { padding-right: 28px; font: 650 0.76rem/1.6 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.ficha-linea dd { font-weight: 600; text-wrap: pretty; }
.ficha-linea__linea { display: flex; align-items: center; gap: 10px; }
/* La foto de origen, con su banda y la línea que baja al andén */
.origen-foto--apertura { aspect-ratio: 4 / 5; }
.origen-foto--apertura::before {
  content: ""; position: absolute; z-index: 0; left: calc(50% - 5px); top: 100%; width: 10px;
  height: var(--bajada-larga, calc(var(--bajada-wf) - 6px)); background: var(--l);
}
.movimiento-listo .origen-foto--apertura { animation: foto-baja-wf 1s var(--ease) 0.3s backwards; }
@keyframes foto-baja-wf { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -800px 0); } }
.anden--fijo { max-width: none; margin-inline: 0; }
.anden--fijo::before { background: var(--l); }
.anden--fijo .captura__marco { border-radius: 0 0 12px 12px; }
@media (min-width: 1000px) {
  .apertura-linea__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 0; }
  .apertura-linea__texto { grid-column: 1 / span 6; grid-row: 1; align-self: end; }
  .apertura-linea > .contenedor .ficha-linea { grid-column: 1 / span 5; grid-row: 2; align-self: start; margin-top: 34px; }
  .origen-foto--apertura { grid-column: 8 / -1; grid-row: 1 / span 2; max-height: calc(100svh - var(--cab) - 110px); min-height: 460px; margin-bottom: 0; }
  .origen-foto--apertura .origen-foto__img { object-position: 60% 50%; }
  .apertura-linea__anden { grid-column: 3 / -1; grid-row: 3; margin-top: var(--bajada-wf); }
}

.tira--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tira--cinco .tira__estacion:nth-child(4) { text-align: center; padding-inline: 6px; }
.tira--cinco .tira__estacion:nth-child(4)::before { left: calc(50% - 13px); }

.partida__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cita { display: flex; gap: 18px; align-items: flex-start; }
.cita h2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem); line-height: 1.08; font-weight: 650; letter-spacing: -0.024em; }
.cita .insignia { margin-top: 0.5em; }
.partida__hoy { margin-top: 36px; padding-top: 24px; border-top: 3px dashed var(--borde-fuerte); max-width: 36rem; }
.rotulo { font: 650 0.76rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 10px; }
.partida__hoy p:last-child { font-size: 1.12rem; line-height: 1.6; color: var(--tinta-2); }
.foto-rotulada { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 680px; border: 3px solid var(--estacion-trazo); }
.foto-rotulada img { width: 100%; height: 100%; object-fit: cover; }


.costos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--borde); }
.costo { padding: 30px 28px 32px 0; }
.costo + .costo { padding-left: 28px; border-left: 1px solid var(--borde); }
.costo__corte { display: block; width: 100%; max-width: 180px; height: 26px; margin-bottom: 20px; color: var(--l); }
.costo h3 { font-size: 1.3rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.costo p { margin-top: 10px; color: var(--tinta-2); }
/* Boleto: la pregunta de calificación con su talón de línea y la perforación */
.boleto { margin-top: clamp(40px, 5vw, 64px); max-width: 60rem; filter: drop-shadow(0 10px 14px rgba(26, 32, 68, 0.12)) drop-shadow(0 1px 1px rgba(26, 32, 68, 0.1)); }
.boleto__cuerpo {
  --corte: 132px;
  display: grid; grid-template-columns: var(--corte) minmax(0, 1fr); border-radius: 14px; background: var(--superficie);
  -webkit-mask: radial-gradient(circle 12px at var(--corte) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at var(--corte) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 12px at var(--corte) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at var(--corte) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.boleto__talon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 12px; background: var(--tablero); color: #ffffff; border-radius: 14px 0 0 14px; }
.boleto__linea { font: 700 0.78rem/1 var(--f-display); font-stretch: 106%; letter-spacing: 0.07em; text-transform: uppercase; }
.boleto__texto { padding: clamp(22px, 3vw, 32px) clamp(24px, 3vw, 40px); border-left: 2px dashed var(--borde-fuerte); font: 600 clamp(1.15rem, 1rem + 0.5vw, 1.45rem)/1.4 var(--f-display); font-stretch: 102%; letter-spacing: -0.008em; }

.transbordo--linea th[scope="col"]:first-child { width: 50%; }
.transbordo--linea td { width: 50%; }

.capacidades__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.paradas { position: relative; }
.parada:not(.parada--sense):not(:nth-last-child(2))::after { content: ""; position: absolute; left: 13px; top: 18px; bottom: -18px; width: 10px; background: var(--l); z-index: -1; }
.paradas { isolation: isolate; }
.parada { position: relative; padding: 0 0 36px 64px; }
.parada::before { content: ""; position: absolute; left: 2px; top: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--estacion-relleno); box-shadow: inset 0 0 0 5px var(--estacion-trazo); }
.parada h3 { font-size: 1.32rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; padding-top: 3px; }
.parada p { margin-top: 8px; color: var(--tinta-2); max-width: 36rem; }
.parada--sense { padding-top: 28px; padding-bottom: 0; }
.parada--sense::before { top: 26px; width: 44px; height: 32px; left: -4px; border-radius: 16px; box-shadow: inset 0 0 0 5px var(--estacion-trazo); }
.parada__ramal { position: absolute; left: 13px; top: -6px; width: 10px; height: 34px; overflow: visible; }
.parada__ramal path { stroke: var(--l-sense); stroke-width: 10; stroke-dasharray: 8 6; fill: none; }
.parada--sense .enlace-flecha { margin-top: 6px; }
.parada--sense .insignia { width: 24px; height: 24px; font-size: 0.72rem; }
.movimiento-listo .paradas:not(.is-visible) .parada::after { transform: scaleY(0); }
.movimiento-listo .paradas .parada::after { transform-origin: top; transition: transform 0.5s var(--ease); }
.movimiento-listo .paradas .parada:nth-child(2)::after { transition-delay: 0.15s; }
.movimiento-listo .paradas .parada:nth-child(3)::after { transition-delay: 0.3s; }
.movimiento-listo .paradas .parada:nth-child(4)::after { transition-delay: 0.45s; }
.capacidades__app { position: sticky; top: calc(var(--cab) + 32px); display: grid; justify-items: center; gap: 12px; }

.prueba__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 18vw, 290px); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.prueba__grid .video__linea { font-size: 0.86rem; }
.tablero-wf { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--tablero); color: var(--tablero-tinta); box-shadow: var(--sombra-alta); }
html[data-theme="dark"] .tablero-wf { outline: 1px solid var(--tablero-borde); outline-offset: -1px; }
.tablero-wf__filas { flex: 1; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.tablero-wf__fila { display: grid; grid-template-columns: var(--flap-ancho, 21em) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 56px); padding: clamp(24px, 2.6vw, 40px) clamp(24px, 3vw, 48px); border-bottom: 1px solid var(--tablero-borde); }
.tablero-wf { --flap-ancho: clamp(15rem, 12rem + 9vw, 23rem); }
.tablero-wf__fila dd { order: -1; min-width: 0; }
.tablero-wf__fila dt { font: 600 clamp(1.08rem, 0.98rem + 0.4vw, 1.36rem)/1.4 var(--f-display); font-stretch: 102%; color: #ffffff; max-width: 30rem; }
.tablero-wf__fila:last-child dt { color: var(--tablero-tinta-2); }
.tablero-wf .flap__c { font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.75rem); }
.tablero-wf .flap--letras .flap__c { font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.95rem); }
.tablero-wf__fila:last-child { border-bottom: 0; }
.tablero-wf__fuente { display: block; margin-top: 10px; max-width: 34rem; font: 400 0.86rem/1.5 var(--f-texto); color: var(--tablero-tinta-2); }
.tiendas-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: clamp(44px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--borde); }
.tiendas-linea .enlace-flecha { margin-left: auto; }

.cobro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--borde); background: var(--superficie); box-shadow: var(--sombra); }
.cobro__unidad { grid-row: span 2; padding: clamp(26px, 3vw, 40px); background: var(--tablero); color: var(--tablero-tinta); }
.cobro__unidad .rotulo { color: var(--ambar); }
.cobro__unidad .cobro__valor { color: #ffffff; }
.cobro__valor { margin-top: 6px; font: 700 clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem)/1.08 var(--f-display); font-stretch: 104%; letter-spacing: -0.02em; }
.cobro__unidad p:last-child { margin-top: 16px; color: var(--tablero-tinta-2); font-size: 1.04rem; }
.cobro__celda { padding: clamp(22px, 2.6vw, 32px); }
.cobro__celda + .cobro__celda { border-top: 1px solid var(--borde); }
.cobro__celda p:last-child { color: var(--tinta-2); }
.regla { margin-top: 24px; display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--tinta-2); }
.regla::before { content: ""; flex: none; width: 36px; height: 8px; border-radius: 4px; background: var(--tinta); }

.piloto__linea { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 44px; }
.piloto__linea::before { content: ""; position: absolute; top: 12px; left: 14px; right: 14px; height: 10px; border-radius: 5px; background: var(--l); }
.piloto__linea > div { position: relative; }
.piloto__linea > div::before { content: ""; position: absolute; top: -46px; left: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--estacion-relleno); box-shadow: inset 0 0 0 5px var(--estacion-trazo); }
.piloto__linea > div:last-child::before { width: 44px; height: 44px; top: -51px; box-shadow: none; background: radial-gradient(circle, var(--estacion-trazo) 0 10px, var(--estacion-relleno) 10.5px 16px, var(--estacion-trazo) 16.5px); }
.piloto__linea dt { font: 650 0.76rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.piloto__linea dd { margin-top: 8px; font: 650 1.3rem/1.3 var(--f-display); font-stretch: 102%; letter-spacing: -0.01em; }
.piloto__nota { margin-top: 36px; max-width: 46rem; font-size: 1.08rem; color: var(--tinta-2); }

.faq { max-width: 56rem; border-top: 1px solid var(--borde); }
.faq__item { border-bottom: 1px solid var(--borde); }
.faq__boton { display: flex; width: 100%; align-items: center; gap: 18px; min-height: 76px; padding: 18px 0; border: 0; background: none; text-align: left; font: 650 clamp(1.1rem, 1rem + 0.4vw, 1.32rem)/1.3 var(--f-display); font-stretch: 102%; letter-spacing: -0.008em; }
.faq__boton:hover { color: color-mix(in srgb, var(--tinta) 80%, var(--l)); }
.faq__marca { position: relative; flex: none; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--estacion-trazo); background: var(--estacion-relleno); transition: background-color 0.25s var(--ease); }
.faq__marca::before, .faq__marca::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: var(--estacion-trazo); transition: transform 0.3s var(--ease), background-color 0.25s var(--ease); }
.faq__marca::after { transform: rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__marca { background: var(--estacion-trazo); }
.faq__boton[aria-expanded="true"] .faq__marca::before, .faq__boton[aria-expanded="true"] .faq__marca::after { background: var(--estacion-relleno); }
.faq__boton[aria-expanded="true"] .faq__marca::after { transform: rotate(0deg); }
.faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.35s var(--ease); }
.faq__panel > div { overflow: hidden; }
.faq__panel p { padding: 0 64px 26px 0; color: var(--tinta-2); font-size: 1.06rem; max-width: 46rem; }
.js .faq__panel.is-cerrado { grid-template-rows: 0fr; }
.js .faq__panel.is-cerrado > div { visibility: hidden; transition: visibility 0s 0.35s; }

.cierre .preguntas li { position: relative; padding: 4px 0 24px 62px; color: #eef1fa; font-size: 1.08rem; line-height: 1.5; }
.cierre .preguntas li:last-child { padding-bottom: 4px; }
.cierre .preguntas li::before { content: ""; position: absolute; left: 4px; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--cierre); box-shadow: inset 0 0 0 4px #fff; }
.cierre .preguntas ol { position: relative; }
.cierre .preguntas ol::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 8px; border-radius: 4px; background: var(--l, var(--l-workforce)); }


/* ================= Sense en su página de línea ================= */
/* La capa debajo de las cinco dibuja su línea discontinua (16 px de color y 11 de hueco, el ritmo de
   su línea en la home): riel, bajada de la foto al andén, banda del andén, tramo de las capacidades,
   piloto y cierre. La tabla «Hoy / Con Druppify» queda llena: ahí lo discontinuo significa «hoy». */
.pagina-linea[data-linea="sense"] {
  --l-disc-v: repeating-linear-gradient(180deg, var(--l) 0 16px, transparent 16px 27px);
  --l-disc-h: repeating-linear-gradient(90deg, var(--l) 0 16px, transparent 16px 27px);
}
.pagina-linea[data-linea="sense"] .tramo > .contenedor::before { background: repeating-linear-gradient(180deg, var(--rl) 0 16px, transparent 16px 27px); }
.origen-foto--apertura[data-linea="sense"]::before { background: repeating-linear-gradient(180deg, var(--l) 0 16px, transparent 16px 27px); }
.anden--fijo[data-linea="sense"]::before { background: repeating-linear-gradient(90deg, var(--l) 0 16px, transparent 16px 27px); }
.pagina-linea[data-linea="sense"] .piloto__linea::before { background: var(--l-disc-h); border-radius: 0; }
.pagina-linea[data-linea="sense"] .cierre .preguntas ol::before { background: repeating-linear-gradient(180deg, var(--lc) 0 16px, transparent 16px 27px); border-radius: 0; }
/* En Sense la sexta capacidad no es el ramal de Sense: el tramo discontinuo une las seis y la
   sexta es la estación terminal («Todo cae en el mismo lugar») */
.pagina-linea[data-linea="sense"] .paradas .parada:not(:last-child)::after {
  content: ""; position: absolute; z-index: -1; left: 13px; top: 18px; bottom: -18px; width: 10px; background: var(--l-disc-v);
}
.pagina-linea[data-linea="sense"] .paradas .parada:last-child { padding-bottom: 0; }
.pagina-linea[data-linea="sense"] .paradas .parada:last-child::after { content: none; }
.pagina-linea[data-linea="sense"] .paradas .parada:last-child::before {
  left: -1px; top: -1px; width: 38px; height: 38px; box-shadow: none;
  background: radial-gradient(circle, var(--estacion-trazo) 0 8px, var(--estacion-relleno) 8.5px 13px, var(--estacion-trazo) 13.5px);
}
.movimiento-listo .pagina-linea[data-linea="sense"] .paradas .parada:nth-child(5)::after { transition-delay: 0.6s; }
@media (max-width: 719px) {
  .pagina-linea[data-linea="sense"] .piloto__linea::before { background: var(--l-disc-v); }
}
/* La insignia discontinua de Sense sobre mobiliario navy (talón del boleto): tinta clara, en los dos temas */
.boleto__talon .insignia--sense { color: #ffffff; border-color: var(--c-sense); }

/* ================= Sitio real (repo) ================= */
/* Selector de idioma real: lo escribe scripts/i18n-build.js entre los centinelas
   i18n:lang-switch-header / -drawer / -footer (un <span> para el idioma actual y <a> reales). */
.lang-switch { display: flex; align-items: center; gap: 2px; font: 600 0.82rem/1 var(--f-texto); }
.lang-switch__current, .lang-switch__link { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 8px; color: var(--tinta-3); text-decoration: none; }
.lang-switch__link:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.lang-switch__current { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--tinta); border-radius: 0; }
.lang-switch--footer .lang-switch__link, .lang-switch--footer .lang-switch__current { color: #aab1d1; }
.lang-switch--footer .lang-switch__current { color: #ffffff; box-shadow: inset 0 -2px 0 #ffffff; }
.lang-switch--footer .lang-switch__link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.cajon__pie .lang-switch { margin-right: auto; }

/* Textos que el JS alterna: van en el HTML (se traducen) y el CSS muestra el que corresponde */
.pausa__reproducir, .pausa[aria-pressed="true"] .pausa__pausar { display: none; }
.pausa[aria-pressed="true"] .pausa__reproducir { display: inline; }
html[data-theme="dark"] .tema__a-oscuro, html:not([data-theme="dark"]) .tema__a-claro { display: none; }

/* La frase del cliente va en <q>: las comillas las pone el idioma de la página */
q { quotes: "\00AB" "\00BB" "\201C" "\201D"; }
:lang(en) q, :lang(zh) q { quotes: "\201C" "\201D" "\2018" "\2019"; }

/* El titular de la home es un solo segmento de traducción: metro.js lo parte en palabras para la
   entrada (.is-partido). Mientras tanto no se ve; sin JS (html sin .js a los 3 s) queda visible. */
.js .apertura__titulo[data-renglones]:not(.is-partido) { opacity: 0; }

/* Mega menú sin JS (html sin .js): se abre con el puntero o el foco */
html:not(.js) .nav__item:hover > .mega[hidden], html:not(.js) .nav__item:focus-within > .mega[hidden] { display: block; }

/* El aviso de cookies vive dentro de <footer> (su texto cae en el bucket compartido de i18n):
   recupera la tinta y los enlaces del papel. Con el cajón o un modal abierto, no se superpone. */
.pie .cookies { color: var(--tinta); font-size: 1rem; }
.pie .cookies a { color: var(--tinta); text-decoration: underline; text-decoration-color: currentColor; }
.pie .cookies :focus-visible { outline-color: var(--foco); }
.cookies:not([hidden]) { animation-delay: 0s; }
html.sin-scroll .cookies { visibility: hidden; }

/* Chino: Inter y Archivo no cubren hanzi; la pila CJK es explícita y el tracking negativo de los
   titulares se anula (en CJK aprieta los trazos). Sin versalitas forzadas sobre hanzi. */
html[lang="zh-CN"] {
  --f-display: "Archivo", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --f-texto: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
html[lang="zh-CN"] :is(h1, h2, h3, h4, .apertura__titulo, .letrero, .boton) { letter-spacing: 0; }

/* ================= Responsivo ================= */
@media (max-width: 1179px) {
  .tramo { --riel-x: calc(var(--gutter) / 2); --riel-w: 4px; --est: 14px; }
  .parada-riel--terminal { --est: 22px; background: radial-gradient(circle, var(--rl) 0 4px, var(--estacion-relleno) 4.5px 7px, var(--rl) 7.5px); }
  .parada-riel--terminal::after { width: calc(var(--riel-x) - 11px); }
  .parada-riel::after { width: max(0px, calc(var(--riel-x) - var(--est) / 2 - 6px)); }
  .parada-riel__nombre { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; writing-mode: horizontal-tb; transform: none; }
  .nav, .cabecera__acciones > .lang-switch, .cabecera__cta { display: none; }
  .menu-movil { display: inline-flex; }
  .pie__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .ventanas { padding-top: 0; gap: 44px; margin-top: 88px; }
  .ventanas::before { top: -30px; bottom: 30px; left: 50%; right: auto; width: 6px; height: auto; margin-left: -3px; }
  .ventana::before { top: -43px; }
  .ventana::after { top: -17px; height: 17px; }
  .cierre__grid, .partida__grid, .capacidades__grid, .prueba__grid,
  .estacion-linea__intro, .estacion-linea__intro--texto, .estacion-linea--diseno .estacion-linea__intro { grid-template-columns: minmax(0, 1fr); }
  .estacion-linea__lado { justify-items: center; }
  .estacion-linea--diseno .estacion-linea__lado { justify-items: stretch; }
  .videos__grid { grid-template-columns: minmax(0, 1fr); }
  .video--vertical .video__marco { max-width: 420px; }
  .capacidades__app { position: relative; top: 0; }
  .ventanas { grid-template-columns: minmax(0, 1fr); }
  .datos__cabeza { grid-template-columns: minmax(0, 1fr); }
  .tablero-wf__filas { grid-template-rows: none; }
}
@media (max-width: 719px) {
  :root { --cab: 64px; }
  .tramo > .contenedor::before, .parada-riel, .letrero--estacion::before, .letrero--estacion::after, .estacion::before, .estacion::after { display: none; }
  body { font-size: 1rem; }
  .cabecera__acciones .tema { display: none; }
  .marca img { width: 124px; }
  .apertura__acciones .boton { flex: 1 1 100%; }
  .apertura__titulo { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 2.6rem); }
  .galeria__escenario { grid-template-columns: minmax(0, 1fr); }
  .diseno { padding: 0 6px 6px; }
  .diseno .tabla { overflow-x: auto; }
  .diseno .tabla td, .diseno .tabla th { padding-inline: 9px; }
  .estacion-linea__cabeza { gap: 10px 16px; }
  h3.letrero { font-size: 1rem; min-height: 44px; padding: 7px 14px 7px 8px; }
  .datos__fila { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .datos__fila dt { align-items: flex-start; gap: 14px; }
  .datos__fila dd { justify-self: start; padding-left: 76px; }
  .flap--fila .flap__c { font-size: 1.45rem; }
  .datos__titulo { line-height: 1.4; }
  .transbordo caption { display: block; }
  .tira { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 44px; gap: 16px; }
  .tira::before { top: 10px; bottom: 10px; left: 9px; right: auto; width: 8px; height: auto; }
  .tira--sense::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='27'%3E%3Crect width='8' height='16' fill='%230ea5c9'/%3E%3C/svg%3E") center top / 8px 27px repeat-y; }
  html[data-theme="dark"] .tira--sense::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='27'%3E%3Crect width='8' height='16' fill='%233fc6e6'/%3E%3C/svg%3E"); }
  .tira__estacion, .tira__estacion:nth-child(2), .tira__estacion:nth-child(3), .tira__estacion:last-child { text-align: left; padding: 0; }
  .tira__estacion::before, .tira__estacion:nth-child(2)::before, .tira__estacion:nth-child(3)::before, .tira__estacion:last-child::before { top: 3px; left: -44px; right: auto; }
  .tira__estacion a, .tira__estacion > span { padding-top: 4px; }
  .tira__estacion a { padding-block: 10px; margin-block: -6px; }
  .tira--cinco .tira__estacion:nth-child(4) { text-align: left; padding: 0; }
  .tira--cinco .tira__estacion:nth-child(4)::before { top: 3px; left: -44px; right: auto; }
  .movimiento-listo .tira:not(.is-visible)::before { clip-path: inset(0 0 100% 0 round 4px); }
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; padding-left: 52px; }
  .pasos::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 30px; width: 10px; border-radius: 5px; background: var(--tinta); }
  .pasos li { text-align: left; padding: 0 0 28px; position: relative; }
  .pasos li::before { content: ""; position: absolute; left: -52px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--estacion-relleno); box-shadow: inset 0 0 0 5px var(--estacion-trazo); }
  .pasos__ramas { display: flex; gap: 6px; margin-top: 12px; }
  .recorrido-red__svg { display: none; }
  .transbordo thead { display: none; }
  .transbordo, .transbordo tbody, .transbordo tr, .transbordo th, .transbordo td { display: block; width: auto; }
  .transbordo tbody tr { padding: 18px 0 8px; }
  .transbordo th[scope="row"] { padding: 0 0 6px; width: auto; }
  .transbordo td { padding: 30px 0 14px; width: auto; }
  .transbordo td::before { right: 0; top: 14px; }
  .transbordo .con::before { top: 11px; }
  .transbordo .con::after { left: -2px; top: 5px; }
  .costos { grid-template-columns: minmax(0, 1fr); }
  .costo, .costo + .costo { padding: 26px 0; border-left: 0; }
  .costo + .costo { border-top: 1px solid var(--borde); }
  .cobro__grid { grid-template-columns: minmax(0, 1fr); }
  .cobro__unidad { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--borde); }
  .piloto__linea { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 58px; gap: 26px; }
  .piloto__linea::before { top: 10px; bottom: 10px; left: 12px; right: auto; width: 10px; height: auto; }
  .piloto__linea > div::before { top: 0; left: -58px; }
  .piloto__linea > div:last-child::before { top: -4px; left: -63px; }
  .faq__panel p { padding-right: 0; }
  .pie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apertura-linea { padding-bottom: 56px; }
  .lang-switch__link, .lang-switch__current { min-width: 44px; height: 44px; }
  .pie__lista a, .pie__lista button { min-height: 44px; }
  .enlace-flecha { min-height: 48px; }
  .boleto__cuerpo { --corte: 64px; }
  .boleto__talon { padding: 18px 8px; }
  .boleto__linea { display: none; }
  .tablero-wf__fila { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 18px; }
  .cookies__botones { flex-direction: column; }
}

/* ================= Movimiento reducido ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
}