/* Tarot Preguntas — estilos autónomos (prefijo .tpre), pensados para convivir
   con cualquier tema y con tarot-apps (.tapp), oraculo-apps (.oapp),
   mancia-apps (.mapp) y numerologia-apps (.napp).

   Todos los selectores van precedidos de .tpre: sube la especificidad un
   escalón a todas las reglas por igual (el orden relativo entre ellas no
   cambia) y así una regla del tema del tipo «.entry-content section {...}»
   no le gana a la del plugin. Las cajas que son etiquetas sueltas declaran
   flex-wrap y align-items a mano: lo que no declara el plugin lo declara el
   tema. Nada mide en píxeles fijos. */

/* El width: 100 % no sobra: dentro de un contenedor flex o grid del tema, sin
   él la caja se mide por su contenido y la rejilla del mazo la estira. */
/* container-type para que el reparto del mazo mire el ancho de LA APP y no el
   de la ventana: si el tema la mete en una columna estrecha o en una barra
   lateral, las cartas se recolocan igual. Un navegador que no entienda
   @container se salta esos bloques y se queda con el reparto estrecho, que es
   el que cabe siempre. */
.tpre { width: 100%; max-width: 780px; margin: 0 auto; font-size: 1rem;
        container-type: inline-size; container-name: tpre; }
.tpre * { box-sizing: border-box; }
.tpre [hidden] { display: none !important; }

/* ── Color por categoría ──────────────────────────────────────────────────
   Cada sección de la web tiene el suyo, y el dorso de las cartas va a juego
   (el legacy ya traía la misma trasera en varios colores). */
