/* Social Ride, web «Garaje neón». Una hoja para todas las páginas. Solo de noche.
   Detrás de todo va la carretera viva (canvas #autopista, fijo). Lo demás pasa por encima.
   Todo lo que se mueve va con transform u opacity, o en canvas. */

@font-face {
  font-family: "Barlow Condensed";
  font-weight: 800;
  font-display: swap;
  src: url("fonts/barlow-condensed-800.woff") format("woff");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-condensed-500.woff") format("woff");
}

:root {
  --fondo: #050507;
  --fondo-2: #0e0e12;
  --fondo-3: #17171d;
  --texto: #f3efe8;
  --suave: #aaa69e;
  --borde: rgba(255, 255, 255, .09);
  --rojo: #ff2438;           /* luz del tubo rojo */
  --rojo-boton: #e5101f;     /* el botón, sólido */
  --rojo-texto: #ff5262;
  --tubo-rojo: #ffe1e3;      /* el núcleo del tubo, casi blanco */
  --ambar: #ffb21a;
  --tubo-ambar: #fff1cf;
  --frio: #f7f3ec;
  --apagado: #3a3a42;        /* tubo sin luz */
  --titular: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1200px;
  --gutter: 16px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--letra); font-size: 17px; line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titular); font-weight: 800; line-height: .95; margin: 0; text-transform: uppercase; letter-spacing: .005em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--texto); color: var(--fondo); padding: 10px 14px; border-radius: 8px; }
.saltar:focus { top: 12px; }
.envoltorio { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ── la carretera viva, fija detrás de toda la página ── */
.autopista { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; background: var(--fondo); }
main, .pie, .previa { position: relative; z-index: 2; }

.previa { background: var(--ambar); color: #111; text-align: center; font-size: 12px; font-weight: 600; padding: 3px 8px; }

/* ── cabecera ─────────────────────────────────── */
/* Sin backdrop-filter: encima de un canvas que se mueve, el desenfoque se recalcula en cada
   fotograma y en el navegador de Instagram se nota. Un fondo casi opaco se ve igual. */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(5, 5, 7, .9); border-bottom: 1px solid var(--borde); }
.cabecera .envoltorio { display: flex; align-items: center; gap: 8px; height: 60px; }
.marca { display: flex; align-items: center; gap: 7px; text-decoration: none; margin-right: auto; min-height: 44px; flex-shrink: 0; min-width: 44px; }
.marca img { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.marca span { white-space: nowrap; font-family: var(--titular); font-weight: 800; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; }
.marca b { color: var(--rojo-texto); }
/* por debajo de 340 px no cabe el nombre junto al botón y el menú, se queda el logo */
@media (max-width: 339px) { .marca span { display: none; } }
@media (min-width: 560px) { .cabecera .envoltorio { gap: 12px; } .marca span { font-size: 21px; } .marca { gap: 9px; } }
.boton-mini { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--rojo-boton); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
@media (min-width: 560px) { .boton-mini { padding: 0 16px; } }
.menu-boton { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--borde); background: transparent; color: var(--texto); display: grid; place-items: center; cursor: pointer; }
.menu-boton svg { width: 22px; height: 22px; }
.navegacion { position: absolute; left: 0; right: 0; top: 100%; background: var(--fondo); border-bottom: 1px solid var(--borde); display: none; }
.navegacion.abierta { display: block; }
.navegacion ul { list-style: none; margin: 0 auto; padding: 8px var(--gutter) 16px; max-width: var(--ancho); }
.navegacion a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-family: var(--titular); font-weight: 800; font-size: 24px; text-transform: uppercase; border-bottom: 1px solid var(--borde); }
@media (min-width: 1024px) {
  .menu-boton { display: none; }
  .navegacion { position: static; display: block; background: none; border: 0; order: 1; margin-left: 28px; margin-right: auto; }
  .boton-mini { order: 2; }
  .marca { margin-right: 0; }
  .navegacion ul { display: flex; gap: 22px; padding: 0; }
  .navegacion a { font-size: 17px; border: 0; min-height: 44px; min-width: 44px; justify-content: center; color: var(--suave); }
  .navegacion a:hover, .navegacion a[aria-current] { color: var(--texto); }
  .navegacion ul { gap: 18px; }
  .navegacion .idioma { margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--borde); }
}
/* El conmutador de idioma, en letra normal para que no se lea como una sección más. */
.navegacion .idioma a { font-family: var(--letra); text-transform: none; font-weight: 600; font-size: 17px; color: var(--suave); }
.navegacion a[aria-current] { color: var(--texto); }
@media (max-width: 1023px) { .navegacion a[aria-current] { color: var(--rojo-texto); } }

