/* ==========================================================================
   Autoescuela Maribel — sistema "Señalización"
   Los colores tienen el significado que tienen en la carretera:
   verde placa L = acción, azul = información, rojo = aviso, amarillo = marca vial.
   ========================================================================== */

/* Fuentes alojadas en la propia web (no se pide nada a Google al cargarla).
   Solo el subconjunto latino; Overpass y Overpass Mono son variables. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("../fonts/overpass.woff2") format("woff2");
}
@font-face {
  font-family: "Overpass Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/overpass-mono.woff2") format("woff2");
}

:root {
  --asfalto: #1b1c1e;
  --blanco: #ffffff;
  --arcen: #e8eae7;
  --texto-suave: #45494c;
  --texto-sobre-asfalto: #c9ccce;

  --verde: #178036;
  --verde-hover: #0f6a2b;
  --azul: #0057a8;
  --azul-hover: #004a8f;
  --rojo: #d7141a;
  --amarillo: #f2b90f;
  --amarillo-hover: #dba40a;

  --font-display: "Overpass", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, monospace;

  --gutter: 16px;
  --container: 1200px;
  --radius-sign: 10px;
  --radius: 6px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --lane-dash: 44px;
  --lane-gap: 30px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--asfalto) var(--arcen);
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--asfalto);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  caret-color: var(--verde);
}

/* Los carteles que se levantan al entrar en pantalla sobresalen un poco
   mientras están inclinados: sin scroll horizontal en móvil por eso */
main { overflow-x: clip; }

::selection { background: var(--amarillo); color: var(--asfalto); }

img { display: block; max-width: 100%; height: auto; }

[hidden] { display: none !important; }

[id] { scroll-margin-top: 96px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.75rem); }
h3 { font-size: 1.3rem; line-height: 1.15; }

p { margin: 0; }
p + p { margin-top: var(--space-4); }

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--asfalto);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amarillo);
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--amarillo);
  color: var(--asfalto);
  font-family: var(--font-display);
  font-weight: 800;
}
.skip-link:focus { top: var(--space-3); }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 52px;
  padding: 0.7em 1.3em 0.6em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn .icon { width: 1.3em; height: 1.3em; }

.btn--go { background: var(--verde); color: var(--blanco); }
.btn--go:hover { background: var(--verde-hover); }

/* WhatsApp en amarillo de marca vial: destaca sobre blanco, azul y asfalto */
.btn--wa { background: var(--amarillo); color: var(--asfalto); }
.btn--wa:hover { background: var(--amarillo-hover); }

.btn--aula { background: var(--azul); color: var(--blanco); box-shadow: inset 0 0 0 2px var(--azul), inset 0 0 0 4px var(--blanco); }
.btn--aula:hover { background: var(--azul-hover); box-shadow: inset 0 0 0 2px var(--azul-hover), inset 0 0 0 4px var(--blanco); }
.btn--aula[aria-current="page"] { outline: 3px solid var(--amarillo); outline-offset: 2px; }

.btn--outline { border-color: var(--asfalto); color: var(--asfalto); background: transparent; }
.btn--outline:hover { background: var(--asfalto); color: var(--blanco); }

.btn--on-dark { border-color: var(--blanco); color: var(--blanco); background: transparent; }
.btn--on-dark:hover { background: var(--blanco); color: var(--asfalto); }

.btn--white { background: var(--blanco); color: var(--azul); }
.btn--white:hover { background: var(--asfalto); color: var(--blanco); }

.btn--sm { min-height: 44px; padding: 0.55em 1em 0.45em; font-size: 1rem; }

/* ---------- Señal (panel de carretera) ---------- */

.sign {
  position: relative;
  border-radius: var(--radius-sign);
  background: var(--azul);
  color: var(--blanco);
  box-shadow:
    inset 0 0 0 6px var(--azul),
    inset 0 0 0 9px var(--blanco),
    0 22px 40px -24px rgba(0, 0, 0, 0.55);
  padding: calc(9px + var(--space-5));
}
.sign--green {
  background: var(--verde);
  box-shadow:
    inset 0 0 0 6px var(--verde),
    inset 0 0 0 9px var(--blanco),
    0 22px 40px -24px rgba(0, 0, 0, 0.55);
}
.sign a:not(.btn) { color: inherit; }

/* Línea discontinua de carril */
.lane {
  height: 6px;
  background: repeating-linear-gradient(90deg, currentColor 0 var(--lane-dash), transparent var(--lane-dash) calc(var(--lane-dash) + var(--lane-gap)));
}

/* Placa L: viñeta de listas */
.l-list { list-style: none; margin: 0; padding: 0; }
.l-list li {
  position: relative;
  padding-left: 2.1em;
}
.l-list li + li { margin-top: var(--space-3); }
.l-list li::before {
  content: "L";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.35em;
  height: 1.35em;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--verde);
  color: var(--blanco);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.85em;
  line-height: 1;
  padding-top: 0.1em;
}

/* ---------- Cabecera ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-bottom: 3px solid var(--asfalto);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
}

.brand { display: block; flex: none; }
.brand__logo { width: auto; height: 56px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 2px solid var(--asfalto);
  border-radius: var(--radius);
  background: var(--blanco);
  color: var(--asfalto);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.primary-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--blanco);
  border-bottom: 3px solid var(--asfalto);
  padding: var(--space-2) var(--gutter) var(--space-5);
}
.primary-nav.is-open { display: block; }

.primary-nav__list { list-style: none; margin: 0; padding: 0; }
.primary-nav__list a {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-decoration: none;
  border-bottom: 2px dashed var(--arcen);
}
.primary-nav__list a[aria-current="page"] { color: var(--verde); }

.primary-nav__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* En móvil, llamar y WhatsApp ya están en la barra inferior */
.primary-nav__actions .primary-nav__contact { display: none; }

