/* ---- TAROT (tarot.html) ----
   Hero del handoff "Héroes de Sección": el abanico de cartas real
   (assets/cartas/) sustituye el placeholder de texto anterior. */
/* ---- Utilidad accesible: oculta visualmente sin quitar del árbol de
   accesibilidad (label de #pregunta-texto). Copia local mínima, mismo
   patrón que index.html/astrologia.html/mi-universo.html. ---- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hero-tarot{
  position:relative;min-height:min(92vh,780px);overflow:visible;
  padding:150px 32px 0;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;
}
.hero-tarot-glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 900px 480px at 50% 108%, rgba(237,237,235,0.24), transparent 65%);
}
body.page-veloris .hero-tarot-glow{
  background:radial-gradient(ellipse 900px 480px at 50% 108%, var(--s6), transparent 65%);
}
.hero-tarot-copy{position:relative;z-index:1;text-align:center;max-width:720px;}
.hero-tarot-abanico{
  position:relative;z-index:1;margin-top:auto;padding-top:64px;
  display:flex;justify-content:center;align-items:flex-end;height:220px;width:100%;
}
.hero-tarot-abanico img{
  position:absolute;bottom:-90px;width:150px;border-radius:10px;
  border:1px solid rgba(237,237,235,0.4);box-shadow:0 20px 44px rgba(0,0,0,0.2);
  transform:translateX(var(--tx)) rotate(var(--rot));transform-origin:50% 130%;
  z-index:var(--tz,1);
  transition:transform 0.35s var(--ease-premium);
}
body.page-veloris .hero-tarot-abanico img{
  border-color:var(--s4);box-shadow:0 20px 44px rgba(0,0,0,0.35);
}
.hero-tarot-abanico img.destacada{
  bottom:-78px;border-color:rgba(237,237,235,0.5);
  box-shadow:0 24px 50px rgba(0,0,0,0.24), 0 0 40px rgba(237,237,235,0.18);
}
body.page-veloris .hero-tarot-abanico img.destacada{
  border-color:var(--s3);
  box-shadow:0 24px 50px rgba(0,0,0,0.4), 0 0 40px var(--s6);
}
.hero-tarot-abanico img:hover{transform:translateX(var(--tx)) rotate(var(--rot)) translateY(-22px);z-index:5;}
@media (max-width:720px){
  .hero-tarot-abanico img{width:100px;}
  .hero-tarot-abanico img.lateral{display:none;}
}

#tarot-mesa-cta{text-align:center;}
.tarot-mesa-visual{
  width:100%;max-width:320px;margin:0 auto 28px;
  border-radius:8px;overflow:hidden;
  border:1px solid rgba(237,237,235,0.3);
  box-shadow:0 20px 50px rgba(0,0,0,0.2);
}
body.page-veloris .tarot-mesa-visual{
  border-color:var(--s4);box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.tarot-mesa-visual img{width:100%;display:block;}

.tiradas-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.tirada-card{
  padding:28px;text-align:center;
  border:1px solid var(--border);border-radius:8px;
  background:var(--surface);
  font-family:inherit;color:inherit;cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.tirada-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.tirada-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.tirada-card.disponible{border-color:rgba(237,237,235,0.3);}
/* Escopado a #tarot-tiradas (landing) a propósito: .tirada-card también
   se reutiliza dentro de #screen-selector (#ritual-cards), que pertenece
   a la experiencia inmersiva y queda fuera de alcance de E4.2. */
body.page-veloris #tarot-tiradas .tirada-card.disponible{border-color:var(--s4);}
.tirada-card-nombre{font-family:'Fraunces','Georgia',serif;font-size:17px;margin-bottom:8px;}
.tirada-card-desc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px;}
.tirada-card-estado{
  font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);opacity:0.8;
}
.tirada-card:not(.disponible) .tirada-card-estado{color:var(--muted);opacity:0.6;}

.historial-empty{
  text-align:center;padding:48px 24px;
  border:1px dashed var(--border);border-radius:8px;
}
.historial-empty p{
  font-family:'Fraunces','Georgia',serif;font-style:italic;font-weight:300;
  color:var(--muted);font-size:15px;
}

@media (max-width:820px){
  .tiradas-grid{grid-template-columns:1fr;}
}

