/* ==========================================================================
   Doble Mando Formación — styles.css
   Archetype base: Editorial Dark Warm, adapted for an institutional /
   conversion-focused driving academy (no restaurant-specific patterns).
   ========================================================================== */

:root {
  --bg:        #17140f;
  --bg-2:      #1d1912;
  --bg-3:      #262019;
  --bg-3-hov:  #2e271e;
  --cream:     #f4efe4;
  --cream-2:   #d9d0bd;
  --cream-3:   #9b9084;
  --red:       #dd1f26;
  --red-2:     #ad1418;
  --red-light: #ff5257;
  --line:      rgba(244, 239, 228, 0.12);
  --line-2:    rgba(244, 239, 228, 0.22);
  --shadow:    0 30px 60px -20px rgba(0, 0, 0, 0.55);
  --radius:    14px;
  --radius-sm: 8px;
  --ease:      cubic-bezier(.22, .68, 0, 1);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* El atributo hidden debe ganar siempre: sin esto, cualquier regla propia de
   display (por ejemplo .btn { display: inline-flex }) lo anula en silencio. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: "Poppins", "Inter", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.02; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section { position: relative; }

/* ---- Fondo de sitio -------------------------------------------------------
   Un único plano fijo detrás de todas las páginas: la foto de la flota de
   1967, apagada hasta que solo queda la textura. Se nota que hay algo detrás,
   pero no se lee como una foto y no estorba al texto.

   Va en position: fixed para que el contenido pase por delante como sobre una
   pared, y en z-index: -1 para que no tape nada ni intercepte un clic. El hero
   de la portada es opaco, así que se dibuja encima y la imagen no sale
   duplicada.

   El velo es OSCURO, no crema: la web es oscura con letra color crema, y un
   velo claro dejaría los títulos invisibles.

   Las rutas van sin barra inicial ("assets/…", no "/assets/…") como el resto
   del sitio, para que la web también se vea bien abriendo el archivo en local,
   fuera del dominio. */
.site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* La misma luz cálida del hero, arriba: va por encima del velo o no se
       vería. */
    radial-gradient(58% 50% at 6% 2%, rgba(221, 31, 38, 0.13) 0%, transparent 70%),
    radial-gradient(46% 40% at 94% 0%, rgba(244, 239, 228, 0.05) 0%, transparent 72%),
    /* Viñeta: la foto tiene un cielo muy claro arriba, y sin esto queda una
       mancha pálida en mitad de la página. */
    radial-gradient(125% 100% at 50% 42%, rgba(23, 20, 15, 0) 0%, rgba(23, 20, 15, 0.62) 100%),
    /* Velo plano: es lo que baja la foto a textura y protege la lectura. El
       número está medido con las páginas legales, que son las de texto más
       largo: por debajo de 0.9 el autobús de la derecha empieza a moverse
       detrás de los párrafos. */
    linear-gradient(rgba(23, 20, 15, 0.9), rgba(23, 20, 15, 0.9)),
    url("assets/img/historico/fondo-doble-mando-desktop.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--bg);
}

/* En el móvil, recorte vertical de la misma foto: el recorte de escritorio,
   estirado a una pantalla estrecha, solo dejaría ver el morro de un camión. */
@media (max-width: 768px) {
  .site-background {
    background-image:
      radial-gradient(70% 40% at 6% 2%, rgba(221, 31, 38, 0.13) 0%, transparent 70%),
      radial-gradient(125% 100% at 50% 42%, rgba(23, 20, 15, 0) 0%, rgba(23, 20, 15, 0.55) 100%),
      linear-gradient(rgba(23, 20, 15, 0.9), rgba(23, 20, 15, 0.9)),
      url("assets/img/historico/fondo-doble-mando-mobile.webp");
  }
}

/* Mismo grano de película que el hero: sin él, el degradado se ve a bandas en
   pantallas grandes y el fondo canta a ordenador. */
.site-background::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-light);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--red-light); }

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; transition: transform .25s var(--ease), background .25s, border-color .25s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-light); }
.btn-ghost { border-color: var(--line-2); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); background: rgba(244,239,228,0.06); }
.btn-block { width: 100%; }

