/* ============================================================
   ÓPTICA EL CRISTAL — CimaTech V1.0
   estilos.css — Sistema de Diseño Completo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ══ VARIABLES DINÁMICAS (sobreescritas por JS desde Firestore) ══ */
:root {
  /* ░ TIENDA UNIVERSAL — e-commerce claro y de confianza ░ */
  --color-primary:    #6d4aff;   /* violeta vibrante */
  --color-secondary:  #8b6bff;
  --color-accent:     #ff5da2;   /* rosa/coral acento */

  --color-bg-sitio:        #f7f7fb;   /* gris muy claro */
  --color-header-bg:       rgba(255,255,255,0.92);
  --color-footer-bg:       #16131f;
  --color-btn-primary-bg:  var(--color-primary);
  --color-btn-primary-txt: #ffffff;
  --color-text-primary:    #1a1726;
  --color-text-subtitle:   #6b6680;
  --color-text-label:      #6d4aff;

  /* Superficies (en claro, "oscuros" → blancos/cremas) */
  --azul-profundo:    #ffffff;
  --azul-marino:      #ffffff;
  --azul-medio:       #f0eef7;
  --azul-cristal:     var(--color-primary);
  --celeste:          var(--color-secondary);
  --celeste-claro:    #6d4aff;
  --turquesa:         var(--color-accent);
  --blanco:           #1a1726;   /* "texto blanco" → tinta oscura en claro */
  --blanco-suave:     #2a2636;
  --gris-claro:       #423d54;
  --gris-medio:       #8b85a0;

  /* Acentos fijos */
  --acento-oro:       #6d4aff;
  --acento-exito:     #16b87a;
  --acento-alerta:    #ff7a3d;
  --acento-promo:     #ff3d6b;

  /* Gradientes */
  --grad-hero:        linear-gradient(165deg, #ffffff 0%, #f3f0ff 55%, #ffe9f3 100%);
  --grad-cristal:     linear-gradient(135deg, #6d4aff 0%, #8b6bff 100%);
  --grad-card:        #ffffff;
  --grad-promo:       linear-gradient(135deg, #ff5da2, #ff7a3d);

  /* Tipografía */
  --font-display:     'Plus Jakarta Sans', sans-serif;
  --font-body:        'Inter', sans-serif;
  --font-mono:        'Inter', sans-serif;

  /* Sombras suaves premium */
  --sombra-card:      0 6px 24px rgba(26,23,38,0.06);
  --sombra-hover:     0 16px 44px rgba(109,74,255,0.16);
  --sombra-glow:      0 6px 24px rgba(109,74,255,0.25);
  --sombra-promo:     0 8px 24px rgba(255,61,107,0.25);

  /* Bordes */
  --borde-cristal:    1px solid rgba(26,23,38,0.08);
  --borde-glow:       1px solid rgba(109,74,255,0.4);
  --radio-card:       18px;
  --radio-btn:        12px;

  /* Transiciones */
  --trans-rapida:     0.2s ease;
  --trans-media:      0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-lenta:      0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══ RESET ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background: var(--color-bg-sitio, var(--azul-profundo)); color: var(--blanco); overflow-x: hidden; }
.bg-aurora::before { content:''; position:absolute; inset:0; background:var(--color-bg-sitio); z-index:-1; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--azul-profundo); }
::-webkit-scrollbar-thumb { background: var(--celeste); border-radius: 3px; }

/* ══ FONDOS ══ */
/* Aurora de luces en movimiento — sutil, se adapta a cada tema */
.bg-aurora { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora-blob {
  position:absolute; border-radius:50%; filter:blur(90px); opacity:0.5;
  mix-blend-mode:normal; will-change:transform;
}
.aurora-1 { width:46vw; height:46vw; background:var(--color-primary);  top:-12%; left:-8%;  animation:auroraDrift1 26s ease-in-out infinite; }
.aurora-2 { width:40vw; height:40vw; background:var(--color-accent);   top:8%;  right:-10%; animation:auroraDrift2 32s ease-in-out infinite; }
.aurora-3 { width:38vw; height:38vw; background:var(--color-secondary);bottom:-14%; left:14%; animation:auroraDrift3 30s ease-in-out infinite; }
.aurora-4 { width:30vw; height:30vw; background:var(--color-primary);  bottom:2%; right:14%; animation:auroraDrift1 28s ease-in-out infinite reverse; }
@keyframes auroraDrift1 { 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(8%,10%) scale(1.12); } 66%{ transform:translate(-6%,4%) scale(0.95); } }
@keyframes auroraDrift2 { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-10%,8%) scale(1.15); } }
@keyframes auroraDrift3 { 0%,100%{ transform:translate(0,0) scale(1); } 40%{ transform:translate(10%,-8%) scale(1.1); } 70%{ transform:translate(4%,6%) scale(0.92); } }
/* En temas claros las luces son más tenues para no ensuciar el blanco */
html:not([data-tema="medianoche"]):not([data-tema="grafito"]):not([data-tema="esmeralda"]):not([data-tema="vino"]) .aurora-blob { opacity:0.22; filter:blur(100px); }
@media (prefers-reduced-motion: reduce){ .aurora-blob{ animation:none; } }

.bg-particles {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--acento-rgb), 0.04) 0%, transparent 60%);
}
.bg-grid { display:none; }

/* ══ ANIMACIONES ══ */
@keyframes fadeInUp    { from { opacity:0; transform:translateY(30px);  } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft  { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(40px);  } to { opacity:1; transform:translateX(0); } }
@keyframes pulseGlow   { 0%,100%{box-shadow:0 0 10px rgba(var(--acento-rgb), 0.3);} 50%{box-shadow:0 0 30px rgba(var(--acento-rgb), 0.7),0 0 60px rgba(var(--acento-rgb), 0.3);} }
@keyframes floatY      { 0%,100%{transform:translateY(0px);}  50%{transform:translateY(-12px);} }
@keyframes rotateRing  { from{transform:rotate(0deg);}   to{transform:rotate(360deg);} }
@keyframes blink       { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes shimmer     { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes promoFloat  { 0%,100%{transform:scale(1) rotate(-1deg);} 50%{transform:scale(1.03) rotate(1deg);} }
@keyframes slideInModal{ from{opacity:0;transform:scale(0.92) translateY(20px);} to{opacity:1;transform:scale(1) translateY(0);} }
@keyframes scanLine    { 0%{top:-2px;} 100%{top:100%;} }

.animate-fadeInUp   { animation: fadeInUp 0.6s ease forwards; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s ease forwards; }
.animate-float      { animation: floatY 4s ease-in-out infinite; }
.animate-glow       { animation: pulseGlow 2.5s ease-in-out infinite; }
.delay-1{animation-delay:0.1s;} .delay-2{animation-delay:0.2s;} .delay-3{animation-delay:0.3s;}
.delay-4{animation-delay:0.4s;} .delay-5{animation-delay:0.5s;} .delay-6{animation-delay:0.6s;}

/* ══ HEADER ══ */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--color-header-bg,rgba(var(--tarjeta-rgb), 0.85)); backdrop-filter: blur(20px);
  border-bottom: var(--borde-cristal); transition: var(--trans-media);
}
#header.scrolled { background: rgba(var(--tarjeta-rgb), 0.97); border-bottom-color: rgba(var(--acento-rgb), 0.4); }
.header-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 28px;
  height: 74px; display: flex; align-items: center; gap: 20px;
}
.logo-wrap { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-img  { height: 46px; width: auto; object-fit: contain; }
.logo-text { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--blanco); line-height: 1.15; white-space: nowrap; }
.logo-text span { color: var(--celeste); display: block; font-size: 0.62rem; font-weight: 400; letter-spacing: 2px; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.header-acciones { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-link {
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 600;
  color: var(--gris-medio); text-decoration: none; letter-spacing: 0.5px;
  padding: 8px 13px; border-radius: 8px; transition: var(--trans-rapida); position: relative;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--celeste-claro); background: rgba(var(--acento-rgb), 0.1); }
.nav-link::after {
  content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:var(--turquesa); border-radius:2px; transition:var(--trans-rapida);
}
.nav-link:hover::after { width: 60%; }
.btn-tienda-nav {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  color: var(--color-btn-primary-txt,var(--azul-profundo)); background: var(--grad-cristal);
  border: none; border-radius: var(--radio-btn); padding: 10px 24px;
  cursor: pointer; letter-spacing: 1px; transition: var(--trans-media);
  box-shadow: 0 4px 16px rgba(var(--acento-rgb), 0.3); display:inline-flex; align-items:center; gap:8px;
}
.btn-tienda-nav:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--acento-rgb), 0.5); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--celeste); border-radius:2px; transition:var(--trans-media); }

/* ══ HERO ══ */
#hero {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; background:var(--grad-hero); padding-top:72px;
}

/* Partículas CSS puras */
#hero::before {
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(circle, rgba(var(--acento-rgb), 0.6) 1px, transparent 1px),
    radial-gradient(circle, rgba(var(--acento-rgb), 0.4) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 120px 120px, 80px 80px, 200px 200px;
  background-position: 0 0, 40px 40px, 20px 60px;
  animation: particlesDrift 20s linear infinite;
}
@keyframes particlesDrift {
  0%   { background-position: 0 0,    40px 40px,   20px 60px; }
  100% { background-position: 120px 120px, 120px 120px, 220px 260px; }
}

.hero-ring { position:absolute; border-radius:50%; border:1px solid rgba(var(--acento-rgb), 0.12); }
.hero-ring-1 { width:700px;height:700px;top:-120px;right:-120px;animation:rotateRing 35s linear infinite; }
.hero-ring-2 { width:500px;height:500px;top:-80px;right:-80px;animation:rotateRing 22s linear infinite reverse;border-color:rgba(var(--acento-rgb), 0.18); }
.hero-ring-3 { width:900px;height:900px;bottom:-250px;left:-250px;animation:rotateRing 45s linear infinite;border-color:rgba(var(--primario-rgb), 0.08); }
.hero-ring-4 { width:300px;height:300px;top:15%;left:5%;animation:rotateRing 18s linear infinite;border-color:rgba(var(--acento-rgb), 0.08);border-style:dashed; }

.hero-content {
  position:relative;z-index:2;max-width:1280px;margin:0 auto;
  padding:40px 24px 60px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}

.hero-badge {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(var(--acento-rgb), 0.1);border:var(--borde-glow);border-radius:50px;
  padding:6px 16px;margin-bottom:24px;font-family:var(--font-mono);
  font-size:0.72rem;color:var(--turquesa);letter-spacing:2px;
}
.hero-badge::before {
  content:'';width:8px;height:8px;background:var(--turquesa);
  border-radius:50%;animation:blink 1.5s infinite;
}

.hero-title {
  font-family:var(--font-display);font-size:clamp(2.8rem,5.5vw,4.5rem);
  font-weight:700;line-height:1.0;color:var(--blanco);margin-bottom:10px;
  text-shadow: 0 0 40px rgba(var(--acento-rgb), 0.15);
}
.hero-title .highlight {
  background:var(--grad-cristal);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter: drop-shadow(0 0 20px rgba(var(--acento-rgb), 0.3));
}

.hero-subtitle {
  font-family:var(--font-display);font-size:1rem;font-weight:400;
  color:var(--gris-medio);letter-spacing:4px;text-transform:uppercase;margin-bottom:20px;
}
.hero-desc {
  font-size:1.05rem;color:var(--texto-tenue);line-height:1.8;
  margin-bottom:36px;max-width:480px;
}
.hero-btns { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px; }