/* ============================================================
   LA MESA — experiencia inmersiva sin vídeos: overlays translúcidos
   sobre el fondo espacial Three.js compartido del sitio. Ritual:
   umbral → barajar → elegir 3 del abanico → voltear → lectura.
   Ver js/modules/tarot-mesa.js.
   ============================================================ */

/* ---- CANVAS PARTÍCULAS + DESTELLO DE TRANSICIÓN ---- */
#fx-canvas{
  position:fixed;inset:0;
  pointer-events:none;z-index:100;
}
#transition-flash{
  position:fixed;inset:0;z-index:15;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 58%,
    rgba(237,237,235,0.95) 0%,
    rgba(237,237,235,0.4) 32%,
    rgba(237,237,235,0) 72%);
}
body.page-veloris #transition-flash{
  background:radial-gradient(circle at 50% 58%,
    rgba(237,237,235,0.95) 0%,
    rgba(237,237,235,0.4) 32%,
    rgba(237,237,235,0) 72%);
}
#transition-flash.active{
  animation:epicFlash 1.2s ease-out forwards;
}
@keyframes epicFlash{
  0%{opacity:0;}
  14%{opacity:1;}
  100%{opacity:0;}
}

/* ---- SALIR DEL RITUAL ----
   Único control de cierre visible en toda la experiencia; oculto por
   completo fuera de ella (display:none, no solo opacity) para no dejar
   un elemento fantasma tabulable sobre la página de marketing. */
.btn-salir-experiencia{
  display:none;
  position:fixed;top:20px;right:20px;z-index:20;
  width:38px;height:38px;
  align-items:center;justify-content:center;
  background:rgba(237,237,235,0.55);border:1px solid rgba(237,237,235,0.3);border-radius:50%;
  color:var(--ink);font-size:16px;line-height:1;cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium);
}
body.experience-active .btn-salir-experiencia{display:flex;}
.btn-salir-experiencia:hover{border-color:var(--gold);color:var(--gold);}
.btn-salir-experiencia:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---- PANTALLA: EL UMBRAL (concentrar la pregunta) ----
   Translúcida a propósito: el starfield del sitio sigue visible detrás —
   la experiencia vive en el mismo universo, no en un vídeo aparte. */
#screen-umbral{
  position:fixed;inset:0;z-index:9;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:24px;
  background:radial-gradient(ellipse at 50% 42%, rgba(237,237,235,0.55) 0%, rgba(237,237,235,0.92) 100%);
  opacity:0;pointer-events:none;
  transform:scale(1);filter:blur(0);
  transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium), filter var(--dur-slow) var(--ease-premium);
}
body.page-veloris #screen-umbral{
  background:radial-gradient(ellipse at 50% 42%, rgba(8,8,12,0.55) 0%, rgba(8,8,12,0.92) 100%);
}
/* Halo de luz dorada (Leonardo, assets/editorial/umbral-sigilo.webp) girando
   muy lento tras el título — la única presencia visual del umbral. Luz
   pura, sin símbolos: espiritual, no ritual. */
#screen-umbral::before{
  content:'';
  position:absolute;left:50%;top:42%;
  width:min(62vh,560px);aspect-ratio:1;
  margin-left:calc(min(62vh,560px) / -2);
  margin-top:calc(min(62vh,560px) / -2);
  background:url('../../assets/editorial/umbral-sigilo.webp') center/cover;
  border-radius:50%;
  opacity:0.22;
  mix-blend-mode:screen;
  animation:haloSpin 90s linear infinite;
  pointer-events:none;
}
@keyframes haloSpin{to{transform:rotate(360deg);}}
#screen-umbral.show{opacity:1;pointer-events:auto;}
/* Efecto "atravesar el umbral": el umbral se precipita hacia el
   espectador y se disuelve (zoom fuerte + blur), justo cuando la mesa
   (abajo) empieza a crecer desde el fondo — la sensación es de cruzar un
   portal, no de un simple cambio de pantalla. */
#screen-umbral.leaving{opacity:0;transform:scale(1.22);filter:blur(10px);}