/* ---- Splash ---------------------------------------------------------------- */
.splash {
  position: fixed; inset: 0; z-index: 999; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s var(--ease), visibility .5s;
  animation: splashSafety .01s 4.5s forwards;
}
.splash.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes splashSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.splash-mark { width: 84px; height: 84px; animation: splashPulse 1.4s ease-in-out infinite; }
@keyframes splashPulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }

/* ---- Aviso temporal (vacaciones) ----------------------------------------
   Va encima de la barra y se va con el scroll: es un recado, no parte del
   menú. Lo enciende main.js solo mientras la fecha lo pida. */
.aviso-vacaciones {
  background: var(--red-2);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 11px 0;
  text-align: center;
}
.aviso-vacaciones strong { font-weight: 700; }
@media (max-width: 560px) {
  .aviso-vacaciones { font-size: 13.5px; padding: 10px 0; text-align: left; }
}

/* ---- Nav --------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(23, 20, 15, 0.7); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.nav.is-scrolled { border-color: var(--line); background: rgba(23, 20, 15, 0.92); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 24px; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 19px; text-transform: uppercase; }
.nav-brand img { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 600; }
.nav-links a { position: relative; padding: 4px 0; color: var(--cream-2); transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--red); transition: width .25s var(--ease); }
.nav-links a:hover, .nav-links a.is-active { color: var(--cream); }
.nav-links a:hover::after, .nav-links a.is-active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-phone { display: none; font-size: 14px; font-weight: 700; color: var(--cream-2); }
.nav-toggle { display: none; background: none; border: 0; color: var(--cream); font-size: 26px; }

@media (min-width: 860px) { .nav-phone { display: inline-flex; } }
@media (max-width: 859px) {
  /* El menú cerrado espera fuera de pantalla, a la derecha, y eso hacía que el
     documento midiera el doble que la ventana: en un móvil de 375px la página
     se podía arrastrar de lado hasta 750. Al deslizar el dedo se movía la
     página entera en vez del contenido, y todo parecía cortado. Se recorta en
     la ventana; el menú sigue entrando deslizándose igual. */
  html { overflow-x: hidden; }
  .nav-links { position: fixed; top: 64px; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); background: var(--bg); flex-direction: column; justify-content: flex-start; padding: 32px 24px; gap: 20px; transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto; }
  .nav-links.is-open { transform: translateX(0); }
  .nav-toggle { display: block; }
  .nav .btn-primary.nav-cta { display: none; }
}

/* ---- Hero --------------------------------------------------------------- */
.hero { padding: 148px 0 96px; overflow: hidden; }
/* Fondo del hero.
   Antes eran tres manchas rojas con blur(40px) encima: el desenfoque las
   fundía en un granate plano, y una superficie tan grande y tan lisa saca
   bandeado en cualquier pantalla normal.
   Ahora se construye como una iluminación de estudio: una luz cálida que
   entra por arriba a la izquierda, un rebote frío al otro lado para que no
   sea todo rojo, un resplandor de suelo, y una viñeta que cierra los bordes
   para que la vista caiga en el titular y en la foto. */
.hero-mesh {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 38%, transparent 42%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(62% 58% at 10% 10%, rgba(221, 31, 38, 0.22) 0%, transparent 68%),
    radial-gradient(46% 42% at 90% 2%, rgba(244, 239, 228, 0.05) 0%, transparent 70%),
    radial-gradient(85% 48% at 50% 106%, rgba(221, 31, 38, 0.09) 0%, transparent 72%),
    /* El archivo, muy apagado y solo en los márgenes: los vehículos asoman por
       los lados y el centro queda limpio para el titular. Es la foto real, no
       una textura comprada. */
    url("assets/img/historico/fondo-archivo.jpg") center / cover no-repeat;
  background-color: var(--bg);
}

/* Grano de película.
   Toda la web se apoya en fotografía de archivo, así que el fondo también
   tiene textura en vez de ser un degradado limpio de ordenador. De paso, el
   ruido rompe el bandeado: es el truco de siempre en cine y en imprenta. */
.hero-mesh::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.055;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero-kicker { margin-bottom: 22px; }
/* El rótulo va dentro del <h1> para que la ubicación cuente como
   encabezado. Visualmente queda igual que cuando era un <span> aparte. */
