/* ============================================================
   ÓPTICA BOUTIQUE — CimaTech · Línea "Lumière"
   estilos.css — Identidad visual clara & editorial
   Diseño distinto al tema "Cristal" (oscuro/HUD): luminoso,
   sereno, tipografía serif de autor + sans geométrica.
   La maquinaria de clases/variables/temas se mantiene 1:1
   para no romper el JS compartido.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Outfit:wght@200;300;400;500;600&display=swap');

/* ══ VARIABLES DINÁMICAS (sobreescritas por JS desde Firestore) ══ */
:root {
  /* ░ LÚMINA — Editorial de lujo (oscuro / champagne) ░ */
  /* Paleta base — parametrizables desde admin REQ-01 */
  --color-primary:    #c9a25e;   /* champagne dorado (acción principal) */
  --color-secondary:  #b8915a;   /* dorado tostado */
  --color-accent:     #d9b878;   /* dorado claro luminoso */

  /* REQ-01 — Secciones parametrizables */
  --color-bg-sitio:        #0c0b0a;   /* negro cálido casi carbón */
  --color-header-bg:       rgba(12, 11, 10, 0.72);
  --color-footer-bg:       #080706;
  --color-btn-primary-bg:  var(--color-primary);
  --color-btn-primary-txt: #0c0b0a;
  --color-text-primary:    #f5f0e8;
  --color-text-subtitle:   #a89f92;
  --color-text-label:      #c9a25e;

  /* Generadas dinámicamente desde primary */
  --azul-profundo:    #0c0b0a;
  --azul-marino:      #141210;
  --azul-medio:       #1d1a16;
  --azul-cristal:     var(--color-primary);
  --celeste:          var(--color-secondary);
  --celeste-claro:    #d9b878;
  --turquesa:         var(--color-accent);
  --blanco:           #f5f0e8;   /* "texto blanco" = marfil cálido */
  --blanco-suave:     #ece5d8;
  --gris-claro:       #c8bfb0;
  --gris-medio:       #8f877a;

  /* Acentos fijos */
  --acento-oro:       #c9a25e;
  --acento-exito:     #6fae87;
  --acento-alerta:    #d98c5f;
  --acento-promo:     #c77b6b;

  /* Gradientes dinámicos */
  --grad-hero:        radial-gradient(ellipse 90% 70% at 70% 25%, #1d1a16 0%, #0c0b0a 60%);
  --grad-cristal:     linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --grad-card:        linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --grad-promo:       linear-gradient(135deg, #c9a25e, #c77b6b);

  /* Tipografía */
  --font-display:     'Cormorant Garamond', Georgia, serif;
  --font-body:        'Outfit', system-ui, sans-serif;
  --font-mono:        'Outfit', system-ui, sans-serif;

  /* Sombras */
  --sombra-card:      0 18px 50px rgba(0, 0, 0, 0.45);
  --sombra-hover:     0 30px 70px rgba(0, 0, 0, 0.6);
  --sombra-glow:      0 8px 40px rgba(201, 162, 94, 0.25);
  --sombra-promo:     0 8px 28px rgba(199, 123, 107, 0.3);

  /* Bordes */
  --borde-cristal:    1px solid rgba(201, 162, 94, 0.18);
  --borde-glow:       1px solid rgba(201, 162, 94, 0.45);
  --radio-card:       4px;
  --radio-btn:        2px;

  /* Transiciones */
  --trans-rapida:     0.25s ease;
  --trans-media:      0.5s cubic-bezier(0.22, 1, 0.36, 1);
  --trans-lenta:      0.9s cubic-bezier(0.22, 1, 0.36, 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; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--azul-profundo); }
::-webkit-scrollbar-thumb { background: var(--celeste); border-radius: 3px; }

/* ══ FONDOS — texturas suaves, sin grid neón ══ */
.bg-particles {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(194, 112, 61, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 88%, rgba(47, 111, 126, 0.05) 0%, transparent 50%);
}
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(27, 58, 75, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.6;
}

/* ══ 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 6px 20px rgba(var(--acento-rgb), 0.14);} 50%{box-shadow:0 12px 34px rgba(var(--acento-rgb), 0.26);} }
@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.15rem; font-weight: 600; color: var(--color-primary); line-height: 1.12; white-space: nowrap; letter-spacing:-0.3px; }
.logo-text span { color: var(--color-secondary); display: block; font-size: 0.6rem; font-weight: 500; letter-spacing: 2.5px; white-space: nowrap; text-transform:uppercase; }
.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-body); font-size: 0.9rem; font-weight: 500;
  color: var(--color-text-subtitle); text-decoration: none; letter-spacing: 0.2px;
  padding: 8px 13px; border-radius: 8px; transition: var(--trans-rapida); position: relative;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--color-primary); background: transparent; }
.nav-link::after {
  content:''; position:absolute; bottom:2px; left:13px;
  width:0; height:2px; background:var(--acento-oro); border-radius:2px; transition:var(--trans-media);
}
.nav-link:hover::after, .nav-link.active::after { width: calc(100% - 26px); }
.btn-tienda-nav {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  color: var(--color-btn-primary-txt,#0c0b0a); background: var(--color-primary);
  border: none; border-radius: var(--radio-btn); padding: 12px 24px;
  cursor: pointer; letter-spacing: 1px; text-transform:uppercase; transition: var(--trans-media);
  box-shadow: 0 6px 18px rgba(201,162,94,0.22); display:inline-flex; align-items:center; gap:8px;
}
.btn-tienda-nav:hover { transform: translateY(-2px); background:var(--color-accent); box-shadow: 0 10px 26px rgba(201,162,94,0.34); }
.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(--color-primary); border-radius:2px; transition:var(--trans-media); }

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

/* Grano sutil dorado en la oscuridad */
#hero::before {
  content:'';position:absolute;inset:0;z-index:0;
  background-image: radial-gradient(rgba(201,162,94,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity:0.4;
}

/* Halo dorado tenue */
.hero-ring { position:absolute; border-radius:50%; }
.hero-ring-1 { width:680px;height:680px;top:-180px;right:-200px;border:1px solid rgba(201,162,94,0.10); }
.hero-ring-2 { width:460px;height:460px;top:-80px;right:-100px;border:1px solid rgba(201,162,94,0.16); }
.hero-ring-3 { width:900px;height:900px;bottom:-360px;left:-320px;background:radial-gradient(circle,rgba(201,162,94,0.06) 0%,transparent 65%);border:none; }
.hero-ring-4 { display:none; }

.hero-content {
  position:relative;z-index:2;max-width:1000px;margin:0 auto;
  padding:40px 32px 60px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-content > div:first-child { display:flex;flex-direction:column;align-items:center; }

.hero-badge {
  display:inline-flex;align-items:center;gap:12px;
  background:transparent;border:none;border-radius:0;
  padding:0;margin-bottom:30px;font-family:var(--font-body);font-weight:400;
  font-size:0.72rem;color:var(--acento-oro);letter-spacing:4px;text-transform:uppercase;
}
.hero-badge::before {
  content:'';width:40px;height:1px;background:var(--acento-oro);border-radius:0;
}

.hero-title {
  font-family:var(--font-display);font-size:clamp(3.6rem,7vw,6.4rem);
  font-weight:500;line-height:0.98;color:var(--blanco);margin-bottom:22px;
  letter-spacing:-1px;
}
.hero-title .highlight {
  color:var(--acento-oro);
  font-style:italic;font-weight:400;
  -webkit-text-fill-color:initial;background:none;
}

.hero-subtitle {
  font-family:var(--font-body);font-size:0.78rem;font-weight:500;
  color:var(--color-text-subtitle);letter-spacing:3px;text-transform:uppercase;margin-bottom:24px;
}
.hero-desc {
  font-size:1.1rem;color:var(--color-text-subtitle);line-height:1.8;
  margin-bottom:42px;max-width:480px;font-weight:300;
}
.hero-btns { display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px; }

/* Botones hero — champagne sólido + contorno dorado fino */
.hero-btns .btn {
  font-size:0.8rem !important;
  padding:17px 36px !important;
  border-radius:2px !important;
  font-weight:500 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  transition:all 0.5s cubic-bezier(0.22,1,0.36,1) !important;
  position:relative;
  overflow:hidden;
}
.hero-btns .btn-cyan {
  background:var(--color-primary) !important;
  color:#0c0b0a !important;
  box-shadow:0 12px 40px rgba(201,162,94,0.22) !important;
}
.hero-btns .btn-cyan:hover {
  transform:translateY(-3px) !important;
  background:var(--color-accent) !important;
  box-shadow:0 18px 50px rgba(201,162,94,0.34) !important;
}
.hero-btns .btn-cyan::after {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,0.25) 50%,transparent 65%);
  transform:translateX(-100%);
  transition:transform 0.7s;
}
.hero-btns .btn-cyan:hover::after {
  transform:translateX(100%);
}
.hero-btns .btn-outline {
  background:transparent !important;
  color:var(--blanco) !important;
  border:1px solid rgba(201,162,94,0.45) !important;
}
.hero-btns .btn-outline:hover {
  background:rgba(201,162,94,0.08) !important;
  border-color:var(--acento-oro) !important;
  transform:translateY(-3px) !important;
  color:var(--acento-oro) !important;
}

/* Stats mejoradas */
.hero-stats {
  display:flex;gap:0;margin-top:48px;
  background:transparent;border:none;border-top:1px solid rgba(201,162,94,0.18);
  border-radius:0;overflow:visible;
  width:fit-content;padding-top:24px;justify-content:center;
}
.hero-btns { display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px;justify-content:center; }
/* Nav de exploración horizontal bajo el hero */
.hero-explore-row {
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:36px;
}
.hero-explore-row > div {
  background:rgba(255,255,255,0.03)!important;border:1px solid rgba(201,162,94,0.2)!important;
  border-radius:2px!important;padding:12px 22px!important;position:static!important;
  animation:none!important;display:flex!important;align-items:center;gap:8px;
}
.stat-item {
  text-align:left;padding:0 36px 0 0;position:relative;margin-right:36px;
}
.stat-item:not(:last-child)::after {
  content:'';position:absolute;right:0;top:8%;height:84%;
  width:1px;background:rgba(201,162,94,0.18);
}
.stat-num {
  font-family:var(--font-display);font-size:2.6rem;font-weight:500;
  color:var(--acento-oro);display:block;line-height:1;margin-bottom:6px;
}
.stat-label { font-size:0.66rem;color:var(--gris-medio);letter-spacing:2.5px;text-transform:uppercase;font-weight:400; }

/* Visual — tarjeta de gafas centrada bajo el texto (arquitectura vertical) */
.hero-visual {
  display:flex;align-items:center;justify-content:center;
  position:relative;
  width:100%; margin-top:8px;
  overflow:visible;
}
.hero-visual #heroHudFrame { max-width:560px; }

/* ── 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(2rem,3.8vw,3rem);font-weight:600;text-align:center;color:var(--color-primary);margin-bottom:14px;letter-spacing:-0.5px;line-height:1.1; }
.seccion-titulo .hl { color:var(--acento-oro);font-style:italic;font-weight:500; }
.seccion-linea { width:46px;height:2px;background:var(--acento-oro);border-radius:3px;margin:0 auto 18px; }
.seccion-subtitulo { text-align:center;color:var(--color-text-subtitle);font-size:1.05rem;max-width:620px;margin:0 auto 60px;line-height:1.7;font-weight:300; }

/* ══ CARDS ══ */
.card {
  background:rgba(255,255,255,0.03);border:1px solid rgba(201,162,94,0.14);border-radius:var(--radio-card);
  transition:var(--trans-media);overflow:hidden;position:relative;box-shadow:var(--sombra-card);
}
.card:hover { transform:translateY(-6px);border-color:rgba(201,162,94,0.4);box-shadow:var(--sombra-hover); }
.card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--acento-oro);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-body);font-size:0.78rem;font-weight:600;padding:6px 14px;border-radius:50px;
  box-shadow:var(--sombra-promo);letter-spacing:0.3px;
}