@media (min-width: 1240px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    position: static;
    padding: 0;
    border: 0;
  }
  .primary-nav__list { display: flex; gap: 18px; }
  .primary-nav__actions { margin-top: 0; flex-wrap: nowrap; gap: var(--space-3); }
  .primary-nav__actions .primary-nav__contact { display: inline-flex; }
  .primary-nav__list a {
    position: relative;
    padding: var(--space-2) 0;
    font-size: 1rem;
    white-space: nowrap;
    border: 0;
  }
  .primary-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--verde);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease-out);
  }
  .primary-nav__list a:hover::after,
  .primary-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
  .primary-nav__list a[aria-current="page"] { color: var(--asfalto); }

}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  white-space: nowrap;
}
.phone-link:hover { text-decoration: underline; }

/* ---------- Barra de acciones (móvil) ---------- */

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--asfalto);
}
.action-bar .btn { width: 100%; }
body { padding-bottom: 72px; }

@media (min-width: 1240px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Secciones ---------- */

.section { padding-block: var(--space-8); }
.section--arcen { background: var(--arcen); }
@media (min-width: 1024px) {
  .section { padding-block: var(--space-9); }
}

.section-top {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}
.section-top p { max-width: 58ch; color: var(--texto-suave); margin-top: var(--space-3); }

/* ---------- Inicio: hero (pórtico de autovía) ----------
   Un pase de fotos de carreteras; sobre él, un pórtico del que cuelgan el
   cartel direccional y el tablón, convertido en panel de mensaje variable.
   En móvil la foto va entera arriba y el pórtico debajo. Desde 1024px la
   foto es el fondo fijo de todo el hero, al tamaño de la pantalla, y el
   pórtico la cruza a --beam-pos de su alto. */

.hero {
  --beam-pos: 0.4;
  --steel: #9a9ea3;
  position: relative;
  overflow: hidden;
  background: var(--asfalto);
}
.hero__stage { position: relative; overflow: hidden; }

/* Pase de fotos: fundido de 1,2s y acercamiento lento mientras se ve */
.hero__media {
  aspect-ratio: var(--intro-ratio, 3 / 2);
  /* La foto se queda atrás al bajar */
  transform: translateY(calc(var(--hero-p, 0) * 80px));
}
.hero__slides { position: relative; height: 100%; }
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active {
  opacity: 1;
  animation: hero-acerca var(--slide-life, 8.2s) linear forwards;
}
.hero.is-paused .hero__slide.is-active { animation-play-state: paused; }
@keyframes hero-acerca {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* Controles: pausa y un tramo de carril por foto, que se pinta en amarillo
   mientras corre su tiempo */
.hero__controls {
  position: absolute;
  top: var(--space-3);
  right: var(--gutter);
  z-index: 4;
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  background: var(--asfalto);
}
.hero__toggle,
.hero__lanes button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--blanco);
  cursor: pointer;
}
.hero__toggle .icon { width: 18px; height: 18px; }
.hero__lanes {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__lanes span {
  position: relative;
  display: block;
  width: 28px;
  height: 6px;
  overflow: hidden;
  background: #4a4e53;
  transition: background-color 0.18s ease;
}
.hero__lanes button:hover span { background: var(--steel); }
.hero__lanes span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amarillo);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__lanes [aria-current="true"] span::after { animation: hero-tramo var(--slide-time, 7s) linear forwards; }
.hero.is-paused .hero__lanes [aria-current="true"] span::after { animation-play-state: paused; }
@keyframes hero-tramo {
  to { transform: scaleX(1); }
}

/* Pórtico: celosía de acero galvanizado, dos cordones y diagonales en X */
.hero__beam {
  position: relative;
  z-index: 3;
  height: 26px;
  background:
    linear-gradient(#b9bdbf, #b9bdbf) top / 100% 4px no-repeat,
    linear-gradient(var(--steel), var(--steel)) bottom / 100% 4px no-repeat,
    repeating-linear-gradient(55deg, transparent 0 14px, var(--steel) 14px 17px, transparent 17px 30px),
    repeating-linear-gradient(-55deg, transparent 0 14px, var(--steel) 14px 17px, transparent 17px 30px);
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55));
}

.hero__band {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}
/* Al bajar, el pórtico y lo que cuelga pasan por encima de la foto */
.hero__beam,
.hero__band { transform: translateY(calc(var(--hero-p, 0) * -24px)); }

/* Tirantes del pórtico a cada cartel */
.hero__mount { position: relative; padding-top: 22px; }
.hero__mount::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 22px;
  background: linear-gradient(90deg, var(--steel) 0 5px, transparent 5px calc(100% - 5px), var(--steel) calc(100% - 5px));
}

.hero__sign { max-width: 640px; }
.hero__sign h1 { color: var(--blanco); }

/* El tablón, como panel de mensaje variable: carcasa gris y pantalla negra */
.hero .board {
  padding: var(--space-5);
  border: 6px solid #4a4e53;
  border-radius: var(--radius);
  background: var(--asfalto);
  box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1023px) {
  /* En móvil el tablón va debajo del cartel, de pie y sin tirantes */
  .hero__mount--board { padding-top: 0; }
  .hero__mount--board::before { display: none; }
}
@media (max-width: 719px) {
  /* Carcasa más fina para que el aviso de abierto quepa en una línea */
  .hero .board {
    padding-inline: var(--space-3);
    border-width: 4px;
  }
}

