/* ============================================================================
   MINIMAL MONO DESIGN SYSTEM — Polarx
   Paleta: Blanco + Negro puro, minimalista y profesional
   Filosofía: Alto contraste, líneas limpias, sin ruido visual
   ============================================================================ */

/* ==========================================================================
   1. VARIABLES & DESIGN TOKENS
   ========================================================================== */
:root {
  /* ── Escala de Grises (reemplaza la escala "az" azul) ── */
  --az-50:  #fafafa;
  --az-100: #f0f0f0;
  --az-200: #dadada;
  --az-300: #b0b0b0;
  --az-400: #4a4a4a;
  --az-500: #1a1a1a;
  --az-600: #111111;
  --az-700: #0a0a0a;
  --az-800: #050505;
  --az-900: #000000;

  /* ── Superficies ── */
  --surface-page:     #ffffff;
  --surface-card:     #ffffff;
  --surface-elevated: rgba(255,255,255,0.97);
  --surface-sunken:   #f5f5f5;

  /* ── Glass Tokens (sutiles, en blanco/negro) ── */
  --glass-bg:          rgba(255,255,255,0.7);
  --glass-bg-heavy:    rgba(255,255,255,0.9);
  --glass-bg-light:    rgba(255,255,255,0.35);
  --glass-border:      rgba(0,0,0,0.10);
  --glass-border-hover: rgba(0,0,0,0.35);
  --glass-blur:        blur(20px) saturate(100%);
  --glass-blur-heavy:  blur(40px) saturate(100%);
  --glass-shadow:      0 8px 28px rgba(0,0,0,0.08);
  --glass-shadow-lg:   0 16px 44px rgba(0,0,0,0.14);
  --glass-inset:       inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.05);

  /* ── Estados (se conservan por significado funcional) ── */
  --rojo:       #e74c3c;
  --rojo-dark:  #c0392b;
  --verde:      #1a8c4e;
  --verde-wsp:  #25d366;

  /* ── Texto ── */
  --text-primary:   #111111;
  --text-secondary: #555555;
  --text-muted:     #9a9a9a;

  /* ── Motion ── */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth: cubic-bezier(0.25,1,0.5,1);
  --t-fast: 0.2s;
  --t-mid:  0.35s;
  --t-slow: 0.5s;

  /* ── Radii ── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 50px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body {
  font-family: 'Lato',sans-serif;
  background: var(--surface-page);
  color: var(--text-primary);
  padding-top: 90px;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.modal-open { overflow:hidden; height:100vh }

h1,h2,h3,h4,h5,h6 { font-family:'Cinzel',serif }
img { content-visibility:auto; contain-intrinsic-size:200px 200px }
button,a,input,select,textarea,[role="button"],[onclick] { touch-action:manipulation }
a { text-decoration:none; color:inherit }

/* ── Scrollbar Premium ── */
::-webkit-scrollbar { width:8px; height:8px }
::-webkit-scrollbar-track { background:var(--az-50) }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,var(--az-200),var(--az-400),var(--az-200));
  border-radius:4px; border:2px solid var(--az-100);
}
::-webkit-scrollbar-thumb:hover { background:var(--az-400) }

/* ── Selection ── */
::selection { background:rgba(20,20,20,0.2); color:var(--text-primary) }

/* ==========================================================================
   3. MIXINS REUTILIZABLES (como clases utilitarias)
   ========================================================================== */

/* Superficie de vidrio estándar */
.glass,
.top-ticker, nav, .floating-cart-panel, .modal-content,
.lista-resultados, .custom-alert-box, .toast {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* Superficie de vidrio ligera */
.glass-light,
.btn-icon-nav, .btn-inicio, .cerrar-modal, .btn-favorito-modal,
.btn-floating-top, .cerrar-flotante-fab, .recom-arrow {
  background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(0,0,0,0.30));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), var(--glass-inset);
}

/* ==========================================================================
   4. TOP TICKER
   ========================================================================== */
.top-ticker {
  position:fixed; top:0; left:0; width:100%; height:35px;
  z-index:800; display:flex; justify-content:center; align-items:center;
  border-radius:0;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(0,0,0,0.06);
  box-shadow:0 1px 8px rgba(0,0,0,0.03);
}
.top-ticker,.top-ticker * { user-select:none }

.ticker-wrapper {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:800px; padding:0 15px;
}

.ticker-text {
  color:var(--text-primary); font-size:0.75rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; text-align:center; width:100%;
  cursor:pointer; transition:opacity var(--t-mid) ease;
}

.ticker-phone {
  background:linear-gradient(135deg,var(--az-500),var(--az-400));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-weight:900; padding:2px 6px; border-radius:4px;
  text-decoration:underline; text-decoration-color:var(--az-400);
  text-decoration-thickness:2px; text-underline-offset:3px;
  transition:all 0.3s ease; cursor:pointer;
}
.ticker-phone::after { content:' 📱'; -webkit-text-fill-color:initial }
.ticker-phone:hover { filter:brightness(1.3); transform:scale(1.05) }

.ticker-control {
  background:none; border:none; color:var(--az-300); font-size:1.2rem;
  cursor:pointer; padding:0 4px; display:flex; align-items:center; justify-content:center;
  transition:all 0.3s var(--ease-spring);
}
.ticker-control:hover { color:var(--text-primary); transform:scale(1.35) }

/* ==========================================================================
   5. NAV
   ========================================================================== */
nav {
  position:fixed; top:35px; left:0; width:100%;
  z-index:2200; padding:15px 25px;
  transition:all var(--t-fast) ease; border-radius:0;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.5);
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}
nav:hover { background:rgba(255,255,255,0.85) }
nav,nav * { user-select:none }

.nav-content {
  display:flex; justify-content:space-between; align-items:center;
  gap:25px; max-width:1400px; margin:0 auto;
}

/* ── Buscador Cápsula ── */
.buscador-container { position:relative; flex-grow:1; max-width:600px; margin:0 auto }
.input-wrapper { position:relative; width:100% }

#input-busqueda {
  width:100%; padding:12px 45px 12px 20px;
  background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.1);
  border-radius:var(--r-xl); color:var(--text-primary); font-size:0.95rem;
  letter-spacing:0.5px; transition:all var(--t-fast) ease;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#input-busqueda:focus {
  background:rgba(255,255,255,0.95); border-color:rgba(0,0,0,0.2);
  box-shadow:0 0 0 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  outline:none;
}
#input-busqueda::placeholder { color:var(--az-300) }

.icono-lupa {
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  color:var(--az-300); font-size:1.2rem; pointer-events:none;
  transition:color var(--t-fast) ease;
}
#input-busqueda:focus + .icono-lupa { color:var(--az-500) }

/* ── Dropdown Resultados ── */
.lista-resultados {
  display:none; position:absolute; top:55px; left:0; width:100%;
  border-radius:var(--r-md); z-index:3000; max-height:400px; overflow-y:auto;
  animation:slideDown 0.2s ease-out;
  contain:layout style; will-change:transform,opacity;
}

@keyframes slideDown {
  from { opacity:0; transform:translateY(-10px) }
  to   { opacity:1; transform:translateY(0) }
}

.resultado-item {
  display:flex; align-items:center; padding:12px 15px;
  border-bottom:1px solid rgba(0,0,0,0.15); cursor:pointer;
  gap:10px; contain:layout style; transition:background 0.15s ease-out;
}
.resultado-item:last-child { border-bottom:none }
.resultado-item:hover { background:rgba(0,0,0,0.05) }
.resultado-item:active { background:rgba(0,0,0,0.09) }
.resultado-item.resultado-agotado { opacity:0.65 }

.badge-agotado-busqueda, .badge-cotizar-busqueda {
  padding:4px 8px; border-radius:10px; font-size:0.55rem;
  font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  white-space:nowrap; flex-shrink:0;
}
.badge-agotado-busqueda {
  background:linear-gradient(145deg,var(--az-400),var(--az-600)); color:#fff;
  border:1px solid rgba(0,0,0,0.4);
}
.badge-cotizar-busqueda {
  background:rgba(20,20,20,0.12); color:var(--az-500);
  border:1px solid rgba(20,20,20,0.4);
}

.info-busqueda { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; overflow:hidden }
.nombre-busqueda { color:var(--text-primary); font-weight:700; font-size:0.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none }
.modelo-busqueda { color:var(--text-secondary); font-size:0.7rem; font-style:italic; pointer-events:none }

/* Resaltado de producto encontrado */
.producto-resaltado { animation:resaltarProducto 2s ease-out; position:relative; z-index:10 }
@keyframes resaltarProducto {
  0%   { transform:scale(1); box-shadow:0 0 0 0 rgba(20,20,20,0.7) }
  20%  { transform:scale(1.03); box-shadow:0 0 30px 10px rgba(20,20,20,0.4) }
  100% { transform:scale(1); box-shadow:var(--glass-shadow) }
}

/* ── Botones Nav ── */
.nav-buttons { display:flex; gap:20px; align-items:center }