/* ── botones ──────────────────────────────────── */
.botones { display: grid; gap: 12px; justify-items: start; }
.boton {
  position: relative; z-index: 2; display: inline-flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 10px 24px; border-radius: 14px;
  background: var(--rojo-boton); color: #fff; text-decoration: none; line-height: 1.15;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 30px -8px rgba(229, 16, 31, .75);
  transition: transform .15s;
}
.boton strong { font-family: var(--titular); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; }
.boton small { font-size: 13px; opacity: .9; }
.boton:active { transform: scale(.98); }
.boton.oscuro { background: var(--fondo-3); color: var(--texto); box-shadow: 0 0 0 1px var(--borde) inset; }
.enlace-secundario { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rojo-texto); text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ── tubos de neón (texto) ────────────────────── */
.neon-rojo {
  color: var(--tubo-rojo);
  text-shadow: 0 0 2px #fff, 0 0 8px var(--rojo), 0 0 20px var(--rojo), 0 0 42px rgba(255, 36, 56, .7);
}
.neon-ambar {
  color: var(--tubo-ambar);
  text-shadow: 0 0 2px #fff, 0 0 8px var(--ambar), 0 0 22px rgba(255, 178, 26, .75);
}

/* ── portada ──────────────────────────────────── */
/* La portada ocupa la primera pantalla y deja abajo el hueco para la carretera y sus mandos. */
.portada { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: calc(100vh - 81px); min-height: calc(100svh - 81px); }
.portada::before { /* juntas de ladrillo muy flojas y un halo rojo detrás del rótulo, sin tapar la carretera */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 45% at var(--halo-x, 50%) var(--halo-y, 22%), rgba(255, 36, 56, .16), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255, 255, 255, .02) 27px 28px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent 75%); mask-image: linear-gradient(#000 45%, transparent 75%);
}
/* velo oscuro detrás de la entradilla y los botones, por si un faro pasa por detrás */
.portada .entradilla, .portada .botones { position: relative; }
.portada .entradilla::before, .portada .botones::before {
  content: ""; position: absolute; inset: -10px -22px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 5, 7, .92) 60%, rgba(5, 5, 7, 0));
}
/* Móvil y tableta: el rótulo va pequeño a la derecha del sello, y el titular, la entradilla
   y el botón principal suben. Así el botón cabe en el primer pantallazo incluso dentro del
   navegador de Instagram (390x664) y a 360x640. */
.portada-rejilla { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "sello rotulo"; column-gap: 12px; row-gap: 12px; padding-top: 14px; padding-bottom: 24px; text-align: left; justify-items: start; }
.portada-rejilla > .rotulo-caja { grid-area: rotulo; }
@media (max-width: 1099px) {
  .portada-texto { display: contents; }
  .portada-texto > .sello { grid-area: sello; align-self: end; margin-bottom: 4px; }
  .portada-texto > :not(.sello) { grid-column: 1 / -1; }
}
.rotulo { position: relative; width: 74px; aspect-ratio: 352 / 516; cursor: pointer; border: 0; padding: 0; background: none; -webkit-tap-highlight-color: transparent; }
.rotulo-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tubo use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tb-h { stroke: var(--rojo); stroke-width: 18; opacity: .16; }
.tb-m { stroke: var(--rojo); stroke-width: 7; opacity: .6; }
.tb-c { stroke: var(--tubo-rojo); stroke-width: 2.6; }
.tb-h, .tb-m, .tb-c { transition: opacity .4s, stroke .4s; }
/* el encendido: cada tubo arranca con su parpadeo, a su tiempo */
.tubo { opacity: 1; }
.js .encendiendo .tubo { animation: arranque 1.5s steps(1, end) var(--d) both; }
@keyframes arranque {
  0% { opacity: .08; } 12% { opacity: .9; } 16% { opacity: .1; } 30% { opacity: .1; }
  34% { opacity: 1; } 40% { opacity: .25; } 46% { opacity: 1; } 58% { opacity: .5; } 62%, 100% { opacity: 1; }
}
/* el zumbido: de vez en cuando un tubo tiembla */
.tubo.zumba { animation: zumbido .5s steps(1, end); }
@keyframes zumbido { 0% { opacity: .35; } 20% { opacity: 1; } 40% { opacity: .55; } 60%, 100% { opacity: 1; } }
/* El rótulo en el charco. La caja cae justo debajo del rótulo, enseña su mitad de abajo
   (svg pegado al fondo de la caja) y se voltea sobre su propio centro: las botas quedan
   arriba, tocando el suelo, y el casco se pierde hacia abajo. El mask se aplica antes del
   volteo, por eso va de abajo (opaco) a arriba (transparente). */
