/* ===========================
   Tarot IA — styles.css (NOIR + LUZ SUPERIOR • COMPLETO)
   Desktop intacto • Mobile: chat tipo WhatsApp lo maneja /css/taroia-chat-mobile.css
   + Cartas invertidas SIN texto (rota SOLO la imagen)
   + Parche teclado móvil: 100dvh
   =========================== */

/* ===== Base ===== */
html, body{
  height:100%;
  margin:0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.10) 10%,
      rgba(255,255,255,0.04) 22%,
      rgba(255,255,255,0.00) 36%
    ),
    radial-gradient(2000px 1400px at 50% 45%, #101017 0%, #07070f 45%, #030308 100%) !important;
  color:#fff;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior:none;
  overflow:hidden; /* evita scroll de página */
}

/* ===== Variables ===== */
:root{
  --card-w:128px; --card-h:204px;
  --card-ratio: 3/5;

  /* Header */
  --logo-h:154px;
  --logo-gap:6px;
  --logo-shift:-12px;
  --line-lift:14px;
  --header-height: calc(var(--logo-h) - var(--line-lift));
  --header-bottom: calc(var(--logo-shift) + var(--header-height));
  --anchor-y: calc(var(--header-bottom) + var(--logo-gap));

  /* Chat lift desktop (no se usa en mobile) */
  --chat-lift: 0px;

  /* Paleta */
  --taroia-gold:#e7c372;
  --taroia-purple: var(--taroia-gold);

  /* Hints */
  --hint-offset: 60px;
}

/* Respeta header fijo al saltar a anclas */
html{ scroll-padding-top: var(--anchor-y); }

/* ===== Layout base ===== */
.screen{
  min-height:100svh;
  width:100vw;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stage{
  width:100vw;
  height:100svh;
  position:relative;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
  transition: transform 120ms ease;
}

.fan{ position:absolute; inset:0; will-change: transform; z-index:5; }

/* Aire bajo el header para cartas */
.fan, [data-role="cards-fan"], .cards-fan{
  margin-top: max(40px, calc(var(--logo-h) * 0.10)) !important;
}

/* ===== Carta (state machine) ===== */
.card{
  position:absolute;
  width:var(--card-w);
  height:auto;
  aspect-ratio: var(--card-ratio);
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(231,195,114,.35);
  box-shadow:0 10px 25px rgba(0,0,0,.5), inset 0 0 0 1px #6d4ad140;
  transform-origin:50% 85%; will-change: transform, opacity, filter;
  z-index:1; transition:none; opacity:0;
}
.card{ --dur:1600ms; --delay:0ms; --curve:cubic-bezier(.2,.8,.2,1); }
.card[data-state="static"]{ transition:none !important; }
.card[data-state="entering"]{
  transition:transform var(--dur) var(--curve) var(--delay), opacity var(--dur) var(--curve) var(--delay);
  opacity:1;
}
.card[data-state="idle"]{ transition:none; opacity:1; }
.card[data-state="exiting"]{
  transition:transform var(--dur) var(--curve) var(--delay), opacity var(--dur) var(--curve) var(--delay);
  opacity:0;
}
.card[data-state="entering"]::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform:translateX(-120%); animation:sheen var(--dur) var(--curve) calc(var(--delay) + 220ms) 1;
  mix-blend-mode:screen; pointer-events:none;
}
@keyframes sheen{ 0%{transform:translateX(-120%);} 100%{transform:translateX(120%);} }

@media (max-width:920px){ :root{ --card-w:110px; --card-h:192px; } }
@media (max-width:640px){ :root{ --card-w:104px; --card-h:182px; } }

/* ===== Bienvenida con el ojo ===== */
.soft-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(800px, 90vw); padding:32px 36px; color:#f5ecff; text-align:center;
  z-index:20; font-family:'Marcellus', Georgia, serif;
  font-size:clamp(26px,3vw,40px); line-height:1.5; opacity:0;
}
.soft-dialog .text{
  margin-top:14px; font-family:'Inter', sans-serif;
  font-size:clamp(18px, 2.2vw, 22px); opacity:.95;
}
@keyframes dialogFadeIn{
  0%{opacity:0; transform:translate(-50%,-52%);}
  100%{opacity:1; transform:translate(-50%,-50%);}
}
@keyframes dialogFadeOut{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-52%) scale(.98);}
}
.stage.show-dialog .soft-dialog{ animation:dialogFadeIn 1.8s ease forwards; }
.soft-dialog.fade-out{ animation:dialogFadeOut .6s ease forwards; }

