/* ==========================================================================
   Aminos MX — Péptidos de grado investigación
   Rediseño: lenguaje visual "Kimi" (oscuro + teal + glass) sobre la marca
   Aminos MX. Bilingüe ES/EN. Sin dependencias.
   ========================================================================== */

/* ---------- Tokens (canales HSL, estilo shadcn) ---------- */
:root {
  --bg: 215 35% 6%;
  --fg: 180 20% 96%;
  --card: 215 30% 9%;
  --popover: 215 32% 8%;
  --primary: 174 84% 45%;
  --primary-fg: 215 40% 8%;
  --secondary: 215 25% 15%;
  --muted: 215 22% 14%;
  --muted-fg: 195 12% 62%;
  --border: 210 25% 18%;
  --amber: 43 96% 58%;
  --sky: 199 89% 60%;
  --destructive: 0 72% 55%;

  --radius: 0.75rem;
  --maxw: 1280px;
  --pad: clamp(16px, 4vw, 24px);

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6);
  --glow: 0 0 0 1px hsl(var(--primary) / .25), 0 8px 40px -12px hsl(var(--primary) / .25);
  --grad: linear-gradient(120deg, #5eead4 0%, #2dd4bf 45%, #38bdf8 100%);
  --glass-bg: 215 30% 10%;
  --glass-a: .72;
  --scrim: rgba(0,0,0,.6);
  --amber-text: 43 90% 80%;
  --surface: var(--card);
  --surface-a: .5;
}

/* Tema claro */
:root[data-theme="light"] {
  --bg: 195 40% 97%;
  --fg: 215 45% 12%;
  --card: 0 0% 100%;
  --popover: 0 0% 100%;
  --primary: 174 82% 33%;
  --primary-fg: 0 0% 100%;
  --secondary: 200 32% 92%;
  --muted: 200 30% 93%;
  --muted-fg: 214 16% 38%;
  --border: 210 28% 84%;
  --amber: 35 92% 42%;
  --sky: 199 89% 42%;
  --grad: linear-gradient(120deg, #0d9488 0%, #0891b2 45%, #0284c7 100%);
  --glass-bg: 200 40% 100%;
  --glass-a: .7;
  --scrim: rgba(15,30,40,.4);
  --shadow-lg: 0 24px 60px -20px rgba(20,40,60,.28);
  --amber-text: 28 82% 32%;
  --surface-a: .6;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: hsl(var(--bg));
  color: hsl(var(--fg));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
input { font: inherit; }
h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
::selection { background: hsl(var(--primary) / .35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--bg)); }
::-webkit-scrollbar-thumb { background: hsl(210 25% 22%); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: hsl(174 60% 35%); }
:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:0; z-index:200; background:hsl(var(--primary)); color:hsl(var(--primary-fg)); padding:10px 16px; border-radius:8px; font-weight:600; }
.skip-link:focus { left:8px; top:8px; }