/* Botones hero rediseñados */
.hero-btns .btn {
  font-size:0.92rem !important;
  padding:14px 28px !important;
  border-radius:50px !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
  position:relative;
  overflow:hidden;
}
.hero-btns .btn-cyan {
  background:var(--grad-cristal) !important;
  color:var(--azul-profundo) !important;
  box-shadow:0 6px 24px rgba(var(--acento-rgb), 0.45), 0 0 0 0 rgba(var(--acento-rgb), 0) !important;
}
.hero-btns .btn-cyan:hover {
  transform:translateY(-3px) scale(1.04) !important;
  box-shadow:0 12px 32px rgba(var(--acento-rgb), 0.6), 0 0 40px rgba(var(--acento-rgb), 0.2) !important;
}
.hero-btns .btn-cyan::after {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.3) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform 0.5s;
}
.hero-btns .btn-cyan:hover::after {
  transform:translateX(100%);
}
.hero-btns .btn-outline {
  background:rgba(var(--acento-rgb), 0.06) !important;
  color:var(--celeste-claro) !important;
  border:1.5px solid rgba(var(--acento-rgb), 0.5) !important;
  backdrop-filter:blur(8px);
}
.hero-btns .btn-outline:hover {
  background:rgba(var(--acento-rgb), 0.15) !important;
  border-color:var(--turquesa) !important;
  transform:translateY(-3px) scale(1.04) !important;
  box-shadow:0 8px 24px rgba(var(--acento-rgb), 0.2) !important;
  color:white !important;
}

/* Stats mejoradas */
.hero-stats {
  display:flex;gap:0;margin-top:44px;
  background:rgba(0,0,0,0.2);border:var(--borde-cristal);
  border-radius:16px;overflow:hidden;backdrop-filter:blur(8px);
  width:fit-content;
}
.stat-item {
  text-align:center;padding:16px 28px;position:relative;
}
.stat-item:not(:last-child)::after {
  content:'';position:absolute;right:0;top:20%;height:60%;
  width:1px;background:rgba(var(--acento-rgb), 0.2);
}
.stat-num {
  font-family:var(--font-display);font-size:2.2rem;font-weight:700;
  color:var(--turquesa);display:block;line-height:1;margin-bottom:4px;
  text-shadow:0 0 20px rgba(var(--acento-rgb), 0.5);
}
.stat-label { font-size:0.7rem;color:var(--gris-medio);letter-spacing:2px;text-transform:uppercase; }

/* Visual derecho — lente grande */
.hero-visual {
  display:flex;align-items:center;justify-content:center;
  position:relative;
  width:100%; height:100%;
  overflow:visible;
}

/* ── HUD Frame ── */
.hero-hud-frame {
  width:100%;max-width:460px;
  border:1px solid rgba(var(--acento-rgb), 0.3);
  border-radius:16px;
  overflow:hidden;
  animation:hudBorderPulse 4s ease-in-out infinite;
  position:relative;z-index:2;
}
@keyframes hudBorderPulse {
  0%,100%{border-color:rgba(var(--acento-rgb), 0.25);box-shadow:0 0 20px rgba(var(--acento-rgb), 0.05);}
  50%{border-color:rgba(var(--acento-rgb), 0.7);box-shadow:0 0 40px rgba(var(--acento-rgb), 0.15);}
}

/* Zona imagen */
.hero-hud-img {
  position:relative;
  width:100%;height:280px;
  background:radial-gradient(circle at 40% 40%,rgba(var(--acento-rgb), 0.08),var(--color-bg-sitio) 70%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-lens-ring  { display:none; }
.hero-lens-ring2 { display:none; }
.hero-lens-icon {
  font-size:5rem;
  filter:drop-shadow(0 0 24px rgba(var(--acento-rgb), 0.65));
  position:relative;z-index:3;
}
#heroLensWrap.has-image .hero-lens-icon { display:none; }
#heroOjoImg {
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  border-radius:0 !important;
}

/* Scan line */
.hud-scan-line {
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--acento-rgb), 0.9),transparent);
  animation:hudScan 2.5s linear infinite;
  top:0;pointer-events:none;z-index:5;
}
@keyframes hudScan { 0%{top:-2px} 100%{top:102%} }

/* Esquinas HUD */
.hud-corner {
  position:absolute;width:16px;height:16px;
  border-color:#00d4e8;border-style:solid;
  z-index:6;pointer-events:none;
}
.hud-tl{top:10px;left:10px;border-width:2px 0 0 2px;border-radius:3px 0 0 0;}
.hud-tr{top:10px;right:10px;border-width:2px 2px 0 0;border-radius:0 3px 0 0;}
.hud-bl{bottom:10px;left:10px;border-width:0 0 2px 2px;border-radius:0 0 0 3px;}
.hud-br{bottom:10px;right:10px;border-width:0 2px 2px 0;border-radius:0 0 3px 0;}

/* Badge sistema activo */
.hud-badge-top {
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:rgba(var(--acento-rgb), 0.12);border:1px solid rgba(var(--acento-rgb), 0.35);
  border-radius:4px;padding:3px 12px;
  font-family:var(--font-mono);font-size:0.6rem;color:var(--turquesa);
  letter-spacing:2px;white-space:nowrap;z-index:6;
  display:flex;align-items:center;gap:6px;
}
.hud-dot {
  width:5px;height:5px;background:var(--turquesa);border-radius:50%;
  display:inline-block;animation:blink 1.5s infinite;flex-shrink:0;
}

/* Panel acceso rápido */
.hero-hud-panel {
  background:rgba(4,10,22,0.97);
  border-top:1px solid rgba(var(--acento-rgb), 0.15);
  padding:14px 12px 12px;
}
.hud-panel-label {
  font-family:var(--font-mono);font-size:0.6rem;
  color:rgba(var(--acento-rgb), 0.45);letter-spacing:2px;
  text-align:center;margin-bottom:10px;
}
.hero-hud-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}

/* Chips HUD flotantes */
.hero-hud-chip {
  background:rgba(var(--acento-rgb), 0.07);
  border:1px solid rgba(var(--acento-rgb), 0.22);
  border-radius:10px;padding:10px 8px;
  text-align:center;cursor:pointer;
  transition:background 0.2s,border-color 0.2s;
  pointer-events:all;
}
.hero-hud-chip:hover {
  background:rgba(var(--acento-rgb), 0.18);
  border-color:rgba(var(--acento-rgb), 0.65);
}
.hero-hud-chip-icon { font-size:1.5rem;margin-bottom:5px;display:block; }
.hero-hud-chip-label {
  font-family:var(--font-mono);font-size:0.65rem;font-weight:700;
  color:var(--turquesa);letter-spacing:0.5px;display:block;
}
.hero-hud-chip-sub {
  font-size:0.6rem;color:var(--gris-medio);margin-top:2px;display:block;
}

/* Animaciones flotación individuales */
@keyframes hudFloat1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes hudFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes hudFloat3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes hudFloat4 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hud-f1 { animation:hudFloat1 3.0s ease-in-out infinite 0.0s; }
.hud-f2 { animation:hudFloat2 3.4s ease-in-out infinite 0.5s; }
.hud-f3 { animation:hudFloat3 2.8s ease-in-out infinite 0.3s; }
.hud-f4 { animation:hudFloat4 3.7s ease-in-out infinite 0.8s; }

/* Chips flotantes mejorados */
.hero-chip {
  position:absolute;
  background:rgba(var(--tarjeta-rgb), 0.88);
  border:1px solid rgba(var(--acento-rgb), 0.35);
  border-radius:14px;padding:10px 16px;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--acento-rgb), 0.1);
  z-index: 10;
  pointer-events:all;
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-chip:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(var(--acento-rgb), 0.3);
  border-color:rgba(var(--acento-rgb), 0.6);
}
.hero-chip-label { font-family:var(--font-mono);font-size:0.68rem;color:var(--turquesa);letter-spacing:1px;margin-bottom:3px; }
.hero-chip-val   { font-family:var(--font-display);font-size:0.92rem;color:var(--blanco);font-weight:700; }

/* ══ SECCIONES ══ */
.seccion { position:relative;z-index:1;padding:100px 24px; }
.seccion-inner { max-width:1280px;margin:0 auto; }
.seccion-titulo { font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;text-align:center;color:var(--blanco);margin-bottom:12px; }
.seccion-titulo .hl { color:var(--celeste); }
.seccion-linea { width:60px;height:3px;background:var(--grad-cristal);border-radius:3px;margin:0 auto 16px; }
.seccion-subtitulo { text-align:center;color:var(--gris-medio);font-size:1rem;max-width:600px;margin:0 auto 60px;line-height:1.6; }

/* ══ CARDS ══ */
.card {
  background:rgba(var(--tarjeta-rgb), 0.6);border:var(--borde-cristal);border-radius:var(--radio-card);
  backdrop-filter:blur(12px);transition:var(--trans-media);overflow:hidden;position:relative;
}
.card:hover { transform:translateY(-6px);border-color:rgba(var(--acento-rgb), 0.4);box-shadow:var(--sombra-hover); }
.card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-cristal);opacity:0;transition:var(--trans-media); }
.card:hover::before { opacity:1; }

/* ══ BADGE PROMO ══ */
.badge-promo {
  display:inline-flex;align-items:center;gap:6px;background:var(--grad-promo);color:white;
  font-family:var(--font-display);font-size:0.8rem;font-weight:700;padding:6px 14px;border-radius:50px;
  animation:promoFloat 2s ease-in-out infinite;box-shadow:var(--sombra-promo);letter-spacing:0.5px;
}

/* ══ MODALES ══ */
.modal-overlay {
  position:fixed;inset:0;z-index:2000;background:rgba(5,15,30,0.9);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity 0.3s ease;
}
.modal-overlay.activo { opacity:1;pointer-events:all; }
.modal-box {
  background:linear-gradient(145deg, rgba(var(--tarjeta-rgb),0.98), rgba(var(--tarjeta-rgb),0.92));border:var(--borde-glow);border-radius:24px;
  width:100%;max-width:600px;max-height:90vh;overflow-y:auto;padding:32px;
  animation:slideInModal 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
  box-shadow:0 32px 80px rgba(0,0,0,0.5),var(--sombra-glow);position:relative;
}
.modal-close {
  position:absolute;top:16px;right:16px;background:rgba(255,255,255,0.1);border:none;
  color:var(--gris-medio);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;transition:var(--trans-rapida);
}
.modal-close:hover { background:rgba(255,61,107,0.3);color:white; }

/* ══ FORMULARIOS ══ */
.form-group { margin-bottom:20px; }
.form-label { display:block;font-family:var(--font-display);font-size:0.85rem;font-weight:600;color:var(--celeste-claro);letter-spacing:1px;margin-bottom:8px;text-transform:uppercase; }
.form-input, .form-select {
  width:100%;background:rgba(var(--tarjeta-rgb), 0.8);border:1px solid rgba(var(--acento-rgb), 0.25);
  border-radius:10px;padding:12px 16px;color:var(--blanco);font-family:var(--font-body);font-size:0.95rem;
  transition:var(--trans-rapida);outline:none;
}
.form-input:focus, .form-select:focus { border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(var(--acento-rgb), 0.15); }
.form-input::placeholder { color:rgba(139,164,192,0.6); }
textarea.form-input { resize:vertical; }
.form-row   { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.form-row-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px; }

/* ══ BOTONES ══ */
.btn { cursor:pointer;border:none;border-radius:var(--radio-btn);transition:var(--trans-media);font-family:var(--font-display);font-weight:600;letter-spacing:1px;display:inline-flex;align-items:center;gap:8px; }
.btn-sm  { font-size:0.8rem;  padding:8px 18px; }
.btn-md  { font-size:0.9rem;  padding:12px 24px; }
.btn-lg  { font-size:1rem;    padding:14px 32px; }
.btn-primary {
  cursor: pointer;
  border: none;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-cristal);
  color: var(--azul-profundo);
  box-shadow: 0 6px 28px rgba(var(--acento-rgb), 0.45);
  border-radius: 50px;
  padding: 15px 32px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-primary::after {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.35) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform 0.55s;
}
.btn-primary:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 36px rgba(var(--acento-rgb), 0.6), 0 0 50px rgba(var(--acento-rgb), 0.2);
}
.btn-primary:hover::after { transform: translateX(100%); }