/* ---- PANTALLAS: EL RITUAL (selector) Y LA PREGUNTA ----
   Mismo overlay translúcido que el umbral (screen-portal), sin el halo
   giratorio — son un paso más del mismo cruce de portal, no una pantalla
   distinta. Del handoff "La Mesa - Experiencia": elegir el ritual y
   sostener la pregunta pasan a vivir dentro de la inmersión, no en un
   selector de chips discreto como antes. */
.screen-portal{
  position:fixed;inset:0;z-index:9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;box-sizing:border-box;
  background:radial-gradient(ellipse at 50% 42%, rgba(237,237,235,0.55) 0%, rgba(237,237,235,0.92) 100%);
  opacity:0;pointer-events:none;
  transform:scale(1);filter:blur(0);
  transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium), filter var(--dur-slow) var(--ease-premium);
}
body.page-veloris .screen-portal{
  background:radial-gradient(ellipse at 50% 42%, rgba(8,8,12,0.55) 0%, rgba(8,8,12,0.92) 100%);
}
.screen-portal.show{opacity:1;pointer-events:auto;}
.screen-portal.leaving{opacity:0;transform:scale(1.22);filter:blur(10px);}

.selector-inner, .pregunta-inner{max-width:720px;width:100%;}
#ritual-cards{
  display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:12px;
}
#ritual-cards .tirada-card{width:250px;}
body.page-veloris #ritual-cards .tirada-card.disponible{border-color:var(--s4);}

.pregunta-textarea{
  width:100%;max-width:460px;box-sizing:border-box;
  padding:18px 20px;background:var(--surface);border:1px solid var(--border);border-radius:4px;
  color:var(--ink);font-family:'Fraunces','Georgia',serif;font-size:18px;line-height:1.5;
  text-align:center;outline:none;resize:none;
  transition:border-color var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium);
}
.pregunta-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(237,237,235,0.12);}
body.page-veloris .pregunta-textarea:focus{box-shadow:0 0 0 3px rgba(237,237,235,0.12);}
.pregunta-contador{text-align:right;font-size:11px;color:var(--muted);max-width:460px;margin:6px auto 0;}
.pregunta-actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px;}
.pregunta-skip{
  font-family:inherit;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  background:none;border:none;padding:8px 4px;cursor:pointer;
}
.pregunta-skip:hover{color:var(--gold);}

@media (max-width:720px){
  #ritual-cards .tirada-card{width:100%;max-width:320px;}
}

.wordmark-enter{
  font-size:13px;font-weight:500;
  letter-spacing:6px;text-transform:uppercase;
  color:var(--gold);margin-bottom:24px;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-slow) var(--ease-premium) 0.4s, transform var(--dur-slow) var(--ease-premium) 0.4s;
}
#screen-umbral.show .wordmark-enter{opacity:0.9;transform:translateY(0);}

.enter-title{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;
  font-size:28px;letter-spacing:0.2px;
  margin-bottom:10px;text-align:center;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-slow) var(--ease-premium) 0.6s, transform var(--dur-slow) var(--ease-premium) 0.6s;
}
#screen-umbral.show .enter-title{opacity:1;transform:translateY(0);}

.enter-sub{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:17px;color:var(--muted);margin-bottom:52px;
  opacity:0;transition:opacity var(--dur-slow) var(--ease-premium) 0.8s;
}
#screen-umbral.show .enter-sub{opacity:1;}
#screen-umbral .btn-enter{
  opacity:0;transition:opacity var(--dur-slow) var(--ease-premium) 1s,
    border-color var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
#screen-umbral.show .btn-enter{opacity:1;}

/* ---- PANTALLA: MESA ----
   Sin vídeo: el fondo es el starfield del sitio, atenuado, más un pozo
   de luz dorada abajo — la "mesa" es luz, no un decorado. */
#screen-mesa{
  position:fixed;inset:0;z-index:8;
  overflow:hidden;
  background:rgba(237,237,235,0.72);
  opacity:0;pointer-events:none;
  /* Nace más lejos/pequeña (antes 1.07 — casi sin recorrido) y crece
     hacia el espectador al mismo tiempo que el umbral se disuelve
     encima: la continuidad entre ambos movimientos es lo que vende el
     "cruce de portal". */
  transform:scale(0.86);filter:blur(9px);
  transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium), filter var(--dur-slow) var(--ease-premium);
}
body.page-veloris #screen-mesa{
  background:rgba(8,8,12,0.72);
}
#screen-mesa.show{opacity:1;pointer-events:auto;transform:scale(1);filter:blur(0);}

