/* Tipografía Inter (licencia SIL OFL 1.1, ver fonts/LICENCIA-Inter-OFL.txt), servida desde la propia web */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/inter-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }

/* ============ autoescuela ON ============
   Mismo estilo que la app de autoescuela ON (15 de octubre de 2026):
   Inter, fondo blanco, bordes finos, sin sombras y rojo #D00A1D solo en
   logotipo, botones de acción y avisos (más las palabras rojas de los títulos
   y los gráficos y el progreso, decididos por el administrador).
   Todo sale de estas variables: no escribas colores, pesos ni radios sueltos. */
:root {
  /* Tipografía */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --w-title: 300;      /* h1, h2, h3, cifras grandes, años, números de los pasos */
  --w-number: 400;     /* números grandes que a 300 quedarían débiles */
  --w-text: 400;       /* texto normal */
  --w-medium: 500;     /* lo que antes iba en negrita, botones, etiquetas y nombres */
  /* Escala de letra: 9 tamaños para toda la web (versión 2.72). No escribas tamaños sueltos: usa uno de estos. */
  --fs-1: min(clamp(3.2rem, 11vw, 9.5rem), 12.5vh);   /* 1 · portada («Arranca tu libertad») */
  --fs-2: clamp(2.3rem, 6vw, 4.6rem);    /* 2 · títulos de sección y cifras grandes (175 €, +17,7) */
  --fs-3: clamp(2rem, 4.4vw, 3.6rem);    /* 3 · títulos en dos columnas y texto de «Quiénes somos» */
  --fs-4: clamp(1.5rem, 3.6vw, 2.6rem);    /* 4 · subtítulos («Tu opinión», confirmación, «pulsando») */
  --fs-5: 1.5rem;                        /* 5 · títulos de fichas, cifras de los anillos, pasos */
  --fs-6: clamp(1.05rem, 1.6vw, 1.3rem); /* 6 · entradillas y títulos pequeños */
  --fs-7: 1rem;                          /* 7 · texto */
  --fs-8: .875rem;                       /* 8 · texto secundario, botones, menú, pie */
  --fs-9: .75rem;                        /* 9 · etiquetas, notas y rótulos en mayúsculas */
  --ls-title: -0.015em;
  --ls-caps: .07em;    /* rótulos en mayúsculas espaciadas */

  /* Colores */
  --c-bg: #FFFFFF;
  --c-text: #111111;
  --c-text-2: #444444;
  --c-gray: #707070;
  --c-gray-2: #9A9A9A;
  --c-tag: #6E6E6E;
  --c-line: #E6E6E6;
  --c-line-soft: #EFEFEF;
  --c-line-strong: #DADADA;
  --c-red: #D00A1D;          /* rojo de la app */
  --c-red-hover: #A80816;
  --c-alert-line: #F1B9BF;   /* contorno de etiquetas de aviso */
  --c-alert-bg: #FFF7F8;     /* fondo muy suave de un campo con error */
  --c-logo: #e30613;         /* rojo del logotipo y del botón de encendido (no cambia) */
  --c-ok: #1F8F52;           /* estados correctos: DNI válido, respuesta acertada, abierto */
  --c-estrella: #FBBC04;     /* estrellas de las reseñas (amarillo de las reseñas de Google; solo en «Reseñas») */
  --c-google: #1A73E8;       /* la palabra «Google» del título de las reseñas (azul de Google; solo ahí) */

  /* Bordes y formas */
  --border: 1px solid var(--c-line);
  --border-soft: 1px solid var(--c-line-soft);
  --border-strong: 1px solid var(--c-line-strong);
  /* Espacio entre secciones (versión 3.08): la mitad del hueco entre el contenido de una sección y el de la siguiente.
     Hueco total = 2 × --sec-y: unos 76 px en el móvil y la tableta, 102 en portátil y 144 en pantallas grandes
     (3.09; en la 3.08 eran 104 y 200). Que siga siendo casi el doble del espacio de dentro de cada sección
     (título → contenido: 40 px en el móvil, 80 en pantallas grandes), para que se note dónde empieza cada una. */
  --sec-y: clamp(38px, 5vw, 72px);
  --radius: 14px;            /* tarjetas */
  --radius-sm: 12px;         /* campos y cajas pequeñas */
  --radius-pill: 999px;      /* botones y etiquetas */

  /* Movimiento */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-weight: var(--w-text);
  font-size: var(--fs-7);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
b, strong { font-weight: var(--w-medium); }
h1, h2, h3 { font-family: var(--font); font-weight: var(--w-title); margin: 0; letter-spacing: var(--ls-title); text-wrap: balance; }   /* sin palabras sueltas en la última línea */
p, li { text-wrap: pretty; }
h2 { font-size: var(--fs-2); line-height: 1.04; }
h3 { font-size: var(--fs-6); }
.red { color: var(--c-red); }
.nowrap { white-space: nowrap; }
.muted { color: var(--c-gray); }
.eyebrow { font-family: var(--font); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-9); font-weight: var(--w-text); color: var(--c-gray); margin: 0 0 14px; }
.lead { font-size: var(--fs-6); color: var(--c-text-2); max-width: 640px; margin: 22px 0 0; }

.section { padding: var(--sec-y) clamp(16px, 5vw, 64px); max-width: 1280px; margin: 0 auto; }
.section__head { margin-bottom: clamp(40px, 6vw, 80px); }
main > section[id] { scroll-margin-top: 84px; }   /* sin animaciones: que la barra de arriba no tape el título al saltar del menú */
#inicio, #viaje, #historia { scroll-margin-top: 0; }
/* Bloques que van juntos (texto «Desde 2017» + equipo, flota + local, recorrido + trámites,
   zona del alumno + test + reseña): menos espacio arriba para que se lean como uno */
.section--joined { padding-top: var(--sec-y); }   /* 3.08: el mismo hueco que entre las demás secciones */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--w-medium) var(--fs-7) var(--font); letter-spacing: 0;
  padding: 15px 28px; border-radius: var(--radius-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s;
  background: none; color: inherit;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn--red { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.btn--red:hover { background: var(--c-red-hover); border-color: var(--c-red-hover); }
.btn--ghost { border-color: var(--c-line-strong); color: var(--c-text); background: var(--c-bg); }
.btn--ghost:hover { border-color: var(--c-text); }
.btn--sm { padding: 10px 20px; font-size: var(--fs-8); }
.btn:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--c-bg); display: grid; place-items: center; transition: opacity .8s var(--ease), visibility .8s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__power { width: 90px; }
.pw-arc, .pw-line { fill: none; stroke: var(--c-logo); stroke-width: 10; stroke-linecap: round; }
.loader .pw-arc { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 1.1s var(--ease) forwards; }
.loader .pw-line { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .8s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(1180px, calc(100% - 24px));
  display: flex; align-items: center; gap: 24px; padding: 8px 10px 8px 20px;
  border-radius: var(--radius-pill); background: var(--c-bg);   /* blanco liso: el desenfoque de cristal se repintaba en cada desplazamiento */
  border: var(--border);
  color: var(--c-text);
  transition: transform .5s var(--ease), background .4s;
}

.nav__logo { display: block; width: 54px; flex: none; }
.logo-svg { width: 100%; overflow: visible; }
/* Logotipo: dibujado con las medidas del original (anillo y palo del botón de encendido;
   «n» con la pata izquierda en pico y la derecha con muesca). viewBox="463 85 674 406" */
.logo-ring { fill: none; stroke: var(--c-logo); stroke-width: 54; stroke-linecap: round; }
.logo-stem { fill: none; stroke: var(--c-logo); stroke-width: 60; stroke-linecap: round; }
.logo-n { fill: currentColor; stroke: none; }
.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nav__wa { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: var(--border-strong); color: var(--c-text); background: var(--c-bg); transition: border-color .25s, transform .25s var(--ease); }
.nav__wa svg { width: 19px; height: 19px; }
.nav__wa:hover { border-color: var(--c-text); transform: translateY(-1px); }
.nav__wa:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }
.manifesto__eyebrow { margin-bottom: 18px; }
.nav__links a { text-decoration: none; font-size: var(--fs-8); font-weight: var(--w-text); color: var(--c-text-2); transition: color .2s; }
.nav__links a:hover, .nav__links a.is-current { color: var(--c-text); }
.nav__links a.is-current { font-weight: var(--w-medium); }
.nav.is-hidden { transform: translate(-50%, -140%); }
/* Grupo «La autoescuela» (Equipo, Vehículos, Instalaciones) */
.nav__links { align-items: center; }
.nav__group { position: relative; display: flex; }   /* sin esto, «La autoescuela» quedaba medio píxel más baja que los demás enlaces */
.nav__grouptitle { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; font: var(--w-text) var(--fs-8) var(--font); line-height: inherit; color: var(--c-text-2); transition: color .2s; }
.nav__grouptitle svg { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.nav__grouptitle:hover, .nav__grouptitle.is-current { color: var(--c-text); }
.nav__grouptitle.is-current { font-weight: var(--w-medium); }
.nav__grouptitle:focus-visible { outline: 2px solid var(--c-text); outline-offset: 4px; border-radius: 4px; }
.nav__sub { position: absolute; top: calc(100% + 20px); left: 50%; min-width: 180px; display: flex; flex-direction: column; padding: 6px; background: var(--c-bg); border: var(--border); border-radius: var(--radius); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }   /* puente: el ratón no pierde el menú al bajar */
.nav__links .nav__sub a { padding: 10px 14px; border-radius: var(--radius-sm); }
.nav__group.is-open .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .25s var(--ease); }
.nav__group.is-open .nav__grouptitle svg { transform: rotate(180deg); }
@media (hover: hover) and (min-width: 1001px) {
  .nav__group:hover .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .25s var(--ease); }
  .nav__group:hover .nav__grouptitle svg { transform: rotate(180deg); }
}
.nav__burger { display: none; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; position: relative; color: inherit; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s; }
.nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 24px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--c-red); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }

/* ---------- Hero ---------- */
.hero { height: 220vh; position: relative; background: var(--c-bg); color: var(--c-text); }
@media (max-width: 640px) { .hero { height: 185vh; } }   /* en el móvil, menos recorrido en blanco entre la portada y «Quiénes somos» */
.hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 16px 40px; overflow: hidden; }
.hero__glow { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; background: radial-gradient(circle, rgba(208, 10, 29, .08), rgba(208, 10, 29, 0) 55%); opacity: 0; pointer-events: none; }
.hero__power { width: clamp(90px, 13vw, 140px); aspect-ratio: 1; padding: 22px; border-radius: 50%; border: var(--border); background: var(--c-bg); cursor: pointer; margin-bottom: 34px; transition: border-color .5s; position: relative; }
.hero__power:hover { border-color: var(--c-logo); }
.hero__power .pw-arc, .hero__power .pw-line { stroke: var(--c-gray-2); transition: stroke .4s; }
.hero.is-on .hero__power { border-color: var(--c-logo); }
.hero.is-on .hero__power .pw-arc, .hero.is-on .hero__power .pw-line { stroke: var(--c-logo); }
.hero__kicker { font-family: var(--font); font-weight: var(--w-text); letter-spacing: var(--ls-caps); text-transform: uppercase; font-size: var(--fs-8); color: var(--c-gray); margin: 0 0 18px; }
.hero__title { margin: 0; font-size: var(--fs-1);   /* con 4 líneas, el título se ajusta también a la altura de la pantalla */ line-height: .95; font-weight: var(--w-title); letter-spacing: var(--ls-title); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; transform: translateY(110%); }
.hero__title .hero__title-small { font-size: var(--fs-4); font-weight: var(--w-title); margin-top: .25em; }   /* línea pequeña: «pulsando» */
.hero__title em { font-style: normal; color: var(--c-red); }
.hero__logo { display: block; height: .82em; width: auto; overflow: visible; margin: .1em auto .02em; color: var(--c-text); }   /* «ON» de la portada: el mismo dibujo que el logotipo */
/* «Pulsa [ON]» de la matrícula online: el logotipo es un botón que lleva a la casilla del nombre.
   Medido con la «P» de «Pulsa»: la O y la n tienen su misma altura (arriba y abajo) y solo el palito del encendido sobresale. */