.rotulo-reflejo {
  position: absolute; left: 0; right: 0; top: 100%; height: 55%; transform: scaleY(-1); transform-origin: 50% 50%; opacity: .3;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%);
  filter: blur(2px); pointer-events: none; overflow: hidden; display: none;
}
.rotulo-reflejo .rotulo-svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
@media (min-width: 1100px) { .rotulo-reflejo { display: block; } }

.sello { display: inline-flex; align-items: center; white-space: nowrap; gap: 8px; font-family: var(--titular); font-weight: 800; font-size: 19px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 14px; border: 2px solid currentColor; border-radius: 999px; }
.sello svg { width: 18px; height: 18px; }
.sello { box-shadow: 0 0 10px rgba(255, 178, 26, .45), inset 0 0 10px rgba(255, 178, 26, .35); }
.portada h1 { font-size: clamp(38px, 10.6vw, 92px); max-width: 17ch; }
.portada h1 .neon-rojo { display: inline-block; }
.portada .entradilla { color: #cfcac1; max-width: 38ch; font-size: 16px; }
.portada .botones { justify-items: start; margin-top: 4px; }
.portada .pista { font-size: 13px; color: var(--suave); }
@media (min-width: 560px) { .rotulo { width: 104px; } }
@media (min-width: 700px) and (min-height: 820px) { .rotulo { width: 150px; } }
@media (min-width: 820px) {
  .portada .entradilla { font-size: 18px; }
}
@media (min-width: 1100px) {
  .portada-rejilla { grid-template-columns: 1.25fr .75fr; grid-template-areas: "texto rotulo"; align-items: center; padding-top: 36px; padding-bottom: 24px; gap: 24px 56px; }
  .portada-rejilla > .portada-texto { grid-area: texto; }
  .rotulo-caja { justify-self: center; margin-bottom: 120px; }
  .rotulo { width: 300px; }
  .portada h1 { max-width: 15ch; font-size: clamp(56px, 6.2vw, 96px); margin-top: 6px; }
}
@media (min-width: 1100px) { .portada-texto { display: grid; gap: 14px; justify-items: start; } }
.rotulo-caja { position: relative; }
.toca { position: absolute; right: -6px; bottom: 8px; font-family: var(--titular); font-weight: 500; font-size: 13px; color: var(--suave); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); pointer-events: none; }
/* en móvil el rótulo está pegado al borde derecho, así que la pista va a su izquierda, arriba,
   lejos del sello (que se apoya abajo) */
@media (max-width: 1099px) { .toca { right: 100%; top: 6px; bottom: auto; white-space: nowrap; padding-right: 4px; } }

/* ── secciones ────────────────────────────────── */
.seccion { padding: 72px 0; position: relative; scroll-margin-top: 64px; }
.seccion-cabeza { max-width: 640px; margin-bottom: 28px; }
.seccion-cabeza h2 { font-size: clamp(38px, 9vw, 72px); }
.seccion-cabeza p { color: var(--suave); margin-top: 10px; }

/* ── el garaje: el móvil que gira con el scroll ── */
.garaje { display: grid; position: relative; }
.garaje > * { grid-area: 1 / 1; }
.escena {
  /* En móvil la escena ocupa el 48 % de arriba (con el 40 % el móvil medía 125 px de ancho y la captura no se leía) y el texto del paso activo vive en la franja
     de abajo, que nunca queda tapada. svh en vez de vh: la barra del navegador de Instagram
     cambia el alto de la ventana al hacer scroll y con vh la escena daba saltos. */
  position: sticky; top: 61px; height: calc(48vh + 10px); height: calc(48svh + 10px); z-index: 2; align-self: start;
  display: grid; place-items: center; perspective: 1100px; pointer-events: none;
  /* Opaco: con .93 el texto del paso anterior se leía a través, detrás del teléfono. La
     carretera sigue viva en la franja de abajo, donde va el texto. */
  background: #050507;
}
.escena::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; background: linear-gradient(#050507, transparent); }
.telefono {
  --ry: -14deg; --rx: 6deg;
  position: relative; height: 44vh; height: 44svh; max-height: 560px; aspect-ratio: 440 / 930; border-radius: 13% / 6.2%;
  background: linear-gradient(140deg, #3b3b44, #0e0e12 40%, #26262e);
  padding: 2.8%; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.telefono::before { /* el canto del móvil, que da el grosor al girar */
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: #08080a; transform: translateZ(-10px);
}
.telefono::after { /* el resplandor rojo que le pega por detrás */
  content: ""; position: absolute; inset: 8% -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 36, 56, .45), transparent);
  transform: translateZ(-40px);
}
.pantalla { position: relative; width: 100%; height: 100%; border-radius: 11% / 5.2%; overflow: hidden; background: #000; transform: translateZ(1px); }
/* Las capturas: cualquier hijo con data-pantalla. */
.pantalla > [data-pantalla] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity .45s, transform .6s; }
.pantalla > [data-pantalla].activa { opacity: 1; transform: none; }
.pantalla::after { /* brillo del cristal, se mueve con el giro */
  content: ""; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .13) 50%, transparent 60%);
  transform: translateX(var(--brillo, 0%)); pointer-events: none;
}
.luces { position: absolute; bottom: 4px; display: flex; gap: 10px; }
.luces span { width: 10px; height: 10px; border-radius: 50%; background: var(--apagado); transition: background .3s, box-shadow .3s; }
.luces span.on { background: var(--rojo); box-shadow: 0 0 8px var(--rojo), 0 0 16px var(--rojo); }

