/* ============================================================================
   wisp.css — carta de Wisp (fuego fatuo) de MejorIA · intro v3 (02/10/2026)
   Componente propio y autónomo: no depende de intro.css ni de layout.css.
   Marcado, uso y medidas: brief/v3/CARTA-WISP.md · dibujos SVG: _scripts/wisp_carta.py

   Qué es: la carta de un Wisp de la tienda de TFT (Set 18) contada con dibujo propio:
   panel de madera oscura, corona de hojas y enredaderas, emblema arriba, descripción en
   crema, y pie con el nombre a la izquierda y la moneda con el coste a la derecha.
   v4 (Josema 03/10): el emblema es el icono de la tienda que pasó él (una imagen, no un
   SVG propio) y la carta de la intro va sin la etiqueta «Wisp» (su icono y su filete).

   Piezas
     .wisp                    carta + línea pequeña de debajo (la línea va FUERA de la carta)
     .wisp-carta              carta grande (intro). Mide 21,5 em de ancho: se escala
                              entera con font-size (variable --wisp-talla)
     .wisp-carta--mini        insignia compacta (hero): emblema · textos · moneda y coste
     .wisp-nota               línea pequeña bajo la carta (intro.carta.nota), con su propio
                              velo para ir sobre vídeo
   Estados (los pone el JS de quien la use)
     .is-espera               oculta, «en la tienda»: solo donde luego se vaya a comprar
     .is-comprada             visible; con movimiento, sube desde abajo, gira la moneda,
                              rebota el 0 y un brillo recorre el marco (2,0 s; el halo del
                              emblema late tres veces más, hasta los 4,8 s, y se para)

   Color: tokens de tokens.css. Las maderas salen de mezclar --color-estrella-bronce con
   negro (color-mix; sin hexadecimales en este fichero) y los rgba() repiten los RGB de
   los tokens porque sombras, luces y degradados necesitan alfa (fondo-0 1,10,19 ·
   teal 48,200,192 · cyan 0,209,194 · fatuo 164,229,233 · oro-brillo 255,226,154 ·
   titulo 240,230,210 · metal 200,170,110). Los verdes de las hojas van dentro del SVG.

   Movimiento: solo transform y opacity, y solo dentro de
   @media (prefers-reduced-motion: no-preference). Sin bucles infinitos.

   CONTRASTE (WCAG 2.x). Medido el 02/10/2026 en Edge sobre los píxeles pintados (peor
   píxel del fondo de cada línea de texto; método y tabla en brief/v3/CARTA-WISP.md §6).
   El panel es opaco: lo que la carta lleve detrás no cambia el contraste de su texto.
   Carta: etiqueta (metal) 6,9:1 · frase (crema) 13,6:1 · lema (oro) 10,0:1 ·
   nombre (crema) 15,7:1 · coste (oro brillo) 14,0:1. Insignia: frase 10,6:1 ·
   lema 8,4:1 · coste 15,3:1. Nota (texto-2 sobre su velo): 11,5:1 sobre el fondo de la
   página, 8,0:1 sobre el plano K4 de la película y 7,1:1 sobre blanco puro (calculado).
   ========================================================================== */

/* --- Contenedor: carta + línea de debajo -------------------------------------- */
/* Mide lo que la carta: la nota se ajusta a ese ancho (no lo ensancha). Quien la use la
   coloca con justify-self o margin-inline: auto. */
.wisp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: var(--esp-3);
  inline-size: fit-content;
  max-inline-size: 100%;
}