.pulsa-on { font: inherit; display: inline-block; vertical-align: -.005em; height: .83em; margin-left: .08em; padding: 0; border: 0; background: none; color: var(--c-text); cursor: pointer; border-radius: 10px; transition: transform .25s ease; -webkit-tap-highlight-color: transparent; }
.pulsa-on svg { display: block; height: 100%; width: auto; overflow: visible; }
.pulsa-on .logo-ring, .pulsa-on .logo-stem { animation: pulsaOn 2.4s ease-in-out infinite; }
.pulsa-on:hover { transform: scale(1.05); }
.pulsa-on:active { transform: scale(.96); }
.pulsa-on:focus-visible { outline: 2px solid var(--c-logo); outline-offset: 8px; }
.pulsa-on.is-on .logo-ring, .pulsa-on.is-on .logo-stem { animation: none; filter: drop-shadow(0 0 22px rgba(227, 6, 19, .75)); }
@keyframes pulsaOn { 0%, 100% { filter: drop-shadow(0 0 0 rgba(227, 6, 19, 0)); } 50% { filter: drop-shadow(0 0 16px rgba(227, 6, 19, .5)); } }
/* El «ON» de la portada también es ese botón; su línea deja de recortar el brillo cuando ya ha subido */
.pulsa-on.hero__pulsa { display: block; height: auto; margin: 0; vertical-align: baseline; }
.pulsa-on.hero__pulsa .hero__logo { height: .82em; }
.hero__title .line.is-in, .no-js .hero__title .line, .reduced .hero__title .line { overflow: visible; }
.hero__sub { max-width: 620px; font-size: var(--fs-6); color: var(--c-text-2); margin: 28px auto 0; }
.hero__scroll { position: absolute; bottom: 28px; font-size: var(--fs-9); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-gray); display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (max-height: 860px) and (min-width: 761px) { .hero__power { width: 108px; padding: 18px; margin-bottom: 22px; } .hero__kicker { margin-bottom: 10px; } }   /* en portátiles bajos, «Desliza» pisaba los botones */
.hero__scroll span { width: 1px; height: 46px; background: linear-gradient(var(--c-gray-2), transparent); animation: drip 2s infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Manifiesto ---------- */
.manifesto { padding: calc(2 * var(--sec-y)) clamp(16px, 5vw, 64px) var(--sec-y); max-width: 1280px; margin: 0 auto; }   /* mismo margen lateral que el resto de secciones */
.manifesto__text { font-family: var(--font); font-size: var(--fs-3); line-height: 1.2; font-weight: var(--w-title); letter-spacing: var(--ls-title); margin: 0; }
.manifesto__text .w { opacity: .12; transition: opacity .2s; }
.manifesto__text .w.is-lit { opacity: 1; }
.manifesto__text .w.is-red { color: var(--c-red); }

/* ---------- Viaje ---------- */
.journey { height: 400vh; position: relative; background: var(--c-bg); }
.journey__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.journey__sky { flex: 1; position: relative; overflow: hidden; }
.journey__city { position: absolute; bottom: 0; left: 0; height: 46%; width: 300%; display: flex; align-items: flex-end; gap: 14px; padding-left: 4vw; }
.journey__city .bld { background: var(--c-bg); border: var(--border); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; flex: none; position: relative; }
.journey__city .bld::after { content: ""; position: absolute; inset: 14px; background: repeating-linear-gradient(90deg, transparent 0 10px, var(--c-line-soft) 10px 22px), repeating-linear-gradient(0deg, transparent 0 14px, var(--c-bg) 14px 26px); opacity: .9; }
.journey__city .tree { width: 46px; height: 70px; flex: none; position: relative; }
.journey__city .tree::before { content: ""; position: absolute; left: 22px; bottom: 0; width: 2px; height: 26px; background: var(--c-line-strong); }
.journey__city .tree::after { content: ""; position: absolute; left: 0; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; background: var(--c-bg); border: var(--border); }
.journey__stages { position: absolute; top: clamp(90px, 14vh, 140px); left: 0; right: 0; text-align: center; padding: 0 16px; z-index: 2; }
.stage { position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.stage.is-active { opacity: 1; transform: none; }
.stage span { font-family: var(--font); color: var(--c-gray); font-weight: var(--w-text); font-size: var(--fs-8); letter-spacing: var(--ls-caps); }
.stage h3 { font-size: var(--fs-2); font-weight: var(--w-title); margin: 6px 0 10px; }
.stage p { color: var(--c-text-2); max-width: 520px; margin: 0 auto; font-size: var(--fs-6); padding: 0 8px; }
/* Recorrido lateral de 4 pantallas */
.jtrack { position: absolute; top: 0; left: 0; bottom: 32vh; width: 400vw; display: flex; z-index: 2; will-change: transform; }
.jpanel { flex: none; width: 100vw; height: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: 90px clamp(16px, 7vw, 110px) 30px; }
.jpanel__text { max-width: 520px; }
.jpanel__n { font: var(--w-title) var(--fs-2) var(--font); line-height: .8; letter-spacing: var(--ls-title); color: transparent; -webkit-text-stroke: 1.5px var(--c-red); display: block; margin-bottom: 10px; }
.jpanel h3 { font-size: var(--fs-2); font-weight: var(--w-title); line-height: 1.02; margin: 0 0 14px; }
.jpanel p { color: var(--c-text-2); font-size: var(--fs-6); margin: 0; max-width: 420px; }
.jpanel__art { justify-self: center; }
.jdots { position: absolute; left: 50%; bottom: calc(32vh + 18px); transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.jdots i { width: 30px; height: 3px; border-radius: 3px; background: var(--c-line); transition: background .3s, width .3s; }
.jdots i.is-on { background: var(--c-red); width: 46px; }
/* 01 · móvil con la matrícula */
.jphone { width: 210px; padding: 14px 14px 18px; border-radius: 34px; background: var(--c-bg); border: 8px solid var(--c-text); }
.jphone__bar { width: 70px; height: 18px; border-radius: 12px; background: var(--c-text); margin: -6px auto 14px; }
.jphone__title { font: var(--w-medium) var(--fs-6) var(--font); margin: 0 6px 10px; }
.jphone ul { list-style: none; padding: 0 6px; margin: 0 0 16px; display: grid; gap: 10px; font-size: var(--fs-8); }
.jphone li { display: flex; align-items: center; gap: 10px; color: var(--c-text-2); }
.jphone li i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); transition: all .35s; }
.jphone li.is-done i { background: var(--c-red); border-color: var(--c-red); outline: 3px solid var(--c-bg); outline-offset: -5px; }
.jphone__btn { display: block; text-align: center; background: var(--c-red); color: #fff; font: var(--w-medium) var(--fs-8) var(--font); padding: 10px; border-radius: var(--radius-pill); margin: 0 6px; }
/* 02 · pizarra del teórico */
.jboard { width: min(340px, 80vw); border-radius: var(--radius); background: #23302a; color: #f2f5f0; border: 10px solid #8a6a44; padding: 22px; }
.jboard__q { font: var(--w-medium) var(--fs-7) var(--font); line-height: 1.3; }
.jboard__opts { display: flex; gap: 8px; margin: 16px 0; }
.jboard__opts span { flex: 1; text-align: center; padding: 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); font: var(--w-medium) var(--fs-7) var(--font); }
.jboard__opts .ok { background: #2fb36b; border-color: #2fb36b; }
.jboard__score { font: var(--w-text) var(--fs-7) var(--font); color: rgba(255, 255, 255, .7); }
.jboard__score b { font-size: var(--fs-4); font-weight: var(--w-title); color: #fff; }
/* 03 · semáforo */
.jlight { width: 72px; padding: 11px; border-radius: 22px; background: var(--c-text); display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; margin-bottom: 40px; }
.jlight::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 120px; background: var(--c-text-2); transform: translateX(-50%); z-index: -1; }
.jlight i { width: 50px; height: 50px; border-radius: 50%; background: #333; transition: background .3s; }
.jlight.s-r .lr { background: #ff3b30; }
.jlight.s-a .la { background: #ffb100; }
.jlight.s-g .lg { background: #34c759; }
/* 04 · el permiso de conducción (tarjeta), con la B que se enciende */
.jcard { width: 300px; padding: 16px 18px 18px; border-radius: 18px; background: var(--c-bg); border: 6px solid var(--c-text); display: grid; gap: 14px; }
.jcard__top { display: flex; align-items: center; justify-content: space-between; font: var(--w-medium) var(--fs-9) var(--font); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-text-2); }
.jcard__top b { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); display: grid; place-items: center; font-size: var(--fs-9); color: var(--c-gray); letter-spacing: 0; }
.jcard__body { display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: center; }
.jcard__foto { height: 86px; border-radius: 10px; background: var(--c-line-soft); position: relative; overflow: hidden; }
.jcard__foto::before { content: ""; position: absolute; left: 50%; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--c-line-strong); transform: translateX(-50%); }
.jcard__foto::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 50px; height: 40px; border-radius: 50% 50% 0 0; background: var(--c-line-strong); transform: translateX(-50%); }
.jcard__lines { display: grid; gap: 11px; }
.jcard__lines i { display: block; height: 8px; border-radius: 6px; background: var(--c-line); transform-origin: left center; }
.jcard__lines i:nth-child(2) { width: 80%; } .jcard__lines i:nth-child(3) { width: 90%; } .jcard__lines i:nth-child(4) { width: 55%; }
.jcard__cats { display: flex; align-items: center; gap: 10px; }
.jcard__cats em { font: var(--w-text) var(--fs-9) var(--font); font-style: normal; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-gray); }
.jcard__cats span { min-width: 46px; padding: 7px 10px; text-align: center; border-radius: 10px; border: 1.5px solid var(--c-line-strong); font: var(--w-medium) var(--fs-8) var(--font); color: var(--c-gray-2); transition: all .35s; }
.jcard__cats .jcard__b.is-on { background: var(--c-red); border-color: var(--c-red); color: #fff; }
@media (max-width: 760px) {
  .jpanel { grid-template-columns: 1fr; align-content: start; gap: 18px; padding-top: 80px; text-align: left; }
  .jpanel__art { transform: scale(.72); transform-origin: top center; }
  .jpanel__n { font-size: var(--fs-2); }
  .jpanel p { font-size: var(--fs-7); }
}
.journey__road { height: 32vh; min-height: 210px; background: #2b2b2e; position: relative; }
.road__lines { position: absolute; top: 48%; left: 0; height: 6px; width: 400%; background: repeating-linear-gradient(90deg, #fff 0 70px, transparent 70px 140px); opacity: .85; }
.road__signs { position: absolute; bottom: 100%; left: 0; width: 500%; height: 120px; }
.sign { position: absolute; bottom: 0; display: grid; place-items: center; font: var(--w-medium) var(--fs-8) var(--font); }
.sign::after { content: ""; position: absolute; top: 100%; left: 50%; width: 4px; height: 0; }
.sign--stop { left: 60vw; width: 64px; height: 64px; bottom: 50px; background: var(--c-red); color: #fff; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.sign--tri { left: 140vw; width: 70px; height: 62px; bottom: 50px; background: var(--c-red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sign--tri::before { content: ""; position: absolute; inset: 12px 14px 7px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sign--round { left: 220vw; width: 64px; height: 64px; bottom: 50px; border-radius: 50%; background: #fff; border: 9px solid var(--c-red); font-size: var(--fs-6); }
.sign--dir { left: 300vw; width: 60px; height: 60px; bottom: 50px; border-radius: 50%; background: #1a57c7; color: #fff; font-size: var(--fs-4); font-weight: var(--w-title); }   /* sentido obligatorio */
.sign--fin { left: 380vw; width: 62px; height: 62px; bottom: 50px; border-radius: 50%; background: repeating-linear-gradient(-45deg, #fff 0 9px, var(--c-gray-2) 9px 11px); border: 2px solid var(--c-gray-2); }   /* fin de prohibiciones: a partir de aquí, conduces tú */
.journey__car { position: absolute; bottom: 20%; left: 2%; width: clamp(280px, 42vw, 580px); z-index: 3; }

/* ---------- Coche SVG ---------- */
.car { width: 100%; overflow: visible; display: block; }
.car__shadow { fill: rgba(0, 0, 0, .12); filter: blur(6px); }
.car__body { fill: #fff; stroke: var(--c-line-strong); stroke-width: 2; transition: fill .6s; }
.car__clad { fill: #2a2a2d; }
.car__arch { fill: none; stroke: #2a2a2d; stroke-width: 12; }
.car__rail { fill: none; stroke: #222; stroke-width: 5; stroke-linecap: round; }
.car__stripe { fill: var(--c-logo); }
.car__web { font: var(--w-medium) 9px var(--font); fill: #fff; }
.car__numring { fill: none; stroke: #222; stroke-width: 1.6; }
.car__num { font: var(--w-medium) 14px var(--font); fill: #222; text-anchor: middle; }
.car__glass { fill: #1f2933; }
.car__pillar { fill: #111; }
.car__line { fill: none; stroke: var(--c-line-strong); stroke-width: 2; }
.car__light--f { fill: #f7f7f2; stroke: #bbb; stroke-width: 1.5; }
.car__light--r { fill: var(--c-logo); }
.v-o { fill: none; stroke: var(--c-logo); stroke-width: 15; stroke-linecap: round; }
.v-n { fill: none; stroke: #4a4a4d; stroke-width: 17; }
.v-txt { font: var(--w-title) 19px var(--font); fill: #4a4a4d; letter-spacing: .02em; }
.v-tel { font: var(--w-medium) 11px var(--font); fill: var(--c-logo); }
.tyre { fill: #18181a; }
.rim { fill: #c9cbd0; }
.spokes { stroke: #8b8d93; stroke-width: 5; stroke-linecap: round; }
.hub { fill: #333; }
.car__Lsign rect { fill: #1a57c7; }
.car__Lsign text { font: var(--w-medium) 20px var(--font); fill: #fff; text-anchor: middle; }

/* ---------- Resultados ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat { background: var(--c-bg); border: var(--border); border-radius: var(--radius); padding: 30px 26px; }
.stat h3 { margin-top: 18px; }
.stat p { color: var(--c-gray); font-size: var(--fs-7); margin: 8px 0 0; }
.ring { position: relative; width: 140px; }
.ring svg { transform: rotate(-90deg); width: 100%; }
.ring circle { fill: none; stroke-width: 6; }
.ring__bg { stroke: var(--c-line-soft); }
.ring__fg { stroke: var(--c-red); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.ring__num { position: absolute; inset: 0; display: grid; place-items: center; font: var(--w-title) var(--fs-5) var(--font); letter-spacing: var(--ls-title); }
.ring__num small { font-size: var(--fs-7); }
.ring__num { display: flex; align-items: center; justify-content: center; }
.stat .stat__plus { font: var(--w-title) var(--fs-2) var(--font); letter-spacing: var(--ls-title); margin: 0; line-height: 1.1; color: var(--c-text); }
.stat__plus small { font-size: var(--fs-6); color: var(--c-gray); letter-spacing: 0; }
.chart { margin-top: 26px; background: var(--c-bg); border: var(--border); border-radius: var(--radius); padding: clamp(22px, 4vw, 44px); }
.chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.chart__legend { font-size: var(--fs-8); color: var(--c-gray); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.chart__key { display: inline-flex; align-items: flex-start; gap: 8px; }
.chart__key .lg { flex: none; margin-top: .6em; }
.lg { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-left: 10px; }
.lg--on { background: var(--c-red); } .lg--avg { background: transparent; border-top: 1px dashed var(--c-gray); height: 0; }
.chart__plot { position: relative; height: 300px; margin-top: 30px; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 2vw, 24px); align-items: end; border-bottom: var(--border); }
.bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar i { display: block; width: 100%; max-width: 64px; border-radius: 8px 8px 2px 2px; background: var(--c-red); transform-origin: bottom; transform: scaleY(0); }
.bar b { position: absolute; font: var(--w-medium) var(--fs-8) var(--font); opacity: 0; transition: opacity .4s .6s; }
.bar span { position: absolute; top: 100%; margin-top: 10px; font-size: var(--fs-9); color: var(--c-gray); }
.chart.is-in .bar b { opacity: 1; }
.chart__avg { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--c-gray); pointer-events: none; }
.chart__avg em { position: absolute; right: 0; top: -22px; font-size: var(--fs-9); color: var(--c-gray); font-style: normal; background: var(--c-bg); padding: 0 4px; }
.chart__note { font-size: var(--fs-9); color: var(--c-gray); margin: 46px 0 0; }

/* ---------- Historia ---------- */
.history { position: relative; background: var(--c-bg); color: var(--c-text); }
.history__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.history__intro { flex: none; width: min(44vw, 520px); padding-left: clamp(16px, 6vw, 80px); }
.history__intro h2 { font-size: var(--fs-2); }
.history__track { display: flex; gap: 22px; padding: 0 10vw 0 40px; will-change: transform; }
.hcard { flex: none; width: clamp(270px, 30vw, 380px); min-height: 380px; border-radius: var(--radius); padding: 34px 30px; background: var(--c-bg); border: var(--border); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.hcard__year { font: var(--w-title) var(--fs-2) var(--font); letter-spacing: var(--ls-title); color: var(--c-text); line-height: 1; }
.hcard h3 { margin: auto 0 10px; font-size: var(--fs-5); }
.hcard p { margin: 0; color: var(--c-text-2); font-size: var(--fs-7); }
.hcard--cta { justify-content: center; gap: 26px; }
.hcard--cta h3 { margin: 0; font-size: var(--fs-4); }
.hcard--cta .btn { align-self: flex-start; }

/* ---------- Galería ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 18px; grid-auto-flow: dense; }
.g { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--c-bg); border: var(--border); }
.g img { width: 100%; height: 118%; object-fit: cover; transition: transform .9s var(--ease); }   /* fotos ya retocadas: sin filtros */
.g:hover img { transform: scale(1.06); }
.g figcaption { position: absolute; left: 14px; bottom: 14px; background: var(--c-bg); border: var(--border); color: var(--c-tag); font: var(--w-text) var(--fs-8) var(--font); padding: 6px 12px; border-radius: var(--radius-pill); }
.g--tall { grid-row: span 2; }
.g--wide { grid-column: span 2; }

/* ---------- Equipo: tarjetas 3D con bocadillo ---------- */
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); padding-top: 20px; }
.tcard { position: relative; perspective: 1000px; outline: none; -webkit-tap-highlight-color: transparent; }
.tcard:focus-visible .tcard__bg { border-color: var(--c-text); }
.tcard__tilt { position: relative; aspect-ratio: 3 / 4; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.tcard.is-moving .tcard__tilt { transition: transform .1s linear; }
.tcard__bg { position: absolute; inset: 20% 0 0 0; border-radius: var(--radius); background: var(--c-bg); border: var(--border); color: var(--c-text); overflow: hidden; }
.tcard__deco { position: absolute; width: 96%; left: 2%; top: 6%; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; opacity: .06; }
.tcard__person { position: absolute; left: 50%; bottom: 0; width: 100%; height: auto; transform: translateX(-50%) translateZ(70px) scale(.94); transform-origin: 50% 100%; clip-path: inset(0 round 0 0 var(--radius) var(--radius)); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .12)); transition: filter .4s; pointer-events: none; }
.tcard__plate { position: absolute; left: 9%; right: 9%; bottom: 6%; transform: translateZ(110px) scale(.86); transform-origin: 50% 100%; background: var(--c-bg); border: var(--border); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; color: var(--c-text); }
.tcard__plate b { display: block; font: var(--w-medium) var(--fs-7) var(--font); }
.tcard__plate span { display: block; font-size: var(--fs-9); color: var(--c-gray); font-weight: var(--w-text); }
.tcard__glare { position: absolute; inset: 20% 0 0 0; border-radius: var(--radius); pointer-events: none; transform: translateZ(1px); background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .38), transparent 58%); opacity: 0; transition: opacity .35s; mix-blend-mode: soft-light; }
.tcard:hover .tcard__glare, .tcard.is-open .tcard__glare { opacity: 1; }
/* Bocadillo con la descripción */
.tbubble { position: absolute; left: 50%; bottom: 96%; z-index: 12; width: min(340px, 86vw); background: var(--c-bg); color: var(--c-text); border: var(--border); border-radius: var(--radius) var(--radius) var(--radius) 4px; padding: 16px 18px; font-size: var(--fs-8); line-height: 1.5; opacity: 0; transform: translate(-50%, 14px) scale(.92); transform-origin: 30% 100%; pointer-events: none; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.tbubble::after { content: ""; position: absolute; left: 34px; top: 100%; width: 14px; height: 9px; background: var(--c-line); clip-path: polygon(0 0, 100% 0, 0 100%); }
.tbubble p { margin: 0; color: var(--c-text-2); }
.tbubble .tbubble__tag { font: var(--w-medium) var(--fs-7) var(--font); color: var(--c-text); margin-bottom: 6px; }
.tcard:hover .tbubble, .tcard:focus-visible .tbubble, .tcard.is-open .tbubble { opacity: 1; transform: translate(-50%, 0) scale(1); }
.team__grid .tcard:first-child .tbubble { left: 0; transform: translate(0, 14px) scale(.92); }
.team__grid .tcard:first-child:hover .tbubble, .team__grid .tcard:first-child.is-open .tbubble, .team__grid .tcard:first-child:focus-visible .tbubble { transform: translate(0, 0) scale(1); }
.team__grid .tcard:last-child .tbubble { left: auto; right: 0; transform: translate(0, 14px) scale(.92); transform-origin: 70% 100%; border-radius: var(--radius) var(--radius) 4px var(--radius); }
.team__grid .tcard:last-child:hover .tbubble, .team__grid .tcard:last-child.is-open .tbubble, .team__grid .tcard:last-child:focus-visible .tbubble { transform: translate(0, 0) scale(1); }
.team__grid .tcard:last-child .tbubble::after { left: auto; right: 34px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
@media (max-width: 1000px) { .team__grid { grid-template-columns: 1fr 1fr; row-gap: 46px; } }
/* En el móvil el texto sale abajo, como una hoja, al tocar la tarjeta (la crea app.js) */
.tsheet { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; background: var(--c-bg); color: var(--c-text); border: var(--border-strong); border-radius: var(--radius); padding: 16px 18px; font-size: var(--fs-8); line-height: 1.5; opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.tsheet.is-in { opacity: 1; transform: none; pointer-events: auto; }
.tsheet p { margin: 0; color: var(--c-text-2); }
.tsheet .tbubble__tag { font: var(--w-medium) var(--fs-7) var(--font); color: var(--c-text); margin-bottom: 6px; }
@media (min-width: 761px) { .tsheet { display: none; } }
@media (max-width: 760px) {
  .tbubble { display: none; }
  .tcard__plate b { font-size: var(--fs-8); }
  .tcard__plate { left: 5%; right: 5%; padding: 8px 8px; }
  .tcard__plate span { font-size: var(--fs-9); letter-spacing: 0; line-height: 1.25; }
}

/* ---------- Flota ---------- */
.fleet { height: 260vh; position: relative; background: var(--c-bg); }
.fleet__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 4vw; padding: 80px clamp(16px, 5vw, 64px) 30px; max-width: 1280px; margin: 0 auto; overflow: hidden; }
.fleet__picker { display: flex; gap: 8px; margin: 28px 0 22px; flex-wrap: wrap; }
.chip { font: var(--w-text) var(--fs-8) var(--font); color: var(--c-tag); padding: 9px 16px; border-radius: var(--radius-pill); border: var(--border); background: var(--c-bg); cursor: pointer; transition: border-color .3s, color .3s; }
.chip:hover { border-color: var(--c-line-strong); }
.chip.is-active { color: var(--c-text); border-color: var(--c-text); font-weight: var(--w-medium); }
.fleet__feats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fleet__feats li { background: var(--c-bg); border: var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; }
.fleet__feats b { font-family: var(--font); font-weight: var(--w-medium); }
.fleet__feats span { font-size: var(--fs-8); color: var(--c-gray); }
.fleet__text h2 { font-size: var(--fs-3); }   /* en dos columnas, algo menor que el resto para que cada frase quepa en una línea */
.fleet__stage { position: relative; display: grid; place-items: center; min-height: 340px; }
@media (min-width: 761px) { .fleet__stage { clip-path: inset(-40% -40% -40% -16px); } }
.fleet__floor { display: none; }
.fleet__cars { position: relative; width: 100%; aspect-ratio: 100 / 55.02; margin-bottom: 30px; }
.fcar { position: absolute; transition: opacity .5s, filter .5s; cursor: pointer; }
.fcar img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .12)); }
/* Los 4 coches son el mismo coche alejándose hacia un punto de fuga: cada uno es el anterior
   escalado al 84 % hacia ese punto. Así ruedas, techos y frontales quedan en línea y todo es proporcional. */
.fcar--1 { width: 74.00%; left: 26.00%; bottom: 0.00%; z-index: 4; }
.fcar--2 { width: 62.16%; left: 15.79%; bottom: 23.63%; z-index: 3; }
.fcar--3 { width: 52.21%; left: 7.21%; bottom: 43.47%; z-index: 2; }
.fcar--4 { width: 43.86%; left: 0.00%; bottom: 60.14%; z-index: 1; }
.fcar--4 .fcar__badge { left: 4%; transform: none; }   /* a la izquierda, para que no se corte en el móvil */
.fcar:not(.is-active) { opacity: .6; filter: saturate(.7); }
.fcar--soon img { filter: grayscale(1) drop-shadow(0 10px 10px rgba(0, 0, 0, .1)); opacity: .55; }
.fcar__badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--c-bg); border: var(--border); color: var(--c-tag); font: var(--w-text) var(--fs-9) var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.fleet__photo { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; border: var(--border); background: var(--c-bg); }
.fleet__photo svg { display: block; width: 100%; height: auto; transition: filter .6s; }
.fleet__photo.is-soon svg { filter: grayscale(1) brightness(1.05) contrast(.85); }
.fleet__soon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); z-index: 2; background: var(--c-bg); border: var(--border); color: var(--c-tag); font: var(--w-text) var(--fs-8) var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; padding: 12px 22px; border-radius: var(--radius-pill); white-space: nowrap; opacity: 0; transition: opacity .5s, transform .5s var(--ease); pointer-events: none; }
.fleet__photo.is-soon .fleet__soon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.num-overlay { transition: opacity .4s; }
.chip--soon em { font-style: normal; font-size: var(--fs-9); color: var(--c-gray); margin-left: 4px; }
.chip--soon.is-active em { color: var(--c-gray); }
.fleet__stage .fleet__plate { top: auto; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 3; background: var(--c-bg); border: var(--border); color: var(--c-tag); padding: 7px 14px; border-radius: var(--radius-pill); font-size: var(--fs-9); }
.fleet__plate { position: absolute; bottom: -34px; font: var(--w-text) var(--fs-8) var(--font); letter-spacing: var(--ls-caps); color: var(--c-gray); margin: 0; }

/* ---------- Reseñas ---------- */
.reviews { padding: var(--sec-y) 0; overflow: hidden; background: var(--c-bg); }
.reviews--joined { padding-top: var(--sec-y); }   /* va pegada a los resultados: continúa su frase */
.reviews__head { row-gap: 0; }
.reviews__head .eyebrow { flex-basis: 100%; }   /* «Reseñas» encima del título, como en las demás secciones */
.reviews__head { padding: 0 clamp(16px, 5vw, 64px); max-width: 1280px; margin: 0 auto clamp(40px, 6vw, 70px); display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.reviews__title { flex: 1 1 520px; }
.reviews__title .lead { margin-top: 22px; }
.reviews__score { display: grid; grid-template-columns: auto; align-items: center; gap: 4px 12px; }
.reviews__score b { font: var(--w-title) var(--fs-2) var(--font); letter-spacing: var(--ls-title); line-height: 1; }
.reviews__score .stars { color: var(--c-estrella); font-size: var(--fs-6); letter-spacing: .1em; }
.reviews__score small { grid-column: 1 / -1; color: var(--c-gray); font-size: var(--fs-8); }
.reviews__all { grid-column: 1 / -1; margin-top: 6px; font-size: var(--fs-8); font-weight: var(--w-medium); color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.marquee { overflow: hidden; padding: 14px 0 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 22px; width: max-content; animation: marquee 70s linear infinite; }
.marquee[data-dir="right"] .marquee__track { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .marquee__track, .marquee.is-off .marquee__track { animation-play-state: paused; }   /* is-off: fuera de pantalla, no se mueve */
.marquee__track { will-change: transform; }
@keyframes marquee { to { transform: translateX(-50%); } }
.bubble { position: relative; margin: 0; width: 340px; flex: none; background: var(--c-bg); border: var(--border); border-radius: var(--radius) var(--radius) var(--radius) 4px; padding: 24px 22px 18px; display: flex; flex-direction: column; }
.bubble__q { position: absolute; top: 6px; right: 18px; font: var(--w-title) var(--fs-2)/1 var(--font); color: var(--c-line-strong); }
.bubble blockquote { margin: 0 0 18px; font-size: var(--fs-7); line-height: 1.5; color: var(--c-text-2); flex: 1; padding-right: 22px; }
.bubble figcaption { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: var(--border-soft); }
.bubble figcaption i { width: 34px; height: 34px; border-radius: 50%; background: var(--c-bg); border: var(--border); color: var(--c-text-2); display: grid; place-items: center; font: var(--w-medium) var(--fs-8) var(--font); font-style: normal; flex: none; }
.bubble figcaption span { display: flex; flex-direction: column; line-height: 1.2; }
.bubble figcaption b { font-family: var(--font); font-weight: var(--w-medium); }
.bubble figcaption em { font-style: normal; color: var(--c-estrella); font-size: var(--fs-8); letter-spacing: .1em; }

/* Escribe tu reseña (abre la ficha de Google) */
.write { max-width: 1280px; margin: clamp(50px, 7vw, 90px) auto 0; padding: 0 clamp(16px, 5vw, 64px); }
.write__card { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 60px); background: var(--c-bg); border: var(--border); border-radius: var(--radius); padding: clamp(24px, 4vw, 50px); }
.write h3 { font-size: var(--fs-4); line-height: 1.1; }
.write__intro { color: var(--c-text-2); margin: 16px 0 0; }
.write__steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.write__steps li { display: flex; align-items: center; gap: 12px; font-weight: var(--w-medium); }
.write__steps span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c-bg); border: var(--border-strong); color: var(--c-text); font: var(--w-number) var(--fs-8) var(--font); flex: none; }
.write__go { display: grid; gap: 22px; align-content: center; }
.write__go .write__steps { margin: 0; }
.btn--google { background: var(--c-bg); color: var(--c-text); border: var(--border-strong); width: 100%; height: 56px; }
.btn--google:hover { border-color: var(--c-text); }
.write__note { margin: -8px 0 0; font-size: var(--fs-8); color: var(--c-gray); text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) { .write__card { grid-template-columns: 1fr; } }

/* ---------- Zona alumno ---------- */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.scard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius); background: var(--c-bg); border: var(--border); text-decoration: none; color: inherit; overflow: hidden; transition: transform .5s var(--ease), border-color .5s; }
a.scard:hover { transform: translateY(-6px); border-color: var(--c-line-strong); }
.scard h3 { font-size: var(--fs-6); }
.scard p { margin: 0; color: var(--c-text-2); font-size: var(--fs-7); }
.scard__tag { align-self: flex-start; font: var(--w-text) var(--fs-9) var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--c-bg); border: var(--border); color: var(--c-tag); }
.scard__go { margin-top: auto; padding-top: 12px; font: var(--w-medium) var(--fs-7) var(--font); color: var(--c-text); }
.scard__apps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.scard--cal { grid-column: span 2; }
.scard__iframe { margin-top: 8px; flex: 1; min-height: 340px; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-bg); border: var(--border-soft); display: flex; flex-direction: column; }
.scard__iframe .consent-ph { flex: 1; }
.scard__iframe iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
.scard--press h3 { font-size: var(--fs-6); line-height: 1.35; font-style: italic; }

/* ---------- Noticias: bocadillo grande con bocadillos dentro ---------- */
.news.section { max-width: 1400px; }
.newsbox { position: relative; background: var(--c-bg); color: var(--c-text); border: var(--border); border-radius: var(--radius) var(--radius) var(--radius) 4px; padding: clamp(26px, 5vw, 64px); }
.newsbox::after { content: ""; position: absolute; left: 46px; top: 100%; width: 28px; height: 18px; background: var(--c-line); clip-path: polygon(0 0, 100% 0, 0 100%); }
.newsbox__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 44px); }
.newsbox h2 { font-size: var(--fs-2); }
.newsbox__sub { color: var(--c-text-2); margin: 14px 0 0; max-width: 520px; }
.newsbox__stamp { font: var(--w-text) var(--fs-9) var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-tag); border: var(--border); border-radius: var(--radius-pill); padding: 7px 14px; }
.newsbox__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
.nbubble { position: relative; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--c-text); background: var(--c-bg); border: var(--border); border-radius: var(--radius) var(--radius) var(--radius) 4px; padding: 22px 22px 18px; transition: transform .45s var(--ease), border-color .45s; }
.nbubble:hover { transform: translateY(-6px) rotate(-.4deg); border-color: var(--c-line-strong); }
.nbubble--main { grid-column: span 2; }
.nbubble--main h3 { font-size: var(--fs-4); }
.nbubble__meta { display: flex; align-items: center; gap: 10px; font: var(--w-text) var(--fs-9) var(--font); color: var(--c-gray); }
.nbubble__src { padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-9); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-tag); background: var(--c-bg); border: var(--border); }
.nbubble h3 { font-size: var(--fs-6); line-height: 1.3; margin: 0; }
.nbubble p { margin: 0; font-size: var(--fs-8); color: var(--c-text-2); line-height: 1.45; flex: 1; }
.nbubble__go { font: var(--w-medium) var(--fs-8) var(--font); color: var(--c-text); margin-top: 4px; }
@media (max-width: 1000px) { .newsbox__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .newsbox__grid { grid-template-columns: 1fr; }
  .nbubble--main { grid-column: span 1; }
}

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; grid-auto-flow: dense; }
.tile { background: var(--c-bg); border: var(--border); border-radius: var(--radius); padding: 30px; position: relative; overflow: hidden; transition: transform .5s var(--ease), border-color .5s; }
.tile:hover { transform: translateY(-6px); border-color: var(--c-line-strong); }
.tile h3 { margin: 18px 0 8px; }
.tile p { margin: 0; color: var(--c-text-2); font-size: var(--fs-7); }
/* Iconos de línea, como el botón de WhatsApp de la barra: círculo con borde gris e icono negro */
.tile__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: var(--border-strong); color: var(--c-text); }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tile__icon .ico { width: 27px; height: 27px; }
.btn--ico { display: inline-flex; align-items: center; gap: 8px; }
.btn--ico .ico { width: 18px; height: 18px; }
.tile--a { grid-column: span 2; } .tile--b { grid-column: span 2; }
.tile--c { grid-column: span 2; } .tile--d { grid-column: span 3; } .tile--e { grid-column: span 3; }
.tile--f { grid-column: span 6; }

/* ---------- Precio de la matrícula + «Qué incluye» desplegable ---------- */
.precio { max-width: 980px; border: var(--border); border-radius: var(--radius); background: var(--c-bg); }
.precio__top { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 18px 48px; padding: clamp(24px, 4vw, 40px); }
.precio__cifra .eyebrow { margin-bottom: 6px; }
.precio__n { font: var(--w-title) var(--fs-2)/1 var(--font); letter-spacing: var(--ls-title); margin: 0; color: var(--c-text); }
.precio__iva { margin: 6px 0 0; font-size: var(--fs-8); color: var(--c-gray); }
.precio__no { margin: 0 0 8px; color: var(--c-text-2); font-size: var(--fs-7); max-width: 420px; }
.precio__no a { display: block; margin-top: 6px; font-size: var(--fs-8); color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
.precio__det { border-top: var(--border); }
.precio__sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px clamp(24px, 4vw, 40px); font: var(--w-medium) var(--fs-7) var(--font); color: var(--c-text); }
.precio__sum::-webkit-details-marker { display: none; }
.precio__sum:hover .dgt__icon { border-color: var(--c-text); }
.precio__sum:focus-visible { outline: 2px solid var(--c-text); outline-offset: -4px; border-radius: var(--radius); }
.precio__det[open] .dgt__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.incl { list-style: none; margin: 0; padding: 4px clamp(24px, 4vw, 40px) clamp(24px, 4vw, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.incl li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.incl h3 { font-size: var(--fs-6); margin: 4px 0 4px; }
.incl p { margin: 0; color: var(--c-text-2); font-size: var(--fs-7); }
@media (max-width: 760px) {
  .precio__top { grid-template-columns: 1fr; align-items: start; }
  .incl { grid-template-columns: 1fr; gap: 22px; }
  .incl li { grid-template-columns: 48px 1fr; gap: 14px; }
  .incl .tile__icon { width: 48px; height: 48px; }
  .incl .tile__icon .ico { width: 23px; height: 23px; }
}

/* ---------- Trámites de la DGT: desplegable debajo del recorrido ---------- */
.dgt { max-width: 860px; border: var(--border); border-radius: var(--radius); background: var(--c-bg); }
.dgt__sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; }
.dgt__sum::-webkit-details-marker { display: none; }
.dgt__txt { display: flex; flex-direction: column; gap: 2px; }
.dgt__txt .eyebrow { margin: 0; }
.dgt__txt b { font-weight: var(--w-text); font-size: var(--fs-6); color: var(--c-text); }
.dgt__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; border: var(--border-strong); position: relative; transition: transform .35s var(--ease); }
.dgt__icon::before, .dgt__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--c-text); transform: translate(-50%, -50%); }
.dgt__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.dgt[open] .dgt__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.dgt__sum:hover .dgt__icon { border-color: var(--c-text); }
.dgt__sum:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; border-radius: var(--radius); }
.dgt .steps { margin: 6px 24px 30px; }

/* ---------- Escribe tu reseña, en la zona del alumno ---------- */
.writebox .write { margin-top: 0; padding: 0; }

/* ---------- Proceso ---------- */
.steps { position: relative; padding-left: 70px; max-width: 860px; }
.steps__rail { position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; background: var(--c-line); border-radius: 2px; }
.steps__fill { position: absolute; inset: 0; background: var(--c-red); transform-origin: top; transform: scaleY(0); border-radius: 2px; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.step { display: flex; gap: 22px; position: relative; }
.step__n { position: absolute; left: -70px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-bg); border: var(--border); font: var(--w-number) var(--fs-6) var(--font); color: var(--c-gray); transition: all .4s; }
.step.is-on .step__n { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.step h3 { font-size: var(--fs-5); padding-top: 10px; }
.step p { color: var(--c-text-2); margin: 8px 0 0; }
.step a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Matrícula (wizard) ---------- */
.wizard { background: var(--c-bg); border: var(--border); border-radius: var(--radius); padding: clamp(20px, 4vw, 50px); max-width: 980px; }
.wizard__nav { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 36px; counter-reset: s; overflow-x: auto; }
.wizard__nav li { flex: 1; min-width: 92px; display: flex; flex-direction: column; gap: 8px; font: var(--w-text) var(--fs-8) var(--font); color: var(--c-gray); padding-top: 12px; border-top: 2px solid var(--c-line); transition: all .4s; }
.wizard__nav li span { display: none; }
.wizard__nav li.is-active, .wizard__nav li.is-done { color: var(--c-text); border-color: var(--c-red); }
.wizard__nav li.is-active { font-weight: var(--w-medium); }
.wizard__nav li.is-done { color: var(--c-gray); }
@media (max-width: 640px) { .wizard__nav li { min-width: 0; } }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wstep { display: none; animation: stepIn .5s var(--ease); }
.wstep.is-active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } }
legend { font: var(--w-title) var(--fs-5) var(--font); letter-spacing: var(--ls-title); margin-bottom: 24px; padding: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { position: relative; }
.field--full { grid-column: 1 / -1; margin-top: 16px; }
.grid2 .field--full { margin-top: 0; }
.field input, .field select, .field textarea {
  width: 100%; font: var(--w-text) var(--fs-7) var(--font); color: var(--c-text);
  padding: 24px 16px 10px; border: var(--border); border-radius: var(--radius-sm); background: var(--c-bg);
  transition: border-color .25s; outline: none; appearance: none;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-text); }
.field label { position: absolute; left: 17px; right: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; top: 17px; color: var(--c-gray); font-size: var(--fs-7); pointer-events: none; transition: all .2s var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .label--fixed { top: 7px !important; font-size: var(--fs-9) !important; font-weight: var(--w-medium); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--c-red); background: var(--c-alert-bg); }
.field.is-ok input { border-color: var(--c-ok); }
.hint { display: block; font-size: var(--fs-9); color: var(--c-gray); margin: 6px 4px 0; min-height: 1em; }
.hint.bad { color: var(--c-red); } .hint.ok { color: var(--c-ok); }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; cursor: pointer; font-size: var(--fs-7); color: var(--c-text-2); }
.check input { position: absolute; opacity: 0; }
.check span { flex: none; width: 22px; height: 22px; border: var(--border-strong); border-radius: 6px; display: grid; place-items: center; transition: all .2s; margin-top: 1px; background: var(--c-bg); }
.check input:checked + span { background: var(--c-text); border-color: var(--c-text); }
.check input:checked + span::after { content: "✓"; color: #fff; font-size: var(--fs-8); font-weight: var(--w-medium); }
.check input:focus-visible + span { outline: 2px solid var(--c-text); outline-offset: 2px; }
.wstep__q { font: var(--w-text) var(--fs-8) var(--font); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-gray); margin: 22px 0 10px; }
.wstep__q:first-of-type { margin-top: 0; }
.wstep__intro { color: var(--c-text-2); margin: -10px 0 20px; }
.cards { display: flex; gap: 12px; flex-wrap: wrap; }
.ocard { flex: 1; min-width: 170px; cursor: pointer; }
.ocard input { position: absolute; opacity: 0; }
.ocard > span { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border: var(--border); border-radius: var(--radius-sm); transition: all .25s; height: 100%; background: var(--c-bg); }
.ocard b { font: var(--w-title) var(--fs-5) var(--font); }
.ocard small { color: var(--c-gray); }
.ocard--sm b { font-size: var(--fs-6); font-weight: var(--w-medium); }
.ocard input:checked + span { border-color: var(--c-text); }
.ocard input:focus-visible + span { outline: 2px solid var(--c-text); outline-offset: 2px; }
.docs { display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border: var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all .25s; }
.doc input[type=checkbox] { position: absolute; opacity: 0; }
.doc__box { width: 26px; height: 26px; border-radius: 50%; border: var(--border-strong); display: grid; place-items: center; transition: all .25s; }
.doc input[type=checkbox]:checked ~ .doc__box { background: var(--c-ok); border-color: var(--c-ok); }
.doc input[type=checkbox]:checked ~ .doc__box::after { content: "✓"; color: #fff; font-weight: var(--w-medium); font-size: var(--fs-8); }
.doc:has(input[type=checkbox]:checked) { border-color: var(--c-ok); }
.doc b { font-family: var(--font); font-weight: var(--w-medium); display: block; }
.doc small { color: var(--c-gray); }
.doc__file { position: relative; font-size: var(--fs-8); font-weight: var(--w-medium); color: var(--c-text); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.doc__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.doc__file em { font-style: normal; }
.docmeter { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: var(--fs-8); color: var(--c-gray); }
.docmeter__bar { flex: 1; height: 6px; background: var(--c-line-soft); border-radius: 6px; overflow: hidden; }
.docmeter__bar i { display: block; height: 100%; width: 0; background: var(--c-red); transition: width .5s var(--ease); }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; background: var(--c-bg); border: var(--border); border-radius: var(--radius-sm); padding: 22px; }
.summary div { display: flex; flex-direction: column; border-bottom: var(--border-soft); padding-bottom: 8px; }
.summary dt, .summary .k { font-size: var(--fs-9); color: var(--c-gray); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.summary .v { font-weight: var(--w-medium); }
.note { font-size: var(--fs-8); color: var(--c-gray); margin: 18px 0 0; }
.wizard__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 34px; padding-top: 24px; border-top: var(--border); }
.wizard__err { color: var(--c-red); font-size: var(--fs-8); margin: 0; text-align: center; flex: 1; }
.done { text-align: center; padding: 30px 0; }
.done__power { width: 90px; margin: 0 auto 20px; }
.done h3 { font-size: var(--fs-4); }
.done p { color: var(--c-text-2); max-width: 520px; margin: 14px auto 0; }
.done__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* Matriculación en tres partes: 1) el camino (entrada + carretera + trámites), 2) qué incluye + alta online, 3) dudas */
.camino { padding-bottom: clamp(10px, 2vw, 30px); }
.camino + .process { padding-top: clamp(30px, 5vw, 60px); }   /* el desplegable de trámites va con su título: no es otra sección */
.camino .section__head { margin-bottom: 0; }
.alta { list-style: none; counter-reset: alta; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 0 28px; padding: 0; }
.alta li { counter-increment: alta; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 2px solid var(--c-line); color: var(--c-text-2); font-size: var(--fs-7); }
.alta li::before { content: counter(alta, decimal-leading-zero); font: var(--w-text) var(--fs-9) var(--font); letter-spacing: var(--ls-caps); color: var(--c-gray); }
.alta b { font-weight: var(--w-medium); color: var(--c-text); font-size: var(--fs-7); }
.wstep__intro a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .alta { grid-template-columns: 1fr; gap: 14px; } }

