/* === base.css === */
/* =========================================================================
   VYAL — base.css
   Clon de alta fidelidad del sistema visual de amino.club para la marca VYAL
   Español · MXN · Producción (no maqueta)
   Síntesis final: estructura limpia + gradientes/paneles ricos + responsive
   ========================================================================= */

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

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Tinta / texto */
  --ink: #0A0A0C;
  --ink-soft: #3A3D45;
  --muted: #6B7280;
  --line: #E9EAEE;

  /* Fondos */
  --bg: #FFFFFF;
  --bg-soft: #F7F8FA;

  /* Pasteles */
  --lav: #ECEBFB;
  --lav-2: #E4E2FA;
  --mint: #EAF7EE;
  --green: #22C55E;
  --green-ink: #15803D;
  --pink: #F7ECEC;
  --blue: #E7EEF6;
  --beige: #EBE4DD;

  /* Acentos varios */
  --amber: #F5B841;
  --navy: #0E1729;
  --navy-soft: #9AA7B8;

  /* Radios */
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-sm: 14px;

  /* Sombras */
  --shadow-card: 0 18px 40px -24px rgba(16, 20, 40, .28);
  --shadow-soft: 0 8px 24px -16px rgba(16, 20, 40, .20);
  --shadow-float: 0 24px 60px -28px rgba(16, 20, 40, .45);

  /* Layout */
  --wrap: 1200px;
  --nav-h: 76px;

  /* Tipografía */
  --font: 'Anek Telugu', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Transiciones */
  --t: .2s cubic-bezier(.4, 0, .2, 1);
  --t-spring: .25s cubic-bezier(.2, .8, .2, 1);

  /* Gradientes de referencia (tomados de las capturas) */
  --grad-hero: linear-gradient(155deg, #EEEDFC 0%, #E9E7FA 42%, #E7EEF7 100%);
  --grad-cta: linear-gradient(115deg, #FBF6D8 0%, #F1F3D4 38%, #E7F4DE 68%, #E4F1E7 100%);
  --grad-contact: linear-gradient(180deg, #EDEBFB 0%, #E9E9FA 45%, #E6EFF7 100%);
  --grad-nl: linear-gradient(120deg, #E6E4FA 0%, #EDE6F5 55%, #F6ECEC 100%);
  --grad-mint: linear-gradient(180deg, #EFF9F2 0%, #EAF7EE 100%);
  --grad-panel: linear-gradient(160deg, #F5F6F9 0%, #EEF0F5 55%, #E7EDF6 100%);
}

/* -------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
button { cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t), opacity var(--t);
}

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--lav-2); color: var(--ink); }

/* -------------------------------------------------------------------------
   3. TIPOGRAFÍA / HELPERS
   ------------------------------------------------------------------------- */
h1, .h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h2, .h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h3, .h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 60ch;
}
.eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Subrayado verde de acento (H2 de la CTA band) */
.accent-underline, .u {
  position: relative;
  white-space: nowrap;
}
.accent-underline::after, .u::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .04em;
  height: .16em;
  background: linear-gradient(90deg, var(--green), #86efac);
  border-radius: 999px;
  z-index: -1;
}

.text-green { color: var(--green-ink); }
.text-muted { color: var(--muted); }
.center { text-align: center; }

/* -------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: clamp(56px, 8vw, 110px); }
.section.tight { padding-block: clamp(40px, 5vw, 64px); }
.section-soft { background: var(--bg-soft); }
.section-mint { background: var(--grad-mint); }
.section-lav { background: var(--lav); }

.section-head {
  max-width: 720px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head.center { margin-inline: auto; }
.section-head p { margin-top: 14px; color: var(--ink-soft); }

.grid { display: grid; gap: 24px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }

/* -------------------------------------------------------------------------
   5. BOTONES
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: .95em 1.7em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
  transition: transform var(--t-spring), background var(--t), color var(--t),
              border-color var(--t), box-shadow var(--t);
}
.btn:active { transform: translateY(1px); }

.btn-solid {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.btn-solid:hover {
  background: #17171c;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px rgba(10, 10, 12, .55);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-sm { font-size: .875rem; padding: .6em 1.15em; }
.btn-lg { font-size: 1.05rem; padding: 1.05em 2em; }
.btn-block { display: flex; width: 100%; }

/* Flecha "→" que se desliza en hover */
.btn-arrow, .btn .btn-arrow { transition: transform var(--t); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-arrow svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; }

/* -------------------------------------------------------------------------
   6. PILLS / CHIPS / BADGES
   ------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1;
  padding: .6em 1.15em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t),
              color var(--t), border-color var(--t);
}
.pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: #d7d9e0;
  color: var(--ink);
}
.pill.on,
.pill.active,
.pill[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.pill.on:hover { color: #fff; }
.pill svg { width: 1.05em; height: 1.05em; stroke: currentColor; fill: none; stroke-width: 1.7; }
.pill-soft { background: var(--bg-soft); border-color: transparent; }

.pill-dot,
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.dot { box-shadow: 0 0 0 4px rgba(34, 197, 94, .16); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  padding: .5em .85em;
  border-radius: var(--radius-pill);
}
.badge-green {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .55em 1em;
  border-radius: var(--radius-pill);
  background: var(--mint);
  color: var(--green-ink);
  font-size: .9rem;
  font-weight: 600;
}
.badge-green .check {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  flex: none;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .72em;
  font-weight: 800;
}
.badge-green .check svg { width: .85em; height: .85em; stroke: #fff; fill: none; stroke-width: 3; }

/* Tag HPLC (mini pill verde) */
.tag-hplc {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .75em;
  border-radius: var(--radius-pill);
  background: var(--mint);
  color: var(--green-ink);
  font-size: .78rem;
  font-weight: 600;
}
.tag-hplc svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; }

/* -------------------------------------------------------------------------
   7. NAV
   ------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  height: var(--nav-h);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: .15em;
}
.brand span,
.brand small {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-links a:hover,
.nav-links a.on { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.nav-ic {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  transition: background var(--t), transform var(--t);
}
.nav-ic:hover { background: var(--bg-soft); transform: translateY(-1px); }
.nav-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: .66rem;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  place-items: center;
  color: var(--ink);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after { transform: translateY(5px); }

/* -------------------------------------------------------------------------
   8. HERO (split: izq blanco / der gradiente lavanda + viales)
   ------------------------------------------------------------------------- */
.hero { position: relative; }
.hero-grid,
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(720px, calc(100vh - var(--nav-h)));
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 100px) clamp(24px, 5vw, 72px);
  max-width: calc(var(--wrap) / 2 + 60px);
  margin-left: auto;
  width: 100%;
}
.hero-copy h1,
.hero-title { margin-bottom: 22px; }
.hero-copy .lead,
.hero-sub { max-width: 36ch; margin-bottom: 34px; }
.hero-copy .btn,
.hero-cta .btn { align-self: flex-start; }

.hero-panel {
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  min-height: clamp(420px, 46vw, 640px);
}
.hero-panel::after {
  content: "";
  position: absolute;
  inset: auto -10% -20% -10%;
  height: 60%;
  background: radial-gradient(60% 100% at 60% 100%, rgba(231, 238, 247, .9), transparent 70%);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   9. FLOAT VIALS (viales flotantes)
   ------------------------------------------------------------------------- */
.float-vials,
.vials {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.float-vials img,
.vials img {
  position: absolute;
  filter: drop-shadow(0 30px 40px rgba(30, 30, 60, .25));
  animation: floatY 7s ease-in-out infinite;
  will-change: transform;
}
.float-vials img:nth-child(1) { width: 46%; left: 4%;  bottom: -2%; animation-delay: 0s; }
.float-vials img:nth-child(2) { width: 20%; left: 40%; top: 26%;   animation-delay: -1.4s; }
.float-vials img:nth-child(3) { width: 23%; left: 54%; top: 14%;   animation-delay: -2.8s; }
.float-vials img:nth-child(4) { width: 21%; right: 4%; top: 34%;   animation-delay: -4s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-16px) rotate(var(--rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .float-vials img, .vials img { animation: none; }
}

/* -------------------------------------------------------------------------
   10. GUARANTEE / STATS / METRICS
   ------------------------------------------------------------------------- */
.guarantee {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-soft);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.guarantee-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green);
}
.guarantee strong { display: block; color: var(--ink); font-weight: 700; }
.guarantee small { color: var(--muted); }

.stats,
.hero-metrics,
.pstats,
.purity-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
}
.stat, .pstat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-num,
.stat b,
.pstat strong {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat-label,
.stat span,
.pstat span {
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
}

/* Fila de stats con separadores (Quality) — variante inline */
.stat-row {
  display: flex;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 8px 0 34px;
}
.stat-row .stat {
  flex-direction: row;
  align-items: baseline;
  gap: .6em;
  padding: 22px 28px 22px 0;
  position: relative;
}
.stat-row .stat + .stat { padding-left: 28px; }
.stat-row .stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--line);
}
.stat-row .stat b { font-size: 1.9rem; }
.stat-row .stat span { max-width: 8em; }

/* -------------------------------------------------------------------------
   11. FEATURE CARDS ("Todo lo que necesitas")
   ------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.feature-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 3vw, 36px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--t-spring), box-shadow var(--t);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -30px rgba(16, 20, 40, .42);
}
.feature-card h3 { color: var(--ink); font-size: 1.35rem; padding-right: 96px; }
.feature-card p { color: var(--ink-soft); flex: 1; padding-right: 96px; }
.feature-card .pill,
.feature-card .btn { align-self: flex-start; margin-top: 4px; }

/* Ícono de línea, arriba-derecha (como amino) */
.feature-ic {
  position: absolute;
  top: clamp(28px, 3vw, 36px);
  right: clamp(28px, 3vw, 36px);
  width: 78px;
  height: 78px;
  color: var(--ink);
  opacity: .85;
}
.feature-ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.3; }

/* -------------------------------------------------------------------------
   12. QUALITY (panel izq + card grande der con badges flotantes)
   ------------------------------------------------------------------------- */
.quality,
.quality-grid,
.purity-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.quality-tabs,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 20px 26px;
}

/* Card "Potencia verificada" con callout verde */
.verified {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #FCFCFD 0%, #F6F7F9 100%);
  padding: 28px 30px;
  box-shadow: var(--shadow-soft);
}
.verified-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.verified-head h3 { margin: 0; font-size: 1.2rem; }

.callout {
  border-left: 4px solid var(--green);
  background: var(--bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin-top: 12px;
  box-shadow: var(--shadow-soft);
}
.callout strong { color: var(--ink); }
.callout p { color: var(--ink-soft); font-size: .98rem; margin: 0; }

.quality-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.quality-cta .note {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--muted);
  font-size: .95rem;
}
.quality-cta .note svg { width: 1.1em; height: 1.1em; stroke: var(--green); fill: none; stroke-width: 2; }

