/* ============================================================================
   intro.css — intro v6 «Ahri» (14,5 s, con música, en cada carga)
   Dueño: intro.js + intro-fx.js + intro.css · contrato: brief/CONTRATO-MODULOS.md §2.1, §3
   y §5.3 · guion, tiempos medidos y QA: conocimiento/v5-intro.md y v6-intro.md · carta:
   wisp.css + brief/v3/CARTA-WISP.md (aquí solo se le da sitio, la caída, la tapa y los acentos).

   Encargos de Josema (03/10/2026). 1.ª ronda: épica, estética gaming, movimiento continuo;
   título en tres líneas; carta tapada que destapa un rayo desde el cursor (fuego fatuo de
   Ahri). 2.ª ronda: fuente nueva (Cinzel), oro + magenta, cada línea del título cae entera con
   1 s entre una y otra, con grieta y temblor; lateral izquierdo que se construye y se queda
   («8 equipos» con 8 hexágonos, «Un solo ganador», «¿Acertarás?»); Ahri; revelado más lento y
   rayo exagerado. 3.ª ronda: el azul de MejorIA vuelve a «MejorIA» y va también en el aspa y en
   el fuego fatuo (el rayo y el resto de efectos, como estaban); colocación de su foto de
   referencia; Ahri es su VÍDEO, en un marco grueso; espátulas cruzadas detrás del título; los
   hexágonos llevan los escudos de los clubes; la carta, abajo en el centro, suelta monedas.
   4.ª ronda: Ahri sin marco, recortada a su silueta (ahri-alfa.js / ahri-alfa.css), y el rayo, azul.

   · El overlay se ve desde el primer pintado (fondo y los dos botones). Vídeo, título,
     laterales, espátulas y carta nacen ocultos y los descubre intro.js.
   · Capas: .intro__escena (vídeo, velos, título con sus grietas, laterales y carta; es lo que
     tiembla) · .intro__fx (lienzo de chispas, polvo, ondas, rayos y monedas; no tiembla) ·
     botones · .intro__fatuo (el cursor). Lo ocultan [hidden], <noscript> y prefers-reduced-motion
     (base.css).
   · Estados (los pone intro.js): .intro.is-titulo (cielo oscurecido), .intro__tarjeta.is-visible,
     .intro.is-carta (velo tras la carta y avance lento de cámara), .wisp-carta.is-comprada
     (cae), .is-destapada (la moneda y el «0» entran), .is-brillo (11,62 s), .intro__hex.is-encendido,
     .intro__espatulas.is-completa, .wisp-carta__tapa.is-ardiendo / .is-quemada, .intro.is-fatuo
     (cursor propio), .intro__fin.is-visible y .intro.is-saliendo (fundido; su duración llega en
     --intro-fundido).
   · Colores de tokens.css. Los rgba() repiten los RGB de los tokens (noche-morada 18,8,26 ·
     magenta 255,79,163 · rosa 255,184,226 · rareza-4 196,64,218 · oro 248,179,63 · oro-brillo
     255,226,154 · metal 200,170,110 · texto 245,248,250 · fatuo 164,229,233 · teal 48,200,192)
     porque velos, luces y sombras necesitan alfa. Sin !important.

   CONTRASTE: el título va en degradados claros (blanco → fatuo → teal en «MejorIA»; crema → oro
   brillo → oro en la liga) con contorno oscuro y el cielo oscurecido detrás; los laterales y la
   carta van sobre placas oscuras. Medido en conocimiento/v5-intro.md §5 y v6-intro.md.
   ========================================================================== */

/* --- Overlay ------------------------------------------------------------------ */
.intro {
  --intro-fundido: 800ms;
  --intro-arriba: calc(env(safe-area-inset-top, 0px) + var(--esp-4) + var(--alto-btn-s) + var(--esp-3));
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background-color: var(--color-noche-morada);
  color: var(--color-texto);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;       /* ningún gesto desplaza la página de debajo */
  isolation: isolate;
  opacity: 1;
  transition: opacity var(--intro-fundido) ease-in-out;
}

/* Fundido de salida: 0,8 s al completarse (13,7–14,5 s) y 0,35 s al saltar */
.intro.is-saliendo {
  opacity: 0;
  pointer-events: none;
}

/* Con ratón, el cursor es el fuego fatuo (intro-fx.js); con colores forzados no se pone */
.intro.is-fatuo,
.intro.is-fatuo * { cursor: none; }

/* --- Escena: todo lo que tiembla con los golpes ------------------------------------
   --titulo-intro: tamaño de «MejorIA» y de la liga (el mismo, Josema). En apaisado, la liga
   cabe en una línea (Cinzel es ancha); en vertical parte en tres. */
.intro__escena {
  --titulo-intro: min(7.6vh, 4.7vw, 5.4rem);   /* la liga mide 19,25 em en una línea (medido): cabe hasta 1024 px */
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding:
    var(--intro-arriba)
    calc(env(safe-area-inset-right, 0px) + var(--gutter))
    calc(env(safe-area-inset-bottom, 0px) + var(--esp-5))
    calc(env(safe-area-inset-left, 0px) + var(--gutter));
  will-change: transform;   /* tiembla con cada golpe: capa propia fija, sin repintar la escena entera */
}

/* Viñeta: oscurece la franja de arriba (botones) y, muy poco, los bordes. inset -4 %: al temblar la escena,
   cubre lo mismo que el vídeo (que va escalado) y no asoma una tira sin oscurecer */