.tpre            { --tpre-alto: #2a1b52; --tpre-medio: #1a1140; --tpre-bajo: #0b0720;
                   --tpre-luz: #c9b6ff; --tpre-oro: #ffd86b; }
.tpre.tpre-dinero     { --tpre-alto: #0e4d33; --tpre-medio: #0a3122; --tpre-bajo: #04140e;
                   --tpre-luz: #8fe9bf; }
.tpre.tpre-parejas    { --tpre-alto: #5c1c48; --tpre-medio: #3a1030; --tpre-bajo: #150618;
                   --tpre-luz: #ffb3dd; }
.tpre.tpre-amor       { --tpre-alto: #611420; --tpre-medio: #400c17; --tpre-bajo: #18050a;
                   --tpre-luz: #ffb0ac; }
.tpre.tpre-amistad    { --tpre-alto: #5e3410; --tpre-medio: #3d210a; --tpre-bajo: #170c04;
                   --tpre-luz: #ffcb8f; }
.tpre.tpre-familia    { --tpre-alto: #123b5e; --tpre-medio: #0e2340; --tpre-bajo: #060d1c;
                   --tpre-luz: #9fd0ff; }
.tpre.tpre-trabajo    { --tpre-alto: #55440f; --tpre-medio: #382c09; --tpre-bajo: #150f03;
                   --tpre-luz: #ffe08f; }
.tpre.tpre-siono      { --tpre-alto: #4a1354; --tpre-medio: #300b38; --tpre-bajo: #120418;
                   --tpre-luz: #e9a8ff; }

/* ── La escena ────────────────────────────────────────────────────────────
   Las tres fases comparten fondo para que el cambio no parezca otra página. */
.tpre .tpre-fase {
  position: relative;
  border-radius: 14px;
  padding: 1.6rem 1.2rem 1.8rem;
  background:
    radial-gradient(1px 1px at 14% 18%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 63% 74%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 0%, var(--tpre-alto) 0%, var(--tpre-medio) 48%, var(--tpre-bajo) 100%);
  color: #f2eeff;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.tpre .tpre-rotulo {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tpre-luz);
  font-weight: 700;
}
.tpre .tpre-pregunta {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 4.6vw, 1.85rem);
  line-height: 1.25;
  text-wrap: balance;
  max-width: 24em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.tpre .tpre-intro {
  margin: 0;
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
  line-height: 1.5;
  max-width: 34em;
  color: #e2daff;
  opacity: .92;
}
.tpre .tpre-eco { font-size: clamp(1.05rem, 3.6vw, 1.4rem); opacity: .92; }

.tpre .tpre-btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #1a1030;
  padding: .68rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd86b, #f0ab1e);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
  transition: transform .12s ease, filter .12s ease;
}
.tpre .tpre-btn:hover { filter: brightness(1.07); }
.tpre .tpre-btn:active { transform: translateY(1px); }
.tpre button { -webkit-tap-highlight-color: transparent; }
.tpre button:focus { outline: none; }
.tpre button:focus-visible { outline: 2px solid var(--tpre-oro); outline-offset: 3px; }

.tpre .tpre-maint {
  margin: 0;
  border-radius: 14px;
  padding: 1.4rem 1.2rem;
  background: var(--tpre-medio);
  color: #f2eeff;
  text-align: center;
}

/* ── Fase 2: el mazo ──────────────────────────────────────────────────────
   22 cartas boca abajo. La rejilla se estrecha sola: minmax(min(...)) para
   que la columna pueda encoger por debajo de su mínimo en pantallas de
   320 px, donde si no se saldría. */
.tpre .tpre-elige {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--tpre-luz);
}
/* Cuántas cartas por fila: 22 se reparten en 5+5+5+5+2, 8+8+6 u 11+11. El
   ancho es un porcentaje del CONTENEDOR, no del viewport, así que si el tema
   mete la app en una columna estrecha las cartas encogen con ella; y si el
   reparto pedido las dejara por debajo de 2,6 rem, el max() les pone suelo y
   flex-wrap se encarga de poner menos por fila. La última fila va centrada,
   que es lo que una rejilla no sabe hacer. */
.tpre .tpre-mazo {
  --tpre-cols: 5;
  --tpre-hueco: .45rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--tpre-hueco);
}
@container tpre (min-width: 28rem) { .tpre .tpre-mazo { --tpre-cols: 8; } }
@container tpre (min-width: 38rem) { .tpre .tpre-mazo { --tpre-cols: 11; --tpre-hueco: .5rem; } }

.tpre .tpre-carta {
  flex: 0 0 auto;
  width: max(2.6rem, calc(
        (100% - (var(--tpre-cols) - 1) * var(--tpre-hueco)) / var(--tpre-cols)));
  aspect-ratio: 100 / 160;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 600px;
  animation: tpre-reparte .32s ease both;
  /* Reparto escalonado: --i es el sitio en la mesa, lo pone el JS. */
  animation-delay: calc(var(--i) * .022s);
}
.tpre .tpre-cara {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tpre .tpre-carta img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 6px;
}
.tpre .tpre-carta:hover .tpre-cara,
.tpre .tpre-carta:focus-visible .tpre-cara {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
}
.tpre .tpre-carta.tpre-elegida {
  cursor: default;
}
.tpre .tpre-carta.tpre-elegida .tpre-cara {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px var(--tpre-oro), 0 8px 20px rgba(0, 0, 0, .6);
}
/* El giro: a mitad de camino el JS cambia el dorso por la cara, y el cambio
   queda escondido en el canto de la carta. */
.tpre .tpre-carta.tpre-girando .tpre-cara { animation: tpre-gira .34s ease both; }

@keyframes tpre-reparte {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes tpre-gira {
  0%   { transform: translateY(-6px) rotateY(0deg); }
  50%  { transform: translateY(-6px) rotateY(90deg); }
  100% { transform: translateY(-6px) rotateY(0deg); }
}

/* ── Fase 3a: el preload ──────────────────────────────────────────────────
   Se ve SIEMPRE, aunque la lectura ya estuviera guardada: una respuesta
   instantánea delataría la caché y rompería el rito de la tirada. */
.tpre .tpre-cargando {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 0 1.2rem;
}
.tpre .tpre-orbe {
  position: relative;
  width: clamp(4.5rem, 22vw, 6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
              rgba(255, 255, 255, .5) 0%, var(--tpre-luz) 28%,
              var(--tpre-alto) 62%, rgba(0, 0, 0, .5) 100%);
  box-shadow: 0 0 30px -4px var(--tpre-luz), inset 0 -6px 14px rgba(0, 0, 0, .5);
  animation: tpre-latido 2.4s ease-in-out infinite;
}
/* Tres chispas girando alrededor del orbe, una por carta. */
.tpre .tpre-orbe span {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  animation: tpre-orbita 3.6s linear infinite;
}
.tpre .tpre-orbe span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: .5rem;
  height: .5rem;
  margin-left: -.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px var(--tpre-luz);
}
.tpre .tpre-orbe span:nth-child(2) { animation-delay: -1.2s; }
.tpre .tpre-orbe span:nth-child(3) { animation-delay: -2.4s; }

.tpre .tpre-cargando-txt {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--tpre-luz);
}

@keyframes tpre-latido {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.06); filter: brightness(1.25); }
}
@keyframes tpre-orbita {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Fase 3b: la lectura ──────────────────────────────────────────────────*/
.tpre .tpre-resultado {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: tpre-entra .45s ease both;
}
@keyframes tpre-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.tpre .tpre-cartas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: .7rem;
}
.tpre .tpre-cartas figure {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: clamp(5rem, 26vw, 7.5rem);
  animation: tpre-entra .5s ease both;
  animation-delay: var(--d, 0s);
}
.tpre .tpre-cartas img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}
.tpre .tpre-cartas figcaption {
  font-size: .82rem;
  line-height: 1.3;
  color: var(--tpre-luz);
  text-wrap: balance;
}

.tpre .tpre-lectura {
  width: 100%;
  max-width: 42em;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-align: left;
}
.tpre .tpre-lectura p { margin: 0 0 .7rem; line-height: 1.6; }
.tpre .tpre-lectura p:last-child { margin-bottom: 0; }
/* La primera palabra de la página de sí o no es el veredicto: que se vea. */
.tpre.tpre.tpre-siono .tpre-lectura p:first-child::first-line {
  font-weight: 700;
  color: var(--tpre-oro);
}
.tpre .tpre-lectura.tpre-aviso {
  background: rgba(120, 20, 20, .38);
  border-color: rgba(255, 140, 140, .35);
  text-align: center;
}

.tpre .tpre-aviso-legal {
  margin: 0;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--tpre-luz);
  opacity: .65;
  max-width: 36em;
}
.tpre .tpre-otra-wrap { margin: .2rem 0 0; }

/* ── Pantallas estrechas ──────────────────────────────────────────────────*/
@media (max-width: 30rem) {
  .tpre .tpre-fase { padding: 1.2rem .8rem 1.4rem; }
  .tpre .tpre-mazo { gap: .4rem; }
  .tpre .tpre-cartas { gap: .5rem; }
}

/* ── Menos movimiento ─────────────────────────────────────────────────────
   Se suaviza, no se apaga: el giro de la carta y el orbe SON la aplicación,
   y sin ellos el consultante no sabe que algo está pasando. */
@media (prefers-reduced-motion: reduce) {
  .tpre .tpre-carta { animation-duration: .01s; animation-delay: 0s; }
  .tpre .tpre-carta.tpre-girando .tpre-cara { animation-duration: .6s; }
  .tpre .tpre-orbe { animation-duration: 5s; }
  .tpre .tpre-orbe span { animation-duration: 9s; }
  .tpre .tpre-resultado, .tpre .tpre-cartas figure { animation: none; }
  .tpre .tpre-cara { transition-duration: .01s; }
}