/* ══ MODALES ══ */
.modal-overlay {
  position:fixed;inset:0;z-index:2000;background:rgba(5,4,3,0.78);backdrop-filter:blur(6px);
  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:#141210;border:1px solid rgba(201,162,94,0.2);border-radius:6px;
  width:100%;max-width:600px;max-height:90vh;overflow-y:auto;padding:32px;
  animation:slideInModal 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
  box-shadow:0 40px 90px rgba(0,0,0,0.6);position:relative;
}
.modal-close {
  position:absolute;top:16px;right:16px;background:rgba(201,162,94,0.1);border:none;
  color:var(--gris-claro);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-body);font-weight:500;letter-spacing:0.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.btn-sm  { font-size:0.78rem;  padding:9px 18px; }
.btn-md  { font-size:0.88rem;  padding:13px 26px; }
.btn-lg  { font-size:0.95rem;  padding:16px 36px; }
.btn-primary {
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content:center;
  gap: 9px;
  background: var(--color-primary);
  color: var(--color-btn-primary-txt, #0c0b0a);
  box-shadow: 0 10px 30px rgba(var(--acento-rgb), 0.22);
  border-radius: var(--radio-btn);
  padding: 16px 34px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.22,1,0.36,1);
}
.btn-primary::after {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,0.18) 50%,transparent 65%);
  transform:translateX(-100%);
  transition:transform 0.6s;
}
.btn-primary:hover {
  transform: translateY(-3px);
  background: var(--color-accent);
  box-shadow: 0 16px 40px rgba(var(--acento-rgb), 0.34);
}
.btn-primary:hover::after { transform: translateX(100%); }