@media (min-width: 1024px) {
  .hero { min-height: calc(100svh - 75px); }
  .hero__stage {
    position: absolute;
    inset: 0;
    /* Recorta la foto fija a los límites del hero */
    clip-path: inset(0);
  }
  /* Foto fija al tamaño de la pantalla, bajo la cabecera (72px + 3px de
     borde): no se reescala y el pórtico pasa por encima al bajar */
  .hero__media {
    position: fixed;
    top: 75px;
    left: 0;
    right: 0;
    height: calc(100svh - 75px);
    aspect-ratio: auto;
    transform: none;
  }
  .hero__beam { margin-top: calc((100svh - 75px) * var(--beam-pos)); }
  .hero__band {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    column-gap: var(--space-8);
    align-items: start;
  }
  /* Horas en matriz de LED, como un panel de la DGT (en móvil, lisas para
     leerse al sol) */
  .hero .board__table tbody th {
    --led: 3.2px;
    -webkit-mask: radial-gradient(circle, #000 0 calc(var(--led) * 0.36), transparent calc(var(--led) * 0.46)) 0 0 / var(--led) var(--led);
    mask: radial-gradient(circle, #000 0 calc(var(--led) * 0.36), transparent calc(var(--led) * 0.46)) 0 0 / var(--led) var(--led);
  }
}

.destinations {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  border-top: 3px solid var(--blanco);
}
.destinations a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 3px solid var(--blanco);
  text-decoration: none;
}
.destinations__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
}
.destinations__addr { grid-column: 1; font-size: 1rem; }
.destinations .icon {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 2.2rem;
  height: 2.2rem;
  stroke-width: 2.6;
  transition: transform 0.2s var(--ease-out);
}
.destinations a:hover .icon { transform: translateX(5px); }

.hero__lead { font-size: 1.125rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---------- Inicio: tablón de horarios ---------- */

.board { color: var(--blanco); }
.board__block + .board__block { margin-top: var(--space-7); }
.board__intro { color: var(--texto-sobre-asfalto); margin-block: var(--space-3) var(--space-5); max-width: 42ch; }

.board__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.board__table th,
.board__table td {
  padding: var(--space-3) var(--space-2);
  text-align: left;
  border-bottom: 2px dashed #3a3d41;
}
.board__table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texto-sobre-asfalto);
  border-bottom: 2px solid var(--texto-sobre-asfalto);
}
.board__table tbody th {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  font-weight: 700;
  color: var(--amarillo);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.board__table td { font-weight: 700; font-size: 1rem; }

.board__note { color: var(--texto-sobre-asfalto); font-size: 0.98rem; margin-top: var(--space-4); }
.board__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: var(--space-3) 0 var(--space-5);
  padding: 0.35em 0.75em 0.25em;
  border: 2px solid var(--luz);
  border-radius: 4px;
  color: var(--blanco);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
}
/* Luz de semáforo: verde si está abierta, roja si está cerrada */
.board__status.is-open { --luz: var(--verde); }
.board__status.is-closed { --luz: var(--rojo); }
.board__status[hidden] + .board__table { margin-top: var(--space-3); }
.board__status::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--luz);
  box-shadow: 0 0 8px var(--luz);
}
/* En móvil, el aviso más largo ("Cerrado · abre el lunes a las 09:30") cabe
   en una línea: la letra se ajusta al ancho de la pantalla, hasta 0.8rem */
@media (max-width: 719px) {
  .board__status {
    gap: 0.45em;
    padding-inline: 0.5em;
    letter-spacing: -0.02em;
    font-size: min(0.8rem, calc((100vw - 80px) / 22.5));
  }
  .board__status::before { width: 10px; height: 10px; }
}
.board__note a { color: var(--blanco); }

/* Placa de señal junto al título de sección */
.plated {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.plate { width: 0.9em; height: 0.9em; flex: none; }
.plate--warn { width: 1em; height: 0.88em; }
.plate--hito { width: 0.7em; height: 0.93em; }

.num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Inicio: la ruta (firma) ---------- */

.route { padding-block: var(--space-8); overflow: hidden; }
.route h2 { max-width: 24ch; }
.route__lead { max-width: 52ch; color: var(--texto-suave); margin-top: var(--space-3); }

.route__track {
  position: relative;
  margin-top: var(--space-7);
}

/* Carretera: vertical en móvil, horizontal en escritorio */
.route__road {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) + 10px);
  width: 44px;
  background: var(--asfalto);
  border-inline: 3px solid var(--blanco);
  outline: 2px solid var(--asfalto);
}
.route__paint {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  width: 5px;
  background: repeating-linear-gradient(180deg, var(--amarillo) 0 var(--lane-dash), transparent var(--lane-dash) calc(var(--lane-dash) + var(--lane-gap)));
  transform-origin: top;
}

.route__stops {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter) 0 calc(var(--gutter) + 80px);
  display: grid;
  gap: var(--space-7);
}

.route__stop { position: relative; }
.route__stop h3 { font-size: 1.5rem; }
.route__stop p { margin-top: var(--space-2); color: var(--texto-suave); max-width: 40ch; }
.route__stop a { font-weight: 700; }

