/* ===== Ritual Nocturno · estilo ===== */
:root{
  --bg:#08060d; --bg2:#0d0915; --surface:#150e22; --surface2:#1c1330;
  --line:rgba(168,139,250,.16);
  --violet:#a855f7; --violet-bright:#c084fc; --magenta:#d946ef; --amethyst:#7c3aed;
  --text:#efe9f8; --muted:#a99fc0; --dim:#6f6589;
  --glow:0 0 40px rgba(168,85,247,.35);
  --r:18px;
  --ff-display:"Cinzel",serif; --ff-serif:"Cormorant Garamond",serif; --ff-body:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text); font-family:var(--ff-body);
  font-weight:400; line-height:1.6; overflow-x:hidden;
  background-image:
    radial-gradient(900px 600px at 80% -5%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(700px 500px at 0% 30%, rgba(217,70,239,.10), transparent 55%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== anuncio marquee ===== */
.announce{background:linear-gradient(90deg,#160a22,#23123a,#160a22);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}
.announce-track{display:inline-flex;gap:2.6rem;padding:.5rem 0;animation:marq 26s linear infinite;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-bright)}
.announce-track span{opacity:.85}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===== nav ===== */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:.85rem clamp(1rem,4vw,3rem);backdrop-filter:blur(14px);
  background:rgba(8,6,13,.55);border-bottom:1px solid transparent;transition:.35s}
.nav.scrolled{background:rgba(8,6,13,.86);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-mark{width:38px;height:38px;filter:drop-shadow(0 0 8px rgba(168,85,247,.6))}
.brand-name{font-family:var(--ff-display);font-weight:700;letter-spacing:.12em;font-size:1.02rem;text-transform:uppercase}
.brand-name em{font-style:normal;color:var(--violet-bright);font-weight:500;margin-left:.18em}
.nav-links{display:flex;gap:2rem}
.nav-links a{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--violet-bright);transition:.3s}
.nav-links a:hover{color:var(--text)}.nav-links a:hover::after{width:100%}
.cart-btn{position:relative;background:none;border:1px solid var(--line);color:var(--text);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.3s}
.cart-btn:hover{border-color:var(--violet);box-shadow:var(--glow);color:var(--violet-bright)}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--magenta);color:#fff;font-size:.66rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;transform:scale(0);transition:.25s}
.cart-count.show{transform:scale(1)}

/* ===== hero ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:slowZoom 18s ease-in-out infinite alternate}
@keyframes slowZoom{to{transform:scale(1.08)}}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,13,.92) 0%,rgba(8,6,13,.6) 42%,rgba(8,6,13,.25) 70%,rgba(8,6,13,.7) 100%),linear-gradient(0deg,var(--bg) 2%,transparent 40%)}
.hero-glow{position:absolute;width:60vw;height:60vw;right:-10vw;top:10%;background:radial-gradient(circle,rgba(168,85,247,.22),transparent 60%);filter:blur(20px);animation:pulse 7s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55;transform:scale(1.1)}}
.hero-inner{position:relative;z-index:2;padding:0 clamp(1.2rem,6vw,5rem);max-width:760px}
.hero-kicker{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:1.1rem}
.hero-title{font-family:var(--ff-display);font-weight:700;line-height:1.02;font-size:clamp(2.7rem,8vw,5.6rem);letter-spacing:.02em;text-shadow:0 2px 32px rgba(0,0,0,.75)}
.hero-title span{background:linear-gradient(120deg,var(--violet-bright),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 50px rgba(217,70,239,.3)}
.hero-sub{font-family:var(--ff-serif);font-size:clamp(1.1rem,2.4vw,1.5rem);color:#d9d0ec;margin:1.4rem 0 2.2rem;max-width:30ch;line-height:1.45;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.scroll-cue{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);font-size:1.8rem;color:var(--violet-bright);z-index:2;animation:bob 1.8s infinite;opacity:.7}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* ===== botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--ff-body);font-weight:600;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 1.8rem;border-radius:50px;cursor:pointer;border:1px solid transparent;transition:.3s;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(120deg,var(--amethyst),var(--magenta));color:#fff;box-shadow:0 8px 30px rgba(124,58,237,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(217,70,239,.5)}
.btn-ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet-bright);box-shadow:var(--glow)}
.btn-block{width:100%}

/* ===== secciones ===== */
.section{padding:clamp(4rem,9vw,7.5rem) clamp(1.2rem,5vw,4rem);max-width:1240px;margin:0 auto}
.sec-head{text-align:center;max-width:620px;margin:0 auto 3.2rem}
.sec-eyebrow{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--violet-bright)}
.sec-head h2{font-family:var(--ff-display);font-size:clamp(2rem,5vw,3.2rem);font-weight:700;margin:.6rem 0 .8rem;letter-spacing:.02em}
.sec-head p{color:var(--muted);font-family:var(--ff-serif);font-size:1.2rem}

