/* ============================================================
   PUFF CITY — Stylesheet Principal
   Estética: oscuro / neón (rosa · morado · cian)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  --neon-pink:    #ff2d78;
  --neon-purple:  #b947ff;
  --neon-cyan:    #00e5ff;
  --neon-green:   #39ff14;
  --neon-orange:  #ff7c00;

  --dark-bg:      #080810;
  --dark-layer:   #0d0d1f;
  --dark-card:    #11112a;
  --dark-card-2:  #161635;

  --text-1: #f0f0f8;
  --text-2: #9090b8;
  --text-3: #606080;

  --border-dim:   rgba(185,71,255,.18);
  --border-neon:  rgba(185,71,255,.55);

  --glow-pink:    0 0 12px rgba(255,45,120,.7),  0 0 30px rgba(255,45,120,.3);
  --glow-purple:  0 0 12px rgba(185,71,255,.7),  0 0 30px rgba(185,71,255,.3);
  --glow-cyan:    0 0 12px rgba(0,229,255,.7),   0 0 30px rgba(0,229,255,.3);

  --radius: 10px;
  --transition: .25s ease;
  --header-h: 68px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Rajdhani', sans-serif;
  background: var(--dark-bg);
  color: var(--text-1);
  overflow-x: hidden;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ── Animaciones ── */
@keyframes neonPulse {
  0%,100% { text-shadow: 0 0 8px currentColor, 0 0 20px currentColor; }
  50%      { text-shadow: 0 0 4px currentColor, 0 0 10px currentColor; }
}
@keyframes borderPulse {
  0%,100% { box-shadow: var(--glow-pink); }
  50%      { box-shadow: 0 0 6px rgba(255,45,120,.4), 0 0 15px rgba(255,45,120,.15); }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes scanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* ── Helpers ── */
.neon-pink   { color:var(--neon-pink);   text-shadow: var(--glow-pink);   }
.neon-purple { color:var(--neon-purple); text-shadow: var(--glow-purple); }
.neon-cyan   { color:var(--neon-cyan);   text-shadow: var(--glow-cyan);   }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.fade-in { opacity:0; transform:translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity:1; transform:none; }
.section-tag {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--neon-purple);
  border: 1px solid var(--border-neon);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}
.section-sub {
  color: var(--text-2);
  font-size: 1.05rem;
  max-width: 520px;
}

/* ============================================================
   AGE VERIFICATION MODAL
   ============================================================ */
#age-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4,4,12,.97);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#age-overlay.hidden { display: none; }

.age-box {
  background: var(--dark-card);
  border: 1px solid var(--border-neon);
  border-radius: 18px;
  padding: 52px 44px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: var(--glow-purple), inset 0 0 60px rgba(185,71,255,.04);
}
.age-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.9rem;
  font-weight: 900;
  margin-bottom: 8px;
}
.age-logo span { color: var(--neon-pink); }
.age-divider {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
  margin: 18px auto;
  border-radius: 2px;
}
.age-box h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.age-box p {
  color: var(--text-2);
  font-size: .95rem;
  margin-bottom: 32px;
  line-height: 1.5;
}
.age-actions { display: flex; gap: 14px; justify-content: center; }
.btn-age-yes, .btn-age-no {
  padding: 13px 32px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  border: none;
  transition: var(--transition);
}
.btn-age-yes {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #fff;
}
.btn-age-yes:hover { box-shadow: var(--glow-pink); transform: translateY(-2px); }
.btn-age-no {
  background: transparent;
  border: 1px solid var(--border-dim);
  color: var(--text-2);
}
.btn-age-no:hover { border-color: var(--text-3); color: var(--text-1); }

.age-denied { display: none; flex-direction: column; align-items: center; gap: 16px; }
.age-denied.show { display: flex; }
.age-question.hide { display: none; }
.age-denied-icon { font-size: 3rem; }
.age-denied h2 { font-family:'Orbitron',sans-serif; font-size:1.1rem; }
.age-denied p { color:var(--text-2); font-size:.9rem; }
.age-denied a { color:var(--neon-cyan); text-decoration:underline; }

/* ============================================================
   HEADER
   ============================================================ */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 4vw, 60px);
  transition: background .3s ease, box-shadow .3s ease;
}
#header.scrolled {
  background: rgba(8,8,16,.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(185,71,255,.15);
}
.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}
.logo img { height: 40px; width: auto; }
.logo-text span { color: var(--neon-pink); }