/* Respiración lenta de vela — la mesa nunca queda del todo quieta, ni
   siquiera mientras se lee la interpretación (antes la luz era estática
   por completo). Sutil a propósito: es ambiente, no protagonismo. */
#mesa-luz{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 95% 52% at 50% 112%, rgba(237,237,235,0.16) 0%, transparent 62%),
    radial-gradient(ellipse 55% 30% at 50% 116%, rgba(237,237,235,0.12) 0%, transparent 55%);
  animation:mesaLuzBreathe 7s ease-in-out infinite;
}
body.page-veloris #mesa-luz{
  background:
    radial-gradient(ellipse 95% 52% at 50% 112%, var(--s6) 0%, transparent 62%),
    radial-gradient(ellipse 55% 30% at 50% 116%, var(--s6) 0%, transparent 55%);
}
@keyframes mesaLuzBreathe{
  0%,100%{opacity:1;}
  50%{opacity:0.72;}
}
/* Superficie de la mesa (Leonardo, assets/editorial/mesa-superficie.webp):
   terciopelo con estrellas doradas — imagen generada para la paleta oscura
   anterior, pendiente de regenerar para Enmienda 4 (ver arquitectura/
   veloris-sistema-de-marca.md §6). Opacidad muy rebajada como tratamiento
   provisional (0.5→0.16) para que no lea como un bloque oscuro sobre el
   nuevo fondo claro, en vez de forzar una imagen para la que no se diseñó. */
#mesa-luz::before{
  content:'';
  position:absolute;left:0;right:0;bottom:0;height:58%;
  background:url('../../assets/editorial/mesa-superficie.webp') center bottom/cover;
  opacity:0.16;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 40%, transparent 100%);
  mask-image:linear-gradient(to top, rgba(0,0,0,1) 40%, transparent 100%);
}
#mesa-hud{
  position:absolute;top:28px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  z-index:5;
}
.wordmark-mesa{
  font-size:12px;font-weight:500;
  letter-spacing:5px;text-transform:uppercase;
  color:var(--gold);opacity:0.8;
}
#mesa-instruccion{
  font-size:13px;color:var(--muted);letter-spacing:0.3px;
  margin-top:6px;text-align:center;
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-premium);
}
#mesa-instruccion.show{opacity:1;}