.btn-secondary {
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content:center;
  gap: 9px;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid rgba(var(--acento-rgb), 0.4);
  border-radius: var(--radio-btn);
  padding: 16px 32px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: all 0.45s cubic-bezier(0.22,1,0.36,1);
}
.btn-secondary:hover {
  background: rgba(var(--acento-rgb), 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-3px);
}
.btn-cyan     { background:var(--color-primary);color:var(--color-btn-primary-txt,#0c0b0a);box-shadow:0 6px 20px rgba(var(--acento-rgb), 0.22);letter-spacing:1px; }
.btn-cyan:hover    { transform:translateY(-2px);background:var(--color-accent);box-shadow:0 10px 28px rgba(var(--acento-rgb), 0.34); }
.btn-outline  { background:transparent;color:var(--color-text-primary);border:1px solid rgba(var(--acento-rgb), 0.4); }
.btn-outline:hover { background:rgba(var(--acento-rgb), 0.08);border-color:var(--color-accent);color:var(--color-accent); }
.btn-danger   { background:#b0413a;color:#fff; }
.btn-danger:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(176,65,58,0.4); }
.btn-success  { background:var(--acento-exito);color:#fff; }
.btn-success:hover { transform:translateY(-2px); }
.btn-whatsapp { background:#1f8a55;color:white; }
.btn-whatsapp:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,138,85,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 — galería e-commerce premium ══ */
.producto-card {
  background:var(--azul-marino);border:1px solid rgba(var(--acento-rgb), 0.12);border-radius:var(--radio-card);overflow:hidden;
  position:relative;transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, border-color .5s;
}
.producto-card:hover { transform:translateY(-8px);border-color:rgba(var(--acento-rgb), 0.4);box-shadow:0 28px 60px rgba(0,0,0,0.45); }
.producto-img-wrap { width:100%;aspect-ratio:4/3;height:auto;overflow:hidden;background:#f6f4ef;position:relative;cursor:zoom-in; }
.producto-img-wrap img { width:100%;height:100%;object-fit:contain;padding:18px;transition:transform 0.7s cubic-bezier(.22,1,.36,1); }
.producto-card:hover .producto-img-wrap img { transform:scale(1.07); }
.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:22px 22px 24px; }
.producto-marca { font-family:var(--font-body);font-size:0.66rem;font-weight:500;color:var(--acento-oro);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px; }
.producto-nombre { font-family:var(--font-display);font-size:1.4rem;font-weight:500;color:var(--blanco);margin-bottom:6px;line-height:1.15; }
.producto-subcat { font-family:var(--font-body);font-size:0.74rem;color:var(--gris-medio);margin-bottom:14px;font-weight:300; }
.producto-formula { background:rgba(var(--acento-rgb), 0.05);border:1px solid rgba(var(--acento-rgb), 0.12);border-radius:6px;padding:12px 14px;margin-bottom:14px;font-family:var(--font-body);font-size:0.78rem;color:var(--gris-claro);display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.formula-item { display:flex;justify-content:space-between; }
.formula-label { color:var(--gris-medio);font-weight:300; }
.formula-val   { color:var(--blanco);font-weight:500; }
.producto-precio { font-family:var(--font-display);font-size:1.8rem;font-weight:600;color:var(--acento-oro);margin-bottom:16px;line-height:1; }
.producto-precio span { font-size:0.78rem;color:var(--gris-medio);font-weight:300;font-family:var(--font-body); }

/* ══ 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-body);font-size:0.78rem;font-weight:600;color:var(--acento-oro);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px; }
.footer-col a, .footer-col p { display:block;color:rgba(255,255,255,0.72);font-size:0.875rem;text-decoration:none;margin-bottom:8px;transition:var(--trans-rapida);font-weight:300; }
.footer-col a:hover { color:#fff; }

/* ══ REDES SOCIALES ══ */
.footer-social { display:flex;gap:12px;margin-top:16px; }
.social-btn {
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:var(--trans-media);color:rgba(255,255,255,0.8);
}
.social-btn:hover { background:rgba(194,112,61,0.25);color:#fff;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,0.2); }
.social-btn svg { width:18px;height:18px;fill:currentColor; }
.social-btn.fb:hover  { background:rgba(24,119,242,0.35);color:#fff; }
.social-btn.ig:hover  { background:rgba(225,48,108,0.35);color:#fff; }
.social-btn.wa:hover  { background:rgba(37,211,102,0.35);color:#fff; }

/* ══ FOOTER CIMATECH ══ */
.footer-divider { height:1px;background:rgba(255,255,255,0.12);margin-bottom:28px; }
.footer-cimatech {
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:16px 24px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:12px;text-align:center;
}
.footer-cimatech span { color:rgba(255,255,255,0.7);font-size:0.8rem; }
.footer-cimatech img { height:28px;width:auto;filter:brightness(0) invert(1) opacity(0.7); }
.footer-cimatech strong { color:#fff;font-family:var(--font-display);font-size:0.9rem;font-weight:600;letter-spacing:0.5px; }
.footer-desc { color:rgba(255,255,255,0.7);font-size:0.9rem;line-height:1.65;max-width:280px;font-weight:300; }

/* ══ 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 ══ */
/* ══ SERVICIOS — header asimétrico + cards editoriales ══ */
.serv-header {
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end;
  margin-bottom:56px; padding-bottom:32px; border-bottom:1px solid rgba(var(--acento-rgb),0.15);
}
.serv-kicker { font-family:var(--font-body); font-size:0.7rem; font-weight:500; color:var(--acento-oro); letter-spacing:4px; text-transform:uppercase; display:inline-block; margin-bottom:16px; }
.serv-title { font-family:var(--font-display); font-size:clamp(2.4rem,4vw,3.6rem); font-weight:500; color:var(--blanco); line-height:1; letter-spacing:-1px; }
.serv-title em { color:var(--acento-oro); font-style:italic; font-weight:400; }
.serv-lead { font-family:var(--font-body); font-size:1.02rem; font-weight:300; color:var(--color-text-subtitle); line-height:1.75; }
.serv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0; border-top:1px solid rgba(var(--acento-rgb),0.12); }
.serv-cta { text-align:left; }
@media(max-width:760px){ .serv-header{grid-template-columns:1fr;gap:20px;align-items:start;} }

.servicio-card {
  background:transparent;
  border:none; border-bottom:1px solid rgba(var(--acento-rgb),0.12); border-right:1px solid rgba(var(--acento-rgb),0.12);
  padding:38px 32px; text-align:left;
  position:relative; overflow:hidden;
  transition:all 0.45s cubic-bezier(0.22,1,0.36,1);
}
.servicio-card::before {
  content:''; position:absolute; top:0; left:0; bottom:0;
  width:2px; background:var(--acento-oro);
  transform:scaleY(0); transform-origin:top; transition:transform 0.45s ease;
}
.servicio-card:hover {
  transform:none;
  background:rgba(var(--acento-rgb),0.04);
}
.servicio-card:hover::before { transform:scaleY(1); }
.servicio-icon-wrap {
  width:56px; height:56px; border-radius:0;
  background:transparent;
  border:none;
  display:flex; align-items:center; justify-content:flex-start;
  margin:0 0 24px; font-size:2.2rem;
  transition:all 0.45s ease;
}
.servicio-card:hover .servicio-icon-wrap {
  transform:translateY(-4px);
}
.servicio-titulo {
  font-family:var(--font-display); font-size:1.5rem; font-weight:500;
  color:var(--blanco); margin-bottom:12px; letter-spacing:-0.3px; line-height:1.15;
}
.servicio-desc { color:var(--color-text-subtitle); font-size:0.92rem; line-height:1.7; font-weight:300; }
.servicio-tag {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:18px; font-family:var(--font-body); font-weight:500;
  font-size:0.7rem; color:var(--acento-oro); letter-spacing:1.5px; text-transform:uppercase;
}
/* ══ NOSOTROS — banda editorial ══ */
#nosotros .seccion-inner > div:nth-child(4) { gap:40px; }
.nos-band { display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:center; margin-bottom:80px; padding-bottom:64px; border-bottom:1px solid rgba(var(--acento-rgb),0.12); }
.nos-bignum { display:flex; flex-direction:column; }
.nos-bignum-val { font-family:var(--font-display); font-size:clamp(7rem,14vw,12rem); font-weight:500; color:var(--acento-oro); line-height:0.8; letter-spacing:-4px; }
.nos-bignum-label { font-family:var(--font-body); font-size:0.8rem; letter-spacing:3px; text-transform:uppercase; color:var(--gris-medio); margin-top:18px; }
.nos-kicker { font-family:var(--font-body); font-size:0.7rem; font-weight:500; color:var(--acento-oro); letter-spacing:4px; text-transform:uppercase; display:inline-block; margin-bottom:18px; }
.nos-h { font-family:var(--font-display); font-size:clamp(2.2rem,3.6vw,3.2rem); font-weight:500; color:var(--blanco); line-height:1.05; letter-spacing:-0.5px; margin-bottom:22px; }
.nos-h em { color:var(--acento-oro); font-style:italic; font-weight:400; }
.nos-p { font-family:var(--font-body); font-size:1.05rem; font-weight:300; color:var(--color-text-subtitle); line-height:1.8; max-width:520px; }
.nos-pilares { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-bottom:80px; }
.nos-pilar { padding:0 40px; border-left:1px solid rgba(var(--acento-rgb),0.14); }
.nos-pilar:first-child { padding-left:0; border-left:none; }
.nos-pilar-n { font-family:var(--font-display); font-size:1rem; color:var(--acento-oro); font-style:italic; display:block; margin-bottom:16px; }
.nos-pilar-t { font-family:var(--font-display); font-size:1.6rem; font-weight:500; color:var(--blanco); margin-bottom:14px; }
.nos-pilar-d { font-family:var(--font-body); font-size:0.92rem; font-weight:300; color:var(--color-text-subtitle); line-height:1.75; }
.nos-cta { text-align:center; padding:64px 40px; background:linear-gradient(135deg,rgba(var(--acento-rgb),0.1),rgba(var(--acento-rgb),0.02)); border:1px solid rgba(var(--acento-rgb),0.25); }
.nos-cta-h { font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.8rem); font-weight:500; color:var(--blanco); margin-bottom:28px; letter-spacing:-0.5px; }
.nos-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media(max-width:860px){
  .nos-band{grid-template-columns:1fr;gap:28px;}
  .nos-pilares{grid-template-columns:1fr;gap:32px;}
  .nos-pilar{padding:0 0 0 20px;border-left:1px solid rgba(var(--acento-rgb),0.14);}
  .nos-pilar:first-child{padding-left:20px;border-left:1px solid rgba(var(--acento-rgb),0.14);}
}

/* ══ 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;
}
/* ══ TIENDA PASO 0 — split editorial (demolición de las 3 cajas en fila) ══ */
.tienda0-split {
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:start;
  max-width:1280px; margin:0 auto; padding-top:20px;
}
.tienda0-aside { position:sticky; top:120px; }
.tienda0-kicker {
  font-family:var(--font-body); font-size:0.7rem; font-weight:500;
  color:var(--acento-oro); letter-spacing:4px; text-transform:uppercase;
  display:inline-block; margin-bottom:22px;
}
.tienda0-title {
  font-family:var(--font-display); font-size:clamp(2.6rem,4.2vw,3.8rem);
  font-weight:500; color:var(--blanco); line-height:1.02; letter-spacing:-1px; margin-bottom:24px;
}
.tienda0-title em { color:var(--acento-oro); font-style:italic; font-weight:400; }
.tienda0-lead {
  font-family:var(--font-body); font-size:1.02rem; font-weight:300;
  color:var(--color-text-subtitle); line-height:1.75; max-width:340px; margin-bottom:40px;
}
.tienda0-meta {
  display:flex; align-items:center; gap:16px;
  font-family:var(--font-body); font-size:0.7rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--gris-medio);
}
.tienda0-meta-line { flex:1; height:1px; background:rgba(var(--acento-rgb),0.25); max-width:80px; }
/* el grid de categorías ahora es lista vertical apilada, cada una ancha tipo "fila editorial" */
.tienda0-grid { grid-template-columns:1fr !important; gap:16px !important; max-width:none !important; }
.tienda0-grid .condicion-card {
  display:flex !important; align-items:center; gap:28px; text-align:left;
  padding:30px 36px !important; min-height:128px;
}
.tienda0-grid .condicion-icon { margin-bottom:0 !important; font-size:2.6rem; flex-shrink:0; }
.tienda0-grid .condicion-nombre { font-size:1.9rem; flex:1; }
.tienda0-grid .condicion-card::after { bottom:50%; transform:translateY(50%) translateX(-8px); right:36px; font-size:1.6rem; }
.tienda0-grid .condicion-card:hover::after { transform:translateY(50%) translateX(0); }
@media (max-width:900px){
  .tienda0-split { grid-template-columns:1fr; gap:36px; }
  .tienda0-aside { position:static; }
  .tienda0-lead { max-width:none; }
}
.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1280px; margin: 0 auto;
}
@media (max-width: 640px){ .grid-productos { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.condicion-card {
  background: var(--azul-marino);
  border: 1px solid rgba(var(--acento-rgb),0.12);
  border-radius: var(--radio-card); padding: 48px 28px 40px;
  text-align: left; cursor: pointer;
  transition: all 0.6s cubic-bezier(0.22,1,0.36,1);
  position: relative; overflow: hidden;
}
.condicion-card::before {
  content: ''; position: absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--acento-oro);
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.condicion-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--acento-rgb),0.35);
  box-shadow: 0 28px 60px rgba(0,0,0,0.4);
}
.condicion-card:hover::before { width:100%; }
.condicion-card.seleccionada {
  border-color: var(--acento-oro);
}
.condicion-card.seleccionada::before { width:100%; }
.condicion-icon {
  font-size: 3.2rem; margin-bottom: 28px;
  display: block; position: relative; z-index: 1;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.condicion-card:hover .condicion-icon { transform: translateY(-4px); }
.condicion-nombre {
  font-family: var(--font-display); font-size: 1.7rem;
  font-weight: 500; color: var(--blanco); letter-spacing: -0.3px;
  line-height: 1.15; position: relative; z-index: 1;
}
.condicion-card::after {
  content: '→'; position:absolute; bottom:28px; right:28px;
  font-size:1.3rem; color:var(--acento-oro); opacity:0;
  transform:translateX(-8px); transition:all 0.5s cubic-bezier(0.22,1,0.36,1); z-index:1;
}
.condicion-card:hover::after { opacity:1; transform:translateX(0); }
.condicion-card:hover .condicion-nombre { color: var(--acento-oro); }
.condicion-card.seleccionada .condicion-nombre { color: var(--acento-oro); }
.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(255,255,255,0.04);
  border: 1px solid rgba(201,162,94,0.22);
  border-radius: 3px;
  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(201,162,94,0.4); }
.navbar-buscador:focus-within {
  border-color: var(--acento-oro);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(201,162,94,0.1);
  width: 280px;
}
.navbar-buscador > svg { color: rgba(201,162,94,0.7); flex-shrink: 0; }
.navbar-buscador input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.2px;
  flex: 1;
  min-width: 0;
  padding: 7px 0;
}
.navbar-buscador input::placeholder { color: rgba(168,159,146,0.6); font-weight: 300; }
.navbar-buscador-btn {
  background: var(--color-primary);
  color: #0c0b0a;
  border: none;
  border-radius: 2px;
  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(201,162,94,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: 201,162,94; --primario-rgb: 201,162,94; --tarjeta-rgb: 22,20,17; --texto-tenue:rgba(245,240,232,0.62); }

/* ════════════════════════════════════════════════════════════════
   TEMAS LÚMINA — 8 paletas con carácter, seleccionables desde el admin.
   El tema por defecto "lumina" (oscuro/oro) vive en :root.
   Cada bloque redefine TODA la piel: fondo, acentos, texto, gradientes.
   ════════════════════════════════════════════════════════════════ */

/* ── 2 · MEDIANOCHE CORAL — oscuro + coral vibrante ── */
html[data-tema="coral"]{
  --color-primary:#ff6b5e;--color-secondary:#ff8a72;--color-accent:#ff6b5e;
  --color-bg-sitio:#12100f;--color-footer-bg:#0c0a09;--color-header-bg:rgba(18,16,15,0.72);
  --acento-rgb:255,107,94;--primario-rgb:255,107,94;--tarjeta-rgb:28,24,22;
  --blanco:#f6efe9;--blanco-suave:#ece2da;--gris-claro:#cbbeb5;--gris-medio:#8f8378;
  --celeste:#ff8a72;--celeste-claro:#ff6b5e;--turquesa:#ff6b5e;--acento-oro:#ff6b5e;
  --color-text-primary:#f6efe9;--color-text-subtitle:#a89a8e;--texto-tenue:rgba(246,239,233,0.6);
  --color-btn-primary-txt:#12100f;
  --azul-profundo:#12100f;--azul-marino:#1c1816;--azul-medio:#241f1c;
  --grad-hero:radial-gradient(ellipse 90% 70% at 70% 25%,#241715 0%,#12100f 60%);
}
/* ── 3 · ESMERALDA — oscuro + verde joya ── */
html[data-tema="esmeralda"]{
  --color-primary:#34d39e;--color-secondary:#2bb88a;--color-accent:#34d39e;
  --color-bg-sitio:#0a1614;--color-footer-bg:#06100e;--color-header-bg:rgba(10,22,20,0.72);
  --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:#2bb88a;--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:#06100e;
  --azul-profundo:#0a1614;--azul-marino:#10201c;--azul-medio:#152a25;
  --grad-hero:radial-gradient(ellipse 90% 70% at 70% 25%,#11231e 0%,#0a1614 60%);
}
/* ── 4 · VINO BORGOÑA — oscuro + magenta vino ── */
html[data-tema="borgona"]{
  --color-primary:#e84a6f;--color-secondary:#d13a8a;--color-accent:#e84a6f;
  --color-bg-sitio:#160a0f;--color-footer-bg:#10070a;--color-header-bg:rgba(22,10,15,0.72);
  --acento-rgb:232,74,111;--primario-rgb:232,74,111;--tarjeta-rgb:34,18,24;
  --blanco:#f6e9ee;--blanco-suave:#ecd9e0;--gris-claro:#d2bcc5;--gris-medio:#947e87;
  --celeste:#d13a8a;--celeste-claro:#e84a6f;--turquesa:#e84a6f;--acento-oro:#e84a6f;
  --color-text-primary:#f6e9ee;--color-text-subtitle:#a8949c;--texto-tenue:rgba(246,233,238,0.6);
  --color-btn-primary-txt:#160a0f;
  --azul-profundo:#160a0f;--azul-marino:#221218;--azul-medio:#2c1820;
  --grad-hero:radial-gradient(ellipse 90% 70% at 70% 25%,#2a1019 0%,#160a0f 60%);
}
/* ── 5 · MARFIL KLEIN — claro + azul eléctrico ── */
html[data-tema="klein"]{
  --color-primary:#1f3df0;--color-secondary:#4659f5;--color-accent:#1f3df0;
  --color-bg-sitio:#f3f1ea;--color-footer-bg:#0f1320;--color-header-bg:rgba(243,241,234,0.82);
  --acento-rgb:31,61,240;--primario-rgb:15,19,32;--tarjeta-rgb:255,255,255;
  --blanco:#0f1320;--blanco-suave:#1c2030;--gris-claro:#3a3f4f;--gris-medio:#73788a;
  --celeste:#1f3df0;--celeste-claro:#1f3df0;--turquesa:#1f3df0;--acento-oro:#1f3df0;
  --color-text-primary:#0f1320;--color-text-subtitle:#5b6072;--texto-tenue:rgba(15,19,32,0.66);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#f3f1ea;--azul-marino:#ffffff;--azul-medio:#eceadf;
  --grad-hero:linear-gradient(160deg,#faf9f4 0%,#f3f1ea 60%,#e9e6d8 100%);
  --grad-cristal:#1f3df0;--radio-card:6px;--radio-btn:4px;
  --font-display:'Outfit',sans-serif;
}
/* ── 6 · CORAL ATELIER — claro + coral cálido ── */
html[data-tema="coralday"]{
  --color-primary:#f0522e;--color-secondary:#f47352;--color-accent:#f0522e;
  --color-bg-sitio:#fbf4ef;--color-footer-bg:#23120c;--color-header-bg:rgba(251,244,239,0.82);
  --acento-rgb:240,82,46;--primario-rgb:35,18,12;--tarjeta-rgb:255,255,255;
  --blanco:#23120c;--blanco-suave:#32201a;--gris-claro:#4e3a32;--gris-medio:#8a7268;
  --celeste:#f0522e;--celeste-claro:#f0522e;--turquesa:#f0522e;--acento-oro:#f0522e;
  --color-text-primary:#23120c;--color-text-subtitle:#7a6258;--texto-tenue:rgba(35,18,12,0.66);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#fbf4ef;--azul-marino:#ffffff;--azul-medio:#f3e7df;
  --grad-hero:linear-gradient(160deg,#fdf8f4 0%,#fbf4ef 55%,#f6e7dd 100%);
}
/* ── 7 · OLIVA & MOSTAZA — claro cálido + oliva + mostaza ── */
html[data-tema="oliva"]{
  --color-primary:#3f4422;--color-secondary:#5c6233;--color-accent:#d99a16;
  --color-bg-sitio:#f4f1e6;--color-footer-bg:#2a2c18;--color-header-bg:rgba(244,241,230,0.82);
  --acento-rgb:217,154,22;--primario-rgb:63,68,34;--tarjeta-rgb:255,253,246;
  --blanco:#2e3019;--blanco-suave:#3f4422;--gris-claro:#56583a;--gris-medio:#8a8662;
  --celeste:#5c6233;--celeste-claro:#d99a16;--turquesa:#d99a16;--acento-oro:#d99a16;
  --color-text-primary:#2e3019;--color-text-subtitle:#6e6b4c;--texto-tenue:rgba(46,48,25,0.66);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#f4f1e6;--azul-marino:#fffdf6;--azul-medio:#ece7d4;
  --grad-hero:linear-gradient(160deg,#f8f5ec 0%,#f4f1e6 55%,#ebe5d2 100%);
}
/* ── 8 · MENTA FRESCA — claro + verde menta intenso ── */
html[data-tema="menta"]{
  --color-primary:#16241f;--color-secondary:#2c4d40;--color-accent:#0fab7c;
  --color-bg-sitio:#eef5f1;--color-footer-bg:#16241f;--color-header-bg:rgba(238,245,241,0.82);
  --acento-rgb:15,171,124;--primario-rgb:22,36,31;--tarjeta-rgb:255,255,255;
  --blanco:#16241f;--blanco-suave:#24332c;--gris-claro:#3a4a43;--gris-medio:#728178;
  --celeste:#0fab7c;--celeste-claro:#0fab7c;--turquesa:#0fab7c;--acento-oro:#0fab7c;
  --color-text-primary:#16241f;--color-text-subtitle:#5b6a62;--texto-tenue:rgba(22,36,31,0.66);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#eef5f1;--azul-marino:#ffffff;--azul-medio:#e2ede7;
  --grad-hero:linear-gradient(160deg,#f3f9f5 0%,#eef5f1 55%,#e2ede7 100%);
}

/* ── 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); }