/* ==========================================================
   ZONAFEROZ — TIENDA SUCCUBO
========================================================== */

/* ---- Avisos en las entradas ---- */
.zfst-cta{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:16px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,rgba(236,72,153,.2),rgba(139,92,246,.18));border:1px solid rgba(236,72,153,.45);transition:.2s;flex-wrap:wrap}
.zfst-cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(236,72,153,.25)}
.zfst-cta-ico{font-size:30px}
.zfst-cta span:nth-child(2){flex:1;min-width:200px}
.zfst-cta strong{display:block}
.zfst-cta small{color:#fbcfe8}
.zfst-cta em{font-style:normal;font-weight:800;color:#ffb3d1}
.zfst-owned{margin:0 0 20px;padding:18px;border-radius:16px;background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(139,92,246,.1));border:1px solid rgba(34,197,94,.45)}
.zfst-owned h3{margin:0 0 10px}
.zfst-owned-body p{margin:.4em 0}
a.zfst-dl{display:inline-block;margin:4px 6px 4px 0;padding:8px 14px;border-radius:10px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff!important;font-weight:700;text-decoration:none;word-break:break-all}
a.zfst-dl:hover{filter:brightness(1.15)}

/* ---- Escena ---- */
.zfst-page{padding-bottom:60px}
.zfst-scene{position:relative;height:470px;overflow:hidden;border-bottom:3px solid #6d28d9;margin-bottom:26px;isolation:isolate;
  background:radial-gradient(ellipse at 50% 20%,#4a1478 0,#1d0838 45%,#0b0414 100%)}
.zfst-wall{position:absolute;inset:0;opacity:.35;z-index:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 46px),repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 92px)}
.zfst-window{position:absolute;left:50%;top:26px;width:150px;height:210px;margin-left:-75px;border-radius:75px 75px 6px 6px;z-index:0;
  background:linear-gradient(#1e1b4b,#4c1d95);border:6px solid #2a1342;box-shadow:inset 0 0 30px rgba(0,0,0,.6),0 0 40px rgba(167,139,250,.3)}
.zfst-window i{position:absolute;top:30px;right:30px;width:54px;height:54px;border-radius:50%;background:#fde68a;box-shadow:0 0 30px 8px rgba(253,230,138,.5);animation:zfstMoon 6s ease-in-out infinite}
.zfst-window::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#2a1342 48% 52%,transparent 52%),linear-gradient(0deg,transparent 60%,#2a1342 60% 63%,transparent 63%)}
@keyframes zfstMoon{50%{box-shadow:0 0 44px 14px rgba(253,230,138,.7)}}
.zfst-curtain{position:absolute;top:0;bottom:0;width:11%;z-index:3;background:linear-gradient(90deg,#7f1d3a,#4a0e24 40%,#8a2147 60%,#4a0e24)}
.zfst-curtain--l{left:0;border-radius:0 0 60% 0/0 0 12% 0}
.zfst-curtain--r{right:0;transform:scaleX(-1);border-radius:0 0 60% 0/0 0 12% 0}
.zfst-lamps{position:absolute;top:0;left:0;right:0;z-index:2}
.zfst-lamps span{position:absolute;top:0;width:2px;height:60px;background:#6b5b3a}
.zfst-lamps span::after{content:"";position:absolute;left:-13px;top:56px;width:28px;height:34px;border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 50% 40%,#fff3b0,#f59e0b 55%,#92400e);box-shadow:0 0 30px 12px rgba(245,158,11,.45);animation:zfstFlick 3s infinite}
.zfst-lamps span:nth-child(1){left:26%}.zfst-lamps span:nth-child(2){left:62%;height:90px}.zfst-lamps span:nth-child(3){left:82%;height:50px}
@keyframes zfstFlick{0%,100%{opacity:1}45%{opacity:.8}50%{opacity:.95}60%{opacity:.75}}
.zfst-shelves{position:absolute;left:12%;top:0;width:52%;height:100%;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding-top:86px}
.zfst-shelf{position:relative;display:flex;align-items:flex-end;justify-content:space-around;height:104px;padding:0 10px;margin-bottom:22px}
.zfst-shelf::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-10px;height:12px;border-radius:3px;background:linear-gradient(#6b4423,#3a2312);box-shadow:0 8px 14px rgba(0,0,0,.55)}
.zfst-pot{width:46px;height:78px;filter:drop-shadow(0 0 10px var(--g,#a855f7));animation:zfstBob 4s ease-in-out infinite}
.zfst-pot .zfp-svg{width:100%;height:100%;display:block;overflow:visible}
.zfp-b{animation:zfpBub 2.4s ease-in infinite}.zfp-b2{animation-delay:1.1s}
@keyframes zfpBub{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(-26px);opacity:0}}
@keyframes zfstBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.zfst-sparks{position:absolute;inset:0;z-index:2;pointer-events:none}
.zfst-spark{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#f9a8d4;box-shadow:0 0 8px 2px rgba(249,168,212,.8);animation:zfstRise linear infinite}
@keyframes zfstRise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-470px) translateX(var(--sx,20px)) scale(1.1);opacity:0}}
.zfst-candles{position:absolute;left:8%;bottom:70px;z-index:4;display:flex;gap:14px;align-items:flex-end}
.zfst-candles i{display:block;position:relative;width:14px;background:linear-gradient(90deg,#e8dcc4,#fff7e0,#cdbf9f);border-radius:3px 3px 0 0}
.zfst-candles i:nth-child(1){height:46px}.zfst-candles i:nth-child(2){height:66px}.zfst-candles i:nth-child(3){height:34px}
.zfst-candles i::before{content:"";position:absolute;left:50%;top:-24px;width:12px;height:22px;margin-left:-6px;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:radial-gradient(circle at 50% 70%,#fff7b0,#fbbf24 50%,#ef4444);box-shadow:0 0 22px 8px rgba(251,191,36,.55);animation:zfstFlame .25s infinite alternate}
@keyframes zfstFlame{to{transform:scale(.92,1.08) rotate(3deg)}}
.zfst-inner{position:absolute;inset:0;z-index:5;max-width:1280px;margin:0 auto}
.zfst-keeper{position:absolute;right:6%;bottom:-8px;width:min(340px,42vw);aspect-ratio:240/270;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.zfst-bubble{position:absolute;right:calc(6% + min(340px,42vw) - 30px);bottom:200px;width:min(360px,46vw);padding:14px 18px;border-radius:20px 20px 4px 20px;background:rgba(255,246,252,.97);color:#3b0a3d;box-shadow:0 14px 40px rgba(0,0,0,.5);font-size:14.5px;line-height:1.5;transform-origin:100% 100%;animation:zfstPopIn .5s cubic-bezier(.2,1.4,.4,1)}
.zfst-bubble::after{content:"";position:absolute;right:-12px;bottom:12px;border:10px solid transparent;border-left-color:rgba(255,246,252,.97);border-right:0}
.zfst-bubble b{display:block;color:#be185d;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.zfst-bubble p{margin:0;min-height:44px}
@keyframes zfstPopIn{from{transform:scale(.6);opacity:0}}
.zfst-counter{position:absolute;left:0;right:0;bottom:0;height:62px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(18px,4vw);
  background:linear-gradient(#5a3a1e,#2d1a0b);border-top:4px solid #c9a04a;box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.zfst-sign{font-weight:900;font-size:19px;color:#fde68a;text-shadow:0 0 12px rgba(251,191,36,.6);letter-spacing:.03em}
.zfst-wallet{font-size:14px;color:#fde9c4}
.zfst-wallet b{color:#ffb3d1;font-size:17px}
.zfst-wallet a{color:#fbcfe8;font-weight:700}

/* ---- Productos ---- */
.zfst-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.zfst-filters input{flex:1;min-width:200px;padding:11px 14px;border-radius:12px;border:1px solid var(--zf-border);background:#15151a;color:var(--zf-text)}
.zfst-filters select{padding:11px 12px;border-radius:12px;border:1px solid var(--zf-border);background:#15151a;color:var(--zf-text)}
.zfst-filters button{padding:11px 20px;border:0;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-weight:800;cursor:pointer}
.zfst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.zfst-item{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#26123f,#171020);border:1px solid rgba(167,139,250,.35);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:.25s}
.zfst-item:hover{transform:translateY(-5px);border-color:#ec4899;box-shadow:0 18px 44px rgba(236,72,153,.28)}
.zfst-item:target{outline:3px solid #ec4899}
.zfst-thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:linear-gradient(135deg,#3b1d63,#14091f);text-decoration:none;overflow:hidden}
.zfst-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.zfst-item:hover .zfst-thumb img{transform:scale(1.07)}
.zfst-noimg{font-size:44px}
.zfst-ribbon{position:absolute;top:10px;left:10px;padding:3px 11px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.08em;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.zfst-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.zfst-body h3{margin:0;font-size:16px;line-height:1.3}
.zfst-body h3 a{color:#fff;text-decoration:none}
.zfst-tags{display:flex;gap:6px;flex-wrap:wrap}
.zfst-tags span{padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.08);font-size:11.5px;color:#d8b4fe}
.zfst-buyrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.zfst-price{font-weight:900;font-size:19px;color:#ffb3d1}
.zfst-btn{padding:9px 18px;border:0;border-radius:12px;background:linear-gradient(135deg,#ec4899,#be185d);color:#fff;font-weight:800;font-size:14px;cursor:pointer;text-decoration:none;transition:.2s;box-shadow:0 6px 18px rgba(236,72,153,.4)}
.zfst-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.zfst-btn.is-owned{background:rgba(34,197,94,.18);color:#86efac;box-shadow:none;border:1px solid rgba(34,197,94,.5)}
.zfst-pages{display:flex;gap:8px;justify-content:center;margin-top:26px}
.zfst-pages a{padding:8px 14px;border-radius:10px;border:1px solid var(--zf-border);color:var(--zf-text);text-decoration:none}
.zfst-pages a.is-active{background:#8b5cf6;border-color:#8b5cf6}
.zfst-empty{text-align:center;padding:30px 10px;color:var(--zf-text-soft)}
.zfst-empty-art{width:170px;margin:0 auto 10px}

/* ---- Confirmación de compra ---- */
.zfst-modal{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,3,16,.8);backdrop-filter:blur(5px)}
.zfst-modal[hidden]{display:none}
.zfst-dialog{position:relative;width:min(460px,100%);padding:26px 22px 22px;border-radius:22px;background:linear-gradient(160deg,#2f1458,#160a26);border:1px solid rgba(236,72,153,.5);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 50px rgba(236,72,153,.25);text-align:center;color:#fff}
.zfst-dialog h3{margin:0 0 6px;font-size:21px}
.zfst-dialog p{margin:6px 0;color:#e9d5ff}
.zfst-dialog .zfst-pr{display:inline-block;margin:8px 0;padding:6px 16px;border-radius:99px;background:rgba(236,72,153,.2);border:1px solid rgba(236,72,153,.6);font-weight:900;font-size:20px;color:#ffb3d1}
.zfst-dialog .zfst-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.zfst-dialog button.zfst-cancel{padding:9px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;cursor:pointer}
.zfst-dialog .zfst-content{margin-top:12px;padding:12px;border-radius:12px;background:rgba(0,0,0,.3);text-align:left;font-size:13.5px;max-height:200px;overflow:auto}
@media(max-width:860px){
  .zfst-scene{height:560px}
  .zfst-shelves{left:3%;width:94%;padding-top:70px;opacity:.55}
  .zfst-shelf{height:84px}
  .zfst-pot{width:36px;height:62px}
  .zfst-keeper{right:50%;margin-right:-130px;width:260px}
  .zfst-bubble{right:auto;left:50%;transform:translateX(-50%);bottom:300px;width:calc(100% - 36px);max-width:420px;border-radius:20px}
  .zfst-bubble::after{display:none}
  .zfst-window{display:none}
  .zfst-candles{display:none}
  .zfst-sign{font-size:15px}
}