/* ============================================================
   CARS TRANSDUCTOR · estilo
   Concepto «Lo que no se ve»: todo arranca a oscuras y cada
   sección enciende algo. Tres colores, los de su logotipo:
   negro de fondo, rojo para la luz y los botones, azul frío para
   los brillos del metal. El verde fósforo es solo para la señal
   del osciloscopio, que es el hilo que recorre la página.
   ============================================================ */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fuentes/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fuentes/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fuentes/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fuentes/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-display: swap; src: url("../fuentes/share-tech-mono-400.woff2") format("woff2"); }

:root {
  --negro: #07090d;
  --carbon: #10141b;
  --panel: #161b24;
  --rojo: #e2262d;
  --rojo-oscuro: #8a1218;
  --rojo-texto: #ef4247;   /* el rojo para letra pequeña: contraste 4,9 sobre las tarjetas (el --rojo da 4,0 y no llega) */
  --azul: #3d8bff;
  --fosforo: #62ff8e;
  --hueso: #ece7dd;
  --gris: #8e96a3;
  --linea: rgba(236, 231, 221, 0.12);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono: "Share Tech Mono", "Courier New", monospace;

  --ancho: 1180px;
  --margen: 20px;
  --radio: 4px;
}

@media (min-width: 720px) { :root { --margen: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* El recorte horizontal se hace en un contenedor interior, nunca en html/body
   (en Safari iOS provoca el «scroll infinito»). */
.pagina { overflow-x: clip; position: relative; }

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fosforo); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; margin: 0; }
p { margin: 0 0 1em; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* Rótulo tipo lectura de osciloscopio: encima de cada sección */
.lectura {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 26px;
}
.lectura::before { content: ""; width: 26px; height: 1px; background: var(--fosforo); box-shadow: 0 0 8px var(--fosforo); }
.lectura b { color: var(--fosforo); font-weight: 400; }

/* ---------- La señal: el hilo que recorre la página ---------- */
.senal { width: 100%; height: 64px; }
.senal path { fill: none; stroke: var(--fosforo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(98, 255, 142, 0.7)); }
.senal-seccion { margin: 0 0 18px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: translateY(1px); }
.boton-rojo { position: relative; isolation: isolate; }
.boton-rojo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--rojo); opacity: 0; z-index: -1; animation: latido 3.4s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }
@keyframes latido { 0% { transform: scale(1); opacity: 0.75; } 55% { transform: scale(1.22, 1.6); opacity: 0; } 100% { transform: scale(1.22, 1.6); opacity: 0; } }
.boton-rojo svg { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.boton-rojo:hover svg { transform: rotate(-12deg) scale(1.15); }
@media (prefers-reduced-motion: reduce) { .boton-rojo::before { animation: none; } }
.boton-rojo { background: var(--rojo); color: #fff; box-shadow: 0 0 0 0 rgba(226, 38, 45, 0.5); }
.boton-rojo:hover { box-shadow: 0 0 34px 0 rgba(226, 38, 45, 0.45); transform: translateY(-1px); }
.boton-rojo svg { width: 22px; height: 22px; }
/* El botón de WhatsApp de la cabecera, en verde (Angel, 19/09). #1a9e4a y no el #25d366 de
   WhatsApp: con letra blanca, el de WhatsApp da 2,0 de contraste; este, 3,5, que vale para el
   icono y para texto grande (por eso en escritorio la palabra va a 19 px y en negrita). */
.boton-whatsapp { position: relative; isolation: isolate; background: #1a9e4a; color: #fff; }
.boton-whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #1a9e4a; opacity: 0; z-index: -1; animation: latido 3.4s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }
.boton-whatsapp:hover { box-shadow: 0 0 34px 0 rgba(26, 158, 74, 0.5); transform: translateY(-1px); }
.boton-whatsapp svg { width: 22px; height: 22px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.boton-whatsapp:hover svg { transform: rotate(-12deg) scale(1.15); }
@media (prefers-reduced-motion: reduce) { .boton-whatsapp::before { animation: none; } }
.boton-linea { border-color: rgba(236, 231, 221, 0.35); color: var(--hueso); background: transparent; }
.boton-linea:hover { border-color: var(--hueso); }
.enlace-suave { color: var(--gris); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(142, 150, 163, 0.5); }
.enlace-suave:hover { color: var(--hueso); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--margen);
  mix-blend-mode: normal;
  pointer-events: none;
}
.cabecera > * { pointer-events: auto; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { width: 64px; height: auto; filter: drop-shadow(0 0 12px rgba(61, 139, 255, 0.35)); }
.marca span { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.cabecera .boton { padding: 10px 18px; font-size: 16px; }
/* El de WhatsApp, redondo y solo con el logo (Angel, 19/09). */
.cabecera .boton-whatsapp { padding: 12px; border-radius: 50%; transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.25s ease; }
@media (max-width: 719px) {
  /* En móvil la cabecera NO flota: el logo se queda arriba y se va con el scroll (Angel, 19/09)… */
  .cabecera { position: absolute; }
  /* …y el botón de WhatsApp flota abajo a la derecha, a mano del pulgar. */
  .cabecera .boton-whatsapp { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); }
  .cabecera .boton-whatsapp svg { width: 26px; height: 26px; }
  .cabecera .boton-whatsapp.oculto { opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none; }
  /* El pie entero, centrado en móvil (Angel, 19/09). En escritorio sigue a la izquierda. */
  .pie img { margin-inline: auto; }
  .pie-rejilla { text-align: center; }
  .pie nav { justify-content: center; }
  /* Aire bajo el pie para que lo último de la página no quede debajo del botón flotante. */
  body:has(.boton-whatsapp) footer.pie { padding-bottom: 96px; }   /* solo donde hay botón flotante: las legales no lo llevan */
}
@media (max-width: 719px) { .marca span { display: none; } .cabecera .boton span { display: none; } .cabecera .boton { padding: 12px; border-radius: 50%; } }

/* ---------- Portada ---------- */
.portada {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding: 140px 0 56px;
  isolation: isolate;
  overflow: hidden;
}
.portada-fondo { position: absolute; inset: 0; z-index: -2; background: var(--negro); }
.portada-fondo video, .portada-fondo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.portada-fondo video[poster] { opacity: 0.9; }
.portada-fondo video.listo { opacity: 0.9; }
/* La luz: roja dura desde la izquierda, azul fría desde la derecha. Hasta que
   llegue el vídeo de portada, la luz la pintan estas capas. */
.portada-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 90% at 0% 60%, rgba(226, 38, 45, 0.28), transparent 62%),
    radial-gradient(50% 70% at 100% 20%, rgba(61, 139, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(7, 9, 13, 0.25) 0%, rgba(7, 9, 13, 0.55) 55%, rgba(7, 9, 13, 0.92) 100%);
}
.portada-grano { position: absolute; inset: 0; z-index: -1; opacity: 0.16; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E"); }

.portada-osciloscopio { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.portada-osciloscopio svg { width: 100%; height: 100%; }
.portada-osciloscopio .reticula line { stroke: rgba(98, 255, 142, 0.07); stroke-width: 1; }
.portada-osciloscopio .traza { fill: none; stroke: var(--fosforo); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(98, 255, 142, 0.8)); opacity: 0.9; }
.portada-osciloscopio .traza-sombra { fill: none; stroke: var(--fosforo); stroke-width: 10; opacity: 0.08; stroke-linejoin: round; }
.portada-osciloscopio .marca-cil { fill: none; stroke: var(--rojo); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.9; }
.portada-osciloscopio text { font-family: var(--mono); font-size: 13px; fill: var(--rojo); letter-spacing: 0.1em; }
.lecturas-esquina { position: absolute; z-index: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: rgba(98, 255, 142, 0.6); text-transform: uppercase; pointer-events: none; }
.lecturas-esquina.izq { left: var(--margen); top: 84px; }
.lecturas-esquina.der { right: var(--margen); top: 84px; text-align: right; }
@media (max-width: 719px) { .lecturas-esquina { display: none; } .portada-osciloscopio { opacity: 0.6; bottom: 46%; } }
/* 19/09: en móvil la frase de encima del titular se perdía sobre las zonas claras del vídeo.
   Sombra y, en móvil, hueso algo apagado en vez de gris. El recuadro rojo «CIL 3» se quitó en
   móvil ese mismo día y Angel pidió que volviera tal cual: le gusta aunque se vea a medias. */
.portada-antetitulo { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9); }
@media (max-width: 719px) { .portada .portada-antetitulo { color: rgba(236, 231, 221, 0.82); } }

.portada-contenido { position: relative; z-index: 1; }
.portada-antetitulo { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); margin-bottom: 22px; }
.portada h1 { font-size: clamp(54px, 8.6vw, 124px); max-width: 16ch; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6); }
.portada h1 .palabra { display: inline-block; white-space: nowrap; }
/* Las letras las parte el script que va justo detrás del h1, antes de pintar nada, y la
   animación es de CSS: arranca con la página, sin esperar a GSAP (19/09: así el titular
   aparece un segundo antes en móvil). Misma curva y ritmo que tenía con GSAP. */
.portada h1 .letra { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: letra-entra 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; animation-delay: calc(0.25s + var(--i, 0) * 0.028s); }
@keyframes letra-entra { to { opacity: 1; transform: none; } }
/* El subtítulo, los botones y los datos de la portada: la misma entrada que `.aparece`, pero
   por CSS y a la vez que el titular, sin esperar a pagina.js (19/09). */
.portada .entra { opacity: 0; transform: translateY(24px); animation: entra-op 0.9s ease 0.3s forwards, entra-y 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s forwards; }
@keyframes entra-op { to { opacity: 1; } }
@keyframes entra-y { to { transform: none; } }
/* Mientras llega la tipografía (máx. 1,2 s, lo decide el script de la cabecera), la portada no
   se pinta y sus animaciones no arrancan: así el titular nunca salta de una letra a otra. */
.esperando-letra .portada-contenido { visibility: hidden; }
.esperando-letra .portada h1 .letra, .esperando-letra .portada .entra { animation-play-state: paused; }
.portada-sub { font-size: clamp(18px, 2.2vw, 24px); max-width: 34ch; margin: 26px 0 34px; color: var(--hueso); }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
/* Los cuatro datos de la portada: etiqueta pequeña encima y el dato debajo, como las medidas de
   un osciloscopio. Dos por fila en móvil, los cuatro en fila desde 720 px. */
.portada-datos { margin: 38px 0 0; max-width: 620px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.portada-datos > div { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linea); }
.portada-datos > div:nth-child(even) { padding: 12px 0 12px 16px; border-left: 1px solid var(--linea); }
.portada-datos dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
.portada-datos dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1; color: var(--hueso); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
@media (min-width: 720px) {
  .portada-datos { grid-template-columns: repeat(4, auto); width: fit-content; max-width: 100%; }
  .portada-datos > div, .portada-datos > div:nth-child(even) { padding: 12px 28px 4px; border-bottom: 0; border-left: 1px solid var(--linea); }
  .portada-datos > div:first-child { padding-left: 0; border-left: 0; }
}
.portada-bajar { position: absolute; right: var(--margen); bottom: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gris); text-transform: uppercase; writing-mode: vertical-rl; }
@media (max-width: 719px) { .portada-bajar { display: none; } }

