/* 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 */

  /* 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);
  --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: clamp(90px, 14vw, 170px) 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: clamp(30px, 5vw, 60px); }

/* ---------- 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; }
.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); 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: clamp(80px, 12vw, 160px) clamp(16px, 5vw, 64px) clamp(20px, 4vw, 50px); 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: clamp(90px, 14vw, 170px) 0; overflow: hidden; background: var(--c-bg); }
.reviews--joined { padding-top: clamp(20px, 4vw, 50px); }   /* 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-red); 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-red); 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 .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; }

/* ---------- 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: 70px 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); }

/* ---------- 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__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; }
.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 */