/* ===== grid productos ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem}
.card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--surface),var(--bg2));overflow:hidden;cursor:pointer;transition:.4s}
.card:hover{transform:translateY(-6px);border-color:rgba(168,85,247,.5);box-shadow:0 22px 60px rgba(124,58,237,.25)}
.card-media{position:relative;aspect-ratio:3/3.5;overflow:hidden;background:radial-gradient(120% 90% at 50% 18%,#241638,#0c0816 72%)}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 8%;padding:8% 6% 0;transition:opacity .5s,transform .6s}
.card-media .img-b{opacity:0}
.card:hover .img-a{opacity:0}.card:hover .img-b{opacity:1;transform:scale(1.03)}
.card-tag{position:absolute;top:12px;left:12px;z-index:3;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(8,6,13,.7);border:1px solid var(--line);color:var(--violet-bright);padding:.32rem .6rem;border-radius:50px;backdrop-filter:blur(6px)}
.card-360{position:absolute;top:12px;right:12px;z-index:3;font-size:.6rem;letter-spacing:.1em;background:linear-gradient(120deg,var(--amethyst),var(--magenta));color:#fff;padding:.34rem .55rem;border-radius:50px;display:flex;align-items:center;gap:.3rem;box-shadow:0 4px 16px rgba(217,70,239,.4)}
.card-body{padding:1.1rem 1.2rem 1.4rem}
.card-name{font-family:var(--ff-display);font-size:1.12rem;font-weight:500;letter-spacing:.03em}
.card-desc{color:var(--dim);font-size:.84rem;margin:.25rem 0 .8rem;min-height:2.2em}
.card-foot{display:flex;align-items:center;justify-content:space-between}
.card-price{font-family:var(--ff-serif);font-size:1.4rem;font-weight:600;color:var(--violet-bright)}
.card-add{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);padding:.5rem .9rem;border-radius:50px;color:var(--muted);transition:.3s}
.card:hover .card-add{border-color:var(--violet);color:var(--violet-bright)}

/* ===== ritual / historia ===== */
.ritual{position:relative}
.ritual-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ritual-art{position:relative;display:grid;place-items:center}
.ritual-art img{width:min(360px,80%);filter:drop-shadow(0 0 40px rgba(168,85,247,.5));animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-14px)}}
.ritual-text h2{font-family:var(--ff-display);font-size:clamp(1.9rem,4.5vw,3rem);font-weight:700;margin:.5rem 0 1rem;line-height:1.1}
.ritual-text p{color:var(--muted);margin-bottom:1rem;max-width:46ch}
.ritual-points{list-style:none;margin-top:1.6rem;display:grid;gap:.7rem}
.ritual-points li{padding-left:1.6rem;position:relative;color:var(--muted);font-size:.95rem}
.ritual-points li::before{content:"✶";position:absolute;left:0;color:var(--violet-bright)}
.ritual-points b{color:var(--text);font-weight:600}

/* ===== contacto ===== */
.contacto{text-align:center}
.contacto-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ===== footer ===== */
.footer{text-align:center;padding:3.5rem 1.5rem;border-top:1px solid var(--line);background:var(--bg2)}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.8rem}
.footer-brand img{width:40px;filter:drop-shadow(0 0 8px rgba(168,85,247,.6))}
.footer-tag{color:var(--muted);font-family:var(--ff-serif);font-size:1.05rem}
.footer-legal{color:var(--dim);font-size:.78rem;margin-top:.6rem}