/* ---------- Secciones ---------- */
.seccion { position: relative; padding: 56px 0; }
@media (min-width: 900px) { .seccion { padding: 104px 0; } }
.seccion .contenedor > :last-child, .seccion .contenedor > div > :last-child { margin-bottom: 0; }
.seccion h2 { font-size: clamp(40px, 6.4vw, 92px); max-width: 14ch; margin-bottom: 22px; }
.entradilla { font-size: clamp(18px, 2vw, 22px); max-width: 52ch; color: var(--hueso); }
.entradilla-gris { color: var(--gris); }
.aparece { opacity: 0; transform: translateY(24px); }
.aparece.visto { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Un barrido de luz roja entre secciones: la misma firma, repetida. */
.barrido { height: 1px; background: linear-gradient(90deg, transparent, var(--rojo) 30%, var(--rojo) 70%, transparent); opacity: 0.35; transform-origin: left; transform: scaleX(0); }
.barrido.visto { transform: scaleX(1); transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* ---------- 2 · El maletín ---------- */
.maletin { padding: 0; }
.formacion { padding-bottom: 64px; }
.maletin-escena { position: relative; height: 420vh; }
.maletin-fijo { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.maletin-cabecera { padding: 72px var(--margen) 0; position: relative; z-index: 2; }
.maletin-cabecera h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 8px; }
.maletin-cabecera .entradilla { font-size: 16px; margin-bottom: 14px; }
.maletin-cabecera .lectura { margin-bottom: 14px; }
.maletin-lienzo { position: relative; z-index: 0; min-height: 0; }
.maletin-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.maletin-luz { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(60% 60% at 15% 50%, rgba(226, 38, 45, 0.28), transparent 65%), radial-gradient(45% 60% at 92% 30%, rgba(61, 139, 255, 0.2), transparent 60%); }
.maletin-piezas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.maletin-lineas { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; }
.maletin-lineas line { stroke: var(--fosforo); stroke-width: 1; opacity: 0; transition: opacity 0.5s ease; }
.maletin-lineas circle { fill: var(--fosforo); filter: drop-shadow(0 0 6px var(--fosforo)); opacity: 0; transition: opacity 0.5s ease; }
.maletin-lineas .encendida { opacity: 0.85; }
.pieza { position: absolute; width: 220px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.pieza.izq { text-align: right; }
.pieza.encendida { opacity: 1; transform: none; }
.pieza b { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; line-height: 1; letter-spacing: 0.01em; }
.pieza span { display: block; font-size: 14px; color: var(--gris); margin-top: 4px; line-height: 1.4; }
.maletin-pie { padding: 0 var(--margen) 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; position: relative; z-index: 2; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.maletin-progreso { width: 160px; height: 2px; background: rgba(236, 231, 221, 0.15); position: relative; }
.maletin-progreso i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fosforo); box-shadow: 0 0 8px var(--fosforo); }
.maletin-lista { padding: 56px var(--margen) 0; }
.maletin-lista ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px 40px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: var(--ancho); margin-inline: auto; }
.maletin-lista li { border-top: 1px solid var(--linea); padding-top: 14px; }
.maletin-lista b { font-family: var(--display); font-size: 24px; font-weight: 600; text-transform: uppercase; display: block; letter-spacing: 0.01em; }
.maletin-lista span { color: var(--gris); font-size: 16px; }
@media (max-width: 899px) {
  .maletin-piezas { display: none; }
  .maletin-pieza-movil { position: absolute; left: var(--margen); right: var(--margen); bottom: 74px; z-index: 3; }
  .maletin-pieza-movil .pieza { position: static; width: auto; padding-left: 24px; position: relative; }
  .maletin-pieza-movil .pieza::before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--fosforo); box-shadow: 0 0 12px var(--fosforo); left: 0; top: 8px; }
  /* Los punteros verdes también en móvil (Angel, 19/09): solo el punto sobre cada pieza, sin
     línea ni rótulo (el texto va en la tarjeta de abajo). El de la pieza de la tarjeta late. */
  .maletin-lineas line { display: none; }
  .maletin-lineas circle.encendida { opacity: 0.55; }
  .maletin-lineas circle.actual { opacity: 1; animation: puntero-late 1.6s ease-in-out infinite; }
}
@keyframes puntero-late { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .maletin-lineas circle.actual { animation: none; } }
@media (min-width: 900px) { .maletin-pieza-movil { display: none; } }

