/* Tarot AI Apps — piel NOCTURNA (2026-08-08): mismos selectores y
   maquetación que la versión de WordPress (fondo claro), pero con la
   paleta del tema — noche #0a0816, oro #c9a45c / #e9c87f, y el verde
   de la sección KI #a0d890 como acento. Todo prefijado .taia.
   Responsivo: la rejilla de cartas fluye sola con auto-fill. */

.taia { max-width: 820px; margin: 0 auto; font-size: 1rem; }
.taia * { box-sizing: border-box; }
.taia .taia-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.taia-titulo {
  text-align: center;
  color: #a0d890;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

/* ── Fase 1: la pregunta ─────────────────────────────────────────── */
.taia-form { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.taia .taia-pregunta {
  width: min(34rem, 100%);
  padding: .7rem .9rem;
  font: inherit;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  color-scheme: dark;
}
.taia .taia-pregunta::placeholder { color: #9a92b0; }
.taia .taia-pregunta:focus { outline: 2px solid #e9c87f; }
.taia-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.taia .taia-btn {
  background: linear-gradient(180deg, #f3d9a4, #d9a05c);
  color: #2a1420;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1.6rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
  transition: filter .15s ease;
}
.taia .taia-btn:hover { filter: brightness(1.07); }

/* ── Cabecera con la pregunta (fases 2 y 3) ──────────────────────── */
.taia-eco {
  text-align: center;
  color: #e9c87f;
  font-weight: 700;
  font-size: 1.15rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(201, 164, 92, .30);
  border-radius: 10px;
  padding: .5rem .8rem;
  margin: 0 0 .8rem;
  overflow-wrap: break-word;
}

/* ── Fase 2: la rejilla del mazo ─────────────────────────────────── */
.taia-elige {
  text-align: center;
  font-size: 1.35rem;
  margin: .2rem 0 .9rem;
  color: #f0ebf6;
}
/* Flex con centrado (y no grid): así la última fila incompleta queda
   CENTRADA en vez de pegada a la izquierda; las filas completas se ven
   exactamente igual. */
.taia-mazo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}
.taia .taia-carta {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
  width: clamp(56px, 9.5vw, 82px);
  transition: transform .15s ease;
  perspective: 400px;
  appearance: none;
  -webkit-appearance: none;
}
.taia .taia-carta:hover { transform: translateY(-4px); }
.taia .taia-carta img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  transition: transform .16s ease;
}
.taia .taia-carta.taia-girando img { transform: rotateY(90deg); }
.taia .taia-carta.taia-elegida { cursor: default; }
.taia .taia-carta.taia-elegida img {
  box-shadow: 0 0 0 3px #c9a45c, 0 4px 12px rgba(0, 0, 0, .5);
}
.taia img.taia-cara-invertida { transform: rotate(180deg); }

/* ── Barra de progreso (sustituye al gif del legacy) ─────────────── */
.taia-progreso {
  margin: 1rem auto 0;
  width: min(20rem, 80%);
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.taia-progreso span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 5px;
  background: linear-gradient(90deg, #c9a45c, #f3d9a4);
  animation: taia-barra 1.1s ease-in-out infinite;
}
@keyframes taia-barra {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* ── Fase 3: el resultado ────────────────────────────────────────── */
/* Las cartas en FILA arriba y la lectura debajo: asi el marco crece con
   el texto en vez de imponer una altura fija con aire muerto. */
.taia-resultado {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(201, 164, 92, .30);
  border-radius: 10px;
  padding: .8rem;
}
.taia-cartas {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* Por la BASE: si un nombre ocupa dos lineas, crece hacia arriba y las
     cartas quedan a ras — sin esto, la carta del nombre largo se hundia. */
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .6rem;
  flex: 0 0 auto;
}
.taia-cartas figure {
  margin: 0;
  text-align: center;
  width: 92px;
  animation: taia-in .4s ease both;
  animation-delay: var(--d, 0s);
}
.taia-cartas figcaption {
  font-size: .68rem;
  color: #a0d890;
  margin-bottom: .2rem;
  line-height: 1.2;
}
.taia-cartas img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(201, 164, 92, .45);
}
@keyframes taia-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.taia-lectura {
  flex: 1;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  line-height: 1.55;
  color: #f0ebf6;
  min-height: 5rem;
  white-space: pre-wrap;
}
.taia-lectura.taia-aviso { font-size: 1.05rem; color: #ffb9a8; }
/* La lectura de verdad fluye como BLOQUE, arriba a la izquierda: centrada
   y en flex, cada letra tecleada recolocaba el texto, y el cursor ::after
   se volvia un item flex flotando a la derecha. El centrado flex queda
   solo para los avisos cortos. */
.taia-lectura.taia-leyendo {
  display: block;
  text-align: left;
}
/* Cursor parpadeante mientras la lectura se va "escribiendo": una cajita
   dibujada en CSS, no un caracter (Georgia no tiene el glifo ▍ y pintaba
   un cuadrado hueco). */
.taia-lectura.taia-tippt::after {
  content: '';
  display: inline-block;
  width: .45em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: currentColor;
  animation: taia-cursor .8s steps(1) infinite;
  opacity: .8;
}
@keyframes taia-cursor { 50% { opacity: 0; } }

.taia-otra-wrap { text-align: center; margin-top: 1rem; }
.taia-maint { text-align: center; padding: 2rem 1rem; }

/* ── Experiencia premium: una identidad para cada oráculo ─────────────── */
.taia.taia-premium {
  --taia-accent: #9ed9e8;
  --taia-accent-rgb: 158, 217, 232;
  --taia-bright: #d4f5fb;
  --taia-warm: #c69a55;
  --taia-warm-rgb: 198, 154, 85;
  --taia-panel-1: #151922;
  --taia-panel-2: #0c0f15;
  --taia-button-1: #d8b36f;
  --taia-button-2: #9e6d34;
  max-width: 920px;
}
.taia[data-app="tarot"] {
  --taia-accent: #d7b8f2; --taia-accent-rgb: 215, 184, 242; --taia-bright: #f0dcff;
  --taia-warm: #c6a15b; --taia-warm-rgb: 198, 161, 91; --taia-panel-1: #1b1423; --taia-panel-2: #0d0a12;
  --taia-button-1: #e0bd78; --taia-button-2: #9b7034;
}
.taia[data-app="marsella"] {
  --taia-accent: #e3aa8b; --taia-accent-rgb: 227, 170, 139; --taia-bright: #ffe3cf;
  --taia-warm: #d0a35e; --taia-warm-rgb: 208, 163, 94; --taia-panel-1: #1c1717; --taia-panel-2: #0d1015;
  --taia-button-1: #dfb96f; --taia-button-2: #a06f32;
}
.taia[data-app="rider"] {
  --taia-accent: #b8d5b0; --taia-accent-rgb: 184, 213, 176; --taia-bright: #e3f4de;
  --taia-warm: #c7a35f; --taia-warm-rgb: 199, 163, 95; --taia-panel-1: #141d19; --taia-panel-2: #0a100e;
  --taia-button-1: #d8b773; --taia-button-2: #8e6c35;
}
.taia[data-app="espanol"] {
  --taia-accent: #e7a17a; --taia-accent-rgb: 231, 161, 122; --taia-bright: #ffd9c2;
  --taia-warm: #d3a54d; --taia-warm-rgb: 211, 165, 77; --taia-panel-1: #221414; --taia-panel-2: #110b0b;
  --taia-button-1: #e0b663; --taia-button-2: #9b6530;
}
.taia[data-app="gitano"] {
  --taia-accent: #8fd0c3; --taia-accent-rgb: 143, 208, 195; --taia-bright: #d0f4ed;
  --taia-warm: #d1a35e; --taia-warm-rgb: 209, 163, 94; --taia-panel-1: #1d171b; --taia-panel-2: #0d1010;
  --taia-button-1: #deb671; --taia-button-2: #926533;
}
.taia[data-app="lenormand"] {
  --taia-accent: #b9d7b2; --taia-accent-rgb: 185, 215, 178; --taia-bright: #e4f2df;
  --taia-warm: #c6a76a; --taia-warm-rgb: 198, 167, 106; --taia-panel-1: #151d18; --taia-panel-2: #0a100d;
  --taia-button-1: #d8bc7a; --taia-button-2: #8c6e38;
}
.taia[data-app="poker"] {
  --taia-accent: #b9cee8; --taia-accent-rgb: 185, 206, 232; --taia-bright: #e1efff;
  --taia-warm: #c5a66f; --taia-warm-rgb: 197, 166, 111; --taia-panel-1: #131922; --taia-panel-2: #090d13;
  --taia-button-1: #d8b777; --taia-button-2: #8e6939;
}
.taia[data-app="iching"] {
  --taia-accent: #a9cbb6; --taia-accent-rgb: 169, 203, 182; --taia-bright: #d9ede1;
  --taia-warm: #c8a35d; --taia-warm-rgb: 200, 163, 93; --taia-panel-1: #151b18; --taia-panel-2: #0a0f0d;
  --taia-button-1: #d7b56d; --taia-button-2: #8e6932;
}
.taia.taia-premium .taia-f1,
.taia.taia-premium .taia-f2,
.taia.taia-premium .taia-f3 {
  overflow: hidden;
  border: 1px solid rgba(var(--taia-accent-rgb), .22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 8%, rgba(var(--taia-accent-rgb), .12), transparent 34%),
    linear-gradient(145deg, var(--taia-panel-1), var(--taia-panel-2) 66%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .035);
}
.taia-apertura {
  position: relative;
  min-height: clamp(330px, 54vw, 500px);
  isolation: isolate;
}
.taia-apertura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 13, .72) 0%, rgba(5, 8, 13, .12) 62%, rgba(5, 8, 13, .38) 100%),
    linear-gradient(90deg, rgba(5, 8, 13, .84) 0%, rgba(5, 8, 13, .62) 38%, rgba(5, 8, 13, .18) 68%, transparent 84%);
  pointer-events: none;
}
.taia-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.taia-presentacion {
  position: absolute;
  z-index: 1;
  left: clamp(1.25rem, 5vw, 3.2rem);
  right: clamp(1.25rem, 5vw, 3.2rem);
  top: clamp(1.35rem, 4vw, 2.7rem);
  max-width: min(560px, 72%);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .85);
}
.taia-kicker {
  display: block;
  color: var(--taia-accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.taia-presentacion .taia-titulo {
  margin: .38rem 0 .55rem;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.85rem, 5vw, 3.15rem);
  line-height: 1.04;
  text-align: left;
  text-wrap: balance;
}
.taia-presentacion p {
  max-width: 590px;
  margin: 0;
  color: #d8e4e8;
  font-size: clamp(.92rem, 2vw, 1.05rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.taia-pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid rgba(var(--taia-accent-rgb), .14);
  background: rgba(var(--taia-accent-rgb), .10);
}
.taia-pasos li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 0;
  padding: .85rem .55rem;
  background: rgba(9, 12, 17, .94);
  color: #aebbc0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .035em;
}
.taia-pasos span {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border: 1px solid rgba(var(--taia-accent-rgb), .45);
  border-radius: 50%;
  color: var(--taia-bright);
  font-size: .68rem;
}
.taia.taia-premium .taia-form {
  gap: 1.15rem;
  padding: clamp(1.35rem, 4vw, 2.4rem);
  background:
    radial-gradient(circle at 50% -35%, rgba(var(--taia-accent-rgb), .10), transparent 54%),
    rgba(8, 11, 16, .72);
}
.taia-campo {
  display: block;
  width: min(680px, 100%);
}
.taia-campo > span {
  display: block;
  margin: 0 0 .55rem;
  color: #eef7f8;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.13rem;
  font-weight: 700;
}
.taia.taia-premium .taia-pregunta {
  display: block;
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(var(--taia-accent-rgb), .34);
  border-radius: 14px;
  background: rgba(3, 7, 11, .72);
  box-shadow: inset 0 1px 12px rgba(0, 0, 0, .28);
  line-height: 1.55;
}
.taia.taia-premium .taia-pregunta:focus {
  outline: 2px solid rgba(var(--taia-accent-rgb), .72);
  outline-offset: 2px;
  border-color: transparent;
}
.taia-campo small {
  display: block;
  margin-top: .55rem;
  color: #84939a;
  font-size: .76rem;
  line-height: 1.45;
}
.taia.taia-premium .taia-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--taia-warm-rgb), .62);
  background: linear-gradient(180deg, var(--taia-button-1), var(--taia-button-2));
  color: #15100a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .35);
  letter-spacing: .015em;
}
.taia.taia-premium .taia-btn:hover {
  filter: brightness(1.09);
  transform: translateY(-1px);
}
.taia.taia-premium .taia-f2,
.taia.taia-premium .taia-f3 {
  padding: clamp(1.2rem, 4vw, 2.25rem);
}
.taia-kicker-centro {
  margin-bottom: .7rem;
  text-align: center;
}
.taia.taia-premium .taia-eco {
  position: relative;
  max-width: 700px;
  margin: 0 auto 1.2rem;
  padding: .9rem 1.15rem;
  border-color: rgba(var(--taia-accent-rgb), .23);
  border-radius: 14px;
  background: rgba(var(--taia-accent-rgb), .055);
  color: #e6eff1;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.5;
}
.taia.taia-premium .taia-elige {
  margin: 0 0 1rem;
  color: var(--taia-bright);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}