.route__here {
  display: inline-block;
  vertical-align: 0.2em;
  margin-left: 0.4em;
  padding: 0.25em 0.5em 0.15em;
  border-radius: 4px;
  background: var(--amarillo);
  color: var(--asfalto);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* Hito kilométrico */
.route__hito {
  position: absolute;
  /* Centrado con la carretera: (10px + 44px / 2) - 80px - 44px / 2 */
  left: -70px;
  top: -4px;
  width: 44px;
  height: 58px;
  display: grid;
  place-items: end center;
  padding-bottom: 6px;
  border: 2px solid var(--asfalto);
  border-radius: 22px 22px 4px 4px;
  background: linear-gradient(var(--rojo) 0 38%, var(--blanco) 38%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--asfalto);
}

@media (min-width: 900px) {
  .route__track { margin-top: calc(var(--space-8) + 58px); padding-top: 96px; }
  .route__road {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 52px;
    border-inline: 0;
    border-block: 3px solid var(--blanco);
  }
  .route__paint {
    inset: 0;
    margin: auto 0;
    width: auto;
    height: 5px;
    background: repeating-linear-gradient(90deg, var(--amarillo) 0 var(--lane-dash), transparent var(--lane-dash) calc(var(--lane-dash) + var(--lane-gap)));
    transform-origin: left;
  }
  .route__stops {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  /* Hitos en el arcén, justo encima de la carretera */
  .route__hito { top: -154px; left: 0; }
}

/* El coche de la autoescuela recorre la ruta con el scroll: pinta la línea
   y enciende cada hito al pasar. Sin JS o con movimiento reducido no hay
   coche y todo se ve encendido. */
.route__car { display: none; }
.route--armed .route__car {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  width: 48px;
  height: 26px;
  margin-left: -24px;
  transform: translateY(var(--car-pos, 0px)) rotate(90deg);
  z-index: 2;
}
.route__car svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }

.route--armed .route__paint { transform: scaleY(var(--route-progress, 0)); }
.route--armed .route__stop { opacity: 0.4; transition: opacity 0.4s var(--ease-out); }
.route--armed .route__stop.is-passed { opacity: 1; }
.route--armed .route__hito {
  background: linear-gradient(#9a9ea3 0 38%, var(--blanco) 38%);
  transition: background 0.3s ease;
}
.route--armed .route__stop.is-passed .route__hito {
  background: linear-gradient(var(--rojo) 0 38%, var(--blanco) 38%);
  animation: hito-on 0.45s var(--ease-out);
}
.route__stop--start .route__hito,
.route--armed .route__stop--start .route__hito,
.route--armed .route__stop--start.is-passed .route__hito {
  background: linear-gradient(var(--verde) 0 38%, var(--blanco) 38%);
  box-shadow: 0 0 0 4px var(--amarillo);
}
@keyframes hito-on {
  40% { transform: scale(1.15); }
}

@media (min-width: 900px) {
  .route--armed .route__car {
    display: block;
    top: 50%;
    left: 0;
    width: 60px;
    height: 32px;
    margin: -16px 0 0;
    transform: translateX(var(--car-pos, 0px));
  }
  .route--armed .route__paint { transform: scaleX(var(--route-progress, 0)); }
}

.route__cta { margin-top: var(--space-7); }

/* ---------- Inicio: test ---------- */

.quiz-layout { display: grid; gap: var(--space-6); }
.quiz-layout__intro p { color: var(--texto-suave); margin-top: var(--space-3); max-width: 44ch; }
.quiz-layout__intro .btn { margin-top: var(--space-5); }
.quiz-layout__intro .quiz-layout__alumno { margin-top: var(--space-5); font-size: 0.98rem; }
.quiz__noscript { padding: var(--space-5); }

@media (min-width: 900px) {
  .quiz-layout { grid-template-columns: 4fr 6fr; column-gap: var(--space-8); align-items: start; }
}

.quiz {
  border: 3px solid var(--asfalto);
  border-radius: var(--radius);
  background: var(--blanco);
}
.quiz__bar {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--asfalto);
  color: var(--blanco);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Progreso: un tramo de carril por pregunta */
.quiz__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.quiz__track li {
  height: 6px;
  border-radius: 1px;
  background: #4a4e53;
  transition: background-color 0.2s ease;
}
.quiz__track li.is-current { background: var(--blanco); }
.quiz__track li.is-right { background: var(--verde); }
.quiz__track li.is-wrong { background: var(--rojo); }

.quiz__q { padding: var(--space-5); }
.quiz.is-ready .quiz__q + .quiz__q { border-top: 0; }
.quiz__q + .quiz__q { border-top: 2px dashed #b9bdbf; }
.quiz__q h3 { font-size: 1.35rem; margin-bottom: var(--space-4); }

.quiz__options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.quiz__option {
  width: 100%;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid #b9bdbf;
  border-radius: var(--radius);
  background: var(--blanco);
  color: var(--asfalto);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.quiz__option:hover:not(:disabled) { border-color: var(--asfalto); }
.quiz__option:disabled { cursor: default; }
.quiz__letter {
  display: grid;
  place-items: center;
  height: 2.2rem;
  border-radius: 4px;
  background: var(--arcen);
  font-family: var(--font-display);
  font-weight: 900;
  padding-top: 0.15em;
}
.quiz__option.is-right { border-color: var(--verde); background: #e7f3ea; }
.quiz__option.is-right .quiz__letter { background: var(--verde); color: var(--blanco); }
.quiz__option.is-wrong { border-color: var(--rojo); background: #fbe9e9; }
.quiz__option.is-wrong .quiz__letter { background: var(--rojo); color: var(--blanco); }

.quiz__feedback { margin-top: var(--space-4); }
.quiz__feedback:empty { display: none; }
.quiz__feedback strong { font-family: var(--font-display); font-weight: 800; }
.quiz__feedback .is-right-text { color: var(--verde); }
.quiz__feedback .is-wrong-text { color: var(--rojo); }

.quiz__footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--space-5) var(--space-5);
}

/* Ventana de resultado */
.result {
  width: min(560px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--gutter));
  padding: var(--space-7) var(--space-6) var(--space-6);
  border: 3px solid var(--asfalto);
  border-radius: var(--radius-sign);
  background: var(--blanco);
  color: var(--asfalto);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  overscroll-behavior: contain;
}
.result::backdrop { background: rgba(27, 28, 30, 0.72); }
/* La página queda quieta mientras la ventana está abierta; el padding ocupa
   el hueco de la barra de scroll para que el contenido no salte */
html:has(.result[open]) { overflow: hidden; }
html:has(.result[open]) body { padding-right: var(--scrollbar-width, 0px); }
.result[open] { animation: result-in 0.35s var(--ease-out); }
@keyframes result-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
}

.result__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--asfalto);
  border-radius: var(--radius);
  background: var(--blanco);
  color: var(--asfalto);
  cursor: pointer;
}