.intro__escena::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 8, 26, 0.58) 0%, rgba(18, 8, 26, 0.2) 18%, rgba(18, 8, 26, 0) 36%),
    radial-gradient(ellipse 130% 100% at 50% 55%, rgba(18, 8, 26, 0) 58%, rgba(18, 8, 26, 0.46) 100%);
}

/* Cielo del título: mientras el título está en pantalla (.is-titulo, de su entrada al final), la
   parte alta se oscurece de lado a lado. Baja hasta debajo de la liga (en apaisado la liga queda a
   la altura del horizonte claro: contraste); inset -4 % por el temblor, como la viñeta */
.intro__escena::after {
  content: "";
  position: absolute;
  inset: -4% -4% auto;
  z-index: 1;
  height: 66%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 8, 26, 0.72) 0%, rgba(18, 8, 26, 0.66) 30%, rgba(18, 8, 26, 0.6) 46%, rgba(18, 8, 26, 0.48) 60%, rgba(18, 8, 26, 0.18) 82%, rgba(18, 8, 26, 0) 100%);
  opacity: 0;
  transition: opacity 600ms ease;
}

.intro.is-titulo .intro__escena::after { opacity: 1; }

/* --- Plano de fondo: el montaje intro-v3d. Va un 3 % más grande para que al temblar no
       asomen los bordes. .intro__fin es la foto de su último fotograma (solo sin vídeo). */
.intro__video,
.intro__fin {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;                 /* intro.js funde el vídeo de 0 a 1 en cuanto hay imagen */
  transform: scale(1.03);
  transform-origin: 50% 58%;
  pointer-events: none;
}

.intro__fin { transition: opacity 600ms linear; }

.intro__fin.is-visible { opacity: 1; }

/* --- Lienzo de efectos (intro-fx.js): chispas, polvo, ondas, estelas y rayos ---------------- */
.intro__fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Título: «MejorIA» / aspa / «Liga Hispana de Clubes de TFT» --------------------------- */
.intro__rotulos {
  position: relative;
  z-index: 4;                   /* por encima de los laterales: lo que cae pasa por detrás (profundidad) */
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  width: 100%;
  margin-top: clamp(0px, 1vh, var(--esp-3));
  text-align: center;
  pointer-events: none;
}

.intro__tarjeta {
  position: relative;
  display: grid;
  justify-items: center;
  row-gap: calc(var(--titulo-intro) * 0.06);
  visibility: hidden;           /* intro.js la descubre al arrancar el título */
}

/* Banda oscura pegada al título (se suma al cielo oscurecido): plana de lado a lado y difuminada */
.intro__tarjeta::before {
  content: "";
  position: absolute;
  inset: -18% -6% -22%;
  z-index: -1;
  background: linear-gradient(90deg, rgba(18, 8, 26, 0) 0%, rgba(18, 8, 26, 0.72) 5%, rgba(18, 8, 26, 0.72) 95%, rgba(18, 8, 26, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 24%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 24%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 600ms ease;
}

.intro__tarjeta.is-visible::before { opacity: 1; }

/* Grietas de los golpes (intro-fx.js): detrás de las letras y encima de la banda; se quedan */
.intro__grietas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.intro__grieta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(255, 79, 163, 0.7));
}

.intro__grieta path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.intro__grieta-sombra {
  stroke: rgba(18, 8, 26, 0.9);
  stroke-width: 3.2;
}

.intro__grieta-luz {
  stroke: rgba(255, 226, 154, 0.95);
  stroke-width: 1.6;
}

.intro__rotulo {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--fuente-sello);   /* Cinzel: la mayúscula romana del estilo de League of Legends */
  font-weight: 900;
  font-size: var(--titulo-intro);
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-titulo);
  text-wrap: balance;
  /* contorno oscuro duro (relieve) + luz magenta; con filter y no con text-shadow: sigue a las letras y
     no se recorta con el degradado del texto */
  filter: drop-shadow(0 0.05em 0 rgba(18, 8, 26, 0.95)) drop-shadow(0 0 0.32em rgba(255, 79, 163, 0.55));
  visibility: hidden;           /* intro.js lo descubre al caer */
  opacity: 0;
  will-change: transform;
}

/* «MejorIA» y la liga: metal por línea (la capa del metal se repite cada línea de texto) y, encima, la banda
   de brillo que intro.js pasa con --brillo. La liga, en oro; «MejorIA», en el azul de MejorIA (v6, abajo) */
