:root{--tr-fondo:#1b1340;--tr-oro:#e2b857;--tr-tinta:#f4efe3;--tr-dur:.34s}
/* Tarot: tirada en cruz */
#horoscopo.tarot .tr-guia{font-size:1.5em;min-height:2.6em;margin:0 0 12px;text-align:center;color:#4a4170}
#horoscopo.tarot .tr-lectura li{font-size:1.2em;line-height:1.4}
#horoscopo.tarot .tr-lectura li p{font-size:1em;margin:.35em 0 0;text-align:left}
#horoscopo.tarot .tr-lectura i{display:block;font-style:normal;font-size:.8em;color:#8a6a1c;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
#horoscopo.tarot .tr-lectura .tr-resumen{background:#f1ecff;border-left-color:#4a3a9a}
#horoscopo.tarot .tr-boton{font-size:1.4em}
/* mesa */
.tr-mesa{position:relative;width:100%;max-width:calc((100vh - 70px) * 100 / 78);max-width:calc((100svh - 70px) * 100 / 78);margin:0 auto;aspect-ratio:100/78;border-radius:22px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,#3a2a7a 0%,var(--tr-fondo) 70%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.45),0 6px 22px rgba(30,20,80,.25)}

/* carta: el ancho es un % de la mesa, así todo escala solo */
.tr-carta{position:absolute;left:50%;top:50%;width:20%;aspect-ratio:3/5;border-radius:7% / 4.2%;
  background:#241a55;border:2px solid var(--tr-oro);
  box-shadow:0 2px 5px rgba(0,0,0,.45);
  transition:transform var(--tr-dur) cubic-bezier(.3,.7,.3,1),translate .2s ease,opacity .35s ease;}
.tr-carta::before{content:"";position:absolute;inset:5%;border:1px solid rgba(226,184,87,.75);border-radius:5%;
  background:radial-gradient(circle at 50% 50%,#33266f 0%,#241a55 75%)}
.tr-carta::after{content:"";position:absolute;inset:5%;border-radius:5%;overflow:hidden;
  background:url(/xtras/tarot/reverso.png) center/122% no-repeat;filter:brightness(1.15) saturate(2) contrast(1.2)}
.tr-carta.tr-abierta{background:#f1e2bd center/cover no-repeat;border:0}
.tr-carta.tr-abierta::before,.tr-carta.tr-abierta::after{display:none}
.tr-carta.tr-elevada{translate:0 -9%}
.tr-carta.tr-apagada{opacity:.18}
.tr-carta.tr-oculta{opacity:0;pointer-events:none}

/* zonas de elección */
.tr-monton{position:absolute;top:50%;width:25%;height:50%;transform:translate(-50%,-50%);
  background:none;border:2px dashed transparent;border-radius:14px;cursor:pointer;padding:0;color:var(--tr-tinta);
  font:inherit;display:none;align-items:flex-end;justify-content:center}
.tr-monton span{background:rgba(27,19,64,.85);border:1px solid var(--tr-oro);border-radius:999px;padding:2px 12px;font-size:.95em;transform:translateY(60%)}
.tr-eligiendo .tr-monton{display:flex}
.tr-monton:hover,.tr-monton:focus-visible{border-color:var(--tr-oro);outline:none;background:rgba(226,184,87,.08)}

/* lectura */
.tr-lectura{list-style:none;margin:14px auto 0;padding:0;max-width:760px;text-align:left;display:grid;gap:10px}
.tr-lectura li{background:#fff;border-left:4px solid #d9a43b;border-radius:8px;padding:12px 16px;opacity:0;animation:tr-entra .5s forwards}
.tr-lectura b{color:#4a3a9a}
@keyframes tr-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* controles */
.tr-acciones{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tr-boton{font:inherit;font-size:1.15em;padding:.6em 1.6em;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(#f0c869,#d9a43b);color:#2a1d05;box-shadow:0 3px 10px rgba(120,80,0,.3)}
.tr-boton.tr-sec{background:#fff;color:#4a3a9a;border:2px solid #cfc6ee;box-shadow:none}
.tr-boton:disabled{opacity:.45;cursor:default}
.tr-boton:focus-visible{outline:3px solid #7b5cff;outline-offset:2px}

@media (max-width:520px){.tr-carta{width:21%}.tr-mesa{aspect-ratio:100/132;max-width:calc((100vh - 70px) * 100 / 132);max-width:calc((100svh - 70px) * 100 / 132)}.tr-monton{height:30%}}
@media (prefers-reduced-motion:reduce){:root{--tr-dur:.01s}.tr-carta{transition:none}}

/* cartas ampliables */
#horoscopo.tarot .tr-pista{text-align:center;font-size:1.2em;color:#4a4170;margin:10px 0 0}
.tr-carta.tr-zoom{cursor:zoom-in}
.tr-carta.tr-zoom:hover,.tr-carta.tr-zoom:focus-visible{translate:0 -3%;box-shadow:0 0 0 2px var(--tr-oro),0 6px 14px rgba(0,0,0,.55);outline:none}
.tr-visor{position:fixed;inset:0;z-index:99999;background:rgba(10,6,30,.9);display:flex;align-items:center;justify-content:center;gap:12px;padding:16px}
.tr-visor[hidden]{display:none}
.tr-visor figure{margin:0;text-align:center;color:var(--tr-tinta);max-width:min(90vw,520px)}
.tr-visor img{max-width:100%;max-height:74vh;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.6);background:#f1e2bd}
.tr-visor figcaption{margin-top:12px;font-size:1.3em}
.tr-visor figcaption b{display:block}
.tr-visor figcaption span{display:block;font-size:.8em;color:var(--tr-oro);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.tr-visor button{font:inherit;border:0;cursor:pointer;color:#2a1d05;background:linear-gradient(#f0c869,#d9a43b);border-radius:50%;width:48px;height:48px;font-size:1.8em;line-height:1;flex:none;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.tr-visor button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tr-visor .tr-v-cerrar{position:absolute;top:14px;right:14px;width:44px;height:44px;font-size:1.4em}
@media (max-width:600px){.tr-visor{gap:6px;padding:8px}.tr-visor button:not(.tr-v-cerrar){width:38px;height:38px;font-size:1.5em}}

.tr-carta.tr-voltear{cursor:pointer;animation:tr-latido 1.6s ease-in-out infinite}
.tr-carta.tr-voltear:hover,.tr-carta.tr-voltear:focus-visible{translate:0 -3%;outline:none}
@keyframes tr-latido{0%,100%{box-shadow:0 2px 5px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 2px var(--tr-oro),0 0 18px 4px rgba(226,184,87,.7)}}
@media (prefers-reduced-motion:reduce){.tr-carta.tr-voltear{animation:none;box-shadow:0 0 0 2px var(--tr-oro)}}