/* Domicilio desglosado como en el Mod. 04 */
.grid-addr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 6px; }
.grid-addr .field--wide { grid-column: span 2; }
@media (max-width: 640px) { .grid-addr { grid-template-columns: 1fr 1fr; } .grid-addr .field--wide { grid-column: span 2; } }

/* Cajas de información (clases de teórico, precio de la matrícula) */
.decl { background: var(--c-bg); border: var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: var(--fs-8); color: var(--c-text-2); margin-bottom: 18px; }
.cards + .decl, .summary + .decl { margin-top: 18px; }
.summary__nota { margin: 0 0 10px; font-size: var(--fs-8); color: var(--c-gray); }
.decl p { margin: 0 0 8px; }
.decl p:last-child { margin-bottom: 0; }
.decl .decl__t { font: var(--w-text) var(--fs-9) var(--font); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-gray); }
.decl .decl__n { margin: 0; color: var(--c-gray); }
.sig { margin: 10px 0 6px; }
.sig__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-family: var(--font); }
.sig__clear { border: 0; background: none; color: var(--c-text); font: var(--w-medium) var(--fs-8) var(--font); cursor: pointer; padding: 4px 8px; }
.sig__pad { display: block; width: 100%; height: 190px; border-radius: var(--radius-sm); border: 1px dashed var(--c-line-strong); background: var(--c-bg) linear-gradient(transparent calc(100% - 46px), var(--c-line) calc(100% - 46px), var(--c-line) calc(100% - 45px), transparent calc(100% - 45px)); touch-action: none; cursor: crosshair; }
.sig__pad.is-signed { border-style: solid; border-color: var(--c-ok); }
.sig__pad.is-bad { border-color: var(--c-red); }
.sig__hint { color: var(--c-gray); font-size: var(--fs-9); }
.tutor { margin-top: 18px; padding-top: 6px; border-top: var(--border); }

