/* Tirada en vivo (Q1): barajar, abanico boca abajo, ranuras de la tirada y lectura escribiéndose. */
.tirada.en-vivo{display:block}
.vivo{margin-top:8px;min-width:0}
.vivo h2{margin-bottom:12px}
.vivo h2:focus,.vivo-titulo-lectura:focus{outline:none}
.vivo .solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.vivo-instruccion{color:#d0cfd6;max-width:620px}
.vivo-cuenta{color:var(--oro);font-size:.9rem;min-height:1.5em}

/* Barajar: dos mitades del mazo que se cruzan, como en las manos. */
.vivo-barajando{position:relative;height:170px;margin:28px auto;width:120px}
.vivo-dorso,.naipe{border:1px solid #947e58;border-radius:9px;background:repeating-linear-gradient(45deg,transparent,transparent 9px,#d8bc8410 9px,#d8bc8410 10px),#1c2333;color:var(--oro);display:grid;place-items:center;box-shadow:0 6px 18px #0007}
.vivo-dorso{position:absolute;inset:0 15px;font-size:1.6rem;animation:vivo-mezcla .55s ease-in-out 2 alternate}
.vivo-dorso:nth-child(odd){animation-name:vivo-mezcla-otra}
.vivo-dorso:nth-child(2){animation-delay:.06s}.vivo-dorso:nth-child(3){animation-delay:.12s}.vivo-dorso:nth-child(4){animation-delay:.18s}.vivo-dorso:nth-child(5){animation-delay:.24s}.vivo-dorso:nth-child(6){animation-delay:.3s}.vivo-dorso:nth-child(7){animation-delay:.36s}
@keyframes vivo-mezcla{50%{transform:translateX(-46px) rotate(-8deg)}}
@keyframes vivo-mezcla-otra{50%{transform:translateX(46px) rotate(8deg)}}

/* Cortar: el mazo quieto, con un halo de vela, espera el toque; al cortarlo, la mitad de arriba pasa abajo. */
.vivo-corte{display:flex;flex-direction:column;align-items:center;text-align:center;margin:18px 0 6px}
.vivo-corte .vivo-instruccion{font-family:"Fraunces",Georgia,serif;font-size:1.2rem;line-height:1.5;color:#e2d2b4;max-width:460px}
.vivo-mazo{position:relative;width:118px;height:180px;margin:22px auto 14px;padding:0;border:0;border-radius:12px;background:none;box-shadow:0 0 50px #d8bc8426;animation:vivo-respira 3.2s ease-in-out infinite}
.vivo-mazo:focus-visible{outline-offset:8px}
.vivo-mazo-capa{position:absolute;inset:0;border:1px solid #947e58;border-radius:12px;box-shadow:0 6px 16px #0008;transition:transform .6s cubic-bezier(.5,0,.3,1)}
.vivo-mazo-capa:nth-child(1){transform:translate(-6px,6px)}.vivo-mazo-capa:nth-child(2){transform:translate(-3px,3px)}.vivo-mazo-capa:nth-child(3){transform:none}.vivo-mazo-capa:nth-child(4){transform:translate(3px,-3px)}
.vivo-mazo.cortando{animation:none;cursor:default}
.vivo-mazo.cortando .vivo-mazo-capa:nth-child(3),.vivo-mazo.cortando .vivo-mazo-capa:nth-child(4){animation:vivo-corta .75s cubic-bezier(.5,0,.3,1) both}
.vivo-mazo.cortando .vivo-mazo-capa:nth-child(4){animation-delay:.05s}
.vivo-mazo:disabled{opacity:1}
@keyframes vivo-respira{50%{box-shadow:0 0 70px #d8bc8440}}
@keyframes vivo-corta{45%{transform:translate(92px,-14px) rotate(6deg)}100%{transform:translate(-9px,9px);z-index:-1}}

/* El abanico: se desliza de lado si no cabe; nunca desborda la página. */
.abanico{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#947e58 transparent;padding:26px 4px 18px;margin:6px 0 4px;-webkit-overflow-scrolling:touch}
.abanico-pista{display:flex;width:max-content;padding:0 18px}
.naipe{position:relative;flex:0 0 auto;width:66px;height:106px;padding:0;margin-left:-38px;font-size:1.1rem;transform-origin:50% 140%;transform:rotate(var(--giro,0deg));transition:transform .18s ease,box-shadow .18s ease;animation:vivo-abrir .5s ease-out both;animation-delay:calc(var(--i,0) * 8ms)}
.naipe:first-child{margin-left:0}
.naipe:hover,.naipe:focus-visible{transform:translateY(-18px) rotate(var(--giro,0deg));z-index:2;box-shadow:0 10px 26px #000a,0 0 0 1px var(--oro)}
.naipe:focus-visible{outline-offset:3px}
@keyframes vivo-abrir{from{opacity:0;transform:translateX(calc(var(--i,0) * -26px)) rotate(0)}}
.vivo-teclas{margin-top:4px}

/* Las posiciones de la tirada: cada carta elegida llega a su ranura, boca abajo. */
.vivo-titulo-lectura{margin-top:28px}
.vivo-posiciones{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.vivo-posicion{min-width:0;display:flex;flex-direction:column;gap:12px}
.vivo-ranura{position:relative;width:118px;height:180px;border:1px dashed #555363;border-radius:12px;display:grid;place-items:center;perspective:900px}
.vivo-numero{color:var(--suave);font-family:Georgia,serif;font-size:1.4rem}
.vivo-ranura.ocupada{border:0;animation:vivo-llega .35s ease-out}
.vivo-ranura .carta-giro{width:100%;height:100%;min-height:0;max-width:none;margin:0}
.vivo-ranura .carta-cara{padding:10px;border-radius:12px}
.vivo-ranura .sello-carta{font-size:2.4rem;line-height:1.2}
.vivo-ranura .vivo-nombre{font-family:Georgia,serif;font-size:.95rem;line-height:1.25;color:var(--texto)}
.vivo-ranura .carta-frente .etiqueta{font-size:.7rem;margin-top:6px}
.vivo-ranura .carta-frente.invertida .sello-carta{transform:rotate(180deg)}
.vivo-ranura.revelada .carta-giro{transform:rotateY(180deg)}
/* Revelar: al darse vuelta, un brillo dorado suave, como una vela que se acerca. */
.vivo-ranura .carta-frente{transition:box-shadow .4s}
.vivo-ranura.revelada .carta-frente{animation:vivo-brillo 1.6s ease-out .35s both}
@keyframes vivo-brillo{0%{box-shadow:0 0 0 0 #e8d3ac00}35%{box-shadow:0 0 34px 6px #e8d3ac66,0 0 0 1px #e8d3acaa}100%{box-shadow:0 0 18px 0 #d8bc8424,0 0 0 1px #d8bc8455}}
@keyframes vivo-llega{from{opacity:0;transform:translateY(-24px) scale(.9)}}
.vivo-lectura .etiqueta{margin-bottom:8px}
.vivo-lectura h4{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.3rem;color:var(--oro);margin:6px 0 10px}
.vivo-lectura p{font-size:.94rem;color:#d0cfd6}
.vivo-texto.escribiendo::after{content:"▍";color:var(--oro);margin-left:2px;animation:vivo-cursor 1s steps(1) infinite}
@keyframes vivo-cursor{50%{opacity:0}}
.vivo-resto{animation:vivo-aparece .6s ease-out}
@keyframes vivo-aparece{from{opacity:0}}
.vivo-saltar{margin-top:14px}

/* Al leer, cada posición ocupa su fila: la carta a un lado y el texto al otro. */
.vivo-posiciones:has(.abierta){grid-template-columns:minmax(0,1fr);gap:26px}
.vivo-posicion.abierta{flex-direction:row;align-items:flex-start;gap:22px;border-top:1px solid var(--borde);padding-top:22px}
.vivo-posicion.abierta .vivo-ranura{flex:0 0 118px}
.vivo-posicion.abierta .vivo-lectura{flex:1;min-width:0}

@media(max-width:600px){
  .vivo-posiciones{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .vivo-ranura{width:96px;height:148px}
  .vivo-posicion.abierta{flex-direction:column}
  .vivo-posicion.abierta .vivo-ranura{flex-basis:auto}
  .naipe{width:60px;height:96px;margin-left:-34px}
  .naipe:first-child{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .vivo-mazo,.vivo-mazo.cortando .vivo-mazo-capa,.vivo-ranura.revelada .carta-frente{animation:none}
  .vivo-mazo-capa{transition:none}
  .vivo-ranura.revelada .carta-frente{box-shadow:0 0 0 1px #d8bc8455}
  .naipe,.naipe:hover,.naipe:focus-visible{transform:none}
  .naipe:hover,.naipe:focus-visible{box-shadow:0 0 0 2px var(--oro)}
  .vivo-texto.escribiendo::after{content:none}
}
/* W2: el puente a Lucera al cerrar la tirada. */
.vivo-lucera{margin:22px 0 0!important;border-top:1px solid var(--borde);padding-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.vivo-lucera .suave{flex:1 1 260px}
.vivo-lucera .boton{min-height:44px;padding:10px 20px}
#form-tarot{scroll-margin-top:16px}