/* ==========================================================
   NEO7 — Péptidos · Stylesheet
   Tema: dark medical / bioluminescent / glassmorphism
   ========================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg-0: #05070d;
  --bg-1: #0a0e1a;
  --bg-2: #101627;
  --bg-3: #18203a;
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  --text: #e8edf6;
  --text-dim: #98a2b8;
  --muted: #6b7387;
  --teal: #5eead4;
  --violet: #a78bfa;
  --pink: #f0abfc;
  --amber: #fbbf24;
  --green: #34d399;
  --red: #f87171;
  --grad: linear-gradient(135deg, #5eead4 0%, #a78bfa 100%);
  --grad-2: linear-gradient(135deg, #a78bfa 0%, #f0abfc 100%);
  --shadow-glow: 0 0 60px rgba(94,234,212,.18), 0 0 120px rgba(167,139,250,.12);
  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.22,.8,.2,1);

  /* Tokens semánticos (cambian con el tema) */
  --btn-bg: #ffffff;
  --btn-fg: #0a0e1a;
  --surface: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  --surface-2: linear-gradient(165deg, #0e1525, #080d18);
  --surface-card: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  --surface-card-hover: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  --tint-1: rgba(255,255,255,.03);
  --tint-2: rgba(255,255,255,.06);
  --tint-3: rgba(255,255,255,.10);
  --shadow-card: 0 22px 50px -22px rgba(0,0,0,.7);
  --overlay: rgba(0,0,0,.8);
}

html { scroll-behavior: smooth; }

/* Accesibilidad — respeta preferencia del sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}
body{
  background: var(--bg-0);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }

::selection { background: rgba(94,234,212,.35); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(#5eead4, #a78bfa); border-radius: 6px; }

/* ============ PROGRESS ============ */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--grad); z-index: 999; box-shadow: 0 0 12px rgba(94,234,212,.5);
}

.bg-particles{
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; opacity: .25;
}

/* ============ NAVBAR ============ */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px 22px;
  transition: padding .3s var(--ease), background .3s var(--ease), backdrop-filter .3s;
}
.nav.scrolled{
  padding: 10px 22px;
  background: rgba(5,7,13,.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand{ display: flex; align-items: center; }
.brand-logo{
  display: block;
  height: auto;
  max-width: 140px;
  width: 140px;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .25s var(--ease);
}
.brand:hover .brand-logo{ opacity: .85; }
.footer-brand .brand-logo{ max-width: 170px; width: 170px; margin-bottom: 18px; }
@media (max-width: 720px){
  .brand-logo{ max-width: 110px; width: 110px; }
}

.nav-links{ display: flex; gap: 28px; }
.nav-links a{ font-size: 14px; color: var(--text-dim); transition: color .2s; position: relative; }
.nav-links a:hover{ color: var(--text); }
.nav-links a::after{
  content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px;
  background: var(--grad); transition: width .3s var(--ease);
}
.nav-links a:hover::after{ width: 100%; }

.nav-cta{ display: flex; align-items: center; gap: 10px; }
.btn-ghost, .btn-cart{
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line);
  color: var(--text-dim); transition: all .2s;
  position: relative;
}
.btn-ghost:hover, .btn-cart:hover{ color: var(--text); border-color: var(--line-2); background: rgba(255,255,255,.03); }
.cart-count{
  position: absolute; top: -6px; right: -6px;
  background: var(--grad); color: #0a0e1a; font-weight: 700; font-size: 11px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  transform: scale(0); transition: transform .25s var(--ease);
}
.cart-count.show{ transform: scale(1); }

@media (max-width: 920px){ .nav-links{ display: none; } }

/* Mobile: el nav-cta se aprieta con lang-switch + theme + search + cart.
   Fix: bajamos gap, padding, escondemos el botón de search (no es crítico:
   hay catálogo visible al hacer scroll), y achicamos botones para no
   desbordar el viewport con el carrito. */
@media (max-width: 540px){
  .nav-inner{ gap: 10px; padding-left: 14px !important; padding-right: 14px !important; }
  .nav-cta{ gap: 6px; }
  .btn-ghost, .btn-cart{ width: 36px; height: 36px; }
  #openSearch{ display: none; }
}
@media (max-width: 380px){
  .nav-inner{ gap: 8px; }
  .nav-cta{ gap: 4px; }
  .btn-ghost, .btn-cart{ width: 32px; height: 32px; border-radius: 8px; }
}

/* Lang chips: en mobile aumentamos hit-target para dedo. */
@media (max-width: 540px){
  .lang-chip{ min-height: 28px; padding: 6px 9px; font-size: 11px; }
}

/* ============ BUTTONS ============ */
.btn-primary{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; font-size: 14.5px;
  letter-spacing: 0;
  transition: transform .25s var(--ease), background .3s, color .3s;
}
.btn-primary:hover{ transform: translateY(-1px); background: var(--teal); color: var(--btn-fg); }
.btn-primary.sm{ padding: 9px 16px; font-size: 13px; }
.btn-primary.block{ width: 100%; justify-content: center; padding: 14px; }
.btn-primary:disabled{ opacity: .35; cursor: not-allowed; box-shadow: none; }

.icon-btn{
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--text-dim); transition: all .2s;
  font-size: 16px;
}
.icon-btn:hover{ background: rgba(255,255,255,.06); color: var(--text); }