.intro__rotulo--marca,
.intro__rotulo--liga {
  --brillo: -30%;
  --letra-metal: linear-gradient(180deg, var(--color-titulo) 18%, var(--color-oro-brillo) 46%, var(--color-oro) 80%);
  background-image:
    linear-gradient(105deg, rgba(245, 248, 250, 0) calc(var(--brillo) - 16%), rgba(245, 248, 250, 0.95) var(--brillo), rgba(245, 248, 250, 0) calc(var(--brillo) + 16%)),
    var(--letra-metal);
  background-size: 100% 100%, 100% 1.02em;
  background-repeat: no-repeat, repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* v6 (3.ª ronda): «MejorIA» vuelve al azul de MejorIA (blanco → fatuo → teal, el de la v4) con luz teal. El aspa
   lleva el mismo degradado (#intro-x-metal en index.html) y la misma luz, y el fuego fatuo, los mismos azules */
.intro__rotulo--marca {
  --letra-metal: linear-gradient(180deg, var(--color-texto) 22%, var(--color-texto) 42%, var(--color-fatuo) 72%, var(--color-teal) 96%);
  filter: drop-shadow(0 0.05em 0 rgba(18, 8, 26, 0.95)) drop-shadow(0 0 0.32em rgba(48, 200, 192, 0.55));
}

/* Tramos que no se parten: en vertical la liga corta en «Liga Hispana» / «de Clubes» / «de TFT» */
.intro__junto { white-space: nowrap; }

/* El aspa: dos tajos con el degradado de «MejorIA» (blanco → fatuo → teal) y filo blanco, con su luz teal */
.intro__rotulo--x {
  line-height: 0;
  filter: drop-shadow(0 0 0.24em rgba(48, 200, 192, 0.8)) drop-shadow(0 0.04em 0 rgba(18, 8, 26, 0.9));
}

.intro__x {
  display: block;
  width: calc(var(--titulo-intro) * 0.6);
  height: calc(var(--titulo-intro) * 0.6);
  overflow: visible;
}

.intro__x-tajo,
.intro__x-filo {
  fill: none;
  stroke-linecap: round;
}

.intro__x-tajo {
  stroke: url(#intro-x-metal);
  stroke-width: 15;
}

.intro__x-filo {
  stroke: rgba(245, 248, 250, 0.95);
  stroke-width: 4.5;
}

/* Sin degradado recortado al texto (navegador muy antiguo): crema lisa */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .intro__rotulo--marca,
  .intro__rotulo--liga,
  .intro__dato--pregunta .intro__dato-texto {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--color-titulo);
  }
}

/* --- Laterales y emblema (se quedan hasta el final) ------------------------------------------
   v6: colocados donde los dejó Josema en herramientas/colocar-intro.html (escritorio de 1903 × 1024,
   03/10; antes, su foto de referencia: conocimiento/v6-intro.md §1 y §7). Cada pieza va en % de la pantalla y su tamaño en vw con un tope
   en vh (en una pantalla más baja que la foto no crece hacia abajo). Lo que va justo debajo del
   título (las espátulas, «8 equipos» y Ahri) además se aparta si el título baja (pantallas bajas:
   --fin-titulo). Todo cuelga de .intro__laterales, que ocupa la pantalla entera. */
.intro__laterales {
  --lat: clamp(0.875rem, min(1.655vw, 3.08vh), 2.2rem);           /* letra de las tres líneas (31,5 px en la foto) */
  --ahri-ancho: min(20.15vw, 37.5vh);                              /* Ahri con su marco: 383 × 489 px en la foto */
  --carta-talla: clamp(0.5rem, min(0.744vw, 1.383vh), 1.1rem);     /* la carta mide 21,5 veces esto: 304 px en la foto */
  --arriba-titulo: calc(var(--intro-arriba) + clamp(0px, 1vh, var(--esp-3)));
  --sobre-liga: calc(var(--arriba-titulo) + var(--titulo-intro) * 1.74);   /* donde empieza la línea de la liga */
  --fin-titulo: calc(var(--arriba-titulo) + var(--titulo-intro) * 2.76);   /* donde acaba el título */
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Espátulas cruzadas (imagen de Josema, sin recolorear): detrás del título y de todo lo demás (nunca tapan
   nada), donde las dejó Josema: 20,44 % · 26,95 % · 59,3 % de ancho (asoman bajo la liga). Dos capas: la borrosa
   (pequeña, ampliada) y la nítida (srcset hasta 1974 px: nítida en pantallas de alta densidad) */
.intro__espatulas {
  position: absolute;
  z-index: 0;
  left: 20.44%;
  top: max(26.95%, var(--sobre-liga) + var(--titulo-intro) * 0.62);   /* si el título baja, bajan con él */
  width: 59.3%;
  aspect-ratio: 1974 / 635;
  visibility: hidden;           /* intro.js las funde de 5 a 9 s */
  opacity: 0;
}

.intro__espatulas img {
  position: absolute;
  display: block;
  max-width: none;
  visibility: hidden;
  opacity: 0;
}

.intro__espatulas-nitida {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* la borrosa trae 24 px de margen alrededor de las espátulas (528 × 202 sobre 480 × 154): se amplía para que cuadren */
.intro__espatulas-borrosa {
  left: -5%;
  top: -15.58%;
  width: 110%;
  height: 131.17%;
}

/* Izquierda: tres placas que caen y se quedan, cada una donde la dejó Josema (escalonadas: 8,05 · 6,48 · 7,07 %) */
.intro__lateral--izq {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: var(--lat);
}

.intro__dato--equipos {
  left: 8.05%;
  top: max(41.95%, var(--fin-titulo) + 2vh);
}

.intro__dato--ganador {
  left: 6.48%;
  top: 64.63%;
}

.intro__dato--pregunta {
  left: 7.07%;
  top: 78.68%;
}

/* Cada línea, una placa oscura que se funde a la derecha, con filo de oro (como la lista de rasgos de TFT) */
.intro__dato {
  position: absolute;          /* su sitio (left/top) va en cada placa, arriba */
  margin: 0;
  display: grid;
  justify-items: start;
  row-gap: 0.35em;
  padding: 0.32em 1.9em 0.38em 0.75em;
  font-family: var(--fuente-cuerpo);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-titulo);
  background: linear-gradient(90deg, rgba(18, 8, 26, 0.9) 0%, rgba(18, 8, 26, 0.86) 84%, rgba(18, 8, 26, 0) 100%);
  border-left: 3px solid var(--color-oro);
  filter: drop-shadow(0 6px 14px rgba(18, 8, 26, 0.55));
  visibility: hidden;           /* intro.js las descubre al caer */
  opacity: 0;
}

.intro__dato-texto { display: block; }

.intro__dato--equipos .intro__dato-texto {
  font-size: 1.32em;
  color: var(--color-oro-brillo);
}

.intro__dato--ganador .intro__dato-texto { font-size: 1.08em; }

/* 6.ª ronda (Josema 04/10): «¿Acertarás?» pasa del rosa al azul de MejorIA (fatuo → teal, el de «MejorIA» y el aspa) */
.intro__dato--pregunta { border-left-color: var(--color-teal); }

.intro__dato--pregunta .intro__dato-texto {
  font-size: 1.32em;
  background-image: linear-gradient(180deg, var(--color-fatuo) 15%, var(--color-teal) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Los 8 hexágonos, en dos filas de 4 encajadas como un panal. v6: cada uno se completa con el escudo de un club
   (orden de lhctft.com/presentacion; imágenes del proyecto, sin recolorear ni deformar: object-fit contain) y los
   dos clubes aún sin anunciar llevan «?», como en la web */
.intro__hexes {
  display: grid;
  justify-items: start;
}

.intro__hex-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.intro__hexes-fila {
  display: flex;
  gap: 0.18em;
}

.intro__hexes-fila + .intro__hexes-fila {
  margin-top: -0.3em;
  margin-left: 0.74em;
}

.intro__hex {
  position: relative;
  display: block;
  flex: none;
  width: 1.3em;
  height: 1.508em;              /* 100 : 116, el del hexágono */
  visibility: hidden;           /* intro.js los completa uno a uno */
  opacity: 0;
}

.intro__hex-forma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.intro__hex-forma polygon {
  fill: rgba(18, 8, 26, 0.92);
  stroke: var(--color-metal);
  stroke-width: 6;
  stroke-linejoin: round;
}

.intro__hex.is-encendido { filter: drop-shadow(0 0 0.16em rgba(255, 79, 163, 0.75)); }

.intro__hex.is-encendido .intro__hex-forma polygon {
  fill: url(#intro-hex-fondo);
  stroke: url(#intro-hex-oro);
}

/* El escudo, centrado en un cuadrado del 66 % del ancho (cabe entero dentro del hexágono) */
.intro__hex-logo {
  position: absolute;
  left: 17%;
  top: 21.6%;
  width: 66%;
  height: 56.9%;
  max-width: none;
  object-fit: contain;
}

.intro__hex-signo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--fuente-sello);
  font-weight: 900;
  font-size: 0.78em;
  line-height: 1;
  color: var(--color-oro-brillo);
}

/* Derecha: Ahri es el vídeo de Josema (sin recolorear: no lleva filtros ni mezclas), en bucle y sin sonido. 4.ª ronda
   (03/10): SIN marco. Va con transparencia real y un filo de oro que sigue su silueta (ahri-alfa.js + ahri-alfa.css: el
   vídeo trae fondo negro y las colas cortadas en los bordes; _scripts/ahri_alfa.py le saca el alfa y deshace lo
   cortado); el aviso legal, pegado debajo. Donde lo dejó Josema: 77,9 % · 35,1 %, 20,15 % de ancho */
.intro__ahri {
  position: absolute;
  z-index: 2;
  right: 1.92%;
  top: max(35.1%, var(--fin-titulo) + 3vh);
  width: var(--ahri-ancho);
  margin: 0;
  display: grid;
  justify-items: center;
  row-gap: var(--esp-1);
  visibility: hidden;           /* intro.js la descubre al caer */
  opacity: 0;
}

/* La caja donde ahri-alfa.js pinta a Ahri: la misma del marco de la 3.ª ronda (403 × 514 en la foto de referencia), así
   Ahri y el aviso siguen donde estaban. El lienzo ocupa su alto y guarda 5:6: sobresale un 3 % por cada lado, donde el
   vídeo ya es transparente. Sin fondo, sin borde y sin sombra de caja: el filo de oro va en la silueta */
.intro__ahri-cuadro {
  width: 100%;
  aspect-ratio: 403 / 514;
}

.intro__ahri-aviso {
  max-width: 100%;
  padding: 0.15em 0.6em;
  border-radius: var(--radio-s);
  background: rgba(18, 8, 26, 0.74);
  font-family: var(--fuente-cuerpo);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.3;
  text-align: center;
  color: var(--color-texto-2);
}

/* --- Carta: abajo, en el eje del título (donde la dejó Josema: 63,2 % de alto y 16 % de ancho). La posición se le da a este
       contenedor, nunca a .wisp-carta: su caída manda sobre su transform y su opacity */
.intro__carta {
  position: absolute;
  z-index: 1;
  top: 63.18%;
  left: 0;
  right: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.intro .wisp-carta { --wisp-talla: var(--carta-talla); }

/* Velo suave detrás de la carta: la separa del tablero encendido sin apagarlo */
.intro__carta::before {
  content: "";
  position: absolute;
  inset: -10% -24% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(18, 8, 26, 0.6) 0%, rgba(18, 8, 26, 0.42) 52%, rgba(18, 8, 26, 0) 100%);
  opacity: 0;
  transition: opacity 900ms ease;
}

.intro.is-carta .intro__carta::before { opacity: 1; }

/* v5, sin azul en la carta de la intro: la luz del panel pasa a magenta y los destellos de la corona, de
   turquesa a rosa (el emblema es una imagen externa y no se toca) */
.intro .wisp-carta__panel {
  background:
    radial-gradient(ellipse 62% 52% at 50% 0%, rgba(255, 79, 163, 0.16) 0%, rgba(255, 79, 163, 0) 72%),
    linear-gradient(180deg, var(--wisp-madera-1) 0%, var(--wisp-madera-2) 46%, var(--wisp-madera-3) 100%);
}

.intro .wisp-carta__corona circle[fill="#30C8C0"] { fill: var(--color-magenta); }

.intro .wisp-carta__corona circle[fill="#A4E5E9"] { fill: var(--color-rosa); }

.intro .wisp-carta__corona circle[fill="#F2FFFD"] { fill: var(--color-texto); }

/* Tapa: la carta cae tapada (no se lee) y se quema desde donde llega el rayo. Cubre el panel y
   el pie; la corona y el emblema quedan por encima */
.intro .wisp-carta__tapa {
  position: absolute;
  inset: var(--wisp-marco);
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(var(--wisp-radio) - var(--wisp-marco));
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(255, 79, 163, 0.24) 0%, rgba(255, 79, 163, 0) 70%),
    repeating-linear-gradient(45deg, rgba(200, 170, 110, 0.14) 0 1px, rgba(200, 170, 110, 0) 1px 0.62em),
    repeating-linear-gradient(-45deg, rgba(200, 170, 110, 0.14) 0 1px, rgba(200, 170, 110, 0) 1px 0.62em),
    linear-gradient(180deg, var(--color-noche-morada-2) 0%, var(--color-noche-morada) 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.55), inset 0 0 1.4em rgba(18, 8, 26, 0.85);
}

.intro .wisp-carta__tapa-signo {
  font-family: var(--fuente-sello);
  font-weight: 900;
  font-size: 4.4em;
  line-height: 1;
  color: var(--color-oro-brillo);
  text-shadow: 0 0 0.25em rgba(255, 79, 163, 0.85), 0 0.04em 0 rgba(18, 8, 26, 0.9);
}

/* Mientras arde: un agujero que crece desde el impacto (--qx, --qy, --qr los pone intro.js) con
   el borde encendido */
.intro .wisp-carta__tapa.is-ardiendo {
  -webkit-mask-image: radial-gradient(circle at var(--qx, 50%) var(--qy, 50%), rgba(0, 0, 0, 0) var(--qr, 0px), rgba(0, 0, 0, 1) calc(var(--qr, 0px) + 1.1em));
  mask-image: radial-gradient(circle at var(--qx, 50%) var(--qy, 50%), rgba(0, 0, 0, 0) var(--qr, 0px), rgba(0, 0, 0, 1) calc(var(--qr, 0px) + 1.1em));
}

.intro .wisp-carta__tapa.is-ardiendo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--qx, 50%) var(--qy, 50%), rgba(255, 226, 154, 0) calc(var(--qr, 0px) - 0.1em), rgba(255, 226, 154, 0.95) calc(var(--qr, 0px) + 0.3em), rgba(164, 229, 233, 0.85) calc(var(--qr, 0px) + 0.7em), rgba(48, 200, 192, 0) calc(var(--qr, 0px) + 1.6em));
}