.pasos-garaje { list-style: none; margin: 0; padding: calc(48vh + 40px) 0 6vh; padding: calc(48svh + 40px) 0 6svh; position: relative; z-index: 1; }
.paso-g { padding-bottom: 22vh; padding-bottom: 22svh; }
/* En móvil el número y el título se quedan pegados justo debajo del teléfono mientras su
   texto pasa por debajo, así el paso que se está leyendo nunca pierde la cabeza tras la
   escena. El siguiente paso empuja al anterior al llegar. */
@media (max-width: 899px) {
  .paso-cabeza {
    position: sticky; top: calc(71px + 48vh); top: calc(71px + 48svh); z-index: 1;
    /* Opaco: con .93 el renglón del párrafo que pasaba por debajo se leía a través del título */
    background: #050507; padding: 6px 0 4px; margin-bottom: 8px;
    box-shadow: 0 14px 14px -6px #050507;
  }
  .paso-cabeza .num { font-size: 44px; margin-bottom: 4px; }
  .paso-g .paso-cabeza h3 { margin-bottom: 4px; }
}
.paso-g:last-child { padding-bottom: 4vh; }
.paso-g > div { max-width: 520px; transition: opacity .4s; }
.js .paso-g:not(.activo) > div { opacity: .35; }
.num { font-family: var(--titular); font-weight: 800; font-size: 64px; line-height: .8; display: block; margin-bottom: 8px; color: transparent; -webkit-text-stroke: 2px var(--apagado); transition: color .3s, text-shadow .3s, -webkit-text-stroke-color .3s; }
.paso-g.activo .num { -webkit-text-stroke-color: var(--rojo); }
.paso-g.activo .num { color: transparent; text-shadow: 0 0 14px rgba(255, 36, 56, .8); }
.paso-g h3 { font-size: clamp(32px, 8vw, 52px); margin-bottom: 12px; }
.paso-g p { color: var(--suave); }
.paso-g ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.paso-g li { padding-left: 22px; position: relative; }
.paso-g li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 3px; border-radius: 2px; background: var(--rojo); box-shadow: 0 0 6px rgba(255, 36, 56, .9); }
.plataformas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.plataformas span { font-family: var(--titular); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--borde); }
@media (min-width: 900px) {
  .garaje { grid-template-columns: 1fr 1fr; gap: 48px; }
  .garaje > * { grid-area: auto; }
  .escena { grid-column: 2; grid-row: 1; top: 70px; height: calc(100vh - 90px); height: calc(100svh - 90px); background: none; }
  .escena::after { display: none; }
  .telefono { height: min(72vh, 640px); height: min(72svh, 640px); max-height: none; }
  .pasos-garaje { grid-column: 1; grid-row: 1; padding: 10vh 0 20vh; }
  .paso-g { display: flex; min-height: 90vh; align-items: center; padding-bottom: 0; }
  .paso-g:last-child { min-height: 70vh; }
}