/* Panel derecho: card grande con vial + badges flotantes */
.quality-panel,
.proof-panel {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--grad-panel);
  min-height: clamp(440px, 42vw, 600px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 28px;
}
.quality-panel .vial,
.proof-panel img.vial {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: 52%;
  filter: drop-shadow(0 30px 40px rgba(30, 30, 60, .3));
}

/* Badge flotante superior-derecho "99%+ Pureza · Verificado por HPLC" */
.float-badge {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--shadow-float);
}
.float-badge .check {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  flex: none;
  background: var(--mint);
  color: var(--green);
  display: grid;
  place-items: center;
}
.float-badge .check svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 3; }
.float-badge strong { display: block; font-size: .95rem; color: var(--ink); }
.float-badge span { font-size: .8rem; color: var(--muted); }

/* Card inferior "Ver la prueba" */
.proof-card {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: var(--shadow-float);
  transition: transform var(--t);
}
.proof-card:hover { transform: translateY(-3px); }
.proof-card .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  flex: none;
}
.proof-card .ic svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.proof-card strong { display: block; font-size: 1rem; color: var(--ink); }
.proof-card span { font-size: .88rem; color: var(--muted); }
.proof-card .arrow { margin-left: auto; color: var(--muted); }
.proof-card .arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* -------------------------------------------------------------------------
   13. CTA BAND / NEWSLETTER
   ------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--grad-cta);
  padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 72px);
}
.cta-band .float-vials img:nth-child(1) { width: 11%; left: 2%;  top: 8%;    --rot: -12deg; }
.cta-band .float-vials img:nth-child(2) { width: 12%; right: 3%; bottom: 2%; --rot: 10deg; }

.cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 840px;
  margin-inline: auto;
}
.cta-inner h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 1.1em;
}
.cta-copy h2 { margin-bottom: 24px; }

/* Newsletter box (lavanda) */
.newsletter {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 6vw, 72px);
  background: var(--grad-nl);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  box-shadow: var(--shadow-card);
}
.newsletter h3 { color: var(--ink); font-size: 1.5rem; margin-bottom: .4em; }
.newsletter p { color: var(--ink-soft); margin: 0; }
.newsletter .fine { font-size: .9rem; color: var(--muted); margin-top: .6em; }

/* Formulario newsletter tipo "input + botón" en cápsula */
.newsletter-form,
.nl-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 22px;
  box-shadow: var(--shadow-soft);
  min-width: 340px;
}
.newsletter-form input,
.nl-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.newsletter-form input::placeholder,
.nl-form input::placeholder { color: var(--muted); }
.nl-form .btn-solid { white-space: nowrap; }

/* Input genérico (formularios sueltos) */
.input {
  flex: 1;
  min-width: 0;
  padding: .85em 1.2em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: .95rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.input::placeholder { color: var(--muted); }
.input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 12, .08);
}

/* -------------------------------------------------------------------------
   14. SHOP: BÚSQUEDA / ORDEN / CHIPS (Productos)
   ------------------------------------------------------------------------- */
.shop-head { margin-bottom: 28px; }
.shop-head h1 { margin-bottom: 8px; }
.shop-head p, .shop-head .lead { color: var(--muted); margin: 0; }

.shop-controls,
.shop-tools,
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 24px 0;
}

/* Barra de búsqueda redondeada (con icono a la izq) */
.search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 260px;
  max-width: 520px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.search:focus-within {
  border-color: #cfd2db;
  background: var(--bg);
  box-shadow: var(--shadow-soft);
}
.search svg {
  width: 20px;
  height: 20px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  flex: none;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.search input::placeholder { color: var(--muted); }

/* Orden (Sort by) */
.sort {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .95rem;
}
.sort select,
.select {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: .98rem;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 12px 42px 12px 20px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

/* Chips de categoría */
.cat-chips,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

/* -------------------------------------------------------------------------
   15. PRODUCT GRID / CARD
   ------------------------------------------------------------------------- */
.product-grid,
.cat-grid,
.catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform var(--t-spring), box-shadow var(--t), border-color var(--t);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.card-media,
.card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 10%;
  background: var(--bg-soft);
  overflow: hidden;
}
.card-media img,
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(30, 30, 60, .22));
  transition: transform var(--t);
}
.card:hover .card-media img,
.card:hover .card-img img { transform: translateY(-4px) scale(1.03); }

/* Fondos pastel por categoría (clase directa o cat-<slug>) */
.card-media.cat-metabolismo,   .card-media.metabolismo,   .card-media.blue          { background: var(--blue); }
.card-media.cat-hormonal,       .card-media.hormonal,
.card-media.cat-cognitivo,      .card-media.cognitivo,
.card-media.cat-sueno,          .card-media.sueno,         .card-media.lav           { background: var(--lav); }
.card-media.cat-longevidad,     .card-media.longevidad,
.card-media.cat-sistemainmune,  .card-media.sistemainmune, .card-media.mint          { background: var(--mint); }
.card-media.cat-recuperacion,   .card-media.recuperacion,
.card-media.cat-estetica,       .card-media.estetica,
.card-media.cat-sexual,         .card-media.sexual,        .card-media.pink          { background: var(--pink); }
.card-media.cat-bioreguladores, .card-media.bioreguladores, .card-media.beige        { background: var(--beige); }
.card-media.cat-suministros,    .card-media.suministros,
.card-media.cat-otros,          .card-media.otros,         .card-media.soft          { background: var(--bg-soft); }

/* Badge "Spray"/tag arriba-izq */
.card-badge,
.card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .78rem;
  font-weight: 600;
  padding: .4em .85em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.card-badge svg { width: 1em; height: 1em; stroke: var(--ink); fill: none; stroke-width: 1.8; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}
.card-top,
.card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.card-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.card-sub,
.card-dose {
  font-size: .92rem;
  color: var(--muted);
  margin: .15em 0 0;
}
.card-price {
  text-align: right;
  line-height: 1.1;
  flex: none;
}
.card-price .from,
.card-price small {
  display: block;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
}
.card-price .amount,
.card-price b {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.card-cta,
.card-foot { margin-top: auto; padding-top: 18px; }
.card-cta .btn,
.card-add { width: 100%; }

/* -------------------------------------------------------------------------
   16. CONTACT (centrado, viales, box rastreo)
   ------------------------------------------------------------------------- */
.contact,
.contact-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.contact-hero {
  background: var(--grad-contact);
  padding: clamp(70px, 10vw, 140px) 0 clamp(80px, 10vw, 150px);
}
.contact-hero .float-vials img:nth-child(1) { width: 9%;  left: 11%; top: 22%;    --rot: -14deg; }
.contact-hero .float-vials img:nth-child(2) { width: 13%; left: 22%; top: 40%;    --rot: 6deg; }
.contact-hero .float-vials img:nth-child(3) { width: 9%;  right: 20%; top: 20%;   --rot: 12deg; }
.contact-hero .float-vials img:nth-child(4) { width: 8%;  right: 11%; bottom: 14%; --rot: -8deg; }

.contact-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
}
.contact-inner h1 { margin: .35em 0; }
.contact-inner .lead { margin: 0 auto 1.6em; }
.contact .pill { margin-bottom: 24px; }

/* Box de rastreo ("¿Buscas tu pedido?") — lavanda, solapa el hero */
.track-box,
.contact-box {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--wrap);
  margin: clamp(-56px, -4vw, -40px) auto 0;
  position: relative;
  z-index: 5;
  background: var(--lav);
  border-radius: var(--radius-card);
  padding: 26px 30px;
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform var(--t);
}
.track-box:hover { transform: translateY(-3px); }
.track-box .ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--bg);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--shadow-soft);
}
.track-box .ic svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 1.7; }
.track-box strong { display: block; font-size: 1.1rem; color: var(--ink); }
.track-box span { color: var(--ink-soft); font-size: .98rem; }
.track-box .arrow { margin-left: auto; color: var(--muted); }
.track-box .arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Formulario de rastreo / COA */
.track-box h3, .coa-form h3 { color: var(--ink); margin-bottom: 14px; }

/* -------------------------------------------------------------------------
   17. FOOTER (navy)
   ------------------------------------------------------------------------- */
