/* ==========================================================================
   LÍNEA FOLD · el sistema visual de la web nueva (19/10/2026)
   --------------------------------------------------------------------------
   David eligió «Línea Fold» con toques de «Pared de pósits» (prototipos de
   prototipos/2026-10-18, rama claude-a/web-nueva-direcciones). Lo que distingue a
   Fold es que cada cifra lleva su camino (archivo, pestaña, fila), y un plano de
   metro es justo eso: un recorrido con sus paradas. La web es blanca, la tinta
   casi negra, y cada «línea» tiene su color:
     F  cobalto  · Fold, la acción          1  rojo     · te contesta
     2  verde    · tu día                   3  naranja  · lo que vence
     4  marrón   · lo que no cuadra
   Los pósits (letra Gochi Hand, SIL OFL) son el detalle cálido: preguntas escritas
   a mano y Fold hecho de pósits. Con mesura: nunca un corcho entero.

   Reglas que no se rompen aquí:
   - Todo se ve SIN JavaScript. Las animaciones solo AÑADEN: el estado de partida de
     cada una es otra forma visible de lo mismo (un pósit aún sin pegar, el tren en la
     primera parada), nunca un hueco. lf-antes.js pone html.lf-anima antes de pintar
     y lf-animaciones.js marca .lf-ve lo que entra en pantalla; si ese script no
     llega, la red de seguridad de lf-antes.js quita lf-anima y queda lo final.
   - Con «reducir movimiento», nada se mueve (al final de la hoja).
   - Clases nuevas con el prefijo lf-: las de antes (.intro, .entrada, .placa,
     .pantalla, .reserva…) ya tienen reglas en estilos.css.
   - Ningún texto por debajo de 12 px y contraste de 4,5:1 como mínimo.
   ========================================================================== */

@font-face { font-family: 'Gochi Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/gochi-hand.woff2') format('woff2'); }

:root {
  --lf-tinta: #111318;
  --lf-gris: #4F5461;
  --lf-via: #E4E3DE;
  --lf-f: #3358FF;
  --lf-f-osc: #2440C4;
  --lf-l1: #D7261E;
  --lf-l2: #007A4C;
  --lf-l3: #F39200;
  --lf-l4: #7A4A22;
  --lf-grosor: 12px;
  --lf-ancho: min(100% - 32px, 1200px);
  --lf-mano: 'Gochi Hand', 'Comic Sans MS', cursive;
  --lf-amarillo: #FFE45E; --lf-rosa: #FFB3D1; --lf-verde: #B9EC93; --lf-azul: #A8DCFF;
  --lf-cab: 81px;
  color-scheme: light;
}