/* ---- EL MAZO — pila de dorsos respirando en el centro de la escena ---- */
#deck-zone{
  position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:36px;
  z-index:6;
  transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium);
}
#deck-zone.hide{opacity:0;pointer-events:none;transform:translate(-50%,-46%) scale(0.94);}
#deck{
  position:relative;
  width:118px;aspect-ratio:130/197;
  animation:deckBreath 4.5s ease-in-out infinite;
}
@keyframes deckBreath{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.deck-card{
  position:absolute;inset:0;
  border-radius:8px;
  background:linear-gradient(rgba(8,8,12,0.55),rgba(8,8,12,0.55)), var(--void-2) url('../../assets/cartas/caratula-cartas.webp') center/cover;
  border:1px solid rgba(237,237,235,0.35);
  box-shadow:0 10px 30px rgba(0,0,0,0.22);
}
body.page-veloris .deck-card{
  background:linear-gradient(rgba(8,8,12,0.35),rgba(8,8,12,0.35)), var(--void-2) url('../../assets/cartas/caratula-cartas.webp') center/cover;
  border-color:var(--s4);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.deck-card:nth-child(1){transform:translate(6px,7px) rotate(2.5deg);}
.deck-card:nth-child(2){transform:translate(-5px,5px) rotate(-2deg);}
.deck-card:nth-child(3){transform:translate(3px,3px) rotate(1deg);}
.deck-card:nth-child(4){transform:translate(-2px,1px) rotate(-0.5deg);}
/* Barajado: las cartas de la pila se cruzan y reasientan */
#deck.shuffling .deck-card{animation:shuffleCard 0.95s var(--ease-card-flip) both;}
#deck.shuffling .deck-card:nth-child(odd){animation-name:shuffleCardAlt;}
#deck.shuffling .deck-card:nth-child(2){animation-delay:0.06s;}
#deck.shuffling .deck-card:nth-child(3){animation-delay:0.12s;}
#deck.shuffling .deck-card:nth-child(4){animation-delay:0.18s;}
#deck.shuffling .deck-card:nth-child(5){animation-delay:0.24s;}
@keyframes shuffleCard{
  0%{transform:translate(0,0) rotate(0);}
  45%{transform:translate(72px,-26px) rotate(13deg);}
  100%{transform:translate(0,0) rotate(0);}
}
@keyframes shuffleCardAlt{
  0%{transform:translate(0,0) rotate(0);}
  45%{transform:translate(-72px,-14px) rotate(-11deg);}
  100%{transform:translate(0,0) rotate(0);}
}

.btn-ritual{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:3px;
  text-transform:uppercase;color:var(--ink);
  background:var(--surface);
  border:1px solid rgba(237,237,235,0.5);
  padding:16px 40px;border-radius:2px;
  cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium), opacity var(--dur-base) var(--ease-premium);
}
/* .btn-ritual es compartida por #btn-elegir-cartas (#screen-pregunta,
   E4.3) y #btn-barajar (#screen-mesa, E4.4) — cada pantalla lleva su
   propio override escopado para no depender de que ambas migren juntas. */
body.page-veloris #screen-pregunta .btn-ritual{
  background:var(--s2);border-color:var(--s3);color:var(--void);
}
body.page-veloris #screen-mesa .btn-ritual{
  background:var(--s2);border-color:var(--s3);color:var(--void);
}
.btn-ritual:hover{
  border-color:var(--gold);color:var(--gold-soft);
}
.btn-ritual:disabled{opacity:0.4;cursor:default;}

/* ---- EL ABANICO — cartas boca abajo de las que se eligen 3 ----
   Cada carta pivota desde muy por debajo del borde inferior
   (transform-origin 50% 300%), formando el arco. --rot la fija JS. */
#fan-layer{
  position:absolute;inset:0;
  z-index:7;pointer-events:none;
}
.fan-card{
  position:absolute;left:50%;bottom:36px;
  width:96px;aspect-ratio:130/197;
  margin-left:-48px;
  padding:0;border:none;background:none;cursor:pointer;
  transform-origin:50% 300%;
  transform:rotate(var(--rot,0deg)) translateX(var(--push,0px)) translateY(var(--lift,0px));
  transition:transform var(--dur-base) var(--ease-card-flip), opacity var(--dur-base) var(--ease-premium);
  pointer-events:auto;
  opacity:0;
}
.fan-card.in{opacity:1;}
.fan-card-face{
  display:block;width:100%;height:100%;
  border-radius:7px;
  background:linear-gradient(rgba(8,8,12,0.55),rgba(8,8,12,0.55)), var(--void-2) url('../../assets/cartas/caratula-cartas.webp') center/cover;
  border:1px solid rgba(237,237,235,0.3);
  box-shadow:0 8px 24px rgba(0,0,0,0.22);
  transition:border-color var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium);
}
body.page-veloris .fan-card-face{
  background:linear-gradient(rgba(8,8,12,0.35),rgba(8,8,12,0.35)), var(--void-2) url('../../assets/cartas/caratula-cartas.webp') center/cover;
  border-color:var(--s4);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.fan-card:hover,.fan-card:focus-visible{--lift:-30px;}
.fan-card:hover .fan-card-face,.fan-card:focus-visible .fan-card-face{
  border-color:rgba(237,237,235,0.8);
  box-shadow:0 14px 34px rgba(0,0,0,0.24);
}
body.page-veloris .fan-card:hover .fan-card-face,body.page-veloris .fan-card:focus-visible .fan-card-face{
  border-color:var(--s2);
  box-shadow:0 14px 34px rgba(0,0,0,0.4);
}
.fan-card:focus-visible{outline:none;}
.fan-card.picked{
  --lift:-90px;
  opacity:0;
  transition:transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-premium);
}
.fan-card.retired{opacity:0;--lift:24px;pointer-events:none;}
@media (max-width:720px){
  .fan-card{width:64px;margin-left:-32px;bottom:24px;}
  #deck{width:92px;}
}