.hero-eyebrow { display: flex; margin-bottom: 22px; }
.hero-title { font-size: clamp(2.5rem, 5.4vw, 4.4rem); color: var(--cream); }
.hero-title em { font-style: normal; color: var(--red-light); }
.hero-title-mini { font-size: clamp(4.5rem, 11vw, 8.5rem); letter-spacing: -0.01em; }

.showcase-alt-link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--red-light); text-decoration: underline; text-underline-offset: 3px; }
.showcase-alt-link:hover { color: var(--cream); }
.hero-sub { margin-top: 10px; font-size: 15px; color: var(--cream-3); max-width: 46ch; font-family: "Inter", sans-serif; text-transform: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.hero-trust-item { display: flex; flex-direction: column; gap: 2px; }
.hero-trust-num { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px; color: var(--red-light); }
.hero-trust-label { font-size: 12.5px; color: var(--cream-3); text-transform: uppercase; letter-spacing: 0.06em; }
.hero-trust-link { transition: opacity .2s; }
.hero-trust-link:hover { opacity: 0.8; }
.hero-trust-link .hero-trust-label { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.hero-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; }
/* En ordenador la foto encaja exacta (4:5) y no se recorta. En móvil el hueco
   pasa a 16:10 y solo se ve la mitad de la altura: sin desplazar el encuadre,
   el recorte se queda con el cielo y corta los rótulos de los vehículos, que
   es justo lo que hay que ver. Con el 70% la banda visible baja. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; filter: saturate(1.05) contrast(1.05); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,15,0) 40%, rgba(23,20,15,.85) 100%); }
.hero-media-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; font-size: 13.5px; color: var(--cream-2); font-family: "Inter", sans-serif; }

@media (max-width: 900px) {
  .hero { padding: 118px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 16/10; order: -1; }
}

/* ---- Section headers --------------------------------------------------- */
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: 14px; }
.section-head p { font-family: "Inter", sans-serif; text-transform: none; color: var(--cream-2); font-size: 16.5px; margin-top: 14px; }
.section-pad { padding: 96px 0; }
/* Translúcida a propósito: la franja se sigue distinguiendo, pero deja pasar
   la textura del fondo de sitio. Si fuera opaca, el fondo desaparecería a
   trozos y la página se vería a bandas. */
.section-alt { background: rgba(29, 25, 18, 0.72); }