/* ---------- Quiz ---------- */
.quiz__box { max-width: 760px; background: var(--c-bg); color: var(--c-text); border: var(--border); border-radius: var(--radius); padding: clamp(24px, 5vw, 50px); }
.quiz__top { display: flex; align-items: center; gap: 16px; font: var(--w-text) var(--fs-8) var(--font); color: var(--c-gray); }
.quiz__bar { flex: 1; height: 3px; background: var(--c-line-soft); border-radius: 3px; overflow: hidden; }
.quiz__bar i { display: block; height: 100%; background: var(--c-red); width: 20%; transition: width .5s var(--ease); }
.quiz__box h3 { font-size: var(--fs-5); margin: 26px 0 22px; line-height: 1.3; }
.quiz__opts { display: grid; gap: 10px; }
.qopt { text-align: left; font: var(--w-text) var(--fs-7) var(--font); color: var(--c-text); background: var(--c-bg); border: var(--border); border-radius: var(--radius-sm); padding: 16px 18px; cursor: pointer; transition: all .25s; }
.qopt:hover:not(:disabled) { border-color: var(--c-text); transform: translateX(4px); }
.qopt:disabled { cursor: default; }
.qopt.is-right { border-color: var(--c-ok); color: var(--c-ok); font-weight: var(--w-medium); }
.qopt.is-wrong { border-color: var(--c-red); color: var(--c-red); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.quiz__exp { color: var(--c-text-2); min-height: 1.5em; margin: 18px 0; font-size: var(--fs-7); }
.quiz__result { text-align: center; }
.quiz__result .big { font: var(--w-title) var(--fs-2) var(--font); letter-spacing: var(--ls-title); color: var(--c-text); line-height: 1; }
.quiz__result p { color: var(--c-text-2); }
.quiz__result h3 { font-size: var(--fs-6); }
.quiz__result__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
/* «Pregunta de examen» (versión 3.00): imagen, veredicto, enlace a la explicación completa y resultado con % de fallos */
.quiz__img { margin: 22px 0 0; border: var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--c-bg); }
.quiz__img img { display: block; width: 100%; height: auto; }
.quiz__exp.is-right strong { color: var(--c-ok); font-weight: var(--w-medium); }
.quiz__exp.is-wrong strong { color: var(--c-red); font-weight: var(--w-medium); }
.quiz__more { margin: -6px 0 18px; font-size: var(--fs-8); }
.quiz__more a, .quiz__all a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
.quiz__all { max-width: 760px; margin: 18px 0 0; font-size: var(--fs-8); color: var(--c-text-2); }
.quiz__fallos { font: var(--w-medium) var(--fs-8) var(--font); color: var(--c-gray); margin: 12px 0 0; }

