/* ═══════════════════════════════════════════════════════
   Estilos del Mapa. Copiados del quiz (quiz/public/index.html)
   para que la app se sienta la continuación de la mini lectura.
   ═══════════════════════════════════════════════════════ */
body{ font-family:'Inter',sans-serif; margin:0; background:#fff; color:#111827; }
:root{ --primary:#8800A3; --primary-hover:#700085; --light:#FEF5FF; }

.hide-scrollbar::-webkit-scrollbar{ display:none; }
.hide-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

@keyframes fadeIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.fade-in{ animation:fadeIn .4s ease-out forwards; }

/* ── BOTONES DE OPCION ──────────────────────────────── */
.btn-option{ transition:all .2s cubic-bezier(.4,0,.2,1); }
.btn-option:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.05); }
.btn-selected{ border-color:#8800A3!important; background-color:#FEF5FF!important; box-shadow:0 4px 12px rgba(136,0,163,.15); }
.btn-selected .label-text{ color:#8800A3!important; font-weight:600; }

/* ── BOTONES MULTI-SELECCION ────────────────────────── */
.btn-purple-fill{ background-color:#f9fafb; border:1px solid transparent; transition:all .2s ease; position:relative; overflow:hidden; }
.btn-purple-fill:hover{ background-color:#f3f4f6; transform:translateY(-1px); }
.btn-purple-fill.selected{ background-color:#8800A3!important; color:#fff!important; box-shadow:0 8px 16px -4px rgba(136,0,163,.3); border-color:#8800A3; }
.btn-purple-fill.selected .icon-container{ color:#fff!important; }
.check-circle{ width:24px; height:24px; background:#fff; border:2px solid #e5e7eb; transition:all .2s ease; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.btn-purple-fill.selected .check-circle{ border-color:#fff; background:#fff; }
.check-mark{ opacity:0; transform:scale(.5); transition:all .2s cubic-bezier(.175,.885,.32,1.275); color:#8800A3; width:14px; height:14px; }
.btn-purple-fill.selected .check-mark{ opacity:1; transform:scale(1); }

/* ── CTA ────────────────────────────────────────────── */
.btn-cta{ width:100%; padding:1rem; color:#fff; border-radius:.75rem; font-weight:700; font-size:1.125rem; background:#8800A3; box-shadow:0 10px 15px -3px rgba(0,0,0,.1); transition:all .2s; text-align:center; display:block; }
.btn-cta:hover{ background:#700085; transform:translateY(-1px); }
.btn-cta:disabled, .btn-cta.off{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-soft{ display:inline-block; padding:.6rem 1rem; border-radius:.75rem; background:#FEF5FF; color:#8800A3; font-weight:600; font-size:.9rem; }

/* ── ANILLO DE PROGRESO ─────────────────────────────── */
.progress-ring__circle{ transition:stroke-dashoffset .6s; transform:rotate(-90deg); transform-origin:50% 50%; }
@keyframes pulse-purple{ 0%,100%{box-shadow:0 0 0 0 rgba(136,0,163,.4)} 50%{box-shadow:0 0 0 8px rgba(136,0,163,0)} }
.task-active{ opacity:1!important; background-color:#FEF5FF; transform:scale(1.02); }
.task-active .status-icon{ border-color:#8800A3; animation:pulse-purple 2s infinite; }
.task-completed{ opacity:1!important; }
.task-completed .status-icon{ background-color:#8800A3; border-color:#8800A3; color:#fff; }
.task-completed .status-icon::after{ content:'✓'; font-size:14px; font-weight:bold; }

/* ── ESCENA DEL ABANICO ─────────────────────────────── */
.tarot-scene{ height:280px; max-width:450px; width:100%; margin:10px auto 0; display:flex; justify-content:center; align-items:flex-start; overflow:visible; position:relative; perspective:1000px; }
.tarot-card-container{ width:80px; height:135px; position:absolute; top:40px; transform-origin:center 320px; transform:rotate(var(--rot)); transition:transform .3s cubic-bezier(.25,.8,.25,1), z-index 0s linear .1s; cursor:pointer; z-index:10; pointer-events:auto; }
.tarot-card-inner{ position:relative; width:100%; height:100%; text-align:center; transition:transform .8s; transform-style:preserve-3d; border-radius:6px; box-shadow:-2px 2px 5px rgba(0,0,0,.2); }
.tarot-front,.tarot-back{ position:absolute; width:100%; height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:6px; border:4px solid #f8f8f8; outline:1px solid #d1d5db; background-clip:padding-box; }
.tarot-front{ background:#2e0238; }
.tarot-front::after{ content:''; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(135deg,#fff 25%,transparent 25%),linear-gradient(225deg,#fff 25%,transparent 25%),linear-gradient(45deg,#fff 25%,transparent 25%),linear-gradient(315deg,#fff 25%,transparent 25%); background-position:4px 0,4px 0,0 0,0 0; background-size:8px 8px; }
.tarot-back{ background-color:#fffcf5; color:#333; transform:rotateY(180deg); display:flex; flex-direction:column; padding:3px; overflow:hidden; }
.card-inner-border{ width:100%; height:100%; border:2px double #8800A3; border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:6px 2px; background-color:rgba(255,255,255,.5); }
.card-roman{ font-family:'Cinzel',serif; font-size:8px; color:#999; margin-bottom:2px; }
.card-main-symbol{ font-size:32px; line-height:1; margin:auto 0; filter:drop-shadow(0 2px 2px rgba(0,0,0,.1)); flex:0 1 auto; min-height:0; }
.card-info{ text-align:center; width:100%; padding-top:4px; border-top:1px solid rgba(136,0,163,.2); flex:0 0 auto; }
.card-title{ font-family:'Cinzel',serif; font-size:8px; font-weight:800; color:#4a0e5c; text-transform:uppercase; letter-spacing:.5px; line-height:1.12; overflow-wrap:anywhere; hyphens:auto; }
.card-keywords{ font-family:'Inter',sans-serif; font-size:6px; color:#666; font-style:italic; margin-top:1px; letter-spacing:.2px; line-height:1.15; overflow-wrap:anywhere; }
.card-title.t-md{ font-size:7px; letter-spacing:.2px; }
.card-title.t-sm{ font-size:6px; letter-spacing:0; }
.card-keywords.k-sm{ font-size:5.5px; letter-spacing:0; }
@media (hover:hover){
  .tarot-card-container:not(.clicked):hover{ z-index:100!important; transform:rotate(var(--rot)) translateY(-30px); transition:transform .2s ease-out, z-index 0s; }
  .tarot-card-container:not(.clicked):hover .tarot-card-inner{ box-shadow:0 10px 20px rgba(136,0,163,.3); }
}
.tarot-card-container.clicked{ z-index:999!important; }
.tarot-card-container.clicked .tarot-card-inner{ transform:rotateY(180deg); box-shadow:0 0 40px rgba(136,0,163,.6); }

/* ── CARTA ESTATICA ─────────────────────────────────── */
.static-card-display{ width:110px; height:190px; margin:0 auto; border-radius:6px; box-shadow:0 10px 25px rgba(136,0,163,.25); background-color:#fffcf5; position:relative; border:3px solid #f8f8f8; outline:1px solid #d1d5db; padding:3px; display:flex; flex-direction:column; }
.static-card-display .card-main-symbol{ font-size:48px; }
.static-card-display .card-title{ font-size:11px; }
.static-card-display .card-roman{ font-size:10px; }
.static-card-display .card-keywords{ font-size:8px; }
.static-card-display.sm{ width:64px; height:110px; padding:2px; border-width:2px; }
.static-card-display.sm .card-main-symbol{ font-size:26px; }
.static-card-display.sm .card-title{ font-size:6.5px; letter-spacing:0; }
.static-card-display.sm .card-roman{ font-size:7px; }
.static-card-display.sm .card-keywords{ display:none; }

/* ── GRILLA DE CARTAS BOCA ARRIBA (calibración) ─────── */
.card-pick{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border-radius:12px; border:2px solid transparent; background:transparent; cursor:pointer; transition:all .2s; }
.card-pick:hover{ background:#FEF5FF; }
.card-pick.picked{ border-color:#8800A3; background:#FEF5FF; }
.card-pick .static-card-display{ box-shadow:0 6px 14px rgba(136,0,163,.18); }
.card-pick .pick-name{ font-size:11px; font-weight:700; color:#4a0e5c; text-align:center; line-height:1.1; }

/* ── LECTURA ────────────────────────────────────────── */
.reading-text{ font-family:'Merriweather',serif; line-height:1.8; color:#333; }
.reading-text h3{ font-family:'Inter',sans-serif; }
.handwritten-signoff{ font-family:'Cinzel',serif; font-size:1.5rem; color:#8800A3; margin-top:.25rem; }
.titulo-cinzel{ font-family:'Cinzel',serif; }

/* ── TARJETAS DEL HOME ──────────────────────────────── */
.tarjeta{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:#fff; border:2px solid #f3f4f6; transition:all .2s; text-decoration:none; color:inherit; }
.tarjeta:hover{ border-color:#e9d5ff; box-shadow:0 4px 12px rgba(136,0,163,.08); transform:translateY(-1px); }
.tarjeta.principal{ background:#FEF5FF; border-color:#e9d5ff; }
.tarjeta.bloqueada{ opacity:.6; }
.tarjeta.bloqueada:hover{ transform:none; box-shadow:none; }
.tarjeta .icono{ font-size:26px; width:40px; text-align:center; flex-shrink:0; }
.tarjeta .titulo{ font-weight:700; color:#111827; line-height:1.2; }
.tarjeta .sub{ font-size:12px; color:#6b7280; margin-top:2px; }
.tarjeta .check{ width:22px; height:22px; border-radius:50%; border:2px solid #e5e7eb; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; }
.tarjeta .check.ok{ background:#8800A3; border-color:#8800A3; }
.candado{ background:#fff; border:2px dashed #e9d5ff; }
.candado .precio{ font-weight:800; color:#8800A3; white-space:nowrap; }

/* ── DESAFÍO: GRILLA DE 21 DÍAS ─────────────────────── */
.dia{ aspect-ratio:1; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; font-size:1.05rem; border:2px solid #f3f4f6; color:#374151; text-decoration:none; }
.dia.abierto{ border-color:#8800A3; color:#8800A3; background:#FEF5FF; }
.dia.hecho{ background:#8800A3; border-color:#8800A3; color:#fff; }
.dia.cerrado{ color:#c4c4c8; background:#fafafa; }
.dia small{ font-size:9px; font-weight:600; opacity:.8; }

/* ── NAV INFERIOR ───────────────────────────────────── */
.nav-inf{ position:fixed; bottom:0; left:0; right:0; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-top:1px solid #f3f4f6; z-index:40; }
/* sin el CDN de Tailwind (no cargó: señal mala, bloqueador) la barra se apilaba en vertical, tapaba un tercio de la pantalla
   y dejaba debajo los últimos botones ("Leer mi lectura", enviar las 3 preguntas). Quejas del 3 al 20/10/2026.
   Son los mismos valores que dan `flex mx-auto` y `pb-24`: con Tailwind no cambia nada */
.nav-inf > div{ display:flex; margin-left:auto; margin-right:auto; }
footer{ padding-bottom:6rem; }
.nav-inf a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0 12px; font-size:11px; font-weight:600; color:#9ca3af; text-decoration:none; }
.nav-inf a.on{ color:#8800A3; }
/* escribiendo en un formulario (public/app.js): la barra no tapa el campo ni el botón con el teclado abierto */
body.escribiendo .nav-inf{ display:none; }
.nav-inf a span.i{ font-size:20px; line-height:1; }

/* ── AUDIO ──────────────────────────────────────────── */
audio.player{ width:100%; accent-color:#8800A3; }

@media (min-width:640px){
  .tarot-card-container{ width:90px; height:155px; top:50px; transform-origin:center 400px; }
  .tarot-scene{ height:320px; max-width:600px; }
  .card-title{ font-size:9px; } .card-keywords{ font-size:7px; }
  .card-title.t-md{ font-size:8px; } .card-title.t-sm{ font-size:7px; }
  .card-keywords.k-sm{ font-size:6px; }
  .card-main-symbol{ font-size:40px; } .card-roman{ font-size:9px; }
  .static-card-display .card-main-symbol{ font-size:48px; }
  .static-card-display .card-title{ font-size:11px; }
  .static-card-display .card-keywords{ font-size:8px; }
}

/* ── vitrina de "Más de Mia" (home y /mas, 1/10/2026): una destacada y el resto en tarjetas chicas con precio ── */
.vitrina-destacada{ display:block; padding:18px 18px 16px; border-radius:22px; background:linear-gradient(160deg,#FEF5FF 0%,#ffffff 75%); border:2px solid #e9d5ff; box-shadow:0 8px 24px rgba(136,0,163,.10); text-decoration:none; color:inherit; transition:all .2s; }
.vitrina-destacada:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(136,0,163,.16); }
.vitrina-destacada .cuerpo{ display:flex; align-items:flex-start; gap:14px; margin-top:12px; }
.vitrina-destacada .emoji{ width:54px; height:54px; border-radius:16px; background:#fff; border:1px solid #f3e8ff; display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; }
.vitrina-destacada .titulo{ font-weight:800; font-size:1.08rem; color:#4a0e5c; line-height:1.25; }
.vitrina-destacada .promesa{ font-size:14px; color:#4b5563; margin-top:6px; line-height:1.45; }
.vitrina-destacada .pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid #f3e8ff; }
.vitrina-destacada .precio{ font-weight:800; font-size:1.3rem; color:#8800A3; }
.vitrina-destacada .cada{ font-size:12px; color:#9ca3af; }
.vitrina-destacada .ver{ background:#8800A3; color:#fff; font-weight:700; font-size:.95rem; padding:.6rem 1.1rem; border-radius:.75rem; white-space:nowrap; box-shadow:0 6px 14px rgba(136,0,163,.22); }
.vitrina-item{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:18px; background:#fff; border:2px solid #f3f4f6; text-decoration:none; color:inherit; transition:all .2s; }
.vitrina-item:hover{ border-color:#e9d5ff; box-shadow:0 4px 12px rgba(136,0,163,.08); transform:translateY(-1px); }
.vitrina-item .emoji{ width:44px; height:44px; border-radius:14px; background:#FEF5FF; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.vitrina-item .titulo{ font-weight:700; color:#111827; line-height:1.25; font-size:.95rem; }
.vitrina-item .promesa{ font-size:12px; color:#6b7280; margin-top:3px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vitrina-item .lado{ text-align:right; flex-shrink:0; padding-left:4px; }
.vitrina-item .precio{ font-weight:800; color:#8800A3; white-space:nowrap; font-size:.95rem; }
.vitrina-item .cada{ font-size:10px; color:#9ca3af; white-space:nowrap; }
.vitrina-item.pronto{ opacity:.6; }
.vitrina-chip{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8800A3; background:#fff; border:1px solid #e9d5ff; padding:3px 9px; border-radius:999px; }
.vitrina-chip.chica{ padding:1px 7px; margin-bottom:4px; font-size:9px; background:#FEF5FF; }

/* carta del día y "¿qué te quedó picando?" (6/10/2026): lo oculto con el atributo hidden no lo vuelve a mostrar una clase de Tailwind */
[hidden]{ display:none !important; }
.chip-senal{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:2px solid #f3e8ff; background:#fff; font-size:14px; color:#374151; cursor:pointer; }
.chip-senal:has(input:checked){ border-color:#8800A3; background:#FEF5FF; }
.chip-senal input{ width:16px; height:16px; }
/* guardar una pieza en PDF (la Gran Lectura, 20/10/2026): al imprimir queda solo el texto */
@media print{ .nav-inf, .no-print, .btn-cta, .btn-soft, footer, form, [data-picando]{ display:none !important; } body{ background:#fff; } .reading-text{ font-size:12pt; } }