/* ---- Selector rápido "¿qué quieres conducir?" ---------------------------- */
.selector-band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.selector-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.selector-question { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 17px; color: var(--cream); }
.selector-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.selector-chip {
  padding: 11px 26px; border-radius: 999px; border: 1px solid var(--line-2);
  font-weight: 600; font-size: 15px; color: var(--cream-2);
  transition: border-color .2s, color .2s, background .2s;
}
.selector-chip:hover { border-color: var(--red); background: var(--red); color: #fff; }

/* ---- Promoción CAP (−100€) ----------------------------------------------- */
.promo-cap {
  display: flex; align-items: center; gap: 26px;
  border: 1.5px solid var(--red); border-radius: var(--radius);
  background: var(--bg-3); padding: 28px 30px;
}
.promo-cap-cifra {
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 40px;
  color: var(--red-light); line-height: 1; white-space: nowrap;
}
.promo-cap-cifra span {
  display: block; margin-top: 6px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream);
}
.promo-cap-sep { width: 1px; align-self: stretch; background: var(--line-2); }
.promo-cap-texto h3 { font-size: 18px; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.promo-cap-texto p { font-family: "Inter", sans-serif; font-size: 15px; color: var(--cream-2); line-height: 1.55; }
.promo-cap-texto b { color: var(--cream); font-weight: 600; }
.promo-cap-condicion { margin-top: 10px; font-size: 13px; color: var(--cream-3); }
@media (max-width: 620px) {
  .promo-cap { flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 24px; }
  .promo-cap-sep { width: 100%; height: 1px; align-self: auto; }
}

/* ---- Material del alumno (tests + glosario) ------------------------------ */
.material-curso { font-family: "Inter", sans-serif; text-transform: none; color: var(--red-light); font-weight: 600; margin-top: 14px; }
.material-progreso { font-family: "Inter", sans-serif; font-size: 14px; color: var(--cream-3); margin-bottom: 22px; }

.glosario-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.glosario-item { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.glosario-item h3 { font-size: 19px; text-transform: none; letter-spacing: 0; }
.glosario-item p { font-family: "Inter", sans-serif; color: var(--cream-2); font-size: 15px; margin-top: 10px; line-height: 1.6; }
.glosario-fuente, .test-fuente { display: block; margin-top: 12px; font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--cream-3); }
@media (max-width: 780px) { .glosario-lista { grid-template-columns: 1fr; } }

.test-tarjeta { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.test-contador { font-family: "Inter", sans-serif; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream-3); margin-bottom: 12px; }
.test-tarjeta h3 { font-size: 21px; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.test-opciones { display: grid; gap: 10px; margin-top: 22px; }
.test-opcion {
  text-align: left; background: var(--bg); border: 1px solid var(--line-2); color: var(--cream);
  padding: 15px 18px; border-radius: var(--radius-sm); font-size: 15px;
  transition: border-color .2s, background .2s;
}
.test-opcion:hover:not(:disabled) { border-color: var(--cream); background: var(--bg-3-hov); }
.test-opcion:disabled { cursor: default; opacity: .75; }
.test-opcion.es-correcta { border-color: #3f9f5a; background: rgba(63,159,90,.14); opacity: 1; }
.test-opcion.es-fallo { border-color: var(--red); background: rgba(221,31,38,.14); opacity: 1; }
.test-feedback { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.test-feedback p { font-family: "Inter", sans-serif; color: var(--cream-2); font-size: 15px; line-height: 1.65; }
.test-feedback .btn { margin-top: 18px; }
.test-resultado { text-align: center; }
.test-resultado h3 { font-size: 48px; color: var(--red-light); }
.test-resultado p { font-family: "Inter", sans-serif; color: var(--cream-2); margin-top: 10px; }
.test-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---- Divisor de archivo "Desde 1967" ------------------------------------- */
.archivo-divisor { padding: 10px 0 72px; }
.archivo-sello {
  font-family: "Poppins", sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 13px; color: var(--cream-3);
  text-align: center; margin-bottom: 26px;
}
.archivo-tira { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.archivo-foto { margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; }
.archivo-foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.92);
  transition: filter .4s var(--ease), transform .5s var(--ease);
}
.archivo-foto:hover img { filter: grayscale(0) contrast(1.05) brightness(1); transform: scale(1.04); }
@media (max-width: 900px) { .archivo-tira { grid-template-columns: repeat(3, 1fr); } .archivo-foto:nth-child(n+4) { display: none; } }
@media (max-width: 560px) { .archivo-tira { grid-template-columns: repeat(2, 1fr); } .archivo-foto:nth-child(n+3) { display: none; } }

/* ---- Galería de archivo (Sobre nosotros) --------------------------------- */
.archivo-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.archivo-item { margin: 0; }
.archivo-item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  filter: grayscale(1) contrast(1.05) brightness(.92);
  transition: filter .4s var(--ease);
}
.archivo-item:hover img { filter: grayscale(0) contrast(1.05) brightness(1); }
.archivo-item figcaption {
  margin-top: 10px; font-size: 13px; color: var(--cream-3);
  font-family: "Inter", sans-serif; line-height: 1.5;
}
@media (max-width: 860px) { .archivo-galeria { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .archivo-galeria { grid-template-columns: 1fr; } }

/* ---- Guide statement (SB7: short empathy + authority line, no clutter) --- */
.guide-statement {
  max-width: 62ch; margin: 0 auto; text-align: center;
  font-family: "Poppins", sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.35; color: var(--cream-2);
}

/* ---- Pillars ------------------------------------------------------------ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pillars.plan-steps { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .pillars.plan-steps { grid-template-columns: 1fr; } }
.pillar { background: var(--bg); padding: 30px 26px; transition: background .3s, transform .3s var(--ease); }
.pillar:hover { background: var(--bg-3); transform: translateY(-4px); }
.pillar-num { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 15px; color: var(--red-light); }
.pillar h3 { font-size: 19px; margin-top: 14px; text-transform: none; letter-spacing: 0; }
.pillar p { font-family: "Inter", sans-serif; text-transform: none; color: var(--cream-2); font-size: 14.5px; margin-top: 10px; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* ---- Courses showcase (pinned horizontal) ------------------------------- */
.showcase { padding: 96px 0 0; }
.showcase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.showcase-track-wrap { overflow: hidden; margin-top: 48px; }
.showcase-track { display: flex; gap: 20px; padding: 4px 24px 64px; will-change: transform; }
.course-card {
  flex: 0 0 320px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; display: flex; flex-direction: column; gap: 16px;
  transition: transform .35s var(--ease), border-color .35s;
}
.course-card:hover { transform: translateY(-6px); border-color: var(--line-2); }
.course-card-num { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--red-light); font-size: 14px; }
.course-card h3 { font-size: 22px; text-transform: none; letter-spacing: 0; line-height: 1.15; margin-top: 4px; }
.course-card p { font-family: "Inter", sans-serif; text-transform: none; color: var(--cream-2); font-size: 14.5px; flex: 1; }
.course-card-price { font-size: 13px; color: var(--cream-3); font-family: "Inter", sans-serif; border-top: 1px solid var(--line); padding-top: 14px; }
.course-card .btn { margin-top: 4px; }

/* En móvil el carril NO lo mueve GSAP: main.js se sale por debajo de 780px
   para dejar el scroll nativo (main.js, "native scroll on mobile"). Pero el
   .showcase-track-wrap de arriba lleva overflow: hidden, pensado para la
   versión de escritorio que se desplaza sola. Resultado sin estas reglas: se
   ve la primera tarjeta cortada y a los otros cinco cursos no se llega de
   ninguna manera. Aquí se devuelve el arrastre con el dedo.

   El corte tiene que ser el mismo 780px que usa main.js: si se separan, queda
   una franja de anchos sin animación y sin arrastre. */
@media (max-width: 780px) {
  /* Con el título y el botón en la misma línea, "Ver todos los cursos CAP" se
     salía 110px por la derecha de la pantalla. Que baje debajo del texto. */
  .showcase-head { flex-wrap: wrap; }
  .showcase-track-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* Para que la tarjeta enganchada respete el padding del carril. */
    scroll-padding-left: 24px;
  }
  /* Los 64px de abajo eran hueco para la animación de escritorio. */
  .showcase-track { padding-bottom: 32px; }
  .course-card {
    /* Se deja asomar la siguiente: es lo que le dice al dedo que hay más
       cursos a la derecha. */
    flex-basis: min(78vw, 320px);
    scroll-snap-align: start;
  }
  /* En pantalla táctil el :hover se queda pegado después de tocar, y la
     tarjeta se quedaba levantada. */
  .course-card:hover { transform: none; }
}

/* ---- Zones --------------------------------------------------------------- */
.zones-primary { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.zone-chip-primary { padding: 10px 20px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: 14.5px; }
.zones-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.zone-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--cream-2); transition: border-color .2s, color .2s; }
.zone-chip:hover { border-color: var(--cream); color: var(--cream); }
.zone-chip.is-linked { border-color: var(--red-2); color: var(--cream); }