/* Páginas /pregunta-de-examen/ (versión 3.00): mismo armazón que las páginas legales */
.pq { max-width: 820px; margin: 0 auto; padding: 130px 16px 80px; }
.pq h1 { font-size: var(--fs-3); line-height: 1.08; font-weight: var(--w-title); letter-spacing: var(--ls-title); margin: 0 0 30px; }
.pq h2 { font-size: var(--fs-5); margin: 44px 0 12px; }
.pq p, .pq li { color: var(--c-text-2); font-size: var(--fs-7); line-height: 1.65; }
.pq a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
.pq .btn { text-decoration: none; }
.pq .btn--red { color: #fff; }
.pq .quiz__box { max-width: none; }
.pq .quiz__box h3 { margin-top: 0; }
.pq__fuente { color: var(--c-gray); font-size: var(--fs-8); margin-top: 30px; }
.pq__cta { border: var(--border-strong); border-radius: var(--radius); padding: 24px; margin: 50px 0 0; }
.pq__cta h2 { margin-top: 0; }
.pq__cta__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pq__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pq__lista a { display: block; border: var(--border); border-radius: var(--radius-sm); padding: 18px 20px; text-decoration: none; transition: border-color .25s; }
.pq__lista a:hover { border-color: var(--c-text); }
.pq__lista .pq__tema { display: block; font: var(--w-medium) var(--fs-9) var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-tag); margin-bottom: 6px; }
.pq__lista .pq__titulo { display: block; color: var(--c-text); font-size: var(--fs-7); }

/* ---------- Contacto ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: stretch; }
.open { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 14px; font: var(--w-text) var(--fs-8) var(--font); color: var(--c-text-2); padding: 7px 16px; border-radius: var(--radius-pill); background: var(--c-bg); border: var(--border); }
.open i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gray-2); }
.open.is-open i { background: var(--c-ok); animation: pulse 1.8s infinite; }
.open.is-closed i { background: var(--c-red); }
@keyframes pulse { 50% { opacity: .35; } }
.hours { border-collapse: collapse; width: 100%; max-width: 460px; font-size: var(--fs-7); }
.hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: var(--border); }
.hours th { font-weight: var(--w-text); color: var(--c-gray); padding-right: 16px; }
.contact__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (max-width: 640px) { .contact__btns .btn { flex: 1 1 100%; } }   /* en el móvil, los tres botones del mismo ancho */
.contact h2 { font-size: var(--fs-3); }   /* ídem: «Calle Londres, s/n.» en una línea */
.contact__map { border-radius: var(--radius); overflow: hidden; min-height: 420px; background: var(--c-bg); border: var(--border); }
.contact__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(.6) contrast(1.05); }

/* ---------- Footer ---------- */
.footer { background: var(--c-bg); color: var(--c-text-2); border-top: var(--border); text-align: center; padding: var(--sec-y) 16px 50px; font-size: var(--fs-8); }
.footer p { margin: 8px 0; }
.logo-svg--foot { width: 90px; color: var(--c-text); margin: 0 auto 20px; }
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 28px 0 26px; }
.social a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: var(--radius-pill); border: var(--border); color: var(--c-text); text-decoration: none; font: var(--w-medium) var(--fs-8) var(--font); transition: border-color .3s, transform .3s var(--ease); }
.social a:hover { border-color: var(--c-text); transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }
.footer__small { font-size: var(--fs-9); color: var(--c-gray); }
.footer__ver { font-size: var(--fs-9); color: var(--c-gray); margin-top: 18px !important; letter-spacing: var(--ls-caps); }   /* versión de la web, la pone poner_version.py */
/* Colaboradores (pie, entre las redes y los textos legales): tamaños calculados para que todos pesen lo mismo a la vista */
.partners { max-width: 1152px; width: calc(100% - 2 * clamp(0px, 5vw - 16px, 48px)); margin: 0 auto 26px; padding: 30px 0 34px; border-top: var(--border); border-bottom: var(--border); }
.partners__eyebrow { text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-9); color: var(--c-gray); margin: 0 0 26px !important; }
.partners__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px clamp(28px, 3.2vw, 44px); }
.partners__list li { display: flex; align-items: center; justify-content: center; }
.partners__logo { display: block; width: auto; height: var(--h); }
.partners__logo--cnae { --h: 101px; }
.partners__logo--ersc { --h: 116px; }
.partners__logo--sexpe-junta { --h: 62px; }
.partners__logo--carnejoven { --h: 59px; }
.partners__logo--ponlefreno { --h: 89px; }
.partners__list--copia { display: none; }
@media (max-width: 1100px) {
  /* En el móvil y la tableta, la misma fila se desliza sola (como las reseñas); la copia hace que el bucle no tenga corte */
  .partners__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .partners__track { display: flex; width: max-content; animation: partnersMove 26s linear infinite; will-change: transform; }
  .partners__list, .partners__list--copia { display: flex; flex-wrap: nowrap; gap: 0 34px; padding-right: 34px; }
  .partners__logo { height: calc(var(--h) * .7); }
}
@keyframes partnersMove { to { transform: translateX(-50%); } }
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .partners__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .partners__track { animation: none; }
  .partners__list--copia { display: none; }
}

/* ---------- Cookies (aviso y huecos bloqueados) ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(30px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.consent.is-in { opacity: 1; transform: none; }
.consent__box { pointer-events: auto; width: min(760px, 100%); background: var(--c-bg); color: var(--c-text); border: var(--border-strong); border-radius: var(--radius); padding: 20px 22px; }
.consent__title { font: var(--w-medium) var(--fs-7) var(--font); margin: 0 0 6px; }
.consent__text { margin: 0; font-size: var(--fs-8); color: var(--c-text-2); }
.consent__text a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
.consent__opts { display: grid; gap: 8px; margin-top: 14px; }
.consent__opts[hidden], .consent__btn[hidden] { display: none; }
.consent__opt { display: flex; gap: 10px; align-items: center; font-size: var(--fs-8); color: var(--c-text-2); }
.consent__opt input { width: 18px; height: 18px; accent-color: var(--c-text); }
.consent__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.consent__btn { font: var(--w-medium) var(--fs-8) var(--font); padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid var(--c-red); background: var(--c-red); color: #fff; cursor: pointer; transition: background .3s, border-color .3s; }
.consent__btn:hover { background: var(--c-red-hover); border-color: var(--c-red-hover); }
.consent__btn--ghost { background: var(--c-bg); border-color: var(--c-line-strong); color: var(--c-text); }
.consent__btn--ghost:hover { background: var(--c-bg); border-color: var(--c-text); }
.consent-ph { height: 100%; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--c-gray); font-size: var(--fs-8); background: var(--c-bg); }
.consent-ph[hidden] { display: none; }
.consent-ph p { margin: 0; max-width: 300px; }
.consent-ph a { color: var(--c-text-2); font-size: var(--fs-8); }
.footer__legal a { color: var(--c-text-2); text-decoration: none; white-space: nowrap; }
.footer__legal a:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Protección de datos en la matrícula ---------- */
.rgpd-box { margin-top: 20px; background: var(--c-bg); border: var(--border); border-radius: var(--radius-sm); padding: 16px 18px; font-size: var(--fs-8); color: var(--c-text-2); }
.rgpd-box__title { margin: 0 0 8px; font: var(--w-medium) var(--fs-8) var(--font); color: var(--c-text); }
.rgpd-box dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; margin: 0; }
.rgpd-box dt { font-weight: var(--w-medium); color: var(--c-text); }
.rgpd-box dd { margin: 0; }
.rgpd-box > p:not(.rgpd-box__title) { margin: 0; line-height: 1.6; }
.rgpd-box b { font-weight: var(--w-medium); color: var(--c-text); }
.rgpd-box a, .check a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .rgpd-box dl { grid-template-columns: 1fr; gap: 2px; } .rgpd-box dd { margin-bottom: 6px; } }

