/* The public tarot section. The card arrives, turns and floats away with CSS; tarot.js only sets the moments. With reduced motion it fades. */
.rd-tarot { --tarot-noche: #2a2238; --tarot-oro: #c9a45c; }
.rd-tarot__aviso { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-inline-start: 4px solid #b45309; background: #fffbeb; }
/* The table: the card alone at the centre; once turned it drifts left and its words arrive beside it. */
.rd-tarot__mesa { --tarot-carta: 280px; margin: 1.5rem 0 3rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 22px; color: #f4efe6; text-align: center; background: radial-gradient(1.5px 1.5px at 12% 22%, rgb(201 164 92 / 0.8), transparent), radial-gradient(1px 1px at 82% 14%, #fff8, transparent), radial-gradient(1.5px 1.5px at 92% 68%, rgb(201 164 92 / 0.7), transparent), radial-gradient(1px 1px at 22% 84%, #fff7, transparent), radial-gradient(1px 1px at 58% 92%, rgb(201 164 92 / 0.6), transparent), radial-gradient(ellipse at 50% 40%, #41335a, var(--tarot-noche) 72%); }
.rd-tarot__tablero { container-type: inline-size; display: grid; grid-template-columns: var(--tarot-carta) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.rd-tarot__escena { perspective: 1400px; width: var(--tarot-carta); transform: translateX(calc(50cqw - var(--tarot-carta) / 2)); animation: tarot-llega 1.4s ease-out backwards; transition: transform 1.8s cubic-bezier(0.45, 0.05, 0.25, 1); }
.rd-tarot__escena.is-read { transform: translateX(0); }
.rd-tarot__escena.is-entering { animation: tarot-llega 1s ease-out backwards; }
.rd-tarot__escena.is-leaving { animation: tarot-se-va 0.8s ease-in forwards; }
.rd-tarot__escena.is-still, .rd-tarot__carta.is-still { transition: none; }
.rd-tarot__carta { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 1.7s cubic-bezier(0.35, 0.1, 0.25, 1); }
.rd-tarot__carta:focus-visible { outline: 3px solid var(--tarot-oro); outline-offset: 4px; border-radius: 14px; }
.rd-tarot__carta:not(.is-turned) { animation: tarot-respira 6s ease-in-out infinite; }
.rd-tarot__carta.is-turned { transform: rotateY(180deg); }
.rd-tarot__cara { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; backface-visibility: hidden; box-shadow: 0 18px 44px rgb(10 6 20 / 0.55); }
.rd-tarot__dorso { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #4a3a63, var(--tarot-noche) 68%); border: 6px solid var(--tarot-noche); outline: 1px solid var(--tarot-oro); outline-offset: -12px; }
.rd-tarot__sello { width: 44%; aspect-ratio: 1; border: 1px solid var(--tarot-oro); border-radius: 50%; background: radial-gradient(circle at 62% 42%, transparent 34%, var(--tarot-oro) 35%, var(--tarot-oro) 37%, transparent 38%), radial-gradient(circle, rgb(201 164 92 / 0.22), transparent 70%); }
.rd-tarot__frente { transform: rotateY(180deg); background: var(--tarot-noche); }
.rd-tarot__frente img { width: 100%; height: 100%; object-fit: cover; }
.rd-tarot__revelada { text-align: start; }
.rd-tarot__revelada.is-arriving { animation: tarot-aparece 1.4s ease-out both; }
.rd-tarot__revelada.is-going { animation: tarot-se-apaga 0.5s ease-in forwards; }
.rd .rd-tarot__arcano { margin: 0 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tarot-oro); }
.rd .rd-tarot__nombre { margin: 0 0 1rem; font-family: var(--font-serif, serif); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; color: #fff; }
.rd .rd-tarot__resumen { margin: 0 0 1rem; max-width: 34rem; font-size: 1.05rem; line-height: 1.6; color: #e8e1d3; }
.rd .rd-tarot__cuidado { margin: 0 0 1rem; max-width: 34rem; font-size: 0.95rem; font-style: italic; color: #d9cfbd; }
.rd-tarot__acciones { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.75rem; margin-top: 1.5rem; }
.rd .rd-tarot__leer { font-size: 1.1rem; font-weight: 600; color: var(--tarot-oro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.rd .rd-tarot__leer:hover { color: #e4c684; }
.rd-tarot__otra, .rd-tarot__ver { padding: 0; border: 0; background: none; font: inherit; color: #d9cfbd; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: color 0.3s ease, text-decoration-color 0.3s ease; }
.rd-tarot__otra:hover, .rd-tarot__ver:hover { color: #fff; text-decoration-color: currentColor; }
.rd-tarot__otra:focus-visible, .rd-tarot__ver:focus-visible, .rd .rd-tarot__leer:focus-visible, .rd-tarot__fecha summary:focus-visible { outline: 2px solid var(--tarot-oro); outline-offset: 4px; border-radius: 4px; }
.rd .rd-tarot__invitacion { margin: 1.5rem 0 0; font-family: var(--font-serif, serif); font-size: 1.15rem; font-style: italic; color: #e8e1d3; transition: opacity 0.6s ease; }
.rd .rd-tarot__invitacion.is-gone { opacity: 0; }
.rd-tarot__fecha { max-width: 34rem; margin: 1.25rem auto 0; }
.rd-tarot__fecha summary { cursor: pointer; color: #d9cfbd; font-size: 0.95rem; list-style: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.rd-tarot__fecha summary::-webkit-details-marker { display: none; }
.rd-tarot__fecha[open] summary { margin-bottom: 1rem; }
.rd-tarot__fecha-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; }
.rd-tarot__fecha input { min-height: 44px; padding: 0 0.75rem; border: 1px solid rgb(201 164 92 / 0.6); border-radius: 8px; background: rgb(255 255 255 / 0.08); color: #fff; color-scheme: dark; }
.rd-tarot__ver { min-height: 44px; font-weight: 600; color: var(--tarot-oro); }
.rd .rd-tarot__nota { margin: 0.75rem 0 0; font-size: 0.85rem; line-height: 1.5; color: #c9c0b0; }
.rd .rd-tarot__ultima a { color: inherit; text-decoration: underline; }
@keyframes tarot-llega { from { opacity: 0; } to { opacity: 1; } }
@keyframes tarot-se-va { to { opacity: 0; transform: translateX(-120px) rotate(-6deg); } }
@keyframes tarot-aparece { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tarot-se-apaga { to { opacity: 0; } }
@keyframes tarot-subiendo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tarot-flota { from { opacity: 0; transform: translateX(90px) scale(0.97); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes tarot-flota-corto { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tarot-respira { 0%, 100% { transform: translateY(0) rotateY(-4deg); } 50% { transform: translateY(-7px) rotateY(4deg); } }
.rd .rd-tarot__subtitulo { margin: 0 0 1rem; font-size: 1.5rem; }
.rd-tarot__lista { display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0 0 3rem; padding: 0; list-style: none; }
.rd-tarot__lista a { display: block; text-decoration: none; }
.rd-tarot__lista img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 16px rgb(42 34 56 / 0.18); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.rd-tarot__lista a:hover img, .rd-tarot__lista a:focus-visible img { transform: translateY(-6px); box-shadow: 0 14px 26px rgb(42 34 56 / 0.26); }
.rd-tarot__numero { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: #57534e; }
.rd-tarot__etiqueta { display: block; font-weight: 600; }
.rd-tarot__hoja { display: grid; gap: 2rem; align-items: start; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); margin-top: 1rem; }
.rd-tarot__lamina { position: sticky; top: 1rem; margin: 0; }
.rd-tarot__lamina img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 14px 34px rgb(42 34 56 / 0.28); animation: tarot-flota 1.8s cubic-bezier(0.25, 0.7, 0.3, 1) both; }
.rd-tarot__texto { animation: tarot-subiendo 1.3s ease-out 0.8s both; }
.rd-tarot__texto .rd-lectura { margin-top: 1rem; }
.rd .rd-tarot__numerologia { margin-top: 1.5rem; }
/* Fixed places, so the first and the last card keep theirs and nothing is left alone on a line. */
.rd-tarot__vecinas { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "anterior volver siguiente"; align-items: center; gap: 1rem; margin: 2.5rem 0; padding-top: 1.5rem; border-top: 1px solid var(--rd-linea-suave); }
.rd-tarot__anterior { grid-area: anterior; }
.rd-tarot__volver { grid-area: volver; text-align: center; font-weight: 600; }
.rd-tarot__siguiente { grid-area: siguiente; text-align: end; }
@media (max-width: 720px) {
    .rd-tarot__mesa { --tarot-carta: 220px; padding: 1.5rem 1.25rem; }
    .rd-tarot__tablero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; justify-items: center; }
    .rd-tarot__escena, .rd-tarot__escena.is-read { transform: none; }
    .rd-tarot__revelada { width: 100%; }
    .rd-tarot__hoja { grid-template-columns: minmax(0, 1fr); }
    .rd-tarot__vecinas { grid-template-columns: 1fr 1fr; grid-template-areas: "anterior siguiente" "volver volver"; }
    .rd-tarot__lamina { position: static; max-width: 260px; margin-inline: auto; }
    .rd-tarot__lamina img { animation-name: tarot-flota-corto; }
}
@media (prefers-reduced-motion: reduce) {
    .rd-tarot__escena, .rd-tarot__escena.is-entering, .rd-tarot__escena.is-leaving, .rd-tarot__revelada.is-arriving, .rd-tarot__revelada.is-going, .rd-tarot__lamina img, .rd-tarot__texto { animation: none; }
    .rd-tarot__escena { transition: none; }
    .rd-tarot__lista img { transition: none; }
    .rd-tarot__lista a:hover img, .rd-tarot__lista a:focus-visible img { transform: none; }
    .rd-tarot__carta, .rd-tarot__carta:not(.is-turned) { animation: none; transition: none; transform: none; }
    .rd-tarot__carta.is-turned { transform: none; }
    .rd-tarot__cara { backface-visibility: visible; transition: opacity 0.4s ease; }
    .rd-tarot__frente { transform: none; opacity: 0; }
    .rd-tarot__carta.is-turned .rd-tarot__frente { opacity: 1; }
    .rd-tarot__carta.is-turned .rd-tarot__dorso { opacity: 0; }
}