.nav-desktop {
  display: flex;
  gap: 6px;
  list-style: none;
}
.nav-desktop a {
  font-family: 'Orbitron', sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--text-2);
  transition: var(--transition);
}
.nav-desktop a:hover { color: var(--text-1); background: rgba(255,255,255,.04); }
.nav-desktop a.active { color: var(--neon-pink); }

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-wa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  background: #25d366;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-wa-header:hover { background: #1fb959; box-shadow: 0 0 14px rgba(37,211,102,.5); transform: translateY(-1px); }
.btn-wa-header svg { width:18px; height:18px; fill:#fff; flex-shrink:0; }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: 7px;
  padding: 8px;
  color: var(--text-1);
  transition: var(--transition);
}
.menu-toggle:hover { border-color: var(--neon-purple); }
.menu-toggle svg { width:20px; height:20px; fill:currentColor; display:block; }

/* Mobile nav */
#mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h); left:0; right:0;
  background: rgba(8,8,16,.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-dim);
  padding: 16px 24px 24px;
  z-index: 999;
  flex-direction: column;
  gap: 4px;
}
#mobile-nav.open { display: flex; }
#mobile-nav a {
  padding: 13px 16px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--text-2);
  transition: var(--transition);
}
#mobile-nav a:hover { color:var(--neon-pink); background: rgba(255,45,120,.06); }
#mobile-nav .btn-wa-header { margin-top: 12px; justify-content:center; }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 40px) clamp(16px,6vw,80px) 80px;
}

/* Brick texture + dark overlay */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #140a0a;
  background-image:
    /* Mortar horizontal */
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 29px,
      rgba(0,0,0,.55) 29px, rgba(0,0,0,.55) 31px
    ),
    /* Mortar vertical even rows */
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 79px,
      rgba(0,0,0,.55) 79px, rgba(0,0,0,.55) 81px
    );
  background-size: 80px 31px, 80px 62px;
  opacity: .6;
}
/* Dark gradient overlay */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 20% 50%, rgba(185,71,255,.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 60%, rgba(255,45,120,.10) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(8,8,16,.5) 0%, rgba(8,8,16,.85) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin-bottom: 22px;
}
.hero-tag::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
}
.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .04em;
  margin-bottom: 20px;
}
.hero-title .line-1 { display: block; color: var(--text-1); }
.hero-title .line-2 {
  display: block;
  color: var(--neon-pink);
  text-shadow: var(--glow-pink);
  animation: neonPulse 3s ease-in-out infinite;
}
.hero-desc {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Buttons — primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  border: none;
  transition: var(--transition);
  cursor: pointer;
}
.btn-primary:hover {
  box-shadow: var(--glow-pink);
  transform: translateY(-3px);
}
.btn-primary svg { width:18px; height:18px; fill:currentColor; flex-shrink:0; }

/* Buttons — outline */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--border-neon);
  color: var(--text-1);
  font-family: 'Orbitron', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  transition: var(--transition);
  cursor: pointer;
}
.btn-outline:hover {
  border-color: var(--neon-purple);
  color: var(--neon-purple);
  box-shadow: var(--glow-purple);
  transform: translateY(-3px);
}

/* Hero stats */
.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 52px;
  flex-wrap: wrap;
}
.stat-item { text-align: left; }
.stat-number {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--neon-pink);
  text-shadow: var(--glow-pink);
  line-height: 1;
}
.stat-label {
  font-size: .8rem;
  color: var(--text-2);
  margin-top: 4px;
  letter-spacing: .08em;
}

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.section {
  padding: 90px clamp(16px,6vw,80px);
  position: relative;
}
.section--dark { background: var(--dark-layer); }

/* ============================================================
   PRODUCTOS
   ============================================================ */
#productos .section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 44px;
}

/* Buscador */
.search-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-top: 28px;
}
.search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: var(--text-3);
  pointer-events: none;
}
#product-search {
  width: 100%;
  padding: 12px 16px 12px 44px;
  background: var(--dark-card);
  border: 1px solid var(--border-dim);
  border-radius: 9px;
  color: var(--text-1);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  transition: var(--transition);
  outline: none;
}
#product-search::placeholder { color: var(--text-3); }
#product-search:focus { border-color: var(--neon-purple); box-shadow: 0 0 0 3px rgba(185,71,255,.12); }

/* Category tabs */
.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.cat-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-2);
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: var(--transition);
}
.cat-btn:hover { border-color: var(--neon-purple); color: var(--neon-purple); }
.cat-btn.active {
  background: linear-gradient(135deg, rgba(255,45,120,.18), rgba(185,71,255,.18));
  border-color: var(--neon-pink);
  color: var(--neon-pink);
}

/* Product grid */
#products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

/* Product card */
.product-card {
  background: var(--dark-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--neon-purple);
  box-shadow: 0 8px 30px rgba(185,71,255,.18), 0 2px 8px rgba(0,0,0,.4);
}