/* Datos pendientes de rellenar antes de publicar (los rellena la gestoría) */
.todo { background: #fff3a8; color: #6b4d00; padding: 0 4px; border-radius: 4px; font-weight: var(--w-medium); }
.todo--bloque { display: block; padding: 14px 18px; margin: 12px 0 18px; border-radius: var(--radius-sm); font-weight: var(--w-text); }   /* párrafo provisional para la gestoría (2.94) */
.todo--bloque p { margin: 0 0 8px; color: inherit; }
.todo--bloque p:last-child { margin-bottom: 0; }

/* ---------- Páginas legales ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 130px 16px 80px; }
.legal h1 { font-size: var(--fs-3); line-height: 1.08; font-weight: var(--w-title); letter-spacing: var(--ls-title); }
.legal .legal__date { color: var(--c-gray); font-size: var(--fs-8); margin: 14px 0 40px; }
.legal h2 { font-size: var(--fs-5); margin: 44px 0 12px; }
.legal h3 { font-size: var(--fs-6); margin: 26px 0 8px; }
.legal p, .legal li { color: var(--c-text-2); font-size: var(--fs-7); line-height: 1.65; }
.legal a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-8); margin: 14px 0; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: var(--border); vertical-align: top; }
@media (max-width: 420px) { .legal th, .legal td { padding: 8px 6px; font-size: var(--fs-8); } }
.legal th { background: var(--c-bg); font-family: var(--font); font-weight: var(--w-medium); color: var(--c-text); border-bottom: var(--border-strong); }
.legal__toc { background: var(--c-bg); border: var(--border); border-radius: var(--radius); padding: 18px 22px; }
.legal__toc ol { margin: 0; padding-left: 20px; }
.legal__back { display: inline-block; margin-top: 50px; }
.legal__caja { border: var(--border-strong); border-radius: var(--radius-sm); padding: 18px 22px; margin: 14px 0; }
.legal__caja p { margin: 0 0 10px; }
.legal__caja p:last-child { margin: 0; }
.legal ol li { margin-bottom: 6px; }
.legal a.btn { text-decoration: none; }
.legal a.btn--red { color: #fff; }
.nav--legal .nav__links { display: none; }

/* ---------- Modo compacto (archivo para la app de Claude en el móvil) ----------
   Sin secciones "pegajosas" ni alturas en vh: todo en flujo normal. */
html.compact .hero { height: auto; }
html.compact .hero__pin { position: relative; height: auto; min-height: 680px; padding: 110px 16px 70px; }
html.compact .hero__scroll { display: none; }
html.compact .hero__glow { width: 700px; height: 700px; }
html.compact .journey { height: auto; }
html.compact .journey__pin { position: relative; height: 600px; }
html.compact .journey__road { height: 220px; min-height: 0; }
html.compact .journey__stages { top: 60px; }
html.compact .journey__car { width: min(78%, 520px); bottom: 16%; }
html.compact .history { height: auto !important; }
html.compact .history__pin { position: relative; height: auto; padding: 90px 0 70px; flex-direction: column; align-items: stretch; gap: 30px; }
html.compact .history__intro { width: auto; padding: 0 16px; }
html.compact .history__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 16px 14px; }
html.compact .hcard { scroll-snap-align: start; }
html.compact .fleet { height: auto; }
html.compact .fleet__pin { position: relative; height: auto; padding: 80px 16px 60px; }
html.compact .fleet__feats, html.compact .fleet__text .lead { display: flex; }
html.compact .fleet__text .lead { display: block; }
html.compact .fleet__feats { display: grid; }

.link-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; display: flex; flex-direction: column; gap: 4px; background: var(--c-bg); color: var(--c-text); border: var(--border-strong); border-radius: var(--radius); padding: 14px 18px; font-size: var(--fs-8); word-break: break-all; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s; }
.link-toast.is-in { opacity: 1; transform: none; }
.link-toast b { font-family: var(--font); font-weight: var(--w-medium); font-size: var(--fs-7); }
.link-toast small { color: var(--c-gray); }

/* Mapa y calendario sin Google incrustado (archivo para la app) */
.map-static { position: relative; display: block; height: 100%; min-height: 380px; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--c-text); }
.map-static svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-static__card { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; background: var(--c-bg); border: var(--border); border-radius: var(--radius-sm); padding: 16px 18px; font-size: var(--fs-8); color: var(--c-text-2); }
.map-static__card b { font-family: var(--font); font-weight: var(--w-medium); font-size: var(--fs-7); color: var(--c-text); }
.map-static__card em { font-style: normal; font-weight: var(--w-medium); color: var(--c-text); margin-top: 4px; }
.cal-static { margin-top: 8px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; justify-content: center; background: var(--c-bg); border-radius: var(--radius-sm); padding: 24px; min-height: 220px; }
.cal-static__icon { font-size: var(--fs-4); line-height: 1; }
.cal-static p { margin: 0; }

/* Aviso breve que aparece abajo (enlaces legales en la demo, avisos de la web) */
.toast-note { position: fixed; left: 16px; right: 16px; bottom: 80px; margin: auto; max-width: 460px; z-index: 99; background: var(--c-bg); color: var(--c-text); border: var(--border-strong); padding: 14px 18px; border-radius: var(--radius); font: var(--w-text) 14px var(--font); text-align: center; }

/* ---------- Fluidez al desplazarse ----------
   Lo que se mueve con el dedo va en su propia capa, y en pantallas táctiles se quitan
   los filtros sobre imágenes que se mueven (se recalculaban en cada fotograma). */