/* --- Carta --------------------------------------------------------------------- */
.wisp-carta {
  /* Maderas: sin color-mix la carta sale en el azul noche de la interfaz (igual de legible) */
  --wisp-madera-1: var(--color-superficie-2);
  --wisp-madera-2: var(--color-superficie-1);
  --wisp-madera-3: var(--color-fondo-1);
  --wisp-pie-1: var(--color-fondo-1);
  --wisp-pie-2: var(--color-fondo-0);
  --wisp-marco-madera: var(--color-metal-sombra);
  --wisp-marco: 0.15em;               /* grosor del marco */
  --wisp-radio: 1.3em;
  --wisp-junta: 0.55em;               /* radio de las esquinas donde se tocan panel y pie */

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  row-gap: var(--wisp-marco);
  box-sizing: border-box;
  inline-size: 21.5em;
  margin-block-start: 3.5em;          /* sitio para la corona, que sobresale por arriba */
  padding: var(--wisp-marco);
  border-radius: var(--wisp-radio);
  /* 390×844 → 16 px (carta de 344 px) · 1440×900 → 24 px (516 px) · 1280×720 → 20 px ·
     móvil apaisado → 13 px. El alto de la ventana también manda: la carta nunca la llena.
     El tope final de 4,1vw garantiza que cabe a lo ancho aunque la persona tenga el texto
     del navegador muy ampliado (el mínimo en rem crecería más que la ventana). */
  font-size: var(--wisp-talla, min(clamp(0.8125rem, min(4.1vw, 2.8vh), 1.5rem), 4.1vw));
  line-height: 1.2;
  text-align: start;
  color: var(--color-titulo);
  background: linear-gradient(
    165deg,
    var(--color-metal) 0%,
    var(--wisp-marco-madera) 18%,
    var(--color-metal-sombra) 52%,
    var(--wisp-marco-madera) 82%,
    var(--color-metal) 100%
  );
  box-shadow: 0 0 0 1px rgba(1, 10, 19, 0.85), var(--sombra-2);
}

@supports (color: color-mix(in srgb, black, white)) {
  .wisp-carta {
    --wisp-madera-1: color-mix(in srgb, var(--color-estrella-bronce) 26%, black);
    --wisp-madera-2: color-mix(in srgb, var(--color-estrella-bronce) 17%, black);
    --wisp-madera-3: color-mix(in srgb, var(--color-estrella-bronce) 12%, black);
    --wisp-pie-1: color-mix(in srgb, var(--color-estrella-bronce) 9%, black);
    --wisp-pie-2: color-mix(in srgb, var(--color-estrella-bronce) 6%, black);
    --wisp-marco-madera: color-mix(in srgb, var(--color-estrella-bronce) 62%, black);
  }
}

.wisp-carta p { margin: 0; }

/* Zócalo del emblema: media luna de madera que sube del borde superior, como el arco de
   la carta del juego. Se recorta por debajo para fundirse con el panel. */
.wisp-carta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  box-sizing: border-box;
  inline-size: 4.5em;
  block-size: 4.5em;
  margin: -2.25em 0 0 -2.25em;
  border: var(--wisp-marco) solid var(--wisp-marco-madera);
  border-radius: 50%;
  background: var(--wisp-madera-1);
  clip-path: inset(0 0 calc(50% - var(--wisp-marco) - 1px) 0);
  pointer-events: none;
}

/* --- Panel de la descripción ---------------------------------------------------- */
.wisp-carta__panel {
  position: relative;
  display: grid;
  align-content: start;
  row-gap: 0.5em;
  min-inline-size: 0;
  padding: 2.95em 1.5em 1.3em;
  overflow: hidden;                    /* recorta el destello que cruza el panel */
  border-radius:
    calc(var(--wisp-radio) - var(--wisp-marco))
    calc(var(--wisp-radio) - var(--wisp-marco))
    var(--wisp-junta)
    var(--wisp-junta);
  background:
    radial-gradient(ellipse 62% 52% at 50% 0%, rgba(48, 200, 192, 0.16) 0%, rgba(48, 200, 192, 0) 72%),
    linear-gradient(180deg, var(--wisp-madera-1) 0%, var(--wisp-madera-2) 46%, var(--wisp-madera-3) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(1, 10, 19, 0.6),
    inset 0 0.14em 0 rgba(240, 230, 210, 0.07),
    inset 0 -1.4em 1.8em rgba(1, 10, 19, 0.3);
}

/* Los textos pueden encoger: si un día no cabe una frase unida con espacios de no
   separación, se parte (overflow-wrap de base.css) en vez de salirse y quedar recortada */
.wisp-carta__panel > * { min-inline-size: 0; }

/* Destello diagonal que cruza el panel al comprarla (parado y transparente en reposo) */
.wisp-carta__panel::after {
  content: "";
  position: absolute;
  inset-block: -20%;
  inset-inline-start: 0;
  inline-size: 36%;
  background: linear-gradient(
    100deg,
    rgba(240, 230, 210, 0) 0%,
    rgba(240, 230, 210, 0.1) 38%,
    rgba(255, 226, 154, 0.26) 50%,
    rgba(240, 230, 210, 0.1) 62%,
    rgba(240, 230, 210, 0) 100%
  );
  opacity: 0;
  transform: translateX(-130%) skewX(-14deg);
  pointer-events: none;
}

/* Etiqueta de tipo: icono de categoría + «Wisp» (Cinzel: es un sello) + filete */
.wisp-carta__tipo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--fuente-sello);
  font-weight: 700;
  font-size: min(max(0.6875rem, 0.74em), 1em);   /* nunca menos de 11 px ni más que la talla */
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-metal);
}

