/* Web de Uphill Outlaws · «Atardecer en la cuesta».
   El mundo del juego: el cielo del atardecer de la Autopista y el Volcán (shared/datos/mapas.js),
   tierra, asfalto con su línea amarilla, carteles de carretera y carteles de «se busca» para los
   pilotos (los forajidos). La letra es la del juego: Barlow Condensed en cursiva para títulos y
   cifras, y Barlow para el texto (client/css/fuentes.css). El nombre se escribe como en la pantalla
   de carga del juego (.logo .titulo de client/css/juego.css): oro en degradado y sombra dura.
   Primero para el móvil (16 px de margen). Secciones que alternan papel (claro) y anochecer
   (oscuro), separadas por lomas que suben hacia la derecha. */

@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-latin-800-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/barlow-condensed-latin-900-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-latin-700-normal.woff2') format('woff2'); }

:root {
  color-scheme: light dark;
  /* anochecer */
  --noche: #1c1029;
  --noche-2: #2a1533;
  --ciruela: #4b1f3f;
  --brasa: #8f3a40;
  --teja: #c8502a;
  --naranja: #f08e3a;
  --ambar: #ffb020;
  --oro-a: #ffe38a;
  --oro-b: #ff9d14;
  --claro: #fff4e6;
  --claro-2: #e9d3c0;
  /* papel, tierra y hierba */
  --papel: #f6ead3;
  --papel-2: #efdcbc;
  --papel-borde: #dcc49c;
  --tinta: #2a1a10;
  --tinta-2: #5a4232;
  --tierra: #6b4226;
  --tierra-osc: #3b2414;
  --hierba: #6dbe45;
  --hierba-osc: #3d7f22;
  /* carretera */
  --asfalto: #24222a;
  --asfalto-2: #302e37;
  --linea: #f2c230;
  --cartel-verde: #0d6a3b;
  --cartel-azul: #1b4f9c;
  --cartel-marron: #7b4a24;
  /* letra y medidas */
  --f-titulo: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ancho: 1200px;
  --margen: max(16px, env(safe-area-inset-left, 0px));
  --radio: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  font: 500 17px/1.6 var(--f-texto);
  color: var(--tinta);
  background: var(--papel);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teja); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
