/* =====================================================
   ROCKU — estilos
   Estética "kawaii rock" inspirada en bocchi.rocks
   con estructura de e-commerce.
   ===================================================== */

:root{
  --pink:#ff3d8b;
  --pink-dark:#e01f6f;
  --pink-soft:#ffd6e8;
  --cyan:#1ecbc3;
  --cyan-dark:#13a8a1;
  --yellow:#ffd23f;
  --ink:#241621;
  --ink-soft:#6b5a64;
  --cream:#fff6fb;
  --white:#ffffff;
  --line:#f0d9e6;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(255,61,139,.12);
  --shadow-hover:0 18px 44px rgba(255,61,139,.22);
  --maxw:1240px;
  --font-display:"Baloo 2", system-ui, sans-serif;
  --font-body:"Plus Jakarta Sans", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{
  overflow-x:hidden;
  width:100%;
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ---------- TOPBAR (marquee) ---------- */
.topbar{
  background:var(--ink);
  color:#fff;
  overflow:hidden;
  font-size:.74rem;
  letter-spacing:.14em;
  font-weight:600;
  white-space:nowrap;
}
.topbar-track{
  display:inline-flex;
  gap:0;
  padding:7px 0;
  animation:marquee 28s linear infinite;
}
.topbar-track span{padding-right:40px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- HEADER ---------- */
.header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:20px;
  padding:14px 26px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line);
}
.logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.7rem;
  letter-spacing:-.5px;
  color:var(--ink);
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;
}
.logo-star{color:var(--pink);font-size:1.1em;position:relative;top:-1px}
.nav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.nav a{
  padding:8px 13px;border-radius:999px;
  font-weight:600;font-size:.92rem;color:var(--ink-soft);
  transition:.18s;
}
.nav a:hover{background:var(--pink-soft);color:var(--pink-dark)}
.nav a.active{background:var(--pink);color:#fff}
.nav .nav-extra{color:var(--cyan-dark)}
.nav .nav-extra:hover{background:#d4f6f4;color:var(--cyan-dark)}

.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.search{display:flex;align-items:center;background:var(--white);border:2px solid var(--line);border-radius:999px;overflow:hidden}
.search input{border:0;outline:0;padding:9px 14px;font-size:.9rem;width:150px;background:transparent;font-family:inherit}
.search button{border:0;background:var(--pink);color:#fff;padding:0 14px;align-self:stretch;font-size:1.2rem}
.cart-btn{position:relative;font-size:1.4rem;line-height:1}
.cart-count{
  position:absolute;top:-8px;right:-10px;
  background:var(--cyan);color:#fff;
  font-family:var(--font-display);font-weight:700;
  font-size:.7rem;min-width:20px;height:20px;
  display:grid;place-items:center;border-radius:999px;padding:0 5px;
  border:2px solid #fff;
}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:4px}
.burger span{width:24px;height:3px;background:var(--ink);border-radius:2px;transition:.2s}

/* ---------- MAIN / SECTIONS ---------- */
.main{min-height:60vh}
.section{max-width:var(--maxw);margin:0 auto;padding:54px 26px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap}
.section-title{font-family:var(--font-display);font-weight:800;font-size:1.9rem;letter-spacing:-.5px}
.fire{filter:drop-shadow(0 2px 4px rgba(255,61,139,.4))}
.see-all{font-weight:700;color:var(--pink);white-space:nowrap}
.see-all:hover{color:var(--pink-dark)}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:90px 26px 110px;
  text-align:center;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,210,63,.55), transparent 42%),
    radial-gradient(circle at 82% 30%, rgba(30,203,195,.45), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,61,139,.40), transparent 55%),
    linear-gradient(180deg,#fff,#fff6fb);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,61,139,.10) 1px, transparent 1px);
  background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent);
}
.hero-content{position:relative;z-index:2;max-width:720px;margin:0 auto}
.hero-kicker{
  display:inline-block;
  background:var(--ink);color:#fff;
  font-weight:700;font-size:.72rem;letter-spacing:.22em;
  padding:7px 16px;border-radius:999px;margin-bottom:22px;
}
.hero-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;letter-spacing:-1.5px;
}
.hero-title .hl{
  background:linear-gradient(105deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:1.1rem;color:var(--ink-soft);margin:20px auto 30px;max-width:540px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-notes{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-notes .note{position:absolute;will-change:transform;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.hero-notes .note i{display:inline-block;font-style:normal;font-size:2rem;opacity:.55;color:var(--pink);animation:float 6s ease-in-out infinite}
.hero-notes .note:nth-child(1){left:12%;top:30%}
.hero-notes .note:nth-child(2){right:14%;top:24%}
.hero-notes .note:nth-child(2) i{color:var(--cyan);animation-delay:1.5s;font-size:2.6rem}
.hero-notes .note:nth-child(3){left:20%;bottom:22%}
.hero-notes .note:nth-child(3) i{color:var(--yellow);animation-delay:3s}
.hero-notes .note:nth-child(4){right:24%;bottom:26%}
.hero-notes .note:nth-child(4) i{color:var(--pink);animation-delay:2.2s;font-size:2.3rem}
.hero-notes .note:nth-child(5){left:46%;top:16%}
.hero-notes .note:nth-child(5) i{color:var(--cyan);animation-delay:.8s;font-size:1.8rem}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(8deg)}}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--pink);color:#fff;border:2px solid var(--pink);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  padding:11px 22px;border-radius:999px;transition:.2s;
}
.btn:hover{background:var(--pink-dark);border-color:var(--pink-dark);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--lg{padding:14px 30px;font-size:1.05rem}
.btn--block{width:100%}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--add{width:100%;background:var(--ink);border-color:var(--ink);padding:9px;font-size:.88rem}
.btn--add:hover{background:var(--pink);border-color:var(--pink)}

/* ---------- CATEGORÍAS (pills) ---------- */
.cat-pills{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cat-pill{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#fff;border:2px solid var(--line);
  border-radius:var(--radius);padding:18px 26px;min-width:108px;
  font-weight:700;transition:.2s;
}
.cat-pill:hover{border-color:var(--pink);transform:translateY(-4px);box-shadow:var(--shadow)}
.cat-emoji{font-size:1.9rem}

/* ---------- GRID DE PRODUCTOS ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.22s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:var(--pink-soft)}
.card-media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--pink-soft)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .card-media img{transform:scale(1.06)}
.card-placeholder{
  width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:18px;
  background:linear-gradient(135deg,var(--ph),color-mix(in srgb,var(--ph) 70%,#fff));
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  text-shadow:0 1px 4px rgba(0,0,0,.2);
}
.card-placeholder--big{aspect-ratio:3/4;font-size:1.6rem}
.card-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:.66rem;letter-spacing:.06em;padding:5px 10px;border-radius:999px;
}
.card-sale{
  position:absolute;top:12px;right:12px;z-index:2;
  background:var(--yellow);color:var(--ink);font-family:var(--font-display);font-weight:800;
  font-size:.66rem;padding:5px 10px;border-radius:999px;
}
.card-body{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-name{font-weight:700;font-size:.98rem;line-height:1.25}
.card-name:hover{color:var(--pink)}
.card-price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.card-price .now{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--pink-dark)}
.card-price .was{font-size:.85rem;color:var(--ink-soft);text-decoration:line-through}

/* ---------- BAND (banner de beneficios) ---------- */
.band{
  background:var(--ink);color:#fff;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  max-width:var(--maxw);margin:0 auto;padding:26px;border-radius:var(--radius);
}
.band-item{text-align:center;display:flex;flex-direction:column;gap:2px}
.band-item strong{font-family:var(--font-display);font-size:1.05rem}
.band-item span{font-size:.82rem;color:#e9c7da}

/* ---------- COLECCIÓN ---------- */
.coll-head{margin-bottom:22px}
.crumbs{font-size:.82rem;color:var(--ink-soft);margin-bottom:10px}
.crumbs a:hover{color:var(--pink)}
.coll-title{font-family:var(--font-display);font-weight:800;font-size:2.3rem;letter-spacing:-.8px;display:flex;align-items:center;gap:10px}
.coll-emoji{font-size:1.6rem}
.coll-count{color:var(--ink-soft);font-size:.9rem;margin-top:4px}
.coll-toolbar{display:flex;justify-content:flex-end;margin-bottom:18px}
.coll-toolbar select{font-family:inherit;padding:8px 12px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:600}
.search--big{margin:0 auto 30px;max-width:480px}
.search--big input{flex:1;width:auto;padding:13px 18px}
.search--big button{padding:0 22px;font-family:var(--font-display);font-size:.95rem}

/* ---------- VACÍO ---------- */
.empty{text-align:center;padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty-emoji{font-size:3.4rem}
.empty h3{font-family:var(--font-display);font-size:1.5rem}
.empty p{color:var(--ink-soft)}
.empty .btn{margin-top:12px}
.empty--404{padding:90px 20px}

/* ---------- PRODUCTO ---------- */
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:18px;align-items:start}
.product-gallery{position:sticky;top:96px}
.product-media{position:relative;border-radius:var(--radius);overflow:hidden;border:2px solid var(--line);background:#fff}
.product-media img{width:100%;max-height:560px;object-fit:cover;display:block;vertical-align:bottom}
.product-badge{font-size:.72rem;padding:6px 12px}
.product-name{font-family:var(--font-display);font-weight:800;font-size:2.2rem;letter-spacing:-.8px;line-height:1.05}
.product-price{display:flex;align-items:baseline;gap:12px;margin:14px 0 18px}
.product-price .now{font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:var(--pink-dark)}
.product-price .was{font-size:1.05rem;color:var(--ink-soft);text-decoration:line-through}
.product-price .off{background:var(--yellow);color:var(--ink);font-weight:800;font-family:var(--font-display);font-size:.8rem;padding:3px 9px;border-radius:999px}
.product-desc{color:var(--ink-soft);font-size:1.02rem;margin-bottom:20px}
.opt-block{margin-bottom:18px}
.opt-label{display:block;font-weight:700;margin-bottom:8px;font-size:.9rem}
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.opt-chip{
  background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:8px 16px;font-weight:600;font-size:.88rem;transition:.15s;
}
.opt-chip:hover{border-color:var(--pink)}
.opt-chip.sel{background:var(--pink);border-color:var(--pink);color:#fff}
.qty{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{background:#fff;border:0;width:42px;height:42px;font-size:1.3rem;font-weight:700;color:var(--pink-dark)}
.qty button:hover{background:var(--pink-soft)}
.qty input{width:46px;text-align:center;border:0;font-weight:700;font-size:1rem;background:transparent}
.product-actions{display:flex;flex-direction:column;gap:10px;margin:22px 0}
.product-details{margin:18px 0;padding-left:18px;color:var(--ink-soft)}
.product-details li{margin-bottom:5px}
.product-trust{display:flex;flex-wrap:wrap;gap:14px;padding-top:18px;border-top:2px solid var(--line);font-size:.85rem;color:var(--ink-soft);font-weight:600}

/* ---------- CARRITO ---------- */
.cart-page .coll-title{margin-bottom:24px}
.cart-loading{padding:40px;text-align:center;color:var(--ink-soft)}
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}
.cart-items{display:flex;flex-direction:column;gap:14px}
.cart-row{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:12px}
.cart-thumb{width:84px;height:104px;border-radius:var(--radius-sm);overflow:hidden;background:var(--pink-soft)}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-thumb .card-placeholder{font-size:.7rem;padding:8px}
.cart-info h4{font-family:var(--font-display);font-size:1.05rem}
.cart-info .meta{font-size:.82rem;color:var(--ink-soft);margin:2px 0 8px}
.cart-info .cart-price{font-weight:700;color:var(--pink-dark)}
.cart-mini-qty{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;overflow:hidden;margin-top:6px}
.cart-mini-qty button{background:#fff;border:0;width:30px;height:30px;font-size:1rem;font-weight:700;color:var(--pink-dark)}
.cart-mini-qty span{width:34px;text-align:center;font-weight:700;font-size:.9rem}
.cart-remove{background:none;border:0;color:var(--ink-soft);font-size:1.4rem;align-self:flex-start}
.cart-remove:hover{color:var(--pink)}
.cart-summary{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:96px}
.cart-summary h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;margin-bottom:10px;color:var(--ink-soft)}
.sum-total{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--ink);padding-top:14px;border-top:2px solid var(--line);margin:14px 0 18px}
.sum-note{font-size:.82rem;color:var(--cyan-dark);font-weight:600;margin-bottom:14px}
.ship-bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:8px}
.ship-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan));transition:.4s}

/* ---------- FORM CARDS / INFO ---------- */
.info-lead{color:var(--ink-soft);max-width:560px;margin:8px 0 26px;font-size:1.05rem}
.form-card{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:26px;max-width:520px;display:flex;flex-direction:column;gap:16px}
.form-card label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem}
.form-card input,.form-card textarea{font-family:inherit;border:2px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;font-size:.95rem;font-weight:500}
.form-card input:focus,.form-card textarea:focus{outline:0;border-color:var(--pink)}
#rastreo-result{max-width:520px;margin-top:18px}
.track-card{background:#fff;border:2px solid var(--cyan);border-radius:var(--radius);padding:22px;margin-top:18px}
.track-steps{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.track-step{display:flex;gap:12px;align-items:center}
.track-dot{width:18px;height:18px;border-radius:50%;background:var(--line);flex-shrink:0}
.track-step.done .track-dot{background:var(--cyan)}
.track-step.now .track-dot{background:var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}
.about{max-width:680px;display:flex;flex-direction:column;gap:16px;font-size:1.05rem;color:var(--ink-soft)}
.about strong{color:var(--ink)}
.about-stats{display:flex;gap:26px;flex-wrap:wrap;margin:12px 0}
.about-stats div{display:flex;flex-direction:column}
.about-stats strong{font-family:var(--font-display);font-size:1.8rem;color:var(--pink)}
.about-stats span{font-size:.85rem}
.about .btn{align-self:flex-start}

/* ---------- FOOTER ---------- */
.footer{background:var(--footer-bg,var(--ink));color:var(--footer-fg,#fff);margin-top:40px;padding:54px 26px 26px}
.footer-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px}
.logo--footer{color:var(--footer-fg,#fff);font-size:1.5rem}
.footer-brand p{color:var(--footer-muted,#e9c7da);margin:10px 0 16px}
.socials{display:flex;gap:14px;flex-wrap:wrap}
.socials a{color:var(--cyan);font-weight:700}
.socials a:hover{color:var(--footer-fg,#fff)}
.footer-col h4{font-family:var(--font-display);margin-bottom:14px;font-size:1.1rem}
.footer-col a{display:block;color:var(--footer-muted,#e9c7da);padding:4px 0;font-size:.92rem}
.footer-col a:hover{color:var(--footer-fg,#fff)}
.footer-news p{color:var(--footer-muted,#e9c7da);font-size:.9rem;margin-bottom:12px}
.news-form{display:flex;gap:8px}
.news-form input{flex:1;border:0;border-radius:999px;padding:10px 14px;font-family:inherit}
.news-form button{border:0;background:var(--pink);color:#fff;border-radius:999px;padding:0 18px;font-family:var(--font-display);font-weight:700}
.news-form button:hover{background:var(--pink-dark)}
.footer-bottom{max-width:var(--maxw);margin:36px auto 0;padding-top:20px;border-top:1px solid var(--footer-line,rgba(255,255,255,.15));display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--footer-muted,#c9a9bc)}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.45);transition:.2s;
}
.wa-float:hover{transform:scale(1.08)}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;
  font-weight:600;font-size:.92rem;z-index:100;opacity:0;pointer-events:none;
  transition:.3s;box-shadow:var(--shadow);max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .band{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .product-layout{grid-template-columns:1fr;gap:24px}
  .product-gallery{position:static;top:auto}
  .cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
}
@media(max-width:760px){
  .header{flex-wrap:wrap;gap:12px;padding:12px 18px}
  .burger{display:flex;order:0}
  .logo{order:1}
  .header-actions{order:2;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .nav{order:4;flex-basis:100%;flex-direction:column;display:none;background:#fff;border-radius:var(--radius);padding:10px;border:2px solid var(--line)}
  .nav.open{display:flex}
  .nav a{width:100%}
  .search input{width:80px}
  .section{padding:40px 18px}
  .hero{padding:60px 18px 80px}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .section-title{font-size:1.5rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}
@media(max-width:420px){
  /* En celular: barra de búsqueda en su propia fila dentro de header-actions */
  .search{order:3;flex-basis:100%;margin-top:4px}
  .search input{flex:1;width:auto;min-width:0}
}

/* =====================================================
   AÑADIDOS v2 — carrito minimalista, envíos, rastreo
   ===================================================== */

/* ---- Ícono carrito minimalista + temblor ---- */
.cart-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.cart-ico{display:block}
.cart-btn:hover{color:var(--pink)}
.cart-count{
  position:absolute;top:-7px;right:-9px;background:var(--cyan);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.68rem;
  min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;
  padding:0 4px;border:2px solid #fff;line-height:1;
}
@keyframes cartShake{
  0%{transform:rotate(0) scale(1)}
  15%{transform:rotate(-12deg) scale(1.12)}
  30%{transform:rotate(10deg) scale(1.12)}
  45%{transform:rotate(-8deg) scale(1.08)}
  60%{transform:rotate(6deg) scale(1.05)}
  75%{transform:rotate(-3deg) scale(1.02)}
  100%{transform:rotate(0) scale(1)}
}
.cart-btn.shake{animation:cartShake .6s ease}
.cart-btn.shake .cart-count{animation:cartShake .6s ease}

/* ---- Galería de producto (MGIRL multi-foto) ---- */
.pdp-thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pdp-thumb{width:64px;height:80px;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:#fff;padding:0;cursor:pointer}
.pdp-thumb.sel{border-color:var(--pink)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}

/* ---- Tarjetas de envío (tipo FTO) ---- */
.ship-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 30px}
.ship-card{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
.ship-card--hl{border-color:var(--pink);box-shadow:var(--shadow)}
.ship-card h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:4px}
.ship-card-main{font-weight:700;color:var(--cyan-dark);margin-bottom:8px}
.ship-card p{font-size:.88rem;color:var(--ink-soft);margin-bottom:6px}
.ship-card-fee{font-weight:700;color:var(--ink) !important;margin-top:6px}

/* ---- Form de envíos ---- */
.form-card--wide{max-width:640px}
.form-card select{font-family:inherit;border:2px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;font-size:.95rem;font-weight:600;background:#fff}
.form-card select:focus{outline:0;border-color:var(--pink)}
.field-note{font-size:.8rem;color:var(--ink-soft);margin-top:-6px}
.cost-hint{font-size:.88rem;font-weight:600;margin:-4px 0 4px}
.cost-hint.ok{color:var(--cyan-dark)}
.cost-hint.warn{color:var(--pink-dark)}
.destino-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:-6px}
.mini-btn{background:var(--pink-soft);border:0;color:var(--pink-dark);font-weight:700;font-size:.8rem;padding:7px 12px;border-radius:999px}
.mini-btn:hover{background:var(--pink);color:#fff}
.qty--inline{display:inline-flex;margin-top:4px}
.check{flex-direction:row !important;align-items:center;gap:10px !important;font-weight:600 !important;font-size:.92rem !important}
.check input{width:18px;height:18px;accent-color:var(--pink)}
.ship-info{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:24px;max-width:760px;margin-top:30px}
.ship-info h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:12px}
.ship-info ul{padding-left:18px;color:var(--ink-soft);display:flex;flex-direction:column;gap:8px}
.ship-info strong{color:var(--ink)}

/* ---- Resultado / tracking ---- */
.track-actions{display:flex;flex-direction:column}
.ok-card{border-color:var(--cyan)}
.ok-card strong{font-family:var(--font-display);font-size:1.2rem}

@media(max-width:760px){
  .ship-cards{grid-template-columns:1fr}
}

/* =====================================================
   AÑADIDOS v3 — modal WhatsApp, notas, política, admin link
   ===================================================== */

/* ---- política de cambios en producto ---- */
.cambios-note{font-size:.82rem;color:var(--ink-soft);margin-top:10px;line-height:1.5;max-width:42ch}

/* ---- link admin / libro reclamaciones ---- */
.footer-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer-links a:hover{color:var(--pink)}
.admin-link{opacity:.75}

/* ---- modal invitación WhatsApp ---- */
.wa-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(40,20,40,.45);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .35s ease}
.wa-modal.show{opacity:1;visibility:visible}
.wa-modal-card{position:relative;background:#fff;border-radius:22px;max-width:380px;width:calc(100% - 40px);
  padding:30px 26px 24px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.22);
  transform:translateY(14px) scale(.97);transition:transform .35s cubic-bezier(.22,1,.36,1);border:1px solid var(--line)}
.wa-modal.show .wa-modal-card{transform:translateY(0) scale(1)}
.wa-modal-ico{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  font-size:1.6rem;color:#fff;background:linear-gradient(135deg,var(--pink),var(--cyan))}
.wa-modal-card h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:8px}
.wa-modal-card p{color:var(--ink-soft);font-size:.9rem;margin-bottom:18px;line-height:1.5}
.wa-modal-groups{display:flex;flex-direction:column;gap:10px}
.wa-modal-groups a{background:#25D366;color:#fff;font-weight:700;padding:12px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s ease,filter .15s ease}
.wa-modal-groups a::before{content:"💬"}
.wa-modal-groups a:hover{transform:translateY(-2px);filter:brightness(1.05)}
.wa-modal-skip{margin-top:14px;background:none;border:0;color:var(--ink-soft);font-size:.85rem;cursor:pointer;text-decoration:underline}
.wa-modal-skip:hover{color:var(--ink)}
.wa-modal-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink-soft);cursor:pointer}
.wa-modal-close:hover{color:var(--pink)}
.adm-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.adm-row-2{grid-template-columns:1fr}}

/* ---- stock / agotado ---- */
.card.is-agotado .card-media img{filter:grayscale(.6) opacity(.75)}
.card-agotado{position:absolute;top:10px;left:10px;z-index:2;background:var(--ink);color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.btn--agotado{background:#cfc8d4 !important;color:#fff !important;cursor:not-allowed !important;pointer-events:none}
.stock-low{color:var(--pink-dark);font-weight:700;font-size:.85rem;margin-top:-8px}

/* =========================================================
   v4 — banner configurable (temas, imagen, decoración)
   ========================================================= */
/* variantes de color del banner */
.hero--rosa .hero-bg{background:
  radial-gradient(circle at 18% 22%, rgba(255,210,63,.55), transparent 42%),
  radial-gradient(circle at 82% 30%, rgba(30,203,195,.45), transparent 45%),
  radial-gradient(circle at 50% 90%, rgba(255,61,139,.40), transparent 55%),
  linear-gradient(180deg,#fff,#fff6fb)}
.hero--cielo .hero-bg{background:
  radial-gradient(circle at 20% 20%, rgba(30,203,195,.55), transparent 45%),
  radial-gradient(circle at 80% 35%, rgba(99,179,255,.45), transparent 45%),
  radial-gradient(circle at 50% 95%, rgba(120,220,255,.40), transparent 55%),
  linear-gradient(180deg,#fff,#f1fbff)}
.hero--lavanda .hero-bg{background:
  radial-gradient(circle at 20% 22%, rgba(196,150,255,.55), transparent 45%),
  radial-gradient(circle at 82% 30%, rgba(255,61,139,.30), transparent 45%),
  radial-gradient(circle at 50% 92%, rgba(150,120,255,.40), transparent 55%),
  linear-gradient(180deg,#fff,#f7f2ff)}
.hero--durazno .hero-bg{background:
  radial-gradient(circle at 20% 22%, rgba(255,180,120,.55), transparent 45%),
  radial-gradient(circle at 82% 30%, rgba(255,120,150,.40), transparent 45%),
  radial-gradient(circle at 50% 92%, rgba(255,210,150,.45), transparent 55%),
  linear-gradient(180deg,#fff,#fff5ef)}
.hero--menta .hero-bg{background:
  radial-gradient(circle at 20% 22%, rgba(120,230,180,.55), transparent 45%),
  radial-gradient(circle at 82% 30%, rgba(30,203,195,.40), transparent 45%),
  radial-gradient(circle at 50% 92%, rgba(180,240,200,.45), transparent 55%),
  linear-gradient(180deg,#fff,#f0fdf6)}
.hero--noche{color:#fff}
.hero--noche .hero-bg{background:
  radial-gradient(circle at 20% 22%, rgba(255,61,139,.45), transparent 45%),
  radial-gradient(circle at 82% 30%, rgba(30,203,195,.40), transparent 45%),
  linear-gradient(180deg,#26222f,#15121c)}
.hero--noche .hero-sub{color:#d7d2e0}
.hero--noche .hero-kicker{background:#fff;color:var(--ink)}

/* banner con imagen de fondo */
.hero--image .hero-bg{background-size:cover !important;background-position:center !important}
.hero--image .hero-bg::after{background-image:none}
.hero--image .hero-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.hero--image{color:#fff}
.hero--image .hero-sub{color:#f3eef7}
.hero--image .hero-title .hl{background:linear-gradient(105deg,#fff,#ffd6ea);-webkit-background-clip:text;background-clip:text;color:transparent}

/* decoración con imágenes png subidas */
.note--img img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}

/* =========================================================
   v5 — footer ampliado, página historia, banner efectos, cuentas
   ========================================================= */
.footer-grid--5{grid-template-columns:1.4fr 1fr 1fr 1.2fr 1.3fr}
.footer-text{color:var(--ink-soft);font-size:.82rem;display:block;margin-top:4px;line-height:1.4}
.footer-info{max-width:var(--maxw);margin:0 auto;padding:14px 26px 0;color:var(--ink-soft);font-size:.82rem}
.libro-btn{display:inline-flex;align-items:center;gap:10px;margin-top:16px;background:#fff;color:var(--ink);
  border:2px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:700;font-size:.78rem;line-height:1.1;transition:.2s}
.libro-btn:hover{border-color:var(--pink);color:var(--pink-dark)}
.libro-btn-ic{font-size:1.4rem}
@media(max-width:980px){.footer-grid--5{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid--5{grid-template-columns:1fr}}

/* ---- página Nuestra historia (bloques) ---- */
.hist-wrap{max-width:1040px;margin:0 auto;padding:10px 0 30px}
.hist-head{text-align:center;margin-bottom:40px}
.hist-head h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem)}
.hist-head p{color:var(--ink-soft);margin-top:8px}
.hist-block{margin:46px 0}
.hist-duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hist-duo.rev .hist-img{order:2}
.hist-img{border-radius:20px;overflow:hidden;background:var(--pink-soft);aspect-ratio:4/3}
.hist-img img{width:100%;height:100%;object-fit:cover}
.hist-img--ph{display:grid;place-items:center;color:var(--pink);font-weight:700;border:2px dashed rgba(255,61,139,.4)}
.hist-txt h2{font-family:var(--font-display);font-size:1.7rem;color:var(--pink-dark);margin-bottom:12px}
.hist-txt p{color:var(--ink-soft);line-height:1.7}
.hist-top{text-align:center;max-width:680px;margin:0 auto}
.hist-top .hist-img{aspect-ratio:16/7;margin-bottom:18px}
.hist-cols{display:grid;gap:26px}
.hist-cols-3{grid-template-columns:repeat(3,1fr)}
.hist-cols-2{grid-template-columns:repeat(2,1fr)}
.hist-cell{text-align:center}
.hist-cell .hist-img{aspect-ratio:1/1;margin-bottom:14px}
.hist-cell h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:6px}
.hist-cell p{color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.hist-cell.posbottom{display:flex;flex-direction:column}
.hist-cell.posbottom .hist-img{order:0}
.hist-cell.postop .hist-img{order:2;margin:14px 0 0}
@media(max-width:820px){.hist-duo,.hist-duo.rev .hist-img{grid-template-columns:1fr;order:0}.hist-cols-3,.hist-cols-2{grid-template-columns:1fr}}

/* ---- banner efectos (carrusel/fade/kenburns) ---- */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-track{display:flex;width:100%;height:100%;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.hero-slide{flex:0 0 100%;height:100%;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.5))}
.hero--fx-carrusel,.hero--fx-fade,.hero--fx-kenburns{color:#fff}
.hero--fx-carrusel .hero-sub,.hero--fx-fade .hero-sub,.hero--fx-kenburns .hero-sub{color:#f3eef7}
.hero--fx-carrusel .hero-title .hl,.hero--fx-fade .hero-title .hl,.hero--fx-kenburns .hero-title .hl{background:linear-gradient(105deg,#fff,#ffd6ea);-webkit-background-clip:text;background-clip:text;color:transparent}
/* fade */
.hero--fx-fade .hero-track,.hero--fx-kenburns .hero-track{display:block;transition:none}
.hero--fx-fade .hero-slide,.hero--fx-kenburns .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero--fx-fade .hero-slide.on,.hero--fx-kenburns .hero-slide.on{opacity:1}
/* ken burns */
.hero--fx-kenburns .hero-slide.on{animation:kenburns 7s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}
/* posición de texto */
.hero--text-left .hero-content{margin:0;text-align:left;max-width:600px}
.hero--text-bottom{display:flex;align-items:flex-end;min-height:64vh}
.hero--text-bottom .hero-content{margin:0 auto 0 0;text-align:left}
/* dots */
.hero-dots{position:absolute;bottom:18px;left:0;right:0;z-index:3;display:flex;gap:8px;justify-content:center}
.hero-dot{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:.2s}
.hero-dot.on{background:#fff;width:26px;border-radius:999px}

/* ---- cuentas de clientes ---- */
.acct-btn{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;font-size:.9rem}
.acct-btn:hover{color:var(--pink)}
.acct-label{font-size:.85rem}
.auth-wrap{max-width:440px;margin:0 auto}
.auth-tabs{display:flex;gap:6px;background:var(--pink-soft);border-radius:999px;padding:5px;margin-bottom:20px}
.auth-tabs a{flex:1;text-align:center;padding:10px;border-radius:999px;font-weight:700;color:var(--ink-soft)}
.auth-tabs a.on{background:#fff;color:var(--pink-dark);box-shadow:var(--shadow)}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.85rem}
.auth-form input{border:2px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:1rem}
.auth-form input:focus{outline:0;border-color:var(--pink)}
.auth-error{background:#ffe0ea;color:#b3134f;padding:11px 14px;border-radius:12px;font-size:.88rem;margin-bottom:14px}
.auth-sep{text-align:center;margin:22px 0 14px;position:relative;color:var(--ink-soft);font-size:.82rem}
.auth-sep::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line);z-index:0}
.auth-sep span{background:#fff;padding:0 12px;position:relative;z-index:1}
.auth-social{display:flex;flex-direction:column;gap:10px}
.auth-soc{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:999px;padding:11px 18px;font-weight:700;color:var(--ink);background:#fff;transition:.15s;position:relative}
.auth-soc>span:nth-child(2){flex:1;text-align:center;margin-right:34px}
.auth-soc:hover{border-color:var(--pink);box-shadow:var(--shadow)}
.auth-soc-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0}
.auth-soc--google .auth-soc-ic{background:#fff;border:1px solid var(--line);padding:0}
.auth-soc--google .auth-soc-ic svg{display:block}
.auth-note{font-size:.78rem;color:var(--ink-soft);margin-top:14px;line-height:1.5;text-align:center}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin:18px 0}
.acct-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.acct-row:last-child{border-bottom:0}
.acct-row span{color:var(--ink-soft)}
.acct-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---- v6: footer libro imagen, modal X grande, inputs legibles ---- */
.libro-btn-img{display:block;margin-top:16px;max-width:190px}
.libro-btn-img img{width:100%;height:auto;border-radius:10px;background:#fff;padding:8px;border:1px solid var(--line)}
.libro-btn-img:hover img{box-shadow:var(--shadow)}
.wa-modal-close{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;background:#f1eef4;border:0;font-size:2rem;line-height:1;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.15s}
.wa-modal-close:hover{background:var(--pink);color:#fff;transform:rotate(90deg)}
.wa-modal-ico img{width:100%;height:100%;object-fit:contain;border-radius:50%}
/* inputs siempre legibles */
input,textarea,select{color:#23202b}
input::placeholder,textarea::placeholder{color:#9b95a6;opacity:1}

/* ---- historial de pedidos ---- */
.orders{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.order-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.order-head{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-soft);margin-bottom:8px}
.order-head strong{color:var(--ink)}
.order-items{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:4px}
.order-items li{display:flex;justify-content:space-between;font-size:.9rem;gap:10px}
.order-items li span{color:var(--ink-soft);white-space:nowrap}
.order-total{text-align:right;border-top:1px solid var(--line);padding-top:8px}

/* ---- checkout en el carrito ---- */
.sum-igv{font-size:.78rem;color:var(--ink-soft);margin:6px 0}
.checkout-form{margin:14px 0;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.checkout-form h4{font-family:var(--font-display);font-size:1rem}
.checkout-form input,.checkout-form select,.checkout-form textarea{border:2px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:.92rem;width:100%;color:#23202b}
.checkout-form input:focus,.checkout-form select:focus,.checkout-form textarea:focus{outline:0;border-color:var(--pink)}
.ck-agnote{font-size:.76rem;color:var(--ink-soft);line-height:1.4}
.ck-ship{font-size:.86rem;font-weight:600;color:var(--cyan-dark,#0a9b94)}
.ck-ship .ck-block{color:#c4123f}
.sum-total small{font-weight:500;font-size:.72rem;color:var(--ink-soft)}

/* ---- estado de pedido (cuenta cliente) ---- */
.order-estado{margin-bottom:8px}
.estado-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:800}
.estado-pendiente{background:#fff3cd;color:#8a6d00}
.estado-confirmado{background:#d9e8ff;color:#1452b3}
.estado-enviado{background:#defcf5;color:#0a7d72}
.cart-envio-hint{font-size:.78rem;color:var(--ink-soft);margin-top:10px;text-align:center}
.cart-envio-hint a{color:var(--pink);font-weight:700}

/* ---- tarjeta de sede Shalom ---- */
.sede-card{margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;box-shadow:var(--shadow)}
.sede-card-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.sede-pin{font-size:1.4rem}
.sede-card-head strong{font-size:1.05rem;color:var(--pink-dark)}
.sede-ubic{font-size:.78rem;color:var(--ink-soft);margin-top:2px}
.sede-row{font-size:.86rem;color:var(--ink);padding:4px 0;line-height:1.4}
.sede-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.sede-btn{flex:1;text-align:center;border:2px solid var(--line);border-radius:10px;padding:9px 12px;font-weight:700;font-size:.82rem;color:var(--ink);background:#fff;cursor:pointer;white-space:nowrap}
.sede-btn:hover{border-color:var(--pink);color:var(--pink-dark)}
.sede-btn--copy{background:var(--pink);color:#fff;border-color:var(--pink)}
.sede-btn--copy:hover{color:#fff;opacity:.92}

/* ---- efectos del logo al presionar ---- */
.logo-fx-spin{animation:fxSpin .7s ease}
.logo-fx-bounce{animation:fxBounce .7s ease}
.logo-fx-pulse{animation:fxPulse .5s ease}
.logo-fx-shake{animation:fxShake .6s ease}
.logo-fx-flip{animation:fxFlip .8s ease}
.logo-fx-jelly{animation:fxJelly .7s ease}
.logo-fx-wobble{animation:fxWobble .8s ease}
@keyframes fxSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fxBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}50%{transform:translateY(3px)}70%{transform:translateY(-4px)}}
@keyframes fxPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes fxShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes fxFlip{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes fxJelly{0%,100%{transform:scale(1,1)}30%{transform:scale(1.25,.75)}50%{transform:scale(.85,1.15)}70%{transform:scale(1.05,.95)}}
@keyframes fxWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}
.logo-star,.logo-text{display:inline-block}

/* ---- buscador de sedes ---- */
.sede-results{display:none;max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin-top:6px;background:#fff;box-shadow:var(--shadow)}
.sede-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:10px 14px;cursor:pointer;font-family:inherit}
.sede-opt:last-child{border-bottom:0}
.sede-opt:hover{background:var(--pink-soft)}
.sede-opt-name{font-weight:600;font-size:.9rem;color:var(--ink)}
.sede-opt-dep{font-size:.72rem;color:var(--ink-soft);background:var(--bg);padding:2px 8px;border-radius:999px;white-space:nowrap}
.sede-empty{padding:14px;color:var(--ink-soft);font-size:.85rem}

/* ---- pantalla de carga ---- */
.page-loader{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#fff0f6,#e8fbf8);display:grid;place-items:center;transition:opacity .4s ease}
.page-loader.hide{opacity:0;pointer-events:none}
.page-loader-inner{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--ink)}
.loader-star{color:var(--pink);display:inline-block}
.loader-name{display:inline-block}
.loader-img{max-width:160px;max-height:160px;display:block}
.loader-anim-spin{animation:fxSpin 1.1s linear infinite}
.loader-anim-bounce{animation:fxBounce 1s ease infinite}
.loader-anim-pulse{animation:fxPulse 1s ease infinite}
.loader-anim-shake{animation:fxShake 1s ease infinite}
.loader-anim-flip{animation:fxFlip 1.4s ease infinite}
.loader-anim-jelly{animation:fxJelly 1.1s ease infinite}
.loader-anim-wobble{animation:fxWobble 1.2s ease infinite}

/* ---- rastreo shalom ---- */
.shalom-track{margin-top:10px}
.track-loading{padding:14px;color:var(--ink-soft)}
.track-error{background:#ffe0ea;color:#b3134f;padding:12px 14px;border-radius:12px;margin-top:12px}
.track-resumen{background:linear-gradient(135deg,#fff0f6,#e8fbf8);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:12px;font-size:1rem;line-height:1.5}
.track-raw{margin-top:10px}
.track-raw summary{cursor:pointer;color:var(--pink-dark);font-weight:700;font-size:.85rem}
.track-raw pre{background:#1f1d26;color:#e8e6ee;padding:14px;border-radius:10px;overflow:auto;font-size:.78rem;margin-top:8px;max-height:340px}

/* ============ Tarjeta de RASTREO (estilo Shalom) ============ */
#shalom-result{margin-top:18px}
.track-loading{padding:18px;background:#fff;border:2px dashed var(--line);border-radius:16px;text-align:center;color:var(--ink-soft);font-weight:600}
.track-error{padding:16px 18px;background:#fff0f4;border:1px solid #ffd0de;border-radius:14px;color:#c2185b;font-weight:600}
.trk-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);overflow:hidden}
.trk-top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.trk-estado{font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:var(--pink);line-height:1.05}
.trk-msg{color:var(--ink-soft);margin-top:4px;font-size:.95rem}
.trk-orden{text-align:right;font-weight:800;color:var(--ink);font-size:.92rem;white-space:nowrap}
.trk-orden span{display:block;font-weight:500;color:var(--ink-soft);font-size:.8rem;margin-top:2px}
.trk-timeline{display:flex;justify-content:space-between;margin:22px 0 8px;position:relative}
.trk-timeline::before{content:"";position:absolute;top:9px;left:6%;right:6%;height:3px;background:var(--line);z-index:0}
.trk-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;text-align:center}
.trk-dot{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--line);transition:.3s}
.trk-step.done .trk-dot{background:var(--cyan);border-color:var(--cyan)}
.trk-step.current .trk-dot{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 5px rgba(255,61,139,.18);animation:trkpulse 1.6s ease-in-out infinite}
@keyframes trkpulse{50%{box-shadow:0 0 0 9px rgba(255,61,139,.08)}}
.trk-label{font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.trk-step.done .trk-label,.trk-step.current .trk-label{color:var(--ink)}
.trk-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.trk-field{display:flex;gap:10px;align-items:flex-start}
.trk-ico{font-size:1.2rem;line-height:1}
.trk-flabel{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:700}
.trk-field strong{font-size:.92rem;color:var(--ink)}
.trk-resumen{margin-top:16px;padding:12px 14px;background:linear-gradient(105deg,var(--pink-soft),#d4f6f4);border-radius:12px;font-weight:600;color:var(--ink)}
.trk-foot{margin-top:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--ink-soft)}
.trk-engine{background:#f3eef2;padding:3px 10px;border-radius:999px;font-weight:700}
.trk-tokens{background:#eef9f7;padding:3px 10px;border-radius:999px;font-weight:700;color:var(--cyan-dark)}
.trk-raw{margin-left:auto}
.trk-raw summary{cursor:pointer;font-weight:700;color:var(--pink)}
.trk-raw pre{margin-top:8px;background:#1c1620;color:#ffd6e8;padding:12px;border-radius:10px;font-size:.74rem;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word}
@media(max-width:560px){.trk-estado{font-size:1.5rem}.trk-label{font-size:.66rem}}

/* ============ Mini-mapa MOTORIZADO ============ */
.btn--sm{padding:8px 14px;font-size:.85rem}
.moto-search-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.moto-map{height:300px;width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;z-index:0}
.moto-star-ico{color:var(--pink);font-size:24px;text-align:center;line-height:26px;text-shadow:0 1px 4px rgba(0,0,0,.35);filter:drop-shadow(0 0 2px #fff)}
.moto-zone{margin-top:12px}
.moto-zone-pill{padding:12px 16px;border-radius:14px;font-weight:700;background:#f5eff3;border:1px solid var(--line)}
.moto-zone-pill span{display:block;font-weight:500;font-size:.85rem;color:var(--ink-soft);margin-top:3px}
.moto-zone-pill.z1{background:linear-gradient(100deg,#dff7f5,#eafbf9);border-color:#9fe6e1;color:#0d6e68}
.moto-zone-pill.z2{background:linear-gradient(100deg,#ffe9f2,#fff0f6);border-color:#ffc3dd;color:#b3296b}
.moto-zone-pill.zout{background:#fff3f0;border-color:#ffd0c4;color:#b34a32}
.moto-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.moto-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;margin-right:5px}
.leaflet-container{font:inherit}

/* ===== Mi cuenta: pedidos abierto/enviado ===== */
.order-card--open{border:1px solid var(--cyan)!important}
.order-card--sent{opacity:.92}
.order-open-tag{display:inline-block;background:#dff7f5;color:#0d6e68;border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:700;margin-left:6px}
.order-add{margin-top:10px;display:inline-block}
.order-sent-note{margin-top:10px;font-size:.82rem;color:var(--ink-soft);background:#f6f1f4;border-radius:8px;padding:8px 10px}
.estado-pill{display:inline-block;border-radius:999px;padding:3px 12px;font-size:.78rem;font-weight:700}
.estado-pendiente{background:#fff3d6;color:#9a6b00}
.estado-confirmado{background:#dff1ff;color:#0b6aa8}
.estado-enviado{background:#dcf7e9;color:#0a7a45}

/* ===== MODO OSCURO ===== */
html.dark {
  --cream: #15101e;
  --pink-soft: #251a30;
  --line: #2d2040;
  --ink: #f0e8f5;
  --footer-bg: #0f0b16;
  --footer-fg: #e8def0;
  color-scheme: dark;
}
html.dark body { background: #15101e; color: #e8def0; }
html.dark .header { background: #1c1528; border-color: #2d2040; }
html.dark .nav a, html.dark .logo { color: #e8def0; }
html.dark .nav a:hover { color: #ff6aa8; }
html.dark .card { background: #1f1830; border-color: #2d2040; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
html.dark .card-name { color: #f0e8f5; }
html.dark .card-price .now { color: #ff6aa8; }
html.dark .card-price .was { color: #8a7a95; }
html.dark .section-title, html.dark h1, html.dark h2, html.dark h3 { color: #f0e8f5; }
html.dark .topbar { filter: brightness(.9); }
html.dark input, html.dark select, html.dark textarea {
  background: #251a35; color: #f0e8f5; border-color: #3d2e52;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #8a7a95; }
html.dark .auth-wrap, html.dark .acct-card, html.dark .order-card,
html.dark .track-widget { background: #1f1830; border-color: #3d2e52; color: #e8def0; }
html.dark .product-info, html.dark .product-name, html.dark .product-desc { color: #e8def0; }
html.dark .product-media { background: #1f1830; border-color: #2d2040; }
html.dark .footer { background: var(--footer-bg); color: var(--footer-fg); }
html.dark .cart-panel, html.dark .cart-item, html.dark .cart-row { background: #1c1528; color: #e8def0; border-color: #2d2040; }
html.dark .cart-summary { background: #1f1830; border-color: #2d2040; }
html.dark .adm-panel, html.dark .adm-card, html.dark .adm-table th { background: #1f1830; }

/* Botones en modo oscuro — texto legible */
html.dark .btn--add { background: #ff3d8b; color: #fff; }
html.dark .btn--add:hover { background: #ff6aa8; }
html.dark .btn--ghost, html.dark .btn--outline {
  background: transparent; color: #ff6aa8; border-color: #ff3d8b;
}
html.dark .btn--ghost:hover { background: rgba(255,61,139,.15); }
html.dark .btn--agotado { background: #2d2040; color: #8a7a95; }
html.dark .pill, html.dark .filter-pill, html.dark .cat-pill {
  background: #251a35; color: #f0e8f5; border-color: #3d2e52;
}
html.dark .pill.on, html.dark .filter-pill.on, html.dark .cat-pill.on,
html.dark .pill:hover, html.dark .cat-pill:hover { background: #ff3d8b; color: #fff; border-color: #ff3d8b; }
html.dark .cat-pill .cat-emoji { filter: none; }

/* Nav extra (Rastreo/Envíos) — rosado en oscuro en vez de cyan */
html.dark .nav .nav-extra { color: #ff6aa8; }
html.dark .nav .nav-extra:hover { background: rgba(255,61,139,.18); color: #ff8fc0; }
html.dark .nav a.active { background: #ff3d8b; color: #fff; }
html.dark .nav a:hover { background: rgba(255,61,139,.15); color: #ff8fc0; }

/* Botón buscar y otros acentos cyan → rosado en oscuro */
html.dark .search-btn, html.dark .btn-search { background: #ff3d8b; color: #fff; }
html.dark .badge-count, html.dark .cart-count { background: #ff3d8b; color: #fff; }

/* Sección "Explora por categoría" y títulos de sección */
html.dark .cat-section, html.dark .home-section { color: #f0e8f5; }
html.dark .coll-title, html.dark .info-lead { color: #e8def0; }

/* Footer links legibles */
html.dark .footer a { color: #c9bcd6; }
html.dark .footer a:hover { color: #ff8fc0; }
html.dark .footer h4, html.dark .footer strong { color: #f0e8f5; }

/* Acct rows */
html.dark .acct-row span { color: #a99bb5; }
html.dark .acct-row strong { color: #f0e8f5; }

/* Tablas admin */
html.dark .adm-table td, html.dark .adm-table th { color: #e8def0; border-color: #2d2040; }
html.dark .adm-table tr:hover td { background: #251a35; }
html.dark .adm-sub, html.dark .adm-note { color: #a99bb5; }

/* Breadcrumbs y texto secundario */
html.dark .crumbs, html.dark .crumbs a, html.dark .muted, html.dark .meta,
html.dark small, html.dark .product-trust { color: #a99bb5; }
html.dark .crumbs a:hover { color: #ff6aa8; }

/* Color/talla selectors */
html.dark .opt-btn, html.dark .swatch, html.dark .size-btn {
  background: #251a35; color: #e8def0; border-color: #3d2e52;
}
html.dark .opt-btn.sel, html.dark .swatch.sel, html.dark .size-btn.sel {
  background: #ff3d8b; color: #fff; border-color: #ff3d8b;
}

/* Cantidad stepper */
html.dark .qty-box, html.dark .qty-wrap { background: #251a35; border-color: #3d2e52; }
html.dark .qty-box button, html.dark .qty-wrap button { color: #ff6aa8; }
html.dark .qty-box input, html.dark .qty-wrap input { background: transparent; color: #f0e8f5; }

/* Cards de oferta / detalles */
html.dark .bullet-list li, html.dark .detalles li { color: #d8cce5; }
html.dark .card-sale, html.dark .card-badge { color: #fff; }

/* Modales */
html.dark .modal-box, html.dark .modal-content { background: #1f1830; color: #e8def0; }

/* ===== MODO OSCURO · cobertura extra (componentes que quedaban en blanco) ===== */
/* Resumen del carrito */
html.dark .sum-row, html.dark .sum-total { color: #e8def0; border-color: #2d2040; }
html.dark .sum-igv, html.dark .sum-note, html.dark .cart-envio-hint { color: #a99bb5; }
html.dark .cart-envio-hint a { color: #ff8fc0; }
html.dark .ship-bar { background: #2d2040; }
/* Buscador de sedes Shalom (página de envío) */
html.dark .sede-card, html.dark .sede-results, html.dark .sede-opt, html.dark .sede-btn,
html.dark .sede-opt-dep { background: #1f1830; color: #e8def0; border-color: #3d2e52; }
html.dark .sede-opt:hover, html.dark .sede-opt-dep:hover { background: #251a35; }
/* Tarjeta de rastreo en vivo (.trk-*, generada por JS) */
html.dark .trk-card { background: #1f1830; color: #e8def0; border-color: #3d2e52; }
html.dark .trk-field strong, html.dark .trk-estado { color: #f0e8f5; }
html.dark .trk-label { color: #a99bb5; }
/* Modal de comunidad WhatsApp */
html.dark .wa-modal-card { background: #1f1830; color: #e8def0; }
html.dark .wa-modal-card h3 { color: #f0e8f5; }
html.dark .wa-modal-card p { color: #c9bcd6; }
html.dark .wa-modal-close { background: #251a35; color: #e8def0; }
/* Loader de página (sin destello blanco/rosa en oscuro) */
html.dark .page-loader { background: linear-gradient(#1a1326, #15101e); }
html.dark .page-loader-inner { color: #f0e8f5; }
/* Pills de estado de pedidos */
html.dark .estado-pendiente { background: #3a2e12; color: #f3d488; }
html.dark .estado-confirmado { background: #102a1d; color: #8ee6b4; }
html.dark .estado-enviado { background: #122036; color: #8fc0ff; }
html.dark .estado-archivado { background: #2a2436; color: #a99bb5; }
/* Badges de detalle del carrito */
html.dark .cart-det--color { background: #2a1f33; color: #ddc6e8; }
html.dark .cart-det--size { background: #1c2630; color: #bfe0ef; }
html.dark .cart-det--oferta { background: #33231c; color: #f0c2a8; }
/* Estados de rastreo */
html.dark .track-error { background: #3a1320; color: #ff9bc0; }
html.dark .track-resumen { background: #1f1830; color: #e8def0; border-color: #3d2e52; }
html.dark .track-loading { color: #a99bb5; }
html.dark .shalom-pill { background: #2a1f33; color: #ff8fc0; border-color: #3d2e52; }
/* Dropdown de búsqueda (header, con estilo inline → !important) */
html.dark #search-drop { background: #1f1830 !important; border-color: #3d2e52 !important; color: #e8def0; }
/* Barra fija de agregar (móvil) y tarjetas del hub de Páginas (admin) */
html.dark .sticky-add-bar { background: #1c1528; border-color: #2d2040; }
html.dark .adm-pagecard { background: #1f1830; border-color: #2d2040; color: #e8def0; }
/* Cajas con estilo inline (carrito + modal de asesor) — override con !important */
html.dark .cart-login-prompt { background: #2a2412 !important; border-color: #5a4a1a !important; }
html.dark .cart-login-prompt p { color: #e6d8a8 !important; }
html.dark .cart-login-prompt a:last-child { color: #b9a9c5 !important; }
html.dark #cupon-wrap { background: #1f1830 !important; border-color: #3d2e52 !important; }
html.dark #cupon-input { border-color: #3d2e52 !important; }
html.dark .wa-asesor-card { background: #1f1830 !important; color: #e8def0; }
html.dark .wa-asesor-card h3 { color: #ff6aa8 !important; }
html.dark .wa-asesor-card p { color: #c9bcd6 !important; }
html.dark .wa-asesor-card input { background: #251a35 !important; border-color: #3d2e52 !important; color: #f0e8f5 !important; }
html.dark .wa-asesor-card [data-asesor] { border-color: #3d2e52 !important; }
html.dark .wa-asesor-cancel { background: #251a35 !important; color: #e8def0 !important; border-color: #3d2e52 !important; }

/* ===== SALE TIMER ===== */
.sale-timer {
  background: linear-gradient(135deg, #ff3d8b, #8b5cf6);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 12px 0 16px;
  color: #fff;
}
.sale-timer-label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 8px;
}
.sale-timer-blocks {
  display: flex;
  align-items: center;
  gap: 6px;
}
.timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 44px;
}
.timer-num {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.timer-lbl {
  font-size: .55rem;
  font-weight: 700;
  opacity: .7;
  text-transform: uppercase;
  margin-top: 2px;
}
.timer-sep { font-size: 1.4rem; font-weight: 900; opacity: .5; }
.sale-timer-price {
  font-size: .82rem;
  margin-top: 10px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-block;
}

/* ===== BULK TIERS ===== */
.bulk-tiers {
  background: #f5f3ff;
  border: 1.5px solid #d8b4fe;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.bulk-chip:hover { transform: scale(1.04); }

/* ===== PRICE SAVINGS ===== */
.price-saving-tag {
  display: inline-block;
  background: #d1fae5;
  color: #065f46;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ===== CART DETAILS (color/talla/oferta) ===== */
.cart-thumb--link { cursor:pointer; display:block; width:84px; height:104px; border-radius:var(--radius-sm); overflow:hidden; background:var(--pink-soft); }
.cart-thumb--link img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.cart-thumb--link:hover img { transform:scale(1.06); }
.cart-info h4 { cursor:pointer; transition:color .15s; }
.cart-info a:hover h4 { color:var(--pink-dark); }
.cart-dets { display:flex;flex-wrap:wrap;gap:4px;margin:4px 0; }
.cart-det { display:inline-block;font-size:.7rem;font-weight:600;padding:2px 7px;border-radius:8px; }
.cart-det--color { background:#fce4ec;color:#c62828; }
.cart-det--size  { background:#e3f2fd;color:#1565c0; }
.cart-det--oferta{ background:#f3e5f5;color:#7b1fa2; }

/* ===== SCROLL REVEAL ===== */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; }
.reveal.revealed { opacity:1; transform:none; }

/* ===== IMAGE LIGHTBOX ===== */
.lightbox { display:none !important;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99990;align-items:center;justify-content:center;cursor:zoom-out; }
.lightbox.open { display:flex !important; }
.lightbox img { max-width:90vw;max-height:90vh;border-radius:10px;object-fit:contain;cursor:default; }
.lightbox img[src=""], .lightbox img:not([src]) { display:none; }
.lightbox-close { position:fixed;top:18px;right:22px;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:1.5rem;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;z-index:99991; }
.lightbox-close:hover { background:rgba(255,255,255,.35); }
.pdp-thumb-img { cursor:zoom-in; transition:transform .3s; }
.pdp-thumb-img:hover { transform:scale(1.03); }

/* ===== PARTICLES (fondo flotante) ===== */
/* ===== NIEVE DE FONDO GLOBAL (fija, detrás de todo) ===== */
.snow-bg-layer {
  position:fixed; inset:0; overflow:hidden; pointer-events:none;
  z-index:0; /* detrás del contenido */
}
.snow-flake {
  position:absolute; top:-5%;
  animation:snowFall linear infinite;
  will-change:transform;
  user-select:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
@keyframes snowFall {
  0%   { transform:translateY(-5vh) translateX(0) rotate(0deg); opacity:0; }
  10%  { opacity:.72; }
  90%  { opacity:.72; }
  100% { transform:translateY(105vh) translateX(var(--drift,20px)) rotate(360deg); opacity:0; }
}
html.dark .snow-flake { filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
/* El contenido principal debe quedar por encima de la nieve */
.main { position:relative; z-index:1; }
.header { position:relative; z-index:10; }
.footer { position:relative; z-index:1; }

.particles-layer { position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1; }
.particle { position:absolute;font-size:1.2rem;animation:particleFloat linear infinite;opacity:.35; }
@keyframes particleFloat {
  0%   { transform:translateY(100%) rotate(0deg);   opacity:0; }
  10%  { opacity:.35; }
  90%  { opacity:.35; }
  100% { transform:translateY(-120%) rotate(360deg);opacity:0; }
}
.section--particles { position:relative;overflow:hidden; }
.footer--particles { position:relative;overflow:hidden; }

/* ===== SKELETON LOADING ===== */
@keyframes skelShimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skel { background:linear-gradient(90deg,#f0e8ee 25%,#fce0ec 50%,#f0e8ee 75%);background-size:800px 100%;animation:skelShimmer 1.4s ease infinite;border-radius:8px; }
.skel-thumb { width:80px;height:80px;border-radius:10px;flex-shrink:0; }
.skel-line { display:block; }
.skel-btn { display:block;border-radius:99px; }
.skel-row { display:flex;gap:14px;padding:14px;border-bottom:1px solid #f5f0f4;align-items:flex-start; }

/* ===== PAGE TRANSITION ===== */
body { animation:pageFadeIn .25s ease; }
@keyframes pageFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ===== STICKY ADD BAR (solo móvil) ===== */
.sticky-add-bar {
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;border-top:1px solid #f0e0ec;
  padding:10px 16px;gap:12px;align-items:center;
  box-shadow:0 -4px 16px rgba(0,0,0,.1);z-index:800;
}
@media(max-width:767px){ .sticky-add-bar.visible { display:flex; } }
@media(min-width:768px){ .sticky-add-bar, .sticky-add-bar.visible { display:none !important; } }

/* ===== SHARE BUTTON ===== */
#btn-share:hover { background:#fff0f6; border-color:#ff3d8b; }

/* ===== H&M STYLE ZOOM ===== */
#pdp-media-wrap { overflow:hidden; border-radius:var(--radius); position:relative; }
#pdp-main-img { transition:transform .25s ease; display:block; width:100%; }
@media(hover:hover) and (pointer:fine){
  #pdp-main-img { cursor:zoom-in; }
}
/* On touch devices, no hover zoom — only tap to lightbox */
@media(pointer:coarse){
  #pdp-main-img { transform:none !important; }
}

/* ===== LOGO DESTELLOS (brilla en loop continuo) ===== */
@keyframes logoDestello {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255,61,139,.4)); }
  50%      { filter: drop-shadow(0 0 6px rgba(255,61,139,.9)) drop-shadow(0 0 12px rgba(30,203,195,.7)); }
}
@keyframes logoDestelloStar {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255,61,139,.4)); transform: scale(1) rotate(0deg); }
  50%      { filter: drop-shadow(0 0 8px rgba(255,61,139,1)) drop-shadow(0 0 14px rgba(30,203,195,.8)); transform: scale(1.15) rotate(8deg); }
}
.logo-destellos--star .logo-star { animation: logoDestelloStar 2.4s ease-in-out infinite; display:inline-block; }
.logo-destellos--all { animation: logoDestello 2.4s ease-in-out infinite; }
.logo-destellos--all .logo-star { animation: logoDestelloStar 2.4s ease-in-out infinite; display:inline-block; }

/* ===== WISHLIST HEART (estilo H&M, al lado del nombre) ===== */
.wishlist-btn {
  background:transparent !important;border:0 !important;cursor:pointer;padding:2px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;line-height:0;
  color:#ff3d8b;
  -webkit-appearance:none;appearance:none;box-shadow:none;border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.wishlist-btn:focus,.wishlist-btn:focus-visible{outline:none;}
.wishlist-btn .wl-icon { fill:none; stroke:#ff3d8b; transition:transform .15s, fill .2s, stroke .2s; }
.wishlist-btn:hover .wl-icon { transform:scale(1.12); }
.wishlist-btn.wl-on .wl-icon { fill:#ff3d8b; stroke:#ff3d8b; }
html.dark .wishlist-btn { color:#ff6aa8; }
html.dark .wishlist-btn .wl-icon { stroke:#ff6aa8; }
html.dark .wishlist-btn.wl-on .wl-icon { fill:#ff6aa8; stroke:#ff6aa8; }
/* Variante grande para el page del producto, junto al título */
.wishlist-btn--lg { padding:6px; }
.wishlist-btn--lg .wl-icon { width:28px; height:28px; }
.product-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.product-title-row .product-name { flex:1; }
/* Contenido de páginas editables (política de envíos, cambios y devoluciones…) */
.info-content { max-width:760px; margin:0 auto; line-height:1.7; }
.info-content p { margin:0 0 14px; }
.info-content ul, .info-content ol { margin:0 0 16px 1.2em; padding:0; }
.info-content li { margin:0 0 8px; }
.info-content h2, .info-content h3 { margin:22px 0 10px; }
.info-content table { border-collapse:collapse; width:100%; max-width:480px; margin:0 0 16px; font-size:.9rem; }
.info-content th, .info-content td { border:1px solid #f0d9e6; padding:8px 12px; text-align:left; }
.info-content th { background:#fff0f7; font-weight:700; }
html.dark .info-content th, html.dark .info-content td { border-color:#3d2e52; }
html.dark .info-content th { background:#251a35; }
/* Badges de medios de pago en el footer */
.footer-pagos { display:block; margin-top:8px; font-size:.8rem; opacity:.9; }
.pay-badge { display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:6px; padding:2px 8px; margin:0 4px 4px 0; font-weight:600; font-size:.74rem; }
/* Guía de tallas (link en producto) */
.size-guide-link { font-weight:600; font-size:.78rem; color:#ff3d8b; text-decoration:none; margin-left:8px; }
.size-guide-link:hover { text-decoration:underline; }
.opt-chip--agotado { opacity:.45; text-decoration:line-through; cursor:not-allowed; }
/* Filtros de colección */
.coll-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 18px; padding:12px 14px; background:#fff; border:1px solid #f0e0ec; border-radius:14px; }
.filter-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.filter-lbl { font-weight:700; font-size:.82rem; color:#7a6b80; }
.filter-chip { border:1px solid #f0d9e6; background:#fff; border-radius:99px; padding:4px 12px; font-size:.8rem; cursor:pointer; text-transform:capitalize; }
.filter-chip.on { background:#ff3d8b; color:#fff; border-color:#ff3d8b; }
.filter-clear { border:none; background:none; color:#888; font-size:.8rem; cursor:pointer; text-decoration:underline; }
.filter-count { font-size:.78rem; color:#aaa; margin-left:auto; }
/* Reseñas con foto + verificada */
.resena-verif { display:inline-block; background:#e6f7ee; color:#1a7a45; border-radius:6px; padding:1px 7px; font-size:.7rem; font-weight:700; vertical-align:middle; }
.resena-foto { margin-top:8px; max-width:120px; max-height:120px; border-radius:8px; object-fit:cover; display:block; }
html.dark .coll-filters { background:#1f1830; border-color:#2d2040; }
html.dark .filter-chip { background:#251a35; color:#e8def0; border-color:#3d2e52; }
html.dark .filter-chip.on { background:#ff3d8b; color:#fff; }
html.dark .resena-card { background:#1f1830 !important; border-color:#3d2e52 !important; }
html.dark .resena-card p { color:#c9bcd6; }
html.dark .resena-verif { background:#102a1d; color:#8ee6b4; }
/* Etiqueta de oferta por cantidad (pack) en el carrito */
.cart-pack-tag { background:#f5f3ff; color:#6d28d9; border-radius:6px; padding:1px 6px; font-size:.7rem; font-weight:700; margin-left:6px; }
html.dark .cart-pack-tag { background:#2a1f33; color:#c4a5f0; }
/* ===== CHATBOT DE AYUDA ===== */
#mg-bot-toggle { position:fixed; right:20px; bottom:88px; width:52px; height:52px; border-radius:50%; border:none; background:linear-gradient(135deg,#ff3d8b,#8b5cf6); color:#fff; font-size:1.4rem; cursor:pointer; box-shadow:0 6px 20px rgba(255,61,139,.4); z-index:998; }
#mg-bot-panel { position:fixed; right:20px; bottom:150px; width:330px; max-width:calc(100vw - 40px); max-height:70vh; background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.22); z-index:999; display:flex; flex-direction:column; overflow:hidden; }
#mg-bot-panel[hidden] { display:none; }
.mg-bot-head { background:linear-gradient(135deg,#ff3d8b,#8b5cf6); color:#fff; padding:12px 16px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.mg-bot-head button { background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; line-height:1; }
.mg-bot-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:#fff6fb; }
.mg-msg { max-width:88%; padding:8px 12px; border-radius:12px; font-size:.85rem; line-height:1.45; }
.mg-msg.mg-bot { align-self:flex-start; background:#fff; border:1px solid #f0d9e6; color:#444; border-bottom-left-radius:3px; }
.mg-msg.mg-user { align-self:flex-end; background:#ff3d8b; color:#fff; border-bottom-right-radius:3px; }
.mg-msg .mg-ul { margin:5px 0 2px; padding-left:18px; }
.mg-msg .mg-ul li { margin:2px 0; }
.mg-msg strong { font-weight:800; }
.mg-msg a { color:inherit; text-decoration:underline; }
.mg-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.mg-chips button { border:1px solid #ff9ec6; background:#fff; color:#c0175d; border-radius:99px; padding:5px 10px; font-size:.75rem; cursor:pointer; text-align:left; }
.mg-bot-input { display:flex; border-top:1px solid #f0e0ec; padding:8px; gap:6px; background:#fff; }
.mg-bot-input input { flex:1; border:1px solid #ddd; border-radius:99px; padding:8px 12px; font-size:.85rem; }
.mg-bot-input button { border:none; background:#ff3d8b; color:#fff; border-radius:50%; width:36px; height:36px; cursor:pointer; flex-shrink:0; }
html.dark #mg-bot-panel { background:#1f1830; }
html.dark .mg-bot-body { background:#15101e; }
html.dark .mg-msg.mg-bot { background:#251a35; border-color:#3d2e52; color:#e8def0; }
html.dark .mg-chips button { background:#251a35; color:#ff8fc0; border-color:#3d2e52; }
html.dark .mg-bot-input { background:#1f1830; border-color:#2d2040; }
html.dark .mg-bot-input input { background:#251a35; border-color:#3d2e52; color:#f0e8f5; }
/* Modo tourview (página dentro del teléfono del tour): sin chatbot ni modales que tapen la demo */
html.tourview #mg-bot, html.tourview .wa-modal { display:none !important; }

/* ===== LOGO DESTELLOS BURST (al hacer click, antes de navegar) ===== */
@keyframes logoBurst {
  0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px rgba(255,61,139,.5)); }
  40%  { transform: scale(1.4) rotate(180deg); filter: drop-shadow(0 0 14px rgba(255,61,139,1)) drop-shadow(0 0 22px rgba(30,203,195,.9)); }
  100% { transform: scale(1) rotate(360deg); filter: drop-shadow(0 0 4px rgba(255,61,139,.6)); }
}
.logo-destellos-burst .logo-star {
  animation: logoBurst .8s ease-in-out !important;
  display: inline-block;
}
.logo-destellos-burst .logo-text {
  animation: logoTextGlow .8s ease-in-out;
}
@keyframes logoTextGlow {
  0%,100% { text-shadow: none; }
  50%     { text-shadow: 0 0 8px rgba(255,61,139,.8), 0 0 16px rgba(30,203,195,.5); }
}

/* ===== FAVORITOS BUTTON (al lado de la cuenta) ===== */
.fav-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); margin:0 2px; }
.fav-btn:hover { color:var(--pink); }
.fav-count {
  position:absolute; top:-7px; right:-9px; background:var(--pink); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.68rem;
  min-width:18px; height:18px; display:grid; place-items:center; border-radius:999px;
  padding:0 4px; border:2px solid #fff; line-height:1;
}
.fav-count:empty, .fav-count[data-zero="1"] { display:none; }
html.dark .fav-btn { color:#e8def0; }
html.dark .fav-btn:hover { color:#ff6aa8; }
html.dark .fav-count { background:#ff3d8b; border-color:#1c1528; }

/* ===== Mejoras aplicadas (sugerencias) ===== */
/* #61 Mostrar/ocultar contraseña */
.pw-field { position:relative; display:flex; align-items:center; }
.pw-field input { flex:1; padding-right:42px; }
.pw-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1.1rem; line-height:1; padding:4px; }

/* #75 Indicador de orden activo en la grilla */
.coll-toolbar select.sort-active { border-color:#ff3d8b; color:#ff3d8b; font-weight:700; }

/* #67 Barra "Deshacer" al quitar del carrito */
.undo-bar { position:fixed; left:50%; bottom:24px; transform:translate(-50%,120%); background:#241621; color:#fff; padding:12px 16px; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.28); display:flex; align-items:center; gap:14px; z-index:9998; opacity:0; transition:transform .3s ease, opacity .3s ease; max-width:calc(100vw - 32px); }
.undo-bar.show { transform:translate(-50%,0); opacity:1; }
.undo-bar .undo-txt { font-size:.9rem; }
.undo-bar .undo-btn { background:none; border:none; color:#ff8fbf; font-weight:800; cursor:pointer; font-size:.9rem; white-space:nowrap; }

/* #68 Aviso persistente de productos sin stock */
.stock-notice { position:fixed; left:50%; top:16px; transform:translate(-50%,-150%); background:#fff3cd; color:#856404; border:1.5px solid #ffe0a3; padding:12px 16px; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.18); display:flex; align-items:flex-start; gap:12px; z-index:9999; max-width:calc(100vw - 32px); font-size:.88rem; transition:transform .3s ease; }
.stock-notice.show { transform:translate(-50%,0); }
.stock-notice .sn-close { background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer; color:#856404; }

/* #12 Fondos que rompían el modo oscuro: buscador, modal de envío y aviso de login */
html.dark #search-drop { background:#1f1830 !important; border-color:#3d2e52 !important; }
html.dark #search-drop .search-drop-item { border-bottom-color:#2d2040 !important; }
html.dark #modal-envio-wa .wa-asesor-card { background:#1f1830 !important; color:#e8def0; }
html.dark #modal-envio-wa #modal-pedido-resumen { background:#251a35 !important; border-color:#3d2e52 !important; }
html.dark #modal-envio-wa .wa-asesor-cancel { background:#2d2040 !important; color:#e8def0; border-color:#3d2e52 !important; }
html.dark #celular-cliente-input { background:#251a35 !important; color:#e8def0; }
html.dark .cart-login-prompt { background:#2a2410 !important; border-color:#5c4a1a !important; }
html.dark .cart-login-prompt p { color:#e8d9a8 !important; }