/* Las 3 cartas elegidas (Pasado/Presente/Futuro); cada una se voltea
   al pincharla. */
#cards-layer{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:6;
}
/* Tiradas de muchas cartas (cruz celta): cartas más pequeñas y etiquetas
   discretas. Con 10 cartas a solo 8.5% de ancho, un nombre largo en una
   sola línea (white-space:nowrap) se sale del hueco y se solapa con la
   carta vecina — aquí se permite el salto de línea y se acota el ancho
   al de la propia carta, con margen de sobra a los lados (min-width). */
#cards-layer.compact .card-slot{width:8.5%;}
#cards-layer.compact .card-label{
  font-size:8.5px;letter-spacing:0.6px;line-height:1.4;
  white-space:normal;min-width:130px;text-align:center;
}
@media (max-width:720px){
  #cards-layer.compact .card-slot{width:15%;}
  #cards-layer.compact .card-label{min-width:90px;font-size:8px;}
}

/* Vuelo real desde la carta elegida en el abanico hasta su hueco en la
   tirada — antes la carta ya nacía en su posición final y solo hacía
   fade+scale in situ (el "vuelo" solo lo sugería la estela de polvo). Las
   variables --fly-x/--fly-y/--fly-rot las fija JS (elegirCarta/crearSlot)
   con el offset real en px entre el origen (abanico) y el destino. */
.card-slot{
  position:absolute;
  width:12.5%;
  aspect-ratio:130/197;
  transform:translate(calc(-50% + var(--fly-x,0px)), calc(-50% + var(--fly-y,0px))) scale(0.42) rotate(var(--fly-rot,6deg));
  opacity:0;
  pointer-events:none;
  transition:opacity 0.55s var(--ease-premium), transform 1.05s var(--ease-card-flip);
}
.card-slot.dealt{
  opacity:1;
  transform:translate(-50%,-50%) scale(1) rotate(0deg);
}

.card-inner{
  width:100%;height:100%;
  position:relative;
  pointer-events:auto;
  perspective:1400px;
  transform-style:preserve-3d;
  transition:transform 1.1s var(--ease-card-flip);
  cursor:pointer;
}
/* Boca abajo, la carta levita — respira hasta que la voltean. El delay
   por índice (--float-delay, lo fija JS) desincroniza las cartas. */
.card-slot.dealt:not(.revealed) .card-inner{
  animation:cardFloat 7s ease-in-out var(--float-delay,0s) infinite;
}
@keyframes cardFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.card-inner.charging{animation:charge 0.55s ease-in-out;}
@keyframes charge{
  0%,100%{filter:drop-shadow(0 0 0 rgba(237,237,235,0));}
  50%{filter:drop-shadow(0 0 22px rgba(237,237,235,0.7));}
}
/* Duplicado en vez de recolorear el keyframe original: @keyframes no se
   puede escopear con un selector body.page-veloris, así que el destello
   dorado se conserva intacto para cualquier contexto sin migrar. */
@keyframes charge-veloris{
  0%,100%{filter:drop-shadow(0 0 0 rgba(237,237,235,0));}
  50%{filter:drop-shadow(0 0 22px rgba(237,237,235,0.7));}
}
body.page-veloris .card-inner.charging{animation-name:charge-veloris;}
.card-inner.flipped{
  transform:rotateY(180deg);
  cursor:default;
}
/* .card-inner ahora es focusable (role="button", ver crearSlot() en
   tarot-mesa.js) — antes era un <div> sin ningún indicador de foco. */
.card-inner:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}

.card-slot:not(.revealed):hover .card-glow{ opacity:0.35; }
.card-slot:not(.revealed):hover .card-back{
  border-color:rgba(237,237,235,0.7);
  filter:brightness(1.2);
}
body.page-veloris .card-slot:not(.revealed):hover .card-back{
  border-color:var(--s2);
}