.intro .wisp-carta__tapa.is-quemada { display: none; }

/* --- Botones: «Silenciar» / «Activar sonido» y «Saltar intro», arriba a la derecha,
       visibles desde 0,0 s y ≥ 44 px. La franja no captura clics; los botones sí. ---------- */
.intro__controles {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--esp-4));
  right: calc(env(safe-area-inset-right, 0px) + var(--esp-4));
  left: calc(env(safe-area-inset-left, 0px) + var(--esp-4));
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
  pointer-events: none;
}

.intro__saltar,
.intro__sonido {
  min-height: var(--alto-btn-s);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-s);
  background: rgba(18, 8, 26, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

/* 6.ª ronda (Josema 04/10): los botones de arriba, del rosa al azul de MejorIA (al pasar por encima y el aro de aviso) */
.intro__saltar:hover,
.intro__sonido:hover {
  background: rgba(48, 200, 192, 0.16);
  border-color: var(--color-teal);
}

.intro__sonido { position: relative; }

/* Con sonido: el botón queda marcado en oro (además del texto y del icono) */
.intro__sonido[aria-pressed="true"] { border-color: var(--color-oro); }

.intro__sonido-icono {
  flex: none;
  width: 1.3em;
  height: 1.3em;
}

/* Altavoz tachado (en silencio) u ondas (con sonido) */
.intro__sonido-ondas { display: none; }
.intro__sonido[aria-pressed="true"] .intro__sonido-ondas { display: inline; }
.intro__sonido[aria-pressed="true"] .intro__sonido-mudo { display: none; }

/* --- Fuego fatuo de Ahri: el cursor (lo crea intro-fx.js; el centro es el punto del clic). v6: del azul de
       «MejorIA» y del aspa (blanco → fatuo → teal); desde la 4.ª ronda el rayo que suelta también es azul --- */
.intro__fatuo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.intro__fatuo.is-visible { opacity: 1; }

.intro__fatuo > span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.intro__fatuo-halo {
  width: 96px;
  height: 96px;
  background: radial-gradient(closest-side, rgba(164, 229, 233, 0.55) 0%, rgba(48, 200, 192, 0.3) 40%, rgba(48, 200, 192, 0.16) 70%, rgba(48, 200, 192, 0) 100%);
  transition: scale 160ms ease;
}

/* Llama: lengua principal hacia arriba y otra más pequeña, girada (se lee como llama, no como bola) */
.intro__fatuo-llama {
  width: 26px;
  height: 44px;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse 50% 60% at 50% 66%, rgba(245, 248, 250, 0.95) 0%, rgba(164, 229, 233, 0.88) 38%, rgba(48, 200, 192, 0.5) 70%, rgba(48, 200, 192, 0) 100%);
}