.btn-secondary {
  cursor: pointer;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--acento-rgb), 0.07);
  color: var(--celeste-claro);
  border: 1.5px solid rgba(var(--acento-rgb), 0.45);
  border-radius: 50px;
  padding: 14px 30px;
  font-size: 0.95rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-secondary:hover {
  background: rgba(var(--acento-rgb), 0.16);
  border-color: var(--turquesa);
  color: white;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 28px rgba(var(--acento-rgb), 0.25);
}
.btn-cyan     { background:var(--grad-cristal);color:var(--azul-profundo);box-shadow:0 4px 16px rgba(var(--acento-rgb), 0.3); }
.btn-cyan:hover    { transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--acento-rgb), 0.5); }
.btn-outline  { background:transparent;color:var(--celeste-claro);border:var(--borde-glow); }
.btn-outline:hover { background:rgba(var(--acento-rgb), 0.1); }
.btn-danger   { background:linear-gradient(135deg,#ff3d6b,#c0244f);color:white; }
.btn-danger:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,61,107,0.4); }
.btn-success  { background:linear-gradient(135deg,#00e5a0,#00a87a);color:var(--azul-profundo); }
.btn-success:hover { transform:translateY(-2px); }
.btn-whatsapp { background:linear-gradient(135deg,#25D366,#128C7E);color:white; }
.btn-whatsapp:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,0.4); }

/* ══ MODAL COMPRA — PASOS ══ */
.paso-indicator { display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto; }
.paso-num {
  width:32px;height:32px;border-radius:50%;background:rgba(var(--acento-rgb), 0.15);border:2px solid rgba(var(--acento-rgb), 0.3);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.85rem;font-weight:700;
  color:var(--gris-medio);transition:var(--trans-media);
}
.paso-label { font-family:var(--font-mono);font-size:0.65rem;color:var(--gris-medio);letter-spacing:1px;text-transform:uppercase; }
.paso-indicator.activo .paso-num { background:var(--grad-cristal);border-color:var(--turquesa);color:var(--azul-profundo);box-shadow:0 0 12px rgba(var(--acento-rgb), 0.5); }
.paso-indicator.activo .paso-label { color:var(--turquesa); }
.paso-indicator.completado .paso-num { background:var(--acento-exito);border-color:var(--acento-exito);color:var(--azul-profundo); }
.paso-linea { flex:1;height:2px;background:rgba(var(--acento-rgb), 0.2);margin:0 8px;margin-bottom:18px;border-radius:2px;transition:var(--trans-media); }
.paso-linea.activo { background:var(--turquesa); }

/* ══ MÉTODOS PAGO ══ */
.metodo-pago-card {
  background:rgba(var(--tarjeta-rgb), 0.7);border:var(--borde-cristal);border-radius:12px;padding:16px 12px;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:var(--trans-media);
  font-family:var(--font-display);font-size:0.88rem;font-weight:600;color:var(--gris-medio);text-align:center;
}
.metodo-pago-card:hover { border-color:rgba(var(--acento-rgb), 0.4);background:rgba(var(--acento-rgb), 0.08);color:var(--celeste-claro);transform:translateY(-2px); }
.metodo-pago-card.seleccionado { border-color:var(--turquesa);background:rgba(var(--acento-rgb), 0.12);color:var(--turquesa);box-shadow:0 0 16px rgba(var(--acento-rgb), 0.2); }

/* ══ PRODUCTO CARD ══ */
.producto-card {
  background:rgba(var(--tarjeta-rgb), 0.7);border:var(--borde-cristal);border-radius:20px;overflow:hidden;
  position:relative;transition:var(--trans-media);backdrop-filter:blur(8px);
}
.producto-card:hover { transform:translateY(-8px) scale(1.01);border-color:rgba(var(--acento-rgb), 0.5);box-shadow:var(--sombra-hover); }
.producto-img-wrap { width:100%;height:220px;overflow:hidden;background:#ffffff;position:relative;cursor:zoom-in;border-radius:16px 16px 0 0; }
.producto-img-wrap img { width:100%;height:100%;object-fit:contain;padding:8px;transition:transform 0.4s ease; }
.producto-card:hover .producto-img-wrap img { transform:scale(1.06); }
.producto-img-placeholder { width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(var(--acento-rgb), 0.4);gap:8px; }
.producto-body { padding:20px; }
.producto-marca { font-family:var(--font-display);font-size:0.75rem;font-weight:700;color:var(--celeste);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px; }
.producto-nombre { font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--blanco);margin-bottom:12px; }
.producto-formula { background:rgba(var(--acento-rgb), 0.06);border:var(--borde-cristal);border-radius:8px;padding:10px 12px;margin-bottom:12px;font-family:var(--font-mono);font-size:0.78rem;color:var(--gris-medio);display:grid;grid-template-columns:1fr 1fr;gap:4px; }
.formula-item { display:flex;justify-content:space-between; }
.formula-label { color:rgba(139,164,192,0.7); }
.formula-val   { color:var(--celeste-claro);font-weight:700; }
.producto-precio { font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--turquesa);margin-bottom:16px; }
.producto-precio span { font-size:0.85rem;color:var(--gris-medio);font-weight:400; }

/* ══ TIENDA — BUSCADOR ══ */
.formula-search { background:rgba(var(--tarjeta-rgb), 0.8);border:var(--borde-glow);border-radius:20px;padding:32px;backdrop-filter:blur(16px);box-shadow:var(--sombra-card); }
.formula-tabs { display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap; }
.formula-tab { font-family:var(--font-display);font-size:0.85rem;font-weight:600;padding:8px 20px;border-radius:50px;cursor:pointer;border:var(--borde-cristal);color:var(--gris-medio);background:transparent;transition:var(--trans-rapida);letter-spacing:1px; }
.formula-tab.activo { background:var(--grad-cristal);color:var(--azul-profundo);border-color:transparent; }

/* ══ FOOTER ══ */
#footer { background:var(--color-footer-bg,#060f1e);border-top:var(--borde-cristal);padding:60px 24px 32px;position:relative;z-index:1; }
.footer-inner { max-width:1280px;margin:0 auto; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px; }
.footer-logo-wrap { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.footer-logo { height:40px; }
.footer-desc { color:var(--gris-medio);font-size:0.9rem;line-height:1.6;max-width:280px; }
.footer-col h4 { font-family:var(--font-display);font-size:0.85rem;font-weight:700;color:var(--celeste);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px; }
.footer-col a, .footer-col p { display:block;color:var(--gris-medio);font-size:0.875rem;text-decoration:none;margin-bottom:8px;transition:var(--trans-rapida); }
.footer-col a:hover { color:var(--celeste-claro); }

/* ══ REDES SOCIALES ══ */
.footer-social { display:flex;gap:12px;margin-top:16px; }
.social-btn {
  width:40px;height:40px;border-radius:10px;background:rgba(var(--acento-rgb), 0.1);border:var(--borde-cristal);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:var(--trans-media);color:var(--gris-medio);
}
.social-btn:hover { background:rgba(var(--acento-rgb), 0.2);color:var(--turquesa);transform:translateY(-3px);box-shadow:0 6px 16px rgba(var(--acento-rgb), 0.2); }
.social-btn svg { width:18px;height:18px;fill:currentColor; }
.social-btn.fb:hover  { background:rgba(24,119,242,0.2);color:#1877F2; }
.social-btn.ig:hover  { background:rgba(225,48,108,0.2);color:#E1306C; }
.social-btn.wa:hover  { background:rgba(37,211,102,0.2);color:#25D366; }

/* ══ FOOTER CIMATECH ══ */
.footer-divider { height:1px;background:rgba(var(--acento-rgb), 0.15);margin-bottom:28px; }
.footer-cimatech {
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:16px 24px;background:rgba(var(--acento-rgb), 0.04);border:var(--borde-cristal);border-radius:12px;text-align:center;
}
.footer-cimatech span { color:var(--gris-medio);font-size:0.8rem; }
.footer-cimatech img { height:28px;width:auto;filter:brightness(0) invert(1) opacity(0.7); }
.footer-cimatech strong { color:var(--celeste-claro);font-family:var(--font-display);font-size:0.85rem;font-weight:700;letter-spacing:1px; }

/* ══ TOASTS ══ */
#toast-container { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px; }
.toast { background:rgba(var(--tarjeta-rgb), 0.95);border:var(--borde-glow);border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:12px;font-size:0.9rem;min-width:280px;animation:fadeInUp 0.4s ease forwards;box-shadow:var(--sombra-card); }
.toast.exito { border-color:var(--acento-exito); }
.toast.error { border-color:var(--acento-promo); }
.toast.info  { border-color:var(--turquesa); }

/* ══ PIN ADMIN ══ */
.pin-display { display:flex;gap:12px;justify-content:center;margin:24px 0; }
.pin-digit {
  width:56px;height:64px;border-radius:12px;background:rgba(var(--tarjeta-rgb), 0.8);border:2px solid rgba(var(--acento-rgb), 0.25);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:1.8rem;color:var(--turquesa);transition:var(--trans-media);
}
.pin-digit.activo { border-color:var(--turquesa);box-shadow:0 0 16px rgba(var(--acento-rgb), 0.3); }
.pin-teclado { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:220px;margin:0 auto; }
.pin-btn { background:rgba(var(--primario-rgb), 0.2);border:var(--borde-cristal);color:var(--blanco);font-family:var(--font-display);font-size:1.2rem;font-weight:700;padding:14px;border-radius:10px;cursor:pointer;transition:var(--trans-rapida); }
.pin-btn:hover { background:rgba(var(--acento-rgb), 0.2);color:var(--turquesa); }
.pin-btn.borrar { color:var(--acento-alerta); }
.pin-btn.enter  { background:var(--grad-cristal);color:var(--azul-profundo); }

/* ══ ADMIN PANEL ══ */
.admin-sidebar {
  width:240px;background:rgba(var(--tarjeta-rgb), 0.95);border-right:var(--borde-cristal);padding:24px 0;
  height:100vh;position:fixed;top:0;left:0;z-index:1500;backdrop-filter:blur(20px);
}
.admin-nav-item { display:flex;align-items:center;gap:12px;padding:12px 24px;color:var(--gris-medio);cursor:pointer;transition:var(--trans-rapida);font-family:var(--font-display);font-size:0.9rem;font-weight:600;border-left:3px solid transparent; }
.admin-nav-item:hover { color:var(--celeste-claro);background:rgba(var(--acento-rgb), 0.08); }
.admin-nav-item.activo { color:var(--turquesa);border-left-color:var(--turquesa);background:rgba(var(--acento-rgb), 0.08); }
.admin-content { margin-left:240px;padding:32px;min-height:100vh;background:var(--azul-profundo);overflow-y:auto; }
.admin-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;padding-bottom:20px;border-bottom:var(--borde-cristal); }
.admin-title { font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--blanco); }
.admin-title span { color:var(--celeste); }

/* ══ TABLA ADMIN ══ */
.tabla-wrap { overflow-x:auto;border-radius:12px;border:var(--borde-cristal); }
.tabla { width:100%;border-collapse:collapse;font-size:0.875rem; }
.tabla th { background:rgba(var(--primario-rgb), 0.3);color:var(--celeste-claro);font-family:var(--font-display);font-weight:700;letter-spacing:1px;padding:14px 16px;text-align:left;text-transform:uppercase;font-size:0.78rem;white-space:nowrap; }
.tabla td { padding:12px 16px;border-top:1px solid rgba(var(--acento-rgb), 0.1);color:var(--texto-tenue); }
.tabla tr:hover td { background:rgba(var(--acento-rgb), 0.05); }

/* ══ LOADING ══ */
.loading-overlay { position:fixed;inset:0;z-index:9998;background:var(--azul-profundo);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity 0.5s ease; }
.loading-ring { width:60px;height:60px;border-radius:50%;border:3px solid rgba(var(--acento-rgb), 0.2);border-top-color:var(--turquesa);animation:rotateRing 0.8s linear infinite; }
.loading-text { font-family:var(--font-display);color:var(--gris-medio);letter-spacing:3px;font-size:0.8rem; }

/* ══ SCROLL REVEAL ══ */
.reveal { opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal.delay-1 { transition-delay:0.1s; }
.reveal.delay-2 { transition-delay:0.2s; }
.reveal.delay-3 { transition-delay:0.3s; }
.reveal.delay-4 { transition-delay:0.4s; }
.reveal.delay-5 { transition-delay:0.5s; }
.reveal.delay-6 { transition-delay:0.6s; }

/* ══ WAVE DIVIDERS ══ */
.wave-divider {
  position:relative; z-index:2;
  overflow:hidden; line-height:0;
  margin-top:-2px;
}
.wave-divider svg { display:block; width:100%; }
.wave-down { transform:rotateX(180deg); }

/* ══ BOTÓN WHATSAPP FLOTANTE ══ */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:3000;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.4);
  text-decoration:none; transition:transform 0.3s ease;
  animation: waPulse 2.5s ease-in-out infinite;
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 12px 36px rgba(37,211,102,0.7); animation:none; }
.wa-float svg   { width:28px; height:28px; fill:white; }
.wa-float-tooltip {
  position:absolute; right:72px; top:50%; transform:translateY(-50%);
  background:rgba(var(--tarjeta-rgb), 0.95); color:var(--blanco);
  font-family:var(--font-display); font-size:0.8rem; font-weight:600;
  padding:8px 14px; border-radius:10px; white-space:nowrap;
  border:var(--borde-cristal); pointer-events:none;
  opacity:0; transition:opacity 0.2s ease;
}
.wa-float:hover .wa-float-tooltip { opacity:1; }
@keyframes waPulse {
  0%   { box-shadow:0 8px 28px rgba(37,211,102,0.5),0 0 0 0 rgba(37,211,102,0.4); }
  50%  { box-shadow:0 8px 28px rgba(37,211,102,0.5),0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow:0 8px 28px rgba(37,211,102,0.5),0 0 0 0 rgba(37,211,102,0); }
}

/* ══ SERVICIOS — CARDS MEJORADAS ══ */
.servicio-card {
  background:rgba(var(--tarjeta-rgb), 0.65);
  border:var(--borde-cristal); border-radius:20px;
  padding:32px 24px; text-align:center;
  position:relative; overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter:blur(10px);
}
.servicio-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; background:var(--grad-cristal);
  transform:scaleX(0); transition:transform 0.4s ease;
}
.servicio-card:hover {
  transform:translateY(-10px);
  border-color:rgba(var(--acento-rgb), 0.45);
  box-shadow:0 24px 60px rgba(var(--acento-rgb), 0.18);
  background:rgba(var(--tarjeta-rgb), 0.85);
}
.servicio-card:hover::before { transform:scaleX(1); }
.servicio-icon-wrap {
  width:72px; height:72px; border-radius:20px;
  background:linear-gradient(135deg,rgba(30,110,181,0.25),rgba(var(--acento-rgb), 0.12));
  border:1px solid rgba(var(--acento-rgb), 0.2);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; font-size:2rem;
  transition:all 0.4s ease;
}
.servicio-card:hover .servicio-icon-wrap {
  background:linear-gradient(135deg,rgba(var(--acento-rgb), 0.2),rgba(30,110,181,0.15));
  border-color:rgba(var(--acento-rgb), 0.4);
  box-shadow:0 0 20px rgba(var(--acento-rgb), 0.2);
  transform:scale(1.1);
}
.servicio-titulo {
  font-family:var(--font-display); font-size:1.05rem; font-weight:700;
  color:var(--blanco); margin-bottom:10px; letter-spacing:0.3px;
}
.servicio-desc { color:var(--gris-medio); font-size:0.875rem; line-height:1.65; }
.servicio-tag {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:14px; font-family:var(--font-mono);
  font-size:0.68rem; color:var(--turquesa); letter-spacing:1px;
}

/* ══ CONDICIÓN CARDS MEJORADAS ══ */
.condicion-card {
  background:linear-gradient(145deg, rgba(var(--tarjeta-rgb), 0.8), rgba(var(--tarjeta-rgb), 0.6));
  border:1px solid rgba(var(--acento-rgb), 0.18);
  border-radius:22px; padding:56px 26px;
  text-align:center; cursor:pointer;
  transition:all 0.38s cubic-bezier(0.4,0,0.2,1);
  position:relative; overflow:hidden;
  backdrop-filter:blur(12px);
}
.condicion-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(var(--acento-rgb), 0.15), transparent 60%);
  opacity:0; transition:opacity 0.38s ease;
}
.condicion-card:hover {
  transform:translateY(-10px) scale(1.04);
  border-color:rgba(var(--acento-rgb), 0.55);
  box-shadow:0 24px 60px rgba(var(--acento-rgb), 0.2), 0 0 0 1px rgba(var(--acento-rgb), 0.15);
}
.condicion-card:hover::after { opacity:1; }
.condicion-card.seleccionada {
  border-color:var(--turquesa);
  background:linear-gradient(145deg,rgba(var(--acento-rgb), 0.15),rgba(30,110,181,0.1));
  box-shadow:0 0 40px rgba(var(--acento-rgb), 0.25), 0 0 0 1px rgba(var(--acento-rgb), 0.3);
}
.condicion-card.seleccionada::after { opacity:1; }
.condicion-icon {
  font-size:6rem; margin-bottom:22px; display:block;
  position:relative; z-index:1;
  filter:drop-shadow(0 0 14px rgba(var(--acento-rgb), 0.5));
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.condicion-card:hover .condicion-icon { transform:scale(1.2) translateY(-4px); }
.condicion-nombre {
  font-family:var(--font-display); font-size:1.25rem;
  font-weight:700; color:var(--texto-tenue); letter-spacing:0.3px;
  line-height:1.35; position:relative; z-index:1;
  transition:color 0.3s ease;
}
.condicion-card:hover .condicion-nombre { color:var(--celeste-claro); }
.condicion-card.seleccionada .condicion-nombre { color:var(--turquesa); }
.condicion-badge {
  position:absolute; top:10px; right:10px;
  background:var(--grad-cristal); color:var(--azul-profundo);
  font-family:var(--font-mono); font-size:0.58rem; font-weight:700;
  padding:3px 8px; border-radius:20px; letter-spacing:1px; z-index:2;
}

/* ══ NOSOTROS — mejora grid ══ */
#nosotros .seccion-inner > div:nth-child(4) { gap:40px; }

/* ══ RESPONSIVE NUEVAS CLASES ══ */
@media (max-width:1024px) {
  .hero-content { grid-template-columns:1fr; text-align:center; }
  .hero-visual  { margin:0 auto 8px; max-width:520px; }
  .hero-btns    { justify-content:center; }
  .hero-stats   { justify-content:center; }
}
@media (max-width:768px) {
  .wa-float { bottom:20px;right:20px;width:54px;height:54px; }
  .hero-stats { width:100%;justify-content:center; }
  .stat-item { padding:12px 20px; }
}

/* ══ COLOR PICKER ADMIN ══ */
.color-picker-wrap { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.color-swatch {
  width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  transition:var(--trans-rapida);flex-shrink:0;
}
.color-swatch:hover, .color-swatch.activo { border-color:white;transform:scale(1.15);box-shadow:0 0 12px rgba(255,255,255,0.3); }
input[type="color"].color-input { width:44px;height:44px;border-radius:10px;border:var(--borde-cristal);background:transparent;cursor:pointer;padding:2px; }

/* ══ RESPONSIVE ══ */
@media (max-width:1024px) {
  .hero-content { grid-template-columns:1fr;text-align:center; }
  .hero-visual { margin:0 auto 8px; max-width:520px; }
  .hero-btns { justify-content:center; }
  .hero-stats { justify-content:center; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .admin-content { margin-left:0;padding:24px 16px; }
}
@media (max-width:1024px) {
  .nav-links { display:none; }
  .header-acciones { display:none; }
  .hamburger { display:flex; }
}
@media (max-width:768px) {
  .form-row   { grid-template-columns:1fr; }
  .form-row-3 { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr;gap:32px; }
  .seccion { padding:60px 16px; }
  .modal-box { padding:24px 20px; }
  #statsCRM { grid-template-columns:1fr 1fr !important; }
  #sec-ajustes > div:nth-child(2) { grid-template-columns:1fr !important; }
}
@media (max-width:480px) {
  .form-row-3 { grid-template-columns:1fr; }
  .hero-stats { gap:16px; }
  .pin-teclado { max-width:180px; }
}

/* ══════════════════════════════════════════════
   TIENDA V2 — CONDICIONES VISUALES + FLUJO 3 PASOS
══════════════════════════════════════════════ */

/* ── PASO INDICADOR TIENDA ── */
.tienda-pasos {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 48px; flex-wrap: wrap;
}
.tienda-paso {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: default; flex: 0 0 auto;
}
.tienda-paso-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(var(--acento-rgb), 0.1); border: 2px solid rgba(var(--acento-rgb), 0.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--gris-medio); transition: var(--trans-media);
}
.tienda-paso-label {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--gris-medio); letter-spacing: 1px; text-transform: uppercase;
}
.tienda-paso.activo .tienda-paso-num {
  background: var(--grad-cristal); border-color: var(--turquesa);
  color: var(--azul-profundo); box-shadow: 0 0 20px rgba(var(--acento-rgb), 0.5);
}
.tienda-paso.activo .tienda-paso-label { color: var(--turquesa); }
.tienda-paso.completado .tienda-paso-num {
  background: var(--acento-exito); border-color: var(--acento-exito);
  color: var(--azul-profundo);
}
.tienda-paso-linea {
  flex: 0 0 60px; height: 2px;
  background: rgba(var(--acento-rgb), 0.15); margin-bottom: 22px;
  border-radius: 2px; transition: var(--trans-media);
}
.tienda-paso-linea.activo { background: var(--turquesa); }

/* ── TARJETAS CONDICIÓN VISUAL ── */
.condicion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1200px; margin: 0 auto;
}
.condicion-card {
  background: rgba(var(--tarjeta-rgb), 0.7);
  border: 1px solid rgba(var(--acento-rgb), 0.2);
  border-radius: 20px; padding: 28px 16px;
  text-align: center; cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  position: relative; overflow: hidden;
  backdrop-filter: blur(10px);
}
.condicion-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-cristal); opacity: 0;
  transition: opacity 0.35s ease;
}
.condicion-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: var(--turquesa);
  box-shadow: 0 20px 50px rgba(var(--acento-rgb), 0.25);
}
.condicion-card:hover::before { opacity: 0.06; }
.condicion-card.seleccionada {
  border-color: var(--turquesa);
  background: rgba(var(--acento-rgb), 0.12);
  box-shadow: 0 0 30px rgba(var(--acento-rgb), 0.3);
}
.condicion-card.seleccionada::before { opacity: 0.1; }
.condicion-icon {
  font-size: 2.8rem; margin-bottom: 14px;
  display: block; position: relative; z-index: 1;
  filter: drop-shadow(0 0 12px rgba(var(--acento-rgb), 0.4));
  transition: transform 0.3s ease;
}
.condicion-card:hover .condicion-icon { transform: scale(1.15); }
.condicion-nombre {
  font-family: var(--font-display); font-size: 0.82rem;
  font-weight: 700; color: var(--blanco); letter-spacing: 0.5px;
  line-height: 1.3; position: relative; z-index: 1;
}
.condicion-card:hover .condicion-nombre { color: var(--celeste-claro); }
.condicion-card.seleccionada .condicion-nombre { color: var(--turquesa); }
.condicion-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--grad-cristal); color: var(--azul-profundo);
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  padding: 3px 8px; border-radius: 20px; letter-spacing: 1px;
  z-index: 2;
}