.btn-icon-nav, .btn-inicio {
  color:var(--az-500); cursor:pointer; display:flex; align-items:center; justify-content:center;
  border-radius:50%; width:48px; height:48px; min-width:48px; min-height:48px;
  max-width:48px; max-height:48px; padding:0; margin:0; flex-shrink:0;
  font-size:1.8rem; position:relative; overflow:visible;
  transition:transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.btn-inicio { font-size:1.6rem }

@media (hover:hover) and (pointer:fine) {
  .btn-icon-nav:hover, .btn-inicio:hover {
    background:linear-gradient(145deg,rgba(255,255,255,0.70),rgba(10,10,10,0.45));
    border-color:var(--glass-border-hover); transform:translateY(-2px) scale(1.08);
    box-shadow:0 12px 28px rgba(0,0,0,0.18), var(--glass-inset);
  }
}
.btn-icon-nav:active, .btn-inicio:active { transform:translateY(0) scale(0.95) }

.badge-count {
  position:absolute; top:-6px; right:-6px;
  background:linear-gradient(135deg,var(--rojo),var(--rojo-dark)); color:#fff;
  font-size:0.7rem; width:20px; height:20px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  font-weight:900; border:2px solid #fff; z-index:10;
  box-shadow:0 3px 8px rgba(231,76,60,0.5);
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { transform:scale(1) }
  50% { transform:scale(1.12) }
}

/* ==========================================================================
   6. LANDING PAGE
   ========================================================================== */
.landing-container {
  min-height:calc(100vh - 90px); display:flex; flex-direction:column;
  align-items:center; padding:15px; padding-top:20px; background:transparent;
  justify-content:flex-start;
}

.landing-header {
  text-align:center; padding:10px 20px 15px;
  display:flex; flex-direction:column; align-items:center;
}

.landing-logo {
  width:clamp(90px,18vw,140px); height:auto; margin-bottom:10px;
  filter:drop-shadow(0 5px 20px rgba(0,0,0,0.25));
  animation:floatLogo 3s ease-in-out infinite;
}
@keyframes floatLogo {
  0%,100% { transform:translateY(0) }
  50% { transform:translateY(-6px) }
}

.landing-titulo {
  font-family:'Lato',sans-serif; color:var(--text-primary);
  font-size:clamp(1.6rem,5vw,2.8rem); letter-spacing:4px;
  font-weight:800; text-transform:uppercase;
}

.landing-separador {
  width:60px; height:2px; margin:8px 0; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--az-300),transparent);
}

.landing-slogan {
  font-family:'Lato',sans-serif; color:var(--text-secondary);
  letter-spacing:2px; font-size:0.75rem; text-transform:uppercase; font-weight:400;
}

.landing-seccion-titulo {
  font-family:'Cinzel',serif; color:var(--text-primary);
  font-size:clamp(1.8rem,5vw,2.5rem); text-align:center;
  margin:40px 0 30px; font-weight:600; font-style:italic;
}

.landing-grid {
  display:flex; justify-content:center; gap:35px;
  width:100%; max-width:500px; padding:0 25px; margin-top:25px;
}

.landing-grid-3 {
  max-width:700px; flex-wrap:wrap; gap:25px;
}

.landing-card {
  position:relative; border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  background:var(--surface-card); border:1px solid rgba(0,0,0,0.08);
  transition:all 0.4s var(--ease-spring);
  box-shadow:0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  width:175px; height:280px; flex-shrink:0;
  animation:fadeInUp 0.3s ease-out forwards; opacity:0;
}
.landing-card:hover {
  transform:translateY(-8px) scale(1.02);
  border-color:rgba(0,0,0,0.15);
  box-shadow:0 20px 50px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.landing-card-image {
  position:absolute; top:0; left:0; width:100%; height:70%;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--az-100);
}
.landing-card-image img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) ease;
}
.landing-card:hover .landing-card-image img { transform:scale(1.1) }

.landing-card-overlay {
  position:absolute; bottom:0; left:0; right:0; height:50%;
  background:linear-gradient(to top,rgba(245,245,245,1) 0%,transparent 100%);
  pointer-events:none;
}

.landing-card-content {
  position:absolute; bottom:0; left:0; right:0; height:30%;
  padding:10px 15px; text-align:center;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid rgba(255,255,255,0.6);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}
.landing-card-content h3 {
  color:var(--text-primary); font-family:'Cinzel',serif;
  font-size:clamp(0.9rem,3vw,1.3rem); font-weight:600;
  line-height:1.3; letter-spacing:1px;
}

.landing-card-arrow {
  display:inline-block; color:var(--az-300); font-size:1.5rem;
  transition:transform 0.3s ease, color 0.3s ease;
}
.landing-card:hover .landing-card-arrow { transform:translateX(5px); color:var(--az-500) }

.landing-card-proximamente { filter: grayscale(40%); opacity: 0.85; cursor: not-allowed }
.badge-proximamente {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.78); color: #fff;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 20px; z-index: 3;
  text-transform: uppercase;
}

/* Bloque promocional cuando la categoría no está visible o no disponible */
.promo-block-bloqueado { filter: grayscale(45%); opacity: 0.7 }
.promo-btn-bloqueado,
.promo-btn-bloqueado:hover {
  cursor: not-allowed !important;
  opacity: 0.55;
  background: var(--az-200) !important;
  color: var(--text-secondary) !important;
  border-color: var(--az-200) !important;
}

/* ==========================================================================
   7. CATEGORÍAS (LEGACY)
   ========================================================================== */
header {
  text-align:center; padding:80px 20px; min-height:500px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; background:transparent;
}

.logo-principal {
  width:clamp(120px,22vw,200px); height:auto; margin-bottom:5px;
  filter:drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

.texto-oro-liquido {
  font-family:'Lato',sans-serif; font-size:clamp(5rem,15vw,9rem);
  font-weight:400; color:var(--text-primary); line-height:1; letter-spacing:-2px;
}

.subtitulo-vip {
  font-family:'Lato',sans-serif; color:var(--text-primary);
  font-size:clamp(1.8rem,5.5vw,3rem); letter-spacing:3px;
  margin-top:8px; font-weight:700; text-transform:lowercase;
}

.separador-dorado {
  width:100px; height:2px; margin:30px auto; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--az-300),transparent);
}

.slogan {
  font-family:'Lato',sans-serif; color:var(--text-secondary);
  letter-spacing:4px; font-size:1rem; text-transform:uppercase; font-weight:300;
}

/* ── Tarjetas de Categoría ── */
.contenedor-categorias { display:flex; justify-content:center; flex-wrap:wrap; gap:40px; padding:40px 20px }

.tarjeta-vape-principal {
  width:100%; max-width:450px; border-radius:var(--r-lg); overflow:hidden;
  cursor:pointer; border:1px solid rgba(0,0,0,0.45);
  background:var(--az-100); transition:all var(--t-mid) var(--ease-spring);
  box-shadow:var(--glass-shadow);
}
.tarjeta-vape-imagen { width:100%; height:400px; overflow:hidden; background:var(--az-100); position:relative }
.tarjeta-vape-imagen img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease }
.tarjeta-vape-principal:hover .tarjeta-vape-imagen img { transform:scale(1.08) }
.tarjeta-vape-principal:hover { border-color:rgba(20,20,20,0.7); transform:translateY(-5px) }

.tarjeta-vape-titulo {
  padding:20px; text-align:center;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.tarjeta-vape-titulo h2 {
  color:var(--text-primary); font-size:1.5rem; font-weight:500;
  letter-spacing:1px; display:flex; align-items:center; justify-content:center; gap:10px;
}
.tarjeta-vape-titulo i { font-size:1.4rem; transition:transform 0.3s ease }
.tarjeta-vape-principal:hover .tarjeta-vape-titulo i { transform:translateX(5px) }

.tarjeta-categoria {
  width:100%; max-width:400px; height:320px; position:relative;
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  background:var(--az-100); border:1px solid rgba(0,0,0,0.45);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:var(--glass-shadow);
  transition:transform var(--t-slow) var(--ease-spring), box-shadow 0.4s ease, border 0.4s ease;
  animation:fadeInUp 0.4s ease-out forwards; opacity:0;
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(15px) }
  to   { opacity:1; transform:translateY(0) }
}
.tarjeta-categoria:hover {
  transform:translateY(-8px) scale(1.02);
  border-color:rgba(20,20,20,0.6);
  box-shadow:var(--glass-shadow-lg);
}

.tarjeta-categoria img, .tarjeta-categoria video {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(0.95); transition:0.45s ease; z-index:1;
}
.media-container { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:1 }
.tarjeta-categoria:hover img, .tarjeta-categoria:hover video { filter:brightness(1); transform:scale(1.06) }