.hero__power, .hero__glow, .journey__car, .journey__city, .road__lines, .road__signs, .fcar img { will-change: transform; }
@media (hover: none) {
  .fcar img, .tcard__person { filter: none; }
  .fcar--soon img { filter: grayscale(1); }
  .fcar:not(.is-active) { filter: none; }
  .g img { filter: none; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(50px); }
.no-js .reveal, .reduced .reveal { opacity: 1; transform: none; }
.no-js .hero__title .line > span, .reduced .hero__title .line > span { transform: none; }   /* si no cargan las animaciones, el título se ve igual */

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav__links { position: fixed; top: 70px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--c-bg); border: var(--border); border-radius: var(--radius); padding: 10px; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: all .3s var(--ease); color: var(--c-text); }
  .nav__links.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .nav__links { align-items: stretch; }
  .nav__links a { padding: 14px 16px; font-size: var(--fs-7); }
  /* En el móvil, «La autoescuela» es un título y sus tres apartados van debajo, siempre a la vista */
  .nav__group { display: block; }
  .nav__grouptitle, .nav__grouptitle.is-current { display: block; width: 100%; text-align: left; padding: 14px 16px 6px; font-size: var(--fs-7); font-weight: var(--w-text); color: var(--c-gray); pointer-events: none; }
  .nav__grouptitle svg { display: none; }
  .nav__sub, .nav__group.is-open .nav__sub { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; transition: none; padding: 0 0 4px 16px; border: 0; border-radius: 0; }
  .nav__sub::before { display: none; }
  .nav__links .nav__sub a { padding: 10px 16px; border-radius: 0; border-left: var(--border); }
  .nav__burger { display: block; }
  .nav__actions { margin-left: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat--big { grid-column: span 2; }
  .fleet__pin { grid-template-columns: 1fr; gap: 10px; align-content: center; padding-top: 90px; }
  .fleet__stage { min-height: 220px; order: -1; }
  .fleet__feats { display: none; }
  .fleet__text .lead { display: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .tile { grid-column: span 1; }
  .bento .tile--f { grid-column: span 2; }
  .contact__grid { grid-template-columns: 1fr; }
  .sgrid { grid-template-columns: 1fr 1fr; }
  .bubble { width: 290px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
}
@media (max-width: 640px) {
  body { font-size: var(--fs-7); }
  .stats { grid-template-columns: 1fr; }
  .stats .stat--big { grid-column: span 1; }
  .sgrid { grid-template-columns: 1fr; }
  .scard--cal { grid-column: span 1; }
  .grid2, .summary { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento .tile, .bento .tile--f { grid-column: span 1; }
  .gallery { grid-auto-rows: 160px; gap: 10px; }
  .g--wide { grid-column: span 2; }
  .history__pin { flex-direction: column; justify-content: center; align-items: flex-start; gap: 30px; }
  .history__intro { width: auto; }
  .history__intro h2 br { display: none; }
  .history__track { padding-left: 16px; }
  .hcard { min-height: 300px; width: 78vw; }
  .chart__plot { height: 220px; }
  .bar b { font-size: var(--fs-9); }
  .steps { padding-left: 58px; }
  .step__n { left: -58px; width: 42px; height: 42px; }
  .steps__rail { left: 20px; }
  .doc { grid-template-columns: auto 1fr; }
  .doc__file { grid-column: 2; }
  .wizard__actions { flex-wrap: wrap; }
  .wizard__err { order: -1; flex-basis: 100%; }
  .nav .btn--sm { padding: 9px 14px; font-size: var(--fs-8); }
  .journey__car { left: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .pulsa-on .logo-ring, .pulsa-on .logo-stem { animation: none !important; }
}
/* Hoja de impresión del resumen de la matrícula: solo existe al imprimir */
.hoja { display: none; }
@media print {
  @page { size: A4; margin: 16mm; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  body > *:not(.hoja) { display: none !important; }
  .hoja { display: block; color: #1d1d1f; font-family: Inter, system-ui, sans-serif; font-size: 11pt; line-height: 1.45; }
  .hoja__cab { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #ddd; }
  .hoja__logo { width: 64px; height: auto; }
  .hoja__cab b { display: block; font-weight: 600; font-size: 13pt; }
  .hoja__cab span { font-size: 9pt; color: #555; }
  .hoja h1 { font-size: 18pt; font-weight: 500; margin: 22px 0 4px; letter-spacing: -.01em; }
  .hoja__ref { margin: 0 0 18px; color: #555; }
  .hoja__ref b { color: #1d1d1f; }
  .hoja dl { display: grid; grid-template-columns: 42mm 1fr; margin: 0; border-top: 1px solid #eee; }
  .hoja dt, .hoja dd { margin: 0; padding: 7px 0; border-bottom: 1px solid #eee; }
  .hoja dt { color: #555; }
  .hoja dd { font-weight: 500; }
  .hoja__estado { margin: 18px 0 6px; font-weight: 600; }
  .hoja__nota { margin: 0; font-size: 9.5pt; color: #555; }
}

/* Contactos de respaldo (adaptado a la app, 14 de octubre de 2026) */
.resp { margin-top: 10px; padding-top: 6px; }
.resp + .resp { margin-top: 18px; border-top: 1px dashed var(--c-line); padding-top: 18px; }

/* Formulario de información (modo «info») */
.infoform .wstep__intro { margin-bottom: 18px; }
.infoform .done { margin-top: 24px; }

/* El atributo hidden siempre oculta (formularios que cambian según el modo de la web) */
[hidden] { display: none !important; }
#tutorBox { margin-top: 28px; }
#tutorBox .wstep__intro { margin: 4px 0 14px; }
.check__t { font-style: normal; flex: 1; }
/* «Ven a vernos»: mapa dibujado (sin cookies) con «Cómo llegar» y «Ver mapa aquí» (carga Google Maps con el aviso de cookies) */
.mapa { position: relative; height: 100%; min-height: 420px; }
.mapa__dib { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__onda { transform-box: fill-box; transform-origin: center; animation: onda 2.4s ease-out infinite; }
@keyframes onda { from { transform: scale(.6); opacity: .35; } to { transform: scale(3.2); opacity: 0; } }
.mapa__card { position: absolute; left: 16px; bottom: 16px; right: 16px; max-width: 360px; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--c-bg); border: var(--border); border-radius: var(--radius-sm); }
.mapa__card b { font-weight: var(--w-medium); font-size: var(--fs-7); }
.mapa__card span { color: var(--c-text-2); font-size: var(--fs-8); }
.mapa__card small { color: var(--c-gray); font-size: var(--fs-8); }
.mapa__btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mapa__aviso { margin: 10px 0 0; font-size: var(--fs-9); color: var(--c-gray); }
.mapa__aviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1000px) { .mapa, .contact__map { min-height: 560px; } }
@media (max-width: 760px) { .mapa, .contact__map { min-height: 530px; } .mapa__card { max-width: none; } }

/* Preguntas frecuentes (versión 2.76), dentro de «¿Aún tienes dudas?» */
.faq { max-width: 980px; margin-top: clamp(40px, 6vw, 70px); }
.faq__title { font-size: var(--fs-4); line-height: 1.12; margin-bottom: 22px; }
.faq__list { border: var(--border); border-radius: var(--radius); background: var(--c-bg); }
.faq__item + .faq__item { border-top: var(--border); }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; font-size: var(--fs-7); font-weight: var(--w-medium); color: var(--c-text); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover .dgt__icon { border-color: var(--c-text); }
.faq__q:focus-visible { outline: 2px solid var(--c-text); outline-offset: -2px; border-radius: var(--radius-sm); }
.faq__item[open] .dgt__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { margin: -4px 24px 20px; color: var(--c-text-2); font-size: var(--fs-7); max-width: 760px; }
@media (max-width: 640px) { .faq__q { padding: 16px 18px; } .faq__a { margin: -4px 18px 18px; } }

/* ============ Última hora (franja en movimiento) y listado de noticias · versión 2.78 ============ */
.ticker { display: flex; align-items: center; gap: 16px; border-top: var(--border); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 10px clamp(16px, 5vw, 64px) calc(10px + env(safe-area-inset-bottom)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; text-align: left; }   /* fija abajo en toda la página (2.83) */
body.con-ticker { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }   /* para que la franja no tape el final de la página */
body.con-ticker .hero__scroll { bottom: 72px; }
body.con-ticker .hero__pin { padding-bottom: 96px; }
@media (max-height: 1100px) { body.con-ticker .hero__scroll { display: none; } }   /* en pantallas bajas, la franja ya invita a bajar: sin «Desliza» */
.ticker__x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; cursor: pointer; position: relative; color: var(--c-gray); }
.ticker__x:hover { color: var(--c-text); }
.ticker__x i::before, .ticker__x i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.ticker__x i::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 640px) { .ticker__all { padding: 6px 12px; } .ticker__x { width: 26px; } }
.ticker__label { flex: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-9); font-weight: var(--w-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-red); }
.ticker__label i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); animation: tickerDot 1.6s ease-in-out infinite; }
@keyframes tickerDot { 50% { opacity: .25; } }
.ticker__viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: flex; width: max-content; animation: tickerMove var(--dur, 40s) linear infinite; will-change: transform; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track, .ticker.is-off .ticker__track { animation-play-state: paused; }
.ticker__run { display: flex; align-items: center; flex: none; }
@keyframes tickerMove { to { transform: translateX(-50%); } }
.ticker__item { display: inline-flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 4px 0; cursor: pointer; font: var(--w-text) var(--fs-8) var(--font); color: var(--c-text); white-space: nowrap; }
a.ticker__item { text-decoration: none; }
.ticker__item b { font-weight: var(--w-medium); color: var(--c-gray); }
.ticker__item:hover, .ticker__item:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: none; }
.ticker__sep { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--c-line-strong); margin: 0 22px; }
.ticker__all { flex: none; border: var(--border-strong); background: var(--c-bg); border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; font: var(--w-medium) var(--fs-9) var(--font); color: var(--c-text); transition: border-color .2s; }
.ticker__all:hover { border-color: var(--c-text); }
@media (max-width: 640px) { .ticker { gap: 10px; } .ticker__label { font-size: 0; gap: 0; } .ticker__label i { width: 10px; height: 10px; } }   /* en el móvil, solo el punto rojo */
@media (prefers-reduced-motion: reduce) { .ticker__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .ticker__track { animation: none !important; } .ticker__run[aria-hidden] { display: none; } .ticker__label i { animation: none !important; } }

.news { width: min(760px, calc(100% - 32px)); max-height: min(84vh, 900px); padding: 0; border: var(--border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); overflow: auto; overscroll-behavior: contain; }
.news::backdrop { background: rgba(17, 17, 17, .35); }
.news__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; background: var(--c-bg); border-bottom: var(--border); }
.news__head .eyebrow { margin-bottom: 6px; }
.news__title { font-size: var(--fs-5); line-height: 1.15; }
.news__close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: var(--border-strong); background: var(--c-bg); cursor: pointer; position: relative; }
.news__close:hover { border-color: var(--c-text); }
.news__close i::before, .news__close i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--c-text); transform: translate(-50%, -50%) rotate(45deg); }
.news__close i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.news__list { margin: 16px 24px 0; }
.news__meta { display: block; font-size: var(--fs-9); font-weight: var(--w-text); color: var(--c-gray); letter-spacing: var(--ls-caps); text-transform: uppercase; margin-bottom: 4px; }
.news__item .faq__a p { margin: 0 0 10px; }
.news__link { font-size: var(--fs-8); font-weight: var(--w-medium); color: var(--c-text); }
.news__nota { margin: 14px 24px 22px; font-size: var(--fs-9); color: var(--c-gray); }
html.news-open { overflow: hidden; }
@media (max-width: 640px) { .news__head { padding: 18px 18px 14px; } .news__list { margin: 14px 14px 0; } .news__nota { margin: 12px 18px 18px; } }
/* Noticias con resumen por temas (versión 2.79) */
.news__meta time { font-style: normal; }
.news__new { display: inline-block; font-style: normal; font-weight: var(--w-medium); color: var(--c-bg); background: var(--c-red); border-radius: var(--radius-pill); padding: 1px 8px; margin-right: 8px; letter-spacing: var(--ls-caps); }
.news__bloques { display: grid; gap: 14px; margin: 16px 0 6px; }
.news__bloque { border: var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
.news__btit { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.news__btit h4 { margin: 0; font-size: var(--fs-7); font-weight: var(--w-medium); color: var(--c-text); }
.news__ico { width: 44px; height: 44px; flex: none; }
.news__bloque ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.news__bloque li { color: var(--c-text-2); font-size: var(--fs-8); line-height: 1.5; }
.news__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0 !important; }
@media (min-width: 760px) { .news { width: min(900px, calc(100% - 32px)); } .news__bloques { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .news { width: calc(100% - 16px); max-height: 90vh; }
  .news__list { margin: 10px 8px 0; }
  .news__item .faq__a { margin: -4px 14px 16px; }
  .news__bloque { padding: 14px 14px; }
  .news__bloque ul { padding-left: 16px; }
  .news__ico { width: 40px; height: 40px; }
}

/* ============ Portada y pantalla de carga en oscuro, con el símbolo en neón (versión 2.84, prueba) ============
   Como la primera versión de la web: fondo casi negro y el encendido rojo «encendido» como un neón.
   El resto de la web sigue en blanco. Para volver a la portada blanca, basta con borrar este bloque. */
:root { --c-night: #0b0b0d; --c-neon: #ff2d3a; }
.loader { background: var(--c-night); }
.loader .pw-arc, .loader .pw-line { stroke: var(--c-neon); filter: drop-shadow(0 0 3px var(--c-neon)) drop-shadow(0 0 10px rgba(255, 45, 58, .75)) drop-shadow(0 0 26px rgba(227, 6, 19, .55)); }
.hero { background: var(--c-night); color: #fff; }
.hero__glow { background: radial-gradient(circle, rgba(227, 6, 19, .32), rgba(227, 6, 19, 0) 60%); }
.hero__kicker { color: rgba(255, 255, 255, .62); }
.hero__sub { color: rgba(255, 255, 255, .78); }
.hero__sub strong { color: #fff; }
.hero__scroll { color: rgba(255, 255, 255, .5); }
.hero__scroll span { background: linear-gradient(rgba(255, 255, 255, .6), transparent); }
.hero__title em { color: var(--c-neon); text-shadow: 0 0 18px rgba(255, 45, 58, .45); }
.hero__logo { color: #fff; }
/* Botón de encendido: apagado en gris; al encenderse, neón rojo con halo */
.hero__power { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .16); }
.hero__power .pw-arc, .hero__power .pw-line { stroke: #4a4a4f; }
.hero.is-on .hero__power { border-color: var(--c-neon); background: rgba(227, 6, 19, .07); box-shadow: 0 0 0 1px rgba(255, 45, 58, .35), 0 0 22px rgba(255, 45, 58, .55), inset 0 0 18px rgba(255, 45, 58, .25); animation: neonOn 1.2s steps(1, end) 1; }
.hero.is-on .hero__power .pw-arc, .hero.is-on .hero__power .pw-line { stroke: var(--c-neon); filter: drop-shadow(0 0 2px #ff6b74) drop-shadow(0 0 8px var(--c-neon)) drop-shadow(0 0 22px rgba(227, 6, 19, .7)); }
/* el «ON» de la portada, también en neón */
.hero .hero__logo .logo-ring, .hero .hero__logo .logo-stem { stroke: var(--c-neon); filter: drop-shadow(0 0 3px #ff6b74) drop-shadow(0 0 12px rgba(255, 45, 58, .8)); animation: none; }
.hero .pulsa-on.is-on .logo-ring, .hero .pulsa-on.is-on .logo-stem { filter: drop-shadow(0 0 4px #ff8a91) drop-shadow(0 0 22px var(--c-neon)) drop-shadow(0 0 40px rgba(227, 6, 19, .8)); }
.hero .pulsa-on:focus-visible { outline-color: #fff; }
/* parpadeo de tubo al encenderse */
@keyframes neonOn { 0% { opacity: .35; } 8% { opacity: 1; } 12% { opacity: .5; } 18% { opacity: 1; } 26% { opacity: .7; } 32%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero.is-on .hero__power { animation: none; } }
.hero__power svg, .loader__power { overflow: visible; }   /* que el halo del neón no se recorte en un cuadrado */

/* Los dos «ON» que son botón (portada y «Pulsa ON»), dentro de una cápsula fina para que se vea que se pueden pulsar
   (versión 2.87; en la 2.86 se probó un círculo). La cápsula es un dibujo aparte (::before) alrededor del logotipo.
   Versión 2.88: centrada sobre el dibujo real del logotipo (no sobre su caja), con el mismo aire por los cuatro lados;
   por eso sobresale algo más por la derecha y por abajo, donde el logotipo tiene menos «tinta» en los bordes. */
.pulsa-on { position: relative; }
.pulsa-on::before { content: ""; position: absolute; inset: -.198em -.331em -.328em -.201em; border: 1.5px solid var(--c-line-strong); border-radius: 999px; pointer-events: none; transition: border-color .3s, box-shadow .3s; }
.pulsa-on:hover::before, .pulsa-on:focus-visible::before, .pulsa-on.is-on::before { border-color: var(--c-logo); }
.pulsa-on:focus-visible { outline: none; }
#pulsaOn { margin: .2em .35em .32em .36em; }   /* sitio para la cápsula, sin mover la línea base del logotipo */
.hero__pulsa { margin: .24em auto .34em !important; }
.hero__pulsa::before { inset: -.096em -.327em -.304em -.199em; }   /* en la portada el dibujo empieza .1em más abajo dentro del botón */
@media (max-height: 920px) { .hero__power { width: 92px; padding: 16px; margin-bottom: 18px; } .hero__kicker { margin-bottom: 10px; } .hero__sub { margin-top: 18px; } .hero__title { font-size: min(clamp(3.2rem, 11vw, 9.5rem), 11vh); } }   /* portátiles de poca altura: que quepa todo */
@media (max-height: 740px) { .hero__power { width: 72px; padding: 12px; margin-bottom: 12px; } .hero__title { font-size: min(clamp(3.2rem, 11vw, 9.5rem), 10vh); } }   /* pantallas bajas: botón y título algo menores para que quepa la franja */
.hero .pulsa-on::before { border-color: rgba(255, 255, 255, .28); }
.hero .pulsa-on:hover::before, .hero .pulsa-on:focus-visible::before, .hero .pulsa-on.is-on::before { border-color: var(--c-neon); box-shadow: 0 0 14px rgba(255, 45, 58, .45), inset 0 0 10px rgba(255, 45, 58, .2); }


/* ===== Trabaja con nosotros (versión 2.89): ventana con el formulario y el currículum ===== */
.footer__jobs { margin: 26px 0 18px !important; }
.jobs__form { padding: 22px 24px 26px; }
.jobs__form .wstep__intro { margin: 0 0 18px; }
.jobs__puestos .ocard { min-width: 200px; }
.filebox { position: relative; margin-top: 16px; }
.filebox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filebox label { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed var(--c-line-strong); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s, background .2s; }
.filebox label:hover, .filebox input:focus-visible + label { border-color: var(--c-text); }
.filebox__ico { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--c-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.filebox__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filebox__t b { font-size: var(--fs-7); font-weight: var(--w-medium); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filebox__t small { font-size: var(--fs-9); color: var(--c-gray); }
.filebox.is-ok label { border-style: solid; border-color: var(--c-text); }
.filebox.is-bad label { border-color: var(--c-red); background: var(--c-alert-bg); }
.jobs__aviso { margin-top: 8px !important; }
.jobs .done { padding: 30px 0 10px; }
@media (max-width: 640px) { .jobs__form { padding: 18px 16px 20px; } .jobs .grid2 { grid-template-columns: 1fr; } .jobs__form .wizard__actions { flex-direction: column-reverse; align-items: stretch; } .jobs__form .wizard__actions > span { display: none; } }

/* Reseñas (versión 2.91): como vienen de Google, llevan su color para que se vean auténticas: estrellas amarillas y
   «Google» en azul en el título. Es la única excepción a «títulos solo en negro y rojo». */
.google { color: var(--c-google); }


/* ===== Instalaciones sin la foto de la clase (versión 2.95): 5 fotos del local ===== */
@media (min-width: 861px) {
  .gallery--local { grid-template-columns: 1.5fr repeat(4, 1fr); grid-auto-rows: clamp(170px, 17vw, 230px); }   /* la columna de las señales, algo más ancha: la foto vertical no se corta */
  .gallery--local .g--senales { grid-column: 1; grid-row: 1 / span 2; }
  .gallery--local .g--aula { grid-column: 2 / span 2; grid-row: 1; }
  .gallery--local .g--ventana { grid-column: 4 / span 2; grid-row: 1; }
  .gallery--local .g--mural { grid-column: 2 / span 2; grid-row: 2; }
  .gallery--local .g--pantalla { grid-column: 4 / span 2; grid-row: 2; }
}
@media (max-width: 860px) {
  .gallery--local .g--senales { grid-column: span 2; grid-row: span 2; }   /* en el móvil, a todo el ancho, sin hueco al lado */
  .gallery--local .g--senales img { object-position: 50% 62%; }
}

/* Vehículos (versión 2.96): app.js le pone márgenes negativos para igualar el aire con el resto de la web, así que
   su caja puede quedar por encima del final de «Instalaciones». Sin fondo propio (el de la página es el mismo blanco)
   y sin capturar el ratón fuera de su contenido, para no tapar ni bloquear nada de la sección de al lado. */
.fleet { background: transparent; pointer-events: none; }
.fleet__text, .fleet__stage { pointer-events: auto; }
@media (max-width: 860px) { .fleet__stage { margin-bottom: 18px; } }   /* (2.96) la etiqueta «T#1» no se pega a «VEHÍCULOS» en el móvil */

/* ============ Desplegables de «Pulsa ON» y «¿Aún tienes dudas?» (versión 3.06) ============
   La matrícula: barra roja de acción (el rojo, solo en botones de acción); las dudas: tarjeta blanca con borde,
   como las preguntas frecuentes. Al abrirse, el formulario sale debajo. */
.plegable { max-width: 980px; }
.plegable__sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px clamp(20px, 3vw, 32px); border-radius: var(--radius); transition: background .25s, border-color .25s, color .25s; }
.plegable__sum::-webkit-details-marker { display: none; }
.plegable__txt { display: flex; flex-direction: column; gap: 4px; }
.plegable__txt b { font-size: var(--fs-6); font-weight: var(--w-medium); }
.plegable__txt small { font-size: var(--fs-8); }
.plegable__sum:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
.plegable[open] > .plegable__sum .dgt__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.plegable[open] > .wizard, .plegable[open] > .faq__list { margin-top: 14px; animation: plegableIn .45s var(--ease) both; }
@keyframes plegableIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .plegable[open] > .wizard, .plegable[open] > .faq__list { animation: none; } }
/* Matrícula: barra roja */
.plegable--alta .plegable__sum { background: var(--c-red); border: 1px solid var(--c-red); color: #fff; }
.plegable--alta .plegable__sum:hover { background: var(--c-red-hover); border-color: var(--c-red-hover); }
.plegable--alta .plegable__txt small { color: rgba(255, 255, 255, .85); }
.plegable--alta .dgt__icon { border-color: rgba(255, 255, 255, .6); }
.plegable--alta .dgt__icon::before, .plegable--alta .dgt__icon::after { background: #fff; }
.plegable--alta .plegable__sum:hover .dgt__icon { border-color: #fff; }
/* Dudas: tarjeta blanca */
.plegable--info .plegable__sum { background: var(--c-bg); border: var(--border-strong); color: var(--c-text); }
.plegable--info .plegable__sum:hover { border-color: var(--c-text); }
.plegable--info .plegable__sum:hover .dgt__icon { border-color: var(--c-text); }
.plegable--info .plegable__txt small { color: var(--c-gray); }
.plegable--info + .faq { margin-top: clamp(40px, 6vw, 70px); }
@media (max-width: 640px) { .plegable__sum { padding: 18px; } }

/* ============ Botón «ON»: se enciende al verlo y se queda «en espera» (versión 3.10) ============
   «Pulsa ON» (matrícula): el logotipo está apagado (gris) hasta que aparece en pantalla; entonces parpadea como un
   interruptor, se queda en rojo con la cápsula roja y un halo que «respira» cada 3 s (luz de espera). Al pasar el
   ratón o pulsarlo, luz completa. Si sale de la pantalla se apaga y se vuelve a encender al volver.
   Portada: el «ON» del título se apaga y se enciende en neón a la vez que el botón de encendido de arriba
   (clase is-on de .hero, la misma que ya había), y luego queda en espera.
   El halo es una capa con la luz ya pintada (::after) a la que solo se le cambia la opacidad: no frena el móvil.
   Rojo y luz solo en el logotipo y su cápsula (excepción del libro de estilo para el logotipo y el encendido). */
:root { --c-logo-off: #C9C9C9; }
.pulsa-on .logo-ring, .pulsa-on .logo-stem { animation: none; }   /* sustituye al brillo suave de antes (pulsaOn) */
.pulsa-on::after { content: ""; position: absolute; inset: -.198em -.331em -.328em -.201em; border-radius: 999px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(227, 6, 19, .55), 0 0 22px 2px rgba(227, 6, 19, .35), inset 0 0 14px rgba(227, 6, 19, .12); }
.hero__pulsa::after { inset: -.096em -.327em -.304em -.199em; box-shadow: 0 0 0 1.5px rgba(255, 45, 58, .6), 0 0 26px 4px rgba(255, 45, 58, .4), inset 0 0 14px rgba(255, 45, 58, .2); }
/* «Pulsa ON» */
.pulsa-espera .logo-ring, .pulsa-espera .logo-stem { stroke: var(--c-logo-off); }
.pulsa-espera.encendido .logo-ring, .pulsa-espera.encendido .logo-stem { stroke: var(--c-logo); filter: drop-shadow(0 0 6px rgba(227, 6, 19, .35)); animation: enciendeOn 1.1s ease-out backwards; }
.pulsa-espera.encendido::before { border-color: var(--c-logo); }
.pulsa-on.encendido::after { animation: esperaOn 3s ease-in-out 1.1s infinite; }
.pulsa-on.encendido:hover::after, .pulsa-on.is-on::after { animation: none; opacity: 1; }
.pulsa-espera.encendido:hover .logo-ring, .pulsa-espera.encendido:hover .logo-stem, .pulsa-espera.is-on .logo-ring, .pulsa-espera.is-on .logo-stem { filter: drop-shadow(0 0 22px rgba(227, 6, 19, .75)); }
@keyframes enciendeOn {
  0% { stroke: var(--c-logo-off); filter: none; }
  8% { stroke: var(--c-logo); filter: drop-shadow(0 0 10px rgba(227, 6, 19, .8)); }
  14% { stroke: var(--c-logo-off); filter: none; }
  22% { stroke: var(--c-logo); filter: drop-shadow(0 0 14px rgba(227, 6, 19, .8)); }
  28% { stroke: #E88; filter: drop-shadow(0 0 4px rgba(227, 6, 19, .4)); }
  40% { stroke: var(--c-logo); filter: drop-shadow(0 0 26px rgba(227, 6, 19, .9)); }
  100% { stroke: var(--c-logo); filter: drop-shadow(0 0 6px rgba(227, 6, 19, .35)); } }
@keyframes esperaOn { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }
/* Portada oscura */
.hero .hero__logo .logo-ring, .hero .hero__logo .logo-stem { stroke: #4a4a4f; filter: none; transition: stroke .3s; }
.hero.is-on .hero__logo .logo-ring, .hero.is-on .hero__logo .logo-stem { stroke: var(--c-neon); filter: drop-shadow(0 0 3px #ff6b74) drop-shadow(0 0 12px rgba(255, 45, 58, .8)); animation: enciendeNeon 1.1s ease-out backwards; }
.hero.is-on .pulsa-on.is-on .logo-ring, .hero.is-on .pulsa-on.is-on .logo-stem, .hero.is-on .pulsa-on:hover .logo-ring, .hero.is-on .pulsa-on:hover .logo-stem { filter: drop-shadow(0 0 4px #ff8a91) drop-shadow(0 0 22px var(--c-neon)) drop-shadow(0 0 40px rgba(227, 6, 19, .8)); }
.hero.is-on .hero__pulsa::before { border-color: var(--c-neon); }
.hero.is-on .hero__pulsa::after { animation: esperaOn 3s ease-in-out 1.1s infinite; }
.hero.is-on .hero__pulsa:hover::after, .hero .hero__pulsa.is-on::after { animation: none; opacity: 1; }
@keyframes enciendeNeon {
  0% { stroke: #4a4a4f; filter: none; }
  8% { stroke: var(--c-neon); filter: drop-shadow(0 0 12px var(--c-neon)); }
  14% { stroke: #4a4a4f; filter: none; }
  22% { stroke: var(--c-neon); filter: drop-shadow(0 0 16px var(--c-neon)); }
  30% { stroke: #a33; filter: none; }
  42% { stroke: var(--c-neon); filter: drop-shadow(0 0 3px #ff6b74) drop-shadow(0 0 30px var(--c-neon)); }
  100% { stroke: var(--c-neon); filter: drop-shadow(0 0 3px #ff6b74) drop-shadow(0 0 12px rgba(255, 45, 58, .8)); } }
/* Quien pide menos movimiento: encendido y quieto, sin parpadeo ni respiración */
@media (prefers-reduced-motion: reduce) {
  .pulsa-on .logo-ring, .pulsa-on .logo-stem, .pulsa-on::after { animation: none !important; }
  .pulsa-on.encendido::after, .hero.is-on .hero__pulsa::after { opacity: .6; }
}

/* ===================== ASISTENTE DE DUDAS (versión 3.11, asistente.js) =====================
   Botón discreto abajo a la derecha, encima de la franja «Última hora». Sin sombras ni colores nuevos. */
.asist { --asist-bottom: calc(16px + env(safe-area-inset-bottom)); position: fixed; right: clamp(12px, 3vw, 28px); bottom: var(--asist-bottom); z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; font-family: var(--font); }
body.con-ticker .asist { --asist-bottom: calc(68px + env(safe-area-inset-bottom)); }
.asist__btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 5px; border: var(--border-strong); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--c-text); font: var(--w-medium) var(--fs-8) var(--font); cursor: pointer; opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility .3s, border-color .2s; }
/* Saray en redondo, con un «?» rojo que señala que es para dudas */
.asist__ava { position: relative; flex: none; width: 40px; height: 40px; }
.asist__ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: var(--border); background: var(--c-bg); }
.asist__ava i { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-red); color: #fff; border: 2px solid var(--c-bg); display: grid; place-items: center; font: var(--w-medium) var(--fs-9) / 1 var(--font); font-style: normal; }
.asist__ava--head { width: 44px; height: 44px; }
.asist__btn:hover, .asist__btn:focus-visible { border-color: var(--c-text); outline: none; }
.asist.is-visible .asist__btn { opacity: 1; transform: none; visibility: visible; }
.asist.is-open .asist__btn { border-color: var(--c-text); }
.asist__panel { pointer-events: auto; order: -1; width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - var(--asist-bottom) - 120px)); display: flex; flex-direction: column; background: var(--c-bg); border: var(--border-strong); border-radius: var(--radius); overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.asist.is-open .asist__panel { opacity: 1; transform: none; }
.asist__htxt { flex: 1; min-width: 0; }
.asist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: var(--border-soft); }
.asist__tit { margin: 0; font-size: var(--fs-6); font-weight: var(--w-title); letter-spacing: var(--ls-title); color: var(--c-text); outline: none; }
.asist__tit em { font-style: normal; color: var(--c-red); }
.asist__sub { margin: 4px 0 0; font-size: var(--fs-9); line-height: 1.45; color: var(--c-gray); }
.asist__x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; cursor: pointer; position: relative; color: var(--c-gray); }
.asist__x:hover, .asist__x:focus-visible { color: var(--c-text); outline: none; }
.asist__x i::before, .asist__x i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.asist__x i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.asist__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.asist__msg { max-width: 92%; font-size: var(--fs-8); line-height: 1.55; color: var(--c-text-2); }
.asist__msg p { margin: 0; }
.asist__msg p + p { margin-top: 6px; }
.asist__msg--on { align-self: flex-start; background: var(--c-bg); border: var(--border); border-radius: 4px var(--radius-sm) var(--radius-sm) var(--radius-sm); padding: 10px 12px; }
.asist__msg--yo { align-self: flex-end; background: var(--c-line-soft); color: var(--c-text); border-radius: var(--radius-sm) 4px var(--radius-sm) var(--radius-sm); padding: 8px 12px; }
.asist__msg--chips { max-width: 100%; }
.asist__lbl { margin: 2px 0 6px !important; font-size: var(--fs-9); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-tag); }
.asist__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.asist__chip { border: var(--border-strong); border-radius: var(--radius-pill); background: var(--c-bg); padding: 7px 12px; font: var(--w-text) var(--fs-8) var(--font); color: var(--c-text); cursor: pointer; text-align: left; transition: border-color .2s; }
.asist__chip:hover, .asist__chip:focus-visible { border-color: var(--c-text); outline: none; }
.asist__mas { margin-top: 8px; border: 0; background: none; padding: 2px 0; font: var(--w-medium) var(--fs-8) var(--font); color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.asist__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.asist__act { display: inline-flex; align-items: center; gap: 6px; border: var(--border-strong); border-radius: var(--radius-pill); background: var(--c-bg); padding: 6px 12px; font: var(--w-medium) var(--fs-9) var(--font); color: var(--c-text); text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s; }
.asist__act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.asist__act:hover, .asist__act:focus-visible { border-color: var(--c-text); outline: none; }
.asist__act--red { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.asist__act--red:hover, .asist__act--red:focus-visible { background: var(--c-red-hover); border-color: var(--c-red-hover); }
.asist__act--link { border-style: dashed; font-weight: var(--w-text); }
.asist__form { display: flex; gap: 8px; padding: 10px 12px 6px; border-top: var(--border-soft); }
.asist__form input { flex: 1; min-width: 0; height: 40px; border: var(--border-strong); border-radius: var(--radius-pill); padding: 0 14px; font: var(--w-text) var(--fs-7) var(--font); color: var(--c-text); background: var(--c-bg); }
.asist__form input:focus { outline: none; border-color: var(--c-text); }
.asist__send { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--c-text); color: #fff; cursor: pointer; display: grid; place-items: center; }
.asist__send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.asist__nota { margin: 0; padding: 2px 14px 12px; font-size: var(--fs-9); line-height: 1.4; color: var(--c-gray); }
@media (max-width: 640px) {
  .asist { right: 12px; left: 12px; align-items: flex-end; }
  .asist__btn { width: 52px; padding: 0; justify-content: center; }
  .asist__btxt { display: none; }
  .asist__ava:not(.asist__ava--head) { width: 42px; height: 42px; }
  .asist__panel { width: 100%; max-height: calc(100vh - var(--asist-bottom) - 130px); max-height: calc(100dvh - var(--asist-bottom) - 130px); }
}
@media (prefers-reduced-motion: reduce) { .asist__btn, .asist__panel { transition: none; } .asist__log { scroll-behavior: auto; } }
@media print { .asist { display: none !important; } }