/* ── PANEL FÓRMULA V2 ── */
.formula-v2-wrap {
  background: linear-gradient(160deg, rgba(30,110,181,0.18), rgba(var(--acento-rgb), 0.10));
  border: 2px solid rgba(var(--acento-rgb), 0.45);
  border-radius: 24px;
  padding: 36px; max-width: 900px; margin: 0 auto;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.15), 0 12px 40px rgba(var(--acento-rgb), 0.18), 0 20px 60px rgba(0,0,0,0.35);
  animation: slideInModal 0.4s ease forwards;
}
.ojo-selector {
  display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap;
}
.ojo-btn {
  flex: 1; min-width: 160px; padding: 20px 16px;
  background: rgba(var(--tarjeta-rgb), 0.6);
  border: 2px solid rgba(var(--acento-rgb), 0.2);
  border-radius: 16px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: var(--trans-media); text-align: left;
}
.ojo-btn:hover {
  border-color: rgba(var(--acento-rgb), 0.5);
  background: rgba(var(--acento-rgb), 0.08);
  transform: translateY(-3px);
}
.ojo-btn.seleccionado {
  border-color: var(--turquesa);
  background: rgba(var(--acento-rgb), 0.12);
  box-shadow: 0 0 20px rgba(var(--acento-rgb), 0.2);
}
.ojo-btn-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(var(--acento-rgb), 0.1); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.ojo-btn-text strong {
  font-family: var(--font-display); font-size: 0.95rem;
  font-weight: 700; color: var(--blanco); display: block;
}
.ojo-btn-text span {
  font-size: 0.75rem; color: var(--gris-medio);
}
.ojo-btn.seleccionado .ojo-btn-text strong { color: var(--turquesa); }