/* ---- CTA band -------------------------------------------------------------- */
.cta-band { background: linear-gradient(135deg, var(--red-2), var(--red)); border-radius: var(--radius); padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: #fff; }
.cta-band p { font-family: "Inter", sans-serif; text-transform: none; color: rgba(255,255,255,.85); margin-top: 10px; max-width: 46ch; }
.cta-band .btn-primary { background: #fff; color: var(--red-2); }
.cta-band .btn-primary:hover { background: var(--cream); }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
@media (max-width: 700px) { .cta-band { padding: 36px 26px; } }

/* ---- Contact / map --------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* minmax(0, 1fr) y no 1fr a secas: el mínimo de una columna 1fr es el ancho de
   la palabra más larga que contiene, y "hola@autoescueladoblemando.es" no se
   parte. En un móvil de 375px eso ensanchaba la columna, y con ella la ficha
   de contacto y el mapa, que se salían 7px de la pantalla. */
.contact-info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; font-family: "Inter", sans-serif; }
.contact-info dt { color: var(--cream-3); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.contact-info dd { margin: 0; color: var(--cream); font-weight: 600; overflow-wrap: anywhere; }
.contact-map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; }
.contact-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* En pantallas estrechas la etiqueta va encima del dato, no al lado. Con las
   dos columnas, al correo le quedaban unos 244px y no cabía entero: se partía
   en "hola@autoescueladoble / mando.es". Así dispone de todo el ancho.
   El corte son 430px porque es donde deja de caber: etiqueta (118) + correo
   (244) + hueco (18) + márgenes (48). */
@media (max-width: 430px) {
  .contact-info dl { grid-template-columns: 1fr; gap: 0; }
  .contact-info dt { margin-top: 16px; }
  .contact-info dt:first-of-type { margin-top: 0; }
  .contact-info dd { margin-top: 3px; }
}

/* ---- Forms --------------------------------------------------------------- */
.form-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; }
.form-row { display: grid; gap: 8px; margin-bottom: 18px; }
.form-row.two { grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row label { font-size: 13px; font-weight: 700; color: var(--cream-2); text-transform: uppercase; letter-spacing: 0.04em; }
.form-row input, .form-row select, .form-row textarea {
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--cream);
  padding: 13px 14px; width: 100%; transition: border-color .2s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--red); }
