/* ======================================================
   KIOSCO DE LUMAR — estilos compartidos por todas las páginas
   ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800;900&display=swap');
:root{
  --fondo:#050506;     /* negro */
  --fondo-2:#0b0b0e;
  --panel:#131317;
  --panel-2:#1c1c22;
  --magenta:#ff3b3b;   /* ROJO — acento principal (Urbano Bold) */
  --violeta:#ff6a1a;   /* naranja puente */
  --cyan:#f2b64a;      /* dorado claro — links / detalles */
  --lima:#3aa87f;      /* verde envío (whatsapp) */
  --oro:#ffb703;       /* ÁMBAR — precios / acentos */
  --texto:#f5f6f9;
  --gris:#b7bac6;
  --gris-2:#84889a;
  --borde:rgba(255,183,3,.18);        /* borde ámbar tenue */
  --borde-fuerte:rgba(255,59,59,.5);  /* borde rojo */
  --verde-wsp:#25d366;
  --grad:linear-gradient(135deg,var(--magenta),var(--oro) 55%,var(--violeta)); /* rojo→dorado, como el logo */
  --sombra:0 18px 50px rgba(0,0,0,.65);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255,46,63,.12), transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 4%, rgba(255,204,0,.06), transparent 58%),
    radial-gradient(ellipse 55% 45% at 0% 30%, rgba(37,211,238,.05), transparent 60%),
    var(--fondo);
  background-attachment:fixed;
  color:var(--texto);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:.03em;line-height:.98}
h3{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.15}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--magenta);color:#fff}

/* barra superior neón animada */
.top-neon{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:120;
  background:linear-gradient(90deg,var(--magenta),var(--oro),var(--cyan),var(--lima),var(--magenta));
  background-size:300% 100%;
  animation:corre 6s linear infinite;
}
@keyframes corre{to{background-position:300% 0}}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:4px;left:0;right:0;z-index:110;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem 5vw;
  background:rgba(13,10,31,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.nav-logo{display:flex;align-items:center;gap:.55rem;font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:800;text-decoration:none}
.nav-logo-img{height:46px;width:auto;display:block}
/* logo en el hero */
.hero-logo{
  width:clamp(130px,22vw,180px);height:auto;margin:0 auto 1.2rem;
  animation:flota 6s ease-in-out infinite;
}
/* logo en el footer */
.pie-logo{width:120px;height:auto;margin:0 auto 1rem}
.nav-logo .chip{
  width:34px;height:34px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;font-size:1.1rem;box-shadow:0 4px 14px rgba(109,99,245,.4);
}
.nav-logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:.86rem;font-weight:600;color:var(--gris);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--texto)}
.nav-links a[aria-current="page"]{color:var(--texto)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--grad);
}
.nav-actions{display:flex;align-items:center;gap:.6rem}
/* botón menú (hamburguesa) — solo en celular */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:40px;padding:0 11px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--borde-fuerte);border-radius:11px;
}
.nav-burger span{display:block;height:2.5px;width:100%;border-radius:2px;background:var(--texto);transition:transform .25s,opacity .2s}
#navBar.menu-open .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
#navBar.menu-open .nav-burger span:nth-child(2){opacity:0}
#navBar.menu-open .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-cart{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--panel-2);color:var(--texto);border:1px solid var(--borde);cursor:pointer;
  padding:.5rem .9rem;border-radius:999px;font-weight:700;font-size:.86rem;
  transition:transform .15s,border-color .2s;
}
.nav-cart:hover{transform:translateY(-2px);border-color:var(--borde-fuerte)}
.nav-cart .cuenta{
  background:var(--magenta);color:#fff;border-radius:999px;min-width:20px;height:20px;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;padding:0 5px;
}
@media(max-width:860px){
  .nav-burger{display:flex}
  .nav-cart-txt{display:none}          /* en celular el carrito queda compacto */
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,6,10,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--borde-fuerte);
    padding:.3rem 5vw .8rem;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .32s ease,opacity .25s ease;
  }
  #navBar.menu-open .nav-links{max-height:80vh;opacity:1;pointer-events:auto}
  .nav-links li a{
    display:block;padding:.95rem .2rem;font-size:1.05rem;font-weight:600;color:var(--texto);
    border-bottom:1px solid var(--borde);
  }
  .nav-links li:last-child a{border-bottom:none}
  .nav-links a[aria-current="page"]::after{display:none}
}