/* Select fórmula V2 */
.formula-ojo-panel {
  background: rgba(var(--tarjeta-rgb), 0.55);
  border: 1px solid rgba(var(--acento-rgb), 0.28);
  border-radius: 16px; padding: 24px; margin-bottom: 20px;
}
.formula-ojo-header {
  display: flex; align-items: center; gap: 10px; margin-bottom:20px;
}
.formula-ojo-badge {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 700; flex-shrink: 0;
}
.badge-od { background: var(--grad-cristal); color: var(--azul-profundo); }
.badge-oi { background: linear-gradient(135deg,#1e6eb5,#29a8e0); color: white; }
.formula-select-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.formula-campo { display: flex; flex-direction: column; gap: 6px; }
.formula-campo label {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--celeste); letter-spacing: 2px; text-transform: uppercase;
}
.formula-campo select {
  background: rgba(var(--tarjeta-rgb), 0.8);
  border: 1px solid rgba(var(--acento-rgb), 0.25);
  border-radius: 10px; padding: 10px 14px;
  color: var(--blanco); font-family: var(--font-mono);
  font-size: 0.85rem; cursor: pointer; outline: none;
  transition: var(--trans-rapida); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2329a8e0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.formula-campo select:focus {
  border-color: var(--turquesa);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.15);
}
.formula-campo select option { background: rgba(var(--tarjeta-rgb),1); color: var(--blanco); }
.formula-campo.oculto { display: none; }

/* ── FILTROS VER TODOS ── */
.filtros-todos {
  background: rgba(var(--tarjeta-rgb), 0.7); border: var(--borde-cristal);
  border-radius: 16px; padding: 20px; margin-bottom: 28px;
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
}
.filtro-grupo { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.filtro-label {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--celeste); letter-spacing: 2px; text-transform: uppercase;
}

/* ── SLIDER PUBLICITARIO ── */
.slider-wrap {
  position: relative; overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(var(--acento-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.08), 0 20px 60px rgba(0,0,0,0.45), inset 0 0 40px rgba(var(--acento-rgb), 0.04);
  max-width: 1100px;
  margin: 0 auto 24px; aspect-ratio: 16/9;
  min-height: 160px; background: #060f1e;
}
.slider-wrap::before, .slider-wrap::after {
  content: ''; position: absolute; width: 22px; height: 22px; z-index: 6; pointer-events: none;
}
.slider-wrap::before { top: 12px; left: 12px; border-top: 2px solid rgba(var(--acento-rgb), 0.55); border-left: 2px solid rgba(var(--acento-rgb), 0.55); border-radius: 4px 0 0 0; }
.slider-wrap::after  { bottom: 12px; right: 12px; border-bottom: 2px solid rgba(var(--acento-rgb), 0.55); border-right: 2px solid rgba(var(--acento-rgb), 0.55); border-radius: 0 0 4px 0; }
.slider-track {
  display: flex; height: 100%;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.slider-slide {
  min-width: 100%; height: 100%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.slider-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) brightness(0.5) saturate(1.2); transform: scale(1.2);
  z-index: 0;
}
.slider-slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(var(--tarjeta-rgb), 0.55) 100%);
}
.slider-slide img {
  position: relative; z-index: 2;
  max-width: 94%; max-height: 90%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.slider-slide-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: rgba(var(--acento-rgb), 0.3);
}
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(var(--tarjeta-rgb), 0.7); border: 1px solid rgba(var(--acento-rgb), 0.4);
  color: var(--celeste-claro); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; transition: var(--trans-rapida); z-index: 5;
  backdrop-filter: blur(10px);
}
.slider-btn:hover { background: rgba(var(--acento-rgb), 0.25); color: var(--turquesa); box-shadow: 0 0 16px rgba(var(--acento-rgb), 0.4); }
.slider-btn.prev { left: 14px; }
.slider-btn.next { right: 14px; }
.slider-dots {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 8px; z-index: 5;
  background: rgba(var(--tarjeta-rgb), 0.4); padding: 6px 10px; border-radius: 20px; backdrop-filter: blur(6px);
}
.slider-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35); border: none; cursor: pointer;
  transition: var(--trans-rapida); padding: 0;
}
.slider-dot.activo {
  background: var(--turquesa); width: 24px; border-radius: 4px;
  box-shadow: 0 0 8px rgba(var(--acento-rgb), 0.6);
}

/* ── VIDEO YOUTUBE ── */
.video-wrap {
  max-width: 900px; margin: 0 auto;
  border-radius: 20px; overflow: hidden;
  border: var(--borde-glow); box-shadow: var(--sombra-glow);
  aspect-ratio: 16/9; position: relative;
  background: rgba(var(--tarjeta-rgb), 0.5);
}
.video-wrap iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.video-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  color: var(--gris-medio);
}

@media (max-width: 768px) {
  .condicion-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .condicion-card { padding: 20px 10px; }
  .condicion-icon { font-size: 2rem; }
  .ojo-selector { flex-direction: column; }
  .formula-select-grid { grid-template-columns: 1fr 1fr; }
  .slider-wrap { aspect-ratio: 4/3; }
  .tienda-paso-linea { flex: 0 0 30px; }
}
@media (max-width: 480px) {
  .condicion-grid { grid-template-columns: repeat(2, 1fr); }
  .formula-select-grid { grid-template-columns: 1fr; }
}

/* ══ CARRITO FLOTANTE REQ-07 ══ */
#carritoFloat button { outline:none; border-width:0; }
#carritoFloat button:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(var(--acento-rgb), 0.5); }

/* ════════════════════════════════════════════════════════════════
   FLUJO POR OJO — LENTES DE CONTACTO (REQ nuevo del cliente)
   ════════════════════════════════════════════════════════════════ */

/* Encabezado grande sobre las cajas: "Estos productos son para tu OJO X" */
.encabezado-ojo {
  background: linear-gradient(135deg, rgba(var(--acento-rgb), 0.10), rgba(30,110,181,0.06));
  border: 1px solid rgba(var(--acento-rgb), 0.30);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.encabezado-ojo-oi {
  background: linear-gradient(135deg, rgba(30,110,181,0.12), rgba(var(--acento-rgb), 0.05));
  border-color: rgba(var(--acento-rgb), 0.35);
}
.encabezado-ojo-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.encabezado-ojo-badge {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; letter-spacing: 1px;
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.encabezado-ojo-progreso {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--turquesa); letter-spacing: 1.5px;
  background: rgba(var(--acento-rgb), 0.10);
  border: 1px solid rgba(var(--acento-rgb), 0.25);
  padding: 6px 14px; border-radius: 999px;
}
.encabezado-ojo-titulo {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 700; color: var(--blanco); line-height: 1.2;
  margin-bottom: 6px;
}
.encabezado-ojo-titulo strong { color: var(--turquesa); }
.encabezado-ojo-cond {
  font-size: 0.95rem; color: var(--gris-medio);
}
.encabezado-ojo-cond strong { color: var(--celeste-claro); font-weight: 700; }

/* Modal de confirmación entre ojos */
.modal-confirm-ojo { padding: 32px 28px; }
.confirm-ojo-titulo {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 700; color: var(--blanco); margin-bottom: 14px;
}
.confirm-ojo-cuerpo { margin-bottom: 22px; }
.confirm-ojo-prod {
  font-family: var(--font-display); font-size: 1.02rem;
  font-weight: 700; color: var(--turquesa); margin-bottom: 10px;
}
.confirm-ojo-msg {
  font-size: 0.95rem; color: var(--gris-medio); line-height: 1.6;
}
.confirm-ojo-msg strong { color: var(--celeste-claro); }

/* Indicador de progreso por pasos: Ojo 1 ✓ → Ojo 2 */
.confirm-ojo-pasos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: 26px;
}
.confirm-paso {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 700;
  border: 1px solid rgba(139,164,192,0.25);
  color: var(--gris-medio);
}
.confirm-paso-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-family: var(--font-mono);
  background: rgba(139,164,192,0.18);
}
.confirm-paso-hecho {
  border-color: rgba(74,222,128,0.45);
  color: #4ade80; background: rgba(74,222,128,0.08);
}
.confirm-paso-hecho .confirm-paso-icon { background: #4ade80; color: var(--azul-profundo); }
.confirm-paso-siguiente {
  border-color: rgba(var(--acento-rgb), 0.5);
  color: var(--turquesa); background: rgba(var(--acento-rgb), 0.08);
}
.confirm-paso-siguiente .confirm-paso-icon { background: var(--turquesa); color: var(--azul-profundo); }
.confirm-paso-flecha { color: var(--gris-medio); font-size: 1.1rem; }
.confirm-ojo-acciones { display: flex; flex-direction: column; }

/* Aviso cuando un ojo tiene fórmula pero no hay caja disponible */
.sin-caja-ojo {
  grid-column: 1 / -1;
  text-align: center; padding: 48px 24px;
  background: rgba(255,193,7,0.05);
  border: 1px solid rgba(255,193,7,0.25);
  border-radius: 16px;
}
.sin-caja-icon { font-size: 2.6rem; margin-bottom: 12px; }
.sin-caja-titulo {
  font-family: var(--font-display); font-size: 1.1rem;
  font-weight: 700; color: var(--blanco); margin-bottom: 8px;
}
.sin-caja-sub { color: var(--gris-medio); font-size: 0.9rem; margin-bottom: 20px; }

/* Responsive: encabezado por ojo en móvil */
@media (max-width: 600px) {
  .encabezado-ojo-titulo { font-size: 1.2rem; }
  .encabezado-ojo { padding: 18px 18px; }
  .confirm-ojo-pasos { gap: 5px; }
  .confirm-paso { padding: 6px 10px; font-size: 0.76rem; }
}

/* ── Campo con error de validación (resalta en rojo lo que falta llenar) ── */
.campo-error {
  border: 2px solid var(--acento-promo) !important;
  background: rgba(255,61,107,0.10) !important;
  box-shadow: 0 0 0 3px rgba(255,61,107,0.15) !important;
  animation: campoErrorPulse 0.4s ease;
}
@keyframes campoErrorPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,61,107,0.45); }
  100% { box-shadow: 0 0 0 3px rgba(255,61,107,0.15); }
}
/* Si el campo con error está dentro de un .formula-campo, resaltar también su label */
.formula-campo > .campo-error ~ label,
.formula-campo:has(.campo-error) > label {
  color: var(--acento-promo) !important;
}