/* ============ ATMÓSFERA GLOBAL — fixed, continúa entre secciones ============ */
.page-atmosphere{
  position: fixed;
  inset: 0;
  z-index: -2;            /* detrás del .bg-particles canvas (-1) y de todo */
  pointer-events: none;
  overflow: hidden;
}
.orb{
  position: absolute; border-radius: 50%; filter: blur(110px);
  opacity: .32; animation: float 28s ease-in-out infinite;
  will-change: transform;
}
.orb-a{ width: 60vmin; height: 60vmin; left: -10vmin; top: -8vmin; background: radial-gradient(circle, #5eead4 0%, transparent 65%); }
.orb-b{ width: 70vmin; height: 70vmin; right: -12vmin; top: 30vh; background: radial-gradient(circle, #a78bfa 0%, transparent 65%); animation-delay: -7s; opacity: .28; }
@keyframes float{
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.05); }
  66% { transform: translate(-30px, 40px) scale(.95); }
}

/* ============ HERO ============ */
.hero{
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 120px 22px 80px;
  overflow: hidden;
}

.hero-content{
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; width: 100%;
  text-align: center;
}

.hero-badge{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(94,234,212,.06); border: 1px solid rgba(94,234,212,.18);
  font-size: 12.5px; font-weight: 500; color: #d6fffb;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 28px;
}
.dot-pulse{
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  position: relative;
}
.dot-pulse::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border: 1.5px solid var(--teal); animation: pulse 1.6s infinite ease-out;
}
@keyframes pulse{
  0%{ transform: scale(.8); opacity:1; }
  100%{ transform: scale(2.2); opacity:0; }
}

.hero-title{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(40px, 7.4vw, 104px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 auto 56px;
  max-width: 1080px;
}
.hero-title .word{
  display: inline-block; opacity: 0; transform: translateY(40px);
  animation: wordIn .9s var(--ease) forwards;
  margin-right: .2em;
}
.hero-title .word.gradient{
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title .word:nth-child(1){ animation-delay: .05s; }
.hero-title .word:nth-child(2){ animation-delay: .15s; }
.hero-title .word:nth-child(3){ animation-delay: .25s; }
.hero-title .word:nth-child(4){ animation-delay: .35s; }
.hero-title .word:nth-child(5){ animation-delay: .45s; }
.hero-title .word:nth-child(6){ animation-delay: .55s; }
.hero-title .word:nth-child(7){ animation-delay: .65s; }
@keyframes wordIn{ to{ opacity: 1; transform: translateY(0); } }

.hero-sub{
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.5;
  max-width: 680px; color: var(--text-dim);
  margin-bottom: 36px;
  opacity: 0; transform: translateY(20px); animation: wordIn 1s var(--ease) .9s forwards;
}
.hero-sub strong{ color: var(--text); font-weight: 600; }

.btn-link-arrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px;                       /* mismo que .btn-primary */
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font-size: 14.5px; font-weight: 500;
  letter-spacing: 0;
  transition: all .25s var(--ease);
}
.btn-link-arrow:hover{
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(94,234,212,.06);
  transform: translateY(-1px);
}
.btn-link-arrow svg{ transition: transform .25s var(--ease); }
.btn-link-arrow:hover svg{ transform: translateX(3px); }

.hero-actions{
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 60px;
  opacity: 0; transform: translateY(20px); animation: wordIn 1s var(--ease) 1.05s forwards;
}

.hero-stats{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px;
  max-width: 720px;
  opacity: 0; transform: translateY(20px); animation: wordIn 1s var(--ease) 1.2s forwards;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.stat strong{
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3.8vw, 44px); font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.stat span{ font-size: 12px; color: var(--text-dim); letter-spacing: .03em; }
@media (max-width: 700px){ .hero-stats{ grid-template-columns: repeat(2, 1fr); } }

.scroll-hint{
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
  pointer-events: none;
}
@media (max-width: 900px){ .scroll-hint{ display: none; } }
.scroll-hint .line{ width: 1px; height: 36px; background: var(--text-dim); position: relative; overflow: hidden; }
.scroll-hint .line::after{
  content:''; position: absolute; top: -36px; left: 0; width: 100%; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--teal));
  animation: scrollDot 2.4s linear infinite;
}
@keyframes scrollDot{ to{ top: 36px; } }

/* ============ MARQUEE ============ */
.marquee{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 22px 0;
}
.marquee-track{
  display: flex; gap: 48px; white-space: nowrap;
  animation: marquee 70s linear infinite;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(16px, 1.6vw, 22px); font-weight: 400; letter-spacing: .02em;
  color: rgba(255,255,255,.18);
}
.marquee-track span{ flex-shrink: 0; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ============ SECTIONS ============ */
.section{ padding: 120px 22px; position: relative; }
.container{ max-width: 1280px; margin: 0 auto; }
.section-tag{
  display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 18px; font-weight: 500;
}
.section-title{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  margin-bottom: 20px;
}
.section-title em{
  font-style: normal;
  font-weight: inherit;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Fix: el letter-spacing negativo del title + background-clip:text
     recortaba el último carácter del gradient (la "s" final de
     "señalizadoras", la "l" de "funcional", etc.). Padding-right
     pequeño extiende el bounding box del clip sin afectar el flow. */
  padding-right: .08em;
  margin-right: -.08em;
}
.section-lead{ color: var(--text-dim); font-size: clamp(15px, 1.5vw, 18px); max-width: 680px; }
.section-head{ margin-bottom: 56px; }

/* Reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity: 1; transform: none; }

/* ============ CIENCIA ============ */
.two-col{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center;
}
@media (max-width: 980px){ .two-col{ grid-template-columns: 1fr; gap: 56px; } }

.bullet-list{ list-style: none; margin-top: 28px; }
.bullet-list li{
  padding: 14px 0; border-bottom: 1px dashed var(--line);
  font-size: 15.5px; color: var(--text-dim);
  transition: padding-left .25s, color .25s;
}
.bullet-list li::before{
  content: "→"; margin-right: 14px; color: var(--teal); font-weight: 700;
}
.bullet-list li:hover{ padding-left: 8px; color: var(--text); }
.bullet-list li strong{ color: var(--text); font-weight: 600; }

/* ============ CIENCIA — grid + texto + puntos ============ */
.ciencia-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 980px){
  .ciencia-grid{ grid-template-columns: 1fr; gap: 56px; }
}
.ciencia-text{ max-width: 600px; }
.ciencia-text .section-title{
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 1.02;
  margin-bottom: 28px;
}
.ciencia-eyebrow{
  display: inline-block;
  font: 600 11px "JetBrains Mono", monospace;
  color: var(--teal);
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid rgba(94,234,212,.28);
  border-radius: 999px;
  background: rgba(94,234,212,.04);
  margin-bottom: 24px;
}
.ciencia-lead{
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.65;
  color: var(--text-dim);
  margin: 18px 0 36px;
}
.ciencia-lead strong{
  color: var(--text);
  font-weight: 600;
}
.ciencia-points{
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.ciencia-points li{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.ciencia-points .point-num{
  font: 700 24px "Space Grotesk", sans-serif;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.02em;
  line-height: 1;
  padding-top: 4px;
}
.ciencia-points h4{
  font: 600 17px "Space Grotesk", sans-serif;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.ciencia-points p{
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
}

.science-card{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  padding: 60px 36px 36px;
  overflow: hidden;
  min-height: 460px;
  transform-style: preserve-3d;
  transition: transform .4s var(--ease);
}
.card-shine{
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(94,234,212,.18), transparent 50%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.science-card:hover .card-shine{ opacity: 1; }
/* Stage limpio — molécula 3D centrada con halo estático, sin orbits ni pulsos */
.science-stage{
  position: relative;
  width: min(280px, 80%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 32px;
  display: grid;
  place-items: center;
}
.science-stage::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(94,234,212,.18) 0%, rgba(167,139,250,.10) 45%, transparent 72%);
  filter: blur(2px);
  z-index: 0;
}
.ciencia-mol{
  position: relative;
  display: block;
  width: 92%; height: 92%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  pointer-events: none;
  z-index: 1;
  outline: none;
}
.ciencia-mol::part(default-progress-bar){ display: none; }

/* ============ DNA HELIX (reemplaza el frasco 3D en la sección Ciencia) ============ */
/* Wrapper: SIN card chrome. Solo un halo radial detrás. */
.science-helix-wrap{
  position: relative;
  display: grid; place-items: center;
  padding: 20px 0;
}
.science-helix-wrap::before{
  content: "";
  position: absolute; inset: 10% 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(94,234,212,.16) 0%,
      rgba(167,139,250,.10) 40%,
      transparent 72%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
[data-theme="light"] .science-helix-wrap::before{
  background:
    radial-gradient(circle at 50% 50%,
      rgba(15,191,163,.18) 0%,
      rgba(124,92,245,.12) 40%,
      transparent 72%);
}

.dna-helix{
  position: relative;
  z-index: 1;
  /* Escala con viewport: ~clamp entre 300 (mobile) y 560 (desktop ancho). */
  width: clamp(300px, 35vw, 560px);
  max-width: 100%;
  aspect-ratio: 3 / 4;
  pointer-events: none;
  perspective: 1000px;
  --node-size: clamp(11px, 1.1vw, 16px);
  --trail-w: clamp(1.8px, .2vw, 2.6px);
  --bond-gap: clamp(3px, .35vw, 5px);
  --bond-h:   clamp(1.2px, .15vw, 1.8px);
}
/* Las CSS variables ya escalan con clamp() — sólo override extremo en pantallas
   muy chicas para evitar overlap entre nodos. */
@media (max-width: 360px){
  .dna-helix{ --node-size: 9px; --trail-w: 1.4px; --bond-gap: 2.5px; --bond-h: 1.1px; }
}

/* Rung: 2 nodos + 2 H-bonds + 2 backbone-trails. JS setea --lx/--rx (px),
   --la/--ra (alpha 0-1), --ls/--rs (escala), --ba (alpha bond), --z (z-index). */
.dna-rung{
  position: absolute;
  left: 50%; top: var(--y);
  width: 0; height: 0;
  transform-style: preserve-3d;
  z-index: var(--z, 0);
}

/* ---- H-BONDS: A-T = 2 enlaces, G-C = 3 enlaces (bioquímicamente correcto) ----
   El bond-3 está siempre en el DOM y oculto por defecto; sólo se muestra
   en los rungs marcados como G-C (data-base 2 o 3). En esos rungs además
   re-distribuimos bond-1 y bond-2 para hacer espacio al tercero.
   Blur de profundidad: el bond se difumina cuando el par mira de canto. */
.dna-bond{
  position: absolute;
  left: var(--lx, -60px);
  width: calc(var(--rx, 60px) - var(--lx, -60px));
  height: var(--bond-h);
  border-radius: 2px;
  pointer-events: none;
  opacity: var(--ba, 1);
  filter: blur(calc((1 - var(--ba, 1)) * 0.7px));
}
.dna-bond-1{ top: calc(0px - var(--bond-gap) / 2); }
.dna-bond-2{ top: calc(0px + var(--bond-gap) / 2); }
.dna-bond-3{ top: 0; display: none; }
/* G-C: tres enlaces de hidrógeno. Reposicionamos bond-1/2 hacia afuera
   y el bond-3 al centro. */
.dna-rung[data-base="2"] .dna-bond-3,
.dna-rung[data-base="3"] .dna-bond-3 { display: block; }
.dna-rung[data-base="2"] .dna-bond-1,
.dna-rung[data-base="3"] .dna-bond-1 { top: calc(0px - var(--bond-gap)); }
.dna-rung[data-base="2"] .dna-bond-2,
.dna-rung[data-base="3"] .dna-bond-2 { top: calc(0px + var(--bond-gap)); }
.dna-rung[data-base="0"] .dna-bond{
  background: linear-gradient(90deg,
    rgba(94,234,212,0) 0%, rgba(94,234,212,.95) 18%,
    rgba(125,211,252,.95) 50%, rgba(167,139,250,.95) 82%, rgba(167,139,250,0) 100%);
}
.dna-rung[data-base="1"] .dna-bond{
  background: linear-gradient(90deg,
    rgba(167,139,250,0) 0%, rgba(167,139,250,.95) 18%,
    rgba(240,171,252,.95) 50%, rgba(248,113,113,.85) 82%, rgba(248,113,113,0) 100%);
}
.dna-rung[data-base="2"] .dna-bond{
  background: linear-gradient(90deg,
    rgba(52,211,153,0) 0%, rgba(52,211,153,.9) 18%,
    rgba(94,234,212,.95) 50%, rgba(125,211,252,.95) 82%, rgba(125,211,252,0) 100%);
}
.dna-rung[data-base="3"] .dna-bond{
  background: linear-gradient(90deg,
    rgba(251,191,36,0) 0%, rgba(251,191,36,.9) 18%,
    rgba(240,171,252,.95) 50%, rgba(167,139,250,.95) 82%, rgba(167,139,250,0) 100%);
}
[data-theme="light"] .dna-rung[data-base="0"] .dna-bond{
  background: linear-gradient(90deg,
    rgba(15,191,163,0) 0%, rgba(15,191,163,.95) 18%,
    rgba(56,189,248,.95) 50%, rgba(124,92,245,.95) 82%, rgba(124,92,245,0) 100%);
}
[data-theme="light"] .dna-rung[data-base="1"] .dna-bond{
  background: linear-gradient(90deg,
    rgba(124,92,245,0) 0%, rgba(124,92,245,.95) 18%,
    rgba(201,61,209,.95) 50%, rgba(220,38,38,.9) 82%, rgba(220,38,38,0) 100%);
}
[data-theme="light"] .dna-rung[data-base="2"] .dna-bond{
  background: linear-gradient(90deg,
    rgba(5,150,105,0) 0%, rgba(5,150,105,.9) 18%,
    rgba(15,191,163,.95) 50%, rgba(56,189,248,.95) 82%, rgba(56,189,248,0) 100%);
}
[data-theme="light"] .dna-rung[data-base="3"] .dna-bond{
  background: linear-gradient(90deg,
    rgba(217,119,6,0) 0%, rgba(217,119,6,.9) 18%,
    rgba(201,61,209,.95) 50%, rgba(124,92,245,.95) 82%, rgba(124,92,245,0) 100%);
}

/* ---- NODOS (sugar-phosphate "spheres") ---- */
.dna-node{
  position: absolute;
  top: 0;
  width: var(--node-size); height: var(--node-size);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  filter: blur(calc((1 - var(--la, 1)) * 0.6px));
}
.dna-node-l{
  left: var(--lx, -60px);
  opacity: var(--la, 1);
  --scale: var(--ls, 1);
  background: radial-gradient(circle at 32% 28%,
    #d2faf2 0%, #5eead4 45%, #14b8a6 85%, #0d8470 100%);
  box-shadow:
    inset -1px -1px 2px rgba(0,0,0,.18),
    0 0 calc(12px * var(--la, 1)) rgba(94,234,212, calc(.65 * var(--la, 1))),
    0 0 calc(26px * var(--la, 1)) rgba(94,234,212, calc(.28 * var(--la, 1)));
}
.dna-node-r{
  left: var(--rx, 60px);
  opacity: var(--ra, 1);
  --scale: var(--rs, 1);
  background: radial-gradient(circle at 32% 28%,
    #ece1ff 0%, #a78bfa 45%, #7c3aed 85%, #5b21b6 100%);
  box-shadow:
    inset -1px -1px 2px rgba(0,0,0,.18),
    0 0 calc(12px * var(--ra, 1)) rgba(167,139,250, calc(.65 * var(--ra, 1))),
    0 0 calc(26px * var(--ra, 1)) rgba(167,139,250, calc(.28 * var(--ra, 1)));
}

/* ---- BACKBONE TRAILS (sugar-phosphate ribbon) ---- */
.dna-trail-l, .dna-trail-r{
  position: absolute;
  top: 0;
  height: var(--trail-w);
  transform-origin: 0 50%;
  pointer-events: none;
  border-radius: 999px;
}
.dna-trail-l{
  left: var(--lx, -60px);
  width: var(--tll, 0px);
  transform: translateY(-50%) rotate(var(--tlr, 0deg));
  background: linear-gradient(90deg,
    rgba(94,234,212, calc(.9 * var(--la, 1))),
    rgba(94,234,212, calc(.9 * var(--lan, 1))));
  box-shadow:
    0 0 6px rgba(94,234,212, calc(.5 * var(--la, 1))),
    inset 0 -1px 0 rgba(0,0,0,.15);
}
.dna-trail-r{
  left: var(--rx, 60px);
  width: var(--trl, 0px);
  transform: translateY(-50%) rotate(var(--trr, 0deg));
  background: linear-gradient(90deg,
    rgba(167,139,250, calc(.9 * var(--ra, 1))),
    rgba(167,139,250, calc(.9 * var(--ran, 1))));
  box-shadow:
    0 0 6px rgba(167,139,250, calc(.5 * var(--ra, 1))),
    inset 0 -1px 0 rgba(0,0,0,.15);
}

/* Light theme node + trail overrides */
[data-theme="light"] .dna-node-l{
  background: radial-gradient(circle at 32% 28%, #5eead4 0%, #0fbfa3 55%, #0d8d7c 100%);
  box-shadow:
    inset -1px -1px 2px rgba(0,0,0,.12),
    0 0 calc(10px * var(--la, 1)) rgba(15,191,163, calc(.6 * var(--la, 1))),
    0 0 calc(22px * var(--la, 1)) rgba(15,191,163, calc(.28 * var(--la, 1)));
}
[data-theme="light"] .dna-node-r{
  background: radial-gradient(circle at 32% 28%, #a78bfa 0%, #7c5cf5 55%, #5d3ed8 100%);
  box-shadow:
    inset -1px -1px 2px rgba(0,0,0,.12),
    0 0 calc(10px * var(--ra, 1)) rgba(124,77,245, calc(.6 * var(--ra, 1))),
    0 0 calc(22px * var(--ra, 1)) rgba(124,77,245, calc(.28 * var(--ra, 1)));
}
[data-theme="light"] .dna-trail-l{
  background: linear-gradient(90deg,
    rgba(15,191,163, calc(.9 * var(--la, 1))),
    rgba(15,191,163, calc(.9 * var(--lan, 1))));
  box-shadow:
    0 0 5px rgba(15,191,163, calc(.45 * var(--la, 1))),
    inset 0 -1px 0 rgba(0,0,0,.10);
}
[data-theme="light"] .dna-trail-r{
  background: linear-gradient(90deg,
    rgba(124,77,245, calc(.9 * var(--ra, 1))),
    rgba(124,77,245, calc(.9 * var(--ran, 1))));
  box-shadow:
    0 0 5px rgba(124,77,245, calc(.45 * var(--ra, 1))),
    inset 0 -1px 0 rgba(0,0,0,.10);
}

@media (prefers-reduced-motion: reduce){
  .dna-helix{ animation: none; }
}

.science-meta{
  display: grid; gap: 14px;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.science-meta > div{ display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: 13.5px; }
.science-meta b{ color: var(--text-dim); font-weight: 500; }
.science-meta span{ color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; text-align: right; }

/* ============ CATEGORÍAS ============ */
.cat-grid{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
@media (max-width: 1200px){ .cat-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px){ .cat-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .cat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){ .cat-grid{ grid-template-columns: 1fr; } }
.cat-card{
  position: relative; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.015);
  cursor: pointer; transition: transform .3s var(--ease), border-color .3s, background .3s;
  overflow: hidden;
}
.cat-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.025);
}
.cat-card.active{
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
}
.cat-card h3{ font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; letter-spacing: -.01em; line-height: 1.25; }
.cat-card p{ font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.cat-count{
  position: absolute; top: 12px; right: 14px;
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500;
  color: var(--muted);
}

/* ============ CATÁLOGO / FILTROS ============ */
.filter-bar{
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 36px;
}
.filter-chips{ display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.chip{
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .2s;
}
.chip:hover{ border-color: var(--line-2); color: var(--text); }
.chip.active{
  border-color: transparent; color: #0a0e1a;
  background: #fff;
  font-weight: 600;
}
.search-input{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--text); font-family: inherit;
  padding: 11px 18px; border-radius: 12px;
  width: 280px; max-width: 100%; font-size: 14px;
  outline: none; transition: border-color .2s;
}
.search-input::placeholder{ color: var(--muted); }
.search-input:focus{ border-color: var(--teal); }

.product-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* ============ E-COMMERCE PRODUCT CARD ============ */
.product-card{
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .3s, background .3s;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.product-card:hover,
.product-card:focus-visible{
  border-color: rgba(94,234,212,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  box-shadow: 0 22px 50px -22px rgba(0,0,0,.7),
              0 0 0 1px rgba(94,234,212,.08),
              0 0 40px -12px rgba(94,234,212,.22);
  outline: none;
}
/* Cursor-tracking shine — usa --mx/--my que setea el spring tilt en JS */
.product-card .card-shine{
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(94,234,212,.12), transparent 45%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 1;
  border-radius: 18px;
}
.product-card:hover .card-shine{ opacity: 1; }

/* Image stage — vial PNG carries its own NEO brand gradient.
   Square-ish stage with the vial centered + contained so all 20 render at the
   same visual size regardless of source page variance. */
.product-card .prod-image{
  position: relative;
  aspect-ratio: 4 / 5;             /* más vertical para vials */
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(94,234,212,.08), transparent 60%),
    linear-gradient(180deg, #0c1428 0%, #060912 100%);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 12px 14%;               /* menos padding lateral → frasco más grande */
}
@media (max-width: 540px){
  .product-card .prod-image{ padding: 10px 10%; aspect-ratio: 3 / 4; }
}
.product-card .prod-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .9s var(--ease);
  z-index: 1;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55))
          drop-shadow(0 0 18px rgba(94,234,212,.08));
}
.product-card:hover .prod-image img{
  transform: scale(1.04);
}

/* Tags top-left */
.prod-tags{
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.badge{
  font-size: 10px; padding: 5px 10px; border-radius: 999px;
  background: rgba(10,14,26,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
/* Variantes por badge — color identifica tipo de producto */
.badge-top         { background: rgba(94,234,212,.14); color: var(--teal); border-color: rgba(94,234,212,.35); }
.badge-nuevo       { background: rgba(52,211,153,.12); color: var(--green); border-color: rgba(52,211,153,.35); }
.badge-bestseller  { background: rgba(251,191,36,.12); color: var(--amber); border-color: rgba(251,191,36,.35); }
.badge-combo       { background: rgba(167,139,250,.12); color: var(--violet); border-color: rgba(167,139,250,.35); }
.badge-beauty,
.badge-premium     { background: rgba(240,171,252,.12); color: var(--pink); border-color: rgba(240,171,252,.32); }
.badge-focus       { background: rgba(94,234,212,.10); color: var(--teal); border-color: rgba(94,234,212,.30); }
.badge-out{
  background: rgba(107,115,135,.18); color: var(--text-dim);
  border-color: rgba(107,115,135,.35);
}
/* Out of stock card state */
.product-card.out-of-stock{ opacity: .55; }
.product-card.out-of-stock .prod-image img{ filter: grayscale(.6) brightness(.85); }
.product-card.out-of-stock .add-btn[disabled]{
  cursor: not-allowed; opacity: .55;
}
.product-card.out-of-stock .add-btn[disabled]:hover{ background: var(--btn-bg); }
.pm-add[disabled]{ cursor: not-allowed; opacity: .55; }
/* Low stock chip con dot pulsante */
.badge-low{
  background: rgba(251,191,36,.12); color: var(--amber); border-color: rgba(251,191,36,.32);
}
.badge-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: stockPulse 1.6s ease-in-out infinite;
}

/* Wishlist top-right */
.wish-btn{
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,14,26,.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim);
  display: grid; place-items: center;
  transition: all .25s var(--ease);
}
.wish-btn:hover{ color: var(--pink); border-color: rgba(240,171,252,.4); transform: scale(1.06); }
.wish-btn.on{ color: var(--pink); border-color: rgba(240,171,252,.5); background: rgba(240,171,252,.12); }

/* Quick view overlay */
.prod-quick{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, transparent 50%, rgba(5,7,13,.6) 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: 2;
  pointer-events: none;
}
.product-card:hover .prod-quick,
.product-card:focus-within .prod-quick{ opacity: 1; }
.quick-view-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 20px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: #0a0e1a;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  backdrop-filter: blur(8px);
  transform: translateY(12px);
  transition: transform .4s var(--ease), background .25s;
  pointer-events: auto;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.55);
}
.product-card:hover .quick-view-btn{ transform: translateY(0); }
.quick-view-btn:hover{ background: var(--teal); }
.quick-view-btn .qv-arrow{
  transition: transform .3s var(--ease);
}
.quick-view-btn:hover .qv-arrow{ transform: translateX(3px); }

/* Body */
.prod-body{
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.prod-cat{
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); font-weight: 600;
  margin-bottom: 1px;
}
.prod-name{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 600; line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
}
.prod-dose{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  color: var(--text-dim);
  letter-spacing: .04em;
  margin-left: 6px;
}
.prod-sub{
  font-size: 12.5px; color: var(--text-dim); font-weight: 400;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rating */
.prod-rating{
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: 12px; color: var(--text-dim);
}
.stars{ display: inline-flex; gap: 1px; }
.stars .s{ color: rgba(255,255,255,.18); }
.stars .s.full{ color: var(--amber); fill: var(--amber); }
.stars .s.half{ color: var(--amber); fill: url(#starHalf); }
.stars .s.empty{ fill: rgba(255,255,255,.08); }
.rating-num{ color: var(--text); font-weight: 600; font-family: 'Space Grotesk', sans-serif; }
.reviews{ color: var(--muted); }

/* Foot */
.prod-foot{
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 20px 18px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.05);
}
.price-block{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-price{
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: -.025em; color: var(--text);
  line-height: 1;
}
.price-block em{
  font-style: normal; color: var(--muted); font-size: 10.5px; font-weight: 500;
  letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.add-btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); border: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  transition: transform .25s var(--ease), background .25s, color .25s, padding .25s;
  white-space: nowrap;
}
.add-btn:hover{ background: var(--teal); transform: translateY(-1px); }
.add-btn.added{ background: var(--green); color: #0a1a14; }
.add-btn svg{ flex-shrink: 0; }
.add-btn .check-icon{ display: none; }
.add-btn.added .add-icon{ display: none; }
.add-btn.added .check-icon{ display: inline-block; animation: addCheck .4s var(--ease); }
@keyframes addCheck{
  0%{ transform: scale(0) rotate(-90deg); opacity: 0; }
  50%{ transform: scale(1.25) rotate(0); }
  100%{ transform: scale(1) rotate(0); opacity: 1; }
}

@media (max-width: 480px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod-name{ font-size: 16px; }
  .prod-price{ font-size: 18px; }
  .add-btn span{ display: none; }
  .add-btn{ width: 44px; height: 44px; padding: 0; } /* tamaño táctil WCAG */
  .prod-body{ padding: 14px 14px 10px; }
  .prod-foot{ padding: 12px 14px 14px; }
  .prod-meta{ font-size: 11.5px; }
  .prod-sku{ display: none; } /* SKU se ve en el modal en mobile */
}

/* ============ CARDS — metadatos clínicos, SKU, precio tachado, toast ============ */
.prod-meta{
  margin: 4px 0 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: .2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-sku{
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-dim);
  opacity: .7;
  letter-spacing: .4px;
  margin-top: 6px;
}
.prod-price-wrap{
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.prod-price-old{
  font-size: 13px;
  color: var(--text-dim);
  opacity: .65;
  text-decoration: line-through;
}
.add-btn[disabled]{
  cursor: not-allowed;
  pointer-events: none; /* evita misclick + duplicados */
}
.wish-btn:focus-visible,
.quick-view-btn:focus-visible,
.add-btn:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.product-card:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Toast accesible — anuncia agregado al carrito, favoritos, etc. */
.neo7-toast{
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translate(-50%, 20px);
  background: var(--bg-2, #101627);
  color: var(--text, #e6ebf6);
  border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(94,234,212,.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  max-width: min(360px, calc(100% - 32px));
  text-align: center;
}
.neo7-toast.show{
  opacity: 1;
  transform: translate(-50%, 0);
}
[data-theme="light"] .neo7-toast{
  background: #ffffff;
  color: #0a0e1a;
  border-color: rgba(15,191,163,.25);
  box-shadow: 0 12px 32px rgba(15,30,60,.12), 0 0 0 1px rgba(15,191,163,.12);
}
@media (prefers-reduced-motion: reduce){
  .neo7-toast{ transition: opacity .15s linear; transform: translate(-50%, 0); }
}

/* ============ STACKS ============ */
.stacks-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.stack-card{
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  transition: all .3s var(--ease);
  position: relative; overflow: hidden;
}
.stack-card::before{
  content:''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grad); transform: scaleY(0); transform-origin: top;
  transition: transform .35s var(--ease);
}
.stack-card:hover{ transform: translateX(3px); border-color: rgba(94,234,212,.25); }
.stack-card:hover::before{ transform: scaleY(1); }
.stack-combo{
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.35;
}
.stack-goal{ font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }

.alert{
  display: flex; gap: 16px; padding: 22px 26px;
  border: 1px solid rgba(251,191,36,.2); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(251,191,36,.04), transparent);
  align-items: flex-start;
}
.alert svg{ color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.alert p{ color: var(--text-dim); font-size: 14px; }
.alert b{ color: var(--text); }

/* ============ CTA FINAL ============ */
.cta-final{ padding-top: 0; }
.cta-card{
  text-align: center; padding: 80px 40px;
  border: 1px solid var(--line); border-radius: 30px;
  background:
    radial-gradient(circle at 20% 0%, rgba(94,234,212,.12), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(167,139,250,.12), transparent 50%),
    linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  position: relative; overflow: hidden;
}
.cta-card h2{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 56px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05; margin-bottom: 16px;
}
.cta-card .gradient{ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-card p{ color: var(--text-dim); font-size: 17px; max-width: 540px; margin: 0 auto 32px; }
.cta-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============ FOOTER ============ */
.footer{
  border-top: 1px solid var(--line);
  padding: 80px 22px 40px;
  margin-top: 60px;
}
.footer-inner{
  display: grid; grid-template-columns: 1.2fr .8fr .8fr 1fr; gap: 40px;
  margin-bottom: 60px;
}
@media (max-width: 880px){ .footer-inner{ grid-template-columns: 1fr 1fr; } }
.footer b{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; letter-spacing: .04em; text-transform: uppercase; }
.footer a{ display: block; font-size: 14px; color: var(--text-dim); padding: 4px 0; transition: color .2s; }
.footer a:hover{ color: var(--text); }
.muted{ color: var(--text-dim); font-size: 13.5px; margin-top: 14px; }
.muted.small{ font-size: 12px; line-height: 1.5; }
.foot-bottom{
  border-top: 1px solid var(--line); padding-top: 24px;
  font-size: 12px; color: var(--muted); text-align: center;
}

/* ============ CART DRAWER ============ */
.overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
  z-index: 90;
}
.overlay.show{ opacity: 1; pointer-events: auto; }

.cart-drawer{
  position: fixed; top: 0; right: 0;
  width: 100%; max-width: min(440px, 100vw); height: 100vh;
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  z-index: 100;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  display: flex; flex-direction: column;
}
@media (max-width: 540px){
  .cart-drawer{ border-left: 0; }
}
.cart-drawer.open{ transform: translateX(0); }
.cart-head{
  padding: 24px 26px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
}
.cart-head h3{ font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; }
.cart-body{ flex: 1; overflow-y: auto; padding: 18px 26px; }
.cart-empty{
  text-align: center; padding: 60px 20px; color: var(--text-dim);
}
.cart-item{
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px;
  padding: 16px 0; border-bottom: 1px dashed var(--line);
  align-items: center;
}
.cart-item-img{
  width: 64px; height: 88px; border-radius: 10px;
  background: #0a1020;
  overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.05);
  padding: 4px;          /* respiro interno para que el frasco no toque los bordes */
}
.cart-item-img img{
  position: absolute; inset: 4px;
  width: calc(100% - 8px); height: calc(100% - 8px);
  object-fit: contain;   /* contain → frasco entero visible, sin recorte */
  object-position: center;
}
.cart-item h4{ font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.cart-item p{ font-size: 12px; color: var(--text-dim); }
.cart-item-actions{ display: flex; align-items: center; gap: 8px; }
.qty{ display: flex; align-items: center; gap: 8px; }
.qty button{
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line);
  font-size: 14px; color: var(--text-dim); transition: all .2s;
}
.qty button:hover{ border-color: var(--teal); color: var(--teal); }
.qty span{ min-width: 22px; text-align: center; font-family: 'JetBrains Mono', monospace; }
.cart-item-price{ font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; margin-top: 4px; }
.cart-remove{ font-size: 11px; color: var(--red); margin-top: 6px; }

.cart-foot{
  padding: 22px 26px; border-top: 1px solid var(--line);
  background: rgba(255,255,255,.015);
}
.cart-row{ display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; color: var(--text-dim); }
.cart-row[hidden]{ display: none; }
.cart-row b{ color: var(--text); font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.cart-row.total{ font-size: 18px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 10px; color: var(--text); }
.cart-row.total b{ font-size: 22px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cart-row.promo-row b{ color: var(--green); }

.promo-block{ margin: 20px 0 16px; }
.promo-block label{ display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.promo-block label em{ color: var(--muted); font-style: normal; }

.buyer-toggle{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.buyer-opt{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 500;
  border: 1px solid transparent;
  transition: all .2s var(--ease);
}
.buyer-opt:hover{ color: var(--text); }
.buyer-opt.active{
  background: rgba(94,234,212,.10);
  border-color: rgba(94,234,212,.32);
  color: var(--teal);
}
.buyer-opt svg{ flex-shrink: 0; opacity: .9; }
[data-theme="light"] .buyer-toggle{ background: var(--tint-1); }
[data-theme="light"] .buyer-opt.active{
  background: rgba(15,191,163,.10);
  border-color: rgba(15,191,163,.35);
  color: #0a766a;
}
.promo-input{ display: flex; gap: 8px; }
.promo-input input{
  flex: 1; background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px; color: var(--text); font-family: 'JetBrains Mono', monospace;
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  outline: none; transition: border-color .2s;
}
.promo-input input:focus{ border-color: var(--teal); }
.promo-msg{ margin-top: 8px; font-size: 12.5px; min-height: 18px; }
.promo-msg.ok{ color: var(--green); }
.promo-msg.err{ color: var(--red); }
.promo-msg b{ color: inherit; }

.cart-note{
  font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 10px;
}

/* ============ MODAL ============ */
.modal{
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center; padding: 22px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.modal.show{ opacity: 1; pointer-events: auto; }
.modal::before{
  content:''; position: absolute; inset: 0;
  background: rgba(0,0,0,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-card{
  position: relative;
  width: 100%; max-width: 1080px; max-height: 92vh;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(165deg, #0e1525, #080d18);
  border: 1px solid var(--line-2); border-radius: 24px;
  padding: 0;
  transform: scale(.96) translateY(20px); transition: transform .35s var(--ease);
}
.modal-card::-webkit-scrollbar{ width: 6px; }
.modal-card::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.1); border-radius: 6px; }
.modal.show .modal-card{ transform: none; }
.modal-close{
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10,14,26,.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 14px;
}
.modal-close:hover{ background: rgba(10,14,26,.9); border-color: rgba(255,255,255,.2); }
@media (max-width: 540px){
  .pm-buy{ grid-template-columns: auto 1fr; }
  .pm-wish{ grid-column: 1 / -1; width: 100%; border-radius: 999px; }
}

.success-card{ max-width: 460px; text-align: center; padding: 56px 40px; }
.success-ring{
  width: 92px; height: 92px; margin: 0 auto 26px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--grad);
  box-shadow: 0 0 60px rgba(94,234,212,.4);
  animation: ringIn .6s var(--ease) backwards;
}
.success-ring .check{
  font-size: 44px; color: #0a0e1a; font-weight: 700;
  animation: checkPop .4s var(--ease) .2s backwards;
}
@keyframes ringIn{ from{ transform: scale(0) rotate(-180deg); opacity:0; } }
@keyframes checkPop{ from{ transform: scale(0); } }
.success-card h2{ font-family: 'Space Grotesk', sans-serif; font-size: 28px; margin-bottom: 12px; }
.success-card p{ color: var(--text-dim); font-size: 14.5px; margin-bottom: 24px; }

/* ============ SHIPPING MODAL ============ */
.shipping-card{ max-width: 640px; padding: 44px 40px 36px; }
.shipping-head{ margin-bottom: 22px; }
.shipping-eyebrow{
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 10px;
  padding: 4px 10px; border: 1px solid rgba(94,234,212,.3); border-radius: 999px;
  background: rgba(94,234,212,.05);
}
.shipping-head h2{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px; font-weight: 700; margin-bottom: 6px;
  letter-spacing: -.02em;
}
.shipping-sub{ color: var(--text-dim); font-size: 14px; }

.shipping-form{ display: flex; flex-direction: column; gap: 14px; }
.form-row{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.form-row.two{ grid-template-columns: 1fr 1fr; }
@media (max-width: 540px){
  .form-row.two{ grid-template-columns: 1fr; }
  .shipping-card{ padding: 36px 22px 26px; }
}

.field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span{
  font-size: 12px; color: var(--text-dim);
  letter-spacing: .02em; font-weight: 500;
}
.field > span .opt{ color: var(--muted); font-style: normal; font-weight: 400; }
.field input,
.field select,
.field textarea{
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.field textarea{ resize: vertical; min-height: 64px; }
.field input::placeholder,
.field textarea::placeholder{ color: var(--muted); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--teal);
  background: rgba(94,234,212,.04);
}
.field select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2398a2b8' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.field select option{ background: #0e1525; color: var(--text); }
.field.invalid input,
.field.invalid select,
.field.invalid textarea{ border-color: var(--red); }
.field-err{
  font-size: 11.5px; color: var(--red); font-style: normal;
  min-height: 14px; line-height: 1.2;
  opacity: 0; transition: opacity .15s;
}
.field.invalid .field-err{ opacity: 1; }

.shipping-disclaimer{
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-dim);
  padding: 12px 14px; margin-top: 4px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.shipping-disclaimer svg{ flex-shrink: 0; color: var(--teal); }

.shipping-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px;
}
.shipping-foot .btn-link-arrow{
  font-size: 13px; color: var(--text-dim);
}
.shipping-foot .btn-link-arrow:hover{ color: var(--text); }
.shipping-foot .btn-primary{ flex: 1; max-width: 280px; justify-content: center; }
@media (max-width: 540px){
  .shipping-foot{ flex-direction: column-reverse; align-items: stretch; }
  .shipping-foot .btn-primary{ max-width: none; width: 100%; }
}

/* ============ PAYER BLOCK (DNI/CUIT en checkout) ============ */
.payer-block{
  margin-top: 6px; padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(94,234,212,.04);
}
.payer-title{
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 14px; margin-bottom: 4px;
  letter-spacing: -.005em;
}
.payer-sub{
  color: var(--text-dim); font-size: 12px; margin-bottom: 12px;
  line-height: 1.5;
}
[data-theme="light"] .payer-block{
  background: rgba(15,191,163,.05);
  border-color: rgba(15,191,163,.18);
}

/* ============ PAYMENT METHOD RADIOS (checkout) ============ */
.payment-method-block{
  margin-top: 6px; padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(167,139,250,.04);
}
[data-theme="light"] .payment-method-block{
  background: rgba(124,77,255,.04);
  border-color: rgba(124,77,255,.18);
}
.payment-method-options{
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 540px){
  .payment-method-options{ grid-template-columns: 1fr; }
}
.payment-method-opt{ position: relative; cursor: pointer; }
.payment-method-opt input[type="radio"]{
  position: absolute; opacity: 0; pointer-events: none;
}
.payment-method-opt .pm-card{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s, background .15s, transform .15s;
}
.payment-method-opt:hover .pm-card{ border-color: var(--line-2); }
.payment-method-opt input[type="radio"]:checked + .pm-card{
  border-color: var(--teal);
  background: rgba(94,234,212,.06);
}
[data-theme="light"] .payment-method-opt input[type="radio"]:checked + .pm-card{
  background: rgba(15,191,163,.06);
}
.payment-method-opt input[type="radio"]:focus-visible + .pm-card{
  outline: 2px solid var(--teal); outline-offset: 2px;
}
.payment-method-opt .pm-card-icon{
  display: grid; place-items: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--tint-2);
  color: var(--text-dim);
}
.payment-method-opt input[type="radio"]:checked + .pm-card .pm-card-icon{
  background: rgba(94,234,212,.14); color: var(--teal);
}
.payment-method-opt .pm-card-body{
  display: flex; flex-direction: column; min-width: 0;
}
.payment-method-opt .pm-card-body strong{
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.3;
}
.payment-method-opt .pm-card-body em{
  font-style: normal; font-size: 11.5px; color: var(--text-dim);
  margin-top: 2px; line-height: 1.4;
}

/* ============ TRANSFER PAYMENT MODAL ============ */
.transfer-card{ max-width: 600px; padding: 44px 40px 36px; }
.transfer-head{ margin-bottom: 22px; }
.transfer-head h2{
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px;
  margin: 6px 0 6px; letter-spacing: -.02em;
}
.transfer-head code{
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: var(--tint-1); padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--line);
}
.fx-sub{
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.fx-sub .fx-amount{ font-size: 14px; color: var(--text); }
.fx-sub .fx-amount strong{ font-family: 'Space Grotesk', sans-serif; }
.fx-sub .fx-meta{ font-size: 11px; color: var(--text-dim); letter-spacing: .02em; }

.cbu-card{
  margin: 18px 0 24px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(94,234,212,.06), rgba(167,139,250,.04));
  border: 1px solid var(--line-2);
  border-radius: 14px;
}
[data-theme="light"] .cbu-card{
  background: linear-gradient(135deg, rgba(15,191,163,.05), rgba(124,92,245,.04));
}
.cbu-row{
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.cbu-row:last-of-type{ border-bottom: 0; }
.cbu-label{
  font: 500 11px 'JetBrains Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}
.cbu-value{
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 500;
  letter-spacing: .02em;
  color: var(--text);
  word-break: break-all;
}
.btn-copy{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 11.5px; font-weight: 500;
  transition: all .15s;
  white-space: nowrap;
}
.btn-copy:hover{
  border-color: var(--teal); color: var(--teal);
  background: rgba(94,234,212,.06);
}
.btn-copy.copied{
  border-color: var(--green); color: var(--green);
  background: rgba(52,211,153,.08);
}
[data-theme="light"] .btn-copy{ background: #fff; }
[data-theme="light"] .btn-copy:hover{ background: rgba(15,191,163,.06); }
.cbu-warn{
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--amber);
  line-height: 1.5;
}
.cbu-warn svg{ flex-shrink: 0; margin-top: 1px; }

.proof-block{ margin-top: 10px; }
.proof-drop{
  display: block; cursor: pointer;
  margin: 12px 0;
  padding: 24px;
  border: 2px dashed var(--line-2);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  text-align: center;
  transition: all .2s;
}
.proof-drop:hover, .proof-drop.dragover{
  border-color: var(--teal);
  background: rgba(94,234,212,.04);
}
[data-theme="light"] .proof-drop{ background: var(--tint-1); }
[data-theme="light"] .proof-drop:hover, [data-theme="light"] .proof-drop.dragover{
  background: rgba(15,191,163,.05);
  border-color: var(--teal);
}
.proof-drop-inner{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-dim);
}
.proof-drop-inner svg{ color: var(--text-dim); margin-bottom: 4px; }
.proof-drop-inner span{ font-size: 14px; font-weight: 500; color: var(--text); }
.proof-drop-inner em{ font-size: 11.5px; color: var(--muted); font-style: normal; }
.proof-drop.has-file .proof-drop-inner{ color: var(--green); }
.proof-drop.has-file .proof-drop-inner svg{ color: var(--green); }
.proof-status{
  margin-top: 12px; padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  background: var(--tint-1);
  border: 1px solid var(--line);
}
.proof-status.err{ color: var(--red); border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.06); }
.proof-status.ok{ color: var(--green); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.06); }

/* Resumen de envío en success */
.success-shipping{
  margin: 0 0 22px;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  font-size: 13px;
  color: var(--text-dim);
}
.success-shipping b{ color: var(--text); display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }
.success-shipping span{ display: block; line-height: 1.5; }

/* ============ PRODUCT MODAL — E-COMMERCE PDP ============ */
.modal-close{ z-index: 5; }

.pm-layout{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 580px;
  width: 100%;
}
.pm-layout > *{ min-width: 0; max-width: 100%; }
.pm-thumbs{ min-width: 0; }
.pm-thumb{ min-width: 0; }
@media (max-width: 880px){ .pm-layout{ grid-template-columns: minmax(0, 1fr); min-height: 0; } }

/* Gallery (left side) */
.pm-gallery{
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(94,234,212,.12), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 30%, rgba(167,139,250,.08), transparent 70%),
    linear-gradient(180deg, #0d1424 0%, #0a1020 60%, #070b16 100%);
  padding: 32px 32px 24px;
  display: flex; flex-direction: column; gap: 18px;
  border-right: 1px solid rgba(255,255,255,.05);
  border-radius: 24px 0 0 24px;
}
@media (max-width: 880px){ .pm-gallery{ border-radius: 24px 24px 0 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.05); padding: 28px 22px 18px; } }

.pm-image-main{
  position: relative;
  flex: 1;
  aspect-ratio: 11 / 20;
  min-height: 460px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(94,234,212,.10), transparent 65%),
    radial-gradient(60% 70% at 50% 25%, rgba(167,139,250,.08), transparent 70%),
    linear-gradient(180deg, #0a1224 0%, #060a18 100%);
}
@media (max-width: 880px){ .pm-image-main{ min-height: 380px; aspect-ratio: 11 / 16; } }
.pm-image-glow{
  position: absolute; inset: 12% 22%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(94,234,212,.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: pmGlow 4s ease-in-out infinite;
}
@keyframes pmGlow{ 50%{ opacity: .7; transform: scale(1.08); } }

.pm-image-main img.pm-main-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 28px 20%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
  transition: transform .5s var(--ease);
  z-index: 1;
}
.pm-image-main:hover img.pm-main-img{ transform: scale(1.04); }

.pm-badge{ position: absolute; top: 18px; left: 18px; z-index: 4; }
/* Share button — esquina superior derecha */
.pm-share{
  position: absolute; top: 16px; right: 16px; z-index: 4;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,14,26,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim);
  transition: all .25s var(--ease);
}
.pm-share:hover{ color: var(--teal); border-color: rgba(94,234,212,.35); transform: translateY(-1px); }
.pm-share.copied{ background: var(--teal); color: #0a0e1a; border-color: var(--teal); }
.pm-share.copied::after{
  content: "Copiado"; position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  background: rgba(10,14,26,.95); border: 1px solid rgba(94,234,212,.3);
  font: 600 11px "JetBrains Mono", monospace;
  padding: 5px 9px; border-radius: 6px; color: var(--teal);
  white-space: nowrap; letter-spacing: .05em;
  animation: shareCopiedFade 1.4s ease forwards;
}
@keyframes shareCopiedFade{ 0%{ opacity: 0; transform: translate(8px, -50%); } 15%, 75%{ opacity: 1; transform: translate(0, -50%); } 100%{ opacity: 0; } }


/* Info panel (right side) */
.pm-info{
  padding: 36px 38px;
  display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 880px){ .pm-info{ padding: 28px 22px; } }

.pm-eyebrow{
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
  /* Reservar espacio para el botón X (38px + margen) para que no se superponga al SKU */
  padding-right: 56px;
}
.pm-eyebrow .prod-cat{ color: var(--teal); }
.pm-sku{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--muted); text-transform: none; letter-spacing: .04em;
}

.pm-title{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3.2vw, 38px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.05;
  color: var(--text);
}
.pm-subtitle{ color: var(--text-dim); font-size: 14.5px; line-height: 1.4; }

.pm-rating-row{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim);
}
.pm-rating-row .stars .s{ width: 14px; height: 14px; }
.pm-rating-row .rating-num{ color: var(--text); font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.pm-rating-row .reviews{ color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line); margin-left: 2px; }

.pm-short{
  color: var(--text-dim); font-size: 14.5px; line-height: 1.55;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 6px 0 4px;
}

.pm-price-row{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-top: 6px;
}
.pm-price{
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--text);
}
.pm-price em{
  font-style: normal; color: var(--muted); font-size: 13px; font-weight: 500;
  margin-left: 6px; letter-spacing: .04em;
}
.pm-stock-block{
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
  min-width: 160px;
}
.pm-stock{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--green);
  font-weight: 500;
}
.pm-stock .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: stockPulse 2s ease-in-out infinite;
}
.pm-stock.low{ color: var(--amber); }
.pm-stock.low .dot{ background: var(--amber); box-shadow: 0 0 10px var(--amber); }
@keyframes stockPulse{ 50%{ opacity: .5; } }
/* Visual urgency bar */
.stock-bar{
  width: 100%; max-width: 160px;
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
}
.stock-bar-fill{
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--teal));
  animation: stockFillIn .9s var(--ease) backwards;
}
.pm-stock.low ~ .stock-bar .stock-bar-fill,
.pm-stock-block:has(.pm-stock.low) .stock-bar-fill{
  background: linear-gradient(90deg, var(--amber), var(--red));
}
@keyframes stockFillIn{ from{ width: 0 !important; } }

.pm-buy{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}
.pm-qty{
  display: flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0 4px;
  height: 50px;
}
.pm-qty button{
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px; color: var(--text-dim);
  display: grid; place-items: center;
  transition: color .2s, background .2s;
}
.pm-qty button:hover{ color: var(--text); background: rgba(255,255,255,.06); }
.pm-qty span{
  min-width: 28px; text-align: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--text);
}
.pm-add{ height: 50px; border-radius: 999px !important; font-size: 14.5px !important; font-weight: 600 !important; }
.pm-wish{
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--text-dim);
  transition: all .25s;
}
.pm-wish:hover{ color: var(--pink); border-color: rgba(240,171,252,.4); }
.pm-wish.on{ color: var(--pink); border-color: rgba(240,171,252,.5); background: rgba(240,171,252,.1); }

.pm-perks-line{
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 4px;
  font-size: 12px; color: var(--text-dim);
  line-height: 1.5;
}
.pm-perks-line svg{ color: var(--teal); flex-shrink: 0; }
.pm-dose{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--text);
  background: rgba(94,234,212,.05);
  border-left: 2px solid var(--teal);
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 6px;
}

/* Tabs estilo chip */
.pm-tabs-wrap{ margin-top: 18px; }
.pm-tabs{
  display: flex; gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pm-tabs::-webkit-scrollbar{ display: none; }
.pm-tab{
  padding: 7px 13px;
  font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: all .25s var(--ease);
}
.pm-tab:hover{ color: var(--text); border-color: rgba(94,234,212,.3); background: rgba(94,234,212,.06); }
.pm-tab.active{
  color: #0a0e1a;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 6px 18px -8px rgba(94,234,212,.6);
}

.pm-tab-body{
  font-size: 13.5px; color: var(--text-dim); line-height: 1.6;
  min-height: 80px;
  padding: 4px 0 8px;
}
.pm-tab-body p strong{ color: var(--text); }
.pm-tab-body .caution-text{
  padding: 12px 14px;
  background: rgba(251,191,36,.04);
  border: 1px solid rgba(251,191,36,.18);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  color: var(--text);
}
.pm-list{
  list-style: none;
  display: grid; gap: 6px;
}
.pm-list li{
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 13px; color: var(--text-dim);
  border-bottom: 1px dashed var(--line);
}
.pm-list li:last-child{ border-bottom: 0; }
.pm-list li::before{
  content: '';
  position: absolute; left: 4px; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad);
  transform: translateY(-50%);
}

/* ============ UTIL ============ */
.fade-in{ opacity: 0; animation: fadeIn .8s var(--ease) .3s forwards; }
@keyframes fadeIn{ to{ opacity: 1; } }

/* ============ FOOTER ============ */
.footer{
  padding: 80px 22px 32px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.012) 100%);
  position: relative;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 56px;
}
@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 540px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.footer-brand .brand{ margin-bottom: 18px; }
.footer-tagline{
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 320px;
}
.footer-col h4{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--text);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul{ list-style: none; display: grid; gap: 10px; }
.footer-col a{
  color: var(--text-dim);
  font-size: 13.5px;
  transition: color .2s;
}
.footer-col a:hover{ color: var(--teal); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  font: 400 12px "JetBrains Mono", monospace;
  color: var(--muted);
  letter-spacing: .08em;
}
.footer-payments{
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.footer-payments span{
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-dim);
  background: rgba(255,255,255,.02);
}

/* ============ VIAL CINEMA — sticky scroll-driven scene ============ */
.vial-cinema{
  position: relative;
  height: 260vh;             /* cliente pidió reducir el scroll: era 520vh */
  margin-top: 40px;
  isolation: isolate;
}
.vc-stage{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  perspective: 1600px;
}
.vc-aura{
  position: absolute;
  width: 56vmin; height: 56vmin;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(60% 60% at 50% 55%, rgba(94,234,212,.10) 0%, rgba(94,234,212,0) 75%);
  filter: blur(28px);
  z-index: 1;
  opacity: 0;
  transform: scale(.4);
  will-change: transform, opacity;
}
.vc-shadow{
  position: absolute;
  bottom: 14%;
  width: 28vmin; height: 6vmin;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.7) 0%, transparent 70%);
  filter: blur(14px);
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
}
.vc-particles{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.vc-vial-tilt{
  position: relative;
  z-index: 3;
  display: inline-block;
  transform-style: preserve-3d;
  --mx: 0deg;
  --my: 0deg;
  --bob-y: 0px;
  transform: translateY(var(--bob-y)) rotateY(var(--mx)) rotateX(var(--my));
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.vc-vial{
  display: block;
  position: relative;
  height: min(82vh, 760px);
  width: min(82vh, 760px);
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-mask: transparent;
  background: transparent;
  filter: drop-shadow(0 36px 56px rgba(0,0,0,.45));
  transform-origin: 50% 60%;
  transform: scale(.55) translateY(40px);
  opacity: 0;
  will-change: transform, opacity, filter;
  user-select: none;
  -webkit-user-drag: none;
  outline: none;
  pointer-events: none;
}
.vc-vial::part(default-progress-bar){ display: none; }
.vc-specular{
  /* Cliente pidió quitar la "línea de brillo rara" que cruzaba el vial.
     Mantenemos el elemento por si JS lo referencia; lo escondemos. */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,.30) 48%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,.30) 52%,
    transparent 65%);
  background-size: 220% 100%;
  background-position: -110% 0;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: blur(1.5px);
  pointer-events: none;
  opacity: 0;
  will-change: background-position, opacity;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 55%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 55%, transparent 78%);
}
.vc-aura{
  /* layer base sin cambios; añadimos var de hue-rotate animable */
  --vc-hue: 0deg;
  filter: blur(20px) hue-rotate(var(--vc-hue));
}
.vc-annotations{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 4;
  pointer-events: none;
}
.vc-annotations .vc-ann{ opacity: 0; }
.vc-annotations .vc-line{
  fill: none;
  stroke: url(#vcLine);
  stroke-width: 1.4;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.vc-annotations .vc-dot{
  fill: var(--mint, #5eead4);
  filter: drop-shadow(0 0 8px rgba(94,234,212,.9));
}
.vc-annotations .vc-tag{
  fill: #e6f1ff;
  font: 600 16px "Inter", sans-serif;
  letter-spacing: .02em;
}
.vc-annotations .vc-tag-sub{
  fill: rgba(230,241,255,.55);
  font: 400 13px "JetBrains Mono", monospace;
}
.vc-captions{
  position: absolute;
  left: 6vw; bottom: 12vh;
  z-index: 5;
  width: min(420px, 38vw);
  height: 200px;
  pointer-events: none;
}
.vc-cap{
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}
.vc-cap-kicker{
  display: inline-block;
  font: 600 12px "JetBrains Mono", monospace;
  color: #5eead4;
  letter-spacing: .2em;
  margin-bottom: 10px;
  padding: 4px 10px;
  border: 1px solid rgba(94,234,212,.3);
  border-radius: 999px;
}
.vc-cap h3{
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 6px 0 12px;
  color: #fff;
}
.vc-cap p{
  font-size: 16px;
  color: rgba(230,241,255,.7);
  line-height: 1.5;
}
/* Cap 4: clímax de marca — tipografía mayor + gradiente */
.vc-cap-4 h3{
  font-size: clamp(36px, 4.6vw, 64px);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(94,234,212,.25);
}
/* Los chars splitados deben heredar el gradiente (background-clip no se hereda) */
.vc-cap-4 h3 .achar{
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vc-scroll-hint{
  position: absolute;
  right: 4vw; bottom: 6vh;
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 500 11px "JetBrains Mono", monospace;
  color: rgba(230,241,255,.5);
  letter-spacing: .3em;
  text-transform: uppercase;
}
.vc-line-hint{
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, rgba(94,234,212,.6), transparent);
  animation: vcHint 2.4s ease-in-out infinite;
}
@keyframes vcHint{ 50%{ transform: scaleY(1.4); } }

@media (max-width: 720px){
  .vial-cinema{ height: 200vh; }   /* mobile más corto */
  .vc-vial{ height: 56vh; width: 56vh; }
  .vc-captions{ left: 5vw; bottom: 8vh; max-width: 80vw; }
  .vc-annotations{ display: none; }
  .vc-cap h3{ font-size: clamp(22px, 6vw, 32px); }
  .vc-cap-4 h3{ font-size: clamp(28px, 8vw, 44px); }
  .section{ padding: 80px 18px; }
  .nav{ padding: 12px 14px; }
  .filter-bar .search-input{ width: 100%; }
}

/* Touch — desactiva tilts y mouse-effects en dispositivos sin hover */
@media (hover: none){
  .product-card, .cat-card, .stack-card, .science-card{ transform: none !important; }
  .vc-vial-tilt{ --mx: 0deg !important; --my: 0deg !important; }
}

/* ============================================================
   THEME TOGGLE — sun/moon swap
   ============================================================ */
.theme-toggle .icon-sun{ display: none; }
.theme-toggle .icon-moon{ display: block; }
[data-theme="light"] .theme-toggle .icon-sun{ display: block; }
[data-theme="light"] .theme-toggle .icon-moon{ display: none; }

/* ============================================================
   LIGHT THEME
   Filosofía: paper-white quirúrgico. Mismo lenguaje, alto contraste.
   La bioluminiscencia teal/violet se vuelve acento, no atmósfera.
   ============================================================ */
[data-theme="light"]{
  --bg-0: #fafbff;
  --bg-1: #ffffff;
  --bg-2: #f1f4fb;
  --bg-3: #e6ebf6;
  --line: rgba(10,14,26,.08);
  --line-2: rgba(10,14,26,.14);
  --text: #0a0e1a;
  --text-dim: #4d5a78;
  --muted: #7a839a;

  /* Acentos un punto más oscuros para legibilidad sobre blanco */
  --teal: #0fbfa3;
  --violet: #7c5cf5;
  --pink: #c93dd1;
  --amber: #d97706;
  --green: #059669;
  --red: #dc2626;
  --grad: linear-gradient(135deg, #0fbfa3 0%, #7c5cf5 100%);
  --grad-2: linear-gradient(135deg, #7c5cf5 0%, #c93dd1 100%);
  --shadow-glow: 0 0 60px rgba(15,191,163,.10), 0 0 120px rgba(124,92,245,.08);

  /* Tokens semánticos */
  --btn-bg: #0a0e1a;
  --btn-fg: #ffffff;
  --surface: linear-gradient(160deg, #ffffff, #f7f9fd);
  --surface-2: linear-gradient(165deg, #ffffff, #f5f7fb);
  --surface-card: linear-gradient(180deg, #ffffff, #f7f9fd);
  --surface-card-hover: linear-gradient(180deg, #ffffff, #eef3fb);
  --tint-1: rgba(10,14,26,.025);
  --tint-2: rgba(10,14,26,.05);
  --tint-3: rgba(10,14,26,.08);
  --shadow-card: 0 22px 50px -22px rgba(20,30,60,.18);
  --overlay: rgba(20,30,60,.45);
}

/* === Globales === */
[data-theme="light"] body{ background: var(--bg-0); color: var(--text); }
[data-theme="light"] ::selection { background: rgba(15,191,163,.25); color: var(--text); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: linear-gradient(#0fbfa3, #7c5cf5); }

/* === Particles canvas / atmósfera ===
   En light el difuminado debe verse MÁS INTENSO: sobre blanco las orbs
   se desaturan visualmente, así que subimos opacidad y usamos mix-blend-mode
   multiply para preservar la saturación del teal/violet. */
[data-theme="light"] .orb{ mix-blend-mode: multiply; }
[data-theme="light"] .orb-a{ opacity: .70; }
[data-theme="light"] .orb-b{ opacity: .62; }
[data-theme="light"] .bg-particles{ opacity: .45; mix-blend-mode: multiply; }

/* === Nav === */
[data-theme="light"] .nav.scrolled{
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-cart:hover{ background: var(--tint-1); }
[data-theme="light"] .icon-btn:hover{ background: var(--tint-2); }

/* === Hero === */
[data-theme="light"] .hero-badge{
  background: rgba(15,191,163,.08);
  border: 1px solid rgba(15,191,163,.22);
  color: #0a766a;
}
[data-theme="light"] .scroll-hint{ color: var(--text-dim); }
[data-theme="light"] .scroll-hint .line{ background: var(--line-2); }

/* === Botones === */
[data-theme="light"] .btn-link-arrow{
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
}
[data-theme="light"] .btn-link-arrow:hover{
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(15,191,163,.06);
}
[data-theme="light"] .btn-primary:hover{ background: var(--teal); color: #fff; }
[data-theme="light"] .btn-primary.sm{ background: var(--btn-bg); color: var(--btn-fg); }
[data-theme="light"] .add-btn{ background: var(--btn-bg); color: var(--btn-fg); }
[data-theme="light"] .add-btn:hover{ background: var(--teal); color: #fff; }
[data-theme="light"] .add-btn.added{ background: var(--green); color: #fff; }
[data-theme="light"] .cart-count{ color: #fff; }

/* === Section: Ciencia === */
[data-theme="light"] .ciencia-eyebrow,
[data-theme="light"] .section-tag{
  background: rgba(15,191,163,.08);
  border-color: rgba(15,191,163,.22);
}
[data-theme="light"] .science-card{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(20,30,60,.18);
}
[data-theme="light"] .science-stage{
  background: linear-gradient(180deg, #f7f9fd 0%, #ffffff 100%);
  border: 1px solid var(--line);
}
[data-theme="light"] .science-meta{ border-top: 1px solid var(--line); }
[data-theme="light"] .science-meta > div{ border-right: 1px solid var(--line); }

/* === Categories === */
[data-theme="light"] .cat-card{
  background: var(--surface-card);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(20,30,60,.04);
}
[data-theme="light"] .cat-card:hover{
  background: var(--surface-card-hover);
  border-color: var(--line-2);
  box-shadow: 0 16px 32px -10px rgba(20,30,60,.12);
}
[data-theme="light"] .cat-card.active{
  border-color: var(--teal);
  background: rgba(15,191,163,.05);
}
[data-theme="light"] .cat-count{ color: rgba(10,14,26,.18); }

/* === Filter chips === */
[data-theme="light"] .chip{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
[data-theme="light"] .chip:hover{ border-color: var(--line-2); color: var(--text); background: var(--tint-1); }
[data-theme="light"] .chip.active{
  background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg);
}

/* === Search === */
[data-theme="light"] .search-input{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
}
[data-theme="light"] .search-input::placeholder{ color: var(--muted); }
[data-theme="light"] .search-input:focus{ border-color: var(--teal); background: #fff; }

/* === Product cards === */
[data-theme="light"] .product-card{
  background: var(--surface-card);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(20,30,60,.04);
}
[data-theme="light"] .product-card:hover{
  background: var(--surface-card-hover);
  border-color: var(--line-2);
  box-shadow: 0 22px 50px -22px rgba(20,30,60,.20);
}
[data-theme="light"] .prod-image{
  background: linear-gradient(180deg, #f1f4fb 0%, #e6ebf6 100%);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .prod-image img{ filter: drop-shadow(0 14px 26px rgba(20,30,60,.18)); }
[data-theme="light"] .prod-tags .badge{ background: rgba(255,255,255,.85); border-color: var(--line-2); }
[data-theme="light"] .badge-top         { background: rgba(15,191,163,.10); color: #0a766a; border-color: rgba(15,191,163,.30); }
[data-theme="light"] .badge-nuevo       { background: rgba(5,150,105,.10); color: #047857; border-color: rgba(5,150,105,.32); }
[data-theme="light"] .badge-bestseller  { background: rgba(217,119,6,.10); color: #b45309; border-color: rgba(217,119,6,.30); }
[data-theme="light"] .badge-combo       { background: rgba(124,92,245,.10); color: #5b3fdc; border-color: rgba(124,92,245,.30); }
[data-theme="light"] .badge-premium     { background: rgba(201,61,209,.10); color: #a020a8; border-color: rgba(201,61,209,.28); }
[data-theme="light"] .badge-focus       { background: rgba(15,191,163,.10); color: #0a766a; border-color: rgba(15,191,163,.28); }
[data-theme="light"] .wish-btn{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
[data-theme="light"] .wish-btn.on{ color: var(--pink); border-color: rgba(201,61,209,.45); background: rgba(201,61,209,.08); }
[data-theme="light"] .stars .s{ color: rgba(10,14,26,.18); }
[data-theme="light"] .stars .s.empty{ fill: rgba(10,14,26,.08); }
[data-theme="light"] .prod-foot{ border-top: 1px solid var(--line); }

/* === Footer === */
[data-theme="light"] .footer{
  background: linear-gradient(180deg, var(--bg-0), var(--bg-2));
  border-top: 1px solid var(--line);
}
[data-theme="light"] .footer-payments span{
  background: #fff; border-color: var(--line); color: var(--text-dim);
}
[data-theme="light"] .footer-bottom{ border-top: 1px solid var(--line); }

/* === Cart drawer === */
[data-theme="light"] .cart-drawer{
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  color: var(--text);
}
[data-theme="light"] .cart-head{ border-bottom: 1px solid var(--line); }
[data-theme="light"] .cart-foot{ border-top: 1px solid var(--line); background: var(--bg-2); }
[data-theme="light"] .cart-item{ border-bottom: 1px solid var(--line); }
[data-theme="light"] .cart-item-img{ background: var(--bg-2); border: 1px solid var(--line); }
[data-theme="light"] .qty{ background: #fff; border: 1px solid var(--line); }
[data-theme="light"] .qty button:hover{ background: var(--tint-2); }
[data-theme="light"] .cart-row.total{ border-top: 1px solid var(--line); }
[data-theme="light"] .promo-input input{
  background: #fff; border: 1px solid var(--line); color: var(--text);
}
[data-theme="light"] .promo-input input:focus{ border-color: var(--teal); }
[data-theme="light"] .overlay{ background: var(--overlay); }

/* === Modal === */
[data-theme="light"] .modal::before{ background: var(--overlay); }
[data-theme="light"] .modal-card{
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: 0 40px 80px -30px rgba(20,30,60,.30);
}
[data-theme="light"] .modal-card::-webkit-scrollbar-thumb{ background: rgba(10,14,26,.15); }
[data-theme="light"] .modal-close{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  color: var(--text);
}
[data-theme="light"] .modal-close:hover{ background: #fff; border-color: var(--line-2); }

/* === Product modal === */
[data-theme="light"] .pm-gallery{
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(15,191,163,.10), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 30%, rgba(124,92,245,.06), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border-right: 1px solid var(--line);
}
@media (max-width: 880px){
  [data-theme="light"] .pm-gallery{ border-right: 0; border-bottom: 1px solid var(--line); }
}
[data-theme="light"] .pm-image-main{
  background: linear-gradient(180deg, #f1f4fb 0%, #e6ebf6 100%);
  border: 1px solid var(--line);
}
[data-theme="light"] .pm-share{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
[data-theme="light"] .pm-stock{ background: var(--tint-1); }
[data-theme="light"] .stock-bar{ background: var(--tint-2); }
[data-theme="light"] .pm-tabs{ border-bottom: 1px solid var(--line); }
[data-theme="light"] .pm-tab{ color: var(--text-dim); }
[data-theme="light"] .pm-tab.active{ color: var(--text); }
[data-theme="light"] .pm-tab.active::after{ background: var(--grad); }
[data-theme="light"] .pm-list li{ border-bottom: 1px solid var(--line); }
[data-theme="light"] .pm-qty{ background: #fff; border: 1px solid var(--line); }
[data-theme="light"] .pm-qty button:hover{ background: var(--tint-2); }
[data-theme="light"] .pm-wish{ background: #fff; border: 1px solid var(--line); }

/* === Shipping form === */
[data-theme="light"] .shipping-eyebrow{
  background: rgba(15,191,163,.08);
  border-color: rgba(15,191,163,.25);
}
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
}
[data-theme="light"] .field input:focus,
[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus{
  border-color: var(--teal);
  background: #fff;
}
[data-theme="light"] .field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%234d5a78' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
}
[data-theme="light"] .field select option{ background: #fff; color: var(--text); }
[data-theme="light"] .shipping-disclaimer{
  background: var(--tint-1);
  border: 1px solid var(--line);
}
[data-theme="light"] .success-shipping{
  background: var(--tint-1);
  border: 1px solid var(--line);
}

/* === Vial cinema en tema claro — fondo blanco, integrado con las demás secciones === */
/* La coreografía 3D se preserva; cambian solo las superficies y los textos. */
[data-theme="light"] .vial-cinema{ background: transparent; }

/* Aura: halo teal/violet más sutil, sin saturación quemada sobre blanco */
[data-theme="light"] .vc-aura{
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(15,191,163,.30) 0%, rgba(15,191,163,0) 65%),
    radial-gradient(40% 40% at 50% 50%, rgba(124,92,245,.22) 0%, rgba(124,92,245,0) 70%);
  mix-blend-mode: multiply;
}
/* Sombra del frasco: gris azulado en vez de negro puro */
[data-theme="light"] .vc-shadow{
  background: radial-gradient(50% 50% at 50% 50%, rgba(20,30,60,.28) 0%, transparent 70%);
}
/* Drop-shadow del modelo: más liviana */
[data-theme="light"] .vc-vial{
  filter: drop-shadow(0 24px 50px rgba(20,30,60,.25));
}
/* Specular sweep: pasa a multiply oscuro para que se vea sobre blanco */
[data-theme="light"] .vc-specular{
  background-image: linear-gradient(115deg,
    transparent 35%,
    rgba(20,30,60,.10) 48%,
    rgba(20,30,60,.22) 50%,
    rgba(20,30,60,.10) 52%,
    transparent 65%);
  mix-blend-mode: multiply;
}
/* Captions: texto oscuro */
[data-theme="light"] .vc-cap h3{ color: var(--text); }
[data-theme="light"] .vc-cap p{ color: var(--text-dim); }
[data-theme="light"] .vc-cap-kicker{
  color: #0a766a;
  border-color: rgba(15,191,163,.35);
  background: rgba(15,191,163,.06);
}
/* Annotations SVG */
[data-theme="light"] .vc-annotations .vc-tag{ fill: var(--text); }
[data-theme="light"] .vc-annotations .vc-tag-sub{ fill: var(--text-dim); }
[data-theme="light"] .vc-annotations .vc-dot{
  fill: #0fbfa3;
  filter: drop-shadow(0 0 6px rgba(15,191,163,.5));
}
/* Scroll hint */
[data-theme="light"] .vc-scroll-hint{ color: var(--text-dim); }
[data-theme="light"] .vc-line-hint{ background: linear-gradient(to bottom, rgba(15,191,163,.55), transparent); }
/* Cap-4 climax: el gradient ya usa --grad (que en light es teal/violet oscuros), keeps working.
   Removemos el text-shadow saturado que solo se ve en dark. */
[data-theme="light"] .vc-cap-4 h3{ text-shadow: none; }

/* === Misc text/icons === */
[data-theme="light"] .nav-links a{ color: var(--text-dim); }
[data-theme="light"] .nav-links a:hover{ color: var(--text); }
[data-theme="light"] .footer-tagline,
[data-theme="light"] .footer-col li a{ color: var(--text-dim); }
[data-theme="light"] .footer-col li a:hover{ color: var(--text); }
[data-theme="light"] .footer-col h4{ color: var(--text); }

/* ==========================================================
   AGE / MEDICAL ACCESS GATE
   ========================================================== */
:root[data-age-gate="pending"] body{ overflow: hidden; }
.age-gate{ display: none; }
:root[data-age-gate="pending"] .age-gate{
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 9999;
  padding: 24px;
  background:
    radial-gradient(circle at 30% 20%, rgba(94,234,212,.14), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(167,139,250,.12), transparent 55%),
    rgba(5,7,13,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: ageGateIn .35s var(--ease) both;
}
/* ============ LANG SWITCH (ES / EN / FR) ============ */
.lang-switch{
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  border: 1px solid var(--line, rgba(255,255,255,.07));
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  margin-right: 4px;
}
[data-theme="light"] .lang-switch{
  background: rgba(10,14,26,.025);
  border-color: rgba(10,14,26,.08);
}
.lang-chip{
  font: 600 11.5px 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--muted, #6b7387);
  background: transparent; border: 0;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.lang-chip:hover{ color: var(--text); }
.lang-chip.active{
  color: #0a0e1a;
  background: linear-gradient(135deg, #5eead4 0%, #a78bfa 100%);
}
[data-theme="light"] .lang-chip.active{
  color: #ffffff;
  background: linear-gradient(135deg, #0fbfa3 0%, #7c5cf5 100%);
}
@media (max-width: 720px){
  .lang-switch{ margin-right: 2px; padding: 3px; gap: 0; }
  .lang-chip{ padding: 4px 8px; font-size: 10.5px; }
}

[data-theme="light"] :root[data-age-gate="pending"] .age-gate,
[data-theme="light"].age-gate{
  background:
    radial-gradient(circle at 30% 20%, rgba(15,191,163,.10), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(124,77,255,.08), transparent 55%),
    rgba(248,250,252,.97);
}
@keyframes ageGateIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.age-gate-card{
  width: 100%; max-width: 480px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 36px 32px 28px;
  box-shadow: var(--shadow-card), var(--shadow-glow);
  text-align: left;
  animation: ageGateCard .5s var(--ease) both;
}
@keyframes ageGateCard{
  from{ opacity: 0; transform: translateY(14px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.age-gate-brand{
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--tint-1);
}
.age-gate-mark{
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.age-gate-tag{
  font: 500 10.5px 'JetBrains Mono', monospace;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-dim);
}
.age-gate-card h1{
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 24px; line-height: 1.25;
  margin-bottom: 12px; letter-spacing: -.01em;
  color: var(--text);
}
.age-gate-lead{
  color: var(--text-dim); font-size: 14px; line-height: 1.6;
  margin-bottom: 20px;
}
.age-gate-lead strong{ color: var(--text); font-weight: 600; }
.age-gate-points{
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.age-gate-points li{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text); line-height: 1.5;
  padding: 11px 14px;
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.age-gate-points li span{
  color: var(--teal); font-weight: 700;
  flex-shrink: 0; line-height: 1.5;
}
.age-gate-actions{
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
}
.age-gate-actions .btn-primary,
.age-gate-actions .btn-ghost{
  width: 100%;
  justify-content: center;
  padding: 14px 18px;
  font-size: 14px;
}
.age-gate-foot{
  font-size: 11.5px; line-height: 1.55; color: var(--muted);
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
@media (max-width: 480px){
  .age-gate-card{ padding: 28px 22px 22px; border-radius: 18px; }
  .age-gate-card h1{ font-size: 21px; }
  .age-gate-lead{ font-size: 13.5px; }
}