.intro__fatuo-llama::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 60%;
  height: 60%;
  border-radius: inherit;
  background: radial-gradient(ellipse 50% 60% at 50% 66%, rgba(245, 248, 250, 0.85) 0%, rgba(48, 200, 192, 0.5) 45%, rgba(48, 200, 192, 0) 100%);
  transform: translate(-10%, -30%) rotate(18deg);
}

.intro__fatuo > .intro__fatuo-llama { transform: translate(-50%, -72%); }

.intro__fatuo-nucleo {
  width: 12px;
  height: 12px;
  background: radial-gradient(closest-side, rgba(245, 248, 250, 1) 0%, rgba(164, 229, 233, 0.9) 60%, rgba(48, 200, 192, 0) 100%);
  box-shadow: 0 0 10px 3px rgba(164, 229, 233, 0.75), 0 0 22px 6px rgba(48, 200, 192, 0.3);
}

.intro__fatuo.is-sobre-boton .intro__fatuo-halo { scale: 1.35; }  /* propiedad individual: se suma a la animación del halo */

/* Durante el fundido de salida vuelve el cursor normal: el fuego fatuo no se queda encima (sin dos cursores) */
.intro.is-saliendo .intro__fatuo { display: none; }

/* --- Movimiento propio de la intro (con prefers-reduced-motion la intro no se muestra) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Avance lento de cámara sobre el tablero ya encendido */
  .intro.is-carta .intro__video,
  .intro.is-carta .intro__fin {
    transform: scale(1.12);
  }

  /* desde que cae la carta, el avance sigue hasta el fundido (sin momentos parados) */
  .intro__video { transition: transform 7000ms cubic-bezier(0.35, 0, 0.65, 1); }

  .intro__fin { transition: opacity 600ms linear, transform 7000ms cubic-bezier(0.35, 0, 0.65, 1); }

  /* Las grietas se abren en 0,24 s, brillan y se quedan tenues */
  .intro__grieta { animation: intro-grieta-luz 1300ms ease-out backwards; }

  .intro__grieta path { animation: intro-grieta-abre 240ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

  /* El aspa respira con una luz suave cuando ya está entera */
  .intro__tarjeta.is-visible .intro__rotulo--x { animation: intro-aspa-luz 2400ms ease-in-out 3000ms infinite alternate; }

  /* La carta CAE bajo Ahri: toca suelo al 82 % (7,02 + 0,62 = 7,64 s, golpe de la música), aplasta y se recompone */
  .intro .wisp-carta.is-comprada { animation: intro-carta-cae 760ms backwards; }

  /* pestaña que vuelve con el guion atrasado: la carta aparece ya en su sitio (intro.js) */
  .intro .wisp-carta.is-comprada.is-sin-caida { animation: none; }

  /* La corona y el emblema saltan al tocar suelo; la moneda, el «0» y el destello del panel
     esperan a que se destape (están debajo de la tapa) */
  .intro .wisp-carta.is-comprada .wisp-carta__corona { animation-delay: 560ms; }

  .intro .wisp-carta.is-comprada .wisp-carta__emblema { animation-delay: 600ms; }

  .intro .wisp-carta.is-comprada .wisp-carta__emblema::after { animation-delay: 640ms; }

  .intro .wisp-carta.is-comprada .wisp-carta__emblema::before { animation-delay: 1000ms; }

  .intro .wisp-carta.is-comprada .wisp-carta__moneda,
  .intro .wisp-carta.is-comprada .wisp-carta__cero,
  .intro .wisp-carta.is-comprada .wisp-carta__panel::after { animation: none; }

  .intro .wisp-carta.is-destapada .wisp-carta__panel::after { animation: wisp-destello 900ms var(--ease-salida) 450ms backwards; }

  .intro .wisp-carta.is-destapada .wisp-carta__moneda { animation: wisp-moneda 900ms var(--ease-salida) 600ms backwards; }

  .intro .wisp-carta.is-destapada .wisp-carta__cero { animation: wisp-cero 560ms var(--ease-rebote) 1000ms backwards; }

  /* La tapa invita: el «?» late y un reflejo la cruza */
  .intro .wisp-carta.is-comprada .wisp-carta__tapa-signo { animation: intro-signo 900ms ease-in-out 700ms 3; }

  .intro .wisp-carta__tapa::before {
    content: "";
    position: absolute;
    inset: -10% auto -10% 0;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 226, 154, 0) 0%, rgba(255, 226, 154, 0.22) 50%, rgba(255, 226, 154, 0) 100%);
    transform: translateX(-140%) skewX(-14deg);
  }

  .intro .wisp-carta.is-comprada .wisp-carta__tapa::before { animation: intro-reflejo 1100ms ease-in-out 800ms 2; }

  /* El brillo del marco se guarda para el brillo agudo (11,62 s, .is-brillo): la moneda da otra
     vuelta, el «0» salta y el brillo recorre el marco */
  .intro .wisp-carta.is-comprada .wisp-carta__brillo,
  .intro .wisp-carta.is-comprada .wisp-carta__brillo::before { animation: none; }

  .intro .wisp-carta.is-brillo .wisp-carta__brillo { animation: intro-brillo 1300ms linear backwards; }

  .intro .wisp-carta.is-brillo .wisp-carta__brillo::before { animation: intro-brillo-vuelta 1300ms cubic-bezier(0.45, 0, 0.35, 1) backwards; }

  .intro .wisp-carta.is-brillo .wisp-carta__moneda { animation: intro-moneda 820ms var(--ease-salida); }

  .intro .wisp-carta.is-brillo .wisp-carta__cero { animation: intro-cero 560ms var(--ease-rebote) 300ms; }

  /* Aviso discreto de que hay música: si el navegador no la dejó sonar, un aro azul late tres
     veces alrededor de «Activar sonido» */
  .intro__sonido[aria-pressed="false"]::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--color-teal);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: intro-aviso-sonido 1500ms ease-out 1200ms 3;
  }

  /* El fuego fatuo titila y, al soltar el rayo, da un fogonazo */
  .intro__fatuo-llama { animation: intro-fatuo-llama 420ms ease-in-out infinite alternate; }

  .intro__fatuo-halo { animation: intro-fatuo-halo 1100ms ease-in-out infinite alternate; }

  .intro__fatuo.is-lanza .intro__fatuo-halo { animation: intro-fatuo-lanza 420ms ease-out; }
}