/* Product image area */
.product-img-wrap {
  position: relative;
  background: var(--dark-card-2);
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
}
.product-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: .35;
}
.product-placeholder svg { width:48px; height:48px; fill: var(--text-2); }
.product-placeholder span {
  font-family: 'Orbitron', sans-serif;
  font-size: .55rem;
  letter-spacing: .15em;
  color: var(--text-2);
}

/* Status badges */
.badge-available, .badge-sold-out {
  position: absolute;
  top: 10px; right: 10px;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge-available {
  background: rgba(57,255,20,.12);
  border: 1px solid rgba(57,255,20,.4);
  color: var(--neon-green);
}
.badge-sold-out {
  background: rgba(255,45,120,.12);
  border: 1px solid rgba(255,45,120,.35);
  color: var(--neon-pink);
}

/* Brand tag on card */
.brand-chip {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: .55rem;
  letter-spacing: .12em;
  padding: 3px 9px;
  border-radius: 10px;
  margin-bottom: 6px;
}

/* Product info */
.product-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-1);
  flex: 1;
}
.product-puffs {
  font-size: .78rem;
  color: var(--text-3);
  letter-spacing: .05em;
}
.product-price {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--neon-cyan);
  margin: 6px 0 12px;
}
.product-price sup { font-size: .65rem; margin-right: 2px; vertical-align: top; margin-top: 4px; }

/* Consultar button */
.btn-consultar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  background: #25d366;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  border: none;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.btn-consultar:hover {
  background: #1fb959;
  box-shadow: 0 0 18px rgba(37,211,102,.5);
  transform: translateY(-1px);
}
.btn-consultar svg { width:16px; height:16px; fill:#fff; flex-shrink:0; }

/* Sold-out card state */
.product-card.sold-out .product-img-wrap { filter: grayscale(.6); }
.product-card.sold-out .product-name { opacity: .7; }

/* Empty state */
.products-empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  color: var(--text-3);
}
.products-empty svg { width:56px; height:56px; fill:var(--text-3); margin:0 auto 16px; }
.products-empty h3 { font-family:'Orbitron',sans-serif; font-size:1rem; color:var(--text-2); margin-bottom:8px; }

/* ============================================================
   PROMOCIONES
   ============================================================ */
#promociones {
  background: var(--dark-layer);
}
.promo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.promo-card {
  background: var(--dark-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: var(--transition);
}
.promo-card:hover { border-color: var(--neon-pink); box-shadow: 0 4px 20px rgba(255,45,120,.12); }
.promo-card--ig {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 28px;
  background: linear-gradient(135deg, rgba(185,71,255,.08), rgba(255,45,120,.06));
  border-color: rgba(185,71,255,.3);
}
.promo-ig-icon {
  width: 70px; height: 70px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.promo-ig-icon svg { width:36px; height:36px; fill:#fff; }
.promo-ig-text h3 { font-family:'Orbitron',sans-serif; font-size:1rem; margin-bottom:6px; }
.promo-ig-text p { color:var(--text-2); font-size:.92rem; margin-bottom:16px; }
.btn-ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  transition: var(--transition);
}
.btn-ig:hover { box-shadow: 0 4px 18px rgba(220,39,67,.45); transform:translateY(-2px); }

.promo-card h3 { font-family:'Orbitron',sans-serif; font-size:1rem; margin-bottom:8px; }
.promo-card p { color:var(--text-2); font-size:.9rem; line-height:1.5; }
.promo-icon { font-size:2.2rem; margin-bottom:14px; }

/* QR de pago */
.promo-card--qr .qr-img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin: 16px auto 0;
  border-radius: 10px;
  border: 1px solid rgba(255,45,120,.3);
  background: #fff;
  padding: 6px;
}

/* ============================================================
   NOSOTROS
   ============================================================ */
#nosotros .nosotros-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.nosotros-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}
.feature-item {
  background: var(--dark-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 20px 18px;
  transition: var(--transition);
}
.feature-item:hover { border-color: var(--neon-purple); transform: translateY(-2px); }
.feature-icon { font-size: 1.6rem; margin-bottom: 10px; }
.feature-item h4 { font-family:'Orbitron',sans-serif; font-size:.78rem; margin-bottom:4px; }
.feature-item p { color:var(--text-2); font-size:.85rem; }

.nosotros-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nos-card-main {
  background: var(--dark-card);
  border: 1px solid var(--border-neon);
  border-radius: 18px;
  padding: 44px 36px;
  text-align: center;
  box-shadow: var(--glow-purple);
  animation: float 5s ease-in-out infinite;
}
.nos-card-main .big-icon { font-size: 4rem; margin-bottom: 16px; }
.nos-card-main h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--neon-pink);
  text-shadow: var(--glow-pink);
}
.nos-card-main p { color:var(--text-2); font-size:.9rem; margin-top:8px; }

/* ============================================================
   CONTACTO
   ============================================================ */