/* ---------- Utilities ---------- */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.ico { width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-.125em; flex:none; }
.text-gradient { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.glass { background: hsl(var(--glass-bg) / var(--glass-a)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.glow-ring { box-shadow: var(--glow); }
.molecule-bg { background-image: radial-gradient(hsl(var(--primary) / .12) 1.5px, transparent 1.5px); background-size: 26px 26px; }
.eyebrow { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:hsl(var(--primary)); }
.hide-sm { display:inline; }
@media (max-width:640px){ .hide-sm { display:none; } }
[data-wish].on { color:hsl(var(--primary)); border-color:hsl(var(--primary) / .6); }
[data-wish].on .ico { fill:hsl(var(--primary) / .25); }
/* Superficie de tarjetas (profundidad en ambos temas) */
.stat-card, .cat, .why-card, .pay-card, .pcard, .faq-item, .verify-strip, .mini {
  background: hsl(var(--surface) / var(--surface-a));
}
/* Botón de tema (sol / luna) */
.themebtn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:38px; border:1px solid hsl(var(--border) / .7); background:hsl(var(--secondary) / .4); border-radius:calc(var(--radius) - 2px); }
.themebtn:hover { border-color:hsl(var(--primary) / .5); color:hsl(var(--primary)); }
.themebtn .ico { width:18px; height:18px; }
.themebtn .ico-sun { display:none; }
.themebtn .ico-moon { display:inline-block; }
:root[data-theme="light"] .themebtn .ico-moon { display:none; }
:root[data-theme="light"] .themebtn .ico-sun { display:inline-block; }
.section { padding-block: clamp(48px, 8vw, 80px); }
.sec-head { text-align:center; max-width:640px; margin:0 auto clamp(32px,5vw,48px); }
.sec-head h2 { font-size:clamp(1.75rem,4vw,2.25rem); font-weight:800; }
.sec-head p { margin-top:12px; color:hsl(var(--muted-fg)); }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; font-size:.72rem; font-weight:600; padding:4px 10px; line-height:1; }
.badge-outline { border:1px solid hsl(var(--primary) / .4); background:hsl(var(--primary) / .1); color:hsl(var(--primary)); }
.badge-amber { background:hsl(var(--amber) / .9); color:#451a03; }
.badge-sky { background:hsl(var(--sky) / .9); color:#082f49; }

.badge-purity { border:1px solid hsl(var(--primary) / .4); background:hsl(var(--bg) / .6); color:hsl(var(--primary)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.badge-soon { background:hsl(var(--muted-fg) / .22); color:hsl(var(--fg)); border:1px solid hsl(var(--border)); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

/* --- Etiquetas sobre la imagen del producto, SOLO en modo claro ---------------
   La media de la tarjeta es oscura en los dos temas (el degradado se genera en
   JS con tonos fijos), pero en claro los tokens se invierten: --fg pasa a casi
   negro, --amber y --sky se oscurecen y --bg se vuelve blanco. Resultado: texto
   oscuro sobre fondo oscuro. Aquí devolvemos el tratamiento claro-sobre-oscuro
   sin tocar el tema oscuro, que ya se ve bien. */
:root[data-theme="light"] .pcard-media .badge,
:root[data-theme="light"] .pdp-stage .badge { text-shadow:0 1px 2px rgba(0,0,0,.45); }

:root[data-theme="light"] .pcard-media .badge-purity,
:root[data-theme="light"] .pdp-stage .badge-purity {
  background:rgba(8,22,30,.72); border-color:hsl(174 84% 60% / .5); color:hsl(174 84% 70%);
}
:root[data-theme="light"] .pcard-media .badge-soon {
  background:rgba(8,22,30,.72); border-color:hsl(200 25% 90% / .4); color:hsl(200 25% 94%);
}
:root[data-theme="light"] .pcard-media .badge-amber {
  background:hsl(43 96% 56%); color:#3b2004; border:1px solid hsl(43 90% 40% / .5);
  text-shadow:none; font-weight:700;
}
:root[data-theme="light"] .pcard-media .badge-sky {
  background:hsl(199 92% 62%); color:#062a3f; border:1px solid hsl(199 80% 40% / .5);
  text-shadow:none; font-weight:700;
}

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:calc(var(--radius) - 2px); font-weight:600; font-size:.9rem; padding:10px 18px; border:1px solid transparent; transition:background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:hsl(var(--primary)); color:hsl(var(--primary-fg)); }
.btn-primary:hover { box-shadow:0 8px 30px -8px hsl(var(--primary) / .5); background:hsl(174 84% 50%); }
.btn-outline { border-color:hsl(var(--border) / .7); background:hsl(var(--secondary) / .4); color:hsl(var(--fg)); }
.btn-outline:hover { border-color:hsl(var(--primary) / .6); color:hsl(var(--primary)); }
.btn-ghost:hover { background:hsl(var(--secondary)); }
.btn-lg { padding:14px 28px; font-size:1rem; }
.btn-sm { padding:8px 14px; font-size:.82rem; }
.btn-icon { padding:9px; }
.btn-block { width:100%; }

/* ---------- Announcement ---------- */
.announce { position:fixed; inset-inline:0; top:0; z-index:60; height:36px; display:flex; align-items:center; justify-content:center; gap:8px; background:hsl(var(--primary)); color:hsl(var(--primary-fg)); font-size:.8rem; font-weight:600; padding-inline:16px; text-align:center; }
.announce .ico { width:15px; height:15px; }
.announce .sep { opacity:.5; }

/* ---------- Header ---------- */
.header { position:fixed; inset-inline:0; top:36px; z-index:50; transition:background .3s, border-color .3s, box-shadow .3s; border-bottom:1px solid transparent; }
.header[data-scrolled="true"] { border-bottom-color:hsl(var(--border) / .6); box-shadow:0 10px 30px -10px hsl(var(--bg) / .6); background:hsl(var(--glass-bg) / var(--glass-a)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand-mark { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:hsl(var(--primary) / .15); color:hsl(var(--primary)); box-shadow:var(--glow); }
.brand-mark .ico { width:20px; height:20px; }
.brand-name { font-size:1.125rem; font-weight:800; letter-spacing:-.02em; }
.brand-name .mx { color:hsl(var(--primary)); }
.brand-name .ruo { margin-left:6px; font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:hsl(var(--muted-fg)); }
.nav { display:flex; align-items:center; gap:4px; }
.nav a { padding:8px 12px; border-radius:calc(var(--radius) - 2px); font-size:.88rem; font-weight:500; color:hsl(var(--muted-fg)); transition:background .18s, color .18s; }
.nav a:hover { background:hsl(var(--secondary)); color:hsl(var(--fg)); }
.header-actions { display:flex; align-items:center; gap:8px; }
.langtoggle { display:flex; align-items:center; border:1px solid hsl(var(--border) / .7); border-radius:calc(var(--radius) - 2px); overflow:hidden; }
.langtoggle button { padding:7px 10px; font-size:.72rem; font-weight:700; color:hsl(var(--muted-fg)); font-family:var(--mono); }
.langtoggle button.active { background:hsl(var(--primary)); color:hsl(var(--primary-fg)); }
.cartbtn { position:relative; display:inline-flex; align-items:center; gap:8px; border:1px solid hsl(var(--border) / .7); background:hsl(var(--secondary) / .4); border-radius:calc(var(--radius) - 2px); padding:8px 14px; font-size:.88rem; font-weight:600; }
.cartbtn:hover { border-color:hsl(var(--primary) / .5); }
.cartbtn .cart-count { position:absolute; right:-8px; top:-8px; min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; background:hsl(var(--primary)); color:hsl(var(--primary-fg)); border-radius:999px; font-size:.65rem; font-weight:700; font-family:var(--mono); }
.cartbtn .cart-count[data-empty="true"] { display:none; }
.burger { width:40px; height:40px; border-radius:calc(var(--radius) - 2px); display:none; align-items:center; justify-content:center; }
.burger:hover { background:hsl(var(--secondary)); }
.burger .ico { width:22px; height:22px; }
.burger .ico-close { display:none; }
.burger[aria-expanded="true"] .ico-menu { display:none; }
.burger[aria-expanded="true"] .ico-close { display:block; }

.mobile-menu { position:fixed; inset-inline:0; top:100px; z-index:49; border-bottom:1px solid hsl(var(--border) / .6); background:hsl(var(--glass-bg) / .96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transform:translateY(-140%); transition:transform .3s ease; }
.mobile-menu.show { transform:none; }
.mobile-menu .inner { display:flex; flex-direction:column; padding:8px var(--pad) 16px; }
.mobile-menu a { padding:12px 12px; border-radius:calc(var(--radius) - 2px); font-weight:500; color:hsl(var(--muted-fg)); }
.mobile-menu a:hover { background:hsl(var(--secondary)); color:hsl(var(--fg)); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding-top:clamp(120px,16vw,168px); padding-bottom:64px; }
.hero .molecule-bg { position:absolute; inset:0; opacity:.6; }
.hero .glow-blob { position:absolute; top:-160px; left:50%; width:820px; height:520px; transform:translateX(-50%); border-radius:50%; opacity:.25; filter:blur(64px); background:radial-gradient(ellipse at center, hsl(174 84% 45% / .55) 0%, hsl(199 89% 48% / .25) 45%, transparent 70%); pointer-events:none; }
.hero-inner { position:relative; text-align:center; }
.hero .badge { margin-bottom:24px; padding:6px 16px; }
.hero h1 { font-size:clamp(2.25rem,6vw,3.75rem); font-weight:800; line-height:1.05; max-width:16ch; margin-inline:auto; text-wrap:balance; }
.hero-lede { margin:24px auto 0; max-width:38rem; color:hsl(var(--muted-fg)); font-size:clamp(1rem,1.6vw,1.125rem); text-wrap:pretty; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:56rem; margin:64px auto 0; }
.stat-card { border:1px solid hsl(var(--border) / .6); border-radius:calc(var(--radius) + 4px); padding:20px; text-align:center; transition:transform .2s; }
.stat-card:hover { transform:translateY(-4px); }
.stat-card .ico { width:24px; height:24px; color:hsl(var(--primary)); margin:0 auto; }
.stat-card b { display:block; margin-top:12px; font-size:1.5rem; font-weight:700; }
.stat-card span { display:block; margin-top:4px; font-size:.78rem; color:hsl(var(--muted-fg)); }

/* ---------- Category grid ---------- */
.cats { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.cat { border:1px solid hsl(var(--border) / .6); border-radius:calc(var(--radius) + 4px); padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:transform .2s, border-color .2s, box-shadow .2s; }
.cat:hover { transform:translateY(-4px); border-color:hsl(var(--primary) / .5); box-shadow:0 12px 30px -12px hsl(var(--primary) / .3); }
.cat .tile { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:hsl(var(--primary) / .12); color:hsl(var(--primary)); transition:transform .2s; }
.cat:hover .tile { transform:scale(1.1); }
.cat .tile .ico { width:24px; height:24px; }
.cat .cname { margin-top:12px; font-size:.88rem; font-weight:600; line-height:1.2; }
.cat .ccount { margin-top:4px; font-size:.7rem; color:hsl(var(--muted-fg)); }

/* ---------- Catalog ---------- */
.catalog-top { display:flex; flex-direction:column; gap:20px; align-items:flex-start; justify-content:space-between; margin-bottom:28px; }
.catalog-top h2 { font-size:clamp(1.75rem,4vw,2.25rem); font-weight:800; }
.catalog-top p { margin-top:12px; color:hsl(var(--muted-fg)); max-width:36rem; }
.search { position:relative; width:100%; max-width:22rem; }
.search .ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:hsl(var(--muted-fg)); }
.search input { width:100%; height:40px; padding:0 12px 0 36px; border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) - 2px); background:hsl(var(--secondary) / .3); color:hsl(var(--fg)); }
.search input::placeholder { color:hsl(var(--muted-fg)); }
.search input:focus { outline:none; border-color:hsl(var(--primary) / .6); }

.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filter { border:1px solid hsl(var(--border) / .7); background:hsl(var(--secondary) / .4); color:hsl(var(--muted-fg)); border-radius:999px; padding:8px 16px; font-size:.85rem; font-weight:500; transition:all .18s; }
.filter:hover { border-color:hsl(var(--primary) / .5); color:hsl(var(--fg)); }
.filter.active { border-color:hsl(var(--primary)); background:hsl(var(--primary)); color:hsl(var(--primary-fg)); box-shadow:0 8px 24px -8px hsl(var(--primary) / .5); }

.grid-products { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pcard { border:1px solid hsl(var(--border) / .6); border-radius:calc(var(--radius) + 4px); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, border-color .2s, box-shadow .2s; }
.pcard:hover { transform:translateY(-4px); border-color:hsl(var(--primary) / .5); box-shadow:0 18px 40px -16px hsl(var(--primary) / .25); }
.pcard-media { position:relative; height:160px; width:100%; overflow:hidden; display:block; }
.pcard-media .bgfill { position:absolute; inset:0; transition:transform .5s; }
.pcard:hover .pcard-media .bgfill { transform:scale(1.05); }
.pcard-media .molecule-bg { position:absolute; inset:0; opacity:.5; }
.pcard-media .vial { position:absolute; inset:0; display:grid; place-items:center; }
.pcard-media .tl { position:absolute; left:12px; top:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.pcard-media .tr { position:absolute; right:12px; top:12px; }
.pcard-body { display:flex; flex-direction:column; flex:1; padding:16px; }
.pcard-kicker { font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:hsl(var(--muted-fg)); }
.pcard-name { margin-top:4px; font-size:1.05rem; font-weight:700; text-align:left; transition:color .18s; }
.pcard:hover .pcard-name { color:hsl(var(--primary)); }
.pcard-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ptag { border-radius:6px; background:hsl(var(--secondary)); color:hsl(var(--muted-fg)); font-size:.68rem; padding:3px 8px; }
.pcard-foot { margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; padding-top:16px; gap:10px; }
.pcard-price .compare { font-size:.72rem; color:hsl(var(--muted-fg)); text-decoration:line-through; }
.pcard-price .amt { font-size:1.25rem; font-weight:800; }
.pcard-stock { margin-top:8px; display:flex; align-items:center; gap:6px; font-size:.68rem; color:hsl(var(--muted-fg)); }
.pcard-stock.low { color:hsl(var(--amber)); }
.pcard-stock.soon { color:hsl(var(--muted-fg)); }
.pcard-stock .ico { width:12px; height:12px; }

/* Producto anunciado pero aún sin existencias: se ve, no se compra. */
.pcard.is-soon .pcard-media .bgfill,
.pcard.is-soon .pcard-media .molecule-bg,
.pcard.is-soon .pcard-media .vial,
.pcard.is-soon .pcard-media .pcard-photo { filter:saturate(.4) brightness(.82); }
.pcard.is-soon .pcard-price .amt { font-size:.8rem; font-weight:600; color:hsl(var(--muted-fg));
  letter-spacing:.02em; white-space:nowrap; }
/* La tarjeta ya dice "Próximamente" arriba y "Esperando disponibilidad" abajo:
   el botón no necesita repetirlo, sólo verse claramente inactivo. */
.pcard.is-soon .pcard-foot .btn[disabled] { padding-inline:12px; white-space:nowrap; }
.pcard.is-soon .btn[disabled] { opacity:.65; cursor:not-allowed; }
.catalog-empty { border:1px solid hsl(var(--border) / .6); border-radius:calc(var(--radius) + 4px); padding:48px; text-align:center; color:hsl(var(--muted-fg)); }

/* Vial SVG scaling */
.vial-svg { filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }

/* ---------- Why us ---------- */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why-card { position:relative; overflow:hidden; border:1px solid hsl(var(--border) / .6); border-radius:calc(var(--radius) + 4px); padding:24px; transition:transform .2s, border-color .2s; }
.why-card:hover { transform:translateY(-4px); border-color:hsl(var(--primary) / .5); }
.why-card .num { position:absolute; right:-8px; top:-16px; font-size:4.5rem; font-weight:900; color:hsl(var(--primary) / .06); transition:color .2s; }
.why-card:hover .num { color:hsl(var(--primary) / .1); }
.why-card .ico { width:28px; height:28px; color:hsl(var(--primary)); }
.why-card h3 { margin-top:16px; font-size:1rem; font-weight:700; }
.why-card p { margin-top:8px; font-size:.85rem; line-height:1.6; color:hsl(var(--muted-fg)); }

/* ---------- COA verify strip ---------- */
.verify-strip { border:1px solid hsl(var(--border) / .6); border-radius:calc(var(--radius) + 8px); padding:clamp(24px,4vw,36px); display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
.verify-strip .vs-eyebrow { color:hsl(var(--primary)); }
.verify-strip h3 { margin-top:10px; font-size:clamp(1.4rem,2.6vw,1.75rem); font-weight:800; }
.verify-strip p { margin-top:10px; color:hsl(var(--muted-fg)); font-size:.9rem; }
.verify-box form { display:flex; gap:8px; margin-top:4px; }
.verify-box input { flex:1; height:48px; padding:0 14px; border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) - 2px); background:hsl(var(--bg) / .6); color:hsl(var(--fg)); font-family:var(--mono); }
.verify-box input:focus { outline:none; border-color:hsl(var(--primary) / .6); }
.verify-box .result { margin-top:12px; font-family:var(--mono); font-size:.82rem; color:hsl(var(--muted-fg)); min-height:1.2em; }
.verify-box .result b { color:hsl(var(--primary)); }
.verify-box .result.ok { color:hsl(var(--fg)); }

/* ---------- Shipping / Payment ---------- */
.sec-secondary { border-block:1px solid hsl(var(--border) / .6); background:hsl(var(--secondary) / .2); }
.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.pay-col > .eyebrow { display:block; }
.pay-col h2 { margin-top:8px; font-size:1.75rem; font-weight:800; }
.pay-col > p { margin-top:12px; color:hsl(var(--muted-fg)); }
.pay-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
.pay-card { border:1px solid hsl(var(--border) / .6); border-radius:calc(var(--radius) + 4px); padding:20px; transition:border-color .2s; }
.pay-card:hover { border-color:hsl(var(--primary) / .4); }
.pay-card .ico { width:24px; height:24px; color:hsl(var(--primary)); }
.pay-card h3 { margin-top:12px; font-size:.95rem; font-weight:600; }
.pay-card p { margin-top:6px; font-size:.82rem; color:hsl(var(--muted-fg)); line-height:1.55; }

/* ---------- FAQ ---------- */
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item { border:1px solid hsl(var(--border) / .6); border-radius:var(--radius); padding:0 20px; transition:border-color .2s; }
.faq-item[open] { border-color:hsl(var(--primary) / .4); }
.faq-item summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; font-weight:600; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .chev { color:hsl(var(--muted-fg)); transition:transform .2s; flex:none; width:18px; height:18px; }
.faq-item[open] summary .chev { transform:rotate(180deg); color:hsl(var(--primary)); }
.faq-item .faq-a { padding:0 0 18px; font-size:.9rem; line-height:1.7; color:hsl(var(--muted-fg)); }

/* ---------- Footer ---------- */
.footer { border-top:1px solid hsl(var(--border) / .6); background:hsl(var(--secondary) / .2); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer p.desc { margin-top:16px; max-width:24rem; font-size:.85rem; line-height:1.7; color:hsl(var(--muted-fg)); }
.footer h4 { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:hsl(var(--primary)); }
.footer ul { list-style:none; padding:0; margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.footer li { display:flex; align-items:center; gap:10px; font-size:.88rem; color:hsl(var(--muted-fg)); }
.footer li .ico { width:16px; height:16px; color:hsl(var(--primary)); }
.footer a:hover { color:hsl(var(--fg)); }
.footer .newsletter { display:flex; border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) - 2px); overflow:hidden; margin-top:16px; }
.footer .newsletter input { flex:1; min-width:0; padding:11px 12px; background:hsl(var(--bg) / .5); color:hsl(var(--fg)); border:0; font-size:.85rem; }
.footer .newsletter input:focus { outline:none; }
.footer .newsletter button { background:hsl(var(--primary)); color:hsl(var(--primary-fg)); padding:0 16px; font-weight:600; font-size:.82rem; }
.footer .fineprint { margin-top:10px; font-size:.72rem; color:hsl(var(--muted-fg)); font-family:var(--mono); }
.legal-note { margin-top:48px; border:1px solid hsl(var(--amber) / .3); background:hsl(var(--amber) / .1); border-radius:var(--radius); padding:16px; }
.legal-note p { display:flex; align-items:flex-start; gap:10px; font-size:.75rem; line-height:1.7; color:hsl(var(--amber-text)); }
.legal-note .ico { width:16px; height:16px; margin-top:2px; flex:none; }
.footer-copy { margin-top:32px; text-align:center; font-size:.75rem; color:hsl(var(--muted-fg)); }

/* ---------- Cart drawer (Sheet) ---------- */
.overlay { position:fixed; inset:0; background:var(--scrim); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; z-index:90; }
.overlay.show { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; right:0; height:100dvh; width:min(28rem,100%); z-index:100; background:hsl(var(--popover)); border-left:1px solid hsl(var(--border)); transform:translateX(100%); transition:transform .3s cubic-bezier(.3,.7,.3,1); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.drawer.show { transform:none; }
.drawer-head { padding:20px; border-bottom:1px solid hsl(var(--border) / .6); }
.drawer-head .row { display:flex; align-items:center; justify-content:space-between; }
.drawer-head h3 { display:flex; align-items:center; gap:8px; font-size:1.05rem; }
.drawer-head h3 .ico { color:hsl(var(--primary)); width:20px; height:20px; }
.drawer-head .close .ico { width:20px; height:20px; }
.drawer-head .sub { margin-top:4px; font-size:.82rem; color:hsl(var(--muted-fg)); }
.ship-progress { margin:16px 20px 0; border:1px solid hsl(var(--border) / .6); background:hsl(var(--secondary) / .3); border-radius:var(--radius); padding:14px; }
.ship-progress .msg { display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:500; }
.ship-progress .msg .ico { width:16px; height:16px; color:hsl(var(--primary)); }
.ship-progress .msg b { color:hsl(var(--primary)); }
.ship-progress .track { margin-top:10px; height:8px; border-radius:999px; background:hsl(var(--secondary)); overflow:hidden; }
.ship-progress .track i { display:block; height:100%; background:hsl(var(--primary)); width:0; transition:width .3s; }
.drawer-items { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
.drawer-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; color:hsl(var(--muted-fg)); }
.drawer-empty .circle { width:80px; height:80px; border-radius:999px; background:hsl(var(--secondary)); display:grid; place-items:center; }
.drawer-empty .circle .ico { width:32px; height:32px; }
.citem { display:flex; gap:12px; border:1px solid hsl(var(--border) / .6); background:hsl(var(--secondary) / .2); border-radius:var(--radius); padding:12px; }
.citem .thumb { width:48px; height:56px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:1.2rem; background:linear-gradient(135deg, hsl(var(--primary) / .25), hsl(var(--sky) / .15)); }
.citem .main { min-width:0; flex:1; }
.citem .cname { font-size:.88rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.citem .cpres { font-size:.72rem; color:hsl(var(--muted-fg)); }
.citem .crow { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.citem .step { display:flex; align-items:center; gap:2px; border:1px solid hsl(var(--border) / .6); border-radius:8px; }
.citem .step button { padding:5px 8px; color:hsl(var(--muted-fg)); }
.citem .step button:hover { color:hsl(var(--fg)); }
.citem .step .ico { width:14px; height:14px; }
.citem .step .n { min-width:24px; text-align:center; font-size:.85rem; font-weight:600; }
.citem .camt { font-size:.88rem; font-weight:700; }
.citem .rm { align-self:flex-start; color:hsl(var(--muted-fg)); }
.citem .rm:hover { color:hsl(var(--destructive)); }
.citem .rm .ico { width:16px; height:16px; }
.drawer-foot { padding:16px 20px 20px; border-top:1px solid hsl(var(--border) / .6); }
.drawer-foot .line { display:flex; justify-content:space-between; font-size:.85rem; color:hsl(var(--muted-fg)); margin-bottom:8px; }
.drawer-foot .total { display:flex; justify-content:space-between; align-items:baseline; font-weight:800; font-size:1rem; padding-top:12px; border-top:1px solid hsl(var(--border) / .6); }
.drawer-foot .total b { color:hsl(var(--primary)); }
.drawer-foot .btn { margin-top:14px; }

/* ---------- Quick-view modal ---------- */
.modal { position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
.modal.show { opacity:1; visibility:visible; }
.modal-backdrop { position:absolute; inset:0; background:var(--scrim); }
.modal-card { position:relative; width:min(32rem,100%); max-height:90dvh; overflow-y:auto; background:hsl(var(--popover)); border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) + 4px); padding:24px; box-shadow:var(--shadow-lg); transform:translateY(8px) scale(.98); transition:transform .2s; }
.modal.show .modal-card { transform:none; }
.modal-close { position:absolute; right:14px; top:14px; color:hsl(var(--muted-fg)); }
.modal-close:hover { color:hsl(var(--fg)); }
.modal-card h3 { font-size:1.5rem; font-weight:800; padding-right:24px; }
.modal-meta { margin-top:6px; font-size:.82rem; color:hsl(var(--muted-fg)); }
.modal-desc { margin-top:16px; font-size:.9rem; line-height:1.7; color:hsl(var(--muted-fg)); }
.modal-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.modal-tags .badge { background:hsl(var(--secondary)); color:hsl(var(--fg)); }
.modal-points { list-style:none; padding:16px; margin-top:16px; border:1px solid hsl(var(--border) / .6); background:hsl(var(--secondary) / .3); border-radius:var(--radius); display:flex; flex-direction:column; gap:8px; font-size:.85rem; }
.modal-points li { display:flex; align-items:center; gap:8px; }
.modal-points li .dot { width:6px; height:6px; border-radius:999px; background:hsl(var(--primary)); flex:none; }
.modal-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding-top:16px; border-top:1px solid hsl(var(--border) / .6); }
.modal-foot .amt { font-size:1.5rem; font-weight:800; }
.modal-foot .compare { font-size:.8rem; color:hsl(var(--muted-fg)); text-decoration:line-through; }
.modal-ficha { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:.82rem; color:hsl(var(--primary)); font-weight:600; }
.modal-ficha .ico { width:15px; height:15px; }

/* ---------- Toast ---------- */
.toast-wrap { position:fixed; right:20px; bottom:20px; z-index:130; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast { display:flex; align-items:center; gap:12px; background:hsl(var(--card)); border:1px solid hsl(var(--primary) / .4); border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow-lg); transform:translateX(120%); opacity:0; transition:transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s; max-width:20rem; }
.toast.show { transform:none; opacity:1; }
.toast .ico { color:hsl(var(--primary)); width:18px; height:18px; flex:none; }
.toast .tmsg { font-size:.85rem; font-weight:600; }
.toast .taction { margin-left:auto; font-size:.78rem; font-weight:700; color:hsl(var(--primary)); white-space:nowrap; }

/* ==========================================================================
   Product detail page (producto.html)
   ========================================================================== */
.breadcrumb { padding-top:112px; }
.breadcrumb .bc { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; color:hsl(var(--muted-fg)); }
.breadcrumb .bc a:hover { color:hsl(var(--primary)); }
.breadcrumb .bc .here { color:hsl(var(--fg)); }
.pdp { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-top:32px; }
.pdp-gallery { display:flex; gap:14px; }
.pdp-thumbs { display:flex; flex-direction:column; gap:10px; }
.pdp-thumbs .t { width:68px; height:68px; border-radius:12px; border:1px solid hsl(var(--border)); overflow:hidden; position:relative; }
.pdp-thumbs .t.active { border:2px solid hsl(var(--primary)); }
.pdp-thumbs .t .molecule-bg { position:absolute; inset:0; opacity:.5; }
.pdp-thumbs .t .bgfill { position:absolute; inset:0; background:linear-gradient(135deg, hsl(215 40% 14%), hsl(199 60% 12%)); }
.pdp-thumbs .t.pdf { display:grid; place-items:center; font-family:var(--mono); font-size:.6rem; color:hsl(var(--muted-fg)); }
.pdp-stage { flex:1; position:relative; border:1px solid hsl(var(--border) / .6); border-radius:calc(var(--radius) + 4px); overflow:hidden; min-height:440px; display:grid; place-items:center; }
.pdp-stage .bgfill { position:absolute; inset:0; background:linear-gradient(135deg, hsl(215 40% 12%), hsl(199 60% 12%)); }
.pdp-stage .molecule-bg { position:absolute; inset:0; opacity:.5; }
.pdp-stage .badge-purity { position:absolute; left:16px; top:16px; }
.pdp-info .pdp-kicker { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:hsl(var(--muted-fg)); font-weight:600; }
.pdp-info h1 { margin-top:8px; font-size:clamp(2rem,5vw,2.75rem); font-weight:800; }
.pdp-info .pdp-sub { margin-top:10px; color:hsl(var(--muted-fg)); }
.pdp-price { display:flex; align-items:baseline; gap:12px; margin-top:20px; }
.pdp-price .amt { font-size:2.25rem; font-weight:800; }
.pdp-price .amt small { font-family:var(--mono); font-size:.9rem; color:hsl(var(--muted-fg)); margin-left:6px; font-weight:400; }
.pdp-price .iva { font-size:.8rem; color:hsl(var(--muted-fg)); }
.pdp-label { margin-top:24px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.pdp-sizes { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.size { border:1px solid hsl(var(--border)); background:hsl(var(--secondary) / .3); color:hsl(var(--muted-fg)); border-radius:calc(var(--radius) - 2px); padding:12px 16px; font-weight:600; font-size:.9rem; }
.size.active { border:2px solid hsl(var(--primary)); color:hsl(var(--fg)); }
.pdp-buy { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.stepper { display:flex; align-items:center; border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) - 2px); }
.stepper button { width:44px; height:50px; display:grid; place-items:center; color:hsl(var(--fg)); }
.stepper button:hover { background:hsl(var(--secondary)); }
.stepper button .ico { width:16px; height:16px; }
.stepper .q { min-width:40px; text-align:center; font-weight:700; font-family:var(--mono); }
.btn-buy { flex:1; min-width:180px; }
.pdp-stock { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.82rem; color:hsl(var(--muted-fg)); }
.pdp-stock .dot { width:7px; height:7px; border-radius:999px; background:hsl(var(--primary)); }
.accordions { margin-top:28px; border-top:1px solid hsl(var(--border) / .6); }
.acc { border-bottom:1px solid hsl(var(--border) / .6); }
.acc summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; font-weight:600; cursor:pointer; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary .chev { width:18px; height:18px; color:hsl(var(--muted-fg)); transition:transform .2s; }
.acc[open] summary .chev { transform:rotate(180deg); color:hsl(var(--primary)); }
.acc .acc-body { padding:0 0 16px; }
.spectable { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.8rem; }
.spectable td { padding:10px 0; border-bottom:1px solid hsl(var(--border) / .5); color:hsl(var(--muted-fg)); }
.spectable tr:last-child td { border-bottom:0; }
.spectable td:last-child { text-align:right; color:hsl(var(--fg)); }
.ruo-note { margin-top:20px; border-left:3px solid hsl(var(--amber)); background:hsl(var(--amber) / .08); border-radius:0 var(--radius) var(--radius) 0; padding:14px 16px; font-size:.82rem; line-height:1.6; color:hsl(var(--amber-text)); font-family:var(--mono); }
.together h2 { font-size:1.5rem; font-weight:800; margin-bottom:20px; }
.together-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mini { display:flex; gap:12px; align-items:center; border:1px solid hsl(var(--border) / .6); border-radius:var(--radius); padding:14px; transition:border-color .2s; }
.mini:hover { border-color:hsl(var(--primary) / .4); }
.mini .m-thumb { width:56px; height:56px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:1.1rem; background:linear-gradient(135deg, hsl(var(--primary) / .22), hsl(var(--sky) / .12)); }
.mini .m-name { font-size:.85rem; font-weight:600; }
.mini .m-price { margin-top:4px; font-weight:800; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .cats { grid-template-columns:repeat(3,1fr); }
  .grid-products { grid-template-columns:repeat(3,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .together-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px) {
  .nav { display:none; }
  .burger { display:flex; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .pay-grid { grid-template-columns:1fr; gap:40px; }
  .verify-strip { grid-template-columns:1fr; gap:20px; }
  .pdp { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .grid-products { grid-template-columns:repeat(2,1fr); gap:14px; }
  .cats { grid-template-columns:repeat(2,1fr); }
  .pay-cards { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .together-grid { grid-template-columns:1fr 1fr; }
  .brand-name .ruo { display:none; }
  .langtoggle { display:none; }
  .pdp-gallery { flex-direction:column-reverse; }
  .pdp-thumbs { flex-direction:row; }
}
@media (max-width: 420px) {
  .grid-products { grid-template-columns:1fr; }
  .hero-stats { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.001ms !important; animation-duration:.001ms !important; scroll-behavior:auto; }
}

/* Foto real de producto en tarjeta (cuando existe en Storage) */
.pcard-media .pcard-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.pcard:hover .pcard-media .pcard-photo { transform:scale(1.05); }

/* Botón flotante de WhatsApp */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center;
  background: #25d366; color: #05240f; box-shadow: 0 10px 30px -8px rgba(37,211,102,.6);
  transition: transform .2s, box-shadow .2s;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 36px -8px rgba(37,211,102,.7); }
.wa-fab svg { width: 27px; height: 27px; fill: currentColor; }
@media (max-width: 640px) { .wa-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; } }