.wisp-carta__tipo::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(90deg, var(--color-borde-metal), rgba(200, 170, 110, 0));
}

.wisp-carta__categoria {
  flex: none;
  inline-size: 2em;
  block-size: 2em;
}

/* Descripción, línea 1: el ahorro (intro.carta.claim). A 2,05 em «factura 20 €/mes» no
   cabe en una línea, así que el corte cae siempre tras «factura» (en Edge, text-wrap:
   balance partía «Baja tu / factura 20 €/mes» con la carta a 13 px: medido el 02/10) */
.wisp-carta__claim {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 2.05em;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-titulo);
  text-wrap: balance;
}

/* Descripción, línea 2: el lema (intro.carta.lema), con una chispa dibujada delante.
   Sangría francesa: si el lema ocupa dos líneas, la segunda empieza bajo el texto. */
.wisp-carta__lema {
  --wisp-chispa-aire: 0.45em;
  padding-inline-start: calc(0.72em + var(--wisp-chispa-aire));
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1.12em;
  line-height: 1.25;
  text-indent: calc(-0.72em - var(--wisp-chispa-aire));
  color: var(--color-oro);
}

.wisp-carta__lema::before {
  content: "";
  display: inline-block;
  inline-size: 0.72em;
  block-size: 0.72em;
  margin-inline-end: var(--wisp-chispa-aire);
  background: var(--color-oro-brillo);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* --- Pie: nombre a la izquierda, moneda y coste a la derecha ---------------------- */
.wisp-carta__pie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9em;
  min-inline-size: 0;
  padding: 0.5em 1.15em 0.55em 1.5em;
  border-radius:
    var(--wisp-junta)
    var(--wisp-junta)
    calc(var(--wisp-radio) - var(--wisp-marco))
    calc(var(--wisp-radio) - var(--wisp-marco));
  background: linear-gradient(180deg, var(--wisp-pie-1) 0%, var(--wisp-pie-2) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(1, 10, 19, 0.6),
    inset 0 0.12em 0 rgba(240, 230, 210, 0.06);
}

.wisp-carta__nombre {
  font-family: var(--fuente-sello);
  font-weight: 800;
  font-size: 1.24em;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--color-titulo);
}

.wisp-carta__coste {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex: none;
}

.wisp-carta__moneda {
  flex: none;
  inline-size: 1.8em;
  block-size: 1.8em;
}

.wisp-carta__cero {
  display: inline-block;
  min-inline-size: 0.62em;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 2em;
  line-height: 1;
  text-align: center;
  color: var(--color-oro-brillo);
}

/* --- Dibujos: corona de hojas, emblema y brillo del marco -------------------------- */
/* La corona mide 486 unidades por 430 de la carta (sobresale 28 por cada lado y 70 por
   arriba); los porcentajes, también el del margen, se calculan sobre el ancho de la carta.
   Los números salen de _scripts/wisp_carta.py (css_corona): si cambia el dibujo, cambian. */