/* ------------------------------------------------------------------ base */
html { background: #fff; scrollbar-color: #B9BCC6 #fff; scroll-padding-top: 100px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #C4C7CF; border-color: #fff; }
body { background: #fff; color: var(--lf-tinta); font: 400 18px/1.55 'Archivo', system-ui, sans-serif; font-stretch: 100%; overflow-x: clip; }
b, strong { color: inherit; }
::selection { background: var(--lf-f); color: #fff; }
:focus-visible { outline: 3px solid var(--lf-f); outline-offset: 3px; border-radius: 4px; }
input, textarea { caret-color: var(--lf-f); }

/* La paleta de noche, para lo que se diseñó oscuro y se queda oscuro a propósito: el asistente
   (su panel flota sobre cualquier página) y las cabeceras animadas de las páginas interiores, que
   pasan a ser la placa de estación de cada página (fondo tinta, como los carteles del metro). */
.tema-noche, .asistente, .cabeza-pagina {
  --fondo: #0B0C0E; --fondo-2: #111318; --fondo-3: #181B21;
  --linea: rgba(242, 238, 230, .14); --linea-2: rgba(242, 238, 230, .24);
  --papel: #F2EEE6; --papel-2: #C9C4BA; --papel-3: #A39F96; --hoja: #F2EEE6;
  --cobalto-claro: #8FA6FF; --ambar-texto: #F2B85C;
  color-scheme: dark;
}
.cabeza-pagina { background: var(--lf-tinta); color: var(--papel); border-bottom: 0; }
.cabeza-pagina .miga a { color: var(--papel); }
/* Secciones con una foto oscura detrás (.con-foto, 24/10/2026): lo que cae DIRECTAMENTE sobre la foto
   (titular, entradilla, enlaces) usa la paleta de noche de arriba, igual que las cabeceras. Desde la web
   blanca del 19/10 heredaba la tinta oscura de la página y salía oscuro sobre oscuro (contraste medido
   de 1,0 a 1,8:1). La tarjeta .panel es de papel claro y se queda como estaba, y el botón .pulsador
   también. */
.con-foto > .envoltura > :not(.panel):not(.pulsador):not(.lf-boton) {
  --linea: rgba(242, 238, 230, .14); --linea-2: rgba(242, 238, 230, .24);
  --papel: #F2EEE6; --papel-2: #C9C4BA; --papel-3: #A39F96; --cobalto-claro: #8FA6FF;
}
.con-foto > .envoltura > h2, .con-foto > .envoltura > .mas { color: var(--papel); }
.con-foto > .envoltura > .enlace-sec, .con-foto > .envoltura > :not(.panel) .enlace-sec { color: var(--papel); border-color: var(--papel); }
.con-foto > .envoltura > .enlace-sec:hover, .con-foto > .envoltura > :not(.panel) .enlace-sec:hover { color: var(--cobalto-claro); border-color: var(--cobalto-claro); }

/* ------------------------------------------------------------------ botones */
.pulsador { border-radius: 8px; min-height: 54px; padding: 0 24px; font-weight: 700; --tam: 1.06rem; background: var(--lf-f); border: 3px solid var(--lf-f); color: #fff; }
.pulsador:hover { background: var(--lf-f-osc); border-color: var(--lf-f-osc); }
.pulsador:active { background: #1B33A8; border-color: #1B33A8; }
.pulsador.grande { min-height: 58px; }
.lf-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; border-radius: 8px; font: 700 1.06rem/1.1 'Archivo', sans-serif; text-decoration: none; background: #fff; color: var(--lf-tinta); border: 3px solid var(--lf-tinta); cursor: pointer; }
.lf-boton:hover { background: var(--lf-tinta); color: #fff; }
.lf-boton:active { background: #000; color: #fff; transition: none; }
.lf-boton.lf-azul { background: var(--lf-f); border-color: var(--lf-f); color: #fff; }
.lf-boton.lf-azul:hover { background: var(--lf-f-osc); border-color: var(--lf-f-osc); }
.enlace-sec { color: var(--lf-tinta); border-bottom-width: 2px; border-color: var(--lf-tinta); font-weight: 700; }
.enlace-sec:hover { color: var(--lf-f-osc); border-color: var(--lf-f-osc); }
.cabeza-pagina .enlace-sec { color: var(--papel); border-color: var(--papel); }
.lf-acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* La llamada, discreta al lado del botón principal (portada, 20/10/2026: el principal es probar Fold). Un enlace
   subrayado, con su caja de 44 px de alto para el dedo, y que responde al toque. */
.lf-enlace-llamada { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 700; font-size: 1.02rem; color: var(--lf-tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lf-enlace-llamada:hover { color: var(--lf-f-osc); }
.lf-enlace-llamada:active { color: #1B33A8; }

/* ------------------------------------------------------------------ la bala de cada línea */
.lf-bala { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--k, var(--lf-f)); color: #fff; font-weight: 800; font-size: .9em; line-height: 1; flex: none; font-style: normal; }
.lf-k1 { --k: var(--lf-l1); } .lf-k2 { --k: var(--lf-l2); } .lf-k3 { --k: var(--lf-l3); } .lf-k4 { --k: var(--lf-l4); } .lf-kf { --k: var(--lf-f); } .lf-kt { --k: var(--lf-tinta); }
.lf-k3 .lf-bala, .lf-bala.lf-k3 { color: var(--lf-tinta); }

/* ------------------------------------------------------------------ cabecera */
.cabecera { background: #fff; border-bottom: 3px solid var(--lf-tinta); }
.cabecera.con-borde { background: rgba(255, 255, 255, .97); border-color: var(--lf-tinta); }
.cabecera .envoltura { width: var(--lf-ancho); height: 78px; gap: 22px; }
.marca img { height: 30px; width: auto; display: block; }
.nav { gap: 6px; }
.nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--lf-tinta); font-weight: 650; font-size: .95rem; border-radius: 6px; }
.nav a::after { display: none; }
.nav a:hover { background: #F1F0EC; color: var(--lf-tinta); }
.nav a[aria-current] { color: var(--lf-tinta); box-shadow: inset 0 -3px 0 var(--k, var(--lf-f)); border-radius: 0; }
.nav a:active { background: #E4E3DE; color: var(--lf-tinta); }
.nav .lf-bala { font-size: .78rem; }
.idioma { color: var(--lf-tinta); font-weight: 700; border: 2px solid var(--lf-tinta); border-radius: 6px; min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; text-decoration: none; }
.idioma:hover { background: var(--lf-tinta); color: #fff; }
.lf-cab-llamada { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 3px solid var(--lf-tinta); border-radius: 8px; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--lf-tinta); white-space: nowrap; }
.lf-cab-llamada:hover { background: var(--lf-tinta); color: #fff; }
.lf-cab-llamada:active { background: #000; color: #fff; }
.cab-reservar { min-height: 44px; --tam: .95rem; padding: 0 16px; }
.boton-menu { color: var(--lf-tinta); }
/* 28/10/2026: el fondo iba en las rayas mismas y en el móvil se veía un rectángulo negro en vez del icono del menú.
   Las rayas son el borde de arriba y el de abajo (más una en medio); el aspa al abrir, sus ::before y ::after. */
.boton-menu .rayas { background: none; border-color: var(--lf-tinta); }
.boton-menu .rayas::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .8px); height: 1.6px; background: var(--lf-tinta); }
.boton-menu[aria-expanded="true"] .rayas::before, .boton-menu[aria-expanded="true"] .rayas::after { background: var(--lf-tinta); top: 50%; }

/* ------------------------------------------------------------------ pie: el final de la línea */
.pie { background: #fff; border-top: 0; padding: 0 0 36px; color: var(--lf-tinta); }
.pie .envoltura { width: var(--lf-ancho); }
.lf-fin-linea { width: var(--lf-ancho); margin: 0 auto; height: 64px; position: relative; }
.lf-fin-linea::before { content: ''; position: absolute; left: 40px; top: 0; width: var(--lf-grosor); height: 40px; background: var(--lf-f); border-radius: 0 0 6px 6px; }
.lf-fin-linea::after { content: ''; position: absolute; left: 20px; top: 40px; width: 52px; height: var(--lf-grosor); background: var(--lf-f); border-radius: 6px; }
.pie-rejilla { border-top: 3px solid var(--lf-tinta); padding-top: 34px; }
.enlaces-pie a { color: var(--lf-tinta); }
.pie-datos dt { color: var(--lf-gris); }
.pie-datos dd { color: var(--lf-tinta); }
.pie-datos a { color: var(--lf-tinta); text-decoration: underline; text-underline-offset: 3px; }
.colofon, .legal { color: var(--lf-gris); border-color: rgba(17, 19, 24, .16); }
.legal a, .pie-boton { color: var(--lf-tinta); }
.lf-pie-sello { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; font-weight: 700; }
/* El logo oficial horizontal (Marca_Burnao/logo/horizontal-sobre-claro.svg): 34 px de alto = 189 px de ancho,
   por encima del mínimo del manual (120 px). */
.lf-pie-sello img { height: 34px; width: auto; display: block; }

/* ------------------------------------------------------------------ las páginas nuevas */
.lf { padding-top: var(--lf-cab); }
.lf-envoltura { width: var(--lf-ancho); margin-inline: auto; }
.lf h1, .lf h2, .lf h3 { font-stretch: 100%; text-wrap: balance; }
.lf p { margin: 0; }
.lf-nota { margin-top: 18px; font-size: 15px; color: var(--lf-gris); }
.lf .miga { font-size: 15px; color: var(--lf-gris); margin: 0 0 18px; }
.lf .miga a { color: var(--lf-tinta); }

/* La placa de estación: el nombre de la página, como el cartel del andén */
.lf-placa { display: inline-flex; align-items: center; gap: 12px; background: var(--lf-tinta); color: #fff; font-weight: 700; font-size: 17px; padding: 8px 16px 8px 8px; border-radius: 6px; margin: 0 0 24px; }
.lf-placa .lf-bala { font-size: 18px; }
.lf-h1 { font-size: clamp(40px, 4.8vw, 70px); line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.lf-sub, .lf .entrada { font-size: 21px; line-height: 1.45; color: #2B2E36; margin: 22px 0 30px; max-width: 34ch; }
.lf-h1 .h1-grande { display: block; }
.lf-h1 em { font-style: normal; color: var(--lf-f); }
.lf-h1-sub { display: block; font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: 0; color: #2B2E36; margin-top: 20px; max-width: 36ch; }
.lf-entrada-posit { margin-top: 34px; font-size: 22px; max-width: 280px; }
.lf-cabeza .lf-placa + .lf-h1 { margin-top: 6px; }
.lf-cabeza .lf-acciones { margin-top: 28px; }
.lf-cabeza .resumen-aeo { margin-top: -10px; }
.lf h2 { max-width: none; }
.lf .lf-recorrido-zona .entrada { margin: 34px 0 0; font-size: 21px; max-width: 46ch; color: var(--lf-tinta); font-weight: 600; }
.lf-recorrido-zona .resumen-aeo { margin: 16px 0 0; max-width: 70ch; }

/* ------------------------------------------------------------------ piezas de las páginas interiores */
.lf-h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; margin: 0 0 18px; }
.lf-intro { font-size: 20px; color: #2B2E36; max-width: 52ch; margin: 0 0 30px; }
.lf-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: lf-paso; position: relative; }
.lf-pasos li { position: relative; padding: 0 0 26px 62px; counter-increment: lf-paso; }
.lf-pasos li::before { content: counter(lf-paso); position: absolute; left: 0; top: -4px; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 6px solid var(--lf-tinta); display: grid; place-items: center; font-weight: 800; font-size: 16px; line-height: 1; z-index: 1; }
.lf-pasos li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 30px; bottom: -4px; width: var(--lf-grosor); background: var(--lf-f); }
.lf-pasos b { display: block; font-size: 20px; font-weight: 800; line-height: 1.25; }
.lf-pasos span { display: block; color: #2B2E36; margin-top: 4px; font-size: 17px; }
.lf-plegable { margin-top: 26px; border: 3px solid var(--lf-tinta); border-radius: 12px; background: #fff; }
.lf-plegable > summary { cursor: pointer; padding: 16px 18px; font-weight: 800; font-size: 19px; list-style: none; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.lf-plegable > summary::-webkit-details-marker { display: none; }
.lf-plegable > summary::before { content: '+'; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lf-tinta); color: #fff; font-weight: 800; flex: none; }
.lf-plegable[open] > summary::before { content: '–'; }
.lf-plegable > summary:hover { background: #F6F5F1; }
.lf-plegable > summary:active { background: #ECEBE6; }
.lf-plegable > *:not(summary) { padding: 0 18px 18px; }
.lf-tramo-obras .lf-estacion::before { border-style: dashed; }

/* Cómo funciona: el panel de salidas */
.lf-salidas-panel { border: 3px solid var(--lf-tinta); border-radius: 14px; overflow: hidden; background: var(--lf-tinta); color: #fff; }
.lf-salidas-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-weight: 800; font-size: 18px; margin: 0; }
.lf-salidas-cab span:last-child { margin-left: auto; font-size: 14px; font-weight: 700; color: #FFD25A; }
.lf-salidas-panel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: #16181F; }
.lf-salidas-panel th { text-align: left; font-size: 13px; font-weight: 700; color: #B9BCC6; padding: 8px 12px; border-bottom: 2px solid #2A2D36; }
.lf-salidas-panel td { padding: 12px; border-bottom: 2px solid #2A2D36; font-size: 16px; vertical-align: top; }
.lf-salidas-panel tr:last-child td { border-bottom: 0; }
.lf-salidas-panel td:first-child { color: #FFD25A; font-weight: 800; }
.lf-salidas-panel td:last-child { font-weight: 800; color: #fff; }
.lf-salidas-panel td:nth-child(3) { color: #C9CCD6; font-size: 14px; }
.lf-dos-cifras { color: #FFB65C !important; }
@keyframes lf-clac { 0% { transform: scaleY(1); } 30% { transform: scaleY(.1); background: #2A2D36; } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); } }
html.lf-anima .lf-salidas-panel.lf-ve tbody td { animation: lf-clac .55s steps(4, end) calc(var(--n, 0) * .35s + .2s) both; transform-origin: center; }
html.lf-anima .lf-salidas-panel.lf-ve tbody tr:nth-child(1) td { --n: 0; } html.lf-anima .lf-salidas-panel.lf-ve tbody tr:nth-child(2) td { --n: 1; }
html.lf-anima .lf-salidas-panel.lf-ve tbody tr:nth-child(3) td { --n: 2; } html.lf-anima .lf-salidas-panel.lf-ve tbody tr:nth-child(4) td { --n: 3; }

/* Pruébame: los botones son pósits que se despegan al pulsarlos */
.lf-probar { margin-top: 96px; }
.lf-probar .fold-botones { display: flex; flex-wrap: wrap; gap: 18px 20px; }
.lf-probar .fold-pregunta { font: 400 21px/1.15 var(--lf-mano); color: var(--lf-tinta); background: var(--lf-amarillo); border: 0; padding: 14px 16px 18px; min-height: 64px; max-width: 230px; text-align: left; cursor: pointer; transform: rotate(-1.5deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 14px 16px -12px rgba(40, 22, 6, .55); border-radius: 0; }
.lf-probar .fold-pregunta:nth-child(2n) { background: var(--lf-rosa); transform: rotate(1.8deg); }
.lf-probar .fold-pregunta:nth-child(3n) { background: var(--lf-verde); transform: rotate(-.8deg); }
.lf-probar .fold-pregunta:hover { transform: rotate(0) translateY(-3px); }
.lf-probar .fold-pregunta:active { transform: rotate(0) translateY(1px); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); }
.lf-caso { margin-top: 80px; border: 3px solid var(--lf-tinta); border-radius: 14px; padding: 26px; position: relative; }

/* Reservar: el reloj del andén */
.lf-reloj-zona { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 26px; align-items: center; position: relative; padding-bottom: 30px; }
.lf-reloj { width: 210px; height: 210px; border-radius: 50%; border: 7px solid var(--lf-tinta); position: relative; background: conic-gradient(from 270deg, rgba(51, 88, 255, .16) 0 360deg), #fff; }
.lf-reloj::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 2px dashed rgba(17, 19, 24, .25); }
.lf-reloj-num { position: absolute; font-weight: 800; font-size: 18px; line-height: 1; }
.lf-n12 { top: 18px; left: 50%; transform: translateX(-50%); } .lf-n3 { right: 16px; top: 50%; transform: translateY(-50%); }
.lf-n6 { bottom: 18px; left: 50%; transform: translateX(-50%); } .lf-n9 { left: 18px; top: 50%; transform: translateY(-50%); }
.lf-reloj-aguja { position: absolute; left: 50%; top: 50%; width: 8px; height: 70px; margin-left: -4px; margin-top: -70px; background: var(--lf-f); border-radius: 4px; transform-origin: 50% 100%; transform: rotate(330deg); }
.lf-reloj-eje { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--lf-tinta); }
.lf-reloj-posit { position: absolute; right: 0; bottom: -18px; font-size: 21px; }
@keyframes lf-gira { from { transform: rotate(270deg); } to { transform: rotate(690deg); } }
html.lf-anima .lf-reloj-zona.lf-ve .lf-reloj-aguja { animation: lf-gira 3.2s cubic-bezier(.3, .1, .2, 1) .3s both; }
html.lf-anima .lf-reloj-zona.lf-ve .lf-reloj-posit { animation: lf-pega .6s cubic-bezier(.2, .9, .3, 1.25) 3.3s both; }
.lf-reserva .envoltura { width: var(--lf-ancho); }
/* El programador de la reserva es papel claro: su día elegido, en tinta con letra blanca (con la paleta clara
   nueva, el «papel» de antes salía negro sobre negro), y ninguna etiqueta por debajo de 12 px. */
.programador .dia[aria-pressed="true"], .programador .dia[aria-pressed="true"] * { background: var(--lf-tinta); color: #fff; }
.programador .dia span, .programador .dia small { font-size: 12px; }
.programador .hora[aria-pressed="true"] { background: var(--lf-f); color: #fff; border-color: var(--lf-f); }
.lf-reserva h2 { margin-bottom: 26px; }

/* Precios: el billete que se valida */
.lf-validadora { position: relative; padding: 18px 0 0; }
.lf-validadora::before { content: ''; position: absolute; left: -10px; right: -10px; top: 0; height: 12px; border-radius: 6px; background: var(--lf-tinta); }
.lf-validadora .lf-billete { max-width: 460px; margin-left: auto; margin-right: auto; }
@keyframes lf-entra-billete { from { transform: translateY(-34px) rotate(-3deg); } 70% { transform: translateY(4px) rotate(.5deg); } to { transform: none; } }
@keyframes lf-sella { 0%, 55% { transform: rotate(-9deg) scale(1.9); opacity: .2; } 75% { transform: rotate(-9deg) scale(.92); opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }
html.lf-anima .lf-validadora.lf-ve .lf-billete { animation: lf-entra-billete .9s cubic-bezier(.2, .9, .3, 1.15) .2s both; }
html.lf-anima .lf-validadora.lf-ve .lf-sello { animation: lf-sella 1.6s ease-out .2s both; }

/* Capacidades: el plano de la red */
.lf-red .nv-mapa-grupo { margin: 0 0 44px; }
.lf-red .nv-mapa-grupo h3 { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; background: var(--lf-tinta); color: #fff; padding: 8px 16px; border-radius: 6px; margin: 0 0 18px; }
.lf-red .nv-mapa { position: relative; margin: 0; padding-left: 46px; display: grid; gap: 0; }
.lf-red .nv-mapa::before { content: ''; position: absolute; left: 12px; top: 14px; bottom: 14px; width: var(--lf-grosor); background: var(--k, var(--lf-f)); border-radius: 6px; }
.lf-red .nv-mapa-grupo:nth-of-type(2) { --k: var(--lf-l2); } .lf-red .nv-mapa-grupo:nth-of-type(3) { --k: var(--lf-l1); }
.lf-red .nv-mapa-grupo:nth-of-type(4) { --k: var(--lf-l3); } .lf-red .nv-mapa-grupo:nth-of-type(5) { --k: var(--lf-l4); } .lf-red .nv-mapa-grupo:nth-of-type(6) { --k: var(--lf-tinta); }
.lf-red .nv-mapa-fila { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4px 26px; padding: 12px 0 16px; border: 0; }
.lf-red .nv-mapa-fila::before { content: ''; position: absolute; left: -44px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 6px solid var(--lf-tinta); z-index: 1; transition: background .3s; }
.lf-red .nv-mapa-fila dt { font-weight: 800; font-size: 18px; line-height: 1.3; }
.lf-red .nv-mapa-fila dd { margin: 0; color: #2B2E36; font-size: 16px; }
.lf-red .nv-mapa-fila dd p { margin: 0 0 6px; }
.lf-red .nv-mapa-pie { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lf-red .nv-mapa-plan { font-size: 14px; font-weight: 700; color: var(--lf-gris); }
@keyframes lf-enciende { 0% { background: #fff; } 40% { background: var(--k, var(--lf-f)); } 100% { background: #fff; } }
html.lf-anima .lf-red.lf-ve .nv-mapa-fila::before { animation: lf-enciende 1s ease-in-out both; }
html.lf-anima .lf-red.lf-ve .nv-mapa-fila:nth-child(2)::before { animation-delay: .25s; } html.lf-anima .lf-red.lf-ve .nv-mapa-fila:nth-child(3)::before { animation-delay: .5s; }
html.lf-anima .lf-red.lf-ve .nv-mapa-fila:nth-child(4)::before { animation-delay: .75s; } html.lf-anima .lf-red.lf-ve .nv-mapa-fila:nth-child(5)::before { animation-delay: 1s; }
html.lf-anima .lf-red.lf-ve .nv-mapa-fila:nth-child(n+6)::before { animation-delay: 1.25s; }
.lf-leyenda-zona { border: 3px solid var(--lf-tinta); border-radius: 14px; padding: 20px 22px; background: #fff; }

/* Visión: la prolongación de la línea (en servicio, en obras, en proyecto) */
.lf-obras { position: relative; height: 190px; border: 3px solid var(--lf-tinta); border-radius: 14px; background: #fff; overflow: hidden; }
.lf-obras > span { position: absolute; top: 74px; height: var(--lf-grosor); }
.lf-obras-ya { left: 6%; width: 30%; background: var(--lf-f); border-radius: 6px 0 0 6px; }
.lf-obras-prox { left: 36%; width: 30%; background: repeating-linear-gradient(90deg, var(--lf-f) 0 18px, transparent 18px 28px); transform-origin: left; }
.lf-obras-meta { left: 66%; width: 28%; background: repeating-linear-gradient(90deg, #A3A7B3 0 6px, transparent 6px 14px); }
.lf-obras-valla { top: 52px !important; height: 56px !important; left: calc(66% - 14px); width: 28px; border-radius: 4px; background: repeating-linear-gradient(-45deg, var(--lf-l3) 0 8px, var(--lf-tinta) 8px 16px); }
.lf-obras-valla i { position: absolute; left: 50%; top: -16px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--lf-l3); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lf-tinta); }
.lf-obras-et { top: 112px !important; height: auto !important; font-size: 15px; font-weight: 800; }
.lf-et1 { left: 6%; } .lf-et2 { left: 36%; } .lf-et3 { left: 70%; color: var(--lf-gris); }
@keyframes lf-obra { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@keyframes lf-luz { 0%, 49% { background: var(--lf-l3); } 50%, 100% { background: #FFE2B0; } }
html.lf-anima .lf-obras.lf-ve .lf-obras-prox { animation: lf-obra 2.6s steps(10, end) .3s both; }
html.lf-anima .lf-obras.lf-ve .lf-obras-valla i { animation: lf-luz 1s linear .3s 6; }
.lf-estado-txt { display: inline-block; vertical-align: middle; margin-left: 12px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: #fff; background: var(--lf-tinta); padding: 5px 10px; border-radius: 6px; }
.lf-tramo-obras .lf-estado-txt { background: var(--lf-l3); color: var(--lf-tinta); }
.lf-tramo-meta .lf-estado-txt { background: #E4E3DE; color: var(--lf-tinta); }
.lf-tramo-meta .lf-estacion::before { border-style: dotted; }
.lf-paradas { list-style: none; padding: 0; margin: 0; }
.lf-paradas .lf-tarjeta h3 { font-size: 19px; }
.lf-paradas .lf-tarjeta p { font-size: 16px; }
.lf-lista-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 34px; }
.lf-lista-dos li { font-size: 17px; color: #2B2E36; }
.lf-lista-dos li b { color: var(--lf-tinta); }
.lf-tramo-obras .lf-lista li::before { border-style: dashed; }
.lf-tramo-meta .lf-lista li::before { border-color: #8C909C; border-style: dotted; }

/* Descargar: la hoja de Fold baja a la carpeta de la oficina */
.lf-carpeta { position: relative; width: 260px; height: 230px; margin: 0 auto; }
.lf-carpeta-fondo { position: absolute; left: 20px; right: 20px; bottom: 0; height: 120px; background: #F3C969; border: 3px solid var(--lf-tinta); border-radius: 6px 14px 10px 10px; }
.lf-carpeta-fondo::before { content: ''; position: absolute; left: -3px; top: -24px; width: 90px; height: 24px; background: #F3C969; border: 3px solid var(--lf-tinta); border-bottom: 0; border-radius: 8px 8px 0 0; }
.lf-carpeta-hoja { position: absolute; left: 50%; top: 40px; width: 88px; margin-left: -44px; z-index: 1; }
.lf-carpeta-hoja img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 0 rgba(17, 19, 24, .18)); }
.lf-carpeta-frente { position: absolute; left: 20px; right: 20px; bottom: 0; height: 84px; z-index: 2; background: #FFD97A; border: 3px solid var(--lf-tinta); border-radius: 6px 6px 10px 10px; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
@keyframes lf-guarda { 0% { transform: translateY(-60px) rotate(-6deg); } 55% { transform: translateY(22px) rotate(0); } 75% { transform: translateY(10px); } 100% { transform: none; } }
html.lf-anima .lf-carpeta.lf-ve .lf-carpeta-hoja { animation: lf-guarda 1.6s cubic-bezier(.3, .6, .3, 1) .3s both; }
.lf-descarga { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 34px; align-items: start; }
.lf-descarga .descarga-ficha { border: 3px solid var(--lf-tinta); border-radius: 14px; padding: 24px; background: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; }
.lf-descarga .descarga-ficha h2 { font-size: 34px; font-weight: 800; margin: 0 0 6px; }
.lf-descarga .descarga-huella code { overflow-wrap: anywhere; font-size: 14px; }
.lf-descarga .aviso-bloque { margin-top: 0; }
/* La orden de PowerShell del antivirus es una sola palabra larga: se parte donde haga falta, sin desbordar el móvil. */
.lf-descarga .descarga-ver code, .descarga-pasos .descarga-ver code { overflow-wrap: anywhere; font-size: .9em; }
/* EL FORMULARIO DE LA DESCARGA (28/10/2026): seis datos en una sola pantalla y el botón, que es la descarga
   (descarga-formulario.js). Dos columnas en escritorio; una en el móvil, con campos de 48 px de alto. Prefijo fd-. */
.fd-columna { min-width: 0; }
.fd { border: 3px solid var(--lf-tinta); border-radius: 14px; padding: 24px; background: #fff; color: var(--lf-tinta); }
.fd-titulo { font-size: 26px; font-weight: 800; line-height: 1.2; margin: 0 0 6px; }
.fd-entrada { margin: 0 0 18px; color: var(--lf-gris); font-size: 17px; line-height: 1.45; }
.fd-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
.fd-campo { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; }
.fd-campo.fd-ancho, .fd-una { grid-column: 1 / -1; }
.fd-campo > label, .fd-una > legend { font-weight: 700; font-size: 16px; padding: 0; }
.fd-opcional { font-weight: 400; color: var(--lf-gris); }
.fd input[type="text"], .fd input[type="email"], .fd select, .fd textarea { font: inherit; font-size: 17px; color: var(--lf-tinta); background: #fff; border: 2px solid var(--lf-tinta); border-radius: 8px; padding: 10px 12px; min-height: 48px; width: 100%; box-sizing: border-box; }
.fd textarea { min-height: 72px; resize: vertical; line-height: 1.4; }
.fd input:focus-visible, .fd select:focus-visible, .fd textarea:focus-visible { outline: 3px solid var(--lf-f); outline-offset: 2px; }
.fd [aria-invalid="true"], .fd-una.fd-mal .fd-op span { border-color: #B3261E; }
.fd-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fd-op { position: relative; }
.fd-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fd-op span { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 64px; padding: 0 16px; border: 2px solid var(--lf-tinta); border-radius: 8px; font-weight: 700; cursor: pointer; background: #fff; }
.fd-op span:hover { background: #F3F5FF; }
.fd-op input:checked + span { background: var(--lf-tinta); color: #fff; }
.fd-op input:focus-visible + span { outline: 3px solid var(--lf-f); outline-offset: 2px; }
.fd-op:active span { background: var(--lf-via); }
.fd-casilla { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 15px; line-height: 1.45; cursor: pointer; }
.fd-casilla input { width: 22px; height: 22px; flex: 0 0 22px; margin: 1px 0 0; accent-color: var(--lf-f); }
.fd-casilla.fd-mal span { color: #B3261E; }
.fd-comercial { margin-top: 10px; }
.fd-legal { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--lf-gris); }
.fd-legal a { color: var(--lf-tinta); }
.fd-err { color: #B3261E; font-size: 14px; font-weight: 700; }
.fd-err[hidden], .fd-error[hidden] { display: none; }
.fd-error { margin: 14px 0 0; color: #B3261E; font-weight: 700; }
.fd-enviar { margin-top: 18px; width: 100%; justify-content: center; }
.fd-enviar[disabled] { opacity: .75; cursor: progress; }
.fd-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fd-gracias { display: none; margin-top: 16px; padding: 16px 18px; border: 3px solid #007A4C; border-radius: 12px; background: #EFFAF4; }
.fd-gracias.fd-ve, .fd-gracias:target { display: block; }
.fd-gracias-t { margin: 0 0 12px; font-weight: 800; font-size: 18px; }
.fd-gracias:focus { outline: 3px solid var(--lf-f); outline-offset: 3px; }
.fd-saltar { margin: 14px 0 0; font-size: 15px; }
.fd-saltar a { color: var(--lf-gris); }
.fd-saltar a:active, .fd-legal a:active { color: var(--lf-f); }
.descarga-pasos { margin-top: 48px; }
.descarga-pasos > h2.descarga-ver-titulo { font-size: 30px; font-weight: 800; margin: 0 0 14px; }
.descarga-pasos-lista { font-size: 17px; line-height: 1.5; }
.descarga-pasos-lista > li { margin-bottom: 10px; }
.descarga-calma { margin: 4px 0 14px; padding: 14px 16px; border-left: 4px solid var(--lf-f); background: #F3F5FF; border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 700px) {
  /* En el móvil el dibujo de la carpeta empujaba el formulario a la tercera pantalla: fuera, que lo importante es el formulario. */
  .lf-pag-descargar .lf-carpeta { display: none; }
  .lf-pag-descargar .lf-descarga { margin-top: 24px; }
  .fd { padding: 18px 16px; }
  .fd-campos { grid-template-columns: minmax(0, 1fr); }
  .fd-titulo { font-size: 22px; }
  .descarga-pasos > h2.descarga-ver-titulo { font-size: 24px; }
}
/* Al pulsar «Descargar» (27/10/2026, tarde): los pasos del navegador de quien descarga, junto al botón (descarga-guia.js).
   Un paso por fila: el número, la frase y su dibujo; a 700 px o menos, el dibujo va debajo de la frase. Prefijo dg-. */
.dg { margin: 18px 0 6px; padding: 18px 18px 14px; border: 3px solid var(--lf-f); border-radius: 14px; background: #F3F5FF; color: var(--lf-tinta); scroll-margin: 24px; }
.dg[hidden], .dg [hidden] { display: none; }
.dg:focus { outline: 3px solid var(--lf-f); outline-offset: 3px; }
.dg-titulo { font-size: 20px; font-weight: 800; line-height: 1.25; margin: 0 0 4px; }
.dg-intro { margin: 0 0 12px; color: var(--lf-gris); }
.dg-despues { margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--lf-via); }
.dg-pasos { list-style: none; counter-reset: dg; margin: 0; padding: 0; display: grid; gap: 12px; }
.dg-pasos > li { counter-increment: dg; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px 12px; align-items: center; background: #fff; border: 2px solid var(--lf-tinta); border-radius: 10px; padding: 12px; }
.dg-pasos > li::before { content: counter(dg); width: 34px; height: 34px; border-radius: 50%; background: var(--lf-f); color: #fff; font-weight: 800; font-size: 17px; display: grid; place-items: center; align-self: start; }
.dg-pasos > li > p { margin: 0; font-size: 17px; line-height: 1.45; }
/* El dibujo, debajo de su frase y a un tamaño en el que su texto se lee (viewBox de 240: a 300 px, ×1,25). */
.dg-dibujo { grid-column: 2; display: block; width: 100%; max-width: 300px; height: auto; font-family: inherit; }
.dg-cambiar { margin: 14px 0 0; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dg-ver { font: inherit; font-size: 15px; font-weight: 700; padding: 6px 12px; border: 2px solid var(--lf-tinta); border-radius: 999px; background: #fff; color: var(--lf-tinta); cursor: pointer; min-height: 36px; }
.dg-ver[aria-pressed="true"] { background: var(--lf-tinta); color: #fff; }
.dg-ver:focus-visible { outline: 3px solid var(--lf-f); outline-offset: 2px; }
@media (max-width: 700px) {
  .dg { padding: 14px 12px 12px; }
}
/* Cómo empezar desde el móvil (27/10/2026, web 1.0.3): «Fold se instala en un ordenador con Windows». Solo en un
   teléfono o una tableta (html.dm-movil, de descarga-movil-antes.js); sin ese guion, en pantallas estrechas. Prefijo
   dm- propio: ninguna regla de otra pieza se le aplica. */
.dm-aviso { display: none; margin-top: 26px; padding: 20px 20px 18px; border: 3px solid var(--lf-tinta); border-radius: 14px; background: var(--lf-amarillo); color: var(--lf-tinta); scroll-margin-top: 24px; }
html.dm-movil .dm-aviso { display: block; }
@media (max-width: 700px) { html:not(.dm-pc) .dm-aviso { display: block; } }
.dm-aviso:focus { outline: 3px solid var(--lf-f); outline-offset: 3px; }
.dm-aviso h2 { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: 0; margin: 0 0 8px; max-width: none; }
.dm-aviso p { margin: 0; }
.dm-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.dm-botones [hidden] { display: none; }
.dm-aviso .dm-url { margin-top: 12px; font-size: 15px; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.dm-aviso .dm-url[hidden] { display: none; }
.dm-aviso .dm-estado:not(:empty) { margin-top: 10px; font-weight: 700; }
.lf-cabeza { width: var(--lf-ancho); margin: 56px auto 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.lf-cabeza.lf-sola { grid-template-columns: minmax(0, 1fr); }
.lf-cabeza > * { min-width: 0; }
.resumen-aeo { background: #F6F5F1; border: 0; border-left: 6px solid var(--lf-f); border-radius: 0 8px 8px 0; color: #2B2E36; font-size: 16px; margin: 0 0 26px; max-width: 46ch; }
.resumen-aeo b { color: var(--lf-tinta); }
.lf-cta-nota { margin-top: 14px; font-size: 15px; color: var(--lf-gris); max-width: 46ch; }

/* El vídeo de Fold: la pantalla del andén */
.lf-pantalla { border: 3px solid var(--lf-tinta); border-radius: 14px; overflow: hidden; background: var(--lf-tinta); margin: 0; position: relative; }
.lf-cartel { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: #fff; font-weight: 700; font-size: 17px; }
.lf-cartel .lf-min { margin-left: auto; color: #FFD25A; font-variant-numeric: tabular-nums; }
.lf-marco { position: relative; aspect-ratio: 16 / 9; background: #0E1015; }
.lf-marco img, .lf-marco video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-pantalla figcaption { background: #fff; color: var(--lf-gris); font-size: 15px; padding: 9px 14px; border-top: 3px solid var(--lf-tinta); }
/* El botón de sonido (19/10/2026): el vídeo arranca en silencio y con sus subtítulos (quemados en la imagen); este
   botón, arriba a la derecha (a la izquierda está el logo del vídeo; abajo, subtítulos y controles), es lo primero
   que se ve encima. Cobalto con borde blanco para que destaque sobre cualquier fotograma; el foco, en amarillo. */
.lf-sonido { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px 0 14px; border-radius: 8px; border: 3px solid #fff; background: var(--lf-f); color: #fff; font: 800 18px/1.1 'Archivo', system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 0 var(--lf-tinta); }
.lf-sonido[hidden] { display: none; }
.lf-sonido:hover { background: var(--lf-f-osc); }
.lf-sonido:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lf-tinta); }
.lf-sonido:focus-visible { outline: 4px solid #FFE45E; outline-offset: 3px; }
.lf-sonido-icono { flex: none; }
.lf-sonido .lf-tacha, .lf-sonido.lf-con-sonido .lf-ondas { display: none; }
.lf-sonido.lf-con-sonido .lf-tacha { display: inline; }
.lf-sonido.lf-con-sonido { background: #fff; color: var(--lf-tinta); border-color: var(--lf-tinta); box-shadow: none; }
.lf-pronto { position: absolute; left: 18px; bottom: 18px; background: #fff; color: var(--lf-tinta); font-weight: 800; font-size: 16px; padding: 8px 14px; border-radius: 6px; border: 3px solid var(--lf-tinta); }

/* ------------------------------------------------------------------ el recorrido de una respuesta */
.lf-recorrido-zona { width: var(--lf-ancho); margin: 72px auto 0; }
.lf-recorrido-zona > h2, .lf-rotulo { font-size: 16px; font-weight: 700; color: var(--lf-gris); margin: 0 0 26px; letter-spacing: 0; }
.lf-via { position: relative; }
.lf-recorrido { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: var(--cols, 1.15fr .8fr 1.2fr .9fr .7fr 1.1fr); }
.lf-recorrido > li { position: relative; padding: 74px 14px 0 0; }
.lf-recorrido > li:not(:last-child)::before { content: ''; position: absolute; left: 22px; right: -26px; top: 25px; height: var(--lf-grosor); background: var(--k, var(--lf-f)); }
.lf-marca { position: absolute; left: 0; top: 9px; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 7px solid var(--lf-tinta); z-index: 1; }
.lf-recorrido small { display: block; font-size: 15px; color: var(--lf-gris); font-weight: 600; margin-bottom: 4px; }
.lf-recorrido b { display: block; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; font-weight: 700; }
.lf-recorrido .lf-p-fold .lf-marca { width: 66px; height: 74px; top: -6px; left: -11px; border-radius: 12px; background: var(--lf-tinta); border: 5px solid #fff; box-shadow: 0 0 0 4px var(--lf-tinta); display: grid; place-items: center; }
.lf-recorrido .lf-p-fold .lf-marca img { width: 46px; height: 46px; display: block; }
.lf-recorrido .lf-p-fin .lf-marca { width: 58px; height: 58px; top: 2px; background: var(--k, var(--lf-f)); }
.lf-recorrido .lf-p-fin b { font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: var(--k, var(--lf-f)); line-height: 1; }
.lf-tren { position: absolute; top: 19px; left: calc(var(--fin, 81.2%) - 66px); width: 56px; height: 24px; border-radius: 12px; background: #fff; border: 4px solid var(--k, var(--lf-f)); z-index: 2; }
.lf-tren::before, .lf-tren::after { content: ''; position: absolute; top: 4px; width: 9px; height: 8px; border-radius: 2px; background: var(--k, var(--lf-f)); }
.lf-tren::before { left: 8px; } .lf-tren::after { left: 22px; }

/* ------------------------------------------------------------------ la línea que baja por la página */
.lf-linea { width: var(--lf-ancho); margin: 110px auto 0; position: relative; padding-left: 112px; }
.lf-linea::before { content: ''; position: absolute; left: 40px; top: 10px; bottom: 0; width: var(--lf-grosor); background: var(--lf-f); border-radius: 6px; transform-origin: top; transform: scaleY(var(--lf-trazo, 1)); }
.lf-tramo { position: relative; padding-bottom: 110px; }
.lf-tramo:last-child { padding-bottom: 70px; }
.lf-estacion { position: relative; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; margin: 0 0 34px; }
.lf-estacion::before { content: ''; position: absolute; left: -82px; top: .1em; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 7px solid var(--lf-tinta); z-index: 1; }
.lf-estacion::after { content: ''; position: absolute; left: -50px; top: calc(.1em + 14px); width: 38px; height: 4px; background: var(--lf-tinta); }
.lf-tramo > .lf-intro { font-size: 20px; color: #2B2E36; max-width: 52ch; margin: -14px 0 30px; }

/* Los cuatro ramales: lo que hace, cada uno con su color */
.lf-ramales { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
/* Tres en fila (portada simplificada, 20/10/2026); en tableta y móvil, una columna (regla de .lf-ramales más abajo). */
.lf-ramales-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lf-ramal .lf-cuerpo > .lf-posit + .lf-salidas, .lf-ramal .lf-cuerpo > .lf-posit + .lf-aviso { margin-top: 14px; }
.lf-tramo > .entrada { font-size: 20px; color: #2B2E36; max-width: 52ch; margin: -14px 0 30px; }
.lf-ramal { border: 3px solid var(--lf-tinta); border-radius: 14px; overflow: hidden; background: #fff; }
.lf-ramal .lf-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: var(--lf-grosor) solid var(--k); font-weight: 800; font-size: 21px; line-height: 1.15; margin: 0; }
.lf-ramal .lf-cuerpo { padding: 18px 20px 20px; }
.lf-ramal .lf-pie-ramal { margin-top: 12px; font-size: 15px; color: var(--lf-gris); }
.lf-pregunta { display: inline-block; background: #F1F0EC; border-radius: 10px 10px 10px 2px; padding: 8px 14px; font-weight: 600; }
.lf-contesta { margin-top: 12px; }
.lf-contesta b { color: var(--lf-l1); }
.lf-salidas { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lf-salidas td { padding: 7px 0; border-bottom: 2px solid #ECEBE6; }
.lf-salidas td:first-child { width: 78px; font-weight: 800; color: var(--lf-l2); }
.lf-salidas tr:last-child td { border-bottom: 0; }
.lf-aviso { display: flex; gap: 12px; align-items: flex-start; background: #FFF4E0; border-left: 8px solid var(--lf-l3); padding: 12px 14px; }
.lf-triangulo { flex: none; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 22px solid var(--lf-tinta); position: relative; margin-top: 2px; }
.lf-triangulo::after { content: '!'; position: absolute; left: -3px; top: 5px; color: #FFF4E0; font-weight: 900; font-size: 14px; line-height: 1; }
.lf-aviso b { display: block; font-size: 22px; }
.lf-duda { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; font-weight: 700; }
.lf-duda span { border: 3px solid var(--lf-tinta); border-radius: 10px; padding: 10px 6px; font-variant-numeric: tabular-nums; }
.lf-duda i { font-style: normal; font-size: 26px; color: var(--lf-l4); font-weight: 800; }

/* El billete: la única tarifa que se enseña es la entrada */
/* align-items: start (19/10/2026): con «stretch» el billete se estiraba hasta el alto de los cinco planes y dejaba
   media tarjeta en blanco debajo de «Después». */
.lf-billetes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: start; }
.lf-billete { border: 3px solid var(--lf-tinta); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: #fff; position: relative; }
.lf-billete h3 { background: var(--k, var(--lf-f)); color: #fff; padding: 12px 18px; font-size: 22px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; }
.lf-billete h3 small { font-size: 15px; font-weight: 700; }
.lf-ida { padding: 18px 18px 16px; }
.lf-ida span { display: block; font-size: 15px; font-weight: 700; color: var(--lf-gris); }
.lf-ida b { display: block; font-size: 52px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.lf-ida b small { font-size: 20px; letter-spacing: 0; }
.lf-vuelta { margin-top: auto; border-top: 3px dashed var(--lf-tinta); padding: 14px 18px 18px; }
.lf-vuelta span { display: block; font-size: 15px; font-weight: 700; color: var(--lf-gris); }
.lf-vuelta b { display: block; font-size: 17px; font-weight: 500; } /* David, 21/10: el «Después» sin destacar, con el peso del texto normal */
.lf-sello { position: absolute; right: 16px; top: 64px; transform: rotate(-9deg); border: 3px solid var(--lf-l1); color: var(--lf-l1); font-weight: 800; font-size: 15px; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .85); }
/* La oferta de lanzamiento de Core (02/11/2026): el segundo mes, entre el primero (grande) y el «Desde el tercer mes»
   (sin destacar); la nota con el IVA dicho una vez y la fecha límite; y la línea de la portada junto al botón. */
.lf-escalon { padding: 0 18px 16px; }
.lf-escalon span { display: block; font-size: 15px; font-weight: 700; color: var(--lf-gris); }
.lf-escalon b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.lf-oferta { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.45; color: var(--lf-gris); }
.lf-cabeza .lf-oferta-aviso { margin: 22px 0 0; font-size: 15px; line-height: 1.45; color: var(--lf-gris); max-width: 52ch; }
.lf-oferta-aviso b { color: var(--lf-tinta); font-weight: 800; }
.lf-oferta-aviso a { color: var(--lf-tinta); font-weight: 700; white-space: nowrap; }
/* «Lo nuevo» de la portada: cuatro líneas en dos columnas (una en el móvil). */
.lf-nuevo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .lf-nuevo { grid-template-columns: minmax(0, 1fr); } }
.lf-planes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lf-planes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; border: 3px solid var(--lf-tinta); border-radius: 12px; padding: 12px 16px; background: #fff; }
.lf-planes li .lf-bala { grid-row: span 2; font-size: 18px; }
.lf-planes b { font-size: 19px; font-weight: 800; }
/* Sin tocar la bala: con «.lf-planes span» a secas, la letra de cada plan salía en tinta sobre su color (la G sobre negro no se leía). */
.lf-planes span:not(.lf-bala) { color: #2B2E36; font-size: 16px; }
/* Las automatizaciones de la portada (20/10/2026): lo que Fold hace solo, en la lista de los planes, y al lado lo que se
   hace a medida en una tarjeta. Lo que aún no está (data-pronto) va con el borde discontinuo y su marca de estado. */
.lf-auto { align-items: start; }
.lf-auto .lf-cuerpo p { margin: 0 0 10px; }
.lf-planes li[data-pronto] { border-style: dashed; }
.lf-planes b .nv-estado { margin-left: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Lo que viene: en servicio, en obras y en proyecto */
.lf-prolongacion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.lf-prolongacion h3 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.lf-prolongacion .lf-estado { display: block; font-size: 15px; font-weight: 700; color: var(--lf-gris); margin-bottom: 18px; }
.lf-prolongacion ol { list-style: none; padding: 0 0 0 46px; margin: 0; position: relative; display: grid; gap: 22px; }
.lf-prolongacion ol::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 0; border-left: var(--lf-grosor) solid var(--k); }
.lf-prolongacion li { position: relative; font-weight: 600; line-height: 1.25; }
.lf-prolongacion li::before { content: ''; position: absolute; left: -46px; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 6px solid var(--lf-tinta); }
.lf-p-ya { --k: var(--lf-f); }
.lf-p-prox { --k: var(--lf-f); }
.lf-p-prox ol::before { border-left-style: dashed; }
.lf-p-meta { --k: #A3A7B3; }
.lf-p-meta ol::before { border-left-style: dotted; }
.lf-p-meta li { color: #3D414B; }
.lf-p-meta li::before { border-color: #8C909C; border-style: dashed; }

/* El horario de las llamadas */
.lf-horario-zona { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.lf-horario-zona > div > p { font-size: 21px; margin: 0 0 26px; max-width: 32ch; }
.lf-horario { border: 3px solid var(--lf-tinta); border-radius: 14px; overflow: hidden; background: #fff; }
.lf-horario .lf-cab { display: flex; align-items: center; gap: 12px; background: var(--lf-tinta); color: #fff; font-weight: 800; font-size: 19px; padding: 12px 16px; margin: 0; }
.lf-horario table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lf-horario th, .lf-horario td { text-align: left; padding: 13px 16px; border-top: 2px solid #ECEBE6; font-size: 18px; }
.lf-horario th { font-weight: 600; }
.lf-horario td { font-weight: 800; text-align: right; }
.lf-horario .lf-cerrado { color: var(--lf-l1); }
.lf-horario caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ los pósits */
.lf-posit { position: relative; display: inline-block; background-color: var(--c, var(--lf-amarillo)); color: var(--lf-tinta); font: 400 22px/1.12 var(--lf-mano); padding: 14px 16px 18px; transform: rotate(var(--g, -2deg)); max-width: 230px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .05) 0 13%, transparent 13% 82%, rgba(0, 0, 0, .04));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 16px 18px -14px rgba(40, 22, 6, .55); }
.lf-posit.lf-rosa { --c: var(--lf-rosa); } .lf-posit.lf-verde { --c: var(--lf-verde); } .lf-posit.lf-azulito { --c: var(--lf-azul); } .lf-posit.lf-papel { --c: #FFFDF8; }
.lf-posit b { font-weight: 400; color: var(--lf-f-osc); }
.lf-posits-pregunta { display: flex; flex-wrap: wrap; gap: 18px 22px; margin: 6px 0 34px; }

/* Fold, hecho de pósits (uno por píxel de su dibujo, que pone construir.js desde fold-pixel.js) */
.lf-fold-posits { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(13, 1fr); gap: 2px; aspect-ratio: 11 / 13; width: 132px; }
.lf-fold-posits .px { grid-column: var(--x); grid-row: var(--y); background: var(--pc); transform: rotate(var(--g)); box-shadow: 0 1px 1.5px rgba(40, 20, 0, .3); }
.lf-fold-posits .t-P { --pc: #F2EEE6; } .lf-fold-posits .t-s { --pc: #C9C3B6; } .lf-fold-posits .t-L { --pc: #DCD6C8; }
.lf-fold-posits .t-B { --pc: var(--lf-f); } .lf-fold-posits .t-b { --pc: var(--lf-f-osc); } .lf-fold-posits .t-o, .lf-fold-posits .t-t { --pc: #1E2026; }
.lf-saludo { display: flex; align-items: flex-end; gap: 18px; }
.lf-saludo .lf-posit { margin-bottom: 40px; }

/* ------------------------------------------------------------------ bloques de las páginas interiores */
.lf-bloque { width: var(--lf-ancho); margin: 96px auto 0; }
.lf-bloque > h2, .lf-h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; margin: 0 0 18px; max-width: 22ch; }
.lf-bloque > .lf-intro { font-size: 20px; color: #2B2E36; max-width: 52ch; margin: 0 0 30px; }
.lf-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.lf-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.lf-tarjeta { border: 3px solid var(--lf-tinta); border-radius: 14px; padding: 20px 20px 22px; background: #fff; }
.lf-tarjeta h3 { font-size: 21px; font-weight: 800; margin: 0 0 8px; display: flex; gap: 10px; align-items: center; }
.lf-tarjeta p { color: #2B2E36; font-size: 17px; }
.lf-tarjeta p + p { margin-top: 10px; }
.lf-tarjeta .nv-estado { margin-top: 12px; }
.lf-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lf-lista li { position: relative; padding-left: 34px; font-size: 18px; }
.lf-lista li::before { content: ''; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--k, var(--lf-f)); background: #fff; }
.lf-cierre { width: var(--lf-ancho); margin: 110px auto 0; border: 3px solid var(--lf-tinta); border-radius: 14px; padding: 34px 34px 36px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 34px; align-items: center; background: #fff; }
.lf-cierre h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.lf-cierre p { color: #2B2E36; font-size: 19px; }

/* ------------------------------------------------------------------ la calculadora de tiempo */
.lf-calc { width: var(--lf-ancho); margin: 40px auto 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; align-items: start; }
/* Dentro de un tramo de la portada (20/10/2026) ocupa el ancho del tramo, no el de la página. */
.lf-tramo .lf-calc { width: auto; margin-top: 0; }
.lf-calc-form { border: 3px solid var(--lf-tinta); border-radius: 14px; padding: 22px 22px 20px; display: grid; gap: 18px; background: #fff; }
.lf-calc-campo label { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.lf-calc-opcional label span { font-weight: 600; color: var(--lf-gris); }
.lf-unidad { display: inline-flex; align-items: center; gap: 10px; }
.lf-unidad input { width: 132px; min-height: 52px; font: 700 22px/1 'Archivo', sans-serif; padding: 0 12px; border: 3px solid var(--lf-tinta); border-radius: 8px; background: #fff; color: var(--lf-tinta); font-variant-numeric: tabular-nums; }
.lf-unidad input:focus-visible { outline: 3px solid var(--lf-f); outline-offset: 2px; }
.lf-unidad input[aria-invalid="true"] { border-color: var(--lf-l1); background: #FFF1F0; }
.lf-unidad span { font-weight: 700; color: var(--lf-gris); }
.lf-calc-campo small { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--lf-gris); }
.lf-calc-ejemplo { font-size: 15px; color: var(--lf-gris); }
.lf-calc-aviso { color: #B42318; font-weight: 700; }
.lf-calc-sale { border: 3px solid var(--lf-tinta); border-radius: 14px; padding: 22px 22px 24px; background: #fff; }
.lf-calc-sale .lf-recorrido-zona { width: auto; margin: 0; }
.lf-calc-sale .lf-recorrido .lf-p-fin b { font-size: 46px; }
.lf-calc-formula { margin-top: 24px; font-variant-numeric: tabular-nums; background: #F6F5F1; border-radius: 8px; padding: 12px 14px; font-size: 16px; }
.lf-calc-valor { margin-top: 18px; border-left: 8px solid var(--lf-l2); padding: 6px 14px; }
.lf-calc-valor p:first-child { font-size: 18px; font-weight: 600; }
.lf-calc-valor p:first-child b { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.lf-calc-etq { font-size: 15px; color: var(--lf-gris); font-weight: 600; margin-top: 2px; }
.lf-calc-sin-datos .lf-calc-sale [data-sale] { color: #8C909C; }

/* Los estados del producto, sobre blanco */
.nv-estado { color: var(--lf-tinta); border-color: rgba(17, 19, 24, .3); }

/* ------------------------------------------------------------------ las animaciones (solo AÑADEN) */
/* El tren recorre las paradas de la respuesta; cada parada «se enciende» cuando pasa. */
@keyframes lf-viaja { from { left: 0; } to { left: calc(var(--fin, 81.2%) - 66px); } }
@keyframes lf-paso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); background: var(--k, var(--lf-f)); } }
html.lf-anima .lf-recorrido-zona.lf-ve .lf-tren { animation: lf-viaja 3.2s cubic-bezier(.45, 0, .3, 1) .3s both; }
html.lf-anima .lf-recorrido-zona.lf-ve .lf-marca { animation: lf-paso .5s ease-out calc(var(--n, 0) * .5s + .4s) both; }
html.lf-anima .lf-recorrido-zona.lf-ve .lf-p-fold .lf-marca, html.lf-anima .lf-recorrido-zona.lf-ve .lf-p-fin .lf-marca { animation-name: lf-paso-quieto; }
@keyframes lf-paso-quieto { 50% { transform: scale(1.14); } }
/* El resultado aparece de verdad al llegar el tren: la cifra está escrita en el HTML; solo cambia su tamaño un momento. */
@keyframes lf-llega { 0%, 85% { transform: none; } 92% { transform: scale(1.08); } 100% { transform: none; } }
html.lf-anima .lf-recorrido-zona.lf-ve .lf-p-fin b { animation: lf-llega 3.6s ease-out both; transform-origin: left center; }

/* La línea se dibuja al bajar: --lf-trazo lo mueve lf-animaciones.js; sin script, 1 (entera). */

/* Los pósits se pegan: llegan un poco levantados y girados, y se asientan. Nunca invisibles. */
@keyframes lf-pega { from { transform: translate(-3px, -18px) rotate(calc(var(--g, -2deg) + 10deg)); box-shadow: 0 26px 26px -12px rgba(40, 22, 6, .35); } }
html.lf-anima .lf-pega.lf-ve, html.lf-anima .lf-pega.lf-ve .lf-posit { animation: lf-pega .6s cubic-bezier(.2, .9, .3, 1.25) calc(var(--n, 0) * .14s) both; }

/* Fold de pósits: se pega píxel a píxel y saluda con la esquina azul */
@keyframes lf-px { from { transform: translate(-3px, -14px) rotate(calc(var(--g) + 14deg)); } }
html.lf-anima .lf-fold-posits.lf-ve .px { animation: lf-px .5s cubic-bezier(.2, .9, .3, 1.25) calc(var(--i) * 35ms) both; }
@keyframes lf-saluda { 0%, 60%, 100% { transform: rotate(var(--g)); } 70% { transform: rotate(calc(var(--g) - 24deg)) translateY(-2px); } 80% { transform: rotate(calc(var(--g) + 16deg)); } 90% { transform: rotate(calc(var(--g) - 12deg)); } }
html.lf-anima .lf-fold-posits.lf-ve .px.t-B, html.lf-anima .lf-fold-posits.lf-ve .px.t-b { animation: lf-px .5s cubic-bezier(.2, .9, .3, 1.25) calc(var(--i) * 35ms) both, lf-saluda 2.4s ease-in-out 1.4s 2; transform-origin: 0 100%; }
@keyframes lf-parpadea { 0%, 92%, 100% { transform: rotate(var(--g)) scaleY(1); } 95% { transform: rotate(var(--g)) scaleY(.15); } }
html.lf-anima .lf-fold-posits.lf-ve .px.t-o { animation: lf-px .5s cubic-bezier(.2, .9, .3, 1.25) calc(var(--i) * 35ms) both, lf-parpadea 4.2s ease-in-out 2s infinite; }

/* ------------------------------------------------------------------ Fold se asoma (19/10/2026)
   «TODAS CON FOLD»: en las páginas principales, el símbolo oficial asoma la cabeza por el borde de
   arriba de la pieza de la cabecera y hace su gesto (construir.js, foldAsoma). Pequeño y a la derecha,
   lejos del titular. La caja mide 150×92 y su línea y=84 es el borde de la pieza: la ventana recorta
   el símbolo justo ahí, y las manos de agarrarse quedan encima del borde. Sin JavaScript, o con
   «reducir movimiento», se ve en su postura final; con html.lf-anima parte asomando solo la coronilla
   (nunca escondido del todo) y sube cuando entra en pantalla. */
.lf-con-asoma { position: relative; }
.lf-validadora .lf-con-asoma { max-width: 460px; margin-inline: auto; }
.lf-asoma { position: absolute; right: 22px; bottom: calc(100% - 8px); width: 150px; height: 92px; pointer-events: none; z-index: 2; }
.lf-asoma-ventana { position: absolute; left: 23px; top: 0; width: 104px; height: 85px; overflow: hidden; }
.lf-asoma-fold { position: absolute; left: 0; top: 4px; width: 104px; height: 104px; max-width: none; transform: rotate(var(--lf-asoma-giro, 0deg)); transform-origin: 50% 85%; }
.lf-asoma-dibujo { position: absolute; inset: 0; width: 150px; height: 92px; overflow: visible; fill: #F2EEE6; stroke: #111318; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lf-asoma-dibujo .lf-dedo, .lf-asoma-dibujo .lf-ring, .lf-asoma-dibujo .lf-aguja, .lf-asoma-dibujo .lf-marca-ok { fill: none; }
.lf-asoma-dibujo .lf-dedo { stroke-width: 1.8; }
.lf-asoma-dibujo .lf-aguja { stroke-width: 2.6; }
.lf-asoma[data-gesto="telefono"] { --lf-asoma-giro: 5deg; }
.lf-asoma[data-gesto="reloj"] { --lf-asoma-giro: 7deg; }
.lf-asoma[data-gesto="lupa"] { --lf-asoma-giro: 4deg; }
.lf-asoma[data-gesto="lapiz"] { --lf-asoma-giro: 5deg; }
.lf-asoma[data-gesto="ticket"] { --lf-asoma-giro: -3deg; }
.lf-asoma-cosa, .lf-asoma-dibujo .lf-aguja, .lf-asoma-dibujo .lf-manos { transform-box: view-box; }
@keyframes lf-asoma-sube { from { transform: translateY(46px) rotate(0deg); } 70% { transform: translateY(-4px) rotate(var(--lf-asoma-giro, 0deg)); } to { transform: rotate(var(--lf-asoma-giro, 0deg)); } }
@keyframes lf-asoma-cosa { from { transform: translateY(26px) scale(.5); opacity: .4; } 70% { transform: translateY(-3px) scale(1.05); opacity: 1; } to { transform: none; } }
@keyframes lf-asoma-tira { 0%, 100% { transform: none; } 50% { transform: translateY(2px); } }
@keyframes lf-asoma-suena { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes lf-asoma-ondas { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes lf-asoma-corre { to { transform: rotate(360deg); } }
@keyframes lf-asoma-busca { 0%, 100% { transform: none; } 33% { transform: translate(-7px, 2px); } 66% { transform: translate(4px, -2px); } }
@keyframes lf-asoma-escribe { 0%, 100% { transform: none; } 25% { transform: translate(-2px, 2px) rotate(-4deg); } 75% { transform: translate(2px, -1px) rotate(3deg); } }
@keyframes lf-asoma-otea { 0%, 100% { transform: none; } 50% { transform: rotate(-5deg); } }
html.lf-anima .lf-asoma:not(.lf-ve) .lf-asoma-fold { transform: translateY(46px); }
html.lf-anima .lf-asoma:not(.lf-ve) .lf-asoma-cosa { transform: translateY(26px) scale(.5); }
html.lf-anima .lf-asoma.lf-ve .lf-asoma-fold { animation: lf-asoma-sube .8s cubic-bezier(.2, .9, .3, 1.2) var(--lf-asoma-espera, .5s) both; }
html.lf-anima .lf-asoma.lf-ve .lf-asoma-cosa { transform-origin: 120px 46px; animation: lf-asoma-cosa .6s cubic-bezier(.2, .9, .3, 1.25) calc(var(--lf-asoma-espera, .5s) + .6s) both; }
html.lf-anima .lf-validadora .lf-asoma { --lf-asoma-espera: 1.2s; }
html.lf-anima .lf-asoma.lf-ve[data-gesto="ticket"] .lf-manos { animation: lf-asoma-tira .45s ease-in-out 2.1s 2; }
html.lf-anima .lf-asoma.lf-ve[data-gesto="telefono"] .lf-asoma-cosa { transform-origin: 112px 60px; animation: lf-asoma-cosa .6s cubic-bezier(.2, .9, .3, 1.25) 1.1s both, lf-asoma-suena .25s linear 1.8s 6; }
html.lf-anima .lf-asoma.lf-ve[data-gesto="telefono"] .lf-ring { animation: lf-asoma-ondas .5s linear 1.8s 3; }
html.lf-anima .lf-asoma.lf-ve[data-gesto="reloj"] .lf-aguja { transform-origin: 120.5px 39px; animation: lf-asoma-corre 1.6s linear 1.8s 2; }
html.lf-anima .lf-asoma.lf-ve[data-gesto="lupa"] .lf-asoma-cosa { animation: lf-asoma-cosa .6s cubic-bezier(.2, .9, .3, 1.25) 1.1s both, lf-asoma-busca 1.4s ease-in-out 1.8s 2; }
html.lf-anima .lf-asoma.lf-ve[data-gesto="lapiz"] .lf-asoma-cosa { transform-origin: 114px 60px; animation: lf-asoma-cosa .6s cubic-bezier(.2, .9, .3, 1.25) 1.1s both, lf-asoma-escribe .35s ease-in-out 1.8s 4; }
html.lf-anima .lf-asoma.lf-ve[data-gesto="catalejo"] .lf-asoma-cosa { transform-origin: 82px 55px; animation: lf-asoma-cosa .6s cubic-bezier(.2, .9, .3, 1.25) 1.1s both, lf-asoma-otea 2s ease-in-out 1.8s 2; }

/* ------------------------------------------------------------------ móvil y tableta */
@media (max-width: 1100px) {
  .nav { display: none; }
  .lf-cab-llamada { display: none; }
}
@media (max-width: 1000px) {
  .lf-cabeza { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 34px; }
  .lf-ramales, .lf-dos, .lf-tres { grid-template-columns: minmax(0, 1fr); }
  .lf-billetes { grid-template-columns: minmax(0, 1fr); }
  .lf-prolongacion { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lf-horario-zona, .lf-cierre, .lf-calc, .lf-descarga, .lf-lista-dos { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lf-red .nv-mapa-fila { grid-template-columns: minmax(0, 1fr); }
  .lf-reloj-zona { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .lf-reloj-posit { position: static; margin-top: 10px; }
  /* El recorrido, en vertical: se lee de arriba abajo, como un plano de andén */
  .lf-recorrido { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lf-recorrido > li { padding: 6px 0 22px 70px; min-height: 64px; }
  .lf-recorrido > li:not(:last-child)::before { left: 16px; right: auto; width: var(--lf-grosor); top: 22px; bottom: -22px; height: auto; }
  .lf-marca { top: 0; left: 0; }
  .lf-recorrido .lf-p-fold .lf-marca { left: -10px; top: -8px; width: 64px; height: 70px; }
  .lf-recorrido .lf-p-fold { padding-top: 12px; }
  .lf-recorrido .lf-p-fin .lf-marca { left: -7px; }
  .lf-tren { display: none; }
  /* Fold asomándose: en una columna, la pieza deja sitio arriba para que no pise el texto de encima. */
  .lf-con-asoma { margin-top: 62px; }
  .lf-validadora .lf-con-asoma { margin-top: 0; }
  .lf-validadora { margin-top: 62px; }
}
@media (max-width: 700px) {
  /* El vídeo de Fold, vertical en el móvil (su <source media> es el de 9:16): alto de sobra sin comerse la pantalla. */
  .lf-pantalla .lf-marco { aspect-ratio: 9 / 16; width: min(100%, calc(68svh * 9 / 16)); margin-inline: auto; }
  .lf-pantalla { background: var(--lf-tinta); }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .cabecera .envoltura { gap: 10px; }
  .marca img { height: 24px; }
  .lf-sub { font-size: 19px; }
  .lf-recorrido-zona { margin-top: 56px; }
  .lf-linea { padding-left: 52px; margin-top: 80px; }
  .lf-linea::before { left: 6px; }
  .lf-estacion::before { left: -54px; width: 28px; height: 28px; border-width: 6px; }
  .lf-estacion::after { display: none; }
  .lf-tramo { padding-bottom: 80px; }
  .lf-ramal .lf-cab { font-size: 19px; padding: 12px 14px; }
  .lf-ramal .lf-cuerpo { padding: 14px 14px 16px; }
  .lf-ida b { font-size: 44px; }
  .lf-horario th, .lf-horario td { padding: 12px; font-size: 17px; }
  .lf-cierre { padding: 24px 20px 26px; }
  .lf-fin-linea::before { left: 6px; }
  .lf-fin-linea::after { left: -5px; width: 34px; }
  .lf-bloque { margin-top: 72px; }
  .lf-posit { font-size: 20px; }
  /* La ficha de descarga, en una columna: con Fold al lado, el texto (pasos y antivirus) quedaba en 222 px a 390. */
  .lf-descarga .descarga-ficha { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 18px; }
  .lf-descarga .descarga-ficha > .fold { width: 64px; height: 56px; }
}

/* ------------------------------------------------------------------ reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  html.lf-anima *, html.lf-anima *::before, html.lf-anima *::after { animation: none !important; transition: none !important; }
  .lf-linea::before { transform: none !important; }
}
@media print {
  html.lf-anima *, html.lf-anima *::before, html.lf-anima *::after { animation: none !important; }
}