.foot {
  background: var(--navy);
  color: var(--navy-soft);
  padding: clamp(56px, 7vw, 88px) 0 32px;
}
.foot a { color: var(--navy-soft); }
.foot a:hover { color: #fff; }
.foot-inner { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.foot-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.foot-brand .brand { color: #fff; }
.foot-brand .brand span, .foot-brand .brand small { color: var(--navy-soft); }
.foot-brand p { color: var(--navy-soft); font-size: .95rem; max-width: 34ch; margin-top: 14px; }

.foot-social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.foot-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  transition: background var(--t), transform var(--t);
}
.foot-social a:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.foot-social svg { width: 20px; height: 20px; fill: #fff; }

.foot-col h4,
.foot-cols h4 {
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.foot-col ul, .foot-cols ul { display: flex; flex-direction: column; gap: 12px; }
.foot-col a, .foot-cols a { font-size: .95rem; }
.foot-cols li { margin-bottom: 12px; }

/* FDA / uso de investigación (box ámbar) */
.fda {
  border: 1px solid rgba(245, 184, 65, .35);
  border-left: 4px solid var(--amber);
  background: rgba(245, 184, 65, .07);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  margin: 8px 0 0;
}
.fda-title,
.fda h5 {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 .7em;
  color: var(--amber);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fda-title svg, .fda h5 svg { width: 1.2em; height: 1.2em; stroke: var(--amber); fill: none; stroke-width: 2; }
.fda p { color: #C9D2DE; font-size: .85rem; line-height: 1.65; margin: 0; }
.fda strong { color: #fff; }
.fda a { color: var(--amber); font-weight: 600; }

.foot-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-top: 32px;
  color: var(--navy-soft);
  font-size: .9rem;
}
.foot-pay img, .foot-pay .pay-ic { height: 22px; opacity: .85; }

.foot-bottom,
.foot-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: .88rem;
  color: var(--navy-soft);
}
.foot-trust ul { display: flex; gap: 28px; flex-wrap: wrap; }
.foot-trust li, .foot-trust span {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.foot-trust svg { width: 1.1em; height: 1.1em; stroke: var(--navy-soft); fill: none; stroke-width: 1.7; }

/* -------------------------------------------------------------------------
   18. NAV DRAWER (móvil) + SCRIM
   ------------------------------------------------------------------------- */
.nav-drawer,
.mnav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(84vw, 340px);
  z-index: 200;
  background: var(--bg);
  box-shadow: -20px 0 60px -20px rgba(16, 20, 40, .4);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  padding: 88px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.nav-drawer.open, .mnav.open { transform: translateX(0); }
.nav-drawer a, .mnav a {
  display: block;
  padding: 14px 4px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-drawer .btn, .mnav-cta .btn { width: 100%; margin-top: 20px; }

.nav-scrim,
.mnav-scrim,
.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(10, 10, 20, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.nav-scrim.open, .mnav-scrim.open, .cart-scrim.open { opacity: 1; visibility: visible; }

body.nav-open { overflow: hidden; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: rotate(45deg); }
.nav-open .nav-toggle span::after { transform: rotate(-45deg); }

/* -------------------------------------------------------------------------
   19. RESPONSIVE
   ------------------------------------------------------------------------- */

/* ---- <= 1024px : tablet / small desktop ---- */
@media (max-width: 1024px) {
  :root { --wrap: 960px; }

  .product-grid, .cat-grid, .catalog { grid-template-columns: repeat(3, 1fr); }

  .feature-card h3, .feature-card p { padding-right: 0; }
  .feature-ic { position: static; margin-bottom: 8px; width: 64px; height: 64px; }

  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; margin-bottom: 8px; }
}

/* ---- <= 900px : hero/quality/newsletter apilan ---- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }

  .hero-grid, .hero-inner,
  .quality, .quality-grid, .purity-inner,
  .newsletter { grid-template-columns: 1fr; }

  .hero-copy {
    max-width: none;
    margin-inline: auto;
    text-align: center;
    align-items: center;
    padding-block: clamp(48px, 7vw, 72px);
  }
  .hero-copy .lead, .hero-sub { max-width: 46ch; }
  .hero-copy .btn, .hero-cta .btn { align-self: center; }
  .hero-panel { min-height: 360px; order: -1; }

  .feature-grid { grid-template-columns: 1fr; }
  .quality-panel, .proof-panel { min-height: 400px; }
  .nl-form, .newsletter-form { min-width: 0; }
}

/* ---- <= 768px : mobile / tablet portrait ---- */
@media (max-width: 768px) {
  .product-grid, .cat-grid, .catalog { grid-template-columns: repeat(2, 1fr); }

  .shop-controls, .shop-tools, .filters { flex-direction: column; align-items: stretch; }
  .search { max-width: none; }
  .sort { justify-content: flex-end; }

  .stats, .hero-metrics { justify-content: space-between; gap: 24px; }
  .stat-row { flex-wrap: wrap; }
  .stat-row .stat { padding-right: 18px; }
  .stat-row .stat + .stat::before { display: none; }

  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-pay, .foot-trust { flex-direction: column; text-align: center; }
  .foot-trust ul { justify-content: center; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- <= 480px : mobile ---- */
@media (max-width: 480px) {
  .wrap { padding-inline: 18px; }
  .nav-inner { height: 64px; padding-inline: 18px; }
  .foot-inner { padding-inline: 18px; }

  h1, .h1 { font-size: clamp(2rem, 9vw, 2.6rem); }

  .product-grid, .cat-grid, .catalog { grid-template-columns: 1fr; }
  .card-media, .card-img { padding: 14%; }

  .feature-card { padding: 22px; }
  .newsletter-form, .nl-form { flex-direction: column; padding: 14px; border-radius: var(--radius-card); }
  .newsletter-form .btn, .nl-form .btn { width: 100%; }

  .stats, .hero-metrics { flex-direction: column; gap: 20px; }
  .foot-top { grid-template-columns: 1fr; gap: 28px; }
  .foot-brand p { max-width: none; }
  .fda { padding: 18px 18px; }

  .track-box, .contact-box { flex-wrap: wrap; }
  .accent-underline, .u { white-space: normal; }

  .float-vials img:nth-child(1) { width: 54%; }
  .float-vials img:nth-child(2) { width: 26%; }
  .float-vials img:nth-child(3) { width: 32%; }
  .float-vials img:nth-child(4) { width: 28%; }
}

/* -------------------------------------------------------------------------
   20. UTILIDADES FINALES
   ------------------------------------------------------------------------- */
.hidden, .hide { display: none !important; }
.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;
}
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }


/* === pages/_shell.css === */
/* =========================================================================
   pages/_shell.css — piezas compartidas por el shell (gate, carrito, crumbs,
   cat-tile, migas, y utilidades de página). Complementa base.css.
   El prefijo "_" sólo ordena su posición en el bundle (se concatena igual).
   ========================================================================= */

/* --- Site wrapper --- */
.site { position: relative; z-index: 1; background: var(--bg); }

/* --- Migas de pan --- */
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: var(--ink); }

/* --- Página estática genérica --- */
.page-in { max-width: 780px; }
.page-h1 { margin-bottom: 22px; }
.page-p { color: var(--ink-soft); margin: 0 0 1.1em; line-height: 1.7; }
.page-p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.page-in .btn { margin-top: 12px; }

/* --- FAQ --- */
.faq-item { border-top: 1px solid var(--line); padding: 22px 0; }
.faq-item h3 { color: var(--ink); font-size: 1.1rem; margin-bottom: 8px; }
.faq-item p { color: var(--ink-soft); margin: 0; }

/* --- Categorías (home): tiles --- */
.cat-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 24px 22px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
  border-top: 3px solid var(--lav-2);
  transition: transform var(--t-spring), box-shadow var(--t);
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.cat-tile b { font-weight: 700; font-size: 1.15rem; }
.cat-tile span { font-size: .84rem; color: var(--muted); }
.cat-tile.cat-metabolismo { border-top-color: #7aa7e0; }
.cat-tile.cat-hormonal, .cat-tile.cat-cognitivo, .cat-tile.cat-sueno { border-top-color: #8a7fe6; }
.cat-tile.cat-longevidad, .cat-tile.cat-sistemainmune { border-top-color: var(--green); }
.cat-tile.cat-recuperacion, .cat-tile.cat-estetica, .cat-tile.cat-sexual { border-top-color: #e0819a; }
.cat-tile.cat-bioreguladores { border-top-color: #b79a7c; }
.cat-tile.cat-suministros, .cat-tile.cat-otros { border-top-color: #9aa7b8; }
.see-all { text-align: center; margin-top: 40px; }
@media (max-width: 820px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Chip con contador --- */
.pill em { font-style: normal; font-size: .78em; opacity: .55; }

/* =========================================================================
   GATE — overlay de acceso
   ========================================================================= */
.gate {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 24px;
  background: rgba(10, 10, 20, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gate.hidden { display: none; }
.gate-card {
  width: min(460px, 100%); background: var(--bg);
  border-radius: var(--radius-card); box-shadow: var(--shadow-float);
  padding: clamp(28px, 4vw, 40px); text-align: center;
}
.gate-mark { font-size: 1.6rem; margin-bottom: 10px; }
.gate-rule { width: 44px; height: 3px; background: var(--ink); border-radius: 3px; margin: 0 auto 22px; }
.gate-title { font-size: 1.5rem; margin-bottom: 12px; }
.gate-text { color: var(--ink-soft); font-size: .96rem; margin-bottom: 20px; }
.gate-check {
  display: flex; gap: 10px; text-align: left; align-items: flex-start;
  font-size: .9rem; color: var(--ink-soft); margin-bottom: 20px;
}
.gate-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--ink); }
.gate .btn { width: 100%; }
.gate .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.gate-fine { font-size: .78rem; color: var(--muted); margin-top: 16px; }

/* =========================================================================
   CART DRAWER — selección
   ========================================================================= */
.cart-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(90vw, 400px); z-index: 200;
  background: var(--bg); box-shadow: -20px 0 60px -20px rgba(16, 20, 40, .4);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--line);
}
.cart-head h3 { color: var(--ink); font-size: 1.15rem; }
.cart-x {
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  display: grid; place-items: center; font-size: 1.3rem; color: var(--ink);
  transition: background var(--t);
}
.cart-x:hover { background: var(--bg-soft); }
.cart-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-empty { color: var(--muted); text-align: center; padding: 48px 0; }
.cart-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-thumb { width: 52px; height: 52px; flex: none; border-radius: 12px; background: var(--bg-soft); display: grid; place-items: center; overflow: hidden; }
.cart-thumb img { width: 80%; height: 80%; object-fit: contain; }
.cart-info { flex: 1; min-width: 0; }
.cart-info b { display: block; color: var(--ink); font-size: .95rem; }
.cart-info span { font-size: .82rem; color: var(--muted); }
.cart-qty { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.cart-qty button { width: 28px; height: 28px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink); font-size: 1rem; line-height: 1; }
.cart-qty button:hover { border-color: var(--ink); }
.cart-foot { padding: 20px 24px; border-top: 1px solid var(--line); }
.cart-foot:empty { display: none; }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.cart-total b { color: var(--ink); font-size: 1.2rem; font-weight: 800; }

/* Menú móvil: botón de cierre dentro del drawer */
.mnav .mnav-close { position: absolute; top: 20px; right: 20px; }


/* === pages/calidad.css === */
/* ==========================================================================
   css/pages/calidad.css — página "Calidad" (clon amino.club 5.06.07)
   Reutiliza el sistema .quality / .quality-tabs / .verified / .callout /
   .quality-panel / .float-badge / .proof-card de base.css. Aquí solo lo
   específico de esta página: conmutación de pestañas, ritmo vertical y
   refinamientos del panel derecho. Mobile-first.
   ========================================================================== */

.quality-section { padding-top: clamp(28px, 4vw, 48px); }
.quality-section .crumbs { margin-bottom: clamp(20px, 3vw, 34px); }

/* La columna izquierda respira como en amino: título grande, lead, luego stats */
.quality-copy .h1 { line-height: 1.04; letter-spacing: -.02em; }
.quality-copy .lead { margin-top: 18px; max-width: 46ch; }
.quality-copy .stat-row {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}

/* Chips (tabs): el icono hereda color del pill; el activo va negro (base.css) */
.quality-tab { cursor: pointer; user-select: none; }
.quality-tab span { line-height: 1; }

/* Desktop: los 5 chips (Potencia/Pureza/Estabilidad/Seguridad/Consistencia)
   deben caber en UNA sola fila como en amino.club. La columna izquierda es
   media rejilla, así que se compacta padding/gap/tamaño para que no envuelvan. */
@media (min-width: 901px) {
  .quality-tabs.chips { gap: 8px; flex-wrap: nowrap; }
  .quality-tabs.chips .quality-tab {
    padding: .55em .85em;
    font-size: .86rem;
    gap: .4em;
  }
  .quality-tabs.chips .quality-tab svg { width: .95em; height: .95em; }
}

/* Conmutación de contenido: solo el panel activo es visible.
   [hidden] ya lo oculta; esto asegura el estado incluso sin JS-hidden. */
.quality-content { display: none; }
.quality-content.on { display: block; animation: qc-fade .28s var(--t-spring); }

@keyframes qc-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Card verificada: un poco más de aire interno para el look amino */
.quality-content.verified { padding: clamp(24px, 3vw, 32px); }
.quality-content .verified-head { flex-wrap: wrap; }
.quality-content p { color: var(--ink-soft); line-height: 1.6; }

/* --- Panel derecho: marco/halo detrás del vial como en la captura --- */
.quality-panel { align-self: stretch; }
.quality-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
/* anillo tenue decorativo */
.quality-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(16, 20, 40, .06);
  border-radius: 50%;
  pointer-events: none;
}
.quality-panel .vial { z-index: 1; }

/* El texto del badge/card flotante se agrupa en su span */
.float-badge-txt, .proof-card-txt { display: block; }

/* ==========================================================================
   Responsive — base.css ya apila .quality a 1 col en <=900px.
   Aquí ajustamos el orden (copy primero, panel después) y tamaños móviles.
   ========================================================================== */
@media (max-width: 900px) {
  .quality-copy { text-align: left; }
  .quality-copy .lead { max-width: none; }
  /* Panel visible pero más compacto bajo el contenido */
  .quality-panel.proof-panel { min-height: 440px; margin-top: 8px; }
  .quality-panel .vial { width: 44%; }
}

@media (max-width: 768px) {
  .quality-tabs.chips { gap: 10px; }
  .quality-tab { padding-inline: 14px; }
  .quality-cta { margin-top: 26px; }
  .quality-panel .vial { width: 46%; }
  .float-badge { top: 18px; right: 18px; padding: 12px 14px; }
  .proof-card { left: 18px; right: 18px; bottom: 18px; padding: 14px 16px; }
}

@media (max-width: 480px) {
  .quality-copy .h1 br { display: none; }
  .quality-tabs.chips { gap: 8px; }
  .quality-tab span { font-size: .92rem; }
  .quality-cta { flex-direction: column; align-items: flex-start; }
  .quality-cta .btn { width: 100%; justify-content: center; }
  .quality-panel.proof-panel { min-height: 380px; padding: 20px; }
  .quality-panel .vial { width: 52%; }
  .float-badge span.float-badge-txt strong { font-size: .9rem; }
  .proof-card .arrow { display: none; }
}


/* === pages/categoria.css === */
/* =========================================================================
   pages/categoria.css — Página de categoría (categoria/<slug>.html)
   Look amino.club ("All Products") para una sola categoría VYAL.
   Reutiliza tokens y clases de base.css; sólo añade lo propio de la página.
   ========================================================================= */

/* --- Contenedor de página --- */
.cat-page { padding-top: clamp(28px, 4vw, 44px); }

/* --- Cabecera de categoría --- */
.cat-hero { max-width: 720px; margin-bottom: clamp(26px, 3vw, 36px); }
.cat-hero .eyebrow { display: block; margin-bottom: 12px; }
.cat-hero h1 { margin: 0; }
.cat-hero .cat-intro {
  margin: 16px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 60ch;
}

/* Meta: conteo · precio · pureza */
.cat-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
}
.cat-meta .cat-count { color: var(--ink); font-weight: 600; }
.cat-meta .cat-price { color: var(--ink); font-weight: 600; }
.cat-meta .cat-dot { color: var(--line); }
.cat-meta .cat-purity {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--green-ink);
}

/* --- Chips de categoría (scroll horizontal en móvil, como amino) --- */
.cat-page .cat-chips {
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 40px);
  padding-bottom: 4px;
}
.cat-page .cat-chips .pill { flex: none; }
.cat-page .cat-chips .pill em {
  font-style: normal;
  font-size: .78em;
  opacity: .55;
}
.cat-page .cat-chips .pill.on em { opacity: .7; }

/* --- Estado vacío --- */
.cat-empty {
  color: var(--muted);
  padding: 48px 0;
  text-align: center;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
  /* Chips en fila con scroll horizontal, sin salto de línea (patrón amino) */
  .cat-page .cat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .cat-page .cat-chips::-webkit-scrollbar { display: none; }
  .cat-page .cat-chips .pill { scroll-snap-align: start; }
}

@media (max-width: 480px) {
  .cat-hero .cat-intro { font-size: 1rem; }
  .cat-meta { gap: 8px; }
}


/* === pages/coa.css === */
/* =========================================================================
   pages/coa.css — Verificar lote (COA)
   Look amino.club · reutiliza .contact-hero / .float-vials / .pill / .badge-green
   / .btn y tokens de base.css. Solo estilos propios de esta página.
   ========================================================================= */

/* ---- Hero: buscador de lote centrado ------------------------------------ */
.coa-hero {
  background: var(--grad-contact);
  padding: clamp(64px, 9vw, 128px) 0 clamp(72px, 9vw, 132px);
}
.coa-inner { max-width: 780px; }
.coa-inner .pill { margin-bottom: 24px; }
.coa-inner h1 { margin: 0 0 .3em; }
.coa-inner .lead { margin: 0 auto 2em; max-width: 60ch; }

/* Viales flotantes: distribución propia (4 hero-*.webp) al estilo "contact" */
.coa-hero .float-vials img:nth-child(1) { width: 10%; left: 11%; top: 20%; --rot: -14deg; }
.coa-hero .float-vials img:nth-child(2) { width: 8%;  left: 20%; bottom: 16%; --rot: 8deg; }
.coa-hero .float-vials img:nth-child(3) { width: 9%;  right: 19%; top: 18%; --rot: 12deg; }
.coa-hero .float-vials img:nth-child(4) { width: 11%; right: 9%;  bottom: 12%; --rot: -8deg; }

/* ---- Formulario de lote (cápsula input + botón negro) ------------------- */
.coa-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 20px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t), box-shadow var(--t);
}
.coa-form:focus-within {
  border-color: #cfd2db;
  box-shadow: 0 24px 50px -26px rgba(16, 20, 40, .4);
}
.coa-field-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
  color: var(--green-ink, #1f7a4d);
}
.coa-field-ic svg { display: block; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.coa-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  padding: .7em .2em;
}
.coa-input::placeholder { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.coa-form .btn-solid { flex: none; white-space: nowrap; }

.coa-hint {
  font-size: .9rem;
  color: var(--muted);
  margin: 0 auto 26px;
  max-width: 52ch;
}
.coa-badge { box-shadow: var(--shadow-soft); }

/* ---- Chromasys: laboratorio independiente ------------------------------- */
.coa-lab {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.coa-lab-copy .eyebrow { display: block; margin-bottom: 14px; }
.coa-lab-copy h2 { margin-bottom: .5em; }
.coa-lab-copy .lead { max-width: 52ch; margin-bottom: 1em; }
.coa-lab-note { color: var(--ink-soft); margin-bottom: 1.6em; max-width: 54ch; }
.coa-lab-copy .btn { align-self: flex-start; }

/* Pasos (card de proceso) */
.coa-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--grad-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 3vw, 30px);
}
.coa-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
/* .coa-step .coa-step-ic — especificidad (0,2,0) para ganarle a `.coa-step span`
   { display:block } (0,1,1), que si no fuerza el ícono a bloque y lo descentra. */
.coa-step .coa-step-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  line-height: 0;
  border-radius: 13px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--mint) 80%, #fff), var(--mint));
  color: var(--green-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-ink) 12%, transparent);
}
.coa-step .coa-step-ic svg { display: block; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.coa-step strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
.coa-step span { display: block; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }

/* ---- Nota: COA por lote con QR ------------------------------------------ */
.coa-qr {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--mint);
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  box-shadow: var(--shadow-soft);
}
.coa-qr-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.coa-qr-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 3; }
.coa-qr strong { display: block; color: var(--ink); font-size: 1.08rem; margin-bottom: 4px; }
.coa-qr p { color: var(--ink-soft); font-size: .96rem; margin: 0; }
.coa-qr a { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .coa-lab { grid-template-columns: 1fr; }
  .coa-lab-copy { text-align: left; }
}
@media (max-width: 560px) {
  .coa-form {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-card);
    padding: 14px;
    gap: 12px;
  }
  .coa-field-ic { display: none; }
  .coa-input {
    padding: .85em 1.1em;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
  }
  .coa-input:focus { border-color: var(--ink); }
  .coa-form .btn-solid { width: 100%; }
  .coa-qr { flex-direction: column; gap: 12px; }
}