/* ===== carrito drawer ===== */
.overlay{position:fixed;inset:0;background:rgba(4,2,8,.7);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.35s;z-index:90}
.overlay.show{opacity:1;visibility:visible}
.cart{position:fixed;top:0;right:0;height:100%;width:min(420px,90vw);background:linear-gradient(180deg,var(--surface),var(--bg));border-left:1px solid var(--line);z-index:100;transform:translateX(100%);transition:.4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.cart.open{transform:translateX(0)}
.cart-top{display:flex;align-items:center;justify-content:space-between;padding:1.4rem;border-bottom:1px solid var(--line)}
.cart-top h3{font-family:var(--ff-display);font-weight:500;letter-spacing:.08em}
.cart-close,.viewer-close{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;transition:.2s}
.cart-close:hover,.viewer-close:hover{color:var(--magenta)}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.4rem}
.cart-empty{text-align:center;color:var(--dim);margin-top:3rem;font-family:var(--ff-serif);font-size:1.15rem}
.ci{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.ci img{width:62px;height:74px;object-fit:contain;border-radius:10px;background:radial-gradient(circle at 50% 25%,#241638,#0c0816)}
.ci-info{flex:1}
.ci-name{font-size:.92rem;font-weight:600}
.ci-var{font-size:.74rem;color:var(--dim)}
.ci-price{color:var(--violet-bright);font-size:.9rem;margin-top:.2rem}
.ci-qty{display:flex;align-items:center;gap:.5rem;margin-top:.4rem}
.ci-qty button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer}
.ci-rm{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.74rem;align-self:flex-start}
.ci-rm:hover{color:var(--magenta)}
.cart-foot{padding:1.3rem 1.4rem;border-top:1px solid var(--line);background:var(--bg2)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.cart-total b{font-family:var(--ff-serif);font-size:1.7rem;color:var(--violet-bright)}
.cart-note{font-size:.72rem;color:var(--dim);text-align:center;margin-top:.7rem}

/* ===== visor 360 ===== */
.viewer{position:fixed;inset:0;z-index:120;display:none}
.viewer.open{display:block}
.viewer-bg{position:absolute;inset:0;background:rgba(4,2,8,.85);backdrop-filter:blur(8px)}
.viewer-panel{position:absolute;inset:0;margin:auto;width:min(1040px,94vw);height:min(660px,92vh);background:linear-gradient(150deg,var(--surface2),var(--bg));border:1px solid var(--line);border-radius:24px;display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.viewer-close{position:absolute;top:1rem;right:1.1rem;z-index:5;font-size:1.5rem}
.viewer-media{position:relative;background:radial-gradient(120% 80% at 50% 30%,#2a1942,#0a0713 75%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.spin{position:relative;width:100%;height:78%;cursor:grab;touch-action:pan-y;perspective:1400px}
.spin:active{cursor:grabbing}
.spin img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5% 8% 0;user-select:none;-webkit-user-drag:none}
.spin-img-ghost{position:absolute;inset:0;opacity:0;transition:opacity .12s}
.spin-hint{font-size:.74rem;letter-spacing:.12em;color:var(--violet-bright);opacity:.85;text-transform:uppercase;animation:fade 2.4s ease-in-out infinite}
@keyframes fade{50%{opacity:.35}}
.spin-dots{display:flex;gap:.4rem;margin-top:.7rem}
.spin-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.3s;display:block}
.spin-dots i.on{background:var(--violet-bright);box-shadow:0 0 8px var(--violet)}
.viewer-info{padding:clamp(1.4rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.viewer-info h2{font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:500;margin:.4rem 0}
.v-price{font-family:var(--ff-serif);font-size:1.8rem;color:var(--violet-bright);margin-bottom:1rem}
.v-desc{color:var(--muted);margin-bottom:1.4rem;font-size:.96rem}
.v-size{margin-bottom:1.4rem}
.v-size>span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:.5rem}
.size-opts{display:flex;gap:.5rem;flex-wrap:wrap}
.size-opts button{padding:.5rem 1rem;border:1px solid var(--line);background:none;color:var(--muted);border-radius:8px;cursor:pointer;font-size:.84rem;transition:.25s}
.size-opts button.sel,.size-opts button:hover{border-color:var(--violet);color:var(--violet-bright);background:rgba(168,85,247,.08)}
.v-meta{font-size:.74rem;color:var(--dim);margin-top:1rem;text-align:center}

/* ===== reveal anim ===== */
.reveal{opacity:0;transform:translateY(28px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ===== toast ===== */
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(120%);background:linear-gradient(120deg,var(--amethyst),var(--magenta));color:#fff;padding:.85rem 1.5rem;border-radius:50px;font-size:.86rem;font-weight:600;z-index:200;box-shadow:0 12px 40px rgba(217,70,239,.5);transition:.4s;letter-spacing:.04em}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ===== responsive ===== */
@media(max-width:860px){
  .ritual-grid{grid-template-columns:1fr;text-align:center}
  .ritual-text p,.ritual-points{margin-left:auto;margin-right:auto}
  .ritual-points{max-width:340px;text-align:left}
  .viewer-panel{grid-template-columns:1fr;height:min(92vh,820px);width:94vw}
  .viewer-media{height:54%}
  .spin{height:88%}
}
@media(max-width:620px){
  .nav-links{display:none}
  .hero{min-height:88vh}
}

/* ===== envío nota ===== */
.ship-note{text-align:center;color:var(--muted);margin-top:2.2rem;font-size:.92rem}
.ship-note b{color:var(--violet-bright)}

/* ===== cart líneas + descuento ===== */
.cart-line{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--muted);margin-bottom:.5rem}
.cart-line em{font-style:normal;color:var(--dim);font-size:.8rem}
.cart-line b{color:var(--text);font-weight:600}
#discLine b{color:#7ee0a0}#discTag{color:#7ee0a0}

/* ===== pago badge ===== */
.pay-strip{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;margin:1rem 0 .4rem}
.pay-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pay-badge.webpay{background:#fff;color:#e30613;font-weight:800;font-family:var(--ff-body);font-size:.86rem;padding:.32rem .6rem;border-radius:6px;letter-spacing:-.02em;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.pay-badge.webpay i{color:#0a3d91;font-style:normal;font-weight:800}
.pay-card{display:inline-flex;align-items:center;justify-content:center;height:26px;min-width:42px;padding:0 .5rem;border-radius:5px;background:#11101a;border:1px solid var(--line);font-size:.66rem;font-weight:800;letter-spacing:.06em}
.pay-card.visa{color:#1a1f71;background:#fff}
.pay-card.redc{color:#fff;background:#e30613;font-size:.58rem}
.pay-card.mc{gap:0;background:#0c0b14}
.pay-card.mc i{width:15px;height:15px;border-radius:50%;display:block}
.pay-card.mc i:first-child{background:#eb001b;margin-right:-6px}
.pay-card.mc i:last-child{background:#f79e1b;opacity:.92}

/* ===== sección tarot ===== */
.tarot-sec{position:relative}
.tarot-cta{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;max-width:980px;margin:0 auto}
.news-card{background:linear-gradient(160deg,var(--surface2),var(--bg2));border:1px solid var(--line);border-radius:22px;padding:2.2rem;box-shadow:0 20px 60px rgba(124,58,237,.18)}
.news-card h3{font-family:var(--ff-display);font-size:1.5rem;font-weight:500;margin-bottom:.5rem}
.news-card>p{color:var(--muted);margin-bottom:1.4rem;font-size:.96rem}
.news-form{display:grid;gap:.7rem}
.news-form input{background:#0c0816;border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;color:var(--text);font-family:var(--ff-body);font-size:.95rem;transition:.25s}
.news-form input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,85,247,.15)}
.news-mini{font-size:.74rem;color:var(--dim);text-align:center;margin-top:.8rem}
.tarot-teaser{position:relative;height:360px;display:flex;align-items:center;justify-content:center}
.tarot-teaser .tz{position:absolute;width:150px;border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.6);border:1px solid rgba(201,176,106,.4);transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;backface-visibility:hidden;transform-origin:center bottom}
.tarot-teaser .tz:nth-of-type(1){transform:rotate(-16deg) translateX(-70px)}
.tarot-teaser .tz:nth-of-type(2){transform:rotate(0) translateY(-12px) scale(1.06);z-index:2}
.tarot-teaser .tz:nth-of-type(3){transform:rotate(16deg) translateX(70px)}
.tarot-teaser:hover .tz:nth-of-type(1){transform:rotate(-20deg) translateX(-118px) translateY(-10px) scale(1.16)}
.tarot-teaser:hover .tz:nth-of-type(2){transform:rotate(0) translateY(-20px) scale(1.28);z-index:3}
.tarot-teaser:hover .tz:nth-of-type(3){transform:rotate(20deg) translateX(118px) translateY(-10px) scale(1.16)}

/* ===== checkout panel ===== */
.checkout-panel,.tarot-panel{position:absolute;inset:0;margin:auto;width:min(620px,94vw);max-height:92vh;overflow-y:auto;background:linear-gradient(155deg,var(--surface2),var(--bg));border:1px solid var(--line);border-radius:22px;padding:clamp(1.5rem,4vw,2.6rem);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.co-title{font-family:var(--ff-display);font-size:1.7rem;font-weight:500;margin-bottom:.3rem}
.co-sub{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}
.co-form{display:grid;gap:.9rem}
.co-form label{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.co-form label em{text-transform:none;letter-spacing:0;color:var(--dim);font-size:.78rem}
.co-form .opt{text-transform:none;letter-spacing:0;color:var(--dim)}
.co-form input,.co-form select{width:100%;margin-top:.35rem;background:#0c0816;border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;color:var(--text);font-family:var(--ff-body);font-size:.95rem;transition:.25s}
.co-form input:focus,.co-form select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,85,247,.15)}
.co-2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.co-summary{background:#0c0816;border:1px solid var(--line);border-radius:12px;padding:1rem;font-size:.88rem;color:var(--muted)}
.co-summary .l{display:flex;justify-content:space-between;margin-bottom:.3rem}
.co-summary .l b{color:var(--text)}
.co-summary .tot{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.5rem;font-size:1.05rem}
.co-summary .tot b{color:var(--violet-bright);font-family:var(--ff-serif);font-size:1.3rem}
.co-mini{font-size:.74rem;color:var(--dim);text-align:center}
.pac-container{z-index:130!important;background:#140e22;border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.6);font-family:var(--ff-body)}
.pac-item{border-top:1px solid var(--line);color:var(--muted);padding:.4rem .7rem}
.pac-item:hover{background:rgba(168,85,247,.12)}
.pac-item-query,.pac-matched{color:var(--text)}

/* ===== juego tarot ===== */
.tarot-panel{width:min(900px,95vw)}
.tarot-head{text-align:center;margin-bottom:1.4rem}
.tarot-head h2{font-family:var(--ff-display);font-size:1.7rem;font-weight:500;margin:.3rem 0}
.tarot-head p{color:var(--muted);font-size:.9rem}
.tarot-fan{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;perspective:1400px}
.tcard{position:relative;width:84px;aspect-ratio:.7;border-radius:10px;cursor:pointer;transition:transform .35s,box-shadow .35s;transform-style:preserve-3d}
.tcard:hover{transform:translateY(-10px) rotateZ(-2deg)}
.tcard.picked{transform:translateY(-16px) scale(1.04);box-shadow:0 0 28px rgba(168,85,247,.6)}
.tcard.disabled{opacity:.4;pointer-events:none}
.tcard .face,.tcard .back{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;overflow:hidden;border:1px solid rgba(201,176,106,.4)}
.tcard .back{background:radial-gradient(circle at 50% 40%,#2a1942,#0c0816);display:grid;place-items:center}
.tcard .back::after{content:"✶";color:var(--violet-bright);font-size:1.4rem;opacity:.8;text-shadow:0 0 12px var(--violet)}
.tcard .face{transform:rotateY(180deg)}
.tcard .face img{width:100%;height:100%;object-fit:cover}
.tcard.flip{transform:rotateY(180deg)}
.tarot-picks{text-align:center;color:var(--violet-bright);margin-top:1.2rem;min-height:1.4em;font-size:.86rem;letter-spacing:.06em}
.tarot-result{text-align:center}
.tr-cards{display:flex;justify-content:center;gap:.8rem;margin:1.2rem 0}
.tr-cards img{width:120px;border-radius:10px;border:1px solid rgba(201,176,106,.4);box-shadow:0 14px 40px rgba(0,0,0,.5);animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.tr-reading{font-family:var(--ff-serif);font-size:1.15rem;line-height:1.6;color:#e3d8f2;max-width:60ch;margin:0 auto 1.4rem;white-space:pre-wrap}
.tr-reading.loading{color:var(--violet-bright);font-style:italic}
.tr-code{font-family:var(--ff-body);margin-bottom:1.4rem}
.tr-code b{display:inline-block;background:linear-gradient(120deg,var(--amethyst),var(--magenta));color:#fff;font-size:1.2rem;letter-spacing:.12em;padding:.5rem 1.2rem;border-radius:10px;box-shadow:0 8px 30px rgba(217,70,239,.4)}

@media(max-width:760px){
  .tarot-cta{grid-template-columns:1fr}
  .tarot-teaser{height:260px;order:-1}
  .co-2{grid-template-columns:1fr}
  .tr-cards img{width:88px}
}

/* ===== categorías ===== */
.cat-bar{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.2rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--line);color:var(--muted);padding:.55rem .95rem;border-radius:50px;cursor:pointer;font-family:var(--ff-body);font-size:.8rem;font-weight:600;letter-spacing:.03em;transition:.25s}
.chip:hover{border-color:var(--violet);color:var(--text)}
.chip.on{background:linear-gradient(120deg,var(--amethyst),var(--magenta));color:#fff;border-color:transparent;box-shadow:0 6px 22px rgba(168,85,247,.35)}
.chip-emoji{font-size:1rem}
.chip-n{background:rgba(0,0,0,.25);border-radius:50px;font-size:.66rem;padding:.05rem .42rem;min-width:18px;text-align:center}
.chip.on .chip-n{background:rgba(255,255,255,.25)}
.grid-empty{grid-column:1/-1;text-align:center;padding:3.5rem 1rem;color:var(--muted);font-family:var(--ff-serif);font-size:1.2rem;border:1px dashed var(--line);border-radius:var(--r)}
.grid-empty b{color:var(--violet-bright);font-family:var(--ff-display)}

/* ===== camino nocturno ===== */
.camino-box{max-width:880px;margin:0 auto;display:grid;gap:1.8rem}
.camino-rank{text-align:center}
.cr-now{display:inline-flex;align-items:center;gap:.8rem;justify-content:center}
.cr-emoji{font-size:2.6rem;filter:drop-shadow(0 0 14px rgba(168,85,247,.6))}
.cr-label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.cr-now h3{font-family:var(--ff-display);font-size:1.6rem;font-weight:500}
.cr-prog{color:var(--muted);margin-top:.7rem}.cr-prog b{color:var(--violet-bright)}
.moons{display:flex;justify-content:space-between;gap:.5rem;position:relative;flex-wrap:wrap}
.moons::before{content:"";position:absolute;top:22px;left:6%;right:6%;height:2px;background:var(--line);z-index:0}
.moon-step{flex:1;min-width:90px;text-align:center;position:relative;z-index:1;opacity:.45;transition:.3s}
.moon-step.on{opacity:1}
.moon-step.cur .ms-emoji{box-shadow:0 0 0 3px var(--magenta),0 0 22px var(--violet)}
.ms-emoji{display:grid;place-items:center;width:46px;height:46px;margin:0 auto .5rem;border-radius:50%;background:var(--surface2);border:1px solid var(--line);font-size:1.4rem}
.moon-step.on .ms-emoji{background:radial-gradient(circle,#3a1f5e,#1a0f2b)}
.ms-name{display:block;font-size:.8rem;color:var(--text);font-weight:600}
.ms-req{display:block;font-size:.66rem;color:var(--dim)}
.seals-box{background:linear-gradient(160deg,var(--surface),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:1.5rem}
.seals-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.seals-head b{color:var(--violet-bright);font-family:var(--ff-serif);font-size:1.3rem}
.seals{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.seal{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--dim);font-size:.8rem;background:#0c0816}
.seal.on{color:#fff;background:linear-gradient(120deg,var(--amethyst),var(--magenta));border-color:transparent;box-shadow:0 0 10px rgba(217,70,239,.5)}
.seal-rewards{list-style:none;display:grid;gap:.45rem}
.seal-rewards li{color:var(--muted);font-size:.92rem;padding-left:.2rem}
.seal-rewards li b{color:var(--violet-bright)}
.seal-rewards li.done{color:#7ee0a0;text-decoration:none}
.seal-rewards li.done b{color:#7ee0a0}

/* ===== comunidad ===== */
.comm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;max-width:760px;margin:0 auto 2rem}
.comm-tile{aspect-ratio:1;border:1px dashed var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:radial-gradient(circle at 50% 35%,#1a1030,#0c0816);transition:.3s}
.comm-tile:hover{border-color:var(--violet);transform:translateY(-4px)}
.comm-tile span{font-size:1.8rem;opacity:.8}
.comm-tile b{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
.comunidad{text-align:center}

@media(max-width:620px){
  .moons{gap:.3rem}.moon-step{min-width:60px}.ms-name{font-size:.68rem}
}

/* aparición del premio + botón tras la lectura */
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.pop{animation:pop .5s cubic-bezier(.2,.7,.2,1) both}

/* campo fecha de nacimiento en el tarot */
.birth-field{display:block;font-size:.72rem;letter-spacing:.06em;color:var(--violet-bright);text-align:left}
.birth-field span{color:var(--dim);letter-spacing:0}
.birth-field input[type=date]{width:100%;margin-top:.35rem;color-scheme:dark;background:#0c0816;border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;color:var(--text);font-family:var(--ff-body);font-size:.95rem}
.birth-field input[type=date]:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,85,247,.15)}

/* fecha de nacimiento: 3 listas simples */
.birth-field>label{display:block;font-size:.74rem;letter-spacing:.06em;color:var(--violet-bright);text-align:left;margin-bottom:.4rem}
.birth-field>label span{color:var(--dim);letter-spacing:0}
.birth-selects{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:.5rem}
.birth-selects select{width:100%;color-scheme:dark;background:#0c0816;border:1px solid var(--line);border-radius:10px;padding:.8rem .6rem;color:var(--text);font-family:var(--ff-body);font-size:.92rem;cursor:pointer}
.birth-selects select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,85,247,.15)}

/* ===== invocación del cupón ===== */
.tr-code{position:relative}
@keyframes invoke{0%{opacity:0;transform:scale(.3) rotate(-8deg);filter:blur(10px)}55%{opacity:1;transform:scale(1.14);filter:blur(0)}75%{transform:scale(.97)}100%{transform:scale(1)}}
.tr-code.invoke{animation:invoke .8s cubic-bezier(.2,.85,.2,1) both}
.tr-code.invoke::before{content:"";position:absolute;left:50%;top:55%;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,rgba(217,70,239,.95),rgba(168,85,247,.5) 40%,transparent 72%);transform:translate(-50%,-50%);pointer-events:none;animation:burst .9s ease-out forwards}
@keyframes burst{0%{opacity:.95;width:12px;height:12px}100%{opacity:0;width:680px;height:680px}}
.tr-code.invoke b{animation:glowpulse 1.8s ease-in-out infinite}
@keyframes glowpulse{0%,100%{box-shadow:0 8px 30px rgba(217,70,239,.45)}50%{box-shadow:0 8px 55px rgba(217,70,239,.9),0 0 34px rgba(168,85,247,.75)}}
.tr-spark{position:absolute;left:50%;top:-18px;transform:translateX(-50%);color:var(--violet-bright);font-size:1.4rem;animation:sparkUp 1s ease-out both;text-shadow:0 0 16px var(--violet)}
@keyframes sparkUp{0%{opacity:0;transform:translate(-50%,12px) scale(.4)}50%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px) scale(1.3)}}
@keyframes invokeBtn{0%{opacity:0;transform:translateY(22px) scale(.9)}60%{opacity:1;transform:translateY(-3px) scale(1.03)}100%{transform:none}}
.invoke-btn{animation:invokeBtn .55s cubic-bezier(.2,.8,.2,1) both}

/* buscador de progreso en El Camino */
.camino-lookup{display:flex;gap:.5rem;max-width:420px;margin:0 auto 1rem;flex-wrap:wrap}
.camino-lookup input{flex:1;min-width:180px;background:#0c0816;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;color:var(--text);font-family:var(--ff-body);font-size:.92rem}
.camino-lookup input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,85,247,.15)}
.camino-lookup .btn{padding:.7rem 1.1rem}
.cm-greet{text-align:center;color:var(--violet-bright);font-family:var(--ff-serif);font-size:1.15rem;margin-bottom:1.2rem}

/* ===== luna que carga (0->100, nueva->llena) ===== */
.moon-charge{display:flex;align-items:center;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin:.5rem 0 1.6rem}
.mc-orb{position:relative;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#15102a,#0a0713);border:1px solid var(--line);overflow:hidden;transition:box-shadow 1.2s ease;flex:none}
.mc-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,#7c3aed,#c084fc 60%,#f0e6ff);opacity:.85;transition:height 1.3s cubic-bezier(.3,.7,.3,1);box-shadow:0 0 30px rgba(192,132,252,.8)}
.mc-emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:3.2rem;z-index:2;filter:drop-shadow(0 0 10px rgba(0,0,0,.5))}
.mc-info{text-align:left;min-width:200px}
.mc-pct{font-family:var(--ff-serif);font-size:2.4rem;font-weight:600;color:var(--violet-bright);line-height:1;display:block}
.mc-info h3{font-family:var(--ff-display);font-weight:500;font-size:1.2rem;margin:.2rem 0 .4rem}
.cm-msg{color:var(--muted);font-size:.92rem;max-width:34ch}.cm-msg b{color:var(--violet-bright)}
/* barra lunar */
.moon-bar{max-width:560px;margin:0 auto 1.8rem}
.mb-track{position:relative;height:12px;border-radius:50px;background:#0c0816;border:1px solid var(--line);margin-top:1.4rem}
.mb-fill{height:100%;width:0;border-radius:50px;background:linear-gradient(90deg,#4b2a86,#a855f7,#d946ef);transition:width 1.3s cubic-bezier(.3,.7,.3,1);box-shadow:0 0 16px rgba(217,70,239,.6)}
.mb-mark{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:1.05rem;filter:grayscale(.7);opacity:.5;transition:.4s;pointer-events:none}
.mb-mark.on{filter:none;opacity:1;text-shadow:0 0 10px var(--violet)}
.mb-ends{display:flex;justify-content:space-between;margin-top:.6rem;font-size:.74rem;color:var(--dim);letter-spacing:.04em}
@media(max-width:520px){.mc-info{text-align:center}.moon-charge{gap:1rem}}

/* barra de carga al buscar progreso */
.cm-search{text-align:center;padding:1.2rem 0}
.cm-loadbar{max-width:360px;margin:1.1rem auto 0;height:8px;border-radius:50px;background:#0c0816;border:1px solid var(--line);overflow:hidden;position:relative}
.cm-loadbar span{position:absolute;top:0;height:100%;width:40%;border-radius:50px;background:linear-gradient(90deg,transparent,#a855f7,#d946ef,transparent);animation:loadslide 1.05s ease-in-out infinite}
@keyframes loadslide{0%{left:-45%}100%{left:105%}}
.cm-prompt{color:var(--muted)}

/* nota "ya activado" en el tarot */
.tr-note{margin-top:.8rem;font-size:.82rem;color:var(--muted);max-width:34ch;margin-left:auto;margin-right:auto;line-height:1.5}

/* campo de cupón en el carrito */
.coupon-box{margin-bottom:1rem}
.cp-form{display:flex;gap:.5rem}
.cp-form input{flex:1;min-width:0;background:#0c0816;border:1px dashed var(--line);border-radius:8px;padding:.6rem .7rem;color:var(--text);font-size:.86rem}
.cp-form input:focus{outline:none;border-color:var(--violet);border-style:solid}
.cp-form button{background:rgba(168,85,247,.15);border:1px solid var(--violet);color:var(--violet-bright);border-radius:8px;padding:.4rem .9rem;cursor:pointer;font-size:.76rem;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.cp-form button:hover{background:rgba(168,85,247,.28)}
.cp-applied{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:rgba(126,224,160,.08);border:1px solid rgba(126,224,160,.35);border-radius:8px;padding:.55rem .7rem;font-size:.82rem;color:#9be8b4}
.cp-applied b{color:#cdf7da;letter-spacing:.06em}
.cp-applied .cp-lbl{color:var(--muted);font-size:.74rem;flex:1 1 100%}
.cp-applied #cpRemove{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.74rem;text-decoration:underline}
.cp-applied #cpRemove:hover{color:var(--magenta)}

/* carta de mascota EN GRANDE al revelar el premio */
.tr-mascot{display:flex;align-items:center;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
.tr-mascot-img{width:190px;max-width:46%;border-radius:14px;border:1px solid rgba(201,176,106,.5);box-shadow:0 16px 55px rgba(217,70,239,.4)}
.tr-mascot-info{text-align:left;min-width:190px}
.tr-msg{font-family:var(--ff-serif);font-size:1.15rem;color:#e3d8f2;margin-bottom:.7rem;line-height:1.4}
.tr-prize{color:var(--violet-bright);font-weight:600;font-size:1.05rem;margin-bottom:.55rem}
.tr-codebig{display:inline-block;background:linear-gradient(120deg,var(--amethyst),var(--magenta));color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:2px;padding:.5rem 1.1rem;border-radius:10px;box-shadow:0 8px 30px rgba(217,70,239,.5)}
.tr-code.invoke .tr-codebig{animation:glowpulse 1.8s ease-in-out infinite}
@media(max-width:520px){.tr-mascot-info{text-align:center}.tr-mascot-img{max-width:70%}}

/* ===== fondos shader ===== */
.hero-shader{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:1;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 72%);mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 72%)}
.teaser-shader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280%;height:280%;z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 66%);mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 66%)}
.tarot-teaser .tz{z-index:1}
.tarot-sec{overflow:hidden}
.tarot-sec .sec-head,.tarot-sec .tarot-cta{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.hero-shader,.tarot-shader{display:none}}

/* ============ MÁS ANIMACIONES / EFectos que se iluminan ============ */
/* botón primario: barrido de luz al pasar el mouse + respiración */
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .65s ease;pointer-events:none}
.btn-primary:hover::after{left:130%}
@keyframes breathe{0%,100%{box-shadow:0 8px 30px rgba(124,58,237,.4)}50%{box-shadow:0 8px 38px rgba(217,70,239,.65)}}
.btn-primary{animation:breathe 3.5s ease-in-out infinite}

/* badge 360 de las cartas: latido */
@keyframes badgePulse{0%,100%{box-shadow:0 4px 16px rgba(217,70,239,.4);transform:translateZ(0)}50%{box-shadow:0 4px 24px rgba(217,70,239,.85)}}
.card-360{animation:badgePulse 2.6s ease-in-out infinite}

/* sellos: se encienden en oleada */
@keyframes sealPulse{0%,100%{box-shadow:0 0 8px rgba(217,70,239,.45)}50%{box-shadow:0 0 18px rgba(217,70,239,.95),0 0 28px rgba(168,85,247,.6)}}
.seal.on{animation:sealPulse 2.2s ease-in-out infinite}
.seal.on:nth-child(3n){animation-delay:.5s}
.seal.on:nth-child(3n+1){animation-delay:1s}

/* línea del camino: brillo que recorre */
.moons::before{background:linear-gradient(90deg,transparent,var(--violet),var(--magenta),transparent)!important;background-size:200% 100%!important;animation:lineShimmer 3.5s linear infinite}
@keyframes lineShimmer{to{background-position:-200% 0}}
/* rango actual: aura pulsante */
@keyframes moonGlow{0%,100%{box-shadow:0 0 0 3px var(--magenta),0 0 16px var(--violet)}50%{box-shadow:0 0 0 3px var(--magenta),0 0 34px var(--violet),0 0 52px rgba(217,70,239,.5)}}
.moon-step.cur .ms-emoji{animation:moonGlow 2.6s ease-in-out infinite}
.cr-emoji{animation:floaty 5s ease-in-out infinite}

/* cajas con borde que respira */
@keyframes borderGlow{0%,100%{border-color:var(--line);box-shadow:0 0 0 rgba(124,58,237,0)}50%{border-color:rgba(168,85,247,.45);box-shadow:0 0 26px rgba(124,58,237,.22)}}
.seals-box,.news-card{animation:borderGlow 5s ease-in-out infinite}

/* barra de progreso (Camino) que se ilumina */
.cm-bar{height:11px;border-radius:50px;background:#0c0816;border:1px solid var(--line);overflow:hidden;margin:.1rem 0 1.1rem;position:relative}
.cm-bar-fill{height:100%;border-radius:50px;background:linear-gradient(90deg,#4b2a86,#a855f7,#d946ef);box-shadow:0 0 16px rgba(217,70,239,.75);position:relative;transition:width 1.1s cubic-bezier(.3,.7,.3,1)}
.cm-bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);background-size:45% 100%;background-repeat:no-repeat;animation:barShine 1.9s linear infinite}
@keyframes barShine{0%{background-position:-45% 0}100%{background-position:145% 0}}

/* emblema del logo: leve latido de brillo */
@keyframes markGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(168,85,247,.6))}50%{filter:drop-shadow(0 0 16px rgba(168,85,247,.95))}}
.brand-mark{animation:markGlow 4s ease-in-out infinite}

/* eyebrows con destello */
@keyframes eyebrowGlow{0%,100%{text-shadow:0 0 0 rgba(192,132,252,0)}50%{text-shadow:0 0 14px rgba(192,132,252,.7)}}
.sec-eyebrow{animation:eyebrowGlow 4.5s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .btn-primary,.card-360,.seal.on,.moon-step.cur .ms-emoji,.cr-emoji,.seals-box,.news-card,.brand-mark,.sec-eyebrow,.moons::before,.cm-bar-fill::after{animation:none!important}
}

/* comunidad: compartir historia */
.comm-tile{cursor:pointer}
.comm-hint{text-align:center;color:var(--muted);font-size:.86rem;max-width:560px;margin:1.2rem auto 0;line-height:1.6}
.comm-hint b{color:var(--violet-bright)}

/* estado "ya tienes tu descuento" */
.news-claimed{text-align:center}
.nc-lead{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.nc-lead b{color:var(--violet-bright)}
.nc-code{display:inline-block;background:linear-gradient(120deg,var(--amethyst),var(--magenta));color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:2px;padding:.6rem 1.3rem;border-radius:10px;margin-bottom:1.1rem;box-shadow:0 8px 30px rgba(217,70,239,.5)}