.wisp-carta__corona {
  position: absolute;
  top: 0;
  left: -6.512%;
  z-index: 2;
  inline-size: 113.023%;
  max-inline-size: none;
  block-size: auto;
  aspect-ratio: 486 / 256;            /* la del viewBox, por si algún navegador no la deduce */
  margin-top: -16.279%;
  overflow: visible;
  pointer-events: none;
}

/* v4 (Josema 03/10): el emblema es el icono de la tienda que pasó Josema (corona de hojas de oro y
   bolsa; assets/img/intro/emblema-tienda.webp, 256 px), un poco mayor que el fuego fatuo de antes
   porque la corona de hojas ocupa su lado izquierdo. La insignia del hero (si un día entra) sigue
   aceptando el SVG.
   4.ª ronda (Josema 03/10: «el icono de la parte de arriba, centrado»): en el icono original el aro de la
   bolsa no está en el centro de la imagen (las hojas tiran a la izquierda: centro del aro medido en 154, 151
   de 256). La imagen se ha vuelto a montar en un lienzo de 308 px con el ARO en el centro (misma escala), así
   que esta caja crece en la misma proporción (5,3 → 6,377 em) y el aro cae justo en el eje de la carta, con el
   halo y la onda concéntricos con él. La altura del aro no cambia. */
.wisp-carta__emblema {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  inline-size: 6.377em;
  block-size: 6.377em;
  margin: -2.912em 0 0 -3.188em;
  pointer-events: none;
}

.wisp-carta__emblema svg,
.wisp-carta__emblema img {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  overflow: visible;
}

.wisp-carta__emblema img { object-fit: contain; }

/* Halo de oro del emblema: la luz que cae sobre las hojas y el panel */
.wisp-carta__emblema::before {
  content: "";
  position: absolute;
  inset: -6.5%;                       /* mismo tamaño de halo que antes (7,2 em), ahora centrado en el aro */
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 154, 0.5) 0%, rgba(248, 179, 63, 0.24) 46%, rgba(248, 179, 63, 0) 100%);
  opacity: 0.6;
}

/* Onda de luz que suelta el emblema al llegar. En reposo no se ve. */
.wisp-carta__emblema::after {
  content: "";
  position: absolute;
  inset: 15.9%;                       /* misma onda que antes (4,35 em), concéntrica con el aro */
  border: 0.13em solid rgba(255, 226, 154, 0.95);
  border-radius: 50%;
  opacity: 0;
}

/* Brillo que recorre el marco: anillo del grosor del marco (máscara) con un haz cónico
   dentro que da una vuelta. En reposo no se ve. */
.wisp-carta__brillo {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 0.2em;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  mask-composite: exclude;
}

.wisp-carta__brillo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  inline-size: 140%;
  aspect-ratio: 1;
  margin: -70% 0 0 -70%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 226, 154, 0) 0deg,
    rgba(255, 226, 154, 0) 285deg,
    rgba(255, 226, 154, 0.85) 335deg,
    rgba(240, 230, 210, 1) 352deg,
    rgba(255, 226, 154, 0) 360deg
  );
  transform: rotate(-222deg);          /* el haz arranca en la esquina de la moneda */
}

/* --- Insignia compacta (hero): emblema · textos · moneda y coste ------------------- */
.wisp-carta--mini {
  --wisp-radio: 1.05em;
  --wisp-junta: 0.4em;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  column-gap: var(--wisp-marco);
  row-gap: 0;
  inline-size: fit-content;
  max-inline-size: calc(100% - 1.7em);
  margin-block-start: 0.6em;
  margin-inline-start: 1.7em;         /* sitio para el emblema, que sobresale por la izquierda */
  /* 320 px → 12 px · 390 px → 14 px (el ahorro cabe en una línea) · desde 445 px → 16 px.
     Tope final como en la carta grande: con el texto del navegador ampliado no crece más
     de lo que cabe (3,75vw son 12 px a 320 px: no recorta el mínimo normal). */
  font-size: var(--wisp-talla, min(clamp(0.75rem, 3.6vw, 1rem), 3.75vw));
  box-shadow: 0 0 0 1px rgba(1, 10, 19, 0.85), var(--sombra-1);
}

