/* =============================================================================
   Trayecta EU · piezas de marca comunes a las tres propuestas.
   Va DESPUÉS de tokens.css y epe.css. Igual que epe.css: ni un color, tamaño,
   radio ni espaciado literal; todo sale de tokens.css (var(--...)).
   ========================================================================== */

/* ---------- Logotipo en la cabecera y en el pie (SVG en línea: sigue el tema) ---------- */
.marca--logo { display: inline-flex; align-items: center; line-height: 0; }
.logo { display: block; height: var(--alto-logo); width: auto; }
.logo--pie { height: var(--alto-logo-pie); }
.lg-t, .lg-eu { fill: var(--c-logo-texto); }
.lg-m1 { fill: var(--c-logo-1); }
.lg-r1 { stroke: var(--c-logo-1); }
.lg-m2 { fill: var(--c-logo-2); }
.lg-r2 { stroke: var(--c-logo-2); }
.lg-m3 { fill: var(--c-logo-3); }
.lg-p { fill: var(--c-logo-punto); }
.pie__logo { margin-bottom: var(--e-4); }

/* ---------- Encabezado de la portada: texto + ilustración ---------- */
.portada { display: grid; gap: var(--e-6); align-items: center; padding: var(--e-7) 0; }
.portada__texto { min-width: 0; }
.portada h1 { font-size: var(--tam-h1-portada); }
.portada__lema {
  font-size: var(--tam-lema);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-lema);
  text-transform: uppercase;
  color: var(--c-lema);
  margin-bottom: var(--e-3);
}
.portada__arte { min-width: 0; width: 100%; max-width: var(--ancho-arte-movil); justify-self: center; }
.arte { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 64rem) {
  .portada { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--e-7); }
  .portada__arte { max-width: none; }
}

/* ---------- Animación de la ilustración: se dibuja al cargar, una sola vez ----------
   Por defecto (y con movimiento reducido) la ilustración está completa: la animación solo
   la recorre desde vacío hasta ese estado final. */
@media (prefers-reduced-motion: no-preference) {
  .arte-trazo { stroke-dasharray: 1; animation: trazo-dibujo var(--duracion-trazo) var(--curva-entrada) both; }
  .arte-pieza { transform-box: fill-box; transform-origin: center; animation: pieza-aparece var(--duracion-pieza) var(--curva-entrada) both; }
  .arte-trazo--1 { animation-delay: calc(var(--paso-animacion) * 1); }
  .arte-trazo--2 { animation-delay: calc(var(--paso-animacion) * 3); }
  .arte-trazo--3 { animation-delay: calc(var(--paso-animacion) * 5); }
  .arte-pieza--0 { animation-delay: 0ms; }
  .arte-pieza--1 { animation-delay: calc(var(--paso-animacion) * 2); }
  .arte-pieza--2 { animation-delay: calc(var(--paso-animacion) * 3); }
  .arte-pieza--3 { animation-delay: calc(var(--paso-animacion) * 4); }
  .arte-pieza--4 { animation-delay: calc(var(--paso-animacion) * 5); }
  .arte-pieza--5 { animation-delay: calc(var(--paso-animacion) * 6); }
  .arte-pieza--6 { animation-delay: calc(var(--paso-animacion) * 7); }
  .arte-pieza--7 { animation-delay: calc(var(--paso-animacion) * 8); }
  .arte-pieza--8 { animation-delay: calc(var(--paso-animacion) * 9); }
  .arte-pieza--9 { animation-delay: calc(var(--paso-animacion) * 10); }
  .arte-pieza--10 { animation-delay: calc(var(--paso-animacion) * 11); }
}
@keyframes trazo-dibujo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pieza-aparece { from { opacity: 0; transform: scale(var(--escala-inicial)); } to { opacity: 1; transform: none; } }

/* ---------- Pulsación de los botones (respuesta inmediata al dedo) ---------- */
.boton { transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion); }
.boton:active { transform: scale(var(--pulsar)); }

