/* 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: 920px; 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: #e7c46a;
                   --tpre-escena: url("escenas/general.webp"); }
.tpre.tpre-dinero     { --tpre-alto: #0e4d33; --tpre-medio: #0a3122; --tpre-bajo: #04140e;
                   --tpre-luz: #8fe9bf; --tpre-escena: url("escenas/dinero.webp"); }
.tpre.tpre-amor       { --tpre-alto: #611420; --tpre-medio: #400c17; --tpre-bajo: #18050a;
                   --tpre-luz: #ffb0ac; --tpre-escena: url("escenas/amor.webp"); }
.tpre.tpre-crecimiento { --tpre-alto: #5e3410; --tpre-medio: #3d210a; --tpre-bajo: #170c04;
                   --tpre-luz: #ffcb8f; --tpre-escena: url("escenas/crecimiento.webp"); }
.tpre.tpre-espiritu   { --tpre-alto: #5c1c48; --tpre-medio: #3a1030; --tpre-bajo: #150618;
                   --tpre-luz: #ffb3dd; --tpre-escena: url("escenas/espiritu.webp"); }
.tpre.tpre-familia    { --tpre-alto: #123b5e; --tpre-medio: #0e2340; --tpre-bajo: #060d1c;
                   --tpre-luz: #9fd0ff; --tpre-escena: url("escenas/familia.webp"); }
.tpre.tpre-trabajo    { --tpre-alto: #55440f; --tpre-medio: #382c09; --tpre-bajo: #150f03;
                   --tpre-luz: #ffe08f; --tpre-escena: url("escenas/trabajo.webp"); }
.tpre.tpre-siono      { --tpre-alto: #4a1354; --tpre-medio: #300b38; --tpre-bajo: #120418;
                   --tpre-luz: #e9a8ff; --tpre-escena: url("escenas/siono.webp"); }

/* ── La escena ────────────────────────────────────────────────────────────
   Las tres fases comparten fondo para que el cambio no parezca otra página. */
.tpre .tpre-fase {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--tpre-luz) 22%, transparent);
  border-radius: 24px;
  padding: 2rem 1.5rem 2.2rem;
  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;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 1px rgba(255,255,255,.06);
}

.tpre .tpre-f1 {
  display: grid;
  grid-template-columns: minmax(15rem, .86fr) minmax(20rem, 1.14fr);
  padding: 0;
  min-height: 360px;
  text-align: left;
}
.tpre .tpre-vision {
  position: relative;
  align-self: stretch;
  min-height: 360px;
  background-image: linear-gradient(90deg, transparent 62%, var(--tpre-medio) 100%), var(--tpre-escena);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.tpre .tpre-vision::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, transparent 15%, rgba(4,3,12,.22) 72%);
}
.tpre .tpre-vision::after {
  content: "✦";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 2.7rem;
  aspect-ratio: 1;
  border: 1px solid rgba(231,196,106,.5);
  border-radius: 50%;
  color: var(--tpre-oro);
  background: rgba(7,5,18,.68);
  box-shadow: 0 0 30px rgba(231,196,106,.18);
}
.tpre .tpre-portada-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.7rem, 5vw, 3rem);
}
.tpre .tpre-portada-copy .tpre-pregunta,
.tpre .tpre-portada-copy .tpre-intro { text-align: left; }

.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-pregunta:focus, .tpre .tpre-resultado:focus { outline: none; }
.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: #171020;
  min-height: 44px;
  padding: .72rem 1.65rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8df93, #d7a83d);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.55);
  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: 7; } }
@container tpre (min-width: 38rem) { .tpre .tpre-mazo { --tpre-cols: 8; --tpre-hueco: .65rem; } }

.tpre .tpre-carta {
  flex: 0 0 auto;
  width: max(2.6rem, calc(
        (100% - (var(--tpre-cols) - 1) * var(--tpre-hueco)) / var(--tpre-cols)));
  max-width: 5.6rem;
  aspect-ratio: 2 / 3;
  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: 1px solid rgba(231,196,106,.32);
  border-radius: 9px;
  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;
  opacity: 1;
}
.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(6rem, 27vw, 9rem);
  animation: tpre-entra .5s ease both;
  animation-delay: var(--d, 0s);
}
.tpre .tpre-cartas img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(231,196,106,.4);
  border-radius: 10px;
  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(3, 3, 11, .54);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-align: left;
}

.tpre .tpre-acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}
.tpre .tpre-share-status {
  min-height: 1.2em;
  color: var(--tpre-luz);
  font-size: .82rem;
}
.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; }
}

@media (max-width: 42rem) {
  .tpre .tpre-f1 { grid-template-columns: 1fr; }
  .tpre .tpre-vision {
    min-height: 215px;
    background-image: linear-gradient(180deg, transparent 58%, var(--tpre-medio) 100%), var(--tpre-escena);
  }
  .tpre .tpre-portada-copy { padding: 1.5rem 1.1rem 1.8rem; align-items: center; }
  .tpre .tpre-portada-copy .tpre-pregunta,
  .tpre .tpre-portada-copy .tpre-intro { text-align: center; }
}

/* ── 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 *::before, .tpre *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .tpre .tpre-fase, .tpre .tpre-cara, .tpre .tpre-lectura { border: 1px solid CanvasText; }
  .tpre .tpre-btn { border: 1px solid ButtonText; }
}