#contacto {
  background: var(--dark-layer);
}
.contacto-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-info { display:flex; flex-direction:column; gap:20px; }
.info-block {
  background: var(--dark-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.info-icon {
  width: 42px; height: 42px;
  background: rgba(185,71,255,.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}
.info-block h4 { font-family:'Orbitron',sans-serif; font-size:.75rem; color:var(--text-2); margin-bottom:4px; }
.info-block p, .info-block a { font-size:.95rem; color:var(--text-1); }
.info-block a { transition:var(--transition); }
.info-block a:hover { color:var(--neon-cyan); }

/* Horarios */
.hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: .88rem;
}
.hours-grid .day { color:var(--text-2); }
.hours-grid .time { color:var(--text-1); font-weight:600; }

/* Social buttons */
.social-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.btn-social {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  border: 1px solid var(--border-dim);
  color: var(--text-1);
  background: var(--dark-card);
  transition: var(--transition);
  cursor: pointer;
}
.btn-social svg { width:18px; height:18px; flex-shrink:0; }
.btn-social--wa { border-color: rgba(37,211,102,.35); }
.btn-social--wa:hover { background:#25d366; border-color:#25d366; box-shadow:0 0 16px rgba(37,211,102,.4); }
.btn-social--ig { border-color: rgba(220,39,67,.35); }
.btn-social--ig:hover { background: linear-gradient(135deg,#f09433,#dc2743,#bc1888); border-color:transparent; box-shadow:0 0 16px rgba(220,39,67,.4); }
.btn-social--tt { border-color: rgba(0,229,255,.3); }
.btn-social--tt:hover { background:#010101; border-color:#00e5ff; box-shadow:0 0 14px rgba(0,229,255,.35); }
.btn-social--tt svg { fill:#00e5ff; }

/* Map */
.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-dim);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.map-wrap iframe {
  width: 100%;
  height: 380px;
  display: block;
  filter: invert(.9) hue-rotate(180deg) saturate(.8) brightness(.85);
}
.map-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid var(--border-dim);
  color: var(--text-2);
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  letter-spacing: .1em;
  transition: var(--transition);
}
.map-link:hover { color:var(--neon-cyan); border-color:var(--neon-cyan); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: #050508;
  border-top: 1px solid var(--border-dim);
  padding: 36px clamp(16px,6vw,80px) 28px;
}
.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.footer-brand .logo { margin-bottom: 10px; }
.footer-brand p { color:var(--text-3); font-size:.85rem; max-width: 260px; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a {
  color:var(--text-3);
  font-size:.82rem;
  transition:var(--transition);
}
.footer-links a:hover { color:var(--neon-pink); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.04);
  font-size: .78rem;
  color: var(--text-3);
}
.footer-18 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--neon-pink);
  border: 1px solid rgba(255,45,120,.3);
  padding: 4px 10px;
  border-radius: 6px;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 60px) clamp(16px,6vw,60px) 100px;
}
.legal-page h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 6px;
}
.legal-page .updated {
  color: var(--text-3);
  font-size: .82rem;
  margin-bottom: 40px;
}
.legal-page h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: .95rem;
  color: var(--neon-purple);
  margin: 32px 0 10px;
  letter-spacing: .06em;
}
.legal-page p, .legal-page li {
  color: var(--text-2);
  font-size: .97rem;
  line-height: 1.75;
  margin-bottom: 10px;
}
.legal-page ul { padding-left: 20px; }
.legal-page strong { color: var(--text-1); }
.legal-page a { color:var(--neon-cyan); text-decoration:underline; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  color: var(--text-2);
  font-family: 'Orbitron', sans-serif;
  font-size: .7rem;
  letter-spacing: .1em;
  transition: var(--transition);
}
.legal-back:hover { color: var(--neon-pink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .promo-inner { grid-template-columns: 1fr; }
  .promo-card--ig { flex-direction: column; gap: 20px; }
  #nosotros .nosotros-inner { grid-template-columns: 1fr; }
  .nosotros-visual { display:none; }
  .contacto-inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --header-h: 62px; }
  .nav-desktop { display: none; }
  .btn-wa-header { display: none; }
  .menu-toggle { display: flex; }

  .hero-title { font-size: clamp(2rem, 10vw, 3.5rem); }
  .hero-stats { gap: 20px; }
  .stat-number { font-size: 1.5rem; }

  .nosotros-features { grid-template-columns: 1fr; }

  #products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .product-img-wrap { height: 140px; }

  .footer-inner { flex-direction: column; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .btn-primary, .btn-outline { justify-content: center; }
  .category-tabs { gap: 6px; }
  .cat-btn { font-size: .58rem; padding: 7px 12px; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-bg); }
::-webkit-scrollbar-thumb { background: var(--border-neon); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-purple); }