/* ---------- Foco de teclado visible en todo lo que se pulsa ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: var(--grosor-foco) solid var(--c-foco);
  outline-offset: var(--borde-medio);
  border-radius: var(--radio-s);
}

/* =============================================================================
   Trayecta EU · piel definitiva (09/10/2026): la idea de la B con la paleta de la A.
   De la B: Manrope, el logotipo «TRAYECTA» con el «EU» volado, la trayectoria de puntos
   que llega a una diana, la banda arriba de cada página y los pasos como puntos de una
   trayectoria. De la A: crema, carbón, salvia y el coral como único acento vivo (botón,
   punto del logotipo, diana). La banda es de carbón.
   Va DESPUÉS de tokens.css y epe.css (junto con las piezas comunes de comun.css).
   Como el resto: ni un color, tamaño, radio ni espaciado literal; todo sale de tokens.css.
   El coral es un relleno o un acento grande: sobre crema no llega a 4,5:1 como texto, así
   que los enlaces van en carbón con subrayado coral y el coral no es el único aviso de nada.
   ========================================================================== */

/* ---------- Cabecera crema ---------- */
.cabecera { background: var(--c-fondo); }

.nav a { font-weight: var(--peso-medio); color: var(--c-texto-suave); }
.nav a:hover { color: var(--c-texto); }
.nav a[aria-current="page"] {
  color: var(--c-texto);
  font-weight: var(--peso-fuerte);
  border-bottom: var(--borde-medio) dotted var(--c-marca-2);
}

/* El logotipo es una imagen SVG con su lema; en oscuro el <picture> sirve la versión de letras crema.
   Gana a `.marca img` de epe.css (que fija 2 rem cuadrados para el logo provisional). */
.marca--logo .logo { height: var(--alto-logo); width: auto; }

/* ---------- Enlaces: carbón con subrayado coral ---------- */
a { color: var(--c-acento); text-decoration-color: var(--c-subrayado); }
a:hover { color: var(--c-acento); text-decoration-color: var(--c-acento); }

/* ---------- La banda de carbón: portada e inicio de cada página ---------- */
.portada, .intro {
  background: var(--c-banda);
  color: var(--c-sobre-banda);
  box-shadow: 0 0 0 var(--extension-banda) var(--c-banda);
  clip-path: inset(0 calc(var(--extension-banda) * -1));
}
.intro { padding: var(--e-7) 0 var(--e-6); }
.portada .lead, .intro:not(.legal) .lead,
.portada .nota-pequena, .intro:not(.legal) .nota-pequena { color: var(--c-sobre-banda-suave); }
.portada__lema { color: var(--c-marca-2); }
.portada + .bloque, .intro + .bloque { border-top: 0; }
.portada a:not(.boton), .intro:not(.legal) a:not(.boton) { color: var(--c-sobre-banda); text-decoration-color: var(--c-subrayado); }
.portada :focus-visible, .intro:not(.legal) :focus-visible, .pie :focus-visible { outline-color: var(--c-foco-banda); }

/* Páginas legales: todo el texto alemán vive dentro de .intro, así que solo el titular lleva la banda */
.intro.legal {
  background: none;
  color: inherit;
  box-shadow: none;
  clip-path: none;
  padding: 0;
}
.intro.legal > h1:first-child {
  background: var(--c-banda);
  color: var(--c-sobre-banda);
  padding: var(--e-7) 0 var(--e-6);
  margin-bottom: var(--e-6);
  box-shadow: 0 0 0 var(--extension-banda) var(--c-banda);
  clip-path: inset(0 calc(var(--extension-banda) * -1));
}

/* ---------- Botones: coral con texto carbón (el gesto del amarillo de ATERRIZA EU) ---------- */
.boton {
  background: var(--c-cta);
  border-color: var(--c-cta);
  color: var(--c-sobre-cta);
  border-radius: var(--radio-boton);
  font-weight: var(--peso-fuerte);
  padding: var(--relleno-boton);
}
.boton:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); color: var(--c-sobre-cta); }
.boton--secundario { background: transparent; border-color: var(--c-texto); color: var(--c-texto); }
.boton--secundario:hover { background: var(--c-acento-tinte); border-color: var(--c-texto); color: var(--c-texto); }
.portada .boton--secundario, .intro:not(.legal) .boton--secundario { border-color: var(--c-sobre-banda); color: var(--c-sobre-banda); }
.portada .boton--secundario:hover, .intro:not(.legal) .boton--secundario:hover { background: var(--c-banda-linea); border-color: var(--c-sobre-banda); color: var(--c-sobre-banda); }