.contenido-cat {
  position:relative; z-index:2; width:100%; height:100%; padding:30px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.contenido-cat h2 { color:#fff; font-size:2.2rem; margin-bottom:10px; text-shadow:0 5px 15px rgba(0,0,0,0.8) }
.contenido-cat p { font-size:1rem; color:#f0f0f0; margin-bottom:25px; text-shadow:0 2px 5px rgba(0,0,0,0.7); font-weight:300 }

.btn-entrar {
  display:inline-block; background:rgba(0,0,0,0.15); color:#fff;
  padding:12px 35px; border-radius:var(--r-xl); font-weight:bold;
  font-size:0.9rem; border:1px solid rgba(0,0,0,0.4);
  backdrop-filter:blur(5px); transition:0.3s; text-transform:uppercase; letter-spacing:1px;
}
.tarjeta-categoria:hover .btn-entrar {
  background:var(--az-400); color:#fff; border-color:var(--az-400);
  box-shadow:0 0 20px rgba(20,20,20,0.5);
}

.btn-rojo { background:var(--rojo-dark); border:none }
.btn-rojo:hover { background:#a93226!important; color:#fff!important }

.badge-cat-promo {
  position:absolute; top:35px; right:-45px;
  background:var(--rojo-dark); color:#fff; padding:8px 60px;
  transform:rotate(45deg); z-index:5; font-weight:900;
  font-size:0.85rem; letter-spacing:2px;
}

.order-label {
  position:absolute; top:10px; left:12px;
  background:rgba(255,255,255,0.85); color:var(--text-primary);
  padding:4px 8px; border-radius:var(--r-sm); font-weight:800; font-size:0.85rem;
  z-index:6; pointer-events:none;
}
.btn-edit-order {
  position:absolute; top:8px; right:10px; z-index:7;
  background:rgba(255,255,255,0.85); color:var(--text-primary);
  border:none; width:34px; height:34px; border-radius:var(--r-sm); cursor:pointer; font-size:0.85rem;
}
.tarjeta-bloqueada { filter:grayscale(100%); opacity:0.5; pointer-events:none }

#seccion-categorias, #seccion-grid { background:transparent }

/* ==========================================================================
   8. GRID DE PRODUCTOS
   ========================================================================== */
.grid-productos {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:30px; padding:20px 40px; max-width:1500px; margin:0 auto;
}

.tarjeta-producto {
  background:linear-gradient(145deg,rgba(255,255,255,0.95) 0%,rgba(250,250,250,0.9) 100%);
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  contain:layout style; will-change:transform;
  transition:transform 0.4s var(--ease-spring), box-shadow 0.4s ease, border 0.3s ease;
  animation:fadeInUp 0.3s ease-out forwards; opacity:0;
}
.tarjeta-producto:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.12);
}

/* Agotado */
.tarjeta-producto.producto-agotado { opacity:0.6; filter:grayscale(100%); cursor:not-allowed }
.tarjeta-producto.producto-agotado:hover { transform:none!important; filter:grayscale(90%); opacity:0.65; box-shadow:none!important }
.tarjeta-producto.producto-agotado .img-wrapper img { filter:grayscale(100%) }

.badge-agotado {
  background:linear-gradient(145deg,var(--az-400),var(--az-600));
  color:#fff; padding:6px 14px; border-radius:20px;
  font-size:0.7rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; border:1px solid rgba(0,0,0,0.4);
}

.img-wrapper {
  height:350px; overflow:hidden; position:relative;
  border-bottom:1px solid rgba(0,0,0,0.15);
  background:linear-gradient(180deg,var(--az-50),var(--az-100));
}
.img-wrapper img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; will-change:transform }
.tarjeta-producto:hover .img-wrapper img { transform:scale(1.08) }

.info-card {
  padding:20px; text-align:center;
  display:flex; flex-direction:column; justify-content:space-between; height:160px;
}
.info-card h3 { font-size:1.2rem; color:var(--text-primary); margin-bottom:5px; font-weight:600; line-height:1.3 }

/* Controles rápidos tarjeta */
.qty-card {
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.qty-card .qty-number { min-width:36px; text-align:center; color:var(--text-primary); font-weight:800; font-size:1rem }

.btn-agregar-card {
  background:linear-gradient(135deg,var(--az-400),var(--az-500)); color:#fff;
  border:none; padding:8px 12px; border-radius:12px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 22px rgba(20,20,20,0.25);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-agregar-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,20,20,0.35) }
.btn-agregar-card:active { transform:translateY(0) }
.btn-agregar-card.agregado { background:linear-gradient(135deg,#27ae60,#1e8449) }
.btn-agregar-card.agregado:hover { background:linear-gradient(135deg,#2ecc71,#27ae60) }

.bloque-precios { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-height:60px }
.precio-tachado { text-decoration:line-through; color:var(--az-300); font-size:0.85rem; line-height:1 }
.precio-card { color:var(--text-primary); font-size:1.5rem; font-weight:800; line-height:1.1 }

.precio-card.cotizar-precio, .cotizar-precio {
  color:var(--az-500); font-size:0.85rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; background:rgba(20,20,20,0.1);
  padding:6px 12px; border-radius:var(--r-sm); border:1px solid rgba(20,20,20,0.35);
}

/* Descripción breve para categorías simples (audífonos, pulseras) */
.descripcion-card {
  color:var(--text-secondary); font-size:0.82rem; line-height:1.35;
  margin:6px 0 2px; padding:0 4px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
.tarjeta-producto .info-card-desc { height:auto; min-height:185px }

.texto-ver-detalles {
  display:inline-block; color:var(--text-secondary); font-size:0.75rem;
  font-weight:bold; text-transform:uppercase; letter-spacing:2px;
  padding-top:15px; border-top:1px solid rgba(0,0,0,0.3);
  width:100%; margin-top:auto;
}

/* ==========================================================================
   9. MODAL DE PRODUCTO
   ========================================================================== */
.modal {
  display:none!important; position:fixed!important; z-index:6000!important; inset:0!important;
  width:100vw!important; height:100vh!important;
  background:linear-gradient(135deg,rgba(255,255,255,0.6),rgba(255,255,255,0.65),rgba(255,255,255,0.6));
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  opacity:0; animation:fadeInModal 0.3s ease forwards;
  overflow:hidden; padding:clamp(12px,5vh,28px) 0;
}
.modal[style*="flex"] { display:flex!important; width:100vw!important; height:100vh!important; inset:0!important }
@keyframes fadeInModal { to { opacity:1 } }

.modal-content {
  background:linear-gradient(145deg,rgba(255,255,255,0.97),rgba(255,255,255,0.98),rgba(255,255,255,0.97));
  width:clamp(280px,90vw,520px); border-radius:clamp(16px,4vw,25px);
  border:1px solid rgba(0,0,0,0.2);
  box-shadow:0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.4), var(--glass-inset);
  position:relative; max-height:clamp(75vh,85vh,90vh);
  display:flex; flex-direction:column; overflow:hidden;
  animation:slideUpGlass var(--t-mid) var(--ease-spring) forwards;
  flex-shrink:0;
}
@keyframes slideUpGlass {
  from { opacity:0; transform:translateY(20px) scale(0.98) }
  to   { opacity:1; transform:translateY(0) scale(1) }
}

.cerrar-modal {
  position:absolute; top:12px; right:12px; color:var(--az-500);
  font-size:1.2rem; border-radius:50%;
  width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; max-height:44px;
  cursor:pointer; z-index:50; display:flex; justify-content:center; align-items:center;
  flex-shrink:0; transition:all 0.3s ease;
}
.cerrar-modal:hover, .cerrar-modal:active {
  background:rgba(231,76,60,0.95); border-color:var(--rojo); color:#fff;
  transform:scale(1.1); box-shadow:0 6px 20px rgba(231,76,60,0.4);
}

.modal-body {
  overflow-y:auto; padding:0; display:flex; flex-direction:column; flex-grow:1;
  scrollbar-width:thin; scrollbar-color:var(--az-200) var(--az-50);
}

.producto-header {
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.95));
  padding-bottom:14px;
}

.producto-imagen-grande {
  position:relative; height:clamp(240px,48vh,400px); width:100%;
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.95),rgba(255,255,255,0.95));
  overflow:hidden;
}
.producto-imagen-grande img {
  max-width:clamp(62%,82vw,90%); max-height:clamp(72%,88vh,94%);
  object-fit:contain; filter:drop-shadow(0 15px 30px rgba(0,0,0,0.2));
  transition:opacity 0.25s ease;
}

/* ── Carrusel de imágenes (modal y tarjetas) — flechas delgadas, no invasivas ── */
.carrusel-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:46px; border:none; cursor:pointer;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--text-secondary); font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
  z-index:12; transition:all 0.2s ease; opacity:0.55;
  padding:0;
}
.carrusel-arrow svg { display:block; flex-shrink:0; pointer-events:none; width:1em; height:1em }
.carrusel-arrow-left { left:0; border-radius:0 10px 10px 0 }
.carrusel-arrow-right { right:0; border-radius:10px 0 0 10px }
.carrusel-arrow:hover { opacity:1; background:rgba(255,255,255,0.85); color:var(--text-primary) }
.carrusel-arrow:active { transform:translateY(-50%) scale(0.9) }
.carrusel-arrow.oculto { display:none }

.carrusel-dots {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:12;
}
.carrusel-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(0,0,0,0.2); cursor:pointer;
  transition:all 0.2s ease; border:none; padding:0;
}
.carrusel-dot.activo { background:var(--text-primary); width:16px; border-radius:3px }

/* Carrusel dentro de tarjetas de grid (audífonos, pulseras, vapes, plumas) */
.img-wrapper .carrusel-arrow {
  width:24px; height:36px; font-size:0.8rem; opacity:0;
}
.img-wrapper:hover .carrusel-arrow { opacity:0.6 }
.img-wrapper .carrusel-arrow:hover { opacity:1 }
.img-wrapper .carrusel-dots { bottom:6px }
.img-wrapper .carrusel-dot { width:5px; height:5px }
.img-wrapper .carrusel-dot.activo { width:10px; height:5px; border-radius:3px }

/* En táctil (sin hover), mostrar las flechas tenues siempre para que se sepa que existen */
@media (hover:none) {
  .img-wrapper .carrusel-arrow { opacity:0.45 }
}

.btn-favorito-modal {
  position:absolute; top:clamp(10px,2vh,15px); right:clamp(10px,2vh,15px);
  border-radius:50%; width:clamp(38px,9vw,45px); height:clamp(38px,9vw,45px);
  font-size:clamp(1.4rem,4vw,1.8rem); color:var(--az-500); cursor:pointer;
  display:flex; justify-content:center; align-items:center;
  transition:0.3s var(--ease-spring); z-index:15;
}
.btn-favorito-modal:active { transform:scale(0.8) }

.ph-heart-fill { color:var(--rojo)!important; fill:var(--rojo)!important; filter:drop-shadow(0 0 10px rgba(231,76,60,0.6)) }

.producto-info-base { padding:0 clamp(12px,3.5vw,20px); text-align:left; margin-top:clamp(-20px,-2.5vh,-15px); position:relative; z-index:5 }
#modal-titulo-producto { color:var(--text-primary); font-size:clamp(1.2rem,3.5vw,1.8rem); line-height:1.1; margin-bottom:4px }
.modelo-texto { color:var(--text-secondary); font-size:clamp(0.85rem,2.5vw,1rem); margin-bottom:15px; font-weight:300 }

.precio-container {
  display:flex; justify-content:space-between; align-items:center; margin-top:15px;
  background:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(255,255,255,0.95));
  padding:clamp(8px,2vw,10px) clamp(12px,3vw,20px); border-radius:15px;
  border:1px solid rgba(0,0,0,0.35);
}

.precio-modal { font-size:clamp(1.4rem,5vw,2.2rem); color:var(--text-primary); font-weight:900 }
.precio-tachado-modal { font-size:clamp(0.9rem,3vw,1.2rem); color:var(--az-300); text-decoration:line-through; margin-right:15px }
.stock-badge {
  background:rgba(26,140,78,0.12); color:var(--verde);
  padding:6px 15px; border-radius:20px; font-size:0.8rem; font-weight:bold;
  display:flex; align-items:center; gap:6px;
  border:1px solid rgba(26,140,78,0.35);
}

.separador-modal { border:0; height:1px; background:rgba(0,0,0,0.2); margin:20px 0; width:100% }