/* Sello APTO / NO APTO, como en el acta del examen */
.result__stamp {
  display: inline-block;
  padding: 0.3em 0.7em 0.15em;
  border: 4px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.02em;
  transform: rotate(-4deg);
}
.result.is-pass .result__stamp { color: var(--verde); }
.result.is-fail .result__stamp { color: var(--rojo); }

.result__title { margin-top: var(--space-5); font-size: 1.8rem; }
.result__score { margin-top: var(--space-2); font-family: var(--font-mono); font-weight: 700; font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem); }
.result__rule { margin-top: var(--space-3); color: var(--texto-suave); font-size: 0.98rem; }

.result__review { margin-top: var(--space-5); }
.result__review:empty { display: none; }
.result__review h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.result__review ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--asfalto); }
.result__review li { padding: var(--space-3) 0; border-bottom: 2px dashed #b9bdbf; }
.result__review strong { display: block; font-family: var(--font-display); font-weight: 800; line-height: 1.3; }
.result__review li > span { display: block; margin-top: var(--space-1); color: var(--texto-suave); font-size: 0.98rem; }
.result__review .is-answer { color: var(--verde); font-weight: 700; }

.result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.result__more { margin-top: var(--space-4); color: var(--texto-suave); font-size: 0.98rem; }

/* ---------- Inicio: bifurcación alumno / no alumno ---------- */

/* Dos carteles de salida sobre asfalto, como una bifurcación de autovía */
.fork {
  background: var(--asfalto);
  color: var(--blanco);
  padding-block: var(--space-8);
}
.fork__signs { display: grid; gap: var(--space-5); }
@media (min-width: 820px) {
  .fork { padding-block: var(--space-9); }
  .fork__signs { grid-template-columns: 1fr 1fr; }
}

.fork__exit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: var(--space-4);
  min-height: 260px;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out);
}
.fork__exit:hover { transform: translateY(-4px); }
.fork__dest {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.fork__text { grid-column: 1; margin-top: var(--space-3); max-width: 36ch; font-size: 1.1rem; }
.fork__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  height: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease-out);
}
.fork__exit:hover .fork__arrow { transform: translateX(6px); }
.sign--green .btn--white { color: var(--verde); }
.sign--green .btn--white:hover { color: var(--blanco); }

/* ---------- Matrícula ---------- */

.permit-panel__definition { font-size: 1.1rem; }
/* Desde 900px la definición ocupa el ancho del cartel en pocas líneas: centrada y equilibrada */
@media (min-width: 900px) {
  .permit-panel__definition { text-align: center; text-wrap: balance; }
}
.permit-panel__facts {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 3px solid var(--blanco);
}
.permit-panel__facts dt { font-size: 0.98rem; }
.permit-panel__facts dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.3;
}
@media (min-width: 820px) {
  .permit-panel__facts { grid-template-columns: 1fr 1.3fr 2fr; column-gap: var(--space-6); }
}

.needs { display: grid; gap: var(--space-6); }
.needs__lead { margin-top: var(--space-3); color: var(--texto-suave); max-width: 42ch; }
.needs__list { font-size: 1.1rem; }
.needs__list li + li { margin-top: var(--space-4); }
.needs__note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 2px dashed #b9bdbf;
  font-weight: 700;
}
@media (min-width: 900px) {
  .needs { grid-template-columns: 5fr 7fr; column-gap: var(--space-8); }
}

.needs__note + .needs__note { margin-top: var(--space-3); padding-top: 0; border-top: 0; }

/* Qué llevar al examen: un caso por fila de carril y el aviso en rojo */
.exam { display: grid; gap: var(--space-7); }
.exam-docs { margin: 0; border-top: 2px solid var(--asfalto); }
.exam-docs > div { padding: var(--space-4) 0; border-bottom: 2px dashed #b9bdbf; }
.exam-docs dt { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.exam-docs dd { margin: var(--space-2) 0 0; font-size: 1.1rem; color: var(--texto-suave); max-width: 52ch; }

.exam-warning {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 3px solid var(--rojo);
  border-radius: var(--radius);
  background: #fbe9e9;
}
.exam-warning ul { margin: var(--space-3) 0 0; padding-left: 1.2em; }
.exam-warning li { font-weight: 700; }
.exam-warning li + li { margin-top: var(--space-2); }
.exam-warning li::marker { color: var(--rojo); }

.exam__subtitle { margin: var(--space-6) 0 var(--space-4); }

.exam__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 2px dashed #b9bdbf;
}
.exam__help a { white-space: nowrap; }
@media (min-width: 900px) {
  .exam { grid-template-columns: 7fr 5fr; column-gap: var(--space-8); align-items: start; }
}

.aula-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 3px solid var(--asfalto);
  border-radius: var(--radius);
  background: var(--arcen);
}
.aula-notice p { font-weight: 700; }