/* ---------- Ilustración de la portada: los puntos suben hasta la diana coral ---------- */
.arte-punto { fill: var(--c-sobre-banda); }
.arte-diana { stroke: var(--c-marca-2); }
.arte-diana-centro { fill: var(--c-marca-2); }
.arte-alterna { fill: var(--c-marca-3); }
.arte-alterna-diana { stroke: var(--c-marca-3); }

/* ---------- Rutas de la portada: lista con la diana como marca ---------- */
.ruta { padding: var(--e-4) 0 var(--e-4) var(--e-6); position: relative; border-top-color: var(--c-linea); }
.ruta::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--e-4) + var(--e-1));
  width: var(--diana-ruta);
  height: var(--diana-ruta);
  border-radius: var(--radio-pastilla);
  border: var(--grosor-diana) solid var(--c-marca-2);
  transition: background-color var(--transicion);
}
.ruta strong { color: var(--c-texto); }
.ruta:hover strong { color: var(--c-texto); text-decoration-color: var(--c-subrayado); }
.ruta:hover::before { background: var(--c-marca-2); }

/* ---------- Pasos: puntos de una trayectoria; el último es la diana ---------- */
.pasos > li::before {
  background: var(--c-marca-1);
  color: var(--c-sobre-marca-1);
  font-weight: var(--peso-titulo);
}
.pasos > li::after {
  content: "";
  position: absolute;
  left: calc(var(--e-6) / 2 - var(--grosor-linea-pasos) / 2);
  top: calc(var(--e-6) + var(--e-1));
  bottom: calc(var(--e-5) * -1 + var(--e-1));
  border-left: var(--grosor-linea-pasos) dotted var(--c-marca-1);
}
.pasos > li:last-child::before {
  background: var(--c-cta);
  color: var(--c-sobre-cta);
  box-shadow: 0 0 0 var(--borde-medio) var(--c-fondo), 0 0 0 calc(var(--borde-medio) + var(--grosor-diana)) var(--c-marca-2);
}
.pasos > li:last-child::after { content: none; }
.pasos h3 { padding-top: var(--e-1); }

/* ---------- Tablas: cabecera en carbón, total en verde pálido ---------- */
.tabla thead th { color: var(--c-texto); border-bottom: var(--borde-medio) solid var(--c-texto); }
.tabla .fila-total th, .tabla .fila-total td { background: var(--c-acento-tinte); }
.tabla-marco { margin: var(--e-5) 0; }

/* ---------- Etiquetas, avisos y testimonios ---------- */
.etq { font-weight: var(--peso-fuerte); }
.aviso { background: var(--c-aviso-fondo); border-color: var(--c-aviso-borde); border-radius: var(--radio-l); padding: var(--e-5); }
.testimonio { border-radius: var(--radio-l); }
details { border-radius: var(--radio-m); }

/* ---------- Pie: banda de carbón ---------- */
.pie { background: var(--c-banda); color: var(--c-sobre-banda-suave); border-top: 0; }
.pie strong { color: var(--c-sobre-banda); }
.pie a { color: var(--c-sobre-banda); text-decoration-color: var(--c-subrayado); }
.pie a:hover { color: var(--c-sobre-banda); }

/* ---------- Colores forzados (alto contraste de Windows): el sistema quita fondos y bandas, pero no toca
   el relleno de los SVG ni los números de los pasos; sin esto, los puntos crema de la ilustración se
   pierden sobre el lienzo blanco y los números quedan sin círculo ---------- */
@media (forced-colors: active) {
  .arte-punto { fill: CanvasText; }
  .arte-alterna { fill: GrayText; }
  .arte-alterna-diana { stroke: GrayText; }
  .arte-diana { stroke: Highlight; }
  .arte-diana-centro { fill: Highlight; }
  .pasos > li::before { border: var(--borde-medio) solid CanvasText; }
}