.card-face{
  position:absolute;inset:0;
  border-radius:8px;
  backface-visibility:hidden;
  overflow:hidden;
}
.card-back{
  background:linear-gradient(rgba(8,8,12,0.55),rgba(8,8,12,0.55)), var(--void-2) url('../../assets/cartas/caratula-cartas.webp') center/cover;
  border:1px solid rgba(237,237,235,0.25);
  transition:border-color var(--dur-micro) var(--ease-premium), filter var(--dur-micro) var(--ease-premium);
}
body.page-veloris .card-back{
  background:linear-gradient(rgba(8,8,12,0.35),rgba(8,8,12,0.35)), var(--void-2) url('../../assets/cartas/caratula-cartas.webp') center/cover;
  border-color:var(--s4);
}

.card-front{
  transform:rotateY(180deg);
  background:var(--void-2);
  border:1px solid rgba(237,237,235,0.2);
  box-shadow:0 8px 30px rgba(0,0,0,0.32);
}
.card-front img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-card-flip);
}
/* Carta invertida — la imagen gira 180º sobre su propio eje (independiente
   del flip boca-arriba de .card-front), como al voltear una carta física
   que ya salió del mazo boca abajo. */
.card-front.invertida img{transform:rotate(180deg);}

/* Movimiento sobre la ilustración fija (mazo Rider-Waite, dominio público):
   la imagen no se puede animar por dentro, así que el movimiento vive en
   una capa encima — paneo/zoom lento tipo Ken Burns + brillo ambiental,
   igual que hace Tarotoo con su fondo. Dos variantes (normal/invertida)
   en vez de una sola porque la rotación de 180º ya vive en el transform
   de la imagen y una animation sustituye por completo cualquier transform
   estático — dos keyframes, uno con el giro incluido, es más simple que
   añadir un contenedor envolvente solo para esto. */
@keyframes ken-burns{
  0%,100%{ transform:scale(1) translate(0,0); }
  50%{ transform:scale(1.08) translate(-1.2%,-1%); }
}
@keyframes ken-burns-invertida{
  0%,100%{ transform:scale(1) translate(0,0) rotate(180deg); }
  50%{ transform:scale(1.08) translate(-1.2%,-1%) rotate(180deg); }
}
.card-slot.revealed .card-front:not(.invertida) img{ animation:ken-burns 16s ease-in-out infinite; }
.card-slot.revealed .card-front.invertida img{ animation:ken-burns-invertida 16s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .card-slot.revealed .card-front img{ animation:none !important; }
}

.card-glow{
  position:absolute;inset:-24px;
  border-radius:16px;pointer-events:none;
  opacity:0;filter:blur(22px);
  background:var(--gold);
  transition:opacity var(--dur-micro) var(--ease-premium), background var(--dur-micro) var(--ease-premium);
  z-index:-1;
}
.card-slot.revealed .card-glow{
  opacity:0.45;
  transition:opacity var(--dur-slow) var(--ease-premium) 0.5s, background var(--dur-micro) var(--ease-premium);
}

.card-label{
  position:absolute;top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:10px;font-weight:500;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold-soft);
  opacity:0.85;
}
.card-slot.revealed .card-label{opacity:1;}

/* ---- PANEL INTERPRETACIÓN ---- */
#panel{
  position:fixed;
  bottom:0;left:0;right:0;
  max-height:42vh;
  --accent:rgba(237,237,235,0.16);
  background:
    radial-gradient(ellipse at 50% 100%, var(--accent) 0%, transparent 62%),
    linear-gradient(to top,
      rgba(237,237,235,0.97) 0%,
      rgba(237,237,235,0.92) 70%,
      transparent 100%
    );
  transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium), background var(--dur-slow) var(--ease-premium);
  padding:32px 40px 36px;
  opacity:0;pointer-events:none;
  transform:translateY(20px);
  overflow-y:auto;
  z-index:20;
}
body.page-veloris #panel{
  --accent:var(--s6);
  background:
    radial-gradient(ellipse at 50% 100%, var(--accent) 0%, transparent 62%),
    linear-gradient(to top,
      rgba(8,8,12,0.97) 0%,
      rgba(8,8,12,0.92) 70%,
      transparent 100%
    );
}
#panel.show{opacity:1;pointer-events:auto;transform:translateY(0);}