/* Página del aula */
.portals { display: grid; gap: var(--space-5); }
.portal { display: flex; flex-direction: column; min-height: 320px; }
.portal h2 { color: var(--blanco); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 900; }
.portal p { margin-top: var(--space-3); font-size: 1.1rem; max-width: 42ch; }
.portal .btn { margin-top: auto; align-self: flex-start; }
.portal__body { margin-bottom: var(--space-6); }
.portal__note { font-size: 0.95rem !important; opacity: 0.9; }
@media (min-width: 820px) {
  .portals { grid-template-columns: 1fr 1fr; }
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  counter-reset: paso;
}
.steps li {
  position: relative;
  padding-left: 72px;
  counter-increment: paso;
}
.steps li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -4px;
  width: 44px;
  height: 58px;
  display: grid;
  place-items: end center;
  padding-bottom: 6px;
  border: 2px solid var(--asfalto);
  border-radius: 22px 22px 4px 4px;
  background: linear-gradient(var(--rojo) 0 38%, var(--blanco) 38%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
}
.steps h3 { font-size: 1.4rem; }
.steps p { margin-top: var(--space-2); color: var(--texto-suave); max-width: 44ch; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.aula-help {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* ---------- Sedes ---------- */

.sedes { display: grid; gap: var(--space-5); }
@media (min-width: 820px) {
  .sedes { grid-template-columns: 1fr 1fr; }
}

.sede { display: flex; flex-direction: column; scroll-margin-top: 96px; }
.sede h2,
.sede h3 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 900; }
.sede__addr { margin-top: var(--space-2); font-size: 1.1rem; }
.sede__rule { border: 0; border-top: 3px solid var(--blanco); margin: var(--space-5) 0 var(--space-4); }
.sede__phones { list-style: none; margin: 0; padding: 0; }
.sede__phones li + li { margin-top: var(--space-2); }
.sede__phones a {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.sede__phones a:hover { text-decoration: underline; }
.sede__tag { display: block; font-size: 0.95rem; }
.sede__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
}
.sign .btn--go { box-shadow: inset 0 0 0 2px var(--blanco); }

/* Horario de oficina: junto al cartel de la sede, plano y con filas de carril */
.atencion { align-self: start; }
.atencion h2,
.atencion h3 { font-size: 1.5rem; font-weight: 800; }
.atencion__rows { margin: var(--space-4) 0 0; border-top: 2px solid var(--asfalto); }
.atencion__rows > div { padding: var(--space-4) 0; border-bottom: 2px dashed #b9bdbf; }
.atencion__rows dt { font-size: 0.98rem; color: var(--texto-suave); }
.atencion__rows dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-1) 0 0;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}
.atencion__rows .num { font-size: 1.3rem; }
@media (min-width: 820px) {
  /* El título arranca a la altura del nombre de la sede, dentro de su filete */
  .atencion { padding-top: calc(9px + var(--space-5)); }
}

/* ---------- Páginas interiores ---------- */

.page-head {
  position: relative;
  background: var(--asfalto);
  color: var(--blanco);
  padding-block: var(--space-7) calc(var(--space-7) + 6px);
}
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--amarillo) 0 var(--lane-dash), transparent var(--lane-dash) calc(var(--lane-dash) + var(--lane-gap)));
}
.page-head p {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--texto-sobre-asfalto);
  font-size: 1.125rem;
}
@media (min-width: 1024px) {
  .page-head { padding-block: var(--space-8) calc(var(--space-8) + 6px); }
}

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.6rem; margin: var(--space-7) 0 var(--space-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--space-5) 0 var(--space-2); }
.prose ul { margin: var(--space-4) 0 0; padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose ul + p { margin-top: var(--space-4); }
.prose__updated { margin-top: var(--space-7); color: var(--texto-suave); font-size: 0.95rem; }

/* Enlaces útiles */
.link-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--asfalto); }
.link-row {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-6) 0;
  border-bottom: 2px dashed #b9bdbf;
}
.link-row h3 { font-size: 1.5rem; }
.link-row p { color: var(--texto-suave); margin-top: var(--space-2); max-width: 60ch; }
.link-row .btn { justify-self: start; }
.link-rows__note { margin-top: var(--space-5); color: var(--texto-suave); }
@media (min-width: 760px) {
  .link-row { grid-template-columns: 1fr auto; column-gap: var(--space-7); }
}


.hours { margin-top: var(--space-6); color: var(--texto-suave); }
.hours strong { color: var(--asfalto); font-family: var(--font-display); }

/* Preguntas */
.accordion { border-top: 2px solid var(--asfalto); }
.accordion-item { border-bottom: 2px dashed #b9bdbf; }
.accordion-item h2 { font-size: inherit; line-height: inherit; }
.accordion-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--asfalto);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.accordion-item__trigger .icon {
  width: 1.6rem;
  height: 1.6rem;
  padding: 3px;
  border-radius: 4px;
  background: var(--arcen);
  transition: transform 0.25s var(--ease-out), background-color 0.2s ease;
}
.accordion-item.is-open .accordion-item__trigger .icon { transform: rotate(180deg); background: var(--amarillo); }
.accordion-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}
.accordion-item.is-open .accordion-item__panel { grid-template-rows: 1fr; }
.accordion-item__panel-inner { overflow: hidden; }
.accordion-item__panel-inner > div { padding-bottom: var(--space-5); max-width: 75ch; color: var(--texto-suave); }