/* ---------- HERO ---------- */
header{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:7rem 5vw 3rem;position:relative;overflow:hidden;
  background:var(--fondo);
  isolation:isolate;
}
/* Foto real del kiosco de fondo, con retoque "profesional" por CSS:
   más contraste/saturación y un poco más oscura para que el texto se lea. */
header::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('kiosco-foto.jpg') center 40%/cover no-repeat;
  filter:brightness(.66) contrast(1.14) saturate(1.2);
  transform:scale(1.04); /* evita bordes al aplicar el filtro/blur */
}
/* Capa de color de la marca + oscurecido para legibilidad */
header::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 32%, rgba(255,46,63,.22), transparent 68%),
    radial-gradient(ellipse 55% 50% at 86% 14%, rgba(255,204,0,.14), transparent 62%),
    radial-gradient(ellipse 50% 45% at 12% 20%, rgba(37,211,238,.12), transparent 62%),
    linear-gradient(180deg, rgba(3,3,6,.55) 0%, rgba(3,3,6,.62) 45%, rgba(3,3,6,.92) 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(85px);opacity:.22;z-index:-1;animation:flota 9s ease-in-out infinite}
.blob.b1{width:280px;height:280px;background:var(--magenta);top:12%;left:-60px}
.blob.b2{width:240px;height:240px;background:var(--cyan);bottom:8%;right:-40px;animation-delay:-3s}
@keyframes flota{50%{transform:translateY(-26px)}}
header>*{position:relative;z-index:1}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--borde);border-radius:999px;padding:.4rem 1rem;
  font-size:.78rem;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.14em;
  margin-bottom:1.5rem;background:rgba(255,255,255,.03);
}
.hero-kicker .pt{width:8px;height:8px;border-radius:50%;background:var(--lima);box-shadow:0 0 10px var(--lima)}
header h1{font-size:clamp(3.2rem,10vw,6.6rem);max-width:16ch}
header h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--gris);max-width:52ch;margin:1.3rem auto 2rem;font-size:clamp(1rem,2.2vw,1.2rem)}

.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:2rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;border:none;
  padding:.95rem 1.8rem;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:.98rem;transition:transform .15s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:var(--sombra)}