b, strong { font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
kbd { font: inherit; }

.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 30; padding: 8px 14px; background: var(--ambar); color: var(--tinta); font-weight: 700; text-decoration: none; border-radius: 6px; }
.saltar:focus { left: 12px; }
mark.pendiente { background: #ffe14a; color: #2a1a00; padding: 0 .3em; border-radius: 4px; font-weight: 700; }

/* ── el nombre del juego, como en su pantalla de carga ── */
.marca { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; text-decoration: none; }
.marca-nombre {
  font: italic 900 24px/0.92 var(--f-titulo);
  text-transform: uppercase; letter-spacing: .01em;
  background: linear-gradient(180deg, var(--oro-a) 10%, var(--oro-b) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .07em 0 rgba(20, 8, 4, .55));
  padding-right: .08em;
}
.marca-sub { margin-top: 3px; font: 700 10px/1 var(--f-texto); letter-spacing: .32em; text-transform: uppercase; color: var(--claro-2); }
.marca--portada .marca-nombre { font-size: clamp(56px, 15.5vw, 118px); filter: drop-shadow(0 .05em 0 rgba(20, 8, 4, .6)) drop-shadow(0 .2em .4em rgba(20, 8, 4, .35)); }
.marca--portada .marca-sub { margin-top: 10px; font-size: clamp(13px, 2.4vw, 17px); letter-spacing: .42em; color: #fff; }
.marca--pie .marca-nombre { font-size: 38px; }

/* ── títulos y etiquetas ── */
.titulo {
  font: italic 900 clamp(38px, 7.4vw, 66px)/0.95 var(--f-titulo);
  text-transform: uppercase; letter-spacing: .005em;
  color: var(--tinta);
}
.titulo--medio { font-size: clamp(32px, 5vw, 46px); }
.titulo--grande { font-size: clamp(48px, 10vw, 104px); }
.eyebrow {
  display: inline-block; margin-bottom: 14px; padding: 3px 12px 2px;
  font: italic 800 15px/1.2 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta); background: var(--ambar);
  transform: skewX(-8deg);
  box-shadow: 3px 3px 0 var(--tinta);
}
.lead { margin-top: 16px; max-width: 62ch; font-size: 18.5px; color: var(--tinta-2); }
.desliza { display: none; }

/* ── botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 8px 22px;
  border: 0; border-radius: 6px;
  font: italic 800 20px/1 var(--f-titulo); letter-spacing: .04em; text-transform: uppercase;
  color: #2b1300; text-decoration: none;
  background: linear-gradient(180deg, #ffd35a, var(--oro-b));
  box-shadow: 0 4px 0 #b05c00, 0 10px 22px rgba(30, 10, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5);
  transform: skewX(-8deg);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn > * { transform: skewX(8deg); }
.btn:hover { color: #2b1300; filter: brightness(1.06); transform: skewX(-8deg) translateY(-2px); box-shadow: 0 6px 0 #b05c00, 0 14px 26px rgba(30, 10, 0, .38), inset 0 2px 0 rgba(255, 255, 255, .5); }
.btn:active { transform: skewX(-8deg) translateY(3px); box-shadow: 0 1px 0 #b05c00, 0 6px 14px rgba(30, 10, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .5); }
.btn-icono { width: 20px; height: 20px; flex: none; }
.btn--grande { min-height: 60px; padding: 12px 30px; font-size: 25px; }
.btn--mini { min-height: 38px; padding: 6px 16px; font-size: 17px; box-shadow: 0 3px 0 #b05c00, inset 0 2px 0 rgba(255, 255, 255, .5); }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 28px; }
.acciones--centro { justify-content: center; }

.tiendas { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.tienda {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 18px 8px 14px;
  border-radius: 10px; border: 1.5px solid rgba(255, 244, 230, .4);
  background: rgba(20, 10, 22, .72);
  color: #fff; text-decoration: none;
}
a.tienda:hover { color: #fff; background: rgba(40, 18, 40, .92); border-color: rgba(255, 244, 230, .75); }
.tienda-icono { width: 24px; height: 24px; flex: none; }
.tienda-textos { display: flex; flex-direction: column; line-height: 1.1; }
.tienda-donde { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--claro-2); }
.tienda-nombre { font: italic 800 21px/1.1 var(--f-titulo); }
.tienda--pronto { border-style: dashed; color: var(--claro-2); background: rgba(20, 10, 22, .55); }
.tienda--pronto .tienda-donde { color: var(--ambar); }

.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.enlace-flecha::after { content: '→'; transition: transform .15s ease; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ── barra de arriba ── */
.barra { position: sticky; top: 0; z-index: 20; background: rgba(28, 16, 41, .9); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid rgba(255, 176, 32, .18); }
.barra-dentro { max-width: var(--ancho); margin: 0 auto; padding: 9px var(--margen); display: flex; align-items: center; gap: 12px; }
.barra-marca { margin-right: auto; }
.barra-nav { display: none; gap: 24px; }
.barra-nav a { color: var(--claro); text-decoration: none; font: italic 700 18px/1 var(--f-titulo); letter-spacing: .05em; text-transform: uppercase; }
.barra-nav a:hover { color: var(--ambar); }
@media (min-width: 1020px) { .barra-nav { display: flex; margin-right: 8px; } }

.idiomas { display: inline-flex; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.idiomas a { display: inline-grid; place-items: center; min-width: 40px; min-height: 32px; padding: 0 8px; border-radius: 6px; color: var(--claro-2); text-decoration: none; font: italic 800 15px/1 var(--f-titulo); letter-spacing: .06em; }
.idiomas a:hover { color: #fff; }
.idiomas a[aria-current] { background: var(--ambar); color: var(--tinta); }

/* ── portada ── */
.portada { position: relative; isolation: isolate; color: var(--claro); background: var(--noche); }
.portada-fondo { display: block; }
.portada-fondo img { width: 100%; }
.portada-dentro { position: relative; max-width: var(--ancho); margin: 0 auto; }
.portada-texto {
  padding: 34px var(--margen) 86px;
  background: linear-gradient(180deg, var(--noche) 0%, #2c1534 38%, #5a2440 66%, #b75650 88%, #f7ae78 100%);
}
.antetitulo { font: italic 800 17px/1.2 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); }
.marca--portada { margin-top: 10px; }
.portada-lema { margin-top: 18px; max-width: 46ch; font-size: 18.5px; color: #fbe9da; }
.datos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font: italic 800 17px/1.2 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; color: #fff4e6; }
.datos li { display: inline-flex; align-items: center; gap: 8px; }
.datos li::before { content: ''; width: 10px; height: 10px; background: var(--ambar); transform: rotate(45deg); }
.nota-idioma { margin-top: 12px; font-size: 15px; color: #fde5d2; }
.hito { display: none; }

/* móvil: el texto en el cielo del anochecer y, debajo, la escena (recortada en el horizonte) */
@media (max-width: 899px) {
  .portada { display: flex; flex-direction: column-reverse; }
  .portada-fondo img { margin-top: -2px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px); background: #f7ae78; }
  .portada-fondo { background: #f7ae78; }
}
/* escritorio: la escena a sangre y el texto a la izquierda, sobre el cielo oscurecido */
@media (min-width: 900px) {
  .portada { min-height: min(820px, 92vh); display: flex; align-items: center; }
  .portada-fondo { position: absolute; inset: 0; z-index: -2; }
  .portada-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
  .portada::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(90deg, rgba(28, 16, 41, .94) 0%, rgba(36, 18, 44, .82) 30%, rgba(60, 24, 52, .35) 52%, rgba(60, 24, 52, 0) 66%),
      linear-gradient(180deg, rgba(28, 16, 41, .55) 0%, rgba(28, 16, 41, 0) 30%);
  }
  .portada-dentro { width: 100%; padding: 60px var(--margen) 150px; }
  .portada-texto { max-width: 600px; padding: 0; background: none; }
  .hito {
    display: flex; flex-direction: column; align-items: center;
    position: absolute; right: max(24px, calc(50% - 560px)); top: 70px;
    color: #fff; text-shadow: 0 3px 0 rgba(30, 10, 10, .45), 0 0 18px rgba(30, 10, 10, .25);
  }
  .hito span { font: 700 13px/1 var(--f-texto); letter-spacing: .3em; text-transform: uppercase; }
  .hito b { font: italic 900 64px/1 var(--f-titulo); }
}

/* lomas: la de la portada en el color del papel; las de las secciones oscuras, en el suyo */
.ladera { display: block; width: 100%; height: clamp(36px, 7vw, 96px); }
.ladera--portada { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; }
.ladera--portada .ladera-atras { fill: #e3cba3; }
.ladera--portada .ladera-delante { fill: var(--papel); }
@media (max-width: 899px) { .ladera--portada { height: 46px; } }

/* ── señales con las cifras ── */
.senales {
  list-style: none; position: relative; z-index: 2;
  max-width: 900px; margin: 0 auto; padding: 18px var(--margen) 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.senal { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.senal-rombo {
  display: grid; place-items: center;
  width: clamp(54px, 15vw, 86px); aspect-ratio: 1;
  background: var(--linea); border: 3px solid var(--tinta); border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--linea), inset 0 0 0 5px var(--tinta), 0 6px 0 rgba(42, 26, 16, .15);
  transform: rotate(45deg);
}
.senal-rombo b { transform: rotate(-45deg); font: italic 900 clamp(24px, 6.4vw, 38px)/1 var(--f-titulo); color: var(--tinta); }
.senal-texto { font: italic 800 clamp(14px, 3.6vw, 19px)/1.1 var(--f-titulo); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); }

/* ── secciones ── */
.seccion { position: relative; padding: 64px 0 72px; }
.dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
@media (min-width: 900px) { .seccion { padding: 104px 0 112px; } }

.papel { background: var(--papel); color: var(--tinta); }
.anochecer, .asfalto, .madera { color: var(--claro); }
.anochecer { background: linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 55%, #3a1838 100%); }
.anochecer .titulo, .asfalto .titulo, .madera .titulo { color: #fff; }
.anochecer .lead, .asfalto .lead, .madera .lead { color: var(--claro-2); }
.ladera--arriba { position: absolute; left: 0; right: 0; top: 1px; transform: translateY(-100%); }
.anochecer .ladera--arriba .ladera-atras { fill: #43203f; }
.anochecer .ladera--arriba .ladera-delante { fill: var(--noche); }
.papel .ladera--arriba .ladera-atras { fill: #e3cba3; }
.papel .ladera--arriba .ladera-delante { fill: var(--papel); }
.asfalto .ladera--arriba .ladera-atras { fill: #3a3842; }
.asfalto .ladera--arriba .ladera-delante { fill: var(--asfalto); }

.dos-columnas { display: grid; gap: 40px; }
@media (min-width: 960px) { .dos-columnas { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; } }

/* fotos: capturas con borde de papel fotográfico */
.foto { margin: 0; }
.foto img { border: 7px solid #fffaf0; border-radius: 6px; box-shadow: 0 2px 0 var(--papel-borde), 0 18px 34px rgba(60, 30, 10, .25); }
.foto figcaption { margin-top: 12px; font-size: 15px; font-style: italic; color: var(--tinta-2); text-align: center; }
.foto--inclinada { transform: rotate(1.4deg); }
.foto--oscura img { border-color: #3d2a3a; box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }

/* cómo se juega */
.controles { list-style: none; display: grid; gap: 10px; margin-top: 28px; }
.control {
  display: grid; grid-template-columns: 48px 1fr; grid-template-areas: 'icono textos' 'icono teclas' 'icono movil';
  column-gap: 14px; row-gap: 4px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  background: #fffaf0; border: 1px solid var(--papel-borde);
}
.control-icono { grid-area: icono; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; color: #fff; background: var(--c); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.control-icono .icono { width: 26px; height: 26px; }
.control--gas { --c: #3f9a2a; } .control--freno { --c: #c8322a; } .control--habilidad { --c: #d99000; } .control--nitro { --c: #1f6fd1; }
.control-textos { grid-area: textos; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.control-textos b { font: italic 800 21px/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; }
.control-textos small { font-size: 14.5px; color: var(--tinta-2); }
.control-teclas { grid-area: teclas; display: flex; flex-wrap: wrap; gap: 5px; }
.control-movil { grid-area: movil; font-size: 14px; color: var(--tinta-2); }
kbd { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 7px; border-radius: 5px; background: var(--tinta); color: var(--papel); font: 700 13.5px/1 var(--f-texto); box-shadow: 0 2px 0 #000; }
@media (min-width: 640px) {
  .control { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: 'icono textos teclas' 'icono movil teclas'; }
  .control-teclas { justify-content: flex-end; }
}

.como-derecha { display: grid; gap: 30px; }
.finales {
  position: relative; padding: 26px 22px 22px; border-radius: 12px; background: var(--tinta); color: var(--claro);
  overflow: hidden;
}
.finales::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: repeating-linear-gradient(-45deg, var(--linea) 0 14px, var(--tinta) 14px 28px); }
.finales h3 { font: italic 900 25px/1.1 var(--f-titulo); text-transform: uppercase; color: var(--ambar); }
.finales ul { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.finales li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; }
.finales .icono { width: 28px; height: 28px; color: #ff8a6a; }
.finales-extra { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 244, 230, .25); color: var(--claro-2); font-size: 15.5px; }
@media (min-width: 640px) { .finales ul { grid-template-columns: 1fr 1fr; } }

/* modos: carteles de carretera */
.modos { list-style: none; display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 640px) { .modos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .modos { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.cartel {
  --c: var(--cartel-verde);
  padding: 22px 22px 24px; border-radius: 14px;
  background: var(--c); color: #fff;
  outline: 2.5px solid #fff; outline-offset: -8px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
}
.cartel:nth-child(3n+1) { --c: var(--cartel-marron); }
.cartel:nth-child(3n+3) { --c: var(--cartel-azul); }
.cartel-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--c); margin-bottom: 14px; }
@media (max-width: 639px) {
  .cartel { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; padding: 20px 20px 22px; }
  .cartel-icono { margin: 0; }
  .cartel p { grid-column: 1 / -1; }
}
.cartel-icono .icono { width: 26px; height: 26px; }
.cartel h3 { font: italic 900 28px/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; }
.cartel p { margin-top: 8px; font-size: 16px; color: rgba(255, 255, 255, .92); }

.ligas { display: grid; gap: 20px; margin-top: 40px; padding: 24px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 244, 230, .12); }
@media (min-width: 1000px) { .ligas { grid-template-columns: 280px 1fr; align-items: center; gap: 32px; padding: 28px 32px; } }
.ligas h3 { font: italic 900 30px/1 var(--f-titulo); text-transform: uppercase; color: var(--ambar); }
.ligas-texto p { margin-top: 8px; color: var(--claro-2); font-size: 16px; }
.ligas-lista { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .ligas-lista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ligas-lista { grid-template-columns: repeat(6, 1fr); } }
.liga { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.liga-escudo { width: 38px; height: 44px; margin-bottom: 6px; background: linear-gradient(160deg, #fff 0%, var(--l) 35%, color-mix(in srgb, var(--l) 60%, #000) 100%); clip-path: polygon(50% 0, 100% 15%, 100% 60%, 50% 100%, 0 60%, 0 15%); }
.liga b { font: italic 900 21px/1 var(--f-titulo); text-transform: uppercase; color: #fff; }
.liga small { font-size: 13px; color: var(--claro-2); line-height: 1.25; }
.liga-min { margin-top: 4px; font: italic 800 15px/1 var(--f-titulo); color: var(--l); }
/* LIGAS de shared/datos/copas.js */
.liga--bronce { --l: #c98a4a; } .liga--plata { --l: #c9d3de; } .liga--oro { --l: #f2c230; }
.liga--platino { --l: #7fe0d8; } .liga--diamante { --l: #8fb8ff; } .liga--leyenda { --l: #ff7a5a; }

/* carriles: en el móvil, filas que se desplazan de lado; en grande, rejillas */
.carril {
  list-style: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 14px;
  margin: 22px calc(-1 * var(--margen)) 0; padding: 8px var(--margen) 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
  scrollbar-width: thin;
}
.carril > li { position: relative; scroll-snap-align: start; }   /* (los .solo-lector de dentro no se escapan del carril) */
.carril:focus-visible { outline-offset: -3px; }
@media (max-width: 899px) {
  .desliza { display: block; margin-top: 14px; font: italic 700 16px/1 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
  .desliza::after { content: ' →'; }
  .asfalto .desliza, .madera .desliza { color: var(--claro-2); }
}

/* mapas: postales */
.postal { padding: 9px 9px 14px; border-radius: 6px; background: #fffaf0; box-shadow: 0 2px 0 var(--papel-borde), 0 14px 26px rgba(60, 30, 10, .18); }
.postal img { border-radius: 3px; aspect-ratio: 720 / 428; object-fit: cover; }
.postal-pie { padding: 10px 4px 0; }
.postal h3 { font: italic 900 26px/1 var(--f-titulo); text-transform: uppercase; }
.postal p { margin-top: 2px; color: var(--tinta-2); font-size: 15.5px; }
@media (min-width: 900px) {
  .postales { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; margin: 32px 0 0; padding: 0; overflow: visible; gap: 26px 22px; }
  .postal:nth-child(3n+1) { transform: rotate(-.7deg); }
  .postal:nth-child(3n+3) { transform: rotate(.7deg); }
}

.clima { display: grid; gap: 18px; margin-top: 44px; padding: 26px 24px; border-radius: 14px; background: var(--papel-2); border: 1px solid var(--papel-borde); }
@media (min-width: 900px) { .clima { grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; padding: 30px 34px; } }
.clima h3 { font: italic 900 30px/1 var(--f-titulo); text-transform: uppercase; }
.clima-texto p { margin-top: 10px; color: var(--tinta-2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 13px; border-radius: 999px; background: #fffaf0; border: 1.5px solid var(--tinta); font: italic 800 16px/1.2 var(--f-titulo); letter-spacing: .03em; text-transform: uppercase; }

/* vehículos: asfalto */
.asfalto { background: linear-gradient(180deg, var(--asfalto), #1c1b20); }
.asfalto::after { /* la línea discontinua de la carretera */
  content: ''; position: absolute; left: 0; right: 0; bottom: 34px; height: 6px;
  background: repeating-linear-gradient(90deg, var(--linea) 0 56px, transparent 56px 104px);
  opacity: .85;
}
.asfalto .eyebrow { box-shadow: 3px 3px 0 #000; }
.vehiculo {
  display: flex; flex-direction: column;
  padding: 16px 18px 18px; border-radius: 14px;
  background: linear-gradient(180deg, #3a3842, var(--asfalto-2));
  border: 1px solid rgba(255, 255, 255, .08);
}
.vehiculo-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: radial-gradient(120% 90% at 50% 100%, rgba(255, 176, 32, .28), transparent 60%), linear-gradient(180deg, #2a1533, #4a2236 70%, #6b3a32);
  border-bottom: 4px solid var(--linea);
}
.vehiculo-foto img { position: absolute; left: 7%; top: 9%; width: 86%; height: 87%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.vehiculo h3 { margin-top: 14px; font: italic 900 30px/1 var(--f-titulo); text-transform: uppercase; color: #fff; }
.vehiculo-desc { margin-top: 2px; color: var(--claro-2); font-size: 15.5px; }
.vehiculo-habilidad { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 176, 32, .1); border-left: 3px solid var(--ambar); font-size: 14.5px; color: var(--claro-2); line-height: 1.4; }
.vehiculo-habilidad b { display: block; font: italic 800 17px/1.15 var(--f-titulo); letter-spacing: .03em; text-transform: uppercase; color: var(--ambar); }
.precio { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 6px; font: italic 800 18px/1 var(--f-titulo); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.precio .icono { width: 18px; height: 18px; color: #f2c230; }
.se-busca .precio { color: var(--tinta); }
.se-busca .precio .icono[viewBox] { color: #c08a00; }
@media (min-width: 900px) {
  .vehiculos { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; margin: 32px 0 0; padding: 0; overflow: visible; gap: 18px; }
  /* el último (el más caro, el 17) cierra la rejilla a lo ancho */
  .vehiculo:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 28px; align-items: start; padding: 20px 24px; }
  .vehiculo:last-child .vehiculo-foto { grid-row: 1 / -1; aspect-ratio: 2.4 / 1; }
  .vehiculo:last-child h3 { margin-top: 6px; font-size: 40px; }
  .vehiculo:last-child .precio { padding-top: 16px; font-size: 22px; }
}

/* pilotos: carteles de «se busca» en una pared de madera */
.madera {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 132px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 30px, transparent 30px 61px),
    linear-gradient(180deg, #5a3820, #42291a);
}
.madera .eyebrow { box-shadow: 3px 3px 0 #1d1109; }
.carteles { grid-auto-columns: min(66vw, 250px); padding-top: 18px; }
.se-busca {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 16px 18px;
  color: var(--tinta);
  background: radial-gradient(ellipse at 50% 40%, #f8ebcd 55%, #e6c993 100%);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(90, 60, 30, .25);
  border-radius: 3px;
}
.se-busca::before { /* el clavo */
  content: ''; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d8d2c8, #6e675e 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.se-busca:nth-child(odd) { transform: rotate(-1.4deg); }
.se-busca:nth-child(even) { transform: rotate(1.2deg); }
.se-busca-cabecera { margin-top: 8px; font: italic 900 34px/0.9 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; color: #6b2a14; border-block: 3px double #6b2a14; padding: 4px 8px 2px; }
.se-busca-foto { margin-top: 14px; width: 78%; aspect-ratio: 1; display: grid; place-items: center; background: #ead2a2; border: 3px solid var(--tinta); }
.se-busca-foto img { width: 92%; }
.se-busca h3 { margin-top: 12px; font: italic 900 34px/1 var(--f-titulo); text-transform: uppercase; }
.se-busca-bio { margin-top: 4px; font-size: 15px; font-style: italic; color: var(--tinta-2); line-height: 1.35; min-height: 2.7em; }
.se-busca-ventaja { margin-top: 12px; width: 100%; padding: 8px 6px; border-top: 2px dashed rgba(42, 26, 16, .35); border-bottom: 2px dashed rgba(42, 26, 16, .35); font-weight: 700; font-size: 15px; line-height: 1.3; }
.se-busca-ventaja span { display: block; font: italic 800 14px/1.2 var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: #6b2a14; }
.se-busca .precio { justify-content: center; }
@media (min-width: 900px) {
  .carteles { display: flex; flex-wrap: wrap; justify-content: center; margin: 36px 0 0; padding: 0; overflow: visible; gap: 30px 22px; }
  .carteles > li { width: 212px; }
  .se-busca-cabecera { font-size: 30px; }
  .se-busca h3 { font-size: 30px; }
}

/* taller */
.taller { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .taller { grid-template-columns: 1fr 1.05fr; gap: 60px; } }
.taller-lista { list-style: none; display: grid; gap: 16px; margin-top: 26px; }
.taller-lista li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: start; }
.taller-num { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--tinta); color: var(--ambar); font: italic 900 30px/1 var(--f-titulo); }
.taller-lista span { color: var(--tinta-2); font-size: 16px; }
.taller-lista span b { display: block; font: italic 900 22px/1.1 var(--f-titulo); text-transform: uppercase; color: var(--tinta); }
.pinturas { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.pintura { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); box-shadow: 0 0 0 2px #fffaf0, 0 0 0 3px var(--papel-borde); }
/* PINTURAS de shared/datos/pinturas.js (base y acento) */
.pintura--rojo { --a: #c62f2a; --b: #f4f4f4; } .pintura--azul { --a: #1f5fbf; --b: #f2c230; } .pintura--verde { --a: #2f7d35; --b: #f4f4f4; }
.pintura--amarillo { --a: #f2b705; --b: #1c1c1f; } .pintura--naranja { --a: #ef7418; --b: #1c1c1f; } .pintura--blanco { --a: #eceff3; --b: #d42b2b; }
.pintura--negro { --a: #23252b; --b: #ff7a1a; } .pintura--morado { --a: #6a1fb5; --b: #4ff0ff; } .pintura--rosa { --a: #e0508a; --b: #ffffff; }
.pintura--turquesa { --a: #1fa99a; --b: #f4f4f4; } .pintura--oro { --a: #d9a62c; --b: #fff2c0; } .pintura--cromo { --a: #b9c1cc; --b: #eef2f6; }
.pintura--carbono { --a: #2a2c31; --b: #e0262e; } .pintura--camuflaje { --a: #667046; --b: #3a3f26; } .pintura--lava { --a: #2a1a16; --b: #ff7a1a; }
.pintura--cebra { --a: #f2f2f2; --b: #1c1c1f; } .pintura--galaxia { --a: #1a1f4a; --b: #c9a0ff; }

/* la carretera */
.carretera { display: grid; gap: 34px; margin-top: 30px; align-items: center; }
@media (min-width: 960px) { .carretera { grid-template-columns: 1.1fr .9fr; gap: 54px; } }
.carretera-lista { list-style: none; display: grid; gap: 22px; }
@media (min-width: 640px) { .carretera-lista { grid-template-columns: 1fr 1fr; gap: 26px 26px; } }
.carretera-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--ambar); color: var(--tinta); margin-bottom: 12px; transform: skewX(-8deg); }
.carretera-icono .icono { width: 26px; height: 26px; transform: skewX(8deg); }
@media (max-width: 639px) {
  .carretera-lista li { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; }
  .carretera-icono { margin: 0; }
  .carretera-lista p { grid-column: 1 / -1; }
}
.carretera h3 { font: italic 900 25px/1.05 var(--f-titulo); text-transform: uppercase; color: #fff; }
.carretera p { margin-top: 6px; color: var(--claro-2); font-size: 16px; }

/* galería */
.galeria { list-style: none; display: grid; gap: 30px; margin-top: 30px; }
@media (min-width: 760px) { .galeria { grid-template-columns: 1fr 1fr; gap: 34px 28px; } }
.galeria img { width: 100%; aspect-ratio: 1688 / 780; object-fit: cover; }

/* juego limpio */
.limpio { display: grid; gap: 24px; margin-top: 70px; padding: 30px 24px; border-radius: 14px; background: var(--tinta); color: var(--claro); }
@media (min-width: 900px) { .limpio { grid-template-columns: .85fr 1.15fr; align-items: center; padding: 40px 44px; } }
.limpio .titulo { color: #fff; }
.limpio .enlace-flecha { margin-top: 16px; color: var(--ambar); }
.limpio-cabecera .enlace-flecha { display: flex; width: fit-content; }
.limpio-cabecera .enlace-flecha + .enlace-flecha { margin-top: 8px; }
.limpio-lista { list-style: none; display: grid; gap: 16px; }
@media (min-width: 620px) { .limpio-lista { grid-template-columns: 1fr 1fr; gap: 18px 24px; } }
.limpio-lista li { position: relative; padding-left: 40px; color: var(--claro-2); font-size: 15.5px; }
.limpio-lista li::before { content: ''; position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 6px; background: var(--hierba) url('img/marca-si.svg') center/76% no-repeat; }
.limpio-lista b { display: block; font: italic 900 21px/1.15 var(--f-titulo); text-transform: uppercase; color: #fff; }

/* final */
.final {
  position: relative; isolation: isolate;
  padding: 100px var(--margen) calc(30vw + 40px); text-align: center; color: #fff;
  background: url('img/final-luna.webp') 50% 100% / 100% auto no-repeat, #04050e;
}
@media (max-width: 899px) {
  .final { padding: 80px var(--margen) 370px; background: url('img/final-luna.webp') 74% 100% / auto 400px no-repeat, #04050e; }
}
.final-dentro { max-width: 760px; margin: 0 auto; }
.final .titulo { color: #fff; text-shadow: 0 4px 0 rgba(20, 8, 4, .45), 0 0 30px rgba(20, 8, 4, .4); }
.final p { margin-top: 14px; font-size: 19px; color: #fde5d2; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* ── pie ── */
.pie { position: relative; background: #140b1c; color: var(--claro-2); }
.ladera--pie { position: absolute; left: 0; right: 0; top: 1px; transform: translateY(-100%); }
.ladera--pie .ladera-atras { fill: #2e1833; }
.ladera--pie .ladera-delante { fill: #140b1c; }
.pie-dentro { max-width: var(--ancho); margin: 0 auto; padding: 34px var(--margen) 34px; display: grid; gap: 26px; }
@media (min-width: 900px) { .pie-dentro { grid-template-columns: 1.2fr 1fr auto; align-items: start; } }
.pie-estudio { margin-top: 12px; }
.pie-estudio .estudio { color: #fff; font-weight: 700; }
a.estudio { text-decoration: underline; text-decoration-color: rgba(255, 176, 32, .6); }
.redes { list-style: none; display: flex; gap: 10px; margin-top: 16px; }
.red { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
.red:hover { color: var(--ambar); }
.red svg { width: 22px; height: 22px; }
.pie-nav { display: flex; flex-direction: column; gap: 10px; }
.pie-nav a { color: var(--claro); text-decoration: none; font-weight: 600; }
.pie-nav a:hover, .pie-nav a[aria-current] { color: var(--ambar); }
.pie-nav a[href^="mailto"] { color: var(--ambar); }
.pie-contacto { overflow-wrap: anywhere; }
.pie-legal { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255, 244, 230, .1); font-size: 14px; color: #bda896; }
.pie a[href^="mailto"] { color: var(--ambar); }

/* ── documentos (privacidad, borrar la cuenta) ── */
.pagina-privacidad main, .pagina-borrar-cuenta main { background: var(--papel); }
.doc { max-width: 860px; margin: 0 auto; padding: 46px var(--margen) 130px; }
.doc-cabecera { padding-bottom: 24px; border-bottom: 2px solid var(--tinta); }
.doc-cabecera .eyebrow { margin-bottom: 16px; }
.doc-cabecera .titulo { font-size: clamp(40px, 8vw, 70px); }
.doc-fecha { margin-top: 12px; color: var(--tinta-2); font-weight: 600; }
.doc h2 { font: italic 900 28px/1.05 var(--f-titulo); text-transform: uppercase; }
.doc p, .doc li { color: #3d2a1c; }
.doc p + p, .doc ul + p, .doc ol + p, .doc p + ul, .doc p + ol { margin-top: 12px; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-top: 8px; }
.doc li::marker { color: var(--teja); }
.doc-resumen { margin-top: 30px; padding: 24px 24px 26px; border-radius: 12px; background: #e8f0d6; border: 2px solid var(--hierba-osc); }
.doc-resumen h2 { margin-bottom: 10px; }
.lista-si, .lista-no { list-style: none; padding-left: 0 !important; }
.lista-si li, .lista-no li { position: relative; padding-left: 32px; }
.lista-si li::before, .lista-no li::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 5px; }
.lista-si li::before { background: var(--hierba) url('img/marca-si.svg') center/85% no-repeat; }
.lista-no li::before { background: #e8664f url('img/marca-no.svg') center/85% no-repeat; }
.doc-indice { margin-top: 24px; padding: 20px 24px; border-radius: 12px; background: #fffaf0; border: 1px solid var(--papel-borde); }
.doc-indice h2 { font: italic 800 16px/1 var(--f-titulo); letter-spacing: .14em; color: var(--teja); }
.doc-indice ol { margin-top: 10px; columns: 1; column-gap: 32px; }
@media (min-width: 640px) { .doc-indice ol { columns: 2; } }
.doc-indice li { margin-top: 6px; break-inside: avoid; }
.doc-indice a { color: var(--tinta); text-decoration: none; }
.doc-indice a:hover { color: var(--teja); text-decoration: underline; }
.doc-seccion { margin-top: 40px; scroll-margin-top: 84px; }
.doc-seccion h2 { margin-bottom: 12px; }
.doc a { color: #a3381c; }
.doc-caminos { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 760px) { .doc-caminos { grid-template-columns: 1fr 1fr; } }
.doc-camino { margin-top: 0; padding: 24px 22px; border-radius: 12px; background: #fffaf0; border: 1px solid var(--papel-borde); }
.doc-camino-num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 8px; background: var(--ambar); color: var(--tinta); font: italic 900 24px/1 var(--f-titulo); transform: skewX(-8deg); }
.aviso { margin-top: 14px !important; padding: 12px 16px; border-radius: 10px; background: #ffe7b8; border: 1px solid #e0a83a; }
.tenue { color: var(--tinta-2) !important; }
.doc-pie { margin-top: 40px; }

/* ── avisos de página (jugar pronto, 404) ── */
.aviso-pagina { max-width: 700px; margin: 0 auto; padding: 60px var(--margen) 140px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.aviso-pagina-img { width: min(70vw, 300px); }
.aviso-pagina-img--volcado { transform: rotate(160deg); margin-bottom: 10px; }
.aviso-pagina p { color: var(--tinta-2); font-size: 18.5px; }
.aviso-pagina .tienda { background: var(--tinta); }
.aviso-pagina .tiendas { justify-content: center; }