@keyframes intro-grieta-abre {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes intro-grieta-luz {
  0% { filter: drop-shadow(0 0 12px rgba(255, 79, 163, 1)) brightness(1.8); }
  100% { filter: drop-shadow(0 0 4px rgba(255, 79, 163, 0.7)) brightness(1); }
}

@keyframes intro-carta-cae {
  0% {
    opacity: 1;
    transform: translate3d(0, -62vh, 0) rotate(-5deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.4);
  }
  82% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1.06, 0.9);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.3);
  }
  100% { opacity: 1; transform: none; }
}

@keyframes intro-aspa-luz {
  from { filter: drop-shadow(0 0 0.24em rgba(48, 200, 192, 0.8)) drop-shadow(0 0.04em 0 rgba(18, 8, 26, 0.9)); }
  to { filter: drop-shadow(0 0 0.5em rgba(48, 200, 192, 1)) drop-shadow(0 0.04em 0 rgba(18, 8, 26, 0.9)); }
}

@keyframes intro-signo {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes intro-reflejo {
  from { transform: translateX(-140%) skewX(-14deg); }
  to { transform: translateX(360%) skewX(-14deg); }
}

@keyframes intro-aviso-sonido {
  0% { opacity: 0; transform: scale(0.97); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes intro-brillo {
  0%, 100% { opacity: 0; }
  12%, 82% { opacity: 1; }
}

@keyframes intro-brillo-vuelta {
  from { transform: rotate(-222deg); }
  to { transform: rotate(138deg); }
}

@keyframes intro-moneda {
  0% { transform: translate3d(0, 0, 0) rotateY(0deg) scale(1); }
  45% { transform: translate3d(0, -0.4em, 0) rotateY(-200deg) scale(1.14); }
  100% { transform: translate3d(0, 0, 0) rotateY(-360deg) scale(1); }
}

@keyframes intro-cero {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.32); }
  75% { transform: scale(0.94); }
}

@keyframes intro-fatuo-llama {
  from { transform: translate(-50%, -72%) scale(0.92, 1.04) rotate(-4deg); opacity: 0.85; }
  to { transform: translate(-50%, -76%) scale(1.05, 0.94) rotate(4deg); opacity: 1; }
}

@keyframes intro-fatuo-halo {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0.8; }
  to { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes intro-fatuo-lanza {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(2.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}

/* --- Pantallas verticales: la liga parte en tres líneas y lo demás va debajo, con el orden y la jerarquía de la
       foto (su referencia es de escritorio), sin taparse nada: las espátulas en su franja bajo el título (asoman
       un poco por detrás de la última línea, como en escritorio); las tres líneas a la izquierda y Ahri a la
       derecha; la carta abajo, en el centro ------------------------------------------------------------------- */
@media (max-aspect-ratio: 1/1) {
  .intro__escena { --titulo-intro: min(9.4vw, 5.2vh, 4rem); }

  .intro__laterales {
    --lat: clamp(0.8125rem, min(3.9vw, 2.05vh), 1.25rem);
    --ahri-ancho: min(40vw, 20vh);
    --carta-talla: clamp(0.5rem, min(2.75vw, 1.25vh), 0.82rem);
    --esp-alto: min(27vw, 12.5vh);
    --fin-titulo: calc(var(--arriba-titulo) + var(--titulo-intro) * 4.8);
    --fila-arriba: calc(var(--fin-titulo) + var(--esp-alto) * 0.85 + 1vh);
  }

  .intro__espatulas {
    left: 0;
    right: 0;
    top: calc(var(--fin-titulo) - var(--esp-alto) * 0.15);
    width: calc(var(--esp-alto) * 1974 / 635);
    margin-inline: auto;
  }

  .intro__lateral--izq {
    inset: auto;
    top: var(--fila-arriba);
    left: var(--gutter);
    width: 56%;
    display: grid;
    justify-items: start;
    row-gap: 0.55em;
  }

  .intro__dato,
  .intro__dato--equipos,
  .intro__dato--ganador,
  .intro__dato--pregunta {
    position: relative;
    inset: auto;
  }

  .intro__ahri {
    top: var(--fila-arriba);
    right: var(--gutter);
  }

  /* el aviso, colgado bajo Ahri y más ancho hacia la izquierda (ahí ya no hay líneas): dos renglones en vez de
     cuatro. Fuera del flujo para que no ensanche a Ahri */
  .intro__ahri-aviso {
    position: absolute;
    top: calc(100% + var(--esp-1));
    right: 0;
    width: max-content;
    max-width: min(60vw, 15rem);
    text-align: end;
  }

  .intro__carta {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2.5vh);
  }

  /* el vídeo sobra más por los lados: el temblor no destapa los bordes en un móvil vertical */
  .intro__video,
  .intro__fin { transform: scale(1.06); }
}

/* Móviles bajos en vertical (375 × 667): Ahri, las espátulas y la carta algo más pequeñas para que quepa todo */
@media (max-aspect-ratio: 1/1) and (max-height: 740px) {
  .intro__laterales {
    --ahri-ancho: min(32vw, 17vh);
    --carta-talla: clamp(0.5rem, min(2.75vw, 1.1vh), 0.82rem);
    --esp-alto: min(27vw, 10.5vh);
  }
}

/* Móviles MUY bajos en vertical (375 × 553: iPhone SE con las barras de Safari; 360 × 600: Android con la barra de
   Chrome): un escalón más, para que el aviso de Riot no pise «¿Acertarás?» ni la corona de la carta */
@media (max-aspect-ratio: 1/1) and (max-height: 640px) {
  .intro__laterales {
    --ahri-ancho: min(27vw, 14vh);
    --esp-alto: min(24vw, 8vh);
    --carta-talla: clamp(0.45rem, min(2.4vw, 0.92vh), 0.75rem);
    --lat: clamp(0.75rem, min(3.6vw, 1.9vh), 1.1rem);
  }

  .intro__ahri-aviso { max-width: min(46vw, 11rem); }
}

/* --- Desde tablet: botones al tamaño normal --------------------------------------------- */
@media (min-width: 768px) {
  .intro {
    --intro-arriba: calc(env(safe-area-inset-top, 0px) + var(--esp-4) + var(--alto-btn) + var(--esp-3));
  }

  .intro__controles { gap: var(--esp-3); }

  .intro__saltar,
  .intro__sonido {
    min-height: var(--alto-btn);
    padding-inline: var(--esp-5);
    font-size: var(--texto-m);
  }
}

/* --- Móvil en horizontal (alto muy corto): todo más pequeño; bajo el título, las tres líneas a la izquierda, Ahri
       a la derecha y la carta en el centro (no caben unos debajo de otros) ------------------------------------- */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .intro {
    --intro-arriba: calc(env(safe-area-inset-top, 0px) + var(--esp-3) + var(--alto-btn-s) + var(--esp-2));
  }

  .intro__escena {
    --titulo-intro: min(8.6vh, 3.6vw);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--esp-3));
  }

  .intro__controles { top: calc(env(safe-area-inset-top, 0px) + var(--esp-3)); }

  .intro__saltar,
  .intro__sonido {
    min-height: var(--alto-btn-s);
    padding: var(--esp-2) var(--esp-4);
    font-size: var(--texto-s);
  }

  .intro__rotulos { margin-top: 0; }

  .intro__laterales {
    --lat: 0.875rem;
    --ahri-ancho: min(19vw, 29vh);
    --carta-talla: 0.5rem;
    --arriba-titulo: var(--intro-arriba);
    --fila-arriba: calc(var(--fin-titulo) + 3vh);
  }

  .intro__espatulas {
    left: 0;
    right: 0;
    width: 36%;                 /* bajo la liga y por encima de la corona de la carta */
    margin-inline: auto;
  }

  .intro__lateral--izq {
    inset: auto;
    top: var(--fila-arriba);
    left: var(--gutter);
    display: grid;
    justify-items: start;
    row-gap: 0.55em;
  }

  .intro__dato,
  .intro__dato--equipos,
  .intro__dato--ganador,
  .intro__dato--pregunta {
    position: relative;
    inset: auto;
  }

  .intro__ahri {
    top: var(--fila-arriba);
    right: var(--gutter);
  }

  .intro__carta {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--esp-3));
  }
}

/* --- Colores forzados (alto contraste de Windows): textos en el color del sistema y la tapa opaca;
       sin degradados, las letras transparentes no se verían ------------------------------------------ */
@media (forced-colors: active) {
  .intro__rotulo--marca,
  .intro__rotulo--liga,
  .intro__dato--pregunta .intro__dato-texto {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }

  .intro .wisp-carta__tapa {
    forced-color-adjust: none;
    background: Canvas;
    border: 2px solid CanvasText;
  }
}

/* --- Hueco de la barra de desplazamiento (escritorio, barras clásicas): html lo reserva
       (scrollbar-gutter: stable, base.css, contra el CLS) y la intro, fija, no puede pintarlo. Mientras
       la intro está en el DOM, ese hueco va del fondo de la intro y no del azul de la página ----------- */
html:has(> body > #intro) { background-color: var(--color-noche-morada); }

/* --- Impresión: la intro nunca sale en papel --------------------------------------- */
@media print {
  .intro { display: none; }
}