.btn-wsp{background:var(--verde-wsp);color:#04240f}
.btn-linea{background:rgba(255,255,255,.05);color:var(--texto);border:1px solid var(--borde)}
.btn-linea:hover{border-color:var(--magenta)}
.btn svg{width:20px;height:20px}

/* redes en el hero */
.hero-social{display:flex;gap:.7rem;justify-content:center;align-items:center}
.soc{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  text-decoration:none;transition:transform .15s,filter .2s;box-shadow:var(--sombra);
}
.soc:hover{transform:translateY(-3px)}
.soc svg{width:24px;height:24px;fill:#fff}
.soc.fb{background:#1877f2}
.soc.ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7)}
.soc.wa{background:var(--verde-wsp)}

/* tira de confianza */
.trust{
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:center;
  margin-top:2.4rem;color:var(--gris-2);font-size:.82rem;font-weight:600;
}
.trust span{display:inline-flex;align-items:center;gap:.45rem}
.trust svg{width:17px;height:17px;color:var(--lima)}

/* ---------- PROMOS (carteles rotativos) ---------- */
.promos-wrap{max-width:1150px;margin:-2.5rem auto 0;padding:0 5vw;position:relative;z-index:5}
.promos{
  position:relative;border-radius:20px;overflow:hidden;min-height:150px;
  border:1.5px solid rgba(255,46,63,.75);
  box-shadow:
    inset 0 0 0 1px rgba(255,204,0,.25),
    0 0 18px rgba(255,46,63,.35),
    0 0 42px rgba(255,46,63,.18),
    var(--sombra);
  animation:neon-ofertas 2.6s ease-in-out infinite;
}
@keyframes neon-ofertas{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,204,0,.22),0 0 16px rgba(255,46,63,.30),0 0 38px rgba(255,46,63,.14),var(--sombra)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,204,0,.45),0 0 28px rgba(255,46,63,.55),0 0 62px rgba(255,46,63,.30),var(--sombra)}
}
.promo{
  position:absolute;inset:0;display:flex;align-items:center;gap:1.2rem;
  padding:1.6rem 1.8rem;opacity:0;transform:scale(1.04);
  transition:opacity .7s ease,transform .7s ease;pointer-events:none;
}
.promo.on{opacity:1;transform:none;pointer-events:auto}
.promo .emoji{font-size:2.6rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.promo .txt{flex:1}
.promo .badge{
  display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  padding:.2rem .6rem;border-radius:999px;background:rgba(0,0,0,.28);margin-bottom:.35rem;
}
.promo h3{font-size:clamp(1.15rem,3vw,1.7rem);color:#fff}
.promo p{font-size:.92rem;color:rgba(255,255,255,.9);margin-top:.2rem}
.promo .btn{padding:.7rem 1.3rem;font-size:.88rem}
.p0{background:linear-gradient(120deg,#ff2e3f,#ffcc00)}
.p1{background:linear-gradient(120deg,#ff7a1a,#ffcc00)}
.p2{background:linear-gradient(120deg,#ff2e3f,#ff5da2)}
.p3{background:linear-gradient(120deg,#22d3ee,#34d399)}
.promo-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}
.promo-dots button{
  width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;
  background:var(--gris-2);opacity:.4;transition:opacity .2s,transform .2s}
.promo-dots button.act{opacity:1;transform:scale(1.3);background:var(--magenta)}
@media(max-width:620px){.promo .emoji{display:none}.promo{flex-direction:column;text-align:center;align-items:center}}

/* ---------- SECCIONES ---------- */
section{padding:4.5rem 5vw;max-width:1150px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:2.6rem}
.sec-kicker{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--magenta);margin-bottom:.6rem;
}
.sec-titulo{font-size:clamp(1.8rem,4.5vw,2.8rem)}
.sec-titulo .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-intro{color:var(--gris);max-width:56ch;margin:.7rem auto 0}

/* ---------- CATÁLOGO / PRODUCTOS ---------- */
.cat-head{display:flex;align-items:center;gap:.8rem;margin:0 auto 1.6rem;max-width:1150px}
.cat-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;flex:none;overflow:hidden}
.cat-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.cat-hero .cat-icon img,.cat-head .cat-icon img{object-fit:contain}
/* con logo real: sin fondo de degradé */
.cat-perfumes .cat-icon:has(img),.cat-bebidas .cat-icon:has(img),.cat-vapes .cat-icon:has(img){background:#fff}
.cat-vapes .cat-icon:has(img){background:#0b0b0d}
.cat-perfumes .cat-icon{background:linear-gradient(135deg,#ff3b3b,#ff6a8a)}
.cat-bebidas .cat-icon{background:linear-gradient(135deg,#ffb703,#ff6a1a)}
.cat-vapes .cat-icon{background:linear-gradient(135deg,#ff6a1a,#ff3b3b)}
.cat-head h2{font-size:clamp(1.5rem,4vw,2.2rem)}
.cat-head p{color:var(--gris);font-size:.9rem}
.cat-ver{margin-left:auto;white-space:nowrap;font-size:.85rem;font-weight:700;color:var(--cyan);text-decoration:none}
.cat-ver:hover{color:var(--texto)}
@media(max-width:560px){.cat-ver{display:none}}

/* ---------- Cartel "Seguinos en Instagram" por sección ---------- */
.ig-cta-box{max-width:1150px;margin:1.4rem auto 0}
.ig-cta{
  display:flex;align-items:center;gap:1rem;text-decoration:none;
  padding:1rem 1.2rem;border-radius:18px;color:#fff;
  background:linear-gradient(90deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
  box-shadow:var(--sombra);transition:transform .2s,box-shadow .2s;
}
.ig-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(214,41,118,.35)}
.ig-cta-ic{flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:rgba(0,0,0,.28);border-radius:12px}
.ig-cta-ic svg{width:26px;height:26px;fill:#fff}
.ig-cta-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ig-cta-txt b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.02rem}
.ig-cta-txt span{font-size:.85rem;opacity:.95;overflow:hidden;text-overflow:ellipsis}
.ig-cta-btn{margin-left:auto;flex:none;white-space:nowrap;font-weight:800;font-size:.9rem;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);
  padding:.55rem .9rem;border-radius:999px}
@media(max-width:560px){
  .ig-cta{flex-wrap:wrap;gap:.7rem}
  .ig-cta-btn{margin-left:0;width:100%;text-align:center}
}

/* rectángulo con imágenes que pasan solas hacia los costados */
.carrusel{
  position:relative;overflow:hidden;padding:.5rem 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.carrusel .track{display:flex;width:max-content;animation:desliza var(--dur,40s) linear infinite}
.carrusel:hover .track,.carrusel.pausa .track{animation-play-state:paused}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.carrusel-hint{text-align:center;color:var(--gris-2);font-size:.76rem;margin-top:.7rem}

.prod{
  width:230px;flex:0 0 230px;margin-right:1.1rem;
  background:var(--panel);border:1px solid var(--borde);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;
}
.prod:hover{transform:translateY(-5px);border-color:var(--borde-fuerte);box-shadow:var(--sombra)}
.prod .thumb{
  aspect-ratio:1/1;display:grid;place-items:center;font-size:3.4rem;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,var(--panel-2),var(--panel));
}
.prod .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:1;background:var(--panel)}
.prod .thumb .thumb-emoji{line-height:1}
.prod .tag{
  position:absolute;top:.6rem;left:.6rem;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;padding:.25rem .55rem;border-radius:999px;background:var(--magenta);color:#fff;z-index:2;
}
.prod .tag.off{background:var(--lima);color:#12300a}
.prod .body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:1rem;margin-bottom:.15rem}
.prod .desc{color:var(--gris-2);font-size:.8rem;margin-bottom:.7rem;flex:1}
.prod .fila{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto}
.prod .precio{font-weight:800;font-size:1.15rem;color:var(--oro)}
.prod .precio .antes{display:block;font-size:.72rem;color:var(--gris-2);text-decoration:line-through;font-weight:600}
.add{
  border:none;cursor:pointer;background:var(--grad);color:#fff;font-weight:700;font-size:.82rem;
  padding:.55rem .85rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;
  transition:transform .12s;white-space:nowrap;
}
.add:hover{transform:scale(1.05)}
.add:active{transform:scale(.94)}
.add svg{width:15px;height:15px}

/* ---------- Selector de sabor (vapes) ---------- */
.sabor-pick{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.sabor-pick > span{
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--oro);flex:0 0 auto;
}
.sabor-select{
  flex:1;min-width:0;appearance:none;-webkit-appearance:none;
  background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffb703' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center;
  color:var(--texto);border:1px solid var(--borde);border-radius:12px;
  padding:.5rem 1.9rem .5rem .7rem;font-size:.82rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:border-color .15s;
}
.sabor-select:hover{border-color:var(--borde-fuerte)}
.sabor-select:focus{outline:none;border-color:var(--oro)}
.sabor-select option{background:var(--panel);color:var(--texto)}
.ci-sabor{color:var(--oro);font-weight:700;font-size:.82rem}

/* ---------- Selector de combo/variante (bebidas) ---------- */
.var-pick{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.7rem}
.var-pick > span{
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--oro);
}
.var-select{
  width:100%;appearance:none;-webkit-appearance:none;
  background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffb703' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center;
  color:var(--texto);border:1px solid var(--borde);border-radius:12px;
  padding:.5rem 1.9rem .5rem .7rem;font-size:.82rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:border-color .15s;
}
.var-select:hover{border-color:var(--borde-fuerte)}
.var-select:focus{outline:none;border-color:var(--oro)}
.var-select option{background:var(--panel);color:var(--texto)}

/* ---------- Precio + control de cantidad ---------- */
.prod .precio{margin:.1rem 0 .7rem}
.precio.consultar{font-size:.95rem;color:var(--gris)}
.prod .fila{flex-wrap:wrap;justify-content:flex-start;gap:.55rem}
.qty{
  display:inline-flex;align-items:center;flex:0 0 auto;
  border:1px solid var(--borde);border-radius:999px;overflow:hidden;background:var(--panel-2);
}
.qbtn{
  width:30px;height:34px;border:none;background:transparent;color:var(--oro);
  font-size:1.2rem;font-weight:800;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .15s;
}
.qbtn:hover{background:rgba(255,255,255,.07)}
.qbtn:active{transform:scale(.9)}
.qty-in{
  width:36px;height:34px;border:none;background:transparent;color:var(--texto);
  text-align:center;font-weight:800;font-size:.92rem;font-family:inherit;
}
.qty-in:focus{outline:none}
.qty-in::-webkit-outer-spin-button,.qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prod .fila .add{flex:1 1 auto;justify-content:center;min-width:112px}
.add-consulta{text-decoration:none}

/* ---------- Medios de pago ---------- */
.medios{max-width:1000px;margin:2.6rem auto 0;padding:0 1rem}
.medios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.4rem}
.medio{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--panel);border:1px solid var(--borde);border-radius:16px;padding:1.05rem 1.15rem;
}
.medio .ic{font-size:1.7rem;line-height:1;flex:0 0 auto}
.medio b{display:block;font-size:1rem;margin-bottom:.2rem}
.medio span{color:var(--gris-2);font-size:.84rem;line-height:1.45}
.medios-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:1.4rem}
.medios-badges .bdg{
  border:1px solid var(--borde);border-radius:999px;padding:.5rem .9rem;
  font-size:.8rem;font-weight:600;color:var(--texto);background:var(--panel-2);
}

/* ---------- Tira de anuncios que se mueve sola (Bebidas) ---------- */
.anuncios{
  position:relative;overflow:hidden;padding:.4rem 0;max-width:1200px;margin:0 auto 1.6rem;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.anuncios-titulo{max-width:1200px;margin:.4rem auto .7rem;font-weight:800;font-size:1.1rem;color:var(--oro)}
.anuncios-track{display:flex;gap:1rem;width:max-content;animation:desliza var(--dur,40s) linear infinite}
.anuncios:hover .anuncios-track{animation-play-state:paused}
.anuncio{
  flex:0 0 auto;display:block;height:300px;border-radius:16px;overflow:hidden;
  border:1px solid var(--borde);background:var(--panel);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.anuncio:hover{transform:translateY(-4px);border-color:var(--borde-fuerte);box-shadow:var(--sombra)}
.anuncio img{height:100%;width:auto;display:block}
@media(max-width:600px){ .anuncio{height:220px} }

/* ---------- Flyers de promos (imágenes tal cual) ---------- */
.promo-flyers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.1rem;max-width:1000px;margin:0 auto 2rem;
}
.promo-flyers a{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--borde);
  transition:transform .2s,border-color .2s,box-shadow .2s;background:var(--panel)}
.promo-flyers a:hover{transform:translateY(-4px);border-color:var(--borde-fuerte);box-shadow:var(--sombra)}
.promo-flyers img{width:100%;height:auto;display:block}

/* ---------- PÁGINA DE CATEGORÍA (grilla completa) ---------- */
.cat-page{padding-top:6.5rem;padding-bottom:1rem}
.volver{display:inline-flex;align-items:center;gap:.4rem;color:var(--gris);text-decoration:none;font-weight:600;font-size:.88rem;margin-bottom:1.4rem}
.volver:hover{color:var(--texto)}
.cat-hero{
  display:flex;align-items:center;gap:1.1rem;margin-bottom:2rem;
  border:1px solid var(--borde);border-radius:20px;padding:1.6rem 1.8rem;position:relative;overflow:hidden;
}
.cat-hero::before{content:"";position:absolute;inset:0;opacity:.16;z-index:0}
.cat-hero.cat-perfumes::before{background:linear-gradient(120deg,#ff3b3b,#ff6a8a)}
.cat-hero.cat-bebidas::before{background:linear-gradient(120deg,#ffb703,#ff6a1a)}
.cat-hero.cat-vapes::before{background:linear-gradient(120deg,#ff6a1a,#ff3b3b)}
.cat-hero>*{position:relative;z-index:1}
.cat-hero .cat-icon{width:64px;height:64px;font-size:2rem}
.cat-hero h1{font-size:clamp(2rem,6vw,3rem)}
.cat-hero p{color:var(--gris);margin-top:.2rem}
.grid-full{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.1rem;max-width:1150px;margin:0 auto}
.grid-full .prod{width:auto;flex:none;margin-right:0}

/* ---------- FRANJA / DELIVERY ---------- */
.franja{
  max-width:none;text-align:center;padding:3.4rem 5vw;
  background:linear-gradient(120deg,rgba(195,64,73,.12),rgba(212,165,58,.08));
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
}
.franja .big{font-size:clamp(1.4rem,4vw,2.3rem);font-weight:800;max-width:22ch;margin:0 auto}
.franja .big .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.franja p{color:var(--gris);margin-top:.6rem}

/* ---------- INFO / HORARIOS / MAPA ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-bottom:1.4rem}
.info-card{background:var(--panel);border:1px solid var(--borde);border-radius:16px;padding:1.6rem}
.info-card h3{font-size:1.05rem;margin-bottom:1rem;display:flex;align-items:center;gap:.55rem}
.info-card h3 svg{width:22px;height:22px;color:var(--cyan)}
.horario{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px dashed var(--borde);font-size:.9rem}
.horario:last-child{border-bottom:none}
.horario span:last-child{color:var(--lima);font-weight:700}
.info-card p{color:var(--gris);font-size:.92rem}
.info-card a{color:var(--cyan);font-weight:600;text-decoration:none}
.delivery-badge{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
  background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--lima);
  padding:.5rem .9rem;border-radius:999px;font-weight:700;font-size:.85rem;
}
.mapa{border-radius:16px;overflow:hidden;border:1px solid var(--borde)}
.mapa iframe{display:block;width:100%;height:360px;border:0}

/* ---------- ACERCA / NOSOTROS ---------- */
.nosotros{display:grid;grid-template-columns:1.1fr 1fr;gap:2.2rem;align-items:center}
@media(max-width:800px){.nosotros{grid-template-columns:1fr}}
.nosotros h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:1rem}
.nosotros .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nosotros p{color:var(--gris);margin-bottom:1rem}
.stats{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem}
.stat b{display:block;font-size:1.8rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--gris-2);font-size:.82rem}
.nosotros-foto{
  aspect-ratio:4/3;border-radius:20px;border:1px solid var(--borde);position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--panel-2),var(--panel));display:grid;place-items:center;
}
.nosotros-foto img{width:100%;height:100%;object-fit:cover}
.nosotros-foto .emoji-bg{font-size:6rem;opacity:.8}
.nosotros-foto .hint{position:absolute;bottom:.7rem;left:.7rem;right:.7rem;font-size:.72rem;color:var(--gris-2);text-align:center}

/* ---------- TESTIMONIOS ---------- */
.testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.2rem}
.testi{background:var(--panel);border:1px solid var(--borde);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.testi-top{display:flex;align-items:center;gap:.8rem}
.testi-foto{width:52px;height:52px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:1.4rem;flex:none;overflow:hidden}
.testi-foto img{width:100%;height:100%;object-fit:cover}
.testi-top b{display:block;font-size:.95rem}
.testi-top small{color:var(--gris-2);font-size:.8rem}
.estrellas{color:var(--oro);letter-spacing:.15em;font-size:.9rem}
.testi p{color:var(--texto);font-style:italic;font-size:.92rem}

/* ---------- OFERTAS (flyers) ---------- */
.ofertas-grid{
  columns:300px;column-gap:1rem;
}
@media(min-width:1000px){.ofertas-grid{column-count:4}}
.oferta-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--texto);
  background:var(--panel);border:1px solid var(--borde);border-radius:18px;overflow:hidden;
  box-shadow:var(--sombra);
  transition:transform .2s,border-color .2s;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1rem;
}
.oferta-card:hover{transform:translateY(-5px);border-color:var(--borde-fuerte)}
.oferta-img{display:block;background:#000;line-height:0;overflow:hidden}
.oferta-img img{
  width:100%;height:auto;display:block;
  animation:oferta-mov 9s ease-in-out infinite;
}
/* movimiento suave (zoom/pan lento) de los flyers */
@keyframes oferta-mov{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.07)}
}
.oferta-card:nth-child(2n) .oferta-img img{animation-duration:11s;animation-delay:-2s}
.oferta-card:nth-child(3n) .oferta-img img{animation-duration:8s;animation-delay:-4s}
.oferta-card:hover .oferta-img img{animation-play-state:paused;transform:scale(1.09);transition:transform .4s}
.oferta-info{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.oferta-info b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.02rem;line-height:1.2}
.oferta-info>span{color:var(--gris-2);font-size:.85rem}
.oferta-cta{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;
  color:var(--verde-wsp);font-weight:700;font-size:.86rem;
}
.oferta-cta svg{width:18px;height:18px;fill:var(--verde-wsp)}
/* Producto destacado (con carrito) dentro de la grilla de Ofertas */
.oferta-prod{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1rem}
.oferta-prod .prod{width:auto;flex:none;margin-right:0}

/* ---------- CTA FINAL ---------- */
.cta-final{text-align:center}
.cta-final .caja{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--panel);border-radius:24px;padding:3.4rem 2rem;box-shadow:var(--sombra);
  border:1px solid var(--borde);
}
/* foto de productos de fondo */
.cta-final .caja::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('foto-productos.jpg') center/cover no-repeat;
  filter:brightness(.55) saturate(.95);
}
.cta-final .caja::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(8,8,12,.55), rgba(8,8,12,.8));
}
.cta-final h2{font-size:clamp(1.6rem,4.5vw,2.6rem);color:#fff}
.cta-final p{color:rgba(255,255,255,.92);max-width:44ch;margin:.6rem auto 1.6rem}
.cta-final .btn-blanco{background:#fff;color:#1a1a20}

/* ---------- FOOTER ---------- */
.pie{border-top:1px solid var(--borde);text-align:center;padding:2.4rem 5vw;color:var(--gris-2);font-size:.83rem}
.pie .marca{font-size:1.15rem;font-weight:800;margin-bottom:.5rem}
.pie .marca .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pie .redes{display:flex;gap:.6rem;justify-content:center;margin:.9rem 0}
.pie .redes .soc{width:38px;height:38px;border-radius:11px}
.pie .redes .soc svg{width:19px;height:19px}
.pie .aviso{margin-top:.7rem;font-size:.75rem;color:var(--gris-2)}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wsp-float{
  position:fixed;bottom:1.3rem;left:1.3rem;z-index:90;width:58px;height:58px;border-radius:50%;
  background:var(--verde-wsp);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.5);
  transition:transform .15s;text-decoration:none;
}
.wsp-float:hover{transform:scale(1.08)}
.wsp-float svg{width:32px;height:32px;fill:#fff}

/* ======================================================
   CARRITO (drawer lateral)
   ====================================================== */
.overlay{
  position:fixed;inset:0;background:rgba(6,4,16,.6);backdrop-filter:blur(2px);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .3s;
}
.overlay.open{opacity:1;pointer-events:auto}
.cart{
  position:fixed;top:0;right:0;bottom:0;width:min(410px,92vw);z-index:210;
  background:var(--fondo-2);border-left:1px solid var(--borde);
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.5);
}
.cart.open{transform:none}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.3rem;border-bottom:1px solid var(--borde);
}
.cart-head h3{font-size:1.2rem;display:flex;align-items:center;gap:.5rem}
.cart-close{background:none;border:none;color:var(--gris);cursor:pointer;font-size:1.6rem;line-height:1;padding:.2rem}
.cart-close:hover{color:var(--texto)}
.cart-body{flex:1;overflow-y:auto;padding:1rem 1.3rem}
.cart-empty{text-align:center;color:var(--gris-2);padding:3rem 1rem}
.cart-empty .em{font-size:3rem;margin-bottom:.6rem}
.ci{display:flex;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--borde)}
.ci .ci-emoji{width:48px;height:48px;border-radius:12px;background:var(--panel);display:grid;place-items:center;font-size:1.5rem;flex:none;overflow:hidden}
.ci .ci-emoji img{width:100%;height:100%;object-fit:cover}
.ci-info{flex:1;min-width:0}
.ci-info b{font-size:.9rem;display:block}
.ci-info .ci-precio{color:var(--oro);font-weight:700;font-size:.9rem}
.ci-ctrl{display:flex;align-items:center;gap:.5rem;margin-top:.4rem}
.ci-ctrl button{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--borde);background:var(--panel);
  color:var(--texto);cursor:pointer;font-size:1rem;line-height:1;display:grid;place-items:center;
}
.ci-ctrl button:hover{border-color:var(--magenta)}
.ci-ctrl span{min-width:22px;text-align:center;font-weight:700}
.ci-quitar{background:none;border:none;color:var(--gris-2);cursor:pointer;font-size:.76rem;margin-left:auto;text-decoration:underline}
.ci-quitar:hover{color:var(--magenta)}

.cart-foot{border-top:1px solid var(--borde);padding:1.1rem 1.3rem 1.4rem;background:var(--panel)}
.cart-campos{display:grid;gap:.6rem;margin-bottom:.9rem}
.cart-campos input,.cart-campos textarea,.cart-campos select{
  width:100%;background:var(--fondo);border:1px solid var(--borde);border-radius:10px;
  padding:.6rem .75rem;color:var(--texto);font-family:inherit;font-size:.88rem;resize:vertical;
}
.cart-campos input:focus,.cart-campos textarea:focus,.cart-campos select:focus{outline:none;border-color:var(--magenta)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.9rem;font-size:1.05rem}
.cart-total b{font-size:1.5rem;color:var(--oro)}
.cart-checkout{
  width:100%;border:none;cursor:pointer;background:var(--verde-wsp);color:#04240f;
  font-weight:800;font-size:1rem;padding:.95rem;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .12s;
}
.cart-checkout:hover{transform:translateY(-2px)}
.cart-checkout:disabled{opacity:.45;cursor:not-allowed;transform:none}
.cart-checkout svg{width:22px;height:22px;fill:#04240f}
.cart-nota{text-align:center;color:var(--gris-2);font-size:.74rem;margin-top:.6rem}

/* toast */
.toast{
  position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(120%);
  background:var(--panel);border:1px solid var(--borde-fuerte);color:var(--texto);
  padding:.8rem 1.3rem;border-radius:999px;z-index:220;font-weight:600;font-size:.9rem;
  box-shadow:var(--sombra);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:.5rem;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast .em{color:var(--lima)}

/* aparición scroll */
.rev{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rev.vis{opacity:1;transform:none}