/* El marcador de material pendiente: se ve, dice qué falta y no se confunde con la web. */
.marcador { position: absolute; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #ffd166; background: rgba(7, 9, 13, 0.7); border: 1px dashed rgba(255, 209, 102, 0.6); padding: 8px 10px; border-radius: var(--radio); }
.marcador-bloque { position: relative; display: grid; place-items: center; text-align: center; min-height: 240px; border: 1px dashed rgba(255, 209, 102, 0.5); border-radius: var(--radio); background: repeating-linear-gradient(135deg, rgba(255, 209, 102, 0.04) 0 12px, transparent 12px 24px); color: #ffd166; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 24px; }

/* ---------- 3 · Las tres averías ---------- */
.averias { padding-bottom: 0; }
.averias-pista { position: relative; }
.averias-carril { display: grid; gap: 18px; }
.averia { position: relative; background: var(--carbon); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; isolation: isolate; scroll-snap-align: start; }
.averia-coche { position: relative; aspect-ratio: 16 / 9; background: #05070a; overflow: hidden; }
.averia-coche svg { width: 100%; height: 100%; }
.averia-coche img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) contrast(1.08) brightness(0.82); }
/* La luz de la página sobre una foto hecha a pleno día: rojo desde la izquierda, azul desde la derecha, y la base a oscuras. */
.averia-coche::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 0% 60%, rgba(226, 38, 45, 0.42), transparent 60%), radial-gradient(55% 80% at 100% 20%, rgba(61, 139, 255, 0.3), transparent 60%), linear-gradient(180deg, rgba(5, 7, 10, 0.15) 0%, rgba(5, 7, 10, 0.05) 50%, rgba(5, 7, 10, 0.7) 100%); mix-blend-mode: normal; }
.foto-modelo { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 231, 221, 0.55); }
.averia-cuerpo { padding: 26px 24px 28px; display: grid; gap: 18px; }
.averia h3 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; }
.averia .codigo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rojo-texto); margin-bottom: 8px; }
.averia dl { margin: 0; display: grid; gap: 12px; }
.averia dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.averia dd { margin: 4px 0 0; font-size: 17px; }
.averia dd.senal-texto { color: var(--fosforo); }
.averia-senal { position: relative; background: #040a07; border: 1px solid rgba(98, 255, 142, 0.18); border-radius: var(--radio); padding: 10px; }
.averia-senal svg { width: 100%; height: 110px; }
.averia-senal .reticula line { stroke: rgba(98, 255, 142, 0.09); }
.averia-senal .traza { fill: none; stroke: var(--fosforo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(98, 255, 142, 0.7)); }
.averia-senal .lecturas { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(98, 255, 142, 0.6); text-transform: uppercase; margin-bottom: 6px; }
.averia-senal .marcador { position: static; display: inline-block; margin-top: 8px; }
/* Mientras no lleguen sus capturas reales, la señal dibujada lo dice (19/09, al publicar). */
.senal-nota { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.averia-cierre { padding: 44px 0 0; }
.averia-cierre p { font-family: var(--display); font-size: clamp(26px, 3.4vw, 42px); font-weight: 600; text-transform: uppercase; line-height: 1.05; max-width: 26ch; }
.averia-cierre em { font-style: normal; color: var(--fosforo); }
.cita-suya { margin: 40px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--rojo); font-size: clamp(18px, 2vw, 22px); line-height: 1.45; max-width: 62ch; color: var(--hueso); }
.cita-suya footer { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); margin-top: 12px; }