/* 404 */
.error-page { padding-block: var(--space-9); }
.error-page__sign {
  display: inline-grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin-bottom: var(--space-6);
  border-radius: 50%;
  background: var(--blanco);
  border: 14px solid var(--rojo);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.3;
  padding-top: 0.15em;
}
.error-page p { margin-block: var(--space-4) var(--space-6); color: var(--texto-suave); max-width: 50ch; }

/* ---------- Pie ---------- */

.site-footer {
  background: var(--asfalto);
  color: var(--texto-sobre-asfalto);
  padding-block: var(--space-6);
}
.site-footer .lane { color: var(--blanco); }
.site-footer a { color: var(--blanco); }
.site-footer p { color: var(--texto-sobre-asfalto); }

.site-footer__logo {
  width: auto;
  height: 56px;
  margin-top: var(--space-8);
}

.site-footer__motto {
  padding-block: var(--space-5) var(--space-7);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 24ch;
  text-wrap: balance;
}
.site-footer .site-footer__motto { color: var(--blanco); }

.footer-grid {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 2px solid #3a3d41;
}
.footer-grid h2 {
  font-size: 1.35rem;
  color: var(--blanco);
  margin-bottom: var(--space-3);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li + li { margin-top: var(--space-1); }
.footer-grid li a,
.footer-grid p a { display: inline-block; padding-block: 6px; }
.footer-tel { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid #4a4e53;
  border-radius: var(--radius);
}
.footer-social a:hover { border-color: var(--blanco); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 2px solid #3a3d41;
  font-size: 0.95rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.footer-bottom a { display: inline-block; padding-block: 6px; }

@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Movimiento vial ---------- */

/* Cabecera: la línea de carril marca cuánto has avanzado en la página */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--amarillo) 0 28px, transparent 28px 42px);
  clip-path: inset(0 calc((1 - var(--page-progress, 0)) * 100%) 0 0);
  pointer-events: none;
}

/* Las líneas de carril se desplazan con el scroll, como la carretera al conducir */
.site-footer .lane,
.page-head::after { background-position-x: var(--lane-shift, 0px); }