.taia.taia-premium .taia-mazo {
  gap: .62rem;
  padding: clamp(1rem, 3vw, 1.65rem);
  border: 1px solid rgba(var(--taia-warm-rgb), .24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--taia-accent-rgb), .16), transparent 46%),
    repeating-radial-gradient(circle at 40% 45%, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
    #0a0d12;
  box-shadow: inset 0 12px 35px rgba(0, 0, 0, .42);
}
.taia.taia-premium .taia-carta {
  --taia-giro: -1deg;
  width: clamp(56px, 8.5vw, 72px);
  transform: rotate(var(--taia-giro));
  transition: transform .18s ease, filter .18s ease;
}
.taia.taia-premium .taia-carta:nth-child(5n + 2) { --taia-giro: 1.5deg; }
.taia.taia-premium .taia-carta:nth-child(5n + 3) { --taia-giro: -.4deg; }
.taia.taia-premium .taia-carta:nth-child(5n + 4) { --taia-giro: 2.2deg; }
.taia.taia-premium .taia-carta:nth-child(5n) { --taia-giro: -2deg; }
.taia.taia-premium .taia-carta:hover,
.taia.taia-premium .taia-carta:focus-visible {
  z-index: 1;
  outline: none;
  filter: brightness(1.08);
  transform: translateY(-6px) rotate(0) scale(1.055);
}
.taia.taia-premium .taia-carta img {
  border: 1px solid rgba(var(--taia-warm-rgb), .45);
  border-radius: 12px;
  box-shadow: 0 8px 17px rgba(0, 0, 0, .48);
}
.taia.taia-premium .taia-carta.taia-elegida img {
  box-shadow: 0 0 0 2px var(--taia-accent), 0 0 24px rgba(var(--taia-accent-rgb), .38), 0 10px 20px rgba(0, 0, 0, .5);
}
.taia.taia-premium .taia-progreso {
  height: 6px;
  background: rgba(var(--taia-accent-rgb), .09);
}
.taia.taia-premium .taia-progreso span {
  background: linear-gradient(90deg, var(--taia-warm), var(--taia-bright));
}
.taia.taia-premium .taia-resultado {
  gap: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border-color: rgba(var(--taia-accent-rgb), .18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0, rgba(var(--taia-accent-rgb), .08), transparent 40%),
    rgba(5, 8, 12, .68);
}
.taia.taia-premium .taia-cartas { gap: clamp(.7rem, 3vw, 1.3rem); }
.taia.taia-premium .taia-cartas figure { width: clamp(94px, 18vw, 122px); }
.taia.taia-premium .taia-cartas figcaption {
  margin-bottom: .45rem;
  color: var(--taia-bright);
  font-size: .76rem;
  font-weight: 700;
}
.taia.taia-premium .taia-cartas img {
  border-color: rgba(var(--taia-warm-rgb), .5);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .42);
}
.taia[data-app="marsella"] .taia-carta img,
.taia[data-app="marsella"] .taia-cartas img {
  aspect-ratio: 101 / 133;
  object-fit: fill;
}
.taia.taia-premium .taia-lectura {
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 8rem;
  padding: clamp(1rem, 3vw, 1.45rem);
  border-color: rgba(var(--taia-accent-rgb), .16);
  border-radius: 14px;
  background: rgba(12, 17, 23, .88);
  color: #edf4f5;
  font-size: clamp(1.05rem, 2.3vw, 1.22rem);
  text-align: left;
}