@media (min-width: 900px) {
  .averias { padding-top: 0; }
  .averias-escena { height: 300vh; position: relative; }
  .averias-fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
  .averias-fijo .contenedor { padding-top: 84px; }
  .averias-fijo h2 { font-size: clamp(34px, 4.4vw, 60px); margin-bottom: 12px; }
  .averias-fijo .entradilla { font-size: 18px; max-width: 62ch; margin-bottom: 0; }
  .averias-carril { width: max-content; grid-template-columns: repeat(3, 76vw); gap: 4vw; padding: 0 var(--margen); align-self: center; will-change: transform; }
  .averia { display: grid; grid-template-columns: 1.1fr 1fr; max-height: calc(100svh - 300px); }
  .averia-coche { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .averia-cuerpo { padding: 24px 28px 26px; gap: 12px; overflow: hidden; }
  .averia h3 { font-size: clamp(26px, 2.6vw, 36px); }
  .averia dd { font-size: 15.5px; }
  .averia-senal svg { height: 84px; }
}
@media (max-width: 899px) {
  .averias-carril { scroll-snap-type: y proximity; }
}

/* ---------- 4 · La formación ---------- */
.formacion { background: radial-gradient(80% 60% at 100% 0%, rgba(61, 139, 255, 0.16), transparent 60%), var(--negro); }
.formacion-rejilla { display: grid; gap: 48px; }
@media (min-width: 900px) { .formacion-rejilla { grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; } }
.formacion .subtitulo { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul); margin: 0 0 20px; }
.objetivos { list-style: none; margin: 36px 0 0; padding: 0; position: relative; }
.objetivos li { position: relative; padding: 18px 0 18px 46px; border-top: 1px solid var(--linea); font-size: clamp(19px, 2vw, 24px); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; }
.objetivos li::before { content: ""; position: absolute; left: 10px; top: 26px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--fosforo); box-shadow: 0 0 10px rgba(98, 255, 142, 0.4); background: transparent; transition: background 0.4s ease; }
.objetivos li.visto::before { background: var(--fosforo); }
.objetivos .hilo { position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; }
.objetivos .hilo i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--fosforo), rgba(98, 255, 142, 0.2)); box-shadow: 0 0 8px rgba(98, 255, 142, 0.5); }
.instrumentos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.instrumento { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px 18px; position: relative; overflow: hidden; }
.instrumento::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--azul); opacity: 0.8; }
.instrumento small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.instrumento b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1; text-transform: uppercase; }
.instrumento span { display: block; margin-top: 8px; font-size: 15px; color: var(--gris); }
.formacion-kit { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(22, 27, 36, 0.6); }
.formacion-kit p { margin: 0; }
.formacion-kit p + p { margin-top: 10px; }
.formacion-boton { margin-top: 28px; }
.quien-boton { margin-top: 28px; }
/* El puente entre la formación y el maletín: cierra la sección y anuncia lo que viene */
.puente { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .puente { margin-top: 64px; padding-top: 36px; } }
.puente p { margin: 0; font-family: var(--display); font-size: clamp(26px, 3.4vw, 42px); font-weight: 600; text-transform: uppercase; line-height: 1.05; max-width: 28ch; }
.puente em { font-style: normal; color: var(--fosforo); }