.panel-pregunta{
  text-align:center;
  margin:0 0 20px;
}
.panel-pregunta-kicker{
  display:block;
  font-size:11px;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);opacity:0.75;
  margin-bottom:8px;
}
.panel-pregunta-texto{
  display:block;
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;
  font-size:16px;line-height:1.5;
  color:var(--ink);
}
.panel-carta{
  text-align:center;
  font-size:12px;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:10px;
}
.panel-frase{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;
  font-style:italic;font-weight:400;
  color:var(--gold-soft);
  font-size:20px;
  text-align:center;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
  padding-bottom:16px;
}
.panel-texto{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:17px;line-height:1.8;
  color:var(--ink);max-width:680px;
  margin:0 auto;
}
.panel-slides{
  display:none;
  position:relative;
  max-width:620px;margin:0 auto;
  text-align:center;
  cursor:pointer;
  user-select:none;
}
.panel-slides.show{display:block;}
.slide-ornament{
  color:var(--gold);font-size:13px;opacity:0.55;margin-bottom:14px;
  transition:color var(--dur-base) var(--ease-premium);
}
.slide-text{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:19px;line-height:1.7;color:var(--ink);
  min-height:96px;
  display:flex;align-items:center;justify-content:center;
}
.slide-sentence{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-base) var(--ease-premium), transform var(--dur-base) var(--ease-premium);
}
.slide-sentence.in{opacity:1;transform:translateY(0);}
.slide-dots{
  display:flex;gap:7px;justify-content:center;flex-wrap:wrap;
  margin:20px 0 4px;
}
.slide-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(237,237,235,0.25);
  transition:background var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
body.page-veloris .slide-dot{background:var(--s4);}
.slide-dot.active{background:var(--gold);transform:scale(1.4);}
body.page-veloris .slide-dot.active{background:var(--gold);}
.slide-nav{
  position:absolute;top:50%;left:-6px;right:-6px;
  transform:translateY(-50%);
  display:flex;justify-content:space-between;
  pointer-events:none;
}
.slide-btn{
  pointer-events:auto;
  background:none;border:1px solid rgba(237,237,235,0.3);
  color:var(--gold-soft);width:34px;height:34px;border-radius:50%;
  font-size:16px;line-height:1;cursor:pointer;
  opacity:0.7;
  transition:border-color var(--dur-micro) var(--ease-premium), background var(--dur-micro) var(--ease-premium), opacity var(--dur-micro) var(--ease-premium);
}
body.page-veloris .slide-btn{border-color:var(--s4);}
.slide-btn:hover{border-color:var(--gold);background:rgba(237,237,235,0.12);opacity:1;}
body.page-veloris .slide-btn:hover{background:var(--hover-tint);border-color:var(--gold);}
.slide-btn:disabled{opacity:0.15;cursor:default;}

.panel-error{
  text-align:center;
  font-size:14px;color:var(--danger);
  font-family:'Fraunces','Georgia',serif;
  font-style:italic;
}

#panel-actions{
  display:flex;gap:16px;justify-content:center;
  margin-top:24px;opacity:0;
  transition:opacity var(--dur-base) var(--ease-premium);
}
#panel-actions.show{opacity:1;}

/* ---- LOADER API ---- */
#api-loader{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:50;
  display:none;
  flex-direction:column;align-items:center;gap:12px;
}
#api-loader.show{display:flex;}
/* Sello de marca girando — reemplaza los tres puntos pulsantes
   (handoff "Marca - Ajustes" punto 4: el motivo lineal como marcador de
   "cargando" en vez de una animación genérica sin relación con la marca). */
.loader-seal{
  width:22px;height:22px;
  filter:drop-shadow(0 0 8px rgba(237,237,235,0.4));
  animation:loaderSealSpin 3s linear infinite;
}
body.page-veloris .loader-seal{filter:drop-shadow(0 0 8px var(--s3));}
@keyframes loaderSealSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.loader-text{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);
}
@media (prefers-reduced-motion: reduce){
  .loader-seal{animation:none;}
}

@media (prefers-reduced-motion: reduce){
  .card-inner, .card-slot,
  #deck, #deck.shuffling .deck-card, .fan-card,
  .card-slot.dealt:not(.revealed) .card-inner,
  #mesa-luz,
  #screen-umbral::before{animation:none !important;transition:none !important;}
}