:root{
  --bg:#0e0709; --bg-2:#170d13; --bg-3:#20131c;
  --pink:#f0287a; --pink-2:#ff4d97; --gold:#e7b667;
  --text:#f6ebf1; --muted:#b9899f; --line:rgba(240,40,122,.16);
  --radius:16px; --maxw:1180px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* hidden siempre oculta, aunque el elemento tenga display:flex */
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  font-weight:400; line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* ---------- Botones ---------- */
.btn{
  border:0; border-radius:999px; padding:.7rem 1.4rem; font-family:var(--sans);
  font-weight:500; font-size:.95rem; cursor:pointer; transition:.2s; display:inline-block;
}
.btn-primary{background:linear-gradient(120deg,var(--pink),var(--pink-2)); color:#fff;
  box-shadow:0 6px 20px rgba(240,40,122,.35)}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--muted)}
.btn-wa{background:#25d366; color:#04310f; font-weight:600}
.btn-wa:hover{filter:brightness(1.05)}
.btn-block{width:100%; text-align:center}

/* ---------- Age gate ---------- */
.age-gate{position:fixed; inset:0; z-index:100; background:radial-gradient(circle at 50% 30%,#25101c,#0a0507 70%);
  display:flex; align-items:center; justify-content:center; padding:1.2rem}
.age-card{max-width:440px; text-align:center; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:2.4rem 1.8rem; box-shadow:var(--shadow)}
.age-logo{width:130px; margin:0 auto 1rem}
.age-card h1{font-family:var(--serif); font-size:1.7rem; margin:.2rem 0 .6rem; color:var(--pink-2)}
.age-card p{color:var(--muted); font-size:.95rem}
.age-actions{display:flex; flex-direction:column; gap:.6rem; margin-top:1.4rem}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.8rem;
  padding:.6rem 1rem; background:rgba(14,7,9,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.brand img{height:34px}
.search-wrap{flex:1; max-width:520px; margin:0 auto}
.search-wrap input{width:100%; padding:.6rem 1rem; border-radius:999px; border:1px solid var(--line);
  background:var(--bg-3); color:var(--text); font-family:var(--sans); font-size:.9rem; outline:none}
.search-wrap input:focus{border-color:var(--pink)}
.cart-btn{position:relative; background:transparent; border:0; cursor:pointer; color:var(--text); display:flex; align-items:center; padding:.2rem}
.cart-btn svg{width:26px; height:26px}
.cart-btn:hover{color:var(--pink-2)}
.cart-count{position:absolute; top:-4px; right:-8px; background:var(--pink); color:#fff;
  font-size:.7rem; font-weight:600; min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:var(--sans)}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:46vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:3rem 1.2rem;
  background:linear-gradient(rgba(10,5,7,.55),rgba(10,5,7,.8)),url("brand/hero.jpg") center/cover}
.hero-title{font-family:var(--serif); font-size:clamp(2.6rem,9vw,5rem); margin:0; letter-spacing:.02em;
  color:#fff; text-shadow:0 4px 24px rgba(240,40,122,.5)}
.hero-sub{color:var(--text); opacity:.9; margin:.4rem 0 1.4rem; font-size:1.02rem}
@media(max-width:640px){ .hero{background:linear-gradient(rgba(10,5,7,.5),rgba(10,5,7,.82)),url("brand/hero_movil.jpg") center/cover} }

/* ---------- Categorías ---------- */
.cats{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; padding:1.2rem 1rem .4rem;
  max-width:var(--maxw); margin:0 auto}
.chip{white-space:nowrap; padding:.4rem .95rem; border-radius:999px; border:1px solid var(--line);
  background:var(--bg-3); color:var(--muted); font-size:.85rem; cursor:pointer; transition:.2s}
.chip:hover{color:var(--text)}
.chip.active{background:linear-gradient(120deg,var(--pink),var(--pink-2)); color:#fff; border-color:transparent}

/* ---------- Grid ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:1.4rem 1rem 4rem}
#catalogo{scroll-margin-top:70px}   /* evita que la barra superior fija tape la primera fila */
.result-info{color:var(--muted); font-size:.85rem; margin:.2rem 0 1rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem}
@media(min-width:700px){ .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.4rem} }
.card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:.2s}
.card:hover{transform:translateY(-3px); border-color:var(--pink); box-shadow:var(--shadow)}
.card-img{aspect-ratio:1; background:var(--bg-3); cursor:pointer; overflow:hidden; position:relative}
.card-img img{width:100%; height:100%; object-fit:cover; transition:.35s}
.card:hover .card-img img{transform:scale(1.05)}
.card-noimg{display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted);
  font-family:var(--serif); font-size:2.4rem; opacity:.4}
.card-body{padding:.7rem .8rem .9rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.code{font-size:.68rem; letter-spacing:.14em; color:var(--gold); text-transform:uppercase}
.card-name{font-size:.92rem; font-weight:500; line-height:1.35; cursor:pointer}
.price{font-family:var(--sans); font-size:1.15rem; color:var(--pink-2); font-weight:700; letter-spacing:-.01em; margin:.1rem 0 0}
.card .btn{margin-top:auto; padding:.5rem; font-size:.85rem}
.empty{text-align:center; color:var(--muted); padding:3rem 0}
.badge-bp{position:absolute; top:.5rem; left:.5rem; background:rgba(10,5,7,.82); color:var(--gold);
  border:1px solid var(--gold); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:999px; font-weight:500; backdrop-filter:blur(4px)}
.notice{background:linear-gradient(120deg,rgba(231,182,103,.14),rgba(240,40,122,.12));
  border:1px solid var(--gold); color:var(--text); border-radius:12px; padding:.8rem 1rem;
  font-size:.9rem; margin-bottom:1rem}
.notice strong{color:var(--gold)}
.bp-note{background:rgba(231,182,103,.12); border:1px solid rgba(231,182,103,.4); color:var(--text);
  border-radius:10px; padding:.55rem .7rem; font-size:.82rem; margin:.2rem 0}

/* ---------- Modal ---------- */
.modal,.cart{position:fixed; z-index:60}
.modal{inset:0; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:rgba(6,3,5,.72); backdrop-filter:blur(6px)}
.modal-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  max-width:760px; width:100%; display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  position:relative; box-shadow:var(--shadow); max-height:92vh}
.modal-img{background:var(--bg-3)}
.modal-img img{width:100%; height:100%; object-fit:cover; max-height:92vh}
.modal-body{padding:1.6rem; display:flex; flex-direction:column; gap:.5rem; overflow:auto}
.modal-body h2{font-family:var(--serif); font-size:1.7rem; margin:.1rem 0; font-weight:600}
.modal-body .price{font-size:1.6rem}
.desc{color:var(--muted); font-size:.9rem}
.modal-close{position:absolute; top:.6rem; right:.6rem; z-index:2; background:rgba(0,0,0,.4);
  border:0; color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1rem}
.qty{display:flex; align-items:center; gap:1rem; margin:.4rem 0}
.qty button{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--bg-3);
  color:var(--text); font-size:1.2rem; cursor:pointer}