/* ── Variantes ── */
.seccion-variantes { padding:0 25px }
#titulo-variantes { color:var(--text-primary); margin-bottom:15px; font-size:1rem; font-weight:bold; display:block }
.grid-variantes { display:flex; flex-wrap:wrap; gap:10px }

.descripcion-modal {
  color:var(--text-secondary); font-size:0.95rem; line-height:1.5;
  background:linear-gradient(145deg,var(--az-50),var(--az-100));
  border:1px solid rgba(0,0,0,0.12); border-radius:12px;
  padding:14px 16px; margin:0;
}

.chip-variante {
  background:linear-gradient(145deg,var(--az-50),var(--az-100));
  border:1px solid rgba(0,0,0,0.35); color:var(--az-500);
  padding:10px 18px; border-radius:12px; cursor:pointer;
  transition:0.2s; font-size:0.9rem; font-weight:500;
}
.chip-variante:hover { border-color:rgba(20,20,20,0.6); background:linear-gradient(145deg,var(--az-100),var(--az-200)) }
.chip-variante.activo {
  background:linear-gradient(135deg,var(--az-400),var(--az-500)); color:#fff;
  border-color:var(--az-400); font-weight:bold;
  box-shadow:0 4px 15px rgba(20,20,20,0.35); transform:scale(1.03);
}
.chip-variante.agotado { opacity:0.4; text-decoration:line-through; pointer-events:none; border-color:var(--az-200); background:var(--az-100) }

.input-modal-texto {
  width:100%; padding:15px;
  background:linear-gradient(145deg,#fff,var(--az-50));
  border:1px solid rgba(0,0,0,0.35); color:var(--text-primary);
  border-radius:12px; font-size:1rem; font-weight:bold; text-align:center;
}

/* ── Controles de Compra ── */
.seccion-compra { padding:14px 20px 140px 20px; display:flex; gap:15px; flex-wrap:wrap }
.control-cantidad-wrapper, .metodo-pago-wrapper { flex:1; min-width:130px }
.control-cantidad-wrapper label, .metodo-pago-wrapper label {
  display:block; color:var(--text-secondary); font-size:0.75rem;
  margin-bottom:6px; text-transform:uppercase; letter-spacing:1px;
}

.control-cantidad {
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(145deg,#fff,var(--az-50));
  border-radius:15px; padding:5px 8px;
  border:1px solid rgba(0,0,0,0.2);
}

.btn-cant {
  background:linear-gradient(140deg,rgba(0,0,0,0.06),rgba(0,0,0,0.03));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  color:var(--text-primary); width:40px; height:40px;
  font-size:1.1rem; cursor:pointer; border-radius:12px;
  transition:all 0.25s var(--ease-spring);
  border:1px solid rgba(0,0,0,0.18); font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,0.08), var(--glass-inset);
}
@media (hover:hover) and (pointer:fine) {
  .btn-cant:hover {
    background:linear-gradient(140deg,rgba(0,0,0,0.10),rgba(0,0,0,0.06));
    border-color:var(--glass-border-hover); transform:translateY(-3px) scale(1.08);
  }
}
.btn-cant:active { transform:translateY(0) scale(0.95) }

#cantidad-seleccionada {
  background:transparent; border:none; color:var(--text-primary);
  width:60px; padding:8px 0; text-align:center; font-weight:bold;
  font-size:1.3rem; -webkit-appearance:none; -moz-appearance:textfield;
  appearance:none; outline:none;
}

/* Toggle Pago */
.toggle-pago {
  display:flex; background:linear-gradient(145deg,#fff,var(--az-50));
  border-radius:15px; padding:5px; border:1px solid rgba(0,0,0,0.2);
  box-shadow:0 4px 15px rgba(0,0,0,0.08); position:relative; overflow:hidden;
}
.toggle-pago::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(20,20,20,0.08),transparent);
  transition:left 0.5s;
}
.toggle-pago:hover::before { left:100% }
.toggle-pago input { display:none }

.toggle-pago label {
  flex:1; text-align:center; padding:12px 0; font-size:0.85rem;
  cursor:pointer; border-radius:11px; margin:0!important;
  color:var(--text-secondary); transition:all 0.3s ease;
  font-weight:600; text-transform:uppercase; letter-spacing:1px;
  position:relative; z-index:1; background:transparent; border:1px solid transparent;
}
.toggle-pago label:hover { color:var(--text-primary); transform:translateY(-1px); border-color:rgba(0,0,0,0.35) }
.toggle-pago input:checked + label {
  background:linear-gradient(135deg,var(--az-400),var(--az-500));
  color:#fff; font-weight:bold;
  box-shadow:0 3px 12px rgba(20,20,20,0.35); transform:scale(1.01);
  border-color:rgba(255,255,255,0.2);
}