.wisp-carta--mini::before { content: none; }

.wisp-carta--mini .wisp-carta__corona { display: none; }

.wisp-carta--mini .wisp-carta__emblema {
  top: 50%;
  left: 0;
  inline-size: 5.173em;               /* misma escala que antes con la imagen de 308 px (aro centrado) */
  block-size: 5.173em;
  margin: -2.587em 0 0 -1.75em;
}

.wisp-carta--mini .wisp-carta__panel {
  align-content: center;
  row-gap: 0.12em;
  padding: 0.5em 0.9em 0.55em 2.95em;
  border-radius:
    calc(var(--wisp-radio) - var(--wisp-marco))
    var(--wisp-junta)
    var(--wisp-junta)
    calc(var(--wisp-radio) - var(--wisp-marco));
  background:
    radial-gradient(ellipse 46% 120% at 0% 50%, rgba(48, 200, 192, 0.18) 0%, rgba(48, 200, 192, 0) 72%),
    linear-gradient(180deg, var(--wisp-madera-1) 0%, var(--wisp-madera-2) 60%, var(--wisp-madera-3) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(1, 10, 19, 0.6),
    inset 0 0.14em 0 rgba(240, 230, 210, 0.07);
}

.wisp-carta--mini .wisp-carta__claim {
  font-size: 1.1em;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.wisp-carta--mini .wisp-carta__lema {
  --wisp-chispa-aire: 0.35em;
  font-size: min(max(0.75rem, 0.86em), 1em);   /* nunca menos de 12 px ni más que el ahorro */
  line-height: 1.2;
}

.wisp-carta--mini .wisp-carta__pie {
  gap: 0;
  padding: 0.4em 0.85em 0.4em 0.7em;
  border-radius:
    var(--wisp-junta)
    calc(var(--wisp-radio) - var(--wisp-marco))
    calc(var(--wisp-radio) - var(--wisp-marco))
    var(--wisp-junta);
}

.wisp-carta--mini .wisp-carta__moneda {
  inline-size: 1.6em;
  block-size: 1.6em;
}

.wisp-carta--mini .wisp-carta__cero { font-size: 1.7em; }

/* En la insignia, la etiqueta «Wisp» y el nombre siguen en el texto (lectores de pantalla)
   pero no se pintan: el hueco es para el ahorro y el lema */
.wisp-carta--mini .wisp-carta__tipo,
.wisp-carta--mini .wisp-carta__nombre {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Línea pequeña bajo la carta (fuera de ella) ------------------------------------- */
/* Velo propio: sobre el peor fondo posible (blanco puro) el texto queda a 7,1:1 */
.wisp-nota {
  box-sizing: border-box;
  max-inline-size: 100%;
  margin: 0;
  padding: 0.4em 1em;
  border-radius: var(--radio-m);
  background: rgba(1, 10, 19, 0.82);
  font-family: var(--fuente-cuerpo);
  font-weight: 500;
  font-size: var(--texto-xs);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  color: var(--color-texto-2);
}

/* Variante sin velo, para fondos lisos (la insignia del hero) */
.wisp-nota--plana {
  padding: 0;
  border-radius: 0;
  background: none;
  text-align: start;
}

/* Dentro de .wisp la nota mide lo que la carta (no participa en el ancho del contenedor) */
.wisp > .wisp-nota {
  inline-size: 0;
  min-inline-size: 100%;
}

/* --- Estados ------------------------------------------------------------------------ */
/* En espera no se ven ni la carta ni su nota; al comprarla aparecen las dos */
.wisp-carta.is-espera,
.wisp-carta.is-espera ~ .wisp-nota {
  visibility: hidden;
  opacity: 0;
}

.wisp-carta.is-comprada,
.wisp-carta.is-comprada ~ .wisp-nota {
  visibility: visible;
  opacity: 1;
}

/* --- Compra: solo transform y opacity, y solo si la persona no ha pedido menos movimiento.
       Todo acaba en el estado de reposo (fill backwards): al terminar no queda ninguna
       animación mandando sobre la carta y quien la use puede moverla o fundirla. --------- */
@media (prefers-reduced-motion: no-preference) {
  .wisp-carta.is-comprada {
    animation: wisp-compra 700ms var(--ease-rebote) backwards;
  }

  .wisp-carta.is-comprada .wisp-carta__corona {
    transform-origin: 50% 85%;
    animation: wisp-corona 760ms var(--ease-rebote) 90ms backwards;
  }

  .wisp-carta.is-comprada .wisp-carta__emblema {
    animation: wisp-emblema 640ms var(--ease-rebote) 220ms backwards;
  }

  .wisp-carta.is-comprada .wisp-carta__emblema::before {
    animation: wisp-halo 1400ms ease-in-out 620ms 3 backwards;
  }

  .wisp-carta.is-comprada .wisp-carta__emblema::after {
    animation: wisp-onda 760ms var(--ease-salida) 560ms backwards;
  }

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

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

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

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

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

  /* La nota llega cuando la carta ya se ha posado */
  .wisp-carta.is-comprada ~ .wisp-nota {
    animation: wisp-nota 420ms var(--ease-salida) 760ms backwards;
  }

  /* La insignia llega con menos recorrido: está en mitad de la página, no en una tienda */
  .wisp-carta--mini.is-comprada {
    animation-name: wisp-compra-mini;
  }
}

@keyframes wisp-compra {
  0% { opacity: 0; transform: translate3d(0, 58%, 0) scale(0.86) rotate(-3deg); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

@keyframes wisp-compra-mini {
  0% { opacity: 0; transform: translate3d(0, 90%, 0) scale(0.9); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes wisp-corona {
  0% { opacity: 0; transform: translate3d(0, 16%, 0) scale(0.9); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes wisp-emblema {
  0% { opacity: 0; transform: scale(0.2) rotate(-28deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes wisp-halo {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.22); }
}

@keyframes wisp-onda {
  0% { opacity: 0; transform: scale(0.8); }
  12% { opacity: 0.95; }
  100% { opacity: 0; transform: scale(2.7); }
}

@keyframes wisp-moneda {
  0% { opacity: 0; transform: translate3d(0, 0.5em, 0) rotateY(-720deg) scale(0.6); }
  22% { opacity: 1; }
  58% { transform: translate3d(0, -0.3em, 0) rotateY(-200deg) scale(1.12); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0deg) scale(1); }
}

@keyframes wisp-cero {
  0% { opacity: 0; transform: scale(0.3); }
  55% { opacity: 1; transform: scale(1.3); }
  78% { transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

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

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

@keyframes wisp-nota {
  from { opacity: 0; transform: translate3d(0, 0.6em, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes wisp-destello {
  0% { opacity: 0; transform: translateX(-130%) skewX(-14deg); }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(310%) skewX(-14deg); }
}

/* --- Alto contraste (colores forzados): el sistema quita fondos y sombras y pone su color
       al texto. La carta se queda sin madera, así que se dibuja con líneas del color del
       texto para que siga siendo una carta con su pie. ----------------------------------- */
@media (forced-colors: active) {
  .wisp-carta {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  .wisp-carta__pie { border-block-start: 2px solid CanvasText; }

  .wisp-carta--mini .wisp-carta__pie {
    border-block-start: 0;
    border-inline-start: 2px solid CanvasText;
  }

  .wisp-carta__lema::before {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .wisp-nota { border: 1px solid CanvasText; }

  .wisp-nota--plana { border: 0; }
}

/* --- Impresión: sin sombras ni luces; el texto de la carta se queda ----------------- */
@media print {
  .wisp-carta { box-shadow: none; }
  .wisp-carta__emblema::before,
  .wisp-carta__emblema::after,
  .wisp-carta__brillo { display: none; }
}