.qty span{min-width:24px; text-align:center; font-weight:500}
@media(max-width:640px){ .modal-card{grid-template-columns:1fr; max-height:90vh; overflow:auto}
  .modal-img{max-height:44vh} .modal-img img{max-height:44vh} }

/* ---------- Carrito ---------- */
.cart{top:0; right:0; height:100%; width:min(400px,92vw); background:var(--bg-2);
  border-left:1px solid var(--line); display:flex; flex-direction:column; box-shadow:var(--shadow)}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.2rem .6rem}
.cart-head h2{font-family:var(--serif); margin:0; font-size:1.5rem}
.cart-head .modal-close{position:static}
.cart-items{flex:1; overflow:auto; padding:.4rem 1.2rem; display:flex; flex-direction:column; gap:.8rem}
.ci{display:flex; gap:.7rem; align-items:center; border-bottom:1px solid var(--line); padding-bottom:.7rem}
.ci img{width:56px; height:56px; object-fit:cover; border-radius:10px; background:var(--bg-3)}
.ci-info{flex:1; font-size:.85rem}
.ci-info .code{display:block}
.ci-price{color:var(--pink-2); font-weight:500}
.ci-qty{display:flex; align-items:center; gap:.5rem; margin-top:.2rem}
.ci-qty button{width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-3); color:var(--text); cursor:pointer}
.ci-rm{background:none; border:0; color:var(--muted); cursor:pointer; font-size:1.1rem}
.cart-empty{color:var(--muted); text-align:center; padding:2rem 0}
.cart-foot{padding:1rem 1.2rem 1.4rem; border-top:1px solid var(--line)}
.cart-total{display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; font-size:1.1rem}
.cart-total strong{font-family:var(--serif); font-size:1.5rem; color:var(--pink-2)}
.cart-note{color:var(--muted); font-size:.75rem; text-align:center; margin:.6rem 0 0}

.overlay{position:fixed; inset:0; z-index:50; background:rgba(6,3,5,.6)}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed; bottom:18px; right:18px; z-index:45; width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.5); transition:.2s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:30px; height:30px}

/* ---------- Footer ---------- */
.footer{text-align:center; padding:2.6rem 1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem}
.foot-logo{width:120px; margin:0 auto 1rem; opacity:.85}
.foot-links a{color:var(--pink-2)}
.foot-copy{opacity:.6; margin-top:.6rem}
body.locked{overflow:hidden}