/* ══════════════════════════════════════════════════════════════
   COCHES DE MADERA · variante «arcade» del tema JUEGOS de mal-ds
   ──────────────────────────────────────────────────────────────
   No es otro sistema: es el tema `juegos` con la piel de un juego de
   karts de PlayStation —Crash Team Racing, Sonic R—: letras gordas,
   amarillas y en cursiva con contorno de tinta, paneles azul noche
   ligeramente torcidos, botones naranja que brillan al elegirlos y
   rayos por detrás de todo lo que se gana.

   Va DESPUÉS de mal.css y se enciende con dos atributos en el <html>:

       <html data-marca="juegos" data-variante="coches" data-tema="claro">

   (`data-tema="claro"` porque el mundo 3D es de día; los paneles son
   oscuros por decisión propia, no por el tema del sistema.)

   Como el resto del sistema, va en capas:
     1 REFERENCIA  se redefinen los --ref-* del tema juegos
     2 MATERIA     los materiales con nombre: --noche, --naranja,
                   --rayas, el contorno de las letras
     3 PIEZAS      solo las que el juego usa

   LA LETRA
     Bangers     títulos, cifras y botones (Vernon Adams, OFL). Es la
                 letra de cómic y de kart: gorda, estrecha, inclinada.
                 Siempre en mayúsculas y con contorno.
     Bungee      rótulos pequeños (David Jonathan Ross, OFL).
     Inter       lo que se lee de corrido (heredada del sistema).
     JetBrains Mono, solo tiempos y tablas: cifras de ancho fijo.
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Bangers";src:url("fuentes/bangers.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bungee";src:url("fuentes/bungee.woff2") format("woff2");font-weight:400;font-display:swap}

/* ─── 1 · REFERENCIA ─────────────────────────────────────────── */
:root[data-variante="coches"]{
  --arc-tinta:#180D3A;        /* el contorno de todas las letras */
  --arc-noche:#1E1457;        /* el panel */
  --arc-noche-2:#33249A;      /* …su parte alta */
  --arc-noche-3:#0F0929;      /* …su sombra */
  --arc-amarillo:#FFE23C;
  --arc-naranja:#FF8A1E;
  --arc-rojo:#E8362B;
  --arc-cian:#43D9FF;
  --arc-verde:#5DE05A;
  --arc-morado:#B04CFF;
  --arc-blanco:#FFF7E6;

  --ref-marca:var(--arc-naranja); --ref-marca-2:#E06A00; --ref-marca-txt:var(--arc-naranja);
  --ref-sobre-marca:var(--arc-blanco);
  --ref-acento:var(--arc-cian); --ref-acento-2:var(--arc-amarillo);
  --ref-n0:var(--arc-noche-3); --ref-n1:var(--arc-noche); --ref-n2:var(--arc-noche-2); --ref-n3:#2A1C7A;
  --ref-t0:var(--arc-blanco); --ref-t1:#D9D2F0; --ref-t2:#B9AFE0;
  --ref-borde-rgb:24,13,58; --ref-marca-rgb:255,138,30;

  --ref-display:"Bangers","Syne",system-ui,sans-serif;
  --ref-peso-display:400;
  --ref-tracking:.02em;

  --ref-radio:.8;
  --ref-borde:3px;
  --ref-linea:var(--arc-tinta);
  --ref-tap:52px;
  --ref-elev-1:0 5px 0 var(--arc-tinta);
  --ref-elev-2:0 7px 0 var(--arc-tinta), 0 16px 30px rgba(0,0,0,.45);
  --ref-salto:translateY(-2px) scale(1.03);
  --ref-presion:translateY(4px) scale(.99);
  --ref-relleno-marca:var(--naranja);
  --ref-destello:transparent;
  --mal-ok:var(--arc-verde); --mal-warn:var(--arc-amarillo);

  /* ─── 2 · MATERIA ────────────────────────────────────────── */
  /* las rayas diagonales de los paneles, casi invisibles */
  --rayas:repeating-linear-gradient(-55deg, rgba(255,255,255,.055) 0 10px, transparent 10px 24px);
  --noche:var(--rayas), linear-gradient(180deg, var(--arc-noche-2), var(--arc-noche) 40%, var(--arc-noche-3));
  /* el naranja con brillo arriba, para botones y banderines */
  --naranja:linear-gradient(180deg, #FFD23F 0%, var(--arc-naranja) 48%, #F0570F 100%);
  --azul:linear-gradient(180deg, #5E9BFF 0%, #2F62E8 48%, #1D3FB8 100%);
  --amarillo:linear-gradient(180deg, #FFF59A 0%, var(--arc-amarillo) 50%, #FFB800 100%);
  /* el contorno de las letras gordas: trazo y sombra desplazada */
  --contorno:0 3px 0 var(--arc-tinta), 3px 3px 0 var(--arc-tinta), -1px 3px 0 var(--arc-tinta), 0 7px 0 rgba(0,0,0,.35);
}

/* ─── 3 · PIEZAS ─────────────────────────────────────────────── */
:root[data-variante="coches"] body{background:#9CC3E0}
/* los velos sobre el 3D: más oscuros, que el panel es de noche */
[data-variante="coches"] .coches-capa{background:linear-gradient(to bottom, rgba(10,6,30,.15), rgba(10,6,30,.6))}

/* LA LETRA GORDA: amarilla, en mayúsculas, inclinada, con contorno.
   Es la misma receta para el logo, los títulos, el premio y las cifras. */
[data-variante="coches"] :is(.coches-titulo,.coches-subtitulo,.coches-logo__nombre,.premio__nombre,.coches-pareja-nombre,.coches-podio-titulo,.coches-banner,
  .coches-cuenta,.coches-aviso,.coches-puesto__n,.coches-vel){
  font-family:"Bangers",var(--mal-display);font-weight:400;letter-spacing:.03em;text-transform:uppercase;
  color:var(--arc-amarillo);-webkit-text-stroke:2px var(--arc-tinta);paint-order:stroke fill;text-shadow:var(--contorno)}
[data-variante="coches"] :is(h1,h2){font-weight:400}
[data-variante="coches"] .coches-subtitulo{font-size:clamp(1.5rem, 1.1rem + 2vw, 2.1rem);color:var(--arc-blanco);transform:rotate(-1.5deg);transform-origin:left}
[data-variante="coches"] .coches-pareja-nombre{font-size:1.7rem;color:var(--arc-cian);margin:0}

/* el rótulo pequeño: Bungee, cian */
[data-variante="coches"] :is(.micro,.kicker){font-family:"Bungee",var(--mal-texto);font-weight:400;letter-spacing:.04em;color:var(--arc-cian)}
[data-variante="coches"] .kicker{gap:.5rem}
[data-variante="coches"] .kicker::before{width:1.4rem;height:3px;background:var(--arc-amarillo);transform:skewX(-20deg)}
[data-variante="coches"] .caption{color:var(--ref-t1)}

/* ─── el logo y la pantalla de título ────────────────────── */
[data-variante="coches"] .coches-capa--titulo{background:linear-gradient(to bottom, rgba(10,6,30,.1) 30%, rgba(10,6,30,.75))}
[data-variante="coches"] .coches-logo{transform:rotate(-4deg)}
[data-variante="coches"] .coches-logo__nombre{
  color:transparent;-webkit-text-stroke:0;text-shadow:none;
  background:linear-gradient(180deg, #FFF59A 0%, var(--arc-amarillo) 40%, #FF9A1F 70%, #F0570F 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 1.5px var(--arc-tinta)) drop-shadow(0 0 1px var(--arc-tinta)) drop-shadow(1px 0 0 var(--arc-tinta))
         drop-shadow(4px 6px 0 var(--arc-tinta)) drop-shadow(0 14px 10px rgba(0,0,0,.4));
  line-height:.9;letter-spacing:.02em}
[data-variante="coches"] .coches-logo__nombre span:last-child{font-size:.62em;letter-spacing:.08em}
[data-variante="coches"] .coches-logo__arriba{font-family:"Bungee",var(--mal-texto);color:var(--arc-blanco);letter-spacing:.3em;text-transform:uppercase;font-size:var(--mal-t-caption);
  text-shadow:0 2px 0 var(--arc-tinta)}
[data-variante="coches"] .coches-logo__abajo{display:inline-block;justify-self:center;margin-top:var(--mal-e2);padding:4px 18px;transform:skewX(-10deg);
  font-family:"Bangers",var(--mal-display);text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem;
  color:var(--arc-tinta);background:var(--amarillo);border:3px solid var(--arc-tinta);border-radius:6px;box-shadow:0 4px 0 var(--arc-tinta)}
[data-variante="coches"] .coches-start{font-family:"Bangers",var(--mal-display);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1.3rem, 1rem + 2vw, 2rem);
  color:var(--arc-blanco);-webkit-text-stroke:1.5px var(--arc-tinta);paint-order:stroke fill;text-shadow:0 3px 0 var(--arc-tinta)}
[data-variante="coches"] .coches-pie-titulo{font-family:"Bungee",var(--mal-texto);color:var(--arc-blanco);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 0 var(--arc-tinta)}

/* ─── el panel: una caja de noche, un poco torcida ───────── */
[data-variante="coches"] .coches-panel{
  background:var(--noche);color:var(--arc-blanco);
  border:3px solid var(--arc-tinta);border-radius:14px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18), inset 0 2px 0 3px rgba(255,255,255,.12), 0 8px 0 var(--arc-tinta), 0 20px 36px rgba(0,0,0,.5);
  transform:rotate(-1.2deg);
  padding-top:calc(var(--mal-e5) + 10px);overflow:visible;max-height:none}
/* el banderín del título cuelga por encima del borde del panel */
[data-variante="coches"] .coches-banner{
  align-self:flex-start;margin:calc(-1 * var(--mal-e5) - 28px) 0 calc(-1 * var(--mal-e2)) calc(-1 * var(--mal-e3));
  padding:4px 22px 3px 18px;font-size:clamp(1.2rem, 1rem + 1.2vw, 1.6rem);line-height:1.1;
  color:var(--arc-blanco);background:var(--naranja);border:3px solid var(--arc-tinta);border-radius:8px;
  transform:rotate(-2.5deg) skewX(-8deg);box-shadow:0 5px 0 var(--arc-tinta)}
/* el panel no hace scroll (el banderín sale por arriba): lo hace la capa */
[data-variante="coches"] .coches-capa{overflow:auto;place-items:start center}
[data-variante="coches"] .coches-capa:not(.coches-capa--titulo):not(.coches-capa--podio){padding-top:calc(var(--mal-e5) + 24px);padding-bottom:var(--mal-e6)}
[data-variante="coches"] .coches-capa--titulo,[data-variante="coches"] .coches-capa--podio{overflow:hidden;place-items:center}

/* ─── botones: naranja el que arranca, azul el resto ─────── */
[data-variante="coches"] .btn{
  position:relative;
  font-family:"Bangers",var(--mal-display);font-weight:400;font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--arc-blanco);-webkit-text-stroke:1px var(--arc-tinta);paint-order:stroke fill;text-shadow:0 2px 0 var(--arc-tinta);
  background:var(--azul);border:3px solid var(--arc-tinta);border-radius:12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 var(--arc-tinta);
  transform:skewX(-6deg);transition:transform .12s var(--mal-ease), box-shadow .12s, filter .12s}
[data-variante="coches"] .btn > *{transform:skewX(6deg)}
[data-variante="coches"] .btn:hover,[data-variante="coches"] .btn:focus-visible{
  color:var(--arc-blanco);border-color:var(--arc-tinta);outline:none;filter:brightness(1.12);
  transform:skewX(-6deg) scale(1.04);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 var(--arc-tinta), 0 0 0 3px var(--arc-amarillo), 0 0 22px rgba(255,226,60,.6)}
[data-variante="coches"] .btn:active{transform:skewX(-6deg) translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 0 0 var(--arc-tinta)}
[data-variante="coches"] .btn--rojo,[data-variante="coches"] .btn--rojo:hover,[data-variante="coches"] .btn--rojo:focus-visible{background:var(--naranja)}
[data-variante="coches"] .btn--rojo::before{display:none}
[data-variante="coches"] .btn:disabled{filter:saturate(.3)}
[data-variante="coches"] .boton-juego{font-size:1.3rem;border-radius:14px}
/* el cursor del mando: un triángulo a la izquierda del botón elegido */
[data-variante="coches"] .coches-opciones .btn:focus-visible::after,[data-variante="coches"] .coches-opciones .btn:hover::after{
  content:"";position:absolute;left:-22px;top:50%;transform:translateY(-50%) skewX(6deg);
  border:9px solid transparent;border-left:14px solid var(--arc-amarillo);filter:drop-shadow(2px 2px 0 var(--arc-tinta));
  animation:coches-cursor .5s ease-in-out infinite alternate}
@keyframes coches-cursor{to{left:-28px}}
[data-variante="coches"] .btn-ghost,[data-variante="coches"] .btn-ghost:hover,[data-variante="coches"] .btn-ghost:focus-visible{
  background:transparent;border-color:transparent;box-shadow:none;filter:none;color:var(--arc-cian);
  font-size:1rem;text-shadow:0 2px 0 var(--arc-tinta)}
[data-variante="coches"] .btn-ghost:focus-visible{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:3px}
[data-variante="coches"] .btn--icono{border-radius:50%;transform:none;font-size:1rem}
[data-variante="coches"] .btn--icono > *{transform:none}
[data-variante="coches"] .btn--icono:hover,[data-variante="coches"] .btn--icono:focus-visible{transform:scale(1.06)}

/* ─── fichas: azules; la elegida, amarilla ────────────────── */
[data-variante="coches"] .chip{
  font-family:"Bungee",var(--mal-texto);font-weight:400;font-size:.68rem;letter-spacing:.02em;min-height:36px;
  color:var(--arc-blanco);background:var(--azul);border:2px solid var(--arc-tinta);border-radius:8px;
  box-shadow:0 3px 0 var(--arc-tinta);transform:skewX(-6deg);transition:transform .1s var(--mal-ease), box-shadow .1s}
[data-variante="coches"] .chip > *{transform:skewX(6deg)}
[data-variante="coches"] .chip:hover,[data-variante="coches"] .chip:focus-visible{outline:none;box-shadow:0 3px 0 var(--arc-tinta), 0 0 0 2px var(--arc-amarillo)}
[data-variante="coches"] .chip:active{transform:skewX(-6deg) translateY(3px);box-shadow:none}
[data-variante="coches"] .chip[aria-checked="true"]{background:var(--amarillo);color:var(--arc-tinta);text-shadow:none}
[data-variante="coches"] .chip.is-cerrada{background:rgba(255,255,255,.08);border-style:dashed;border-color:rgba(255,255,255,.4);box-shadow:none;opacity:.8}
[data-variante="coches"] .coches-parejas .chip svg:not(.icono){vertical-align:-5px}

/* ─── cualidades: tacos de cian ───────────────────────────── */
[data-variante="coches"] .medidor > i{height:12px;border-radius:2px;background:rgba(0,0,0,.35);border:2px solid var(--arc-tinta);transform:skewX(-12deg)}
[data-variante="coches"] .medidor > i.lleno{background:var(--arc-cian);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
[data-variante="coches"] .coches-stats dt{font-family:"Bungee",var(--mal-texto);letter-spacing:.03em;color:var(--arc-amarillo)}

/* ─── listas y tablas: filas sobre la noche ───────────────── */
[data-variante="coches"] .coches-teclas dt{font-family:var(--mal-texto);font-weight:800;color:var(--arc-amarillo)}
[data-variante="coches"] .coches-teclas dd{color:var(--ref-t1)}
[data-variante="coches"] .coches-lista li{padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.22)}
[data-variante="coches"] .coches-lista b{font-family:"Bangers",var(--mal-display);font-weight:400;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;color:var(--arc-blanco)}
[data-variante="coches"] .coches-lista .caption{color:var(--ref-t2)}
[data-variante="coches"] .coches-lista li.is-cerrada{opacity:.55}
[data-variante="coches"] .coches-lista .icono{color:var(--arc-cian)}
[data-variante="coches"] .coches-podio{color:var(--ref-t1)}
[data-variante="coches"] .coches-podio li{padding:5px 10px;border-radius:6px;transform:skewX(-6deg)}
[data-variante="coches"] .coches-podio li:nth-child(odd){background:rgba(0,0,0,.25)}
[data-variante="coches"] .coches-podio li.es-tu{background:var(--amarillo);color:var(--arc-tinta)}
[data-variante="coches"] .coches-mapa{background:rgba(0,0,0,.3);border:2px solid var(--arc-tinta);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}

/* ─── el premio: rayos y disco de oro ─────────────────────── */
[data-variante="coches"] .premio{color:var(--arc-blanco);background:
  radial-gradient(circle at 50% 44%, rgba(255,226,60,.35) 0%, transparent 42%),
  linear-gradient(180deg, #2B1A7A, #150C3A)}
[data-variante="coches"] .premio__rayos{background:repeating-conic-gradient(from 0deg at 50% 50%,
  rgba(255,226,60,.22) 0deg 7.5deg, transparent 7.5deg 15deg)}
[data-variante="coches"] .premio__disco{background:radial-gradient(circle at 40% 35%, #FFF6C4, #FFD23F 55%, #E8A000);
  border:4px solid var(--arc-tinta);box-shadow:0 0 0 7px #FF9A1F, 0 0 0 10px var(--arc-tinta), 0 12px 0 10px rgba(0,0,0,.35), 0 0 60px rgba(255,226,60,.55)}
[data-variante="coches"] .premio__nombre{font-size:clamp(2.4rem, 1.6rem + 4vw, 4.4rem);transform:rotate(-3deg);line-height:1}
[data-variante="coches"] .premio__desc{color:var(--ref-t1)}
[data-variante="coches"] .premio .kicker{justify-content:center;color:var(--arc-cian)}
[data-variante="coches"] .premio__pie{font-family:"Bangers",var(--mal-display);text-transform:uppercase;letter-spacing:.1em;font-size:1.3rem;
  color:var(--arc-blanco);-webkit-text-stroke:1px var(--arc-tinta);paint-order:stroke fill;text-shadow:0 2px 0 var(--arc-tinta)}
[data-variante="coches"] .coches-creditos{color:var(--ref-t2)}

/* ─── el podio ────────────────────────────────────────────── */
[data-variante="coches"] .coches-podio-titulo{transform:rotate(-3deg)}
[data-variante="coches"] .coches-podio-cab .coches-banner{margin:0;align-self:center}
[data-variante="coches"] .coches-podio-nombres li{padding:6px 14px 6px 10px;background:var(--noche);color:var(--arc-blanco);
  border:3px solid var(--arc-tinta);border-radius:10px;box-shadow:0 5px 0 var(--arc-tinta);transform:skewX(-6deg)}
[data-variante="coches"] .coches-podio-nombres li > *{transform:skewX(6deg)}
[data-variante="coches"] .coches-podio-nombres li b{font-family:"Bangers",var(--mal-display);font-weight:400;color:var(--arc-amarillo);
  -webkit-text-stroke:1px var(--arc-tinta);paint-order:stroke fill;text-shadow:0 2px 0 var(--arc-tinta);font-size:2.2rem}
[data-variante="coches"] .coches-podio-nombres li span{font-family:"Bungee",var(--mal-texto);font-size:.72rem}
[data-variante="coches"] .coches-podio-nombres li em{color:var(--arc-cian);font-family:"Bungee",var(--mal-texto);font-size:.6rem}
[data-variante="coches"] .coches-podio-nombres li.es-tu{background:var(--amarillo);color:var(--arc-tinta)}
[data-variante="coches"] .coches-podio-nombres li.es-tu em{color:var(--arc-tinta)}

/* ─── el HUD ──────────────────────────────────────────────── */
[data-variante="coches"] .coches-hud{--tinta:var(--arc-tinta)}
[data-variante="coches"] .coches-puesto__n{font-size:clamp(3.4rem, 2rem + 5vw, 5.6rem);transform:rotate(-4deg);line-height:.9;
  -webkit-text-stroke:3px var(--arc-tinta);text-shadow:0 4px 0 var(--arc-tinta), 4px 4px 0 var(--arc-tinta), 0 9px 0 rgba(0,0,0,.35)}
[data-variante="coches"] .coches-de{display:none}
[data-variante="coches"] .coches-puesto__n::after{content:"º";font-size:.55em;color:var(--arc-blanco);margin-left:.04em;vertical-align:top}
[data-variante="coches"] .coches-hud .coches-tiempo{font-family:"Bungee",var(--mal-texto);font-weight:400;background:var(--arc-tinta);color:var(--arc-amarillo);
  border:2px solid rgba(255,255,255,.3);transform:skewX(-8deg);padding:4px 12px}
[data-variante="coches"] .coches-hud .coches-ruta__titulo{font-family:"Bangers",var(--mal-display);font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(1rem, .85rem + .6vw, 1.3rem);color:var(--arc-blanco);-webkit-text-stroke:1.5px var(--arc-tinta);text-shadow:0 3px 0 var(--arc-tinta)}
[data-variante="coches"] .coches-ruta__carril{background:var(--arc-tinta);border-color:rgba(255,255,255,.35);box-shadow:0 3px 0 rgba(0,0,0,.4)}
[data-variante="coches"] .coches-punto.es-tu{box-shadow:0 0 0 3px var(--arc-amarillo), 0 0 0 5px var(--arc-tinta)}
[data-variante="coches"] .coches-vel{font-size:clamp(2.8rem, 1.8rem + 3vw, 4rem);transform:rotate(-3deg);
  -webkit-text-stroke:3px var(--arc-tinta);text-shadow:0 4px 0 var(--arc-tinta), 4px 4px 0 var(--arc-tinta)}
[data-variante="coches"] .coches-vel small{font-family:"Bungee",var(--mal-texto);font-weight:400;color:var(--arc-blanco);letter-spacing:.04em;-webkit-text-stroke:0;text-shadow:0 2px 0 var(--arc-tinta)}
[data-variante="coches"] :is(.coches-empujador,.coches-turbo){font-family:"Bungee",var(--mal-texto);font-weight:400;letter-spacing:.03em;
  border:2px solid var(--arc-tinta);box-shadow:0 3px 0 var(--arc-tinta);transform:skewX(-8deg);color:var(--arc-tinta);background:var(--arc-blanco)}
[data-variante="coches"] .coches-empujador[data-estado="empujando"]{background:var(--arc-verde)}
[data-variante="coches"] .coches-empujador[data-estado="piso"]{background:var(--arc-rojo);color:var(--arc-blanco)}
[data-variante="coches"] .coches-turbo{background:var(--arc-morado);color:var(--arc-blanco)}
[data-variante="coches"] .coches-botones .btn{background:var(--noche);color:var(--arc-amarillo);box-shadow:0 4px 0 var(--arc-tinta)}

/* los mandos: discos azules con el borde de tinta; «Empuja», naranja */
[data-variante="coches"] .coches-mando{
  font-family:"Bangers",var(--mal-display);font-weight:400;font-size:1rem;letter-spacing:.08em;
  color:var(--arc-blanco);-webkit-text-stroke:1px var(--arc-tinta);paint-order:stroke fill;text-shadow:0 2px 0 var(--arc-tinta);
  background:var(--azul);border:3px solid var(--arc-tinta);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 var(--arc-tinta);-webkit-backdrop-filter:none;backdrop-filter:none;opacity:.92}
[data-variante="coches"] .coches-mando.is-on{filter:brightness(1.15);box-shadow:inset 0 3px 0 rgba(255,255,255,.4), 0 1px 0 var(--arc-tinta);transform:translateY(4px)}
[data-variante="coches"] .coches-mando--freno,[data-variante="coches"] .coches-mando--freno.is-on{background:linear-gradient(180deg, #FF7A6B, var(--arc-rojo) 50%, #B01E16);border-color:var(--arc-tinta)}
/* Las mitades de la pantalla que giran: sin disco, solo la flecha. */
[data-variante="coches"] .coches-zona,[data-variante="coches"] .coches-zona.is-on{background:transparent;border:0;box-shadow:none;opacity:1;color:var(--arc-blanco);filter:none}
[data-variante="coches"] .coches-zona.is-on{background:linear-gradient(to top, rgba(255,226,60,.28), transparent 70%)}

/* la cuenta atrás: 3 rojo, 2 amarillo, 1 verde y a bajar, cian */
[data-variante="coches"] .coches-cuenta{font-size:clamp(5rem, 22vw, 11rem);-webkit-text-stroke:4px var(--arc-tinta);
  text-shadow:0 6px 0 var(--arc-tinta), 6px 6px 0 var(--arc-tinta), 0 14px 0 rgba(0,0,0,.35);transform:rotate(-4deg)}
[data-variante="coches"] .coches-cuenta[data-n="3"]{color:var(--arc-rojo)}
[data-variante="coches"] .coches-cuenta[data-n="2"]{color:var(--arc-amarillo)}
[data-variante="coches"] .coches-cuenta[data-n="1"]{color:var(--arc-verde)}
[data-variante="coches"] .coches-cuenta[data-n="0"]{color:var(--arc-cian);font-size:clamp(3.5rem, 15vw, 8rem)}
[data-variante="coches"] .coches-aviso{color:var(--arc-blanco);font-size:clamp(1.6rem, 6vw, 2.8rem);transform:rotate(-2deg)}

/* la cortina y el cartel de girar */
[data-variante="coches"] .coches-cortina{background:var(--noche)}
[data-variante="coches"] .coches-gira{background:var(--noche);color:var(--arc-amarillo);font-family:"Bangers",var(--mal-display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;
  -webkit-text-stroke:1.5px var(--arc-tinta);paint-order:stroke fill;text-shadow:0 3px 0 var(--arc-tinta)}
[data-variante="coches"] .coches-gira .micro{color:var(--arc-cian);-webkit-text-stroke:0;text-shadow:none}

@media (prefers-reduced-motion:reduce){
  [data-variante="coches"] .coches-opciones .btn:focus-visible::after{animation:none}
}