/* ---------- 5 · El mapa ---------- */
.mapa-rejilla { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .mapa-rejilla { grid-template-columns: 0.9fr 1.1fr; gap: 60px; } }
.mapa svg { width: 100%; height: auto; }
.mapa .punto { fill: rgba(236, 231, 221, 0.16); transition: fill 0.4s ease; }
.mapa .punto.zona { fill: rgba(226, 38, 45, 0.35); }
.mapa .punto.zona.encendido { fill: var(--rojo); }
/* El resplandor rojo, uno para todo el grupo de zonas y no uno por punto (19/09: eran ~800
   filtros y en móvil daban tirones al pasar por el mapa). */
.mapa .grupo-zonas { filter: drop-shadow(0 0 4px rgba(226, 38, 45, 0.9)); }
.mapa-dibujo { position: relative; }
.mapa-dibujo .mapa-proxima { position: absolute; inset: 0; width: 100%; height: 100%; will-change: opacity; }
.zonas { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.zonas li { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px; border: 1px solid rgba(226, 38, 45, 0.4); border-radius: 999px; color: var(--hueso); opacity: 0.55; transition: opacity 0.4s ease, border-color 0.4s ease; }
.zonas li.encendido { opacity: 1; border-color: var(--rojo); box-shadow: 0 0 14px rgba(226, 38, 45, 0.35); }
/* Formación anunciada y aún no dada (19/09: Extremadura): borde discontinuo, piloto que late en la
   etiqueta y, en el mapa, puntos huecos (lo previsto, no lo hecho) latiendo en grupo. */
.zonas li.proxima { border-style: dashed; }
.mapa .mapa-proxima .punto.zona { fill: transparent; stroke: rgba(226, 38, 45, 0.45); stroke-width: 1.6; }
.mapa .mapa-proxima .punto.zona.encendido { fill: transparent; stroke: var(--rojo); }
.zonas li.proxima::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--rojo); vertical-align: 1px; }
.zonas li.proxima.encendido::before, .mapa .mapa-proxima.encendido { animation: proxima-late 1.6s ease-in-out infinite; }
@keyframes proxima-late { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .zonas li.proxima.encendido::before, .mapa .mapa-proxima.encendido { animation: none; } }
.mapa-boton { margin-top: 30px; }
.mapa-nota { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--gris); text-transform: uppercase; margin-top: 12px; }