/* ── Biblioteca COA: buscador + lista ordenada de certificados ───────────── */
.coa-library { padding-top: clamp(8px,2vw,24px); }
.coa-lib-head { max-width: 720px; margin: 0 auto clamp(20px,3vw,32px); text-align: center; }
.coa-lib-search { position: relative; max-width: 620px; margin: 0 auto clamp(18px,2.5vw,26px); display: flex; align-items: center; }
.coa-lib-search .coa-field-ic { position: absolute; left: 18px; opacity: .5; display: inline-flex; pointer-events: none; }
.coa-lib-search .coa-input { width: 100%; padding: 15px 18px 15px 48px; border: 1px solid var(--line,#e3e3ea); border-radius: 999px; font: inherit; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.coa-lib-search .coa-input:focus { border-color: var(--ink,#0d0d0f); box-shadow: 0 0 0 4px rgba(13,13,15,.06); }
.coa-lib-count { position: absolute; right: 20px; font-size: 12.5px; color: var(--ink-3,#8a8a95); white-space: nowrap; pointer-events: none; }
.coa-lib-list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; gap: 8px; }
.coa-lib-item { display: flex; align-items: stretch; gap: 8px; }
.coa-lib-item[hidden] { display: none; }
.coa-lib-link { flex: 1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line,#e9e9ef); border-radius: 14px; background: #fff; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
.coa-lib-link:hover { border-color: var(--ink,#0d0d0f); box-shadow: 0 8px 22px -16px rgba(16,20,40,.35); transform: translateY(-1px); }
.coa-lib-name { font-weight: 600; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 8px; }
.coa-lib-name small { font-weight: 500; color: var(--ink-3,#8a8a95); font-size: 12.5px; }
.coa-lib-lote { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .04em; color: var(--ink-3,#8a8a95); }
.coa-lib-pdf { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1f7a4d; white-space: nowrap; line-height: 0; }
.coa-lib-pdf svg { display: block; width: 15px; height: 15px; }
.coa-lib-verify { display: flex; align-items: center; justify-content: center; width: 48px; flex: none; line-height: 0; border: 1px solid var(--line,#e9e9ef); border-radius: 14px; color: var(--ink-3,#8a8a95); text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.coa-lib-verify svg { display: block; width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.coa-lib-verify:hover { border-color: var(--ink,#0d0d0f); color: var(--ink,#0d0d0f); background: #fafafa; }
.coa-lib-empty { text-align: center; color: var(--ink-3,#8a8a95); margin-top: 22px; }
@media (max-width: 640px) {
  .coa-lib-link { grid-template-columns: 1fr auto; row-gap: 4px; }
  .coa-lib-lote { grid-column: 1 / -1; }
}

/* PDP: link secundario "verificar lote" bajo la card COA */
.pdp-coa-verify { display: inline-block; margin: -4px 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-3,#6b6b76); text-decoration: none; }
.pdp-coa-verify:hover { color: var(--ink,#0d0d0f); text-decoration: underline; }

/* ── Botón "Verificar en Chromasys": ícono de escudo + acabado pulido ─────── */
.coa-submit { display: inline-flex; align-items: center; gap: 9px; padding-left: 20px; padding-right: 22px; background: linear-gradient(180deg, #17171b, #0d0d0f); box-shadow: 0 10px 24px -14px rgba(13,13,15,.7), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.coa-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(13,13,15,.75), inset 0 1px 0 rgba(255,255,255,.12); filter: brightness(1.06); }
.coa-submit-ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.coa-submit-ic svg { display: block; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.coa-submit svg:last-child { width: 16px; height: 16px; opacity: .85; }


/* === pages/contacto.css === */
/* =========================================================================
   css/pages/contacto.css — específico de /contacto
   Clon amino.club "How can we help?". Extiende .contact-hero / .float-vials /
   .track-box de base.css; aquí solo lo propio de esta página.
   Mobile-first · breakpoints 480 / 768 / 900.
   ========================================================================= */

/* Hero: acota el ancho del copy y da aire igual que la captura */
.contact-h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.contact-lead {
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}

/* CTA "Escríbenos →" con sobre a la izquierda */
.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: .4em;
}
.contact-cta-ic,
.contact-cta .btn-arrow {
  display: inline-flex;
  align-items: center;
}
.contact-cta-ic svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Box de rastreo: enlace completo, flecha se desliza en hover */
.track-box { text-decoration: none; color: inherit; }
.track-box .track-text { display: block; }
.track-box .arrow svg { transition: transform var(--t); }
.track-box:hover .arrow svg { transform: translateX(4px); }
.track-box .ic svg,
.contact-card .ic svg {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tarjetas de datos de contacto */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 22px;
}
.contact-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px 24px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t), box-shadow var(--t);
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.contact-card .ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--lav);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.contact-card .ic svg { width: 22px; height: 22px; }
.contact-card strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.contact-card a,
.contact-card .contact-card-val {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.06rem;
}
.contact-card a:hover { color: var(--green-ink); }
.contact-card .contact-card-sub {
  display: block;
  color: var(--muted);
  font-size: .92rem;
  margin-top: 6px;
  line-height: 1.5;
}

/* Aviso legal de investigación */
.contact-note {
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  margin-top: 30px;
}

/* -------- responsive -------- */
@media (min-width: 768px) {
  .contact-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Móvil: los viales flotantes NO deben tapar el H1/lead centrado.
   Se empujan a los márgenes (arriba y abajo), se reducen y se atenúan,
   quedando siempre por detrás del texto (que va en .contact-inner z-index:2).
   Igual que amino.club en móvil: presencia decorativa, cero colisión. */
@media (max-width: 768px) {
  .contact-hero .float-vials { z-index: 0; }
  .contact-hero .float-vials img {
    opacity: .5;
    filter: drop-shadow(0 18px 26px rgba(30, 30, 60, .18));
  }
  /* El H1 centrado ocupa casi todo el ancho en este rango, así que los dos
     viales superiores (que chocaban con "¿Cómo podemos ayudarte?") se ocultan.
     Quedan solo los dos inferiores, flanqueando el CTA (que tiene aire
     alrededor): presencia decorativa sin colisión, igual que amino móvil. */
  .contact-hero .float-vials img:nth-child(1),
  .contact-hero .float-vials img:nth-child(3) { display: none; }
  .contact-hero .float-vials img:nth-child(2) { width: 15%; left: 2%;  right: auto; top: auto; bottom: 5%; --rot: 6deg; }
  .contact-hero .float-vials img:nth-child(4) { width: 15%; right: 2%; left: auto;  top: auto; bottom: 5%; --rot: -8deg; }
}

@media (max-width: 480px) {
  /* Muy angosto: los dos inferiores se pegan aún más al borde. */
  .contact-hero .float-vials img:nth-child(2) { width: 20%; left: -2%;  bottom: 2%; }
  .contact-hero .float-vials img:nth-child(4) { width: 20%; right: -2%; bottom: 2%; }
}


/* === pages/faq.css === */
/* ==========================================================================
   pages/faq.css — Preguntas frecuentes (acordeón look amino.club)
   Usa tokens/clases de base.css; añade solo lo propio de esta página.
   Se concatena DESPUÉS de base.css y _shell.css en dist/css/site.css.
   ========================================================================== */

.faq-wrap { max-width: 820px; }

.faq-head { margin-bottom: 34px; }
.faq-head .eyebrow { margin-bottom: 10px; }
.faq-intro { max-width: 62ch; }

/* Grupo temático ------------------------------------------------------------ */
.faq-group { margin-bottom: 30px; }
.faq-group:last-of-type { margin-bottom: 8px; }
.faq-eyebrow {
  margin: 0 0 12px;
  color: var(--green-ink);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tarjeta / item del acordeón ---------------------------------------------- */
.faq-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.faq-card:hover { border-color: #DADCE3; }
.faq-card.open {
  border-color: var(--lav-2);
  box-shadow: var(--shadow-card);
}

/* Pregunta (botón disparador) ---------------------------------------------- */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: 600 1.02rem/1.4 var(--font);
  color: var(--ink);
  transition: color var(--t);
}
.faq-q:hover { color: var(--ink); }
.faq-q:focus-visible {
  outline: 2px solid var(--lav-2);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.faq-q-text { flex: 1; }

/* Chevron ------------------------------------------------------------------- */
.faq-chev {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-spring), stroke var(--t);
}
.faq-card.open .faq-chev {
  transform: rotate(180deg);
  stroke: var(--ink);
}

/* Respuesta (panel colapsable) --------------------------------------------- */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-spring);
}
.faq-a-in { padding: 0 20px 20px; }
.faq-a p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: .98rem;
}
.faq-a a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-a a:hover { color: var(--green-ink); }

/* CTA final ----------------------------------------------------------------- */
.faq-cta {
  margin-top: 40px;
  padding: 30px 26px;
  border-radius: var(--radius-card);
  background: var(--grad-mint);
  border: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-cta-t {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 480px) {
  .faq-q { padding: 16px 16px; font-size: .98rem; }
  .faq-a-in { padding: 0 16px 16px; }
  .faq-cta { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .faq-cta .btn { width: 100%; justify-content: center; }
}

/* Sin JS: mostrar respuestas (progressive enhancement) --------------------- */
@media (scripting: none) {
  .faq-a { max-height: none; }
  .faq-a[hidden] { display: block; }
  .faq-chev { display: none; }
}


/* === pages/home.css === */
/* =========================================================================
   VYAL — css/pages/home.css
   CSS específico del HOME (index). Extiende base.css: solo lo propio de esta
   página (choreografía de viales hero/CTA, banda de garantía, pill-outline,
   métricas del hero). Mobile-first; breakpoints 480/768/900/1024 como base.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. HERO — métricas bajo el CTA + panel derecho con varios viales
   ------------------------------------------------------------------------- */
.home-hero .hero-metrics {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 36rem;
}
.home-hero .hero-metrics .stat b { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.home-hero .hero-metrics .stat span { max-width: 12ch; }

/* Panel derecho: 5 viales VYAL flotando, rotados, con sombra */
.home-hero-vials img { position: absolute; }
.home-hero-vials .hv {
  filter: drop-shadow(0 30px 40px rgba(30, 30, 60, .28));
  animation: floatY 7s ease-in-out infinite;
  will-change: transform;
}
/* vial protagonista, grande, al centro-izquierda */
.home-hero-vials .hv-1 { width: 42%; left: 6%;  bottom: 2%;  --rot: -6deg;  animation-delay: 0s;    z-index: 3; }
/* pequeño detrás, arriba */
.home-hero-vials .hv-2 { width: 20%; left: 40%; top: 20%;    --rot: 4deg;   animation-delay: -1.2s; z-index: 2; }
/* vial alto derecha */
.home-hero-vials .hv-3 { width: 24%; left: 52%; top: 8%;     --rot: 8deg;   animation-delay: -2.6s; z-index: 4; }
/* pequeño derecha-medio */
.home-hero-vials .hv-4 { width: 22%; right: 5%; top: 30%;    --rot: -10deg; animation-delay: -3.8s; z-index: 3; }
/* acento inferior derecha */
.home-hero-vials .hv-5 { width: 15%; right: 12%; bottom: 6%; --rot: 12deg;  animation-delay: -5s;   z-index: 1; }

/* -------------------------------------------------------------------------
   2. BANDA "LA GARANTÍA VYAL"
   ------------------------------------------------------------------------- */
.guarantee-band { padding-block: clamp(40px, 6vw, 72px); }
.guarantee-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.guarantee-copy h2 { margin-bottom: 12px; }
.guarantee-copy p { color: var(--ink-soft); max-width: 44ch; margin: 0; }
.guarantee-band .guarantee {
  gap: 16px;
  flex-wrap: wrap;
}
.guarantee-band .guarantee > div { flex: 1; min-width: 180px; }
.guarantee-band .guarantee-ic svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.guarantee-band .badge-green { margin-left: auto; text-decoration: none; }

/* -------------------------------------------------------------------------
   3. FEATURES — pill outline dentro de cada tarjeta
   ------------------------------------------------------------------------- */
.pill-outline {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
}
.pill-outline:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.pill-outline svg { width: 1.05em; height: 1.05em; stroke: currentColor; fill: none; stroke-width: 2; }
.pill-outline:hover svg { transform: translateX(3px); transition: transform var(--t); }

/* -------------------------------------------------------------------------
   4. DESTACADOS — botón ver-todo centrado
   ------------------------------------------------------------------------- */
.see-all {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 5vw, 56px);
}
.see-all .btn svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; }

/* -------------------------------------------------------------------------
   5. CTA BAND — viales en esquinas + newsletter lavanda
   ------------------------------------------------------------------------- */
.home-cta .cta-inner h2 { max-width: 18ch; margin-inline: auto; }
.home-cta-vials img { position: absolute; }
.home-cta-vials .cv {
  filter: drop-shadow(0 26px 34px rgba(30, 30, 60, .28));
  animation: floatY 8s ease-in-out infinite;
  will-change: transform;
}
.home-cta-vials .cv-1 { width: 8%;  left: 4%;  top: 6%;    --rot: -14deg; animation-delay: 0s; }
.home-cta-vials .cv-2 { width: 9%;  right: 4%; bottom: 4%; --rot: 12deg;  animation-delay: -2.5s; }

.newsletter-copy h3 { color: var(--ink); font-size: 1.5rem; margin-bottom: .4em; }
.newsletter-copy p { color: var(--ink-soft); margin: 0; max-width: 42ch; }
.newsletter-copy .fine { font-size: .9rem; color: var(--muted); margin-top: .6em; }

/* -------------------------------------------------------------------------
   6. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* En una columna el panel va arriba; recompone viales para que respire.
     Se da más alto al panel y se bajan los viales para que NO se recorten
     las tapas contra el borde superior (overflow:hidden). */
  .home-hero .hero-panel { min-height: clamp(420px, 62vw, 520px); padding-top: 4%; }
  .home-hero .hero-metrics { margin-inline: auto; }
  .home-hero-vials .hv-1 { width: 40%; left: 6%;  bottom: 4%; }
  .home-hero-vials .hv-2 { width: 20%; left: 42%; top: 24%; }
  .home-hero-vials .hv-3 { width: 24%; left: 54%; top: 16%; }
  .home-hero-vials .hv-4 { width: 22%; right: 5%; top: 34%; }
  .home-hero-vials .hv-5 { display: none; }

  .guarantee-inner { grid-template-columns: 1fr; }
  .guarantee-band .badge-green { margin-left: 0; }
}

@media (max-width: 768px) {
  .home-hero .hero-metrics {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .guarantee-band .guarantee { justify-content: center; text-align: left; }
}

@media (max-width: 480px) {
  .home-hero .hero-metrics { flex-direction: row; flex-wrap: wrap; }
  .home-hero .hero-metrics .stat { flex: 1 1 40%; }
  .home-cta-vials .cv-1 { width: 16%; }
  .home-cta-vials .cv-2 { width: 18%; }

  /* Anula las anchuras genéricas de .float-vials img:nth-child (base.css) que,
     por mayor especificidad, agrandaban los viales del hero y los recortaban. */
  .home-hero .hero-panel { min-height: clamp(400px, 74vw, 480px); }
  .home-hero-vials img:nth-child(1) { width: 42%; left: 5%;  bottom: 5%; top: auto; }
  .home-hero-vials img:nth-child(2) { width: 21%; left: 43%; top: 26%; }
  .home-hero-vials img:nth-child(3) { width: 25%; left: 54%; top: 18%; }
  .home-hero-vials img:nth-child(4) { width: 23%; right: 4%; top: 36%; }
}


/* === pages/investigacion.css === */
/* =========================================================================
   css/pages/investigacion.css — específico de /investigacion
   Página editorial "Uso exclusivo en investigación" (look amino.club).
   Reutiliza tokens/clases de base.css (.feature-card, .float-badge,
   .cta-band, .tag-hplc, .pill…); aquí sólo lo propio de esta página.
   Mobile-first · breakpoints 480 / 768 / 900.
   ========================================================================= */

/* -------- Hero split: copy izq / panel lab der -------- */
.inv-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: 18px;
}
.inv-eyebrow { margin-bottom: 20px; }
.inv-h1 {
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.03;
  margin-bottom: 20px;
}
.inv-lead {
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  margin-bottom: 30px;
}
.inv-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Panel de la imagen de laboratorio (card gradiente con badge flotante) */
.inv-hero-panel {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--grad-panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: clamp(18px, 3vw, 30px);
  min-height: clamp(300px, 40vw, 460px);
  display: grid;
  place-items: center;
}
.inv-lab {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.inv-float-badge {
  top: auto;
  right: clamp(18px, 3vw, 30px);
  bottom: clamp(18px, 3vw, 30px);
}

/* -------- Aviso de uso exclusivo de laboratorio -------- */
.inv-notice-section { padding-top: 0; }
.inv-notice {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid rgba(245, 184, 65, .4);
  border-left: 4px solid var(--amber);
  background: rgba(245, 184, 65, .08);
  border-radius: var(--radius-card);
  padding: 24px 28px;
}
.inv-notice-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 184, 65, .18);
  color: #B45309;
}
.inv-notice-ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inv-notice-txt strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.inv-notice-txt p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.6;
}

/* -------- Feature grid: pill como CTA de línea -------- */
.inv-features .feature-card .pill {
  align-self: flex-start;
  margin-top: 4px;
}
.inv-features .feature-card .pill svg {
  width: 1.05em;
  height: 1.05em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform var(--t);
}
.inv-features .feature-card .pill:hover svg { transform: translateX(3px); }

/* -------- Biblioteca / valores + imagen lab -------- */
.inv-library-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.inv-library-media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--grad-panel);
}
.inv-library-media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.inv-library-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: var(--bg);
  box-shadow: var(--shadow-soft);
  padding: .5em 1em;
}
.inv-library-copy .eyebrow { display: block; margin-bottom: 12px; }
.inv-library-copy .h2 { margin-bottom: 16px; }
.inv-library-copy .lead { margin-bottom: 26px; }

.inv-pillars {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 30px;
}
.pillar {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pillar-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green);
}
.pillar-ic svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
}
.pillar-txt strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
}
.pillar-txt span {
  display: block;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.55;
  margin-top: 2px;
}
.inv-library-btn { align-self: flex-start; }

/* -------- CTA final -------- */
.inv-cta { text-align: center; }
.inv-cta .eyebrow { display: block; margin-bottom: 14px; }
.inv-cta-lead {
  max-width: 52ch;
  margin: 0 auto 30px;
  color: var(--ink-soft);
}
.inv-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* -------- Responsive -------- */
@media (min-width: 900px) {
  .inv-hero { grid-template-columns: 1.05fr 1fr; }
  .inv-hero-cta { justify-content: flex-start; }
  .inv-library-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .inv-notice { flex-direction: column; gap: 14px; padding: 22px 22px; }
}

@media (max-width: 480px) {
  .inv-hero-cta .btn,
  .inv-cta-actions .btn { width: 100%; }
  .inv-hero-panel { min-height: 260px; }
}


/* === pages/legal.css === */
/* ==========================================================================
   pages/legal.css — Páginas legales/soporte (envios, devoluciones, terminos,
   privacidad, aviso). Look amino.club: hero simple + prosa en tarjetas.
   Usa tokens/clases de base.css y _shell.css; añade solo lo propio.
   Se concatena DESPUÉS de base.css en dist/css/site.css.
   ========================================================================== */

/* --- HERO simple (gradiente lavanda, centrado a la izquierda) -------------- */
.legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-contact);
  padding-top: 22px;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.legal-hero .crumbs { margin-bottom: 26px; }
.legal-hero-in { max-width: 760px; }
.legal-eyebrow { margin-bottom: 12px; color: var(--green-ink); }
.legal-h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin-bottom: 16px;
}
.legal-lead { max-width: 56ch; margin-bottom: 26px; }

.legal-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.legal-meta {
  cursor: default;
  background: var(--bg);
  font-weight: 600;
  color: var(--ink);
}
.legal-meta:hover { transform: none; box-shadow: var(--shadow-soft); }
.legal-meta-ic { display: inline-flex; }
.legal-meta-ic svg {
  width: 1.05em; height: 1.05em;
  stroke: var(--green-ink); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.legal-updated { font-size: .86rem; color: var(--muted); }

/* --- Cuerpo: grid principal + aside ---------------------------------------- */
.legal-wrap { max-width: 1080px; }
.legal-body { padding-block: clamp(44px, 6vw, 80px); }

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* --- Tarjeta de prosa ------------------------------------------------------ */
.legal-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 4vw, 48px);
}

.legal-sec { scroll-margin-top: calc(var(--nav-h) + 20px); }
.legal-sec + .legal-sec {
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.legal-sec-h {
  display: flex;
  align-items: baseline;
  gap: .6em;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  color: var(--ink);
  margin-bottom: 14px;
}
.legal-sec-n {
  flex: none;
  font-size: .78em;
  font-weight: 700;
  color: var(--green-ink);
  letter-spacing: .02em;
}

.legal-p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 1em;
}
.legal-p:last-child { margin-bottom: 0; }
.legal-p a,
.legal-list a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-p a:hover,
.legal-list a:hover { color: var(--green-ink); }
.legal-p strong { color: var(--ink); font-weight: 700; }

.legal-list {
  margin: 0 0 1em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-list:last-child { margin-bottom: 0; }
.legal-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}

/* --- Bloque de contacto al pie de la tarjeta ------------------------------- */
.legal-contact {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 26px;
  border-radius: var(--radius-card);
  background: var(--grad-mint);
  border: 1px solid var(--line);
}
.legal-contact-ic {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--bg);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
}
.legal-contact-ic svg {
  width: 22px; height: 22px;
  stroke: var(--ink); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.legal-contact-txt { flex: 1; min-width: 200px; line-height: 1.5; }
.legal-contact-txt strong { display: block; color: var(--ink); font-size: 1.02rem; }
.legal-contact-txt span { font-size: .92rem; color: var(--ink-soft); }
.legal-contact-txt a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-contact-txt a:hover { color: var(--green-ink); }
.legal-contact-cta { flex: none; }

/* --- Aside: índice + "de un vistazo" (sticky) ------------------------------ */
.legal-side {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legal-toc {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
  box-shadow: var(--shadow-soft);
  padding: 22px 22px;
}
.legal-toc-t,
.legal-tldr-t {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.legal-toc ul { display: flex; flex-direction: column; }
.legal-toc li + li { border-top: 1px solid var(--line); }
.legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  font-size: .94rem;
  color: var(--ink-soft);
  transition: color var(--t);
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc-n {
  flex: none;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-ink);
}

.legal-tldr {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--lav);
  padding: 22px 22px;
}
.legal-tldr ul { display: flex; flex-direction: column; gap: 14px; }
.legal-tldr li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.legal-tldr-ic {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--bg);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
}
.legal-tldr-ic svg {
  width: 16px; height: 16px;
  stroke: var(--green-ink); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-side {
    position: static;
    order: -1;
    flex-direction: column;
  }
  .legal-tldr { order: 2; }
}

@media (max-width: 480px) {
  .legal-card { padding: 24px 20px; }
  .legal-contact { flex-direction: column; align-items: flex-start; padding: 20px; }
  .legal-contact-cta { width: 100%; justify-content: center; }
  .legal-hero-meta { gap: 10px; }
  .legal-sec-h { gap: .45em; }
}


/* === pages/membresia.css === */
/* ===========================================================================
   css/pages/membresia.css — CSS específico de la página Membresía
   Clon del look "Membership" de amino.club aplicado a VYAL. Usa tokens y
   clases de base.css (.section, .feature-grid, .cta-band, .pill, .btn…);
   aquí solo lo propio de esta página. Mobile-first (480/768/1024).
   =========================================================================== */

/* ---- (1) HERO centrado --------------------------------------------------- */
.mb-hero {
  background: var(--grad-hero);
  text-align: center;
}
.mb-hero-inner {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mb-hero .crumbs { margin-bottom: 26px; }

.mb-eyebrow {
  margin-bottom: 22px;
  gap: 10px;
  background: rgba(255, 255, 255, .7);
  border-color: transparent;
  color: var(--ink);
  font-weight: 500;
}

.mb-title {
  max-width: 16ch;
  margin-bottom: 22px;
}

.mb-lead {
  max-width: 60ch;
  margin-bottom: 34px;
  color: var(--ink-soft);
}

.mb-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ---- (2) BENEFICIOS INCLUIDOS ------------------------------------------- */
.mb-perks-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.mb-perks-copy h2 { margin: 10px 0 14px; }
.mb-perks-copy p {
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0;
}

.mb-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.mb-perk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.45;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  box-shadow: var(--shadow-soft);
}
.mb-perk-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
}
.mb-perk-ic svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
}

/* ---- (4) CÓMO FUNCIONA (3 pasos) ---------------------------------------- */
.mb-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.mb-step {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: transform var(--t), box-shadow var(--t);
}
.mb-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.mb-step-n {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green-ink);
  background: var(--mint);
  border-radius: 999px;
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: -.02em;
}
.mb-step h3 {
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.mb-step p {
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

/* ---- (5) CTA BAND -------------------------------------------------------- */
.mb-cta .cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.mb-cta .cta-inner h2 {
  max-width: 20ch;
  margin: 6px auto 26px;
}
.mb-cta-fine {
  font-size: .9rem;
  color: var(--muted);
  margin-top: 20px;
  max-width: 46ch;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (min-width: 768px) {
  .mb-perks { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .mb-perks-inner {
    grid-template-columns: minmax(280px, 0.9fr) 1.3fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
  }
  .mb-perks { grid-template-columns: 1fr; }
  .mb-steps { grid-template-columns: repeat(3, 1fr); }
}


/* === pages/producto.css === */
/* =========================================================================
   pages/producto.css — PDP (página de detalle de producto)
   Fidelidad amino.club: media pastel grande + panel de info a la derecha.
   Usa tokens/clases de base.css; solo añade lo propio de esta página.
   ========================================================================= */
.pdp { padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 96px); }
.pdp-in .crumbs { margin-bottom: clamp(20px, 3vw, 32px); }

.pdp-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* ---- MEDIA (izquierda): panel pastel grande con el vial ---- */
.pdp-media {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  padding: clamp(32px, 5vw, 64px);
  min-height: clamp(380px, 44vw, 560px);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.pdp-media::after {
  content: "";
  position: absolute;
  inset: auto -12% -22% -12%;
  height: 55%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 255, 255, .55), transparent 70%);
  pointer-events: none;
}
.pdp-media img {
  position: relative;
  z-index: 1;
  max-height: 460px;
  max-width: 74%;
  object-fit: contain;
  filter: drop-shadow(0 30px 44px rgba(30, 30, 60, .26));
  animation: pdpFloat 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes pdpFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .pdp-media img { animation: none; } }

/* Fondos pastel por categoría (mismo mapeo que .card-media) */
.pdp-media.cat-metabolismo                         { background: var(--blue); }
.pdp-media.cat-hormonal,
.pdp-media.cat-cognitivo,
.pdp-media.cat-sueno                               { background: var(--lav); }
.pdp-media.cat-longevidad,
.pdp-media.cat-sistemainmune                       { background: var(--mint); }
.pdp-media.cat-recuperacion,
.pdp-media.cat-estetica,
.pdp-media.cat-sexual                              { background: var(--pink); }
.pdp-media.cat-bioreguladores                      { background: var(--beige); }
.pdp-media.cat-suministros,
.pdp-media.cat-otros                               { background: var(--bg-soft); }

/* Badge flotante de pureza (arriba-izq del panel) */
.pdp-purity {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em .9em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  color: var(--green-ink);
  font-size: .8rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.pdp-purity svg { width: 1.05em; height: 1.05em; stroke: var(--green); fill: none; stroke-width: 2.4; }

/* ---- INFO (derecha) ---- */
.pdp-info { padding-top: clamp(0px, 1vw, 8px); }
.pdp-tag {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.pdp-name { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.05; }
.pdp-dose { color: var(--muted); font-size: 1rem; margin: 10px 0 18px; }

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: .4em;
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
}
.pdp-price small { font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.pdp-desc { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; margin: 20px 0 24px; }

/* ---- Variantes de dosis (pills enlazadas a productos hermanos) ---- */
.pdp-variants { margin: 0 0 26px; }
.pdp-variants-label {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.pdp-variants-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-variant {
  display: inline-flex;
  align-items: center;
  padding: .6em 1.15em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t), border-color var(--t), color var(--t), box-shadow var(--t), background var(--t);
}
a.pdp-variant:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.pdp-variant.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  cursor: default;
}

/* ---- Specs con checks verdes ---- */
.pdp-specs { display: grid; gap: 0; margin: 0 0 26px; }
.pdp-specs li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.5;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.pdp-specs li:first-child { border-top: 1px solid var(--line); }
.pdp-specs b { color: var(--ink); font-weight: 600; }
.pdp-spec-check {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green);
  display: grid;
  place-items: center;
}
.pdp-spec-check svg { width: .9em; height: .9em; stroke: var(--green); fill: none; stroke-width: 3; }

/* ---- Card COA (certificado verificado) ---- */
.pdp-coa {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  margin-bottom: 22px;
  background: var(--mint);
  color: var(--green-ink);
  transition: transform var(--t), box-shadow var(--t);
}
.pdp-coa:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.pdp-coa-ic {
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
}
.pdp-coa-ic svg { width: 1.05em; height: 1.05em; stroke: #fff; fill: none; stroke-width: 3; }
.pdp-coa-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.pdp-coa-txt strong { font-size: .95rem; font-weight: 700; color: var(--green-ink); }
.pdp-coa-txt small { font-size: .82rem; color: #3f8a5c; font-weight: 500; }
.pdp-coa-arrow { margin-left: auto; color: var(--green-ink); flex: none; }
.pdp-coa-arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---- CTA ---- */
.pdp-add { margin-top: 4px; }

/* ---- Trust row bajo el CTA ---- */
.pdp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 18px 0 0;
}
.pdp-trust li {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .84rem;
  color: var(--muted);
  font-weight: 500;
}
.pdp-trust svg { width: 1.1em; height: 1.1em; stroke: var(--muted); fill: none; stroke-width: 1.8; }

.pdp-fine {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---- Relacionados ---- */
.pdp-related { margin-top: clamp(56px, 8vw, 96px); }
.pdp-related h2 { margin-bottom: 28px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 28px; }
  .pdp-media { min-height: 340px; }
  .pdp-media img { max-width: 60%; }
}
@media (max-width: 480px) {
  .pdp-media { padding: 28px; min-height: 300px; }
  .pdp-media img { max-width: 72%; }
  .pdp-price { font-size: 1.7rem; }
  .pdp-trust { gap: 8px 16px; }
}


/* === pages/tienda.css === */
/* =========================================================================
   VYAL — tienda.css  (página "Todos los productos", clon amino.club)
   Solo lo específico de la tienda. Base (.shop-head/.search/.sort/.cat-chips/
   .product-grid/.card) vive en base.css — aquí no se duplica.
   ========================================================================= */

/* La sección de tienda arranca más arriba que el .section por defecto
   (título pegado a la nav, como en la captura). */
.shop.section { padding-top: clamp(28px, 4vw, 48px); }

/* Migas de pan sobre el H1 */
.shop .crumbs {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.shop .crumbs a { color: var(--muted); }
.shop .crumbs a:hover { color: var(--ink); }

/* La barra de controles va justo bajo el header, sin borde superior */
.shop .shop-controls { align-items: center; }

/* Chips de categoría: contador en pill negra/gris según estado.
   Los chips son <button>; heredan .pill de base.css. */
.cat-chips .pill em {
  font-style: normal;
  font-weight: 700;
  font-size: .78em;
  padding: .12em .5em;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--muted);
  line-height: 1;
  transition: background var(--t), color var(--t);
}
.cat-chips .pill:hover em { background: #eceef3; color: var(--ink); }
.cat-chips .pill.on em {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* Card oculta por el filtro/búsqueda: fuera del flujo del grid. */
.product-grid .shop-card.hidden { display: none !important; }

/* Estado vacío (sin resultados) */
.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: clamp(40px, 8vw, 80px) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 1.02rem;
}
.shop-empty.hidden { display: none; }

/* Conteo de resultados bajo el grid */
.shop-count {
  margin-top: 28px;
  font-size: .9rem;
  text-align: center;
}

/* Refuerzo responsive propio (base.css ya colapsa a 1 col controls en <=768). */
@media (max-width: 768px) {
  .shop .shop-controls { gap: 14px; }
  .shop .sort { justify-content: space-between; width: 100%; }
  .shop .sort .select { flex: 1; }
}

@media (max-width: 480px) {
  .shop.section { padding-top: 22px; }
  .cat-chips { gap: 10px; flex-wrap: wrap; }
  .cat-chips .pill { font-size: .85rem; padding: .55em 1em; }
}


/* === pages/zz-premium.css === */
/* ============================================================================
   zz-premium.css — Clon FIEL de amino.club para VYAL (carga al final = gana).
   Objetivo: replicar amino.club de verdad — tipografía Anek Telugu, hero con
   producto dominante sobre gradiente limpio, y CARDS con fondo de color rico
   (pared+piso) + producto grande "parado" con sombra, full-bleed (no pastel plano).
   ========================================================================== */

/* --- Reveal al scroll (lo activa vyal.js) --------------------------------- */
.pre-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.pre-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pre-reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* --- Tipografía amino (Anek Telugu): titulares grandes y apretados -------- */
h1, h2, h3, .hero-title, .section-head h2 { letter-spacing: -.02em; }
.home-hero .hero-title { font-size: clamp(3rem, 6.6vw, 6rem); font-weight: 700; line-height: .96; letter-spacing: -.03em; }
.home-hero .hero-title em { font-style: normal; }         /* amino no usa itálica */
.home-hero .eyebrow { letter-spacing: .2em; }
.home-hero .hero-sub { font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: var(--ink-soft); max-width: 30ch; }
.section-head h2, .guarantee-copy h2, .cta-inner h2 { font-weight: 700; }

/* --- HERO full-bleed 50/50 (panel pastel a todo el ancho, sin wrap) -------- */
.home-hero { padding: 0; }
.home-hero .hero-inner { max-width: none; width: 100%; padding: 0; margin: 0; gap: 0; }
.home-hero .hero-copy {
  max-width: 640px; margin-left: 0; width: 100%;
  padding: clamp(40px, 6vw, 92px) clamp(24px, 4vw, 56px) clamp(40px, 6vw, 92px) clamp(30px, 7vw, 116px);
}

/* --- HERO: composición de productos premium (estilo amino) ---------------- */
.home-hero .hero-panel {
  background: linear-gradient(145deg, #ece9fb 0%, #e7ecfb 52%, #e4f0f7 100%);
  padding: 0; overflow: hidden;
}
.home-hero .hero-panel::before { display: none; }          /* fuera el aurora */
.home-hero-vials::after {
  content: ""; position: absolute; left: 4%; right: 6%; bottom: 6%; height: 6%;
  background: radial-gradient(60% 100% at 40% 50%, rgba(40,40,80,.20), transparent 72%);
  filter: blur(8px); z-index: 0;
}
.home-hero-vials .hv { filter: drop-shadow(0 20px 26px rgba(30,30,60,.28)); }
/* Viales notablemente más chicos, agrupados al centro del panel */
/* especificidad img.hv-N para ganar a .float-vials img:nth-child() de base.css */
.home-hero-vials img.hv-1 { width: 18.4%; left: 28%; bottom: 29%; --rot: -8deg;  z-index: 5; }
.home-hero-vials img.hv-2 { width: 11%;   left: 46%; top: 29%;    --rot: 7deg;   z-index: 3; }
.home-hero-vials img.hv-3 { width: 13.8%; left: 47%; top: 44%;    --rot: 14deg;  z-index: 4; }
.home-hero-vials img.hv-4 { width: 11%;   right: 28%; top: 31%;   --rot: 20deg;  z-index: 2; }
.home-hero-vials img.hv-5 { width: 8%;    right: 32%; bottom: 31%; --rot: -3deg;  z-index: 1; }

/* --- CARDS DE PRODUCTO: estilo amino (fondo rico + producto grande) ------- */
.card { border-radius: var(--radius-card, 22px); overflow: hidden; box-shadow: 0 12px 30px -22px rgba(16,20,40,.30); transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease; background: #fff; }
.card:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -30px rgba(16,20,40,.42); }
.card-media {
  aspect-ratio: 1 / 1;
  border-radius: 0; padding: 0;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; position: relative;
}
.card-media img {
  width: auto; height: 92%; max-width: 84%;
  object-fit: contain;
  filter: drop-shadow(0 16px 14px rgba(28,22,44,.34));
  margin-bottom: -1px;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-media img { transform: translateY(-6px) scale(1.045); }

/* Fondos ricos de dos tonos (pared arriba, piso abajo ~62%) — por categoría */
.card-media.cat-metabolismo, .card-media.metabolismo, .card-media.blue        { background: linear-gradient(180deg,#d8e3f0 0 61%,#b4cce0 61% 100%); }
.card-media.cat-hormonal, .card-media.hormonal,
.card-media.cat-cognitivo, .card-media.cognitivo,
.card-media.cat-sueno, .card-media.sueno, .card-media.lav                      { background: linear-gradient(180deg,#e2def4 0 61%,#cbc4e7 61% 100%); }
.card-media.cat-longevidad, .card-media.longevidad,
.card-media.cat-sistemainmune, .card-media.sistemainmune, .card-media.mint     { background: linear-gradient(180deg,#dbeee1 0 61%,#bfe0c9 61% 100%); }
.card-media.cat-recuperacion, .card-media.recuperacion,
.card-media.cat-estetica, .card-media.estetica,
.card-media.cat-sexual, .card-media.sexual, .card-media.pink                   { background: linear-gradient(180deg,#f0dede 0 61%,#e0c0c0 61% 100%); }
.card-media.cat-bioreguladores, .card-media.bioreguladores, .card-media.beige  { background: linear-gradient(180deg,#e8dfd4 0 61%,#d3c1ab 61% 100%); }
.card-media.cat-suministros, .card-media.suministros,
.card-media.cat-otros, .card-media.otros, .card-media.bg-soft                  { background: linear-gradient(180deg,#e4e6ea 0 61%,#ccd1d8 61% 100%); }

/* Cuerpo de la card: nombre + precio + subtítulo + pill negra full-width */
.card-body, .card-info { padding: 20px 20px 22px; }
.card-name { font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
.card-sub { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.card-price { font-weight: 700; }
.card-cta, .card .btn-solid { width: 100%; border-radius: 999px; justify-content: center; font-weight: 600; margin-top: 14px; }

/* --- RECUADRO 4 SECCIONES con péptidos VOLTEADOS (estilo amino) ----------- */
.quad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.quad-card {
  display: grid; grid-template-columns: 44% 1fr; align-items: stretch;
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 14px 34px -24px rgba(16,20,40,.30);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.quad-card:hover { transform: translateY(-6px); box-shadow: 0 32px 58px -30px rgba(16,20,40,.42); }
.quad-card__media {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; min-height: 216px;
}
.quad-card:nth-child(1) .quad-card__media { background: radial-gradient(130% 130% at 38% 22%, #e6ecfb, #cfdcf1); }
.quad-card:nth-child(2) .quad-card__media { background: radial-gradient(130% 130% at 38% 22%, #eae7fa, #d7cff0); }
.quad-card:nth-child(3) .quad-card__media { background: radial-gradient(130% 130% at 38% 22%, #f2e5e8, #ecd0d6); }
.quad-card:nth-child(4) .quad-card__media { background: radial-gradient(130% 130% at 38% 22%, #e2eee6, #c9e5d3); }
.quad-vial {
  height: 122%; width: auto;
  transform: rotate(-27deg) translateY(3%);
  filter: drop-shadow(0 24px 26px rgba(30,25,60,.36));
}
.quad-card:hover .quad-vial { transform: rotate(-24deg) translateY(-2%) scale(1.03); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.quad-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--green-ink,#15803D); font-weight: 600; font-size: .8rem;
  padding: 5px 11px; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.28);
}
.quad-badge svg { width: 13px; height: 13px; color: var(--green,#22C55E); }
.quad-card__body { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; }
.quad-card__body h3 { font-size: 1.24rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.quad-card__body p { color: var(--ink-soft,#3A3D45); font-size: .96rem; line-height: 1.55; }
@media (max-width: 860px){ .quad-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px){ .quad-card { grid-template-columns: 1fr; } .quad-card__media { min-height: 180px; } .quad-vial { height: 200px; } }

/* --- GARANTÍA: panel pastel FULL-BLEED sin esquinas (estilo amino) --------- */
.guarantee-band { padding: 0 !important; }
.guarantee-band .guarantee-inner {
  max-width: none; width: 100%; padding: 0; gap: 0;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
.guarantee-visual {
  position: relative; border-radius: 0; overflow: hidden;   /* sin esquinas */
  background: linear-gradient(150deg, #efe9fb 0%, #e6ecfb 54%, #e6f1f4 100%);
  min-height: clamp(420px, 42vw, 560px);
}
.guarantee-visual::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 8%; height: 8%;
  background: radial-gradient(60% 100% at 40% 50%, rgba(40,40,80,.16), transparent 72%); filter: blur(8px);
}
.guarantee-visual .gv { position: absolute; filter: drop-shadow(0 26px 30px rgba(30,25,60,.30)); }
.guarantee-visual .gv-1 { height: 84%; left: 8%;  bottom: -6%; transform: rotate(-6deg); z-index: 2; }
.guarantee-visual .gv-2 { height: 52%; right: 12%; top: 12%;    transform: rotate(9deg);  z-index: 1; }
.guarantee-copy { padding: clamp(40px, 6vw, 88px) clamp(28px, 6vw, 96px); align-self: center; }
.guarantee-copy h2 { font-weight: 700; margin-bottom: 12px; }
@media (max-width: 820px){
  .guarantee-band .guarantee-inner { grid-template-columns: 1fr; }
  .guarantee-visual { min-height: clamp(320px, 64vw, 460px); }
}
.guarantee-badge {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 24px;
  background: #fff; border: 1px solid var(--line, #E9EAEE); border-radius: 16px; padding: 13px 18px;
  box-shadow: 0 12px 30px -20px rgba(16,20,40,.35); text-decoration: none; color: inherit;
  transition: transform .25s, box-shadow .25s;
}
.guarantee-badge:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -24px rgba(16,20,40,.4); }
.guarantee-badge .guarantee-ic {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--mint, #EAF7EE); color: var(--green-ink, #15803D); flex: none;
}
.guarantee-badge .guarantee-ic svg { width: 22px; height: 22px; }
.guarantee-badge__txt { display: flex; flex-direction: column; line-height: 1.2; }
.guarantee-badge__txt strong { font-weight: 700; }
.guarantee-badge__txt small { color: var(--muted, #6B7280); font-size: .82rem; margin-top: 2px; }
.guarantee-badge .badge-green { margin-left: 6px; white-space: nowrap; }
@media (max-width: 820px){
  .guarantee-badge { flex-wrap: wrap; }
}

/* --- Franja de confianza (bajo el hero) ----------------------------------- */
.trust-strip { background: linear-gradient(90deg, var(--lav,#ECEBFB), var(--mint,#EAF7EE)); border-block: 1px solid rgba(16,20,40,.06); }
.trust-strip-inner { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; padding: 16px 0; text-align: center; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: .93rem; font-weight: 600; color: var(--ink-soft,#3A3D45); white-space: nowrap; }
.trust-item .trust-ic { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 999px; background: var(--green,#22C55E); color: #fff; }
.trust-item .trust-ic svg { width: 13px; height: 13px; }
@media (max-width: 640px){ .trust-strip-inner{ gap:10px 20px; } .trust-item{ font-size:.82rem; } }

/* --- Microinteracciones + accesibilidad ----------------------------------- */
.btn { transition: transform .2s ease, box-shadow .25s ease, background-color .2s, color .2s; }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(10,10,12,.55); }
.btn-outline:hover { transform: translateY(-2px); }
.nav-links a { position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover::after { transform: scaleX(1); }
:where(a,button,input,select):focus-visible { outline: 2px solid var(--green,#22C55E); outline-offset: 2px; border-radius: 6px; }