.form-note { font-size: 13px; color: var(--cream-3); margin-top: 16px; font-family: "Inter", sans-serif; }
.form-nota-campo { font-size: 13px; color: var(--cream-3); font-family: "Inter", sans-serif; line-height: 1.5; margin-top: 4px; }
.form-nota-campo strong { color: var(--red-light); }
.form-success { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(221,31,38,.12); border: 1px solid var(--red-2); font-size: 14px; }
.form-success.is-visible { display: block; }
.form-error { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-3); border: 1px solid var(--red); font-size: 14px; line-height: 1.6; color: var(--cream-2); }
.form-error a { color: var(--red-light); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .form-row.two { grid-template-columns: 1fr; } }

/* ---- Footer --------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 32px; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 19px; text-transform: uppercase; }
.footer-brand img { height: 32px; }
.footer-claim { margin-top: 14px; color: var(--cream-3); font-size: 14px; font-family: "Inter", sans-serif; max-width: 32ch; }
.footer h4 { font-size: 13px; letter-spacing: 0.08em; color: var(--cream-3); margin-bottom: 16px; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 14.5px; color: var(--cream-2); transition: color .2s; }
.footer-links a:hover { color: var(--cream); }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--cream-3); font-family: "Inter", sans-serif; }
.footer-credits a { color: var(--cream-3); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Reveal (defensive) --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* ---- Page-level variants (courses/about/contact/matricula/zone) ---------- */
.page-hero { padding: 148px 0 64px; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.page-hero p { font-family: "Inter", sans-serif; text-transform: none; color: var(--cream-2); font-size: 17px; max-width: 60ch; margin-top: 18px; }

.course-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.course-full-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.course-full-card h3 { font-size: 24px; text-transform: none; letter-spacing: 0; }
.course-full-card p { font-family: "Inter", sans-serif; text-transform: none; color: var(--cream-2); font-size: 15px; flex: 1; }
.course-full-price { font-size: 14px; color: var(--cream-3); font-family: "Inter", sans-serif; }
@media (max-width: 780px) { .course-list { grid-template-columns: 1fr; } }

.about-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-block img { border-radius: var(--radius); box-shadow: var(--shadow); }
.about-block p { font-family: "Inter", sans-serif; text-transform: none; color: var(--cream-2); font-size: 16.5px; margin-top: 16px; }
@media (max-width: 860px) { .about-block { grid-template-columns: 1fr; } }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 48px; }
.stat-cell { background: var(--bg); padding: 30px; text-align: center; }
.stat-num { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 44px; color: var(--red-light); }
.stat-label { font-size: 13px; color: var(--cream-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; } }

/* Zone landing pages */
.zone-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Credits page */
.page-credits main { padding: 148px 0 96px; }
.credits-list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: "Inter", sans-serif; font-size: 14px; color: var(--cream-2); }
.credits-list a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Utility --------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }

/* ---- Legal pages ----------------------------------------------------------
   Prosa larga (aviso legal, privacidad, cookies, condiciones). Se aísla aquí
   para no repetir estilos en línea en cada párrafo.
   -------------------------------------------------------------------------- */
/* ---- Preguntas frecuentes ------------------------------------------------
   Acordeón con <details>/<summary> del propio navegador: sin JavaScript, se
   abre aunque falle todo lo demás, y el buscador lee el contenido esté abierto
   o cerrado. */
.faq { max-width: 760px; }
/* Separador entre los dos bloques de preguntas (profesional / particular):
   quien viene a por el carné de coche no tiene por qué leerse las del CAP. */