/* ---------- 6 · Quién soy ---------- */
.quien-rejilla { display: grid; gap: 40px; }
@media (min-width: 900px) { .quien-rejilla { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: center; } }
.quien-foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: radial-gradient(70% 70% at 20% 30%, rgba(226, 38, 45, 0.35), transparent 60%), var(--carbon); }
.quien-foto .marcador-bloque { position: absolute; inset: 0; min-height: 0; }
.quien-foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.quien-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 0% 30%, rgba(226, 38, 45, 0.22), transparent 60%), linear-gradient(180deg, transparent 55%, rgba(7, 9, 13, 0.55) 100%); }
.quien blockquote { margin: 28px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--rojo); font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3vw, 36px); text-transform: uppercase; line-height: 1.05; }
.quien blockquote footer { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--gris); margin-top: 12px; text-transform: uppercase; }

/* ---------- 7 · Formulario ---------- */
.formulario { background: linear-gradient(180deg, var(--negro), var(--carbon)); }
.form-rejilla { display: grid; gap: 40px; }
@media (min-width: 900px) { .form-rejilla { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
form { display: grid; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.campo input, .campo select { width: 100%; padding: 16px 16px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--hueso); font: inherit; font-size: 17px; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238e96a3' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.campo input:focus, .campo select:focus { border-color: var(--fosforo); outline: none; }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--gris); }
.consentimiento input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rojo); flex: none; }
.consentimiento a { color: var(--hueso); }
.form-nota { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.form-hecho { display: none; padding: 22px; border: 1px solid rgba(98, 255, 142, 0.4); border-radius: var(--radio); background: rgba(98, 255, 142, 0.06); }
.form-hecho.visible { display: block; }
.contacto-lista { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.contacto-lista li { display: flex; gap: 14px; align-items: center; }
.contacto-lista svg { width: 22px; height: 22px; flex: none; color: var(--rojo); }
.contacto-lista a { text-decoration: none; }
.contacto-lista a:hover { color: var(--fosforo); }

/* ---------- 8 · Preguntas frecuentes ---------- */
.faq-rejilla { display: grid; gap: 32px; }
@media (min-width: 900px) { .faq-rejilla { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; } .faq-rejilla > div:first-child { position: sticky; top: 110px; } }
.faq-lista details { border-top: 1px solid var(--linea); }
.faq-lista details:last-child { border-bottom: 1px solid var(--linea); }
.faq-lista summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 1.5px solid var(--fosforo); border-bottom: 1.5px solid var(--fosforo); transform: rotate(45deg); transition: transform 0.3s ease; margin-right: 6px; }
.faq-lista details[open] summary::after { transform: rotate(-135deg); }
.faq-lista details[open] summary { color: var(--fosforo); }
.faq-lista details > div { padding: 0 0 22px; max-width: 60ch; color: var(--hueso); }
.faq-lista details > div p { margin: 0; }

/* ---------- Móvil: botones centrados debajo de la portada ---------- */
@media (max-width: 899px) {
  .acciones-centro { text-align: center; }
  .acciones-centro .boton { justify-content: center; }
  .acciones-centro .boton-rojo, .acciones-centro .boton-linea { width: min(100%, 360px); }
  .quien-boton { margin-bottom: 0; }
}

/* ---------- Pie ---------- */
.pie { padding: 48px 0 40px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--gris); }
.pie-rejilla { display: grid; gap: 22px; }
@media (min-width: 720px) { .pie-rejilla { grid-template-columns: 1fr auto; align-items: end; } }
.pie img { width: 120px; margin-bottom: 14px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie nav a { text-decoration: none; }
.pie nav a:hover { color: var(--hueso); }
.pie .datos-fiscales { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }
.pie .pendiente { color: #ffd166; }

/* ---------- Reproductor con barras rojas ---------- */
.reproductor { position: fixed; inset: 0; z-index: 60; display: none; }
.reproductor.abierto { display: block; }
.reproductor-barra { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--rojo); transform: scaleX(0); }
.reproductor-barra.izq { left: 0; transform-origin: left; }
.reproductor-barra.der { right: 0; transform-origin: right; }
.reproductor-fondo { position: absolute; inset: 0; background: #000; opacity: 0; }
.reproductor-marco { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; opacity: 0; }
.reproductor-marco .caja { width: min(100%, 420px); aspect-ratio: 9 / 16; background: #000; border-radius: var(--radio); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.reproductor-marco .caja.horizontal { width: min(100%, 1100px); aspect-ratio: 16 / 9; }
.reproductor iframe { width: 100%; height: 100%; border: 0; }
.reproductor-cerrar { position: absolute; top: 18px; right: 18px; z-index: 2; background: rgba(7, 9, 13, 0.7); border: 1px solid var(--linea); color: var(--hueso); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; opacity: 0; }
.reproductor-titulo { position: absolute; left: 20px; bottom: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hueso); opacity: 0; }
.ver-caso { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1px solid rgba(236, 231, 221, 0.3); color: var(--hueso); padding: 12px 18px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; justify-self: start; }
.ver-caso:hover { border-color: var(--rojo); color: #fff; }
.ver-caso svg { width: 16px; height: 16px; }

/* ---------- Páginas legales ---------- */
.legal { padding: 140px 0 80px; max-width: 72ch; }
.legal h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 30px; }
.legal h2 { font-size: clamp(22px, 3vw, 30px); margin: 40px 0 12px; }
.legal p, .legal li { color: var(--hueso); }
.legal .hueco { color: #ffd166; font-family: var(--mono); font-size: 0.9em; border-bottom: 1px dashed #ffd166; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .aparece, .barrido { opacity: 1; transform: none; transition: none; }
  .portada h1 .letra, .portada .entra { opacity: 1; transform: none; animation: none; }
  .maletin-escena, .averias-escena { height: auto; }
  .maletin-fijo, .averias-fijo { position: static; height: auto; }
  .pieza { opacity: 1; transform: none; }
  .averias-carril { transform: none !important; grid-template-columns: 1fr; }
}