/* 🔥 Blur unificado */
.stage.show-chat .card{ filter:blur(2px) brightness(1) !important; }
#fan.static-after-payment{ filter:blur(2px) brightness(1) !important; }
#fan.static-after-payment .card{ filter:none !important; transition:none !important; animation:none !important; }
.stage.selecting .card{ filter:none !important; }

/* ===== Ojo animado ===== */
.sigil-wrap{ display:flex; justify-content:center; margin-bottom:14px; }
.sigil{ width:min(360px, 70vw); height:auto; display:block; animation:float 10s ease-in-out infinite; }
.sigil .gold  { stroke: var(--taroia-gold, #e7c372); }
.sigil .violet{ stroke: var(--taroia-purple, #d9c8ff); opacity:.85; }
.sigil .dot   { fill:  var(--taroia-gold, #e7c372); }
.sigil .dash  { stroke-dasharray:4 6; }
#taroia-header .sigil .gold,
#taroia-header .sigil .violet{
  stroke: var(--taroia-gold) !important;
  opacity: .95;
}
#taroia-header .sigil .dot{ fill: var(--taroia-gold) !important; }
@keyframes float{
  0%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
  100%{transform:translateY(0);}
}
.spin{ transform-box:fill-box; transform-origin:50% 50%; animation:spin 20s linear infinite; }
.spin-rev{ transform-box:fill-box; transform-origin:50% 50%; animation:spinReverse 28s linear infinite; }
@keyframes spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
@keyframes spinReverse{ from{transform:rotate(0);} to{transform:rotate(-360deg);} }

/* ===== Chat (Desktop) ===== */
.chat-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:min(520px, 46vw);
  z-index:22;
  opacity:0;
  animation: chatIn .8s ease forwards;
  font-family:'Inter', sans-serif;
}
@media (max-width:920px){ .chat-wrap{ width:min(720px, 78vw);} }

@keyframes chatIn{
  0%{opacity:0; transform:translate(-50%,-52%);}
  100%{opacity:1; transform:translate(-50%,-50%);}
}

.chat-pane{
  background:rgba(8,8,16,.38) !important;
  border:1px solid rgba(231,195,114,.35);
  border-radius:16px; padding:16px; box-sizing:border-box; z-index:23;
  transition: padding-bottom 120ms ease;
}

/* Mensajes (solo desktop aplica max-height para evitar conflicto con mobile) */
@media (min-width:641px){
  .messages{
    max-height:min(40vh, 320px);
  }
}
.messages{
  overflow:auto; padding:8px 6px;
  display:flex; flex-direction:column; gap:10px;
  font-size:clamp(16px, 1.8vw, 20px);
  transition: max-height 120ms ease;
  overscroll-behavior: contain;
}
.bubble{
  background:rgba(10,10,18,.45) !important; border:1px solid rgba(231,195,114,.28);
  border-radius:14px; padding:10px 12px; line-height:1.45; color:#f1eeff;
}
.bubble.bot{ align-self:flex-start; }
.bubble.user{ align-self:flex-end; background:rgba(120,90,220,.30) !important; }

/* ===== Input (desktop + mobile) ===== */
.input-row{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

/* Unificación de altura con variables globales */
.input-row textarea{
  width:100%;
  resize:none;
  height: 56px;
  min-height: 56px;
  line-height: 1.35;
  overflow:hidden;
  background:rgba(8,8,16,.42);
  color:#f5ecff;
  border:1px solid rgba(231,195,114,.28);
  border-radius:12px;
  padding: 10px 14px;
  font-size: 16px;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  outline:none;
}

/* Placeholder unificado */
.input-row textarea::placeholder,
.input-row textarea:disabled::placeholder{
  font-size: 16px;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Botón igual de alto que el textarea */
.input-row button{
  height: 56px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid rgba(231,195,114,.45);
  background:linear-gradient(180deg, rgba(231,195,114,.18), rgba(231,195,114,.12));
  color:#f9f0ff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.input-row button:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(231,195,114,.24), rgba(231,195,114,.16));
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ===== IMPORTANTE =====
   Reglas MOBILE del chat ahora viven en /css/taroia-chat-mobile.css
   para evitar conflictos de scroll y posicionamiento.
*/

/* ===== Hints ===== */
.select-hint{
  position:absolute; left:50%;
  top: calc(var(--anchor-y) + var(--hint-offset));
  transform:translateX(-50%);
  background:rgba(8,8,16,.42);
  border:1px solid rgba(231,195,114,.45);
  padding:10px 14px; border-radius:12px; font-family:'Marcellus', serif;
  font-size:clamp(18px,2.4vw,24px); letter-spacing:.3px; z-index:24; opacity:0; pointer-events:none; transition:opacity .6s ease;
}
.stage.selecting .select-hint{ opacity:1; }

/* ===== Área de lectura / cartas ===== */
.reading-area{ position:absolute; inset:0; z-index:10; pointer-events:none; }
.reading-card{
  position:absolute;
  width:var(--card-w);
  height:auto;
  aspect-ratio: var(--card-ratio);
  border-radius:14px; overflow:hidden; pointer-events:auto; cursor:pointer;
  border:1px solid rgba(231,195,114,.55);
  box-shadow:0 10px 25px rgba(0,0,0,.55), inset 0 0 0 1px #6d4ad140;
  background:transparent; opacity:0; transform:translateY(24px);
  transition:left .8s ease, top .8s ease, transform .6s ease, opacity .6s ease, box-shadow .25s ease, filter .25s ease;
}
.reading-card.show{ opacity:1; transform:translateY(0); }
.reading-card:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.reading-card.glow{
  box-shadow:0 0 0 2px rgba(231,195,114,.9), 0 0 18px 6px rgba(231,195,114,.35), 0 14px 28px rgba(0,0,0,.55);
  animation:haloPulse 1.5s ease-in-out infinite;
}
@keyframes haloPulse{
  0%{
    box-shadow:0 0 0 2px rgba(231,195,114,.9),
               0 0 12px 4px rgba(231,195,114,.25),
               0 14px 28px rgba(0,0,0,.55);
  }
  50%{ box-shadow:0 0 24px 10px rgba(231,195,114,.45); }
  100%{
    box-shadow:0 0 0 2px rgba(231,195,114,.9),
               0 0 12px 4px rgba(231,195,114,.25);
  }
}

/* 🔕 Apagar halo al seleccionar */
.reading-card.selected,
.reading-card.selected.glow,
.reading-card.selected.tfx-card-glow,
.reading-card.selected.tfx-card-pulse{
  animation: none !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.55), inset 0 0 0 1px #6d4ad140 !important;
  filter: none !important;
}

/* Caras y título */
.face{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; }
.face img{
  width:100%; height:100%;
  object-fit:contain !important;
  background:transparent !important;
  display:block;
  border-radius:inherit;
  transform:scale(1.002);
  transform-origin:center center;
}
.reading-card .back{ opacity:1; transition:opacity .35s ease; }
.reading-card .front{ opacity:0; transition:opacity .35s ease; background:transparent; }
.reading-card.flipped .back{ opacity:0; }
.reading-card.flipped .front{ opacity:1; }

/* Brillo de paso */
.front::after{
  content:""; position:absolute; inset:-12%;
  background:linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 60%);
  transform:translateX(-120%) rotate(10deg); opacity:0;
}
.reading-card.flipped .front::after{
  opacity:1; animation:frontSheen 900ms ease-out 120ms 1 forwards;
}
@keyframes frontSheen{ to{ transform:translateX(120%) rotate(10deg); opacity:0; } }

/* Carteles de acción */
.action-box{
  position:absolute; left:50%;
  top: calc(var(--anchor-y) + var(--hint-offset));
  transform:translateX(-50%);
  background:rgba(8,8,16,.42);
  border:1px solid rgba(231,195,114,.45);
  padding:10px 14px; border-radius:12px; font-family:'Marcellus', serif;
  font-size:clamp(18px,2.4vw,24px); letter-spacing:.3px; z-index:25; opacity:0; transition:opacity .4s ease;
}
.action-box.show{ opacity:1; }

.name-chip{
  position:absolute; left:8px; right:8px; bottom:8px;
  padding:6px 10px; border-radius:10px; background:rgba(10,10,18,.65);
  border:1px solid rgba(231,195,114,.45); color:#f9f0ff; font-family:'Marcellus', serif;
  font-size:clamp(12px,1.6vw,16px); text-align:center; letter-spacing:.2px; opacity:0;
  transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; user-select:none;
}
.reading-card.flipped .name-chip{ opacity:1; transform:translateY(0); }

/* Magic burst */
.magic-burst{ position:absolute; inset:0; pointer-events:none; }
.magic-burst .ring{
  position:absolute; left:50%; top:50%; width:20px; height:20px; border-radius:9999px;
  border:1.5px solid rgba(231,195,114,.95); box-shadow:0 0 18px rgba(231,195,114,.6), inset 0 0 8px rgba(231,195,114,.35);
  transform:translate(-50%,-50%) scale(.25); opacity:1; animation:ringOut 900ms ease-out forwards;
}
@keyframes ringOut{ to{ transform:translate(-50%,-50%) scale(6.5); opacity:0; } }

/* Panel de lectura */
.reading-text{
  position:absolute; left:50%;
  top: var(--anchor-y);
  transform:translateX(-50%);
  width:min(900px, 86vw);
  background:transparent !important;
  border:1px solid rgba(231,195,114,.45);
  border-radius:14px; padding:16px 18px; font-family:'Marcellus', serif;
  font-size:clamp(16px,2vw,20px); line-height:1.5; z-index:26; opacity:0; transition:opacity .5s ease;
  color:#efeaff;
}
.reading-text.show{ opacity:1; }
.reading-text .k{ color:#e7c372; letter-spacing:.3px; }

/* Consejo */
.reading-advice-desktop{
  position:absolute; left:50%;
  top: calc(var(--anchor-y) + 100% + 6px);
  transform:translateX(-50%);
  width:min(900px, 86vw); font-style:italic; color:#e7e4ff; opacity:.95; background:transparent; z-index:26; text-align:left;
}
@media (max-width:640px){
  .reading-text{ top: var(--anchor-y); width:94vw; font-size:16px; }
}

/* ===== Mobile stack (solo durante lectura) ===== */
@media (max-width:640px){
  .mobile-reading-stack{
    position:fixed; left:0; right:0; top:0; bottom:0; z-index:50;
    display:flex; flex-direction:column; gap:18px; padding:14px 16px 24px;
    background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain; touch-action:pan-y; pointer-events:auto;
    /* empieza debajo de la línea, pero al scrollear pasa por debajo del header */
    padding-top: var(--anchor-y) !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 24px));
    z-index: 9000; /* por debajo del header (10000) */
  }

  /* 🔧 NUEVO: sin fondo ni borde dorado en bloques */
  .mrs-block{
    display:flex; flex-direction:column; gap:10px;
    background:transparent !important;
    border:none !important;
    border-radius:14px; padding:12px;
    box-shadow:none !important;
  }

  .mrs-head{ display:flex; align-items:center; gap:12px; }
  .mrs-head img{ height:92px; width:66px; border-radius:10px; object-fit:cover; box-shadow:0 6px 14px rgba(0,0,0,.45); }
  .mrs-kicker{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#d9c8ffcc; }
  .mrs-title{ font-weight:600; }
  .mrs-text{ color:#efe7ff; line-height:1.55; }
  .mrs-advice{ color:#e7e4ff; font-style:italic; opacity:.95; padding-top:6px; }
}

/* ===== Placeholders mobile bloqueado (mantener tamaño) ===== */
/*
@media (max-width:640px){
  .input-row textarea:disabled::placeholder{ font-size:12px; }
}
*/

/* ===== Overlays globales fuera ===== */
.bg-reading-overlay{
  background:transparent !important; mix-blend-mode:normal !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* ===== Hints & acciones en mobile ===== */
@media (max-width:640px){
  .select-hint{
    position:fixed !important;
    top: calc(var(--anchor-y) + var(--hint-offset)) !important;
    left:50% !important; transform:translateX(-50%) !important;
    z-index:9998 !important; white-space:nowrap !important; max-width:90vw !important;
    font-size:clamp(16px, 4vw, 20px) !important; pointer-events:none !important;
  }
  .action-box, .action-box.show{
    position:fixed !important;
    top: calc(var(--anchor-y) + var(--hint-offset)) !important;
    left:50% !important; transform:translateX(-50%) !important;
    z-index:9998 !important; white-space:nowrap !important; max-width:90vw !important;
    font-size:clamp(16px, 4vw, 20px) !important; pointer-events:none !important;
  }
  @supports selector(:has(*)){
    .stage:has(.reading-area.exiting) .action-box,
    .stage:has(.reading-area.exiting) .action-box.show{ display:none !important; }
  }
}

/* =========================================
   HEADER (desktop + mobile)
   ========================================= */
#taroia-header{ z-index:10000 !important; border-top:none !important; box-shadow:none !important; }
#taroia-header::before{
  content:"";
  position:fixed;
  top: var(--logo-shift);
  left:0; right:0;
  height: var(--header-height);
  background:linear-gradient(180deg, rgba(3,3,8,0) 0%, rgba(3,3,8,.66) 26%, rgba(3,3,8,0) 100%);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  z-index:0; pointer-events:none;
}
#taroia-header::after{
  content:"";
  position:fixed;
  top: var(--header-bottom);
  left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(231,195,114,.38), rgba(255,255,255,.18));
  opacity:.65; z-index:1; pointer-events:none;
}
#taroia-header > *{ position:relative; z-index:2 !important; }
#taroia-header img{
  height: var(--logo-h) !important;
  width:auto;
  margin-top: var(--logo-shift);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
#taroia-header.visible img {
  opacity: 0;
  transform: translateY(-8px);
  animation: logoFadeIn 0.9s ease forwards;
  animation-delay: 1s;
}
@keyframes logoFadeIn {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.reading-text, .reading-advice-desktop{ z-index:9000 !important; }

/* =========================
   PARCHE PALETA (mínimo)
   ========================= */
.taroia-cta-btn{
  background: linear-gradient(90deg, var(--taroia-gold, #e7c372), #f8e28a) !important;
  color: #0d0d0d !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 0 20px color-mix(in srgb, var(--taroia-gold, #e7c372) 40%, transparent) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.taroia-cta-btn:hover{
  transform:scale(1.03);
  box-shadow:0 0 30px color-mix(in srgb, var(--taroia-gold, #e7c372) 60%, transparent) !important;
}
#taroia-free-banner button,
#taroia-pay-banner  button{
  background: linear-gradient(90deg, var(--taroia-gold, #e7c372), #f8e28a) !important;
  color: #0d0d0d !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--taroia-gold, #e7c372) 45%, transparent) !important;
}
#taroia-free-banner.taroia-banner,
#taroia-pay-banner.taroia-banner{
  box-shadow:
    0 16px 38px rgba(0,0,0,.36),
    0 0 16px color-mix(in srgb, var(--taroia-gold, #e7c372) 75%, transparent),
    0 0 34px color-mix(in srgb, var(--taroia-gold, #e7c372) 45%, transparent),
    0 0 64px color-mix(in srgb, var(--taroia-gold, #e7c372) 28%, transparent) !important;
}

/* === INVERTIDAS (rota SOLO la imagen, sin texto ni contenedor) === */
/* El contenedor .front NO rota (ya arriba solo gestiona opacidad) */

/* Targeteamos únicamente la primera imagen del frente (la ilustración) */
.card .front > img:first-child,
.reading-card .front > img:first-child{
  transform: var(--img-rot, rotate(0deg));
  transform-origin: 50% 50%;
  transition: transform .35s ease;
}

/* Al marcar .is-reversed, rotamos la ilustración 180° */
.card.is-reversed .front > img:first-child,
.reading-card.is-reversed .front > img:first-child{
  --img-rot: rotate(180deg);
}

/* Ocultamos cualquier badge textual de "invertida" si existiera */
.rev-badge{ display:none !important; }

/* Frente sin contorno dorado al voltear */
.reading-card.flipped,
.card.flipped{
  border-color: transparent !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.55) !important;
}
.reading-card.flipped.selected,
.card.flipped.selected{
  border-color: transparent !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.55) !important;
}

/* ======== Ajuste bienvenida en mobile ======== */
:root{ --welcome-up-m: 50px; }
@media (max-width:640px){
  .soft-dialog{
    top: 50% !important;
    transform: translate(-50%, calc(-50% - var(--welcome-up-m))) !important;
  }
  .soft-dialog .sigil-wrap{ transform: translateY(-6px); }
  .soft-dialog .text{ margin-top: -4px; }
}