/* ── Etiqueta de subcategoría en tarjetas de producto ── */
.producto-subcat {
  display: inline-block;
  margin: 4px 0 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--turquesa);
  background: rgba(var(--acento-rgb), 0.10);
  border: 1px solid rgba(var(--acento-rgb), 0.30);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ── Barra de búsqueda en el navbar (compacta, integrada a la derecha) ── */
.navbar-buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 230px;
  background: rgba(8,18,34,0.7);
  border: 1px solid rgba(var(--acento-rgb), 0.22);
  border-radius: 12px;
  padding: 4px 4px 4px 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, width 0.3s ease, background 0.25s ease;
}
.navbar-buscador:hover { border-color: rgba(var(--acento-rgb), 0.4); }
.navbar-buscador:focus-within {
  border-color: var(--turquesa);
  background: rgba(8,18,34,0.95);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.12);
  width: 280px;
}
.navbar-buscador > svg { color: rgba(var(--acento-rgb), 0.7); flex-shrink: 0; }
.navbar-buscador input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--blanco);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.2px;
  flex: 1;
  min-width: 0;
  padding: 7px 0;
}
.navbar-buscador input::placeholder { color: rgba(139,164,192,0.55); font-weight: 400; }
.navbar-buscador-btn {
  background: var(--grad-cristal, linear-gradient(135deg,#1e6eb5,#00d4e8));
  color: var(--azul-profundo, #0a1628);
  border: none;
  border-radius: 9px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.navbar-buscador-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--acento-rgb), 0.4); filter: brightness(1.08); }

/* En el menú móvil la barra ocupa todo el ancho y el botón muestra texto */
.navbar-buscador-mobile {
  width: 100%;
  margin-bottom: 12px;
}
.navbar-buscador-mobile .navbar-buscador-btn {
  width: auto; height: auto;
  padding: 8px 18px;
  border-radius: 9px;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px;
}

/* ── Acciones móviles del header (lupa + carrito + hamburguesa), siempre visibles ── */
.header-acciones-movil { display: none; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.icono-accion-movil {
  position: relative;
  background: rgba(8,18,34,0.6);
  border: 1px solid rgba(var(--acento-rgb), 0.25);
  border-radius: 10px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--celeste-claro);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.icono-accion-movil:hover { border-color: var(--turquesa); background: rgba(var(--acento-rgb), 0.08); }
.badge-carrito-movil {
  position: absolute; top: -5px; right: -5px;
  background: var(--acento-promo); color: #fff;
  border-radius: 50%; min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 0.62rem; font-weight: 700;
  align-items: center; justify-content: center;
}
.buscador-movil-fila {
  padding: 0 20px 14px;
  background: rgba(var(--tarjeta-rgb), 0.97);
  border-top: 1px solid rgba(var(--acento-rgb), 0.12);
}
.buscador-movil-fila .navbar-buscador { width: 100%; max-width: none; }

/* En móvil: ocultar menú/acciones de desktop, mostrar acciones móviles */
@media (max-width: 1024px) {
  .header-acciones-movil { display: flex; }
  .header-inner { gap: 12px; }
}

/* ════════════════════════════════════════════════════════
   GRID DE PRODUCTOS — responsive estilo tienda (2 col en móvil)
   ════════════════════════════════════════════════════════ */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Tablet: 2-3 columnas */
@media (max-width: 900px) {
  .grid-productos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
}

/* Móvil: SIEMPRE 2 columnas (como Mercado Libre / Temu) con tarjetas compactas */
@media (max-width: 640px) {
  .grid-productos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .producto-img-wrap { height: 130px; border-radius: 12px 12px 0 0; }
  .producto-img-wrap img { padding: 6px; }
  .producto-body { padding: 12px 12px 14px; }
  .producto-marca { font-size: 0.6rem; letter-spacing: 1px; margin-bottom: 3px; }
  .producto-nombre { font-size: 0.82rem; margin-bottom: 6px; line-height: 1.25; }
  .producto-subcat { font-size: 0.58rem; padding: 2px 8px; margin: 2px 0 7px; letter-spacing: 0.5px; }
  .producto-formula { font-size: 0.66rem; padding: 7px 8px; margin-bottom: 8px; gap: 2px; }
  .producto-precio { font-size: 1.1rem; margin-bottom: 10px; }
  .producto-precio span { font-size: 0.66rem; }
  /* Botón Pedir y precio en columna para que quepan en tarjeta angosta */
  .producto-body > div:last-child { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .producto-body .btn.btn-cyan.btn-sm,
  .producto-body .btn.btn-outline.btn-sm { width: 100%; justify-content: center; font-size: 0.78rem; padding: 8px 10px; }
}

/* Pantallas muy pequeñas: mantener 2 columnas pero aún más compacto */
@media (max-width: 380px) {
  .grid-productos { gap: 10px; }
  .producto-img-wrap { height: 115px; }
  .producto-nombre { font-size: 0.78rem; }
}

/* ── Panel visual del hero: ajustes responsive (ahora visible en móvil) ── */
@media (max-width: 640px) {
  #heroHudFrame { max-width: 100%; }
  #heroLensWrap { height: 260px; }
  #heroOjoIcono { font-size: 6rem !important; }
  #heroChipsContainer { gap: 10px; }
}
@media (max-width: 380px) {
  #heroLensWrap { height: 220px; }
  #heroOjoIcono { font-size: 5rem !important; }
}

/* ── Píldora de cuenta regresiva de promo en tarjeta de producto ── */
.promo-countdown {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 6px;
  padding: 3px 9px;
  letter-spacing: 0.3px;
}
.promo-countdown.vencida {
  color: rgba(139,164,192,0.7);
  background: rgba(139,164,192,0.1);
  border-color: rgba(139,164,192,0.3);
}
@media (max-width: 640px) {
  .promo-countdown { font-size: 0.6rem; padding: 2px 7px; }
}

/* ════════════════════════════════════════════════════════════════
   ESTABILIDAD MÓVIL — iPhone / Android (v14)
   Arregla: zoom accidental al tocar inputs, notch/safe-area,
   desbordamiento horizontal y modales cortados arriba.
   ════════════════════════════════════════════════════════════════ */

/* 1) Evitar que iOS haga ZOOM automático al enfocar un input.
   iOS hace zoom si la fuente del campo es < 16px. Forzamos 16px en móvil. */
@media (max-width: 768px) {
  input, select, textarea,
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="number"], input[type="search"], input[type="password"] {
    font-size: 16px !important;
  }
}

/* 2) Bloquear el desbordamiento horizontal de raíz (el "se mueve de lado").
   Refuerza el overflow-x:hidden ya presente y lo aplica también a html. */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}
* { -webkit-tap-highlight-color: transparent; } /* sin flash gris al tocar */

/* 3) Anillos decorativos del hero: en móvil se recortan para no desbordar */
@media (max-width: 768px) {
  .hero-ring-1, .hero-ring-2, .hero-ring-3, .hero-ring-4 { display: none; }
}

/* 4) SAFE AREA del notch / isla dinámica (iPhone 14 Pro).
   Empuja el header y los modales por debajo de la barra del sistema. */
@supports (padding: max(0px)) {
  .header, header {
    padding-top: max(0px, env(safe-area-inset-top)) !important;
  }
}

/* 5) MODALES estables en móvil (carrito, fórmula, etc.) — ya no salen cortados.
   Se alinean arriba (no centrados) y respetan el notch, con scroll suave. */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-start;
    padding: 0;
    padding-top: env(safe-area-inset-top);
  }
  .modal-box {
    max-width: 100%;
    width: 100%;
    max-height: 100dvh;            /* altura real del viewport móvil */
    min-height: 100dvh;
    border-radius: 0;              /* pantalla completa en móvil */
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    padding-top: calc(20px + env(safe-area-inset-top));
    -webkit-overflow-scrolling: touch; /* scroll con inercia en iOS */
  }
  .modal-close {
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    width: 40px; height: 40px;     /* objetivo táctil más grande */
  }
}

/* 6) El modal de RESULTADO DE PAGO (Wompi) también respeta el notch */
@media (max-width: 768px) {
  #modalResultadoPago {
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
  }
}

/* 7) Botones y objetivos táctiles: mínimo 44px de alto (recomendación Apple) */
@media (max-width: 768px) {
  .btn, button.btn, .metodo-pago-card, .modal-close, select, input[type="submit"] {
    min-height: 44px;
  }
}

/* 8) Imágenes y media nunca desbordan su contenedor */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* 9) Botón flotante de WhatsApp respeta el safe-area inferior */
@supports (padding: max(0px)) {
  .whatsapp-float, [class*="whatsapp"][class*="float"] {
    bottom: max(28px, calc(20px + env(safe-area-inset-bottom)));
  }
}

/* ════════════════════════════════════════════════════════════════
   SECCIÓN CONTACTO + MAPA — responsivo móvil
   En móvil se apila en una sola columna: info arriba, mapa abajo
   a todo el ancho (ya no se corta por el borde derecho).
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .contacto-grid {
    grid-template-columns: 1fr !important;  /* una sola columna */
    gap: 24px !important;
  }
  .contacto-mapa-col { width: 100%; }
  .contacto-mapa-wrap iframe {
    width: 100% !important;
    height: 300px !important;               /* altura cómoda en móvil */
    display: block;
  }
}