/* Cabeceras interiores: la máquina pinta la línea al cargar */
.page-head::after { animation: pintar-linea 1.1s var(--ease-out) 0.15s both; }
@keyframes pintar-linea {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Portada: aparece la foto, se dibuja el pórtico, bajan los tirantes y el
   cartel y el panel cuelgan con un leve vaivén; las horas se encienden como
   un panel luminoso */
.hero__slides { animation: hero-aparece 1s var(--ease-out) both; }
.hero__beam {
  transform-origin: 0 50%;
  animation: hero-viga 0.6s var(--ease-out) 0.1s both;
}
.hero__mount::before {
  transform-origin: 50% 0;
  animation: hero-tirantes 0.25s var(--ease-out) 0.6s both;
}
.hero__sign {
  transform-origin: 50% 0;
  animation: hero-cuelga 0.95s var(--ease-out) 0.7s both;
}
.hero .board {
  transform-origin: 50% 0;
  animation: hero-cuelga 0.95s var(--ease-out) 0.82s both;
}
@keyframes hero-aparece {
  from { opacity: 0; }
}
@keyframes hero-viga {
  from { transform: scaleX(0); }
}
@keyframes hero-tirantes {
  from { transform: scaleY(0); }
}
@keyframes hero-cuelga {
  0% { opacity: 0; transform: translateY(-48px) rotate(-1.6deg); }
  45% { opacity: 1; transform: translateY(4px) rotate(1deg); }
  72% { transform: translateY(-1px) rotate(-0.45deg); }
  100% { transform: none; }
}
.board__table tbody th { animation: led-on 0.9s linear 1.3s both; }
@keyframes led-on {
  0% { opacity: 0.08; }
  12% { opacity: 1; }
  22% { opacity: 0.25; }
  34% { opacity: 1; }
  52% { opacity: 0.55; }
  64%, 100% { opacity: 1; }
}

/* Intermitente: la flecha de salida parpadea en ámbar antes de "girar" */
.fork__exit:hover .fork__arrow,
.fork__exit:focus-visible .fork__arrow,
.destinations a:hover .icon,
.destinations a:focus-visible .icon {
  animation: intermitente 0.8s steps(1) 2;
}
@keyframes intermitente {
  0% { color: var(--amarillo); }
  50% { color: inherit; }
}

/* Botones: la flecha avanza y el botón se hunde al pulsar */
.btn { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.btn:active { transform: translateY(1px); }
.btn .icon:has(use[href="#i-arrow"]) { transition: transform 0.2s var(--ease-out); }
.btn:hover .icon:has(use[href="#i-arrow"]) { transform: translateX(4px); }

/* Test: acierto y fallo se notan, y el tramo de carril se pinta */
.quiz__option.is-right { animation: acierto 0.35s var(--ease-out); }
.quiz__option.is-wrong { animation: fallo 0.4s ease; }
@keyframes acierto {
  40% { transform: scale(1.025); }
}
@keyframes fallo {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.quiz__track li.is-right,
.quiz__track li.is-wrong { animation: tramo 0.35s var(--ease-out); transform-origin: left; }
@keyframes tramo {
  from { transform: scaleX(0); }
}
.quiz__q:not([hidden]) { animation: pregunta 0.3s var(--ease-out); }
@keyframes pregunta {
  from { opacity: 0; transform: translateX(16px); }
}

/* Resultado: el sello cae como un tampón sobre el acta */
.result[open] .result__stamp { animation: sello 0.42s cubic-bezier(0.55, 0, 1, 0.45) 0.2s both; }
@keyframes sello {
  from { opacity: 0; transform: rotate(-16deg) scale(2.6); }
  60% { opacity: 1; }
  to { transform: rotate(-4deg) scale(1); }
}

/* ---------- Apariciones al entrar en pantalla ----------
   Solo con JS (clase .js en <html>) y sin movimiento reducido: el resto de
   visitantes ve todo desde el principio. JS añade .is-in al entrar en
   pantalla y .rv-done al terminar, para devolver sus transiciones a cada
   componente. --ri escalona los hermanos (máx. 6). */
@media (prefers-reduced-motion: no-preference) {
  .js :is(
  .section-top > p,
  .section-top > div > p,
  .route__lead,
  .quiz-layout__intro > p,
  .needs__lead,
  .needs__note,
  .hours,
  .route__cta,
  .aula-help,
  .exam__aside,
  .site-footer__logo,
  .site-footer__motto,
  .footer-grid > div,
  .aula-notice,
  main section:not(.hero) h2:not(.sr-only):not(.accordion-item h2):not(.sign h2),
  main .sign:not(.hero__sign),
  .link-row,
  .atencion__rows > div,
  .accordion-item,
  .needs__list li,
  .steps li,
  .exam-docs > div
  ):not(.is-in) { opacity: 0; }

  .js :is(
  .section-top > p,
  .section-top > div > p,
  .route__lead,
  .quiz-layout__intro > p,
  .needs__lead,
  .needs__note,
  .hours,
  .route__cta,
  .aula-help,
  .exam__aside,
  .site-footer__logo,
  .site-footer__motto,
  .footer-grid > div,
  .aula-notice,
  main section:not(.hero) h2:not(.sr-only):not(.accordion-item h2):not(.sign h2),
  main .sign:not(.hero__sign),
  .link-row,
  .atencion__rows > div,
  .accordion-item,
  .needs__list li,
  .steps li,
  .exam-docs > div
  ).is-in:not(.rv-done) {
    transition:
      opacity 0.6s var(--ease-out),
      transform 0.75s var(--ease-out),
      clip-path 0.9s var(--ease-out);
    transition-delay: calc(var(--ri, 0) * 90ms);
  }

  /* Texto: sube a su sitio */
  .js :is(
  .section-top > p,
  .section-top > div > p,
  .route__lead,
  .quiz-layout__intro > p,
  .needs__lead,
  .needs__note,
  .hours,
  .route__cta,
  .aula-help,
  .exam__aside,
  .site-footer__logo,
  .site-footer__motto,
  .footer-grid > div,
  .aula-notice
  ):not(.is-in) { transform: translateY(24px); }

  /* Títulos: sube el texto y la placa de señal gira hasta ponerse de frente */
  .js :is(main section:not(.hero) h2:not(.sr-only):not(.accordion-item h2):not(.sign h2)):not(.is-in) { transform: translateY(18px); }
  .js :is(main section:not(.hero) h2:not(.sr-only):not(.accordion-item h2):not(.sign h2)) .plate { transition: transform 0.6s var(--ease-out) 0.15s; }
  .js :is(main section:not(.hero) h2:not(.sr-only):not(.accordion-item h2):not(.sign h2)):not(.is-in) .plate { transform: perspective(200px) rotateY(90deg); }

  /* Carteles: se levantan pivotando desde la base, como al instalarlos */
  .js :is(main .sign:not(.hero__sign)):not(.is-in) {
    transform: perspective(1000px) translateY(36px) rotateX(-16deg);
    transform-origin: 50% 100%;
  }

  /* Listas: entran por la izquierda, una detrás de otra */
  .js :is(
  .link-row,
  .atencion__rows > div,
  .accordion-item,
  .needs__list li,
  .steps li,
  .exam-docs > div
  ):not(.is-in) { transform: translateX(-28px); }

  /* Test: el cuadro se arma por partes */
  .js .quiz:not(.is-in) { clip-path: inset(0 0 99% 0); }
  .quiz.is-assembling { animation: quiz-marco 0.7s var(--ease-out) both; }
  @keyframes quiz-marco {
    from { clip-path: inset(0 0 99% 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  .quiz.is-assembling .quiz__bar > span { animation: aparece 0.4s var(--ease-out) 0.35s both; }
  .quiz.is-assembling .quiz__track li {
    animation: tramo-enciende 0.3s var(--ease-out) both;
    animation-delay: calc(0.45s + var(--n, 0) * 55ms);
  }
  .quiz.is-assembling .quiz__q:not([hidden]) { animation: none; }
  .quiz.is-assembling .quiz__q:not([hidden]) h3 { animation: aparece-sube 0.5s var(--ease-out) 0.8s both; }
  .quiz.is-assembling .quiz__q:not([hidden]) .quiz__options li { animation: aparece-izquierda 0.45s var(--ease-out) both; }
  .quiz.is-assembling .quiz__q:not([hidden]) .quiz__options li:nth-child(1) { animation-delay: 0.95s; }
  .quiz.is-assembling .quiz__q:not([hidden]) .quiz__options li:nth-child(2) { animation-delay: 1.05s; }
  .quiz.is-assembling .quiz__q:not([hidden]) .quiz__options li:nth-child(3) { animation-delay: 1.15s; }
  @keyframes aparece { from { opacity: 0; } }
  @keyframes aparece-sube { from { opacity: 0; transform: translateY(14px); } }
  @keyframes aparece-izquierda { from { opacity: 0; transform: translateX(-20px); } }
  @keyframes tramo-enciende { from { opacity: 0; transform: scaleX(0); } }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .site-footer .lane,
  .page-head::after { background-position-x: 0; }
  /* El pase no avanza solo ni se acerca: la foto queda quieta */
  .hero__slide.is-active { animation: none; }
}