/* ── el cartel del podio ──────────────────────── */
.cartel {
  position: relative; max-width: 760px; margin: 0 auto; padding: 30px 16px 26px; border-radius: 22px;
  background: linear-gradient(#111116, #08080b); border: 3px solid #2a2a31;
  box-shadow: 0 30px 80px -30px rgba(255, 36, 56, .5);
}
.bombillas { position: absolute; inset: 7px; border-radius: 16px; pointer-events: none; }
.bombillas::before, .bombillas::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  /* 2 hileras de bombillas que se turnan, sólo con opacity */
  border: 6px dotted var(--ambar); filter: drop-shadow(0 0 4px var(--ambar));
}
.bombillas::after { border-color: #ffe7b0; border-width: 4px; inset: 5px; opacity: .25; }
.cartel.en-marcha .bombillas::after { animation: bombillas 1.2s steps(1, end) infinite; }
.cartel.en-marcha .bombillas::before { animation: bombillas 1.2s steps(1, end) infinite reverse; }
@keyframes bombillas { 0% { opacity: 1; } 50% { opacity: .25; } }
.cartel-titulo { text-align: center; margin-bottom: 18px; }
.cartel-titulo h2 { font-size: clamp(30px, 8vw, 56px); }
.cartel-titulo .periodo { display: block; font-family: var(--titular); font-weight: 800; font-size: clamp(20px, 5vw, 30px); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.podio { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 6px; align-items: end; }
.puesto { display: grid; justify-items: center; text-align: center; text-decoration: none; gap: 4px; min-width: 0; }
.js .puesto { opacity: .14; transition: opacity .12s; }
.js .puesto.luce { opacity: 1; animation: zumbido .45s steps(1, end); }
.puesto .nombre { font-weight: 700; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puesto .km { font-family: var(--titular); font-weight: 800; font-size: clamp(24px, 6.4vw, 40px); line-height: 1; white-space: nowrap; }
.puesto .km small { font-size: .5em; }
.puesto.primero .km { font-size: clamp(30px, 8vw, 52px); }
/* La cifra es lo que se viene a ver (CLAUDE.md §4): halo fino, sin las capas anchas del tubo
   que emborronaban «5566,8» en tamaño pequeño. */
.puesto .km.neon-rojo { color: #ffd9dc; text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 0 7px rgba(255, 36, 56, .75); }
.puesto .km.neon-ambar { color: #ffeccc; text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 0 7px rgba(255, 178, 26, .7); }
.puesto.vacio .nombre { white-space: normal; font-weight: 600; color: var(--suave); }
.puesto.vacio .km { font-size: 16px; font-family: var(--letra); font-weight: 600; color: var(--suave); text-shadow: none; }
.fr { position: relative; width: clamp(84px, 24vw, 140px); aspect-ratio: 1; }
.primero .fr { width: clamp(104px, 30vw, 184px); }
.fr .fr-ava { position: absolute; object-fit: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* hueco medido de cada marco, igual que la web previa (medidas, no a ojo) */
.fr.r1 .fr-ava { left: 22.5%; top: 27.7%; width: 54.4%; height: 53.3%;
  -webkit-mask-image: url(img/marco1-hueco.png); mask-image: url(img/marco1-hueco.png);
  -webkit-mask-size: 183.9% 187.5%; mask-size: 183.9% 187.5%;
  -webkit-mask-position: 49.3% 59.4%; mask-position: 49.3% 59.4%; }
.fr.r2 .fr-ava { left: 22.9%; top: 27.7%; width: 54.0%; height: 51.9%;
  -webkit-mask-image: url(img/marco2-hueco.png); mask-image: url(img/marco2-hueco.png);
  -webkit-mask-size: 185.3% 192.8%; mask-size: 185.3% 192.8%;
  -webkit-mask-position: 49.8% 57.6%; mask-position: 49.8% 57.6%; }
.fr.r3 .fr-ava { left: 22.5%; top: 28.1%; width: 55.0%; height: 52.1%;
  -webkit-mask-image: url(img/marco3-hueco.png); mask-image: url(img/marco3-hueco.png);
  -webkit-mask-size: 181.8% 192.0%; mask-size: 181.8% 192.0%;
  -webkit-mask-position: 50.0% 58.7%; mask-position: 50.0% 58.7%; }
.fr .fr-ava.ph { background: #222228; display: flex; align-items: center; justify-content: center; color: var(--suave); font-family: var(--titular); font-weight: 800; font-size: clamp(18px, 5vw, 30px); }
.fr .fr-marco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.primero .fr-marco { filter: drop-shadow(0 0 10px rgba(255, 178, 26, .45)); }
.podio-pie { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; justify-content: space-between; margin: 18px auto 0; max-width: 760px; color: var(--suave); font-size: 14px; }

/* ── premium, la carta del garaje ─────────────── */
.carta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: c; }
.carta li { counter-increment: c; display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--borde); align-items: baseline; }
.carta li::before {
  content: counter(c); font-family: var(--titular); font-weight: 800; font-size: 40px; line-height: .8;
  color: transparent; -webkit-text-stroke: 2px var(--apagado); transition: -webkit-text-stroke-color .3s, text-shadow .3s;
}
.carta li.luce::before, html:not(.js) .carta li::before { -webkit-text-stroke-color: var(--rojo); }
.carta li.luce::before { text-shadow: 0 0 12px rgba(255, 36, 56, .85); }
.carta strong { display: block; font-family: var(--titular); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.carta span { color: var(--suave); }
.premium { display: grid; gap: 28px; }
.premium .letra-pequena { color: var(--suave); font-size: 15px; margin-top: 12px; }
@media (min-width: 1024px) { .premium { grid-template-columns: .9fr 1.1fr; gap: 64px; } }

/* ── final ────────────────────────────────────── */
.final { padding: 80px 0 96px; position: relative; overflow: hidden; }
.final .envoltorio { display: grid; gap: 28px; justify-items: center; text-align: center; }
.final h2 { font-size: clamp(40px, 10vw, 84px); }
.final p { color: var(--suave); }
.final .botones { justify-items: center; }
.abierto { font-family: var(--titular); font-weight: 800; font-size: clamp(34px, 9vw, 60px); letter-spacing: .14em; padding: 6px 22px; border: 3px solid currentColor; border-radius: 14px; text-transform: uppercase; }
.abierto { box-shadow: 0 0 12px var(--rojo), inset 0 0 12px var(--rojo); }
.js .abierto.parpadea { animation: arranque 1.4s steps(1, end) both; }

/* ── pie ──────────────────────────────────────── */
.pie { background: var(--fondo); border-top: 1px solid var(--borde); padding: 44px 0 28px; font-size: 15px; color: var(--suave); }
.pie-rejilla { display: grid; gap: 28px; }
.pie h2 { font-family: var(--letra); text-transform: none; font-size: 14px; font-weight: 700; color: var(--texto); margin-bottom: 6px; line-height: 1.3; }
.pie ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; }
.pendiente { display: inline-block; font-size: 12px; background: rgba(255, 178, 26, .16); color: var(--ambar); border-radius: 6px; padding: 1px 7px; margin-left: 4px; }
.marcas { font-size: 12px; margin-top: 28px; }
@media (min-width: 560px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ── páginas de texto (beta, legal, borrar) ───── */
.pagina { padding: 36px 0 64px; }
.pagina .envoltorio { max-width: 820px; }
.cabeza-pagina { position: relative; display: grid; gap: 14px; padding-bottom: 8px; }
.cabeza-pagina h1 { font-size: clamp(44px, 12vw, 84px); }
.pagina .entradilla { color: var(--suave); font-size: 18px; max-width: 46ch; }
.boton-arriba { margin-top: 18px; justify-self: start; }
.rotulo-pequeno { position: absolute; right: 0; top: -6px; }
.rotulo-pequeno .rotulo { width: 70px; }
.cabeza-pagina h1 { padding-right: 84px; }
@media (min-width: 820px) { .rotulo-pequeno .rotulo { width: 120px; } .cabeza-pagina h1 { padding-right: 140px; } }
.pasos { list-style: none; margin: 32px 0 0; padding: 0; }
.paso { display: grid; grid-template-columns: 58px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--borde); }
.paso h2 { font-size: 30px; margin-bottom: 10px; }
.paso p { color: var(--suave); margin-bottom: 10px; }
.paso .boton { margin-top: 6px; }
.hito { font-family: var(--titular); font-weight: 800; font-size: 54px; line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--apagado); transition: -webkit-text-stroke-color .3s, text-shadow .3s; }
.paso.luce .hito, html:not(.js) .hito { -webkit-text-stroke-color: var(--rojo); }
.paso.luce .hito { text-shadow: 0 0 12px rgba(255, 36, 56, .85); }
.preguntas { margin-top: 40px; }
.preguntas h2 { font-size: 36px; margin-bottom: 10px; }
.preguntas details { border-top: 1px solid var(--borde); }
.preguntas summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font-weight: 700; padding: 8px 0; }
.preguntas details p { color: var(--suave); padding-bottom: 14px; }
.texto-legal h2 { font-size: 28px; margin: 28px 0 10px; }
.texto-legal p, .texto-legal li { color: var(--suave); }
.texto-legal ul, .texto-legal ol { padding-left: 20px; }
.texto-legal h1 { font-size: clamp(40px, 10vw, 72px); margin: 8px 0 18px; }
.texto-legal h3 { font-size: 22px; margin: 22px 0 8px; }
.texto-legal p, .texto-legal ul, .texto-legal ol { margin: 0 0 12px; }
.texto-legal a { color: var(--texto); text-decoration-color: var(--rojo-texto); text-underline-offset: 3px; }
.texto-legal strong { color: var(--texto); }
.texto-legal code { font-size: .92em; background: var(--fondo-3); border-radius: 4px; padding: 1px 5px; }
.texto-legal blockquote { margin: 0 0 14px; padding: 8px 14px; border-left: 3px solid var(--rojo); color: var(--suave); }
.texto-legal hr { border: 0; border-top: 1px solid var(--borde); margin: 28px 0; }
.texto-legal .creditos li { font-size: 14px; word-break: break-word; }

/* ── páginas que pinta el worker ──────────────── */
/* rankings, tramos, crews, perfiles, premium, novedades. Mismo cartel, mismos números. */
.pagina .seccion-cabeza { margin-top: 40px; }
.bloque { margin-top: 44px; }
.bloque > h2 { font-size: clamp(30px, 7vw, 46px); margin-bottom: 14px; }
.bloque > p { color: var(--suave); max-width: 60ch; }
.nota { color: var(--suave); font-size: 14px; margin-top: 12px; }
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; }
.pestanas button {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(5, 5, 7, .8);
  color: var(--suave); font: 800 18px var(--titular); text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.pestanas button[aria-selected="true"] { background: var(--rojo-boton); border-color: transparent; color: #fff; }
.panel[hidden] { display: none !important; }
.cuenta-atras { color: var(--ambar); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.puesto.luce { opacity: 1; }
/* filas de un ranking: puesto, foto, nombre, cifra */
.filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 640px; }
.fila {
  display: grid; grid-template-columns: 40px 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px;
  border-radius: 14px; border: 1px solid var(--borde); background: rgba(14, 14, 18, .88); text-decoration: none; color: var(--texto);
}
a.fila:hover { border-color: rgba(255, 36, 56, .55); }
.fila .pos { font-family: var(--titular); font-weight: 800; font-size: 30px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--rojo); text-align: center; }
.fila .nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .dato { font-family: var(--titular); font-weight: 800; font-size: 24px; white-space: nowrap; color: #ffd9dc; }
.fila .dato small { font-size: .6em; color: var(--suave); }
.fila .etiqueta { font-size: 13px; color: var(--suave); border: 1px solid var(--borde); border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
.fila.borrosa { filter: blur(6px); opacity: .6; pointer-events: none; user-select: none; }
.fila.borrosa .barra { display: block; height: 12px; border-radius: 6px; background: #2a2a31; }
.ava { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--fondo-3); display: grid; place-items: center; font: 800 20px var(--titular); color: var(--suave); }
.ava.grande { width: 112px; height: 112px; font-size: 48px; border: 3px solid var(--rojo); box-shadow: 0 0 28px rgba(255, 36, 56, .45); }
.ava.cuadrada { border-radius: 22%; }
/* el candado sobre las filas difuminadas */
.tras-candado { position: relative; margin-top: 8px; max-width: 640px; }
.candado {
  position: absolute; inset: 0; margin: auto; height: fit-content; max-width: 460px; padding: 20px; border-radius: 16px;
  background: rgba(5, 5, 7, .94); border: 1px solid rgba(255, 36, 56, .45); text-align: center; display: grid; gap: 8px; justify-items: center;
}
.candado strong { font-family: var(--titular); font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.candado p { color: var(--suave); font-size: 15px; }
/* tarjetas: tramos, crews, garaje, novedades */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 20px; }
.tarjeta {
  display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 16px; border: 1px solid var(--borde);
  background: rgba(14, 14, 18, .9); color: var(--texto); text-decoration: none;
}
a.tarjeta:hover { border-color: rgba(255, 36, 56, .55); }
.tarjeta h3 { font-size: 28px; }
.tarjeta p { color: var(--suave); }
.tarjeta .linea { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tarjeta .linea div { min-width: 0; }
.tarjeta .linea b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta .linea span { color: var(--suave); font-size: 14px; }
.datos { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--suave); font-size: 15px; }
.datos b { font-family: var(--titular); font-weight: 800; font-size: 24px; color: #ffd9dc; margin-right: 4px; }
/* las cifras grandes de un perfil o de un tramo */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 24px; }
.cifra { padding: 16px; border-radius: 16px; border: 1px solid var(--borde); background: rgba(14, 14, 18, .9); text-align: center; }
.cifra b { display: block; font-family: var(--titular); font-weight: 800; font-size: clamp(34px, 8vw, 48px); line-height: 1; color: #ffd9dc; text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 0 7px rgba(255, 36, 56, .75); white-space: nowrap; }
.cifra span { color: var(--suave); font-size: 14px; }
.ficha { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 8px; }
.ficha .sub { color: var(--suave); }
.corona { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 18px; border: 1px solid rgba(255, 178, 26, .5); background: rgba(14, 14, 18, .92); margin-top: 22px; max-width: 640px; box-shadow: 0 0 24px -8px rgba(255, 178, 26, .5); }
.corona .titulillo { display: block; font-family: var(--titular); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 15px; }
.corona a, .corona b.quien { font-family: var(--titular); font-weight: 800; font-size: 30px; text-transform: none; text-decoration: none; color: var(--texto); line-height: 1.1; overflow-wrap: anywhere; }
.corona .desde { display: block; color: var(--suave); font-size: 14px; }
/* premium y novedades: capítulos con la carta numerada */
.capitulo { margin-top: 48px; }
.capitulo > h2 { font-size: clamp(32px, 8vw, 54px); margin-bottom: 8px; }
.capitulo > p { color: var(--suave); margin-bottom: 8px; }
.gratis { margin-top: 48px; padding: 20px; border-radius: 16px; border: 1px solid var(--borde); background: rgba(14, 14, 18, .9); }
.gratis h2 { font-size: 30px; margin-bottom: 8px; }
.gratis p { color: var(--suave); }
.pagina .final { padding: 64px 0 24px; }
.titulo-perfil { font-size: clamp(40px, 10vw, 72px); text-transform: none; overflow-wrap: anywhere; }
.ficha .sub + .sub { margin-top: 6px; }
/* el seguimiento de /viaje: una tarjeta sola, sin carretera */
.viaje { min-height: calc(100vh - 61px); min-height: calc(100svh - 61px); display: grid; place-items: center; padding: 24px var(--gutter); }
.viaje .tarjeta { width: 100%; max-width: 440px; padding: 24px; gap: 12px; }
.viaje h1 { font-size: clamp(34px, 9vw, 46px); }
.viaje .llegada { font-family: var(--titular); font-weight: 800; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.viaje .etiqueta-hora { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); font-weight: 700; }
.pildora { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 14px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borde); }
.pildora.vivo { color: var(--ambar); border-color: rgba(255, 178, 26, .5); }
.pildora .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pildora.vivo .punto { animation: latido 2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.viaje .mapa { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); background: var(--fondo-3); }
.viaje .mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.viaje .pie-viaje { color: var(--suave); font-size: 14px; border-top: 1px solid var(--borde); padding-top: 12px; }

/* ── legibilidad encima de la carretera ───────── */
/* El canvas ya pinta un velo oscuro según la sección. Además, el texto corrido lleva una
   sombra oscura pegada a la letra, que solo se nota si un faro pasa justo por detrás. */
.seccion p, .seccion li, .podio-pie, .final p, .pagina p, .pagina summary, .portada .entradilla, .enlace-secundario {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(5, 5, 7, .95);
}
.seccion-cabeza h2, .paso-g h3, .final h2, .pagina h1, .pagina h2 { text-shadow: 0 2px 14px rgba(5, 5, 7, .9); }
.seccion-cabeza h2 .neon-rojo, .final h2 .neon-rojo, .pagina h1 .neon-rojo { text-shadow: 0 0 2px #fff, 0 0 8px var(--rojo), 0 0 20px var(--rojo), 0 0 42px rgba(255, 36, 56, .7); }
.plataformas span { background: rgba(5, 5, 7, .7); }

/* ── los mandos de la carretera, abajo de la portada ── */
.mandos { position: relative; z-index: 3; margin-top: auto; padding: 14px 0 18px; }
.mandos .envoltorio { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.velocimetro { font-family: var(--titular); line-height: .85; color: var(--tubo-rojo); text-shadow: 0 0 2px #fff, 0 0 10px var(--rojo), 0 0 22px rgba(255, 36, 56, .7); white-space: nowrap; }
.velocimetro b { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.2ch; text-align: right; }
.velocimetro span { font-size: 17px; font-weight: 500; margin-left: 4px; }
.velocimetro[hidden] { display: none; }
.acelerando .velocimetro b { color: #fff; }
.pista { font-size: 13px; line-height: 1.3; color: #e4dfd6; text-align: center; flex: 0 1 auto; max-width: 22em; text-shadow: 0 1px 6px #000; background: rgba(5, 5, 7, .82); border-radius: 10px; padding: 4px 9px; }
.pausa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 36, 56, .6); background: rgba(5, 5, 7, .8); color: var(--texto); font: 600 14px var(--letra); cursor: pointer; flex-shrink: 0; }
.pausa svg { width: 16px; height: 16px; }
.pausa[aria-pressed="true"] { border-color: var(--ambar); color: var(--ambar); }
@media (max-width: 420px) { .pista { font-size: 12px; max-width: 13em; } .velocimetro b { font-size: 40px; } .velocimetro span { font-size: 15px; } .mandos .envoltorio { gap: 8px; } .pausa { padding: 0 12px; } }
@media (min-width: 1100px) { .velocimetro b { font-size: 64px; } }
/* mantener pulsada la carretera no abre el menú de copiar del sistema */
.portada { -webkit-touch-callout: none; }
.portada-texto { -webkit-touch-callout: default; }

/* ── movimiento reducido: todo quieto y legible ─ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .telefono { transform: none !important; }
  .pantalla::after { display: none; }
  .js .paso-g:not(.activo) > div { opacity: 1; }
  .js .puesto { opacity: 1; }
}