/* Botones bajo el mapa: en pantallas estrechas se reparten mejor */
@media (max-width: 480px) {
  .contacto-mapa-btns {
    flex-wrap: wrap;                         /* si no caben, bajan de línea */
  }
  .contacto-mapa-btns .btn {
    flex: 1 1 calc(50% - 5px);               /* 2 por fila en móvil */
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════════
   SISTEMA DE TEMAS — 10 paletas profesionales (v3)
   3 oscuros · 4 claros · 2 temáticos. Todos validados con contraste AA.
   ════════════════════════════════════════════════════════════════ */

:root { --acento-rgb: 109,74,255; --primario-rgb: 109,74,255; --tarjeta-rgb: 255,255,255; --texto-tenue:rgba(26,23,38,0.62); }

/* ════════════════════════════════════════════════════════════════
   TEMAS TIENDA — 8 paletas e-commerce (4 claras + 4 oscuras).
   El default "violeta" vive en :root. Estos 7 redefinen la piel.
   ════════════════════════════════════════════════════════════════ */

/* ── CLAROS ── */
/* Azul Océano */
html[data-tema="oceano"]{
  --color-primary:#0c6fb8; --color-secondary:#0ea5e9; --color-accent:#0ea5e9;
  --color-bg-sitio:#f3f8fc; --color-footer-bg:#0a2942; --color-header-bg:rgba(255,255,255,0.92);
  --acento-rgb:14,165,233; --primario-rgb:12,111,184; --tarjeta-rgb:255,255,255;
  --blanco:#0d2236; --blanco-suave:#1b3247; --gris-claro:#3a4f63; --gris-medio:#7d93a8;
  --celeste:#0ea5e9; --celeste-claro:#0c6fb8; --turquesa:#0ea5e9; --acento-oro:#0c6fb8;
  --color-text-primary:#0d2236; --color-text-subtitle:#5b7185; --texto-tenue:rgba(13,34,54,0.62);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#ffffff; --azul-marino:#ffffff; --azul-medio:#e8f1f8;
  --grad-hero:linear-gradient(165deg,#ffffff 0%,#eef6fc 55%,#e0f0fb 100%);
  --grad-cristal:linear-gradient(135deg,#0c6fb8,#0ea5e9); --grad-card:#ffffff;
}
/* Verde Menta */
html[data-tema="menta"]{
  --color-primary:#0c8f66; --color-secondary:#10b981; --color-accent:#10b981;
  --color-bg-sitio:#f1faf6; --color-footer-bg:#0a2c20; --color-header-bg:rgba(255,255,255,0.92);
  --acento-rgb:16,185,129; --primario-rgb:12,143,102; --tarjeta-rgb:255,255,255;
  --blanco:#0e2a20; --blanco-suave:#1b3a2e; --gris-claro:#385044; --gris-medio:#7a9488;
  --celeste:#10b981; --celeste-claro:#0c8f66; --turquesa:#10b981; --acento-oro:#0c8f66;
  --color-text-primary:#0e2a20; --color-text-subtitle:#5a7468; --texto-tenue:rgba(14,42,32,0.62);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#ffffff; --azul-marino:#ffffff; --azul-medio:#e6f5ee;
  --grad-hero:linear-gradient(165deg,#ffffff 0%,#edf9f3 55%,#dff3ea 100%);
  --grad-cristal:linear-gradient(135deg,#0c8f66,#10b981); --grad-card:#ffffff;
}
/* Naranja Coral */
html[data-tema="coral"]{
  --color-primary:#e34d1c; --color-secondary:#f4622e; --color-accent:#f4622e;
  --color-bg-sitio:#fdf6f2; --color-footer-bg:#2b1208; --color-header-bg:rgba(255,255,255,0.92);
  --acento-rgb:244,98,46; --primario-rgb:227,77,28; --tarjeta-rgb:255,255,255;
  --blanco:#2b1409; --blanco-suave:#3c2316; --gris-claro:#523a2e; --gris-medio:#8a7064;
  --celeste:#f4622e; --celeste-claro:#e34d1c; --turquesa:#f4622e; --acento-oro:#e34d1c;
  --color-text-primary:#2b1409; --color-text-subtitle:#7a6054; --texto-tenue:rgba(43,20,9,0.62);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#ffffff; --azul-marino:#ffffff; --azul-medio:#f7e8e0;
  --grad-hero:linear-gradient(165deg,#ffffff 0%,#fdf1ea 55%,#fce4d8 100%);
  --grad-cristal:linear-gradient(135deg,#e34d1c,#f4622e); --grad-card:#ffffff;
}
/* ── OSCUROS ── */
/* Medianoche (violeta oscuro) */
html[data-tema="medianoche"]{
  --color-primary:#8b6bff; --color-secondary:#a78bff; --color-accent:#8b6bff;
  --color-bg-sitio:#12101c; --color-footer-bg:#0c0a14; --color-header-bg:rgba(18,16,28,0.85);
  --acento-rgb:139,107,255; --primario-rgb:139,107,255; --tarjeta-rgb:28,24,40;
  --blanco:#f0edf8; --blanco-suave:#e2dcf0; --gris-claro:#c4bcd8; --gris-medio:#897fa0;
  --celeste:#a78bff; --celeste-claro:#8b6bff; --turquesa:#8b6bff; --acento-oro:#8b6bff;
  --color-text-primary:#f0edf8; --color-text-subtitle:#a097b8; --texto-tenue:rgba(240,237,248,0.6);
  --color-btn-primary-txt:#12101c;
  --azul-profundo:#12101c; --azul-marino:#1c1828; --azul-medio:#241f33;
  --grad-hero:radial-gradient(ellipse 90% 70% at 50% 0%,#241a3d 0%,#12101c 60%);
  --grad-cristal:linear-gradient(135deg,#8b6bff,#a78bff); --grad-card:#1c1828;
}
/* Grafito Neón (teal) */
html[data-tema="grafito"]{
  --color-primary:#2dd4bf; --color-secondary:#5eead4; --color-accent:#2dd4bf;
  --color-bg-sitio:#15171c; --color-footer-bg:#0f1115; --color-header-bg:rgba(21,23,28,0.85);
  --acento-rgb:45,212,191; --primario-rgb:45,212,191; --tarjeta-rgb:30,33,40;
  --blanco:#eef2f3; --blanco-suave:#dde4e5; --gris-claro:#bcc6c8; --gris-medio:#828d90;
  --celeste:#5eead4; --celeste-claro:#2dd4bf; --turquesa:#2dd4bf; --acento-oro:#2dd4bf;
  --color-text-primary:#eef2f3; --color-text-subtitle:#98a3a6; --texto-tenue:rgba(238,242,243,0.6);
  --color-btn-primary-txt:#15171c;
  --azul-profundo:#15171c; --azul-marino:#1e2128; --azul-medio:#262a33;
  --grad-hero:radial-gradient(ellipse 90% 70% at 50% 0%,#1d2730 0%,#15171c 60%);
  --grad-cristal:linear-gradient(135deg,#2dd4bf,#5eead4); --grad-card:#1e2128;
}
/* Esmeralda Dark */
html[data-tema="esmeralda"]{
  --color-primary:#34d39e; --color-secondary:#5be3b5; --color-accent:#34d39e;
  --color-bg-sitio:#0a1613; --color-footer-bg:#06100d; --color-header-bg:rgba(10,22,19,0.85);
  --acento-rgb:52,211,158; --primario-rgb:52,211,158; --tarjeta-rgb:16,32,28;
  --blanco:#eaf5f0; --blanco-suave:#daece5; --gris-claro:#bcd2c9; --gris-medio:#7e948b;
  --celeste:#5be3b5; --celeste-claro:#34d39e; --turquesa:#34d39e; --acento-oro:#34d39e;
  --color-text-primary:#eaf5f0; --color-text-subtitle:#93a89f; --texto-tenue:rgba(234,245,240,0.6);
  --color-btn-primary-txt:#06100d;
  --azul-profundo:#0a1613; --azul-marino:#10201c; --azul-medio:#152a25;
  --grad-hero:radial-gradient(ellipse 90% 70% at 50% 0%,#11231e 0%,#0a1613 60%);
  --grad-cristal:linear-gradient(135deg,#34d39e,#5be3b5); --grad-card:#10201c;
}
/* Vino Tinto */
html[data-tema="vino"]{
  --color-primary:#ff5d8f; --color-secondary:#ff85aa; --color-accent:#ff5d8f;
  --color-bg-sitio:#1a0d12; --color-footer-bg:#120709; --color-header-bg:rgba(26,13,18,0.85);
  --acento-rgb:255,93,143; --primario-rgb:255,93,143; --tarjeta-rgb:38,20,26;
  --blanco:#f8eaef; --blanco-suave:#eed9e0; --gris-claro:#d4bcc5; --gris-medio:#967e87;
  --celeste:#ff85aa; --celeste-claro:#ff5d8f; --turquesa:#ff5d8f; --acento-oro:#ff5d8f;
  --color-text-primary:#f8eaef; --color-text-subtitle:#aa949c; --texto-tenue:rgba(248,234,239,0.6);
  --color-btn-primary-txt:#1a0d12;
  --azul-profundo:#1a0d12; --azul-marino:#261420; --azul-medio:#301826;
  --grad-hero:radial-gradient(ellipse 90% 70% at 50% 0%,#2e1019 0%,#1a0d12 60%);
  --grad-cristal:linear-gradient(135deg,#ff5d8f,#ff85aa); --grad-card:#261420;
}


/* ── Efectos conectados a variables del tema ── */
:root {
  --sombra-glow: 0 0 24px rgba(var(--acento-rgb), 0.4);
  --borde-glow:  1px solid rgba(var(--acento-rgb), 0.5);
  --sombra-card: 0 8px 32px rgba(var(--acento-rgb), 0.12);
  --sombra-hover:0 16px 48px rgba(var(--acento-rgb), 0.25);
  --borde-cristal:1px solid rgba(var(--acento-rgb), 0.25);
}



/* ════════════════════════════════════════════════════════════════
   AISLAMIENTO DEL PANEL ADMIN
   El panel admin SIEMPRE usa colores oscuros fijos, sin importar el
   tema de la tienda. Redefine las variables dentro de su scope.
   ════════════════════════════════════════════════════════════════ */
#panelAdmin {
  --color-bg-sitio:#060f1e;
  --tarjeta-rgb:13,35,71;
  --acento-rgb:0,212,232;
  --primario-rgb:30,110,181;
  --blanco:#ffffff;
  --blanco-suave:#f0f8ff;
  --gris-claro:#e8f4fd;
  --gris-medio:#8ba4c0;
  --celeste-claro:#4dc8f5;
  --color-text-primary:#ffffff;
  --color-text-subtitle:#8ba4c0;
  --texto-tenue:rgba(255,255,255,0.72);
  --color-primary:#1e6eb5;
  --color-secondary:#29a8e0;
  --color-accent:#00d4e8;
  --color-header-bg:rgba(10,22,40,0.95);
  --grad-cristal:linear-gradient(135deg,#1e6eb5 0%,#29a8e0 50%,#00d4e8 100%);
  --sombra-glow:0 0 24px rgba(0,212,232,0.4);
  --borde-glow:1px solid rgba(0,212,232,0.5);
  --borde-cristal:1px solid rgba(41,168,224,0.25);
  --sombra-card:0 8px 32px rgba(0,212,232,0.12);
  --sombra-hover:0 16px 48px rgba(0,212,232,0.25);
  background:#060f1e !important;
  color:#ffffff;
}

/* ── Pestañas del módulo de Ajustes ── */
.aj-tab {
  font-family:var(--font-display); font-size:0.85rem; font-weight:600;
  padding:9px 18px; border-radius:50px; cursor:pointer;
  background:rgba(var(--tarjeta-rgb),0.5); color:var(--gris-medio);
  border:var(--borde-cristal); transition:all .2s; white-space:nowrap;
}
.aj-tab:hover { color:var(--celeste-claro); border-color:rgba(var(--acento-rgb),0.5); }
.aj-tab.activo {
  background:var(--grad-cristal); color:#fff;
  border-color:transparent; box-shadow:0 4px 14px rgba(var(--acento-rgb),0.3);
}

/* ── Columna de Acciones fija (sticky) en la tabla de productos ── */
.col-acciones-sticky {
  position:sticky; right:0; z-index:3;
  background:var(--color-bg-sitio);
  box-shadow:-8px 0 16px -6px rgba(0,0,0,0.4);
}
/* El th sticky necesita fondo del header */
thead .col-acciones-sticky { background:var(--color-header-bg); }
/* Hover de fila clickeable */
.fila-producto:hover { background:rgba(var(--acento-rgb),0.07); }
.fila-producto:hover .col-acciones-sticky { background:rgba(var(--tarjeta-rgb),0.98); }

/* ── Reordenamiento de columnas (drag & drop) ── */
.th-draggable { user-select:none; transition:background .15s; }
.th-draggable:hover { background:rgba(var(--acento-rgb),0.12); }
.th-draggable:active { cursor:grabbing; }
.th-drop-target { background:rgba(var(--acento-rgb),0.25) !important; box-shadow:inset 3px 0 0 var(--celeste-claro); }

/* ════════════════════════════════════════════════
   HERO — Ilustración abstracta e-commerce (sin ojo)
   ════════════════════════════════════════════════ */
.ec-hero-art { width:100%; max-width:520px; position:relative; z-index:2; }
.ec-art-stage {
  position:relative; width:100%; height:420px;
  background:linear-gradient(150deg,#ffffff 0%,#f3f0ff 60%,#ffe9f3 100%);
  border:1px solid rgba(109,74,255,0.12); border-radius:28px; overflow:hidden;
  box-shadow:0 30px 70px rgba(109,74,255,0.16);
}
/* Tarjetas de producto flotantes */
.ec-card {
  position:absolute; width:130px; background:#fff; border-radius:16px; padding:12px;
  box-shadow:0 12px 30px rgba(26,23,38,0.12); animation:ecFloat 6s ease-in-out infinite;
}
.ec-card-img { width:100%; height:74px; border-radius:10px; margin-bottom:10px; }
.ec-card-line { height:7px; background:#eceaf3; border-radius:4px; margin-bottom:6px; }
.ec-card-line.short { width:55%; }
.ec-card-price { position:absolute; bottom:12px; right:12px; width:26px; height:26px; border-radius:50%;
  background:var(--color-primary); color:#fff; font-weight:700; font-size:0.8rem; display:flex; align-items:center; justify-content:center; }
.ec-card-1 { top:36px; left:30px; animation-delay:0s; transform:rotate(-6deg); z-index:3; }
.ec-card-2 { top:120px; right:28px; animation-delay:1.2s; transform:rotate(5deg); z-index:4; }
.ec-card-3 { bottom:34px; left:64px; animation-delay:2.2s; transform:rotate(-3deg); z-index:3; }
@keyframes ecFloat { 0%,100%{ transform:translateY(0) rotate(var(--r,0)); } 50%{ transform:translateY(-14px); } }
.ec-card-1{ --r:-6deg; } .ec-card-2{ --r:5deg; } .ec-card-3{ --r:-3deg; }
/* Carrito central */
.ec-cart {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%; background:var(--grad-cristal); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:6;
  box-shadow:0 18px 44px rgba(109,74,255,0.4); animation:ecPulse 3s ease-in-out infinite;
}
.ec-cart-badge {
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:var(--color-accent); color:#fff; font-weight:700; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center; border:3px solid #fff;
}
@keyframes ecPulse { 0%,100%{ box-shadow:0 18px 44px rgba(109,74,255,0.4);} 50%{ box-shadow:0 18px 60px rgba(109,74,255,0.6);} }
.ec-bubble { position:absolute; border-radius:50%; opacity:0.5; }
.ec-bubble-1 { width:60px;height:60px;background:radial-gradient(circle,#ffd16688,transparent 70%);top:20px;right:50px; }
.ec-bubble-2 { width:90px;height:90px;background:radial-gradient(circle,#ff5da288,transparent 70%);bottom:20px;right:60px; }
.ec-bubble-3 { width:50px;height:50px;background:radial-gradient(circle,#6d4aff88,transparent 70%);bottom:50px;left:20px; }
/* Chips de acceso rápido */
.ec-hero-chips { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
@media (prefers-reduced-motion: reduce){ .ec-card,.ec-cart{ animation:none; } }
@media (max-width:1024px){ .ec-art-stage{ height:340px; } }

/* ════════════════════════════════════════════════
   TIENDA — buscador protagonista + mosaico categorías
   ════════════════════════════════════════════════ */
.tienda-hero { text-align:center; max-width:760px; margin:0 auto 56px; }
.tienda-hero-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--blanco); letter-spacing:-1px; margin-bottom:12px; }
.tienda-hero-sub { font-family:var(--font-body); font-size:1.05rem; color:var(--color-text-subtitle); margin-bottom:32px; }
.tienda-buscador {
  display:flex; align-items:center; gap:10px;
  background:var(--azul-marino); border:1px solid rgba(26,23,38,0.1); border-radius:16px;
  padding:8px 8px 8px 20px; box-shadow:0 12px 40px rgba(26,23,38,0.08);
  max-width:640px; margin:0 auto;
}
.tienda-buscador:focus-within { border-color:var(--color-primary); box-shadow:0 12px 44px rgba(109,74,255,0.18); }
.tienda-buscador > svg { color:var(--color-primary); flex-shrink:0; }
.tienda-buscador input {
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:1rem; color:var(--blanco); padding:12px 0; min-width:0;
}
.tienda-buscador input::placeholder { color:var(--gris-medio); }
.tienda-buscador .btn-primary { flex-shrink:0; padding:14px 28px; }

.cat-mosaico-head { margin-bottom:28px; }
.cat-mosaico-kicker { font-family:var(--font-body); font-size:0.72rem; font-weight:600; color:var(--color-primary); letter-spacing:3px; text-transform:uppercase; display:block; margin-bottom:8px; }
.cat-mosaico-title { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--blanco); letter-spacing:-0.5px; }
.cat-mosaico {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.cat-mos-card {
  background:var(--azul-marino); border:1px solid rgba(26,23,38,0.07); border-radius:20px; overflow:hidden;
  cursor:pointer; transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
  box-shadow:0 4px 18px rgba(26,23,38,0.05);
}
.cat-mos-card:hover { transform:translateY(-6px); box-shadow:0 22px 50px rgba(109,74,255,0.16); }
.cat-mos-visual {
  height:150px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.cat-mos-visual::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 20%, rgba(255,255,255,0.35), transparent 60%);
}
.cat-mos-emoji { font-size:4rem; filter:drop-shadow(0 6px 12px rgba(0,0,0,0.2)); position:relative; z-index:1; }
.cat-mos-body { padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cat-mos-nombre { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--blanco); }
.cat-mos-cta { font-family:var(--font-body); font-size:0.82rem; font-weight:600; color:var(--color-primary); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.cat-mos-cta span { transition:transform .3s; }
.cat-mos-card:hover .cat-mos-cta span { transform:translateX(4px); }
@media (max-width:860px){ .cat-mosaico{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width:520px){ .cat-mosaico{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════
   HERO E-COMMERCE — buscador protagonista (estructura nueva)
   ════════════════════════════════════════════════ */
.ec-hero {
  position:relative; min-height:auto; padding:140px 24px 80px;
  display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  background:transparent;
}
.ec-hero-bg { display:none; }
.ec-hero-inner { position:relative; z-index:1; max-width:880px; width:100%; }
.ec-hero .hero-badge {
  display:inline-flex; align-items:center; gap:8px; margin:0 auto 26px;
  background:rgba(109,74,255,0.08); border:1px solid rgba(109,74,255,0.2); color:var(--color-primary);
  border-radius:50px; padding:8px 18px; font-family:var(--font-body); font-weight:600;
  font-size:0.74rem; letter-spacing:0.5px;
}
.ec-hero-h {
  font-family:var(--font-display); font-weight:800; color:var(--blanco);
  font-size:clamp(2.4rem,5.5vw,4.4rem); line-height:1.04; letter-spacing:-1.5px; margin-bottom:20px;
}
.ec-hero-h .highlight { display:block; background:linear-gradient(120deg,#6d4aff,#ff5da2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ec-hero-desc { font-family:var(--font-body); font-size:clamp(1rem,1.6vw,1.2rem); color:var(--color-text-subtitle); max-width:600px; margin:0 auto 40px; line-height:1.65; }
/* Buscador protagonista */
.ec-hero-search {
  display:flex; align-items:center; gap:10px; max-width:680px; margin:0 auto 22px;
  background:var(--azul-marino); border:1px solid rgba(26,23,38,0.1); border-radius:18px;
  padding:10px 10px 10px 22px; box-shadow:0 20px 60px rgba(109,74,255,0.14);
}
.ec-hero-search:focus-within { border-color:var(--color-primary); box-shadow:0 20px 64px rgba(109,74,255,0.24); }
.ec-hero-search > svg { color:var(--color-primary); flex-shrink:0; }
.ec-hero-search input { flex:1; border:none; outline:none; background:transparent; font-family:var(--font-body); font-size:1.05rem; color:var(--blanco); padding:14px 0; min-width:0; }
.ec-hero-search input::placeholder { color:var(--gris-medio); }
.ec-hero-search .btn-primary { flex-shrink:0; padding:15px 30px; }
/* Chips de categorías rápidas */
.ec-hero-quickcats { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-bottom:52px; }
.ec-qc-label { font-family:var(--font-body); font-size:0.82rem; color:var(--gris-medio); font-weight:500; }
.ec-qc-chip {
  font-family:var(--font-body); font-size:0.84rem; font-weight:600; color:var(--blanco);
  background:var(--azul-marino); border:1px solid rgba(26,23,38,0.1); border-radius:50px; padding:9px 18px;
  cursor:pointer; transition:all .25s ease;
}
.ec-qc-chip:hover { border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); box-shadow:0 8px 20px rgba(109,74,255,0.14); }
/* Franja de confianza */
.ec-trust { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; padding-top:36px; border-top:1px solid rgba(26,23,38,0.08); }
.ec-trust-item { display:flex; align-items:center; gap:12px; text-align:left; }
.ec-trust-item > svg { color:var(--color-primary); flex-shrink:0; }
.ec-trust-item strong { display:block; font-family:var(--font-display); font-size:0.95rem; font-weight:700; color:var(--blanco); }
.ec-trust-item span { font-family:var(--font-body); font-size:0.8rem; color:var(--gris-medio); }
@media (max-width:640px){ .ec-trust{ gap:20px; } .ec-hero{ padding:120px 18px 60px; } }

/* ════ BENEFICIOS e-commerce ════ */
.ec-benef-sec { background:color-mix(in srgb, var(--color-bg-sitio) 86%, transparent); }
.ec-benef-head { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:48px; padding-bottom:28px; border-bottom:1px solid rgba(26,23,38,0.08); }
.ec-benef-kicker { font-family:var(--font-body); font-size:0.72rem; font-weight:600; color:var(--color-primary); letter-spacing:3px; text-transform:uppercase; display:block; margin-bottom:12px; }
.ec-benef-title { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; color:var(--blanco); line-height:1.05; letter-spacing:-1px; }
.ec-benef-title em { font-style:normal; background:linear-gradient(120deg,#6d4aff,#ff5da2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ec-benef-lead { font-family:var(--font-body); font-size:1.02rem; color:var(--color-text-subtitle); line-height:1.7; }
.ec-benef-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.ec-benef-card { background:var(--azul-marino); border:1px solid rgba(26,23,38,0.06); border-radius:18px; padding:30px 24px; transition:all .4s cubic-bezier(.22,1,.36,1); }
.ec-benef-card:hover { transform:translateY(-6px); box-shadow:0 20px 44px rgba(109,74,255,0.12); border-color:rgba(109,74,255,0.2); }
.ec-benef-ico { font-size:2.4rem; margin-bottom:16px; }
.ec-benef-card h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--blanco); margin-bottom:10px; }
.ec-benef-card p { font-family:var(--font-body); font-size:0.92rem; color:var(--color-text-subtitle); line-height:1.6; }
@media (max-width:900px){ .ec-benef-grid{ grid-template-columns:repeat(2,1fr); } .ec-benef-head{ grid-template-columns:1fr; gap:18px; align-items:start; } }
@media (max-width:520px){ .ec-benef-grid{ grid-template-columns:1fr; } }

/* ════ NOSOTROS e-commerce ════ */
.ec-about { background:color-mix(in srgb, var(--color-bg-sitio) 86%, transparent); }
.ec-about-band { display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; margin-bottom:64px; }
.ec-about-kicker { font-family:var(--font-body); font-size:0.72rem; font-weight:600; color:var(--color-primary); letter-spacing:3px; text-transform:uppercase; display:block; margin-bottom:16px; }
.ec-about-h { font-family:var(--font-display); font-size:clamp(2rem,3.8vw,3rem); font-weight:800; color:var(--blanco); line-height:1.05; letter-spacing:-1px; margin-bottom:20px; }
.ec-about-h em { font-style:normal; background:linear-gradient(120deg,#6d4aff,#ff5da2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ec-about-p { font-family:var(--font-body); font-size:1.02rem; color:var(--color-text-subtitle); line-height:1.75; max-width:520px; }
.ec-about-nums { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ec-about-num { background:var(--azul-marino); border:1px solid rgba(26,23,38,0.07); border-radius:18px; padding:28px 24px; text-align:center; box-shadow:0 4px 18px rgba(26,23,38,0.04); }
.ec-about-num-v { font-family:var(--font-display); font-size:2.4rem; font-weight:800; background:linear-gradient(120deg,#6d4aff,#ff5da2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:block; line-height:1; }
.ec-about-num-l { font-family:var(--font-body); font-size:0.82rem; color:var(--gris-medio); margin-top:8px; display:block; }
.ec-about-cta { background:linear-gradient(120deg,#6d4aff,#9d6bff); border-radius:24px; padding:48px 40px; text-align:center; }
.ec-about-cta-h { font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; color:#fff; margin-bottom:24px; letter-spacing:-0.5px; }
.ec-about-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ec-about-cta .btn-primary { background:#fff; color:var(--color-primary); }
.ec-about-cta .btn-primary:hover { background:#f3f0ff; }
@media(max-width:860px){ .ec-about-band{ grid-template-columns:1fr; gap:32px; } }