.faq-group { margin-top: 64px; margin-bottom: 22px; }
.faq-group:first-child { margin-top: 0; }
.faq-group h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.faq-group p {
  margin-top: 8px; font-family: "Inter", sans-serif; text-transform: none;
  color: var(--cream-3); font-size: 15px;
}
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-3); padding: 0 26px; margin-top: 14px;
  transition: border-color .25s;
}
.faq-item:first-child { margin-top: 0; }
.faq-item[open] { border-color: var(--line-2); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 24px 0;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px;
  color: var(--cream); line-height: 1.35;
  display: flex; align-items: flex-start; gap: 16px;
}
/* El triángulo por defecto de Safari y el de Chrome se quitan distinto. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; margin-left: auto; flex: 0 0 auto;
  font-size: 24px; line-height: 1; color: var(--red-light);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--red-light); }
.faq-answer { padding: 0 0 26px; border-top: 1px solid var(--line); margin-top: -2px; }
.faq-answer p {
  margin-top: 16px; font-family: "Inter", sans-serif; text-transform: none;
  color: var(--cream-2); line-height: 1.75; font-size: 15.5px;
}
.faq-answer strong { color: var(--cream); }
/* El reset de arriba quita las viñetas a todas las listas; aquí sí las
   queremos (la escalera AM · A1 · A2 · A se lee mucho mejor en lista). */
.faq-answer ul { margin-top: 14px; padding-left: 20px; list-style: disc; }
.faq-answer li {
  margin-top: 9px; font-family: "Inter", sans-serif; text-transform: none;
  color: var(--cream-2); line-height: 1.7; font-size: 15.5px;
}
.faq-answer li::marker { color: var(--red-light); }
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; color: var(--red-light); }
.faq-answer a:hover { color: var(--cream); }
@media (max-width: 560px) {
  .faq-item { padding: 0 20px; }
  .faq-item summary { font-size: 16.5px; padding: 20px 0; gap: 12px; }
}

.legal { max-width: 760px; }
.legal h2 { margin-top: 56px; font-size: clamp(22px, 3vw, 28px); }
.legal h3 { margin-top: 34px; font-size: 17px; }
.legal h2:first-child, .legal h3:first-child { margin-top: 0; }
.legal p { margin-top: 14px; font-family: "Inter", sans-serif; color: var(--cream-2); line-height: 1.75; }
.legal ul, .legal ol { margin-top: 14px; padding-left: 22px; list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-top: 9px; font-family: "Inter", sans-serif; color: var(--cream-2); line-height: 1.7; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--cream); }
.legal-box { margin-top: 26px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.legal-box p:first-child { margin-top: 0; }
.legal-meta { margin-top: 34px; font-family: "Inter", sans-serif; font-size: 13px; color: var(--cream-3); }
.legal-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-family: "Inter", sans-serif; font-size: 14.5px; color: var(--cream-2); }
.legal-table th, .legal-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
.legal-table th { color: var(--cream); font-weight: 600; white-space: nowrap; }
.legal-table tr:last-child th, .legal-table tr:last-child td { border-bottom: 0; }
@media (max-width: 620px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; }
  .legal-table th { border-bottom: 0; padding-bottom: 2px; white-space: normal; }
  .legal-table td { padding-top: 0; }
}

/* ---- Enlaces legales del pie ---------------------------------------------- */
.footer-legal a { color: var(--cream-3); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--cream-2); }

/* ---- Consentimiento en formularios ---------------------------------------- */
.form-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; font-family: "Inter", sans-serif; font-size: 13px; color: var(--cream-3); line-height: 1.6; }
.form-consent input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--red); cursor: pointer; }
.form-consent label { cursor: pointer; }
.form-consent a { text-decoration: underline; text-underline-offset: 2px; }
.form-consent.is-error { color: var(--red-light); }

/* ---- Mapa con carga bajo demanda ------------------------------------------
   El mapa de Google no se carga hasta que se pulsa: así la web no envía nada
   a Google sin que el visitante lo pida, y no hace falta banner de cookies.
   -------------------------------------------------------------------------- */
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 28px; background: var(--bg-2); border-radius: inherit; }
.map-consent p { max-width: 42ch; font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--cream-3); line-height: 1.6; }