/* ── Móvil ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .taia-mazo { gap: .4rem; }
  .taia .taia-carta { width: clamp(46px, 15vw, 60px); }
  /* En movil el marco exterior sobra: fuera panel y borde — pero la
     lectura conserva un fondo un punto MAS OSCURO que la pagina, para
     que el texto de la app se distinga del resto sin perder anchura. */
  .taia-resultado { border: 0; background: none; padding: 0; gap: .7rem; }
  .taia-cartas figure { width: 78px; }
  .taia-lectura {
    min-height: 0;
    font-size: 1.1rem;
    border: 0;
    background: rgba(0, 0, 0, .32);
    border-radius: 10px;
    padding: .8rem .9rem;
  }
  .taia.taia-premium .taia-f1,
  .taia.taia-premium .taia-f2,
  .taia.taia-premium .taia-f3 { border-radius: 17px; }
  .taia-apertura { min-height: 390px; }
  .taia-hero { object-position: 58% center; }
  .taia[data-app="marsella"] .taia-hero,
  .taia[data-app="gitano"] .taia-hero,
  .taia[data-app="poker"] .taia-hero,
  .taia[data-app="iching"] .taia-hero { object-position: 65% center; }
  .taia[data-app="rider"] .taia-hero,
  .taia[data-app="lenormand"] .taia-hero { object-position: 62% center; }
  .taia-presentacion { left: 1.1rem; right: 1.1rem; top: 1.2rem; max-width: none; }
  .taia-presentacion .taia-titulo { font-size: 1.8rem; }
  .taia-presentacion p { font-size: .88rem; line-height: 1.5; }
  .taia-pasos li { flex-direction: column; gap: .35rem; padding: .7rem .25rem; font-size: .65rem; text-align: center; }
  .taia.taia-premium .taia-form { padding: 1.15rem; }
  .taia-campo > span { font-size: 1rem; }
  .taia.taia-premium .taia-f2,
  .taia.taia-premium .taia-f3 { padding: 1rem; }
  .taia.taia-premium .taia-mazo { gap: .44rem; padding: .8rem .55rem; }
  .taia.taia-premium .taia-carta { width: clamp(46px, 14vw, 58px); }
  .taia.taia-premium .taia-resultado { padding: .8rem; }
  .taia.taia-premium .taia-cartas figure { width: 82px; }
  .taia.taia-premium .taia-lectura { padding: 1rem; border: 1px solid rgba(var(--taia-accent-rgb), .14); }
}

@media (prefers-reduced-motion: reduce) {
  .taia-cartas figure, .taia-progreso span { animation: none; }
  .taia .taia-carta, .taia .taia-carta img { transition: none; }
}