/* Rodaje · autoescuela en el centro de Castelló (concepto WEBO). Equilibrada y cercana.
   Mundo: la señalización vial española vista desde arriba. Paneles azules de orientación con su filete blanco,
   asfalto con bordillo y línea discontinua, placas de categoría, señales de verdad en el test.
   Paleta: azul señal, asfalto, blanco de marca vial, papel frío; rojo y verde solo para las señales y los aciertos.
   Tipografía: Overpass (heredera de la letra de las señales de carretera), de 400 a 800 en una sola variable.
   Forma: paneles con esquinas de 18 px y filete blanco interior; botones de 12 px; campos y fichas de 10 px.
   Movimiento (6/10): el coche llega y para en el paso de peatones, luego avanza con el scroll por la carretera;
   las señales de cada parada se encienden al pasar; el test gira la señal entre preguntas. */

@font-face { font-family: "Overpass"; src: url("/assets/fonts/conceptos/overpass-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --fondo: #EFF2F5;
  --banda: #E2E7EC;
  --papel: #FBFCFD;
  --azul: #0F59A8;
  --azul-hondo: #0B4380;
  --asfalto: #2B2F33;
  --asfalto-2: #3A3F44;
  --bordillo: #D6D3CC;
  --marca: #F4F6F8;
  --tinta: #15212B;
  --tinta-2: #4A5866;
  --rojo: #C9302C;
  --verde: #1E7F4F;
  --verde-luz: #46B77F;
  --filete: rgb(21 33 43 / .14);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ancho: 1240px;
  --margen: clamp(20px, 4.4vw, 64px);
  --hueco: clamp(16px, 1.8vw, 28px);
  --r-panel: 18px;
  --r-boton: 12px;
  --r-campo: 10px;
  --cab: 72px;
  /* Carretera */
  --via: 92px;
  --bordillo-w: 9px;
  --carril: 22px;
  --coche-w: 36px;
  --coche-h: 68px;
}

html { scroll-padding-top: calc(var(--cab) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1.0625rem/1.55 "Overpass", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
::selection { background: #BFD5EE; color: var(--tinta); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
p { text-wrap: pretty; }

.saltar {
  position: absolute; left: 16px; top: -64px; z-index: 60;
  padding: 10px 16px; border-radius: var(--r-boton);
  background: var(--azul); color: #fff; font-weight: 700; text-decoration: none;
}
.saltar:focus-visible { top: 12px; }

.cabecera__in, .portada__in, .camino__in, .permisos__in, .test__in, .precios__in, .apuntate__in, .pie__in {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--r-boton);
  font: 700 1.0625rem/1 "Overpass", ui-sans-serif, system-ui, sans-serif; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--azul { background: var(--azul); color: #fff; }
.boton--blanco { background: #fff; color: var(--azul); }
.boton--linea { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .75); }
.boton--cabecera { min-height: 44px; padding: 0 20px; }
.enlace { color: var(--azul); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: rgb(15 89 168 / .3); transition: text-decoration-color 200ms ease; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
@media (hover: hover) and (pointer: fine) {
  .boton--azul:hover { background: var(--azul-hondo); }
  .boton--blanco:hover { background: #E3ECF6; }
  .boton--linea:hover { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 2px #fff; }
  .enlace:hover { text-decoration-color: currentColor; }
  .cabecera__nav a:hover { color: var(--azul); }
  .pie a:hover { color: #fff; }
}

/* Panel de señal: azul con el filete blanco a 6 px del borde */
.panel {
  background: var(--azul); color: #fff; border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 6px var(--azul), inset 0 0 0 9px #fff;
}
.panel :focus-visible { outline-color: #fff; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgb(239 242 245 / .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--filete);
}
@media (prefers-reduced-transparency: reduce) { .cabecera { background: var(--fondo); } }
.cabecera__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--cab); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
.marca__placa {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px;
  background: var(--azul); color: #fff; box-shadow: inset 0 0 0 2.5px var(--azul), inset 0 0 0 4px #fff;
}
.marca__placa svg { width: 22px; height: 22px; }
.marca__nombre { font-size: 1.4375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; padding-top: 3px; }
.marca__sub { color: var(--tinta-2); font-size: 1rem; line-height: 1; padding-top: 4px; }
.cabecera__nav ul { display: flex; gap: clamp(20px, 2.6vw, 36px); }
.cabecera__nav a { color: var(--tinta); font-weight: 600; text-decoration: none; transition: color 200ms ease; }

/* ---------- Trayecto: la carretera que baja por la portada y el camino ---------- */
.trayecto { position: relative; isolation: isolate; }
.carretera { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; display: none; }
.con-carretera .carretera { display: block; }
.carretera path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.carretera__acera { stroke: var(--bordillo); stroke-width: calc(var(--via) + 2 * var(--bordillo-w)); }
.carretera__asfalto { stroke: var(--asfalto-2); stroke-width: var(--via); }
.carretera__linea { stroke: var(--marca); stroke-width: 3; stroke-dasharray: 18 14; stroke-linecap: butt; }
.ancla { position: absolute; left: var(--x, 50%); top: calc(var(--y) * 100%); width: 0; height: 0; pointer-events: none; }
/* La carretera entra por debajo de la cabecera: así no se ve su remate redondo arriba */
.ancla--entrada { top: calc(-1 * var(--cab) - 40px); }

/* ---------- Portada ---------- */
.portada { position: relative; z-index: 1; overflow-x: clip; }
.portada__in {
  position: relative;
  min-height: calc(100svh - var(--cab));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding-top: clamp(24px, 4vh, 48px); padding-bottom: clamp(24px, 4vh, 48px);
}
.portada__panel {
  grid-column: 1 / 8; grid-row: 1; align-self: center;
  padding: clamp(36px, 4.4vw, 64px);
}
.portada__titulo { font-size: clamp(3.25rem, 6.2vw, 5.875rem); line-height: .96; letter-spacing: -.03em; }
.portada__titulo .linea { padding-bottom: .04em; }
.portada__sub { margin-top: clamp(20px, 2.6vw, 28px); max-width: 40ch; color: rgb(255 255 255 / .88); font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.5; }
.portada .acciones { margin-top: clamp(28px, 3.4vw, 40px); }

/* La vía de la portada: sin JS se ve este tramo pintado con CSS; con JS se oculta y lo dibuja el SVG */
.via { position: relative; grid-column: 8 / 13; grid-row: 1; margin-block: calc(-1 * clamp(24px, 4vh, 48px)); --x: 44%; }
/* Manzanas a la derecha de la calzada, como en un plano de calles */
.via::before, .via::after {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--x) + var(--via) / 2 + var(--bordillo-w) + 18px);
  right: calc(-1 * var(--margen) - max(0px, (100vw - var(--ancho) - 2 * var(--margen)) / 2) + 24px);
  border-radius: var(--r-panel); background: var(--banda);
  box-shadow: inset 0 0 0 1px rgb(21 33 43 / .05);
}
.via::before { top: 0; height: calc(22% - var(--bordillo-w) - 18px); border-top-left-radius: 0; border-top-right-radius: 0; }
.via::after { top: calc(22% + 78px + var(--bordillo-w) + 18px); bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Calle lateral que se incorpora por la derecha, con su línea de ceda el paso */
.via__cruce {
  position: absolute; z-index: 1; top: 22%; height: 78px;
  left: calc(var(--x) + var(--via) / 2); right: calc(-1 * var(--margen) - max(0px, (100vw - var(--ancho) - 2 * var(--margen)) / 2));
  border-block: var(--bordillo-w) solid var(--bordillo);
  background: repeating-linear-gradient(90deg, var(--marca) 0 18px, transparent 18px 32px) 40px center / 100% 3px no-repeat, var(--asfalto-2);
}
.via__cruce::before {
  content: ""; position: absolute; left: 10px; top: 0; width: 4px; height: calc(50% - 4px);
  background: repeating-linear-gradient(var(--marca) 0 7px, transparent 7px 12px);
}
.via__cruce::after {
  content: ""; position: absolute; left: 26px; top: calc(25% - 10px); width: 18px; height: 20px;
  background: var(--marca); clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.via__asfalto {
  position: absolute; top: 0; bottom: 0; left: calc(var(--x) - var(--via) / 2); width: var(--via);
  background:
    repeating-linear-gradient(var(--marca) 0 18px, transparent 18px 32px) center top / 3px 100% no-repeat,
    var(--asfalto-2);
  box-shadow: 0 0 0 var(--bordillo-w) var(--bordillo);
}
.con-carretera .via__asfalto { visibility: hidden; }
.cebra {
  position: absolute; z-index: 2; left: calc(var(--x) - var(--via) / 2 + 3px); width: calc(var(--via) - 6px); top: 66%; height: 38px;
  background: repeating-linear-gradient(90deg, var(--marca) 0 7px, transparent 7px 13px);
}
.senal-30 {
  position: absolute; z-index: 2; top: calc(66% - 132px); left: calc(var(--x) - var(--via) / 2 - var(--bordillo-w) - 64px);
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 6.5px var(--rojo), 0 6px 14px -6px rgb(11 28 44 / .45);
  color: var(--tinta); font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em;
}
.senal-30 span { padding-top: 3px; }
.senal-30::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 40px; margin-left: -1.5px; background: #9AA6B1; }

/* El coche: sin JS espera aparcado delante del paso de peatones, en su carril (a la derecha de la marcha) */
.coche {
  position: absolute; z-index: 3; display: block;
  width: var(--coche-w); height: var(--coche-h);
  left: calc(var(--x) - var(--carril) - var(--coche-w) / 2);
  top: calc(66% - var(--coche-h) - 10px);
  transform: rotate(180deg);
}
.coche svg { display: block; width: 100%; height: 100%; overflow: visible; }
.coche__freno { fill: #8E2A24; transition: fill 160ms ease; }
.coche::after {
  content: ""; position: absolute; left: -6px; right: -6px; bottom: -10px; height: 18px; opacity: 0;
  background: radial-gradient(closest-side, rgb(255 70 56 / .55), transparent) 0 0 / 50% 100% no-repeat, radial-gradient(closest-side, rgb(255 70 56 / .55), transparent) 100% 0 / 50% 100% no-repeat;
  transition: opacity 180ms ease;
}
/* Con JS el coche pasa a moverse por el trayecto entero; el giro y la posición los pone el script */
.coche.en-ruta { left: 0; top: 0; margin-left: calc(var(--coche-w) / -2); margin-top: calc(var(--coche-h) / -2); transform: none; will-change: transform; }
.coche.frena .coche__freno { fill: #FF4638; }
.coche.frena::after { opacity: 1; }

/* ---------- Del primer día al carné ---------- */
.camino { position: relative; z-index: 1; }
.camino__in { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(96px, 10vw, 150px); }
.camino__cab { max-width: 34rem; }
.camino h2, .permisos h2, .test h2, .precios h2, .apuntate h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.02; letter-spacing: -.025em; }
.camino__cab p { margin-top: 16px; color: var(--tinta-2); font-size: 1.1875rem; }
.paradas { margin-top: clamp(96px, 11vw, 160px); }
.parada {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  --x: 58%;
}
.parada + .parada { margin-top: clamp(130px, 15vw, 210px); }
.parada:nth-child(even) { --x: 42%; }
.parada__texto { grid-column: 1 / 6; }
.parada:nth-child(even) .parada__texto { grid-column: 8 / 13; }
.parada__senal {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
  background: var(--azul); color: #fff; font-size: 1.625rem; font-weight: 800; line-height: 1;
  box-shadow: inset 0 0 0 4px var(--azul), inset 0 0 0 6px #fff;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease), transform 400ms var(--ease);
}
.parada__senal--novel { background: var(--verde); box-shadow: inset 0 0 0 4px var(--verde), inset 0 0 0 6px #fff; }
.parada h3 { margin-top: 18px; font-size: clamp(1.625rem, 2.4vw, 2.125rem); line-height: 1.08; }
.parada p { margin-top: 10px; max-width: 42ch; color: var(--tinta-2); font-size: 1.125rem; }
.parada--meta { padding-bottom: 150px; }
.ancla--fin { top: calc(100% - 64px); }
.aparcamiento {
  position: absolute; z-index: 1; left: var(--x); top: calc(100% - 64px);
  width: calc(var(--coche-w) + 18px); height: calc(var(--coche-h) + 20px); margin-left: calc((var(--coche-w) + 18px) / -2); margin-top: calc((var(--coche-h) + 20px) / -2);
  border: 2.5px solid var(--marca); border-top: 0; border-radius: 0 0 4px 4px; display: none;
}
.con-carretera .aparcamiento { display: block; }
/* Mientras el coche no ha llegado, la señal de la parada está apagada (solo con carretera viva) */
.carretera-viva .parada:not(.pasada) .parada__senal { background: var(--papel); color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); transform: scale(.94); }
.carretera-viva .parada--meta:not(.pasada) .parada__senal { color: var(--verde); box-shadow: inset 0 0 0 2px var(--verde); }

/* ---------- Permisos ---------- */
.permisos { position: relative; z-index: 1; background: var(--banda); }
.permisos__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: clamp(40px, 5vw, 64px);
  padding-top: clamp(96px, 10vw, 150px); padding-bottom: clamp(96px, 10vw, 150px);
}
.permisos h2 { grid-column: 1 / 13; max-width: 16ch; }
.permiso--b { grid-column: 1 / 8; overflow: hidden; border-radius: var(--r-panel); background: var(--papel); box-shadow: 0 1px 0 rgb(21 33 43 / .06), 0 28px 60px -40px rgb(11 28 44 / .55); }
.permiso--b .permiso__texto { position: relative; padding: clamp(28px, 3.2vw, 44px); padding-top: 56px; }
.placa {
  display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 12px;
  background: var(--azul); color: #fff; font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  box-shadow: inset 0 0 0 4px var(--azul), inset 0 0 0 6px #fff;
}
.placa span, .placa { padding-top: 2px; }
.placa--grande { position: absolute; top: -44px; left: clamp(28px, 3.2vw, 44px); width: 88px; height: 88px; font-size: 2.75rem; border-radius: 16px; box-shadow: inset 0 0 0 5px var(--azul), inset 0 0 0 8px #fff, 0 10px 24px -12px rgb(11 28 44 / .5); }
.placa--blanca { background: #fff; color: var(--azul); box-shadow: inset 0 0 0 3px var(--azul); }
.placa--blanca svg { width: 30px; height: 30px; }
.permiso h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.1; }
.permiso h3 span { color: var(--tinta-2); font-weight: 500; }
.permiso p { margin-top: 8px; color: var(--tinta-2); max-width: 46ch; }
.permiso--b h3 { font-size: clamp(1.875rem, 2.8vw, 2.5rem); }
.permiso--b p { font-size: 1.1875rem; }
.permiso--b .enlace { display: inline-block; margin-top: 18px; }
.permisos__otros { grid-column: 8 / 13; display: grid; align-content: start; }
.permisos__otros .permiso { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid rgb(21 33 43 / .18); }
.permisos__otros .permiso:first-child { border-top: 0; padding-top: 0; }

.hueco { position: relative; overflow: hidden; margin: 0; background: var(--banda); }
.hueco > svg, .hueco > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hueco--coche { aspect-ratio: 16 / 10; }

/* ---------- Test ---------- */
.test { position: relative; z-index: 1; background: var(--asfalto); color: var(--marca); }
.test ::selection { background: #4F7FB5; color: #fff; }
.test :focus-visible { outline-color: #fff; }
.test__in { padding-top: clamp(96px, 10vw, 150px); padding-bottom: clamp(96px, 10vw, 150px); }
.test__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; padding-bottom: clamp(40px, 5vw, 64px); }
.test__cab p { max-width: 40ch; color: rgb(244 246 248 / .78); font-size: 1.1875rem; }
.test__caja { position: relative; }
.test__progreso { display: none; gap: 8px; margin-bottom: 32px; }
.test__progreso li { width: 40px; height: 5px; border-radius: 3px; background: rgb(244 246 248 / .2); transition: background-color 300ms ease; }
.test__progreso li.es-actual { background: var(--marca); }
.test__progreso li.es-bien { background: var(--verde-luz); }
.test__progreso li.es-mal { background: #E5605B; }
.test__caja { --col-senal: 5; --col-resto: 7; --test-gap: clamp(32px, 6vw, 96px); }
.pregunta {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--test-gap); align-items: center;
}
.test.es-interactivo .test__pie { margin-left: calc((100% - var(--test-gap)) * var(--col-senal) / (var(--col-senal) + var(--col-resto)) + var(--test-gap)); }
.pregunta + .pregunta { margin-top: 80px; padding-top: 80px; border-top: 1px solid rgb(244 246 248 / .14); }
.pregunta__senal { perspective: 900px; }
.pregunta__senal svg {
  display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-panel);
  background: #E2E7EC; padding: 14%; box-sizing: border-box;
  backface-visibility: hidden;
}
.pregunta__senal--escena svg { padding: 0; }
.pregunta__num { color: rgb(244 246 248 / .7); font-size: 1rem; font-weight: 700; }
.pregunta h3 { margin-top: 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.18; font-weight: 700; letter-spacing: -.01em; }
.opciones { margin-top: 28px; display: grid; gap: 10px; }
.opcion {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; min-height: 58px; padding: 14px 18px 14px 14px;
  border: 0; border-radius: var(--r-boton); background: var(--asfalto-2); color: var(--marca);
  font: 400 1.0625rem/1.4 "Overpass", ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: pointer;
  transition: background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease, transform 160ms var(--ease);
}
.opcion > span:last-child { padding-top: 4px; }
.opcion:active { transform: scale(.985); }
.opcion__letra { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: rgb(244 246 248 / .12); font-weight: 800; padding-top: 2px; transition: background-color 200ms ease; }
.opcion.es-correcta { background: var(--verde); }
.opcion.es-fallo { background: var(--rojo); }
.opcion.es-correcta .opcion__letra, .opcion.es-fallo .opcion__letra { background: rgb(255 255 255 / .22); }
.opcion.es-la-buena { box-shadow: inset 0 0 0 2px var(--verde-luz); }
.opcion[aria-disabled="true"] { cursor: default; }
.opcion.es-apagada { opacity: .5; }
@media (hover: hover) and (pointer: fine) { .opcion:not([aria-disabled="true"]):hover { background: #474D53; } }
.porque { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgb(244 246 248 / .14); }
.porque summary { cursor: pointer; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgb(255 255 255 / .35); }
.porque p { margin-top: 10px; max-width: 56ch; color: rgb(244 246 248 / .86); }
.porque strong { color: #fff; font-weight: 800; }
.porque__fuente { font-size: .9375rem; color: rgb(244 246 248 / .62) !important; }
.test__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 28px; }
.test [hidden] { display: none !important; }
.test__aviso { font-size: 1.25rem; font-weight: 800; min-height: 1.5em; }
.test__aviso.es-bien { color: var(--verde-luz); }
.test__aviso.es-mal { color: #F07A75; }
.test__final { max-width: 40rem; }
.test__nota { font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.test__final > p:not(.test__nota) { margin-top: 14px; color: rgb(244 246 248 / .8); font-size: 1.1875rem; }
.test__final .acciones { margin-top: 28px; }
.test__nota:focus { outline: none; }
/* Con JS: una pregunta cada vez, la explicación aparece al responder */
.test.es-interactivo .test__progreso { display: flex; }
.test.es-interactivo .pregunta { display: none; }
.test.es-interactivo .pregunta.es-actual { display: grid; }
.test.es-interactivo .pregunta + .pregunta { margin-top: 0; padding-top: 0; border-top: 0; }
.test.es-interactivo .porque { display: none; }
.test.es-interactivo .pregunta.es-respondida .porque { display: block; }
.test.es-interactivo .porque summary { display: none; }
.test.es-interactivo .porque > p:first-of-type { margin-top: 0; }
.test:not(.es-interactivo) .opcion { pointer-events: none; }
.pregunta h3:focus { outline: none; }

/* ---------- Precios: cartel de orientación ---------- */
.precios { position: relative; z-index: 1; }
.precios__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center;
  padding-top: clamp(96px, 10vw, 150px); padding-bottom: clamp(96px, 10vw, 150px);
}
.precios__cab { grid-column: 1 / 6; }
.precios__cab p { margin-top: 18px; color: var(--tinta-2); font-size: 1.1875rem; max-width: 36ch; }
.cartel { grid-column: 7 / 13; padding: clamp(32px, 3.6vw, 52px); }
.cartel__titulo { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; padding-bottom: 14px; }
.cartel__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0 14px; border-top: 2px solid rgb(255 255 255 / .3); }
.cartel__fila dt { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); font-weight: 600; line-height: 1.25; }
.cartel__fila dd { margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.cartel__nota { margin-top: 10px; padding-top: 16px; border-top: 2px solid rgb(255 255 255 / .3); color: rgb(255 255 255 / .84); font-size: 1rem; }

/* ---------- Apúntate ---------- */
.apuntate { position: relative; z-index: 1; background: var(--banda); }
.apuntate__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start;
  padding-top: clamp(96px, 10vw, 150px); padding-bottom: clamp(96px, 10vw, 150px);
}
.apuntate__info { grid-column: 1 / 6; }
.apuntate__info > p { margin-top: 18px; color: var(--tinta-2); font-size: 1.1875rem; max-width: 40ch; }
a[href^="tel:"] { white-space: nowrap; }
.horario { margin-top: 32px; }
.horario div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgb(21 33 43 / .18); }
.horario dt { font-weight: 700; }
.horario dd { margin: 0; color: var(--tinta-2); }
.hueco--clase { margin-top: 36px; aspect-ratio: 16 / 10; border-radius: var(--r-panel); }
.formulario {
  grid-column: 7 / 13; display: grid; gap: 22px;
  padding: clamp(28px, 3.2vw, 44px); border-radius: var(--r-panel);
  background: var(--papel); box-shadow: 0 1px 0 rgb(21 33 43 / .06), 0 30px 64px -40px rgb(11 28 44 / .5);
}
.campo { display: grid; gap: 8px; }
.campo label, .fichas legend { font-weight: 700; }
.campo label span { font-weight: 400; color: var(--tinta-2); }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid #C5CED6; border-radius: var(--r-campo); background: #fff; color: var(--tinta);
  font-size: 1.0625rem; line-height: 1.4; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgb(15 89 168 / .2); }
.campo input[aria-invalid="true"] { border-color: var(--rojo); }
.fichas { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fichas legend { width: 100%; padding: 0; margin-bottom: 10px; }
.ficha { position: relative; cursor: pointer; }
.ficha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ficha span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 2px 16px 0; border-radius: var(--r-campo);
  background: #fff; box-shadow: inset 0 0 0 1.5px #C5CED6; font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease);
}
.ficha input:checked + span { background: var(--azul); color: #fff; box-shadow: inset 0 0 0 1.5px var(--azul); }
.ficha input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.ficha:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ficha:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--azul); } }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; color: var(--tinta-2); cursor: pointer; }
.consentimiento input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--azul); }
.formulario .boton { justify-self: start; }
.formulario__aviso { min-height: 1.5em; color: var(--azul); font-weight: 600; }
.formulario__aviso.es-error { color: var(--rojo); }

/* ---------- Pie ---------- */
.pie { background: var(--asfalto); color: rgb(244 246 248 / .74); }
.pie :focus-visible { outline-color: #fff; }
.pie__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 36px; padding-bottom: 88px; }
.pie__marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; }
.pie__marca .marca__placa { width: 30px; height: 30px; border-radius: 8px; }
.pie__marca .marca__placa svg { width: 18px; height: 18px; }
.pie nav { margin-left: auto; }
.pie ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pie a { color: inherit; text-decoration: none; transition: color 200ms ease; }

/* ---------- Estado inicial del movimiento (solo portada, solo con html.mov) ---------- */
.mov:not(.mov-listo) .portada__panel, .mov:not(.mov-listo) .senal-30, .mov:not(.mov-listo) .coche { opacity: 0; }

/* ---------- Tableta ---------- */
@media (max-width: 1080px) {
  .cabecera__nav { display: none; }
  .portada__panel { grid-column: 1 / 9; }
  .via { grid-column: 9 / 13; --x: 50%; }
  .senal-30 { left: auto; right: calc(100% - var(--x) + var(--via) / 2 + var(--bordillo-w) + 14px); }
  .permiso--b { grid-column: 1 / 13; }
  .permisos__otros { grid-column: 1 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--hueco); }
  .permisos__otros .permiso { grid-template-columns: 1fr; border-top: 0; padding: 0; }
  .test__caja { --col-senal: 4; }
  .pregunta { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .precios__cab { grid-column: 1 / 13; margin-bottom: 40px; }
  .cartel { grid-column: 1 / 13; }
  .apuntate__info { grid-column: 1 / 13; }
  .formulario { grid-column: 1 / 13; margin-top: 48px; }
}

/* ---------- Móvil: la carretera va por el margen izquierdo y todo queda a su derecha ---------- */
@media (max-width: 760px) {
  :root { --cab: 64px; --via: 34px; --bordillo-w: 5px; --carril: 0px; --coche-w: 18px; --coche-h: 35px; --calle: 58px; }
  body { font-size: 1.0625rem; }
  .marca__sub { display: none; }
  .boton--cabecera { min-height: 42px; padding: 0 16px; }
  .portada__in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 20px; padding-bottom: 40px; padding-left: calc(var(--calle) + 4px); padding-right: 16px; }
  .portada__panel { grid-column: 1; padding: 30px 24px 28px; }
  .portada__titulo { font-size: clamp(2.5rem, 12vw, 3rem); line-height: 1; }
  .portada__sub { font-size: 1.0625rem; }
  .portada .acciones { flex-direction: column; align-items: stretch; }
  .via { position: absolute; left: 0; top: 0; bottom: 0; width: var(--calle); margin: 0; --x: 30px; }
  .cebra { top: 56%; height: 30px; background: repeating-linear-gradient(90deg, var(--marca) 0 5px, transparent 5px 9px); }
  .senal-30, .via__cruce, .via::before, .via::after { display: none; }
  .coche { top: calc(56% - var(--coche-h) - 8px); }
  .via__asfalto { background: var(--asfalto-2); }
  .carretera__linea { display: none; }
  .camino__in { padding-left: calc(var(--calle) + 4px); padding-right: 16px; }
  .paradas { margin-top: 64px; }
  .parada { grid-template-columns: minmax(0, 1fr); --x: calc(30px - var(--calle) - 4px); }
  .parada:nth-child(even) { --x: calc(30px - var(--calle) - 4px); }
  .parada__texto, .parada:nth-child(even) .parada__texto { grid-column: 1; }
  .parada + .parada { margin-top: 56px; }
  .parada__senal { width: 46px; height: 46px; font-size: 1.375rem; border-radius: 10px; }
  .parada h3 { margin-top: 14px; }
  .parada p { font-size: 1.0625rem; }
  .parada--meta { padding-bottom: 120px; }
  .permisos__in, .precios__in, .apuntate__in { grid-template-columns: minmax(0, 1fr); }
  .permisos .permisos__in > *, .precios .precios__in > *, .apuntate .apuntate__in > * { grid-column: 1 / -1; }
  .permisos__otros { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .permisos__otros .permiso { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid rgb(21 33 43 / .18); }
  .permisos__otros .permiso:first-child { border-top: 0; padding-top: 0; }
  .placa { width: 56px; height: 56px; font-size: 1.375rem; }
  .placa--grande { width: 76px; height: 76px; top: -38px; font-size: 2.25rem; }
  .pregunta { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .test.es-interactivo .test__pie { margin-left: 0; }
  .pregunta__senal { width: min(64%, 240px); }
  .test__cab { display: block; }
  .test__cab p { margin-top: 14px; }
  .cartel { padding: 28px 24px; }
  .cartel__fila { flex-wrap: wrap; gap: 4px 16px; }
  .horario div { grid-template-columns: 1fr; gap: 2px; }
  .formulario { padding: 24px 20px; }
  .pie nav { margin-left: 0; }
}