/* ── Footer Modal (Sticky) ── */
.footer-compra-sticky {
  background:linear-gradient(180deg,#fff,var(--az-50));
  padding:18px 20px; border-top:1px solid rgba(0,0,0,0.3);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; bottom:0; left:0; right:0; margin:0; margin-top:auto;
  border-radius:0 0 clamp(16px,4vw,25px) clamp(16px,4vw,25px);
  z-index:20; box-shadow:0 -4px 16px rgba(0,0,0,0.1);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  flex-shrink:0;
}

.total-final { display:flex; flex-direction:column }
.total-final span:first-child { font-size:0.85rem; color:var(--text-secondary); letter-spacing:1px }
.total-final #total-precio { font-size:1.8rem; color:var(--text-primary); font-weight:900 }

.boton-pedir {
  background:linear-gradient(145deg,var(--az-600),var(--az-900));
  color:#ffffff; border:1px solid var(--az-900);
  padding:15px 35px; border-radius:40px; font-weight:800; font-size:1rem;
  display:flex; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 5px 20px rgba(0,0,0,0.25);
  transition:all 0.3s var(--ease-spring); letter-spacing:0.5px;
}
.boton-pedir::before {
  content:''; position:absolute; top:50%; left:50%; width:0; height:0;
  border-radius:50%; background:rgba(255,255,255,0.18);
  transform:translate(-50%,-50%); transition:width 0.6s, height 0.6s;
}
@media (hover:hover) and (pointer:fine) {
  .boton-pedir:hover::before { width:300px; height:300px }
  .boton-pedir:hover { transform:translateY(-3px) scale(1.02); filter:brightness(1.15); box-shadow:0 12px 40px rgba(0,0,0,0.35) }
}
.boton-pedir:active { transform:translateY(0) scale(0.98) }

.advertencia-pago { font-size:0.75rem; color:var(--text-secondary); text-align:center; padding:10px 25px 5px; background:#fff; font-style:italic }

/* ── Recomendados ── */
.seccion-recomendados {
  padding:30px 25px 40px; background:linear-gradient(180deg,#fff,var(--surface-page));
  border-top:1px solid rgba(0,0,0,0.12);
  border-radius:0 0 clamp(16px,4vw,25px) clamp(16px,4vw,25px);
}
.header-recomendados { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px }
.seccion-recomendados h3 { color:var(--az-500); font-size:1.1rem; font-weight:400 }

.controles-scroll { display:none; gap:10px }
.controles-scroll button {
  background:linear-gradient(145deg,var(--az-100),var(--az-200));
  border:1px solid rgba(0,0,0,0.3); color:var(--text-primary);
  width:35px; height:35px; border-radius:50%; cursor:pointer;
  transition:all 0.3s var(--ease-spring);
  display:flex; justify-content:center; align-items:center; font-size:1.2rem;
}
.controles-scroll button:hover {
  background:linear-gradient(135deg,var(--az-400),var(--az-500));
  color:#fff; border-color:var(--az-400);
  transform:scale(1.12) translateY(-2px);
}

.grid-recomendados-wrapper { overflow:hidden; position:relative; width:100% }
.grid-recomendados {
  display:flex; gap:15px; overflow-x:auto; padding:12px 40px;
  scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
}
.grid-recomendados::-webkit-scrollbar { display:none }

.card-recomendada {
  min-width:150px; max-width:150px;
  background:linear-gradient(145deg,#fff,var(--az-50));
  border-radius:15px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(0,0,0,0.25); scroll-snap-align:start;
}
@media (hover:hover) and (pointer:fine) {
  .card-recomendada { transition:all var(--t-mid) var(--ease-spring) }
  .card-recomendada:hover { border-color:rgba(20,20,20,0.6); transform:translateY(-6px) scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,0.2) }
}
@media (hover:none) {
  .card-recomendada:active { opacity:0.8; transform:scale(0.98); transition:all 0.1s ease }
}

.card-recomendada img { width:100%; height:140px; object-fit:cover }
.card-recomendada div { padding:12px; text-align:center }
.rec-nombre { font-size:0.85rem; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:5px }
.rec-precio { font-size:1rem; color:var(--az-500); font-weight:bold }

.recom-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--text-primary); width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:30; user-select:none;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.recom-arrow-left { left:6px }
.recom-arrow-right { right:6px }
@media (hover:hover) and (pointer:fine) {
  .recom-arrow:hover { transform:translateY(-50%) scale(1.08); box-shadow:0 8px 24px rgba(0,0,0,0.25) }
}
.recom-arrow:active { transform:translateY(-50%) scale(0.92) }

/* ==========================================================================
   10. PROMO SECTION
   ========================================================================== */
.promo-section {
  background:var(--surface-page); padding:60px 20px;
  display:flex; flex-direction:column; gap:50px;
  max-width:1100px; margin:0 auto;
}

.promo-block {
  display:flex; align-items:center; gap:40px; width:100%;
  background:linear-gradient(145deg,#fff,var(--az-50));
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(0,0,0,0.3); padding:0;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.promo-block-reverse { flex-direction:row-reverse }

.promo-image { flex:0 0 45%; max-width:400px; overflow:hidden; border-radius:var(--r-lg) }
.promo-image img { width:100%; height:100%; min-height:300px; object-fit:cover; display:block; border-radius:var(--r-lg) }

.promo-content { flex:1; padding:30px 35px }
.promo-content h2 { font-family:'Cinzel',serif; font-size:2.2rem; color:var(--text-primary); margin:0 0 12px; font-weight:700 }
.promo-content h3 { font-family:'Lato',sans-serif; font-size:1.1rem; color:var(--text-secondary); margin:0 0 18px; font-weight:600; font-style:italic }
.promo-content p { font-size:0.95rem; color:var(--text-secondary); line-height:1.6; margin:0 0 12px }
.promo-highlight { color:var(--az-500)!important; font-style:italic; margin-top:18px!important }

.promo-btn {
  display:inline-block; margin-top:25px; padding:14px 45px;
  background:transparent; border:2px solid var(--text-primary);
  color:var(--text-primary); font-size:1rem; font-weight:600;
  letter-spacing:2px; cursor:pointer; transition:all 0.3s ease;
  text-transform:uppercase; border-radius:var(--r-sm);
}
.promo-btn:hover { background:var(--text-primary); color:#fff }

/* ==========================================================================
   11. CARRITO (tarjetas, header sticky, controles)
   ========================================================================== */
.carrito-card-info {
  height:auto!important; text-align:center!important; padding:12px 10px!important;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.carrito-card-info h3 { font-size:0.95rem; margin-bottom:2px }
.carrito-card-info .variante-text { color:var(--text-secondary); font-size:0.75rem }
.carrito-card-info .precio-unitario-text { color:var(--az-300); font-size:0.75rem; margin:4px 0 }
.carrito-card-info .subtotal-text { color:var(--az-500); font-size:1.1rem; font-weight:800; margin-top:6px }

.qty-controls-carrito { display:flex; align-items:center; justify-content:center; gap:12px; margin:8px 0 }
.qty-controls-carrito .btn-cant { width:36px; height:36px; font-size:1rem; border-radius:10px; flex-shrink:0 }
.qty-controls-carrito .qty-number { min-width:30px; text-align:center; color:var(--text-primary); font-weight:700; font-size:1.1rem }

.carrito-header-sticky {
  position:sticky; top:110px; z-index:100;
  background:linear-gradient(180deg,#fff,var(--az-50));
  padding:15px 20px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(0,0,0,0.12);
  border-radius:12px; margin-bottom:15px;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}
.carrito-titulo {
  color:var(--text-primary); font-family:'Cinzel',serif; font-size:1.3rem;
  font-weight:700; text-transform:uppercase; letter-spacing:2px;
}

.btn-comprar-carrito {
  background:linear-gradient(145deg,var(--verde-wsp),#1db954,#128c4a);
  color:#fff; border:none; padding:12px 24px; border-radius:30px;
  font-weight:800; font-size:0.9rem; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 4px 15px rgba(37,211,102,0.4);
  transition:all 0.3s ease; text-transform:uppercase; letter-spacing:1px; white-space:nowrap;
}
.btn-comprar-carrito:hover { transform:translateY(-2px); box-shadow:0 6px 25px rgba(37,211,102,0.5) }
.btn-comprar-carrito i { font-size:1.1rem }

.carrito-header {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  position:sticky; top:90px; background:rgba(255,255,255,0.9);
  padding:12px 18px; border-radius:12px; z-index:1500;
  border:1px solid rgba(0,0,0,0.12); backdrop-filter:blur(8px);
}
.carrito-header .titulo-seccion-grid { text-align:left; color:var(--az-500); margin:0; font-size:1.4rem }

/* ==========================================================================
   12. FLOATING WHATSAPP & CART PANEL
   ========================================================================== */
.btn-whatsapp {
  position:fixed; right:18px; bottom:18px;
  background:linear-gradient(135deg,var(--verde-wsp),#128c7e,#075e54);
  color:#fff; border:none; width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(37,211,102,0.5), 0 4px 16px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3);
  cursor:pointer; z-index:4100;
  transition:all 0.3s var(--ease-spring);
  animation:whatsappPulse 2.5s ease-in-out infinite;
}
@keyframes whatsappPulse {
  0%,100% { box-shadow:0 8px 32px rgba(37,211,102,0.5), 0 4px 16px rgba(0,0,0,0.2) }
  50% { box-shadow:0 8px 40px rgba(37,211,102,0.7), 0 4px 20px rgba(0,0,0,0.3) }
}
.btn-whatsapp:hover { transform:translateY(-4px) scale(1.08); animation:none }
.btn-whatsapp:active { transform:translateY(0) scale(0.98) }
.btn-whatsapp i { font-size:1.8rem; color:#fff }

.whatsapp-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--rojo-dark); color:#fff; min-width:20px; height:20px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  font-size:0.75rem; padding:0 6px; border:2px solid #075e54;
  box-shadow:0 3px 8px rgba(192,57,43,0.6); z-index:10;
}
.whatsapp-badge.pulse { animation:wpPulse 0.9s ease-in-out }
@keyframes wpPulse {
  0%   { transform:scale(1) }
  50%  { transform:scale(1.35); box-shadow:0 6px 18px rgba(20,20,20,0.28) }
  100% { transform:scale(1) }
}

/* ── Floating Cart Panel ── */
.floating-cart-panel {
  position:fixed; right:18px; bottom:100px;
  width:min(360px,calc(100vw - 36px));
  max-height:calc(100vh - 160px);
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(0,0,0,0.22);
  backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
  box-shadow:var(--glass-shadow-lg), 0 0 0 1px rgba(255,255,255,0.4), var(--glass-inset);
  border-radius:var(--r-lg); display:flex; flex-direction:column;
  overflow:hidden; z-index:4050;
  transform:translateY(16px) scale(0.96); opacity:0;
  transition:transform 320ms var(--ease-spring), opacity 320ms ease;
}
.floating-cart-panel.open { transform:translateY(0) scale(1); opacity:1 }
.floating-cart-panel .fc-input {
  width:100%; padding:10px 12px; margin-bottom:8px;
  background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.15);
  color:var(--text-primary); border-radius:var(--r-sm); font-size:0.9rem;
}

.floating-cart-header {
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid rgba(0,0,0,0.15);
  font-weight:700; color:var(--text-primary);
}
.cerrar-flotante { background:none; border:none; color:var(--az-500); font-size:1rem; cursor:pointer }
.floating-cart-subtitle { flex-shrink:0; padding:8px 12px; border-bottom:1px solid rgba(0,0,0,0.08); font-size:0.9rem; color:var(--az-500) }

.cerrar-flotante-fab {
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; z-index:2;
}
.cerrar-flotante-fab i { font-size:1.05rem; color:var(--text-primary) }
.cerrar-flotante-fab:hover { transform:translateY(-1px) scale(1.05); background:rgba(0,0,0,0.08) }

.floating-cart-list {
  padding:6px 8px; flex:0 1 auto; overflow-y:auto; overflow-x:hidden;
  min-height:50px; max-height:250px;
}
.floating-cart-list::-webkit-scrollbar { width:8px }
.floating-cart-list::-webkit-scrollbar-track { background:rgba(0,0,0,0.2); border-radius:10px }
.floating-cart-list::-webkit-scrollbar-thumb { background:linear-gradient(180deg,rgba(20,20,20,0.5),rgba(20,20,20,0.35)); border-radius:10px }

.floating-cart-item {
  display:flex; gap:10px; padding:10px; align-items:flex-start;
  border-bottom:1px solid rgba(0,0,0,0.1);
  transition:background var(--t-fast) ease;
}
.floating-cart-item:hover { background:rgba(0,0,0,0.15) }
.floating-cart-item img { width:50px; height:50px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0 }

.fci-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; word-break:break-word }
.fci-name { font-weight:700; color:var(--text-primary); font-size:0.9rem; line-height:1.2 }
.fci-variant { font-size:0.75rem; color:var(--text-secondary) }
.fci-img img { width:44px; height:36px; object-fit:cover }

.fci-controls { display:flex; align-items:center; gap:8px; margin-top:4px }
.fci-qty { min-width:24px; text-align:center; color:var(--text-primary); font-weight:700; font-size:0.9rem }

.fci-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; min-width:70px }
.fci-price { color:var(--az-500); font-weight:800; font-size:0.95rem; white-space:nowrap }

.floating-cart-item .btn-cant {
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; background:linear-gradient(140deg,rgba(0,0,0,0.06),rgba(0,0,0,0.03));
  border:1px solid rgba(0,0,0,0.18); color:var(--text-primary); font-weight:700; cursor:pointer;
  transition:all 0.2s ease;
}
.floating-cart-item .btn-cant:hover { transform:scale(1.05) }
.floating-cart-item .btn-cant:active { transform:scale(0.95) }
.floating-cart-item .btn-cant i { font-size:0.85rem }

.btn-eliminar {
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; background:rgba(220,38,38,0.08); border:1px solid rgba(220,38,38,0.2);
  color:#ef4444; cursor:pointer; transition:all 0.2s ease;
}
.btn-eliminar:hover { background:rgba(220,38,38,0.15); transform:scale(1.05) }
.btn-eliminar:active { transform:scale(0.95) }
.btn-eliminar i { font-size:1rem }

.floating-cart-footer {
  padding:16px 14px; border-top:1px solid rgba(0,0,0,0.15);
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  flex-shrink:0; position:sticky; bottom:0; z-index:10;
  border-radius:0 0 18px 18px;
}

.floating-total { color:var(--text-primary); font-weight:800; margin-bottom:12px; font-size:1.15rem; text-align:center }
.floating-actions { display:flex; gap:8px; margin-bottom:4px }

.btn-primary {
  background:linear-gradient(135deg,rgba(20,20,20,0.9),rgba(20,20,20,0.9));
  color:#fff; padding:14px 20px; border-radius:40px;
  border:1px solid rgba(0,0,0,0.25); cursor:pointer; flex:1;
  font-weight:700; font-size:1rem;
  transition:all 0.3s ease; box-shadow:0 4px 16px rgba(0,0,0,0.18);
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; letter-spacing:0.5px; position:relative; overflow:hidden;
}
.btn-primary::before {
  content:''; position:absolute; top:50%; left:50%; width:0; height:0;
  border-radius:50%; background:rgba(255,255,255,0.3);
  transform:translate(-50%,-50%); transition:width 0.6s, height 0.6s;
}
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover::before { width:300px; height:300px }
  .btn-primary:hover { transform:translateY(-3px); filter:brightness(1.08) }
}
.btn-primary:active { transform:translateY(0) scale(0.98) }

.btn-secondary {
  background:transparent; color:var(--az-500); padding:8px 10px;
  border-radius:var(--r-sm); border:1px solid rgba(0,0,0,0.15); cursor:pointer;
  transition:all 0.2s ease;
}
.btn-secondary:hover { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.3) }

.floating-actions .btn-secondary {
  background:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.15);
  color:var(--az-500); padding:10px 12px; border-radius:10px;
}
.floating-actions .btn-primary { width:100% }

/* ── Botón Order Now ── */
.btn-order-now {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:linear-gradient(145deg,#2d5a3d,var(--verde-wsp),#1db954,#128c4a);
  color:#fff; border:none; padding:18px 48px; border-radius:var(--r-xl);
  font-weight:900; font-size:1.15rem;
  box-shadow:0 8px 32px rgba(37,211,102,0.45), 0 4px 16px rgba(0,0,0,0.25), inset 0 2px 4px rgba(255,255,255,0.25);
  cursor:pointer; z-index:3500;
  transition:box-shadow 0.3s ease, filter 0.3s ease;
  letter-spacing:1px; text-transform:uppercase; overflow:hidden;
  width:auto; max-width:calc(100% - 40px);
}
.btn-order-now::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transition:left 0.5s ease;
}
.btn-order-now::after {
  content:''; position:absolute; inset:2px; border-radius:48px;
  border:1px solid rgba(255,255,255,0.15); pointer-events:none;
}
@media (hover:hover) and (pointer:fine) {
  .btn-order-now:hover {
    transform:translateX(-50%) translateY(-5px) scale(1.03);
    box-shadow:0 16px 48px rgba(37,211,102,0.55), 0 8px 24px rgba(0,0,0,0.35); filter:brightness(1.1);
  }
  .btn-order-now:hover::before { left:100% }
}
.btn-order-now:active { transform:translateX(-50%) translateY(0) scale(0.97) }

/* ==========================================================================
   13. BOTONES DE ACCIÓN (Modal)
   ========================================================================== */
.btn-agregar-simple {
  background:linear-gradient(135deg,var(--az-400),var(--az-500)); color:#fff;
  padding:8px 10px; border-radius:var(--r-sm); border:2px solid var(--az-400);
  cursor:pointer; flex:1; font-weight:700; transition:all 0.3s ease;
}
.btn-agregar-simple:hover { background:linear-gradient(135deg,#6a6a6a,var(--az-400)); transform:translateY(-2px) }
.btn-agregar-simple:active { transform:translateY(0) }

.btn-cant-mini {
  background:linear-gradient(135deg,var(--az-400),var(--az-500)); color:#fff;
  border:none; border-radius:6px; width:28px; height:28px; font-weight:700;
  cursor:pointer; transition:all 0.2s ease;
  display:flex; align-items:center; justify-content:center;
}
.btn-cant-mini:hover { transform:scale(1.08) }
.btn-cant-mini:active { transform:scale(0.95) }

.boton-whatsapp-modal {
  background:linear-gradient(135deg,#2bcc5e,#22a84e); color:#fff;
  border:none; padding:15px 35px; border-radius:var(--r-xl);
  font-weight:700; font-size:1rem; cursor:pointer;
  box-shadow:0 5px 16px rgba(0,0,0,0.2), 0 8px 24px rgba(34,168,78,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all 0.3s ease; letter-spacing:0.5px;
}
.boton-whatsapp-modal::before {
  content:''; position:absolute; top:50%; left:50%; width:0; height:0;
  border-radius:50%; background:rgba(255,255,255,0.3);
  transform:translate(-50%,-50%); transition:width 0.6s, height 0.6s;
}
@media (hover:hover) and (pointer:fine) {
  .boton-whatsapp-modal:hover::before { width:300px; height:300px }
  .boton-whatsapp-modal:hover { transform:translateY(-3px); filter:brightness(1.1) }
}
.boton-whatsapp-modal:active { transform:translateY(-1px) scale(0.99) }

.btn-quitar-carrito {
  background:linear-gradient(135deg,#e85a60,#d04651); color:#fff;
  border:none; padding:15px 35px; border-radius:var(--r-xl);
  font-weight:700; font-size:1rem; cursor:pointer;
  box-shadow:0 5px 16px rgba(0,0,0,0.2), 0 8px 24px rgba(208,70,81,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all 0.3s ease; letter-spacing:0.5px;
}
.btn-quitar-carrito::before {
  content:''; position:absolute; top:50%; left:50%; width:0; height:0;
  border-radius:50%; background:rgba(255,255,255,0.3);
  transform:translate(-50%,-50%); transition:width 0.6s, height 0.6s;
}
@media (hover:hover) and (pointer:fine) {
  .btn-quitar-carrito:hover::before { width:300px; height:300px }
  .btn-quitar-carrito:hover { transform:translateY(-4px) scale(1.03); filter:brightness(1.12) }
}
.btn-quitar-carrito:active { transform:translateY(-1px) scale(0.99) }

/* ==========================================================================
   14. FLOATING TOP BUTTON & CTA
   ========================================================================== */
.btn-floating-top {
  position:fixed; right:18px; bottom:110px;
  width:48px; height:48px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  color:var(--az-500); cursor:pointer; z-index:3500;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-floating-top:hover { transform:translateY(-3px) scale(1.08); color:var(--text-primary) }
.btn-floating-top i { font-size:1.3rem; font-weight:bold }

.cta-publicidad {
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(255,255,255,0.55); color:var(--text-primary);
  border:1px solid rgba(0,0,0,0.25); padding:10px 18px;
  border-radius:var(--r-md); font-weight:800; letter-spacing:0.5px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  cursor:pointer; z-index:40;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,0.15);
}
.cta-publicidad:hover { background:rgba(255,255,255,0.4); transform:translateX(-50%) translateY(-2px) }

/* ==========================================================================
   15. TOASTS, ALERTS, SUCCESS
   ========================================================================== */
.toast {
  display:none; position:fixed; top:95px; right:18px; z-index:4000;
  padding:10px 14px; border-radius:12px; align-items:center; gap:8px; min-width:220px;
}
.toast.show { display:flex; animation:toastIn 0.35s ease forwards }
.toast .toast-content { display:flex; align-items:center; gap:10px }
@keyframes toastIn {
  from { transform:translateY(-10px) translateX(10px); opacity:0 }
  to   { transform:translateY(0) translateX(0); opacity:1 }
}

.success-alert { position:fixed; right:18px; top:110px; z-index:9500; display:none; pointer-events:none }
.success-alert .success-card {
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,rgba(37,211,102,0.1),rgba(37,211,102,0.05));
  border:1px solid rgba(37,211,102,0.15); color:#0a3d20;
  padding:12px 16px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
.success-alert .success-icon {
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--verde-wsp),#1bb84a); color:#fff; font-size:1.2rem;
}
.success-alert .success-text { font-weight:800; color:#0a3d20; font-size:0.95rem }
.success-alert.show { display:block; animation:successIn 420ms var(--ease-smooth) forwards; pointer-events:auto }
@keyframes successIn {
  0%   { transform:translateY(-8px) scale(0.96); opacity:0 }
  60%  { transform:translateY(4px) scale(1.03); opacity:1 }
  100% { transform:translateY(0) scale(1); opacity:1 }
}
.success-alert .success-icon i { display:inline-block; animation:arrowBounce 900ms ease-in-out }
@keyframes arrowBounce {
  0%   { transform:translateY(0) rotate(-10deg) }
  40%  { transform:translateY(-6px) rotate(0deg) }
  100% { transform:translateY(0) rotate(0deg) }
}

/* Custom Alert Modal */
.custom-alert-overlay {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  z-index:99999; background:rgba(0,0,0,0.3);
}
.custom-alert-box {
  padding:24px; width:90%; max-width:420px; border-radius:var(--r-lg);
  display:flex; gap:14px; flex-direction:column; align-items:center; z-index:100000;
}
.custom-alert-box .alert-icon {
  background:rgba(20,20,20,0.1); color:var(--az-500);
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  border:1px solid rgba(20,20,20,0.25);
}
.custom-alert-box h3 { margin:0; color:var(--text-primary); font-size:1.1rem; letter-spacing:1px }
.custom-alert-box p { margin:6px 0 14px; color:var(--text-secondary); text-align:center; font-size:0.95rem }
.btn-alert {
  background:linear-gradient(135deg,var(--az-400),var(--az-500)); color:#fff;
  padding:12px 28px; border-radius:12px; border:none; font-weight:700; cursor:pointer;
  transition:all 0.3s ease; box-shadow:0 4px 15px rgba(20,20,20,0.3);
}
.btn-alert:hover { transform:translateY(-2px) }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.espacio-final { height:100px }

/* ── Quick Nav — Liquid Glass Floating Pill ── */
.quick-nav {
  position:sticky; top:0; margin:0 auto 25px; width:fit-content;
  z-index:120; display:flex; flex-direction:row; gap:3px; padding:5px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.65);
  border-radius:50px;
  grid-column: 1 / -1;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.06),
    0 2px 8px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.04);
  animation:glassSlideDown 0.5s var(--ease-spring) forwards;
  opacity:0;
}
@keyframes glassSlideDown {
  from { opacity:0; transform:translateY(-20px) scale(0.9) }
  to   { opacity:1; transform:translateY(0) scale(1) }
}

.quick-nav-btn {
  padding:10px 14px; border-radius:50px; border:none;
  background:transparent; color:var(--text-secondary);
  font-weight:800; font-size:0.68rem; letter-spacing:1.5px;
  cursor:pointer; text-transform:uppercase; white-space:nowrap;
  transition:all 0.3s var(--ease-spring); position:relative;
  min-height:44px; display:flex; align-items:center; justify-content:center;
}

.quick-nav-btn.active {
  background:rgba(0,0,0,0.82); color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12);
  transform:scale(1.04);
}

.quick-nav-btn:not(.active):hover {
  background:rgba(0,0,0,0.06); transform:scale(1.02);
}
.quick-nav-btn:active { transform:scale(0.96) }

.titulo-seccion-catalogo {
  scroll-margin-top:110px;
}

/* ── Quick Nav responsive ── */
@media (max-width:768px) {
  .quick-nav {
    padding:4px; margin-bottom:18px;
    border-radius:50px; gap:2px;
  }
  .quick-nav-btn {
    padding:8px 12px; font-size:0.6rem; letter-spacing:1px;
    min-height:38px; border-radius:50px;
  }
}
@media (max-width:420px) {
  .quick-nav {
    flex-direction:row; margin-bottom:14px;
    border-radius:50px; padding:3px; gap:2px;
  }
  .quick-nav-btn {
    padding:7px 11px; font-size:0.6rem;
    min-height:34px; border-radius:50px;
  }
}
footer {
  margin-top:0; padding:60px 20px; background:var(--az-700);
  border-top:1px solid rgba(0,0,0,0.2); text-align:center;
}
.footer-logo { color:var(--az-200); font-weight:900; font-size:2.5rem; letter-spacing:5px; margin-bottom:10px; font-family:'Cinzel',serif }
.copyright { color:var(--az-200) }
.footer-small { font-size:0.75rem; color:var(--text-secondary); margin-top:10px }

/* ==========================================================================
   17. RESPONSIVE — CONSOLIDADO
   ========================================================================== */

/* ── Tablets (max 768px) ── */
@media (max-width:768px) {
  body { background-attachment:scroll }

  .landing-container { min-height:auto; padding-top:10px; justify-content:flex-start }
  .landing-header { padding:8px 20px 12px }
  .landing-grid { margin-top:18px }

  .grid-productos { grid-template-columns:repeat(2,1fr); padding:10px; gap:12px }
  .img-wrapper { height:180px }
  .img-wrapper img { object-position:center top }

  .footer-compra-sticky { padding:15px }
  .boton-pedir { padding:12px 20px; font-size:0.9rem }
  .controles-scroll { display:none }

  .buscador-container { max-width:none; flex:1 }
  .nav-buttons { gap:10px }
  .nav-content { gap:15px; padding:0 12px }
  #input-busqueda { padding:10px 35px 10px 14px; font-size:0.9rem }
  .btn-icon-nav { width:44px!important; height:44px!important; min-width:44px; min-height:44px; max-width:44px; max-height:44px; font-size:1.5rem }
  .badge-count { width:18px; height:18px; font-size:0.65rem; top:-5px; right:-5px }

  .info-card { padding:14px; height:auto; min-height:120px }
  .info-card h3 { font-size:1rem }
  .precio-card { font-size:1.25rem }
  .texto-ver-detalles { font-size:0.7rem; padding-top:10px; letter-spacing:1px }

  .contenedor-categorias { padding:25px 15px; gap:25px }
  .tarjeta-categoria { max-width:100%; height:280px; border-radius:18px }
  .contenido-cat h2 { font-size:1.8rem }
  .contenido-cat p { font-size:0.9rem }
  .cta-publicidad { bottom:14px; padding:9px 16px; font-size:0.85rem }

  header { padding:60px 20px; min-height:400px }
  .texto-oro-liquido { font-size:5rem }
  .subtitulo-vip { font-size:1.5rem }

  .modal-content { max-width:95%; border-radius:22px }
  .producto-imagen-grande { height:320px }
  #modal-titulo-producto { font-size:1.8rem }
  .precio-modal { font-size:2rem }

  /* Promo */
  .promo-section { gap:40px; padding:40px 15px }
  .promo-block, .promo-block-reverse { flex-direction:column; border-radius:16px }
  .promo-image { flex:none; max-width:100%; width:100%; border-radius:16px 16px 0 0 }
  .promo-image img { min-height:220px; max-height:260px; border-radius:16px 16px 0 0 }
  .promo-content { padding:25px 20px 30px; text-align:center }
  .promo-content h2 { font-size:1.6rem }
  .promo-btn { padding:12px 35px; font-size:0.9rem }

  .success-alert { right:12px; top:75px }
  .btn-order-now { bottom:15px; padding:16px 40px; font-size:1rem }
}

/* ── Móviles medianos (max 600px) ── */
@media (max-width:600px) {
  body { padding-top:105px }
  nav { padding:12px 10px }

  .grid-productos { padding:8px; gap:10px }
  .img-wrapper { height:160px }
  .img-wrapper .carrusel-arrow { width:22px; height:34px; font-size:0.8rem }
  .carrusel-arrow { width:34px; height:50px; font-size:1.05rem }

  .nav-content { gap:8px; padding:0 6px }
  .nav-buttons { gap:6px }
  .btn-icon-nav { width:38px!important; height:38px!important; min-width:38px; min-height:38px; max-width:38px; max-height:38px; font-size:1.25rem }
  .btn-inicio { width:36px!important; height:36px!important; min-width:36px; min-height:36px; max-width:36px; max-height:36px; font-size:1.2rem }
  .buscador-container { max-width:min(220px, 45vw); flex-grow:1 }
  #input-busqueda { padding:8px 28px 8px 10px; font-size:0.82rem }
  .icono-lupa { font-size:1rem; right:10px }

  .info-card { padding:12px; min-height:110px }
  .info-card h3 { font-size:0.92rem }
  .precio-card { font-size:1.15rem }

  header { padding:50px 18px; min-height:380px }
  .texto-oro-liquido { font-size:4.5rem }
  .subtitulo-vip { font-size:1.4rem; letter-spacing:5px }
  .slogan { font-size:0.8rem; letter-spacing:4px }

  .floating-cart-panel { right:10px; left:10px; bottom:88px; max-height:68vh }
  .floating-cart-list { max-height:180px }
  .btn-whatsapp { width:62px; height:62px }
  .btn-whatsapp i { font-size:1.7rem }
  .footer-compra-sticky { padding:14px 16px }
  .total-final #total-precio { font-size:1.5rem }
  .boton-pedir { padding:11px 20px; font-size:0.9rem }
}

/* ── Móviles pequeños (max 420px) ── */
@media (max-width:420px) {
  body { padding-top:100px }
  nav { padding:12px 8px }

  .landing-container { padding-top:5px; min-height:auto }
  .landing-header { padding:5px 15px 8px }
  .landing-grid { gap:20px; padding:0 15px; margin-top:15px }
  .landing-card { width:155px; height:250px; border-radius:14px }
  .landing-grid-3 { gap:14px }
  .landing-grid-3 .landing-card { width:104px; height:190px; border-radius:12px }
  .landing-grid-3 .landing-card-content h3 { font-size:0.62rem }
  .landing-card-content { padding:15px 10px }
  .landing-card-content h3 { font-size:0.75rem }

  .grid-productos { padding:8px; gap:8px }
  .img-wrapper { height:180px }
  .tarjeta-producto { border-radius:14px }
  .info-card { padding:10px; height:auto }
  .info-card h3 { font-size:0.85rem }
  .precio-card { font-size:1.1rem }

  .nav-content { gap:8px; padding:0 6px }
  .nav-buttons { gap:8px }
  .btn-icon-nav { font-size:1.3rem; width:44px!important; height:44px!important; min-width:44px; min-height:44px; max-width:44px; max-height:44px }
  .btn-inicio { width:42px!important; height:42px!important; min-width:42px; min-height:42px; max-width:42px; max-height:42px; font-size:1.2rem }
  .badge-count { width:16px; height:16px; font-size:0.6rem; top:-4px; right:-4px; border-width:1.5px }
  .buscador-container { max-width:none; flex-grow:1 }
  #input-busqueda { padding:10px 32px 10px 12px; font-size:0.9rem }
  .icono-lupa { font-size:1.1rem; right:10px }

  .modal-content { max-height:92vh; margin:2vh 0 6vh 0; max-width:100%; width:98%; border-radius:16px }
  .producto-imagen-grande { height:clamp(200px,35vh,280px) }
  .btn-quitar-carrito, .boton-whatsapp-modal, .boton-pedir { padding:10px 16px; font-size:0.82rem; gap:5px; border-radius:30px }
  .btn-quitar-carrito i, .boton-whatsapp-modal i, .boton-pedir i { font-size:0.95rem }

  .btn-whatsapp { width:58px; height:58px; right:14px; bottom:14px }
  .btn-whatsapp i { font-size:1.5rem }

  .floating-cart-panel { right:8px; left:8px; bottom:82px; max-height:62vh }
  .floating-cart-list { max-height:140px }
  .floating-cart-footer { padding:12px 10px }
  .floating-total { font-size:1rem; margin-bottom:8px }
  .floating-actions { flex-direction:column }
  .btn-primary { padding:11px 14px; font-size:0.92rem; min-height:44px }
  button, .btn-primary, .btn-secondary { min-height:44px }

  .contenedor-categorias { padding:18px 10px; gap:18px }
  .tarjeta-categoria { height:240px; border-radius:16px }
  .contenido-cat h2 { font-size:1.5rem }
  .contenido-cat p { font-size:0.85rem; margin-bottom:15px }
  .btn-entrar { padding:10px 22px; font-size:0.8rem }
  .cta-publicidad { bottom:12px; padding:8px 14px; font-size:0.78rem; border-radius:10px }

  header { padding:45px 15px; min-height:340px }
  .texto-oro-liquido { font-size:3.8rem }
  .subtitulo-vip { font-size:1.25rem; letter-spacing:4px }
  .separador-dorado { width:65px; margin:18px auto }
  .slogan { font-size:0.72rem; letter-spacing:3px }

  .footer-compra-sticky { padding:10px 14px }
  .total-final span:first-child { font-size:0.75rem }
  .total-final #total-precio { font-size:1.3rem }

  .carrito-header-sticky { padding:12px 15px; top:100px }
  .carrito-titulo { font-size:1rem; letter-spacing:1px }
  .btn-comprar-carrito { padding:10px 16px; font-size:0.8rem; gap:6px }
  .btn-comprar-carrito i { font-size:1rem }

  .carrito-card-info { padding:10px 8px!important }
  .carrito-card-info h3 { font-size:0.85rem }
  .qty-controls-carrito { gap:10px }
  .qty-controls-carrito .btn-cant { width:32px; height:32px; font-size:0.9rem }
  .qty-controls-carrito .qty-number { font-size:1rem; min-width:26px }
  .carrito-card-info .subtotal-text { font-size:1rem }

  .success-alert { right:10px; top:70px; max-width:calc(100% - 20px) }
  .success-alert .success-card { padding:10px 12px; gap:8px }
  .success-alert .success-icon { width:36px; height:36px; flex-shrink:0 }
  .success-alert .success-text { font-size:0.8rem; font-weight:700 }

  .btn-order-now { bottom:10px; padding:14px 32px; font-size:0.95rem; letter-spacing:0.5px; max-width:calc(100% - 20px) }
}

/* ── Móviles muy pequeños (max 375px) ── */
@media (max-width:375px) {
  body { padding-top:95px }
  nav { padding:11px 6px }

  .nav-content { gap:7px; padding:0 4px }
  .nav-buttons { gap:6px }
  .btn-icon-nav { font-size:1.2rem; width:40px!important; height:40px!important; min-width:40px; min-height:40px; max-width:40px; max-height:40px }
  .btn-inicio { width:38px!important; height:38px!important; min-width:38px; min-height:38px; max-width:38px; max-height:38px; font-size:1.1rem }
  .badge-count { width:14px; height:14px; font-size:0.5rem; top:-3px; right:-3px }
  #input-busqueda { padding:9px 30px 9px 11px; font-size:0.85rem }
  .icono-lupa { font-size:1rem; right:7px }

  .grid-productos { padding:8px; gap:12px }
  .img-wrapper { height:160px }
  .tarjeta-producto { border-radius:12px }
  .info-card { padding:8px }
  .info-card h3 { font-size:0.98rem }
  .precio-card { font-size:1.2rem }

  .modal-content { width:100%; border-radius:14px; max-height:92vh; margin:2vh 0 6vh 0 }
  .producto-imagen-grande { height:170px }
  .producto-imagen-grande img { max-width:65%; max-height:78% }
  #modal-titulo-producto { font-size:1.2rem; line-height:1.2 }
  .precio-modal { font-size:1.35rem }
  .producto-info-base { padding:0 12px; margin-top:-10px }
  .modelo-texto { font-size:0.8rem; margin-bottom:6px }
  .separador-modal { margin:12px 0 }
  .seccion-variantes { padding:8px 12px }
  .chip-variante { padding:5px 9px; font-size:0.72rem; border-radius:7px }
  .seccion-compra { padding:8px 12px; gap:8px; flex-direction:column }
  .control-cantidad-wrapper, .metodo-pago-wrapper { min-width:100%; flex:none }
  .control-cantidad-wrapper label, .metodo-pago-wrapper label { font-size:0.68rem; margin-bottom:4px }
  .control-cantidad { padding:4px; border-radius:12px }
  .btn-cant { width:32px; height:32px; font-size:0.9rem; border-radius:9px }
  #cantidad-seleccionada { font-size:0.95rem; width:38px }
  .toggle-pago { padding:3px; border-radius:12px }
  .toggle-pago label { padding:8px 0; font-size:0.72rem; border-radius:9px }
  .footer-compra-sticky { padding:10px 12px; flex-wrap:wrap; gap:6px }
  .total-final { flex:1; min-width:90px }
  .total-final span:first-child { font-size:0.7rem }
  .total-final #total-precio { font-size:1.2rem }
  .boton-pedir, .btn-quitar-carrito, .boton-whatsapp-modal { padding:9px 14px; font-size:0.78rem; gap:4px; border-radius:25px; flex:1; min-width:130px }
  .boton-pedir i, .btn-quitar-carrito i, .boton-whatsapp-modal i { font-size:0.9rem }

  .btn-whatsapp { width:54px; height:54px; right:12px; bottom:12px }
  .btn-whatsapp i { font-size:1.4rem }
  .floating-cart-panel { right:6px; left:6px; bottom:78px; max-height:58vh }
  .floating-cart-list { max-height:120px }
  .floating-cart-item { padding:8px; gap:8px }
  .floating-cart-item img { width:40px; height:40px }
  .fci-name { font-size:0.85rem }
  .fci-price { font-size:0.9rem }
  .floating-cart-item .btn-cant { width:26px; height:26px }

  .tarjeta-categoria { height:220px }
  .contenido-cat h2 { font-size:1.4rem }
  .btn-entrar { padding:9px 20px; font-size:0.75rem }

  header { padding:40px 12px; min-height:320px }
  .texto-oro-liquido { font-size:3.2rem }
  .subtitulo-vip { font-size:1.1rem; letter-spacing:3px }
  .slogan { font-size:0.68rem; letter-spacing:2px }

  .landing-grid { gap:15px }
  .landing-card { width:140px; height:230px }

  .carrito-header-sticky { padding:10px 12px; top:95px }
  .carrito-titulo { font-size:0.9rem }
  .btn-comprar-carrito { padding:8px 12px; font-size:0.75rem }

  .carrito-card-info { padding:8px 6px!important }
  .carrito-card-info h3 { font-size:0.8rem }
  .qty-controls-carrito { gap:8px; margin:6px 0 }
  .qty-controls-carrito .btn-cant { width:30px; height:30px; font-size:0.85rem; border-radius:8px }
  .qty-controls-carrito .qty-number { font-size:0.95rem; min-width:24px }
  .carrito-card-info .subtotal-text { font-size:0.95rem }

  .success-alert { right:8px; top:65px; max-width:calc(100% - 16px) }
  .success-alert .success-card { padding:9px 11px; gap:6px }
  .success-alert .success-icon { width:34px; height:34px; font-size:0.9rem }
  .success-alert .success-text { font-size:0.75rem }
}

/* ── Ultra pequeños (max 360px) ── */
@media (max-width:360px) {
  .landing-grid { gap:15px }
  .landing-card { width:140px; height:230px }
  .landing-card-content h3 { font-size:0.75rem }
}

/* ── Ultra mini (max 320px) ── */
@media (max-width:320px) {
  body { padding-top:90px }
  nav { padding:10px 4px }

  .nav-content { gap:5px; padding:0 3px }
  .nav-buttons { gap:5px }
  .btn-icon-nav { font-size:1.1rem; width:36px!important; height:36px!important; min-width:36px; min-height:36px; max-width:36px; max-height:36px }
  .btn-inicio { width:34px!important; height:34px!important; min-width:34px; min-height:34px; max-width:34px; max-height:34px; font-size:1rem }
  #input-busqueda { padding:8px 26px 8px 8px; font-size:0.8rem }
  .icono-lupa { font-size:0.9rem; right:6px }

  .grid-productos { padding:6px; gap:6px }
  .img-wrapper { height:140px }
  .tarjeta-producto { border-radius:10px }
  .info-card { padding:6px }
  .info-card h3 { font-size:0.75rem }
  .precio-card { font-size:0.95rem }

  .modal-content { width:100%; border-radius:12px; max-height:92vh; margin:2vh 0 6vh 0 }
  .producto-imagen-grande { height:150px }
  .producto-imagen-grande img { max-width:60%; max-height:75% }
  #modal-titulo-producto { font-size:1.1rem }
  .precio-modal { font-size:1.25rem }
  .producto-info-base { padding:0 10px; margin-top:-8px }
  .chip-variante { padding:4px 8px; font-size:0.68rem }
  .seccion-compra { padding:6px 10px; gap:6px }
  .btn-cant { width:30px; height:30px; font-size:0.85rem }
  .toggle-pago label { padding:7px 0; font-size:0.68rem }
  .footer-compra-sticky { padding:8px 10px }
  .total-final #total-precio { font-size:1.1rem }
  .boton-pedir, .btn-quitar-carrito, .boton-whatsapp-modal { padding:8px 12px; font-size:0.75rem; min-width:110px }

  .btn-whatsapp { width:50px; height:50px; right:10px; bottom:10px }
  .btn-whatsapp i { font-size:1.3rem }
  .floating-cart-panel { right:4px; left:4px; bottom:72px; max-height:55vh }
  .floating-cart-list { max-height:100px }

  .carrito-card-info { padding:6px 4px!important; gap:2px }
  .carrito-card-info h3 { font-size:0.75rem }
  .carrito-card-info .variante-text, .carrito-card-info .precio-unitario-text { font-size:0.7rem }
  .qty-controls-carrito { gap:6px; margin:4px 0 }
  .qty-controls-carrito .btn-cant { width:26px; height:26px; font-size:0.8rem; border-radius:6px }
  .qty-controls-carrito .qty-number { font-size:0.9rem; min-width:20px }
  .carrito-card-info .subtotal-text { font-size:0.85rem }
}

/* ── Tablets grandes (min 768px) ── */
@media (min-width:768px) {
  .landing-grid { gap:50px; max-width:900px }
  .landing-card { width:320px; height:450px; border-radius:24px }
  .landing-card-content { padding:28px 20px }
  .landing-card-content h3 { font-size:1.3rem }
  .nav-content { gap:25px }
}

/* ── Desktop (min 1024px) ── */
@media (min-width:1024px) {
  .landing-grid { gap:60px; max-width:1000px }
  .landing-card { width:360px; height:480px }
}

/* ==========================================================================
   18. SAFE AREA & ACCESSIBILITY
   ========================================================================== */
@supports (padding:env(safe-area-inset-bottom)) {
  body { padding-bottom:env(safe-area-inset-bottom) }
  .btn-whatsapp { bottom:calc(18px + env(safe-area-inset-bottom)) }
  .floating-cart-panel { bottom:calc(90px + env(safe-area-inset-bottom)) }
}