/* ============ main.css ============ */
/* =============================================================
   CALMÁ — Design System v4
   Pure black · Off-white ink · Copper CTA accent
   Typography: Cormorant Garamond (display) · DM Sans (UI)
   ============================================================= */

:root {
  /* Brand accent */
  --copper:      #f4f3ef;
  --copper-soft: #ffffff;
  --copper-deep: #cfcac0;
  --copper-glow: rgba(255,255,255, .35);

  /* ── Wallpaper palette — "Liquid Midnight · Glass" (2026-05-30) ──
     Deep violet ambience layered over deep black. Used by the reactive
     wallpaper engine and the new interactive glow / sheen accents. */
  --deep-black:  #050505;   /* negro profundo */
  --amethyst:    #7A5CFF;   /* violeta amatista */
  --magenta:     #D16BFF;   /* magenta suave */
  --smoke:       #A8A8A8;   /* gris humo */
  --off-white:   #F4F4F4;   /* blanco roto */
  --amethyst-glow: rgba(122, 92, 255, .45);
  --magenta-glow:  rgba(209, 107, 255, .38);

  /* Surfaces — deep black base */
  --bg:          #050505;
  --bg-1:        #060606;
  --bg-2:        #0c0c0d;
  --bg-3:        #141416;
  --bg-elev:     #1a1a1c;

  /* Aliases kept for legacy class compatibility — all resolve dark now */
  --navy:        #0e0e10;
  --navy-deep:   #000000;
  --navy-soft:   #18181a;
  --bone:        #f4f3ef;
  --cream:       var(--bg-1);
  --cream-2:     var(--bg-2);

  /* Ink */
  --ink:         #f4f3ef;
  --ink-dim:     rgba(244, 243, 239, 0.66);
  --ink-faint:   rgba(244, 243, 239, 0.40);
  --ink-ghost:   rgba(244, 243, 239, 0.14);

  --line:        rgba(255, 255, 255, 0.08);
  --line-mid:    rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.28);

  --accent:      var(--ink);

  /* Dark-context tokens (kept identical to base — site is dark everywhere) */
  --dk-bg:       var(--bg);
  --dk-bg-1:     var(--bg-1);
  --dk-bg-2:     var(--bg-2);
  --dk-ink:      var(--ink);
  --dk-ink-dim:  var(--ink-dim);
  --dk-ink-faint:var(--ink-faint);
  --dk-line:     var(--line);
  --dk-line-mid: var(--line-mid);
  --dk-line-strong: var(--line-strong);

  /* Glass */
  --dk-glass-bg:    rgba(20, 20, 22, 0.55);
  --dk-glass-bg-hi: rgba(34, 34, 36, 0.78);
  --dk-glass-edge:  rgba(255, 255, 255, 0.30);
  --glass-bg:       var(--dk-glass-bg);
  --glass-bg-hi:    var(--dk-glass-bg-hi);
  --glass-blur:     blur(24px) saturate(180%);
  --glass-blur-soft: blur(14px) saturate(160%);

  /* Type — refreshed Apple-modern minimal system
     - Instrument Serif: display headlines (replaces wedding-y Cormorant)
     - Inter: body / UI (industry standard, like SF Pro)
     - JetBrains Mono: technical / numeric data */
  --serif:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: var(--serif);
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Spacing — mobile-first (scaled up at breakpoints in responsive.css) */
  --pad-x:      clamp(1.125rem, 4.5vw, 3rem);
  --section-y:  clamp(3.75rem, 10vw, 10rem);
  --nav-h:      64px;
  --content-max: 1280px;
  --content-narrow: 880px;
  --stack-gap:  clamp(1rem, 3vw, 1.5rem);
  --block-gap:  clamp(1.5rem, 4vw, 2.75rem);

  /* Breakpoints (reference — use same values in @media) */
  /* sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */

  /* Radii */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-soft:   0 4px 20px rgba(0,0,0,.32);
  --shadow-mid:    0 14px 40px rgba(0,0,0,.40);
  --shadow-strong: 0 24px 60px rgba(0,0,0,.55);
  --shadow-copper: 0 6px 24px rgba(255,255,255,.14);
}

/* =============================================================
   Reset
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--sans);
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  min-width: 320px;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { object-fit: contain; }
video { width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 999px; font-weight: 500; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   Background ambience
   ============================================================= */
.bg-stars {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at bottom, rgba(255,255,255,0.025) 0%, transparent 60%),
    #000;
  pointer-events: none;
  z-index: -2;
}
.bg-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .035;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* Global carbon-fiber particles canvas — fixed full-viewport, very back */
.bg-particles {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .bg-particles { opacity: 0.4; }
}

/* =============================================================
   Nav — glass on black
   ============================================================= */
.nav {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(calc(100% - var(--pad-x) * 2), 1200px);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  min-width: 0;
  border-radius: var(--r-pill);
  background: rgba(12, 12, 13, 0.62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-mid);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.5);
  transition: transform .4s var(--ease-out), opacity .4s var(--ease-out);
}
.nav.is-hidden { transform: translate(-50%, -110%); }
.nav-brand {
  display: flex;
  align-items: center;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 0;
}
.nav-brand img {
  display: block;
  height: clamp(22px, 5vw, 28px);
  width: auto;
  max-width: min(140px, 42vw);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.04));
}
.nav-links {
  display: flex; gap: 2px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  display: inline-flex; align-items: center;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-dim);
  border-radius: var(--r-pill);
  transition: color .25s, background .25s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav-links a.is-active { color: var(--ink); }
.nav-actions {
  display: flex; align-items: center; gap: 6px;
}
.nav-cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .25s, transform .2s var(--ease-bounce);
}
.nav-cart-btn:hover { background: rgba(255,255,255,.10); transform: scale(1.05); border-color: var(--line-strong); }
.nav-cart-btn svg { width: 16px; height: 16px; }
.nav-cart-count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 10px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
  transition: transform .3s var(--ease-bounce);
}
.nav-cart-count.is-visible { transform: scale(1); }
.nav > nav { display: none; }
.nav-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }

.mobile-menu {
  position: fixed;
  top: calc(var(--nav-h) + max(10px, env(safe-area-inset-top)) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: min(calc(100% - var(--pad-x) * 2), 380px);
  max-width: 100%;
  padding: 14px;
  background: rgba(20,20,22,0.9);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-strong);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .3s var(--ease-out);
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mobile-menu a {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}
.mobile-menu a:hover { background: rgba(255,255,255,.04); color: var(--ink); }

/* =============================================================
   Buttons — copper primary
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .005em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  white-space: normal;
  text-align: center;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  hyphens: auto;
}
.btn > span { text-wrap: balance; }
.btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.btn:hover svg { transform: translate(2px, -2px); }

/* Primary = off-white on black, premium minimal */
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary:hover {
  background: #fff;
  color: #17130d;
  transform: scale(1.02);
  box-shadow: 0 12px 38px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-primary:active { transform: scale(1.00); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  transform: scale(1.02);
}

.btn-glass {
  background: rgba(255,255,255,.06);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border-color: var(--line-mid);
  color: var(--ink);
}
.btn-glass:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--line-strong);
  transform: scale(1.02);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-dim);
  border-color: var(--line-mid);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); background: rgba(255,255,255,.03); }

.btn-light {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 4px 20px rgba(255,255,255,.10);
}
.btn-light:hover { background: #fff; color: #17130d; transform: translateY(-1px); }

.btn-lg { padding: 18px 30px; font-size: 15px; min-height: 52px; }
.btn-sm { padding: 11px 18px; font-size: 13px; min-height: 40px; }
.btn-full { width: 100%; }
.btn-icon { width: 40px; height: 40px; padding: 0; }

/* Tap targets — mobile base */
.btn { min-height: 48px; padding: 14px 20px; }
.btn-lg { min-height: 52px; padding: 16px 24px; font-size: clamp(0.875rem, 0.5vw + 0.8rem, 0.9375rem); }

/* =============================================================
   Typography
   ============================================================= */
.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 20px;
}
.kicker.on-dark { color: var(--ink-dim); }

.h-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.4vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
.h-display em {
  font-style: normal;
  color: var(--ink-dim);
  font-weight: 300;
  letter-spacing: -0.025em;
}
.h-section {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
.h-section em {
  font-style: normal;
  color: var(--ink-dim);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-dim);
  max-width: 60ch;
  line-height: 1.6;
  text-wrap: pretty;
}

/* =============================================================
   Layout
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  min-width: 0;
}
.container-sm { max-width: var(--content-narrow); }
.container-lg { max-width: 1440px; }

/* Fluid grid helpers */
.grid-auto {
  display: grid;
  gap: var(--stack-gap);
  grid-template-columns: 1fr;
}
.stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--stack-gap);
  min-width: 0;
}
.stack--center { align-items: center; text-align: center; }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section-head {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-inline: 0;
  max-width: 40rem;
  margin-inline: auto;
}
.section-head .h-section,
.section-head .h-display {
  margin-inline: auto;
}
.section-head .lede {
  margin-inline: auto;
  margin-top: clamp(0.875rem, 2.5vw, 1.25rem);
}

/* =============================================================
   Cards — dark glass on black
   ============================================================= */
.card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-soft);
  padding: 32px;
  transition: border-color .3s, transform .4s var(--ease-out), box-shadow .3s, background .3s;
}
.card:hover {
  border-color: var(--line-mid);
  background: var(--glass-bg-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-mid);
}

/* =============================================================
   Image placeholders — hairline dashed on dark fill
   ============================================================= */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--r-md);
  background: rgba(8, 8, 10, 0.85);
  color: rgba(244, 243, 239, 0.92);
  font-family: var(--sans);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .005em;
  overflow: hidden;
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.025), transparent 60%);
  pointer-events: none;
}
.ph.ph-light {
  background: rgba(20, 20, 22, 0.55);
  color: var(--ink);
}
.ph-text {
  max-width: 28ch;
  position: relative;
  z-index: 1;
}
.ph-text strong {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink-dim);
  opacity: .9;
}

/* =============================================================
   Reveal animation
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* =============================================================
   Footer
   ============================================================= */
.footer {
  background: var(--bg-1);
  color: var(--ink-dim);
  margin-top: var(--section-y);
  padding-block: 80px 36px;
  font-size: 13px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.footer-brand img {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 18px;
}
.footer-brand p { max-width: 30ch; line-height: 1.55; color: var(--ink-dim); }
.footer-col h4 {
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--ink-dim); transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-faint);
  gap: 20px;
  flex-wrap: wrap;
}
.footer-pay {
  display: flex; gap: 14px; align-items: center;
}
.pay-logo {
  height: 22px;
  width: auto;
  color: var(--ink-dim);
  transition: color .2s, opacity .2s;
  opacity: .85;
}
.pay-logo:hover { color: var(--ink); opacity: 1; }
.footer-cert { display: inline-flex; align-items: center; }
.footer-cert img { height: 50px; width: auto; display: block; }

/* ============ NEWSLETTER (Loop-style) ============ */
.newsletter-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 40px);
  max-width: var(--content-max, 1100px);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 24px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,.04);
}
.newsletter-copy { flex: 1 1 280px; }
.newsletter-title {
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: -.02em;
  margin: 8px 0 8px;
  color: var(--ink);
}
.newsletter-copy p { color: var(--ink-dim); font-size: 14px; line-height: 1.55; max-width: 46ch; margin: 0; }
.newsletter-form { flex: 1 1 320px; }
.newsletter-field { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-field input {
  flex: 1 1 200px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-mid, rgba(0,0,0,.18));
  background: var(--bg-elev, #fff);
  color: var(--ink);
  font-size: 15px;
}
.newsletter-field input::placeholder { color: var(--ink-faint); }
.newsletter-field input:focus { outline: none; border-color: var(--copper); }
.newsletter-field .btn { min-height: 52px; white-space: nowrap; }
.newsletter-msg { margin: 12px 0 0; font-size: 13px; }
.newsletter-msg.is-ok { color: #2e7d4f; }
.newsletter-msg.is-err { color: #b3402e; }

/* ============ FOOTER NEWSLETTER (Loop-style, dentro del footer) ============ */
.footer-news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 36px;
}
.footer-news-copy { flex: 1 1 300px; }
.footer-news-copy h3 {
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 5px;
}
.footer-news-copy p { color: rgba(255,255,255,.58); font-size: 13.5px; margin: 0; line-height: 1.5; }
.footer-news-form { flex: 0 1 400px; display: flex; align-items: stretch; position: relative; }
.footer-news-form input {
  flex: 1;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-right: none;
  border-radius: 999px 0 0 999px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 15px;
}
.footer-news-form input::placeholder { color: rgba(255,255,255,.45); }
.footer-news-form input:focus { outline: none; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.footer-news-form button {
  width: 58px;
  min-height: 50px;
  border: none;
  border-radius: 0 999px 999px 0;
  background: #fff;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.footer-news-form button:hover { background: var(--copper, #f4f3ef); color: #0a0a0a; }
.footer-news-form button svg { width: 19px; height: 19px; }
.footer-news-msg { position: absolute; top: calc(100% + 6px); left: 6px; font-size: 12px; margin: 0; }
.footer-news-msg.is-ok { color: #7ee0a0; }
.footer-news-msg.is-err { color: #ff9a8a; }
@media (max-width: 640px) {
  .footer-news { flex-direction: column; align-items: stretch; gap: 16px; }
  .footer-news-form { flex: 1 1 auto; }
}
/* Medios de pago a color (chips blancos) */
.footer-v2 .footer-pay { gap: 10px; }
.footer-v2 .footer-pay .pay-logo { height: 26px; width: auto; opacity: 1; color: inherit; }
.pay-mark {
  height: 24px; padding: 0 9px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-mid);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-dim);
  font-family: var(--sans);
}
/* Footer columns: responsive.css */

/* =============================================================
   Cart Drawer
   ============================================================= */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(440px, 100vw);
  height: 100vh;
  background: var(--bg-1);
  border-left: 1px solid var(--line-mid);
  z-index: 200;
  transform: translateX(110%);
  transition: transform .45s var(--ease-out);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 80px rgba(0,0,0,.6);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.cart-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
.cart-head h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: .01em; color: var(--ink); }
.cart-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  color: var(--ink);
  transition: background .2s;
}
.cart-close:hover { background: rgba(255,255,255,.12); }
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px;
}
.cart-empty {
  text-align: center;
  padding: 48px 0;
}
.cart-empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-empty p { color: var(--ink-dim); margin-bottom: 18px; }
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-item-img {
  width: 72px; height: 72px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
}
.cart-item-img img { width: 80%; height: 80%; object-fit: contain; }
.cart-item-img.ph-mini::before { content: "CA"; letter-spacing: .04em; }
.cart-item-info { min-width: 0; }
.cart-item-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; color: var(--ink); }
.cart-item-meta { font-size: 12px; color: var(--ink-faint); }
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  border: 1px solid var(--line);
}
.cart-item-qty button {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--ink-dim);
  transition: background .2s, color .2s;
}
.cart-item-qty button:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.cart-item-qty span { min-width: 18px; text-align: center; font-size: 13px; }
.cart-item-price {
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cart-item-remove {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart-item-remove:hover { color: var(--ink); }

.cart-foot {
  padding: 22px 26px 26px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  margin-top: 8px;
  margin-bottom: 18px;
  border-top: 1px solid var(--line);
}
.cart-total-label { font-size: 13px; color: var(--ink-dim); }
.cart-total-value {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--ink);
}
.cart-shipping-hint {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =============================================================
   Toast
   ============================================================= */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  padding: 14px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  z-index: 300;
  transition: transform .4s var(--ease-bounce);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
}
.toast.is-visible { transform: translateX(-50%) translateY(0); }
.toast svg { width: 14px; height: 14px; color: var(--ink); }

/* ============ home.css ============ */
/* =============================================================
   CALMÁ — Home page styles · BLACK PALETTE
   ============================================================= */

/* ========== HERO — floating product, premium dark ========== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--ink);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1100px 700px at 50% 55%, rgba(255,255,255,.045), transparent 65%),
    radial-gradient(ellipse 800px 500px at 50% 100%, rgba(255,255,255,.02), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  perspective: 1400px;
  min-width: 0;
}

/* Huge wordmark image */
.hero-wordmark {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  filter: drop-shadow(0 4px 60px rgba(255,255,255,.05));
}
.hero-wordmark img {
  height: auto;
  display: block;
}
.hero-tagline {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-top: clamp(0.5rem, 2vw, 0.875rem);
  line-height: 1.1;
}
.hero-sub {
  margin-top: clamp(0.5rem, 2vw, 0.75rem);
  color: var(--ink-faint);
  font-weight: 400;
  margin-inline: auto;
  text-wrap: pretty;
  letter-spacing: .005em;
  line-height: 1.55;
}

/* ============ SINGLE EARPLUG — 3D PUSH tilt ============
   Cursor at top → top of product tilts back (away from viewer).
   Cursor below center → bottom goes back, top comes forward.
   Same on left/right. JS sets `transform: perspective() rotateX rotateY`. */
.hero-product {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
  will-change: transform;
  cursor: grab;
  z-index: 4;
  max-width: 100%;
}
.hero-product:active { cursor: grabbing; }
@media (hover: none) {
  .hero-product { cursor: default; }
}
.hero-product-glow {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  animation: heroglow 8s ease-in-out infinite;
}
@keyframes heroglow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.hero-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.9))
    drop-shadow(0 12px 18px rgba(0,0,0,0.6));
  animation: hero-float 6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes hero-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
.hero-product-shadow {
  position: absolute;
  left: 50%; bottom: -2%;
  transform: translateX(-50%);
  width: 60%;
  height: 30px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 80%);
  filter: blur(18px);
  pointer-events: none;
  animation: hero-shadow 6s ease-in-out infinite;
}
@keyframes hero-shadow {
  0%, 100% { opacity: 0.9; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.65; transform: translateX(-50%) scale(0.85); }
}

/* ============ LIQUID-GLASS LABELS — floating row below product ============ */
.liquid-labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
  width: 100%;
  margin: 6px auto 0;
  list-style: none;
  padding: 0;
}
.liquid-labels li { display: inline-flex; }
.glass-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 2vw, 0.625rem) clamp(0.75rem, 2.5vw, 1.125rem);
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.6875rem, 2vw, 0.78125rem);
  letter-spacing: .02em;
  color: var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.42);
  max-width: 100%;
  text-align: center;
  line-height: 1.3;
  animation: chip-float 6.5s ease-in-out infinite;
  will-change: transform;
}
.liquid-labels li:nth-child(1) .glass-chip { animation-delay: -.4s; }
.liquid-labels li:nth-child(2) .glass-chip { animation-delay: -1.8s; }
.liquid-labels li:nth-child(3) .glass-chip { animation-delay: -3.2s; }
.liquid-labels li:nth-child(4) .glass-chip { animation-delay: -4.6s; }
@keyframes chip-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* Legacy hero shapes — hidden */
.product-stage, .feature-strip, .hotspot,
.earplugs-grid, .earplug { display: none !important; }

.hero-actions {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* Specs row — column/grid layout in responsive.css */
.specs {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: rgba(20,20,22,.55);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
.spec {
  text-align: center;
  min-width: 0;
}
.spec:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.spec:nth-child(-n+2) {
  border-bottom: 1px solid var(--line);
}
.spec-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
  font-weight: 500;
}
.spec-value {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
}

.scroll-hint {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  z-index: 4;
}
.scroll-hint::before {
  content: "";
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--ink));
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ========== TRUST BAR ========== */
.trust-bar {
  padding-block: 28px;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 40px;
  list-style: none;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-family: var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.trust-list li { display: inline-flex; align-items: center; gap: 8px; }
.trust-list strong { color: var(--ink-dim); font-weight: 600; }

/* ========== PROBLEMS ========== */
.problems-grid {
  gap: var(--stack-gap);
}
.problem-card {
  padding: 40px 32px;
  text-align: left;
}
.problem-num {
  display: inline-block;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1;
}
.problem-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 12px;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--ink);
}
.problem-text {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.6;
  font-weight: 300;
}

/* ========== NOISE SIMULATOR (logic untouched) ========== */
.sim-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 44px;
  border-radius: var(--r-xl);
  background: var(--bg-1);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-strong), inset 0 1px 0 rgba(255,255,255,.04);
}
.sim-vis {
  height: 170px;
  position: relative;
  display: flex; align-items: end; justify-content: center;
  gap: 4px;
  margin-bottom: 32px;
  padding: 0 10px;
}
.sim-bar {
  flex: 1;
  max-width: 24px;
  min-height: 8px;
  background: linear-gradient(to top, var(--ink) 0%, var(--ink-dim) 100%);
  border-radius: 4px 4px 0 0;
  transition: height .15s ease-out, opacity .3s;
}
.sim-meter {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.sim-db {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}
.sim-db-unit { font-size: 22px; color: var(--ink-dim); margin-left: 6px; font-style: italic; }
.sim-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
  font-weight: 500;
}
.sim-context {
  text-align: right;
  font-size: 13.5px;
  color: var(--ink-dim);
  min-height: 20px;
  max-width: 16em;
  font-style: italic;
  font-family: var(--serif);
}
.sim-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  border: 1px solid var(--line);
  margin: 28px auto 0;
  width: fit-content;
}
.sim-toggle button {
  padding: 9px 22px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 999px;
  color: var(--ink-dim);
  letter-spacing: .04em;
  transition: background .25s, color .25s;
}
.sim-toggle button.is-active {
  background: var(--ink); color: var(--bg);
}
.sim-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  outline: none;
  margin-top: 8px;
}
.sim-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,255,255,.18), 0 0 0 4px rgba(255,255,255,.04);
  transition: transform .15s;
}
.sim-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.sim-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  cursor: pointer;
}
.sim-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  margin-top: 12px;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 700px) {
  .sim-wrap { padding: 36px 26px; }
  .sim-db { font-size: 40px; }
  .sim-context { font-size: 12px; }
}

/* ========== STEPS ========== */
.steps {
  gap: var(--stack-gap);
  list-style: none;
  counter-reset: step;
}
.step {
  padding: 36px 30px;
  position: relative;
  text-align: left;
}
.step-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 400;
  line-height: 1;
}
.step-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 12px;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--ink);
}
.step-text {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.6;
  font-weight: 300;
}

/* ========== SIZE QUIZ ========== */
.quiz {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.quiz-question {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 32px;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--ink);
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  list-style: none;
}
.quiz-option {
  padding: 26px 20px;
  background: rgba(20,20,22,.55);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  transition: background .25s, border-color .25s, transform .2s var(--ease-out);
  font-weight: 400;
}
.quiz-option:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.quiz-option.is-selected {
  background: rgba(255,255,255,.06);
  border-color: var(--ink);
}
.quiz-option-emoji {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  margin-bottom: 12px;
  letter-spacing: .04em;
  color: var(--ink);
}
.quiz-result {
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--glass-bg-hi);
  border: 1px solid var(--line-mid);
  text-align: center;
  margin-top: 24px;
}
.quiz-result-size {
  font-family: var(--serif);
  font-size: 80px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--ink);
}
.quiz-result-text {
  color: var(--ink-dim);
  font-weight: 300;
}
.quiz-progress {
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 36px;
}
.quiz-progress-bar {
  height: 100%;
  background: var(--ink);
  width: 0%;
  transition: width .4s var(--ease-out);
}

/* ========== COMPARATIVE ========== */
.vs-grid {
  gap: var(--stack-gap);
}
.vs-card {
  padding: 40px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.vs-card--us {
  background: linear-gradient(160deg, #1a1a1c 0%, #0a0a0c 100%);
  border-color: var(--ink);
  box-shadow: var(--shadow-strong), inset 0 1px 0 rgba(255,255,255,.04);
}
.vs-card--us .vs-title { color: var(--ink); }
.vs-tag {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
  color: var(--ink-dim);
}
.vs-card--us .vs-tag { background: var(--ink); color: var(--bg); }
.vs-card--them .vs-tag { color: var(--ink-faint); }
.vs-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -.005em;
  margin-bottom: 30px;
  line-height: 1.2;
  color: var(--ink);
}
.vs-card--them .vs-title { font-style: italic; color: var(--ink-dim); }
.vs-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 14px;
}
.vs-list li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  align-items: flex-start;
  font-weight: 300;
  color: var(--ink-dim);
}
.vs-card--us .vs-list li strong { color: var(--ink); font-weight: 500; }
.vs-tick, .vs-x {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  margin-top: 2px;
}
.vs-tick {
  background: var(--ink); color: var(--bg);
}
.vs-x {
  background: rgba(255,255,255,.05);
  color: var(--ink-faint);
}

/* ========== CALCULATOR ========== */
.calc {
  gap: var(--stack-gap);
  max-width: 60rem;
  margin: 0 auto;
}
.calc-input {
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.calc-input label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
  font-weight: 500;
}
.calc-input input {
  width: 100%;
  padding: 18px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-md);
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 300;
  outline: none;
  transition: border-color .2s, background .2s;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.calc-input input:focus { border-color: var(--ink); background: rgba(255,255,255,.025); }
.calc-input p {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.55;
  font-weight: 300;
}
.calc-result {
  padding: 40px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #1a1a1c 0%, #0a0a0c 100%);
  color: var(--ink);
  border: 1px solid var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-mid);
}
.calc-result-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
  font-weight: 500;
}
.calc-result-num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.calc-result-vs {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.55;
  font-weight: 300;
}
.calc-result-vs strong { color: var(--ink-dim); font-weight: 500; }

/* ========== PERFIL SONORO — new interactive ========== */
.perfil-wrap {
  max-width: 68.75rem;
  margin: 0 auto;
}

.perfil-chart {
  position: relative;
  padding: 40px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #18181a 0%, #050507 100%);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.perfil-chart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 500px at 50% 50%, rgba(255,255,255,.06), transparent 70%);
  pointer-events: none;
}
.perfil-svg {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
}
.perfil-svg .grid-poly { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; }
.perfil-svg .grid-axis { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.perfil-svg .axis-label {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 500;
}
.perfil-svg .data-poly {
  fill: rgba(255,255,255,.10);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: d .25s var(--ease-out);
  filter: drop-shadow(0 4px 24px rgba(255,255,255,.18));
}
.perfil-svg .data-point {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 2;
  transition: cx .25s var(--ease-out), cy .25s var(--ease-out);
}

.perfil-score {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  text-align: center;
}
.perfil-score-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
  margin-bottom: 10px;
}
.perfil-score-value {
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.perfil-score-value .of {
  font-style: italic;
  font-size: 28px;
  color: var(--ink-faint);
  margin-left: 6px;
}
.perfil-score-tag {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-dim);
  min-height: 1.6em;
  font-weight: 400;
}

.perfil-panel {
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.perfil-panel-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--ink);
  line-height: 1.25;
}
.perfil-panel-title em {
  font-style: italic;
  color: var(--ink);
}
.perfil-slider { display: block; }
.perfil-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
}
.perfil-slider-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.perfil-slider-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  font-weight: 400;
}
.perfil-slider input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(to right, var(--ink) 0%, var(--ink) var(--p, 50%), rgba(255,255,255,.10) var(--p, 50%), rgba(255,255,255,.10) 100%);
  border-radius: 999px;
  outline: none;
}
.perfil-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,255,255,.18), 0 0 0 4px rgba(255,255,255,.06);
  transition: transform .15s;
}
.perfil-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.perfil-slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); border: 0; cursor: pointer;
}

.perfil-result {
  padding: 24px 26px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column; gap: 14px;
}
.perfil-result-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  text-wrap: pretty;
}
.perfil-result-text strong {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-dim);
}
.perfil-cta {
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* ========== GALLERY ========== */
.gallery {
  max-width: var(--content-max);
  margin: 0 auto;
}
.gallery-item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-width: 0;
}
.gallery-item .ph { width: 100%; height: 100%; border-radius: var(--r-lg); }
.gallery-caption {
  position: absolute;
  bottom: 14px; left: 14px;
  padding: 7px 13px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  z-index: 2;
}

/* ========== REVIEWS ========== */
.reviews-grid {
  gap: var(--stack-gap);
}
.review {
  padding: 32px 30px;
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-stars {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: -2px;
}
.review-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
  flex: 1;
}
.review-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--ink);
}
.review-meta span {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}

.reviews-summary {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.reviews-summary .review-stars { font-size: 16px; align-self: center; }
.reviews-summary strong {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
}
.reviews-summary-sub { font-size: 12px; color: var(--ink-faint); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }

/* ========== FAQ — exclusive accordion ========== */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.faq-item.is-open {
  background: var(--bg-2);
  border-color: var(--ink);
  box-shadow: 0 18px 50px rgba(255,255,255,.04);
}
.faq-item .faq-q {
  list-style: none;
  cursor: pointer;
  padding: 22px 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.005em;
  background: none;
  width: 100%;
  text-align: left;
  border: 0;
  user-select: none;
}
.faq-item .faq-q-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line-mid);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  font-size: 18px;
  font-weight: 300;
  font-family: var(--sans);
  transition: transform .3s var(--ease-out), background .3s, border-color .3s, color .3s;
}
.faq-item.is-open .faq-q-icon {
  transform: rotate(45deg);
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.faq-item-inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease-out);
}
.faq-item.is-open .faq-item-inner { max-height: 600px; }
.faq-item-body {
  padding: 0 26px 24px;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 300;
  font-family: var(--sans);
  font-style: normal;
}
.faq-item-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ========== CTA ========== */
.cta-stage {
  position: relative;
  padding: clamp(60px, 8vw, 96px) clamp(28px, 6vw, 80px);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #18181a 0%, #050507 100%);
  color: var(--ink);
  border: 1px solid var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  text-align: center;
}
.cta-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 500px at 50% 100%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(ellipse 500px 350px at 10% 10%, rgba(255,255,255,.04), transparent 60%);
  pointer-events: none;
}
.cta-stage > * { position: relative; z-index: 1; }
.cta-stage .h-section { color: var(--ink); }
.cta-stage .h-section em { color: var(--ink-dim); }
.cta-stage .kicker { color: var(--ink-dim); }
.cta-stage p {
  color: var(--ink-dim);
  max-width: 54ch;
  margin: 0 auto 36px;
  text-wrap: pretty;
  font-weight: 300;
}
.cta-stage h2 { margin-bottom: 20px; }
.cta-buttons {
  gap: 14px;
}
.cta-fine {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ========== Sticky buy bar ========== */
.sticky-buy {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - var(--pad-x)), 46.25rem);
  max-width: calc(100vw - var(--pad-x));
  padding: 12px 14px 12px 20px;
  background: rgba(20,20,22,.85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  z-index: 90;
  transition: bottom .4s var(--ease-out);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.sticky-buy.is-visible { bottom: 20px; }
.sticky-buy-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sticky-buy-img {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .04em;
}
.sticky-buy-img img { display: none; }
.sticky-buy-img::before { content: "CA"; }
.sticky-buy-text { font-size: 13px; min-width: 0; color: var(--ink); }
.sticky-buy-text strong { display: block; font-weight: 500; }
.sticky-buy-text span { color: var(--ink-dim); font-size: 12px; }

/* =============================================================
   STORY — scroll storytelling (layout: responsive.css)
   ============================================================= */
.story {
  position: relative;
  background: var(--bg);
}
.story-stage {
  width: 100%;
  isolation: isolate;
}
.story-stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1000px 700px at 50% 50%, rgba(255,255,255,.04), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.story-product {
  z-index: 1;
  pointer-events: none;
  transition: transform .45s var(--ease-out);
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 1400px;
}
.story-product img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 60px 90px rgba(0,0,0,.85));
  animation: float 6s ease-in-out infinite;
}

.story-chapters {
  z-index: 2;
}
.story-chapter {
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.story-chapter-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
  display: block;
  font-weight: 500;
}
.story-chapter-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 18px;
  text-wrap: balance;
}
.story-chapter-title em { font-style: italic; color: var(--ink-dim); font-weight: 300; }
.story-chapter-text {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 32ch;
  text-wrap: pretty;
}

.story-progress {
  z-index: 3;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.story-progress li {
  display: flex; align-items: center; gap: 12px;
  opacity: .35;
  transition: opacity .5s var(--ease-out), color .5s var(--ease-out);
}
.story-progress li.is-active { opacity: 1; color: var(--ink); }
.story-progress .tick {
  width: 24px; height: 1px;
  background: currentColor;
  display: block;
  transition: width .5s var(--ease-out);
}
.story-progress li.is-active .tick { width: 48px; }

/* =============================================================
   FOCUS MODE — silence on scroll
   ============================================================= */
.focus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  transition: background .8s var(--ease-out);
}
.focus::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(255,255,255,.05), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  z-index: 0;
  pointer-events: none;
}
.focus.is-active::before { opacity: 1; }

.focus-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  padding-inline: clamp(1.2rem, 4vw, 3rem);
}
.focus-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 28px;
  display: block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.focus-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease-out) .15s, transform 1.1s var(--ease-out) .15s;
}
.focus-title em { font-style: italic; color: var(--ink-dim); font-weight: 300; }
.focus-text {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.65;
  max-width: 42ch;
  margin: 0 auto 48px;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease-out) .3s, transform 1.1s var(--ease-out) .3s;
}
.focus.is-active .focus-kicker,
.focus.is-active .focus-title,
.focus.is-active .focus-text {
  opacity: 1;
  transform: translateY(0);
}

/* Breathing wave — visual silence */
.focus-wave {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 5px;
  height: 80px;
  margin-bottom: 48px;
}
.focus-wave span {
  width: 2px;
  background: rgba(255,255,255,.5);
  border-radius: 2px;
  height: 30%;
  animation: silence-breath 4.2s ease-in-out infinite;
}
.focus-wave span:nth-child(1)  { animation-delay: 0s;    height: 30%; }
.focus-wave span:nth-child(2)  { animation-delay: .08s;  height: 50%; }
.focus-wave span:nth-child(3)  { animation-delay: .16s;  height: 70%; }
.focus-wave span:nth-child(4)  { animation-delay: .24s;  height: 85%; }
.focus-wave span:nth-child(5)  { animation-delay: .32s;  height: 95%; }
.focus-wave span:nth-child(6)  { animation-delay: .40s;  height: 100%; }
.focus-wave span:nth-child(7)  { animation-delay: .48s;  height: 95%; }
.focus-wave span:nth-child(8)  { animation-delay: .56s;  height: 85%; }
.focus-wave span:nth-child(9)  { animation-delay: .64s;  height: 70%; }
.focus-wave span:nth-child(10) { animation-delay: .72s;  height: 50%; }
.focus-wave span:nth-child(11) { animation-delay: .80s;  height: 30%; }
@keyframes silence-breath {
  0%, 100% { transform: scaleY(1); opacity: .7; }
  50% { transform: scaleY(.18); opacity: .35; }
}
.focus.is-active .focus-wave span {
  animation-duration: 6s;
}

/* Focus mode: subtle hush without blocking navigation */
body.is-focus .nav { opacity: .92; transition: opacity .9s var(--ease-out); }
body.is-focus .sticky-buy { opacity: 0; pointer-events: none; transition: opacity .9s var(--ease-out); }

/* =============================================================
   FEATURE STRIP — 4 features below hero product
   ============================================================= */
.feature-strip {
  margin: clamp(48px, 6vw, 80px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  max-width: 1080px;
  width: 100%;
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--line);
}
.feature-strip li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.feature-strip .feat-rule {
  width: 28px; height: 1px;
  background: rgba(255,255,255,.30);
  display: block;
  margin-bottom: 6px;
}
.feature-strip .feat-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--ink-dim);
  letter-spacing: -.005em;
  line-height: 1.2;
  text-wrap: balance;
}
@media (max-width: 700px) {
  .feature-strip { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

/* ============ pages.css ============ */
/* =============================================================
   CALMÁ — Product detail page (PDP)
   ============================================================= */

.pdp {
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: 60px;
}
.pdp-grid {
  gap: clamp(32px, 5vw, 80px);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Gallery — sticky layout: responsive.css */
.pdp-gallery {
  align-self: start;
}
.pdp-main-img {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--bg-2);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 var(--glass-edge-top), 0 20px 60px rgba(0,0,0,.4);
}
.pdp-main-img::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 70%);
  pointer-events: none;
}
.pdp-main-img img {
  width: 78%; height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.7));
  transition: opacity .4s, transform .4s;
}
.pdp-main-img.is-loading img { opacity: 0; }

/* ── Galería: flechas + zoom con lupa (estilo Apple) ── */
.pdp-main-img { cursor: zoom-in; touch-action: pan-y; }
.pdp-main-img.is-zoomed { cursor: zoom-out; touch-action: none; }
.pdp-main-img.is-zoomed img { transform: scale(2.2); }
.pdp-main-img.is-zoomed::before { opacity: 0; }

.pdp-gallery-nav,
.pdp-zoom-btn {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(10, 10, 12, .5);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  cursor: pointer;
  transition: opacity .25s var(--ease-out, ease), background .2s, border-color .2s, transform .2s;
}
.pdp-gallery-nav svg,
.pdp-zoom-btn svg { width: 18px; height: 18px; }
.pdp-gallery-nav:hover,
.pdp-zoom-btn:hover { background: rgba(22, 22, 24, .82); border-color: var(--copper); }

.pdp-gallery-nav {
  top: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.pdp-gallery-nav--prev { left: 12px; }
.pdp-gallery-nav--next { right: 12px; }
.pdp-gallery-nav:hover { transform: translateY(-50%) scale(1.06); }

.pdp-zoom-btn {
  right: 12px; bottom: 12px;
  width: 38px; height: 38px;
  border-radius: 12px;            /* cuadrado redondeado, estilo Apple */
}
.pdp-zoom-ico { display: none; }
.pdp-zoom-in { display: block; }
.pdp-main-img.is-zoomed .pdp-zoom-in { display: none; }
.pdp-main-img.is-zoomed .pdp-zoom-out { display: block; }

.pdp-main-img:hover .pdp-gallery-nav,
.pdp-main-img:hover .pdp-zoom-btn { opacity: 1; }
.pdp-main-img.is-zoomed .pdp-zoom-btn { opacity: 1; }
.pdp-main-img.is-zoomed .pdp-gallery-nav { opacity: 0; pointer-events: none; }

@media (hover: none) {
  .pdp-gallery-nav, .pdp-zoom-btn { opacity: 1; }
  .pdp-main-img { cursor: default; }
}

.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.pdp-thumb {
  aspect-ratio: 1/1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: border-color .25s, transform .2s;
  padding: 0;
}
.pdp-thumb:hover { transform: translateY(-2px); border-color: var(--line-mid); }
.pdp-thumb.is-active { border-color: var(--ink); }
.pdp-thumb img {
  width: 76%; height: 76%;
  object-fit: contain;
}
.pdp-thumb.cover img { width: 100%; height: 100%; object-fit: cover; }

/* Info */
.pdp-info {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
}
/* Reorden estilo Loop: variante → precio → add-to-cart arriba; detalles fundadores abajo (2026-06-10). */
.pdp-info > .pdp-badge-pill     { order: 1; }
.pdp-info > .pdp-title          { order: 2; }
.pdp-info > .pdp-model          { order: 3; }
.pdp-info > .pdp-rating         { order: 4; }
.pdp-info > .pdp-lede           { order: 5; }
.pdp-info > .pdp-variant        { order: 6; }
.pdp-info > .pdp-price-row      { order: 7; }
.pdp-info > .pdp-installments   { order: 8; }
.pdp-info > .pdp-actions        { order: 9; }
.pdp-info > .pdp-guarantee      { order: 10; }
.pdp-info > .pdp-stock          { order: 11; }
.pdp-info > .pdp-founder-banner { order: 12; }
.pdp-info > .pdp-progress       { order: 13; }
.pdp-info > .pdp-benefits       { order: 14; }
.pdp-info > .pdp-edition-row    { order: 15; }
.pdp-info > .pdp-trust-grid     { order: 16; }
.pdp-info > .pdp-shipping       { order: 17; }
.pdp-info > .pdp-specs          { order: 18; }
.pdp-info > .pdp-mini-faq       { order: 19; }
.pdp-rating {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 16px;
}
.pdp-rating-stars {
  color: var(--ink);
  letter-spacing: -2px;
  font-size: 14px;
}
.pdp-title {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.pdp-sub {
  font-size: 17px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-bottom: 32px;
  text-wrap: pretty;
}
.pdp-price-row {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 8px;
}
.pdp-price {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pdp-price-old {
  font-size: 18px;
  color: var(--ink-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.pdp-installments {
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 28px;
}
.pdp-installments strong { color: var(--ink); font-weight: 500; }

/* Variant selector */
.pdp-variant {
  margin-bottom: 24px;
}
.pdp-variant-label {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.pdp-variant-label a {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-variant-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  list-style: none;
}
.pdp-variant-options li { display: contents; }
.pdp-variant-option {
  padding: 16px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all .25s;
  text-align: left;
  position: relative;
}
.pdp-variant-option:hover { background: var(--glass-bg-hi); border-color: var(--line-mid); }
.pdp-variant-option.is-active {
  border-color: var(--ink);
  background: rgba(255,255,255,.08);
}
.pdp-variant-option strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.pdp-variant-option span {
  font-size: 12px;
  color: var(--ink-dim);
}
.pdp-variant-option .pdp-badge {
  position: absolute;
  top: -8px; right: -6px;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Qty + Add */
.pdp-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: stretch;
}
.pdp-actions .btn { min-height: 56px; }
.pdp-qty {
  display: flex; align-items: center;
  background: var(--glass-bg);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-pill);
  overflow: hidden;
  padding: 4px;
}
.pdp-qty button {
  width: 44px; height: 44px;
  border-radius: 999px;
  font-size: 18px;
  color: var(--ink-dim);
  transition: background .2s, color .2s;
}
.pdp-qty button:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.pdp-qty span {
  min-width: 32px;
  text-align: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

/* Mobile-specific PDP optimizations */
@media (max-width: 760px) {
  .pdp-actions { gap: 8px; }
  .pdp-actions .btn { min-height: 58px; font-size: 15px; }
  .pdp-qty button { width: 40px; height: 40px; }
  .pdp-info .pdp-title { font-size: clamp(32px, 9vw, 44px); line-height: 1; }
  .pdp-info .pdp-price { font-size: 36px; }
  .pdp-trust-grid { grid-template-columns: 1fr 1fr; }
  .pdp-trust-card { padding: 12px; }
  .pdp-trust-card strong { font-size: 11.5px; }
  .pdp-trust-card span { font-size: 10.5px; }
}

/* Trust strip on PDP */
.pdp-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-dim);
}
.pdp-trust-item svg {
  width: 18px; height: 18px;
  color: var(--ink);
  flex-shrink: 0;
}

/* Shipping check */
.pdp-shipping {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pdp-shipping-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.pdp-shipping-row label {
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.pdp-shipping-row input {
  flex: 1 1 120px;
  min-width: 0;                 /* permite achicarse y no desbordar la pantalla */
  background: transparent;
  border: 0;
  font-size: 14px;
  outline: none;
  color: var(--ink);
}
.pdp-shipping-row .btn {
  flex-shrink: 0;               /* el botón "Calcular" no se aplasta */
  white-space: nowrap;
}
.pdp-shipping-row input::placeholder { color: var(--ink-faint); }
.pdp-shipping-result {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-dim);
  display: none;
}
.pdp-shipping-result.is-visible { display: block; }
.pdp-shipping-result strong { color: var(--ink); }

/* Spec list */
.pdp-specs {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pdp-spec {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.pdp-spec dt {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pdp-spec dd { color: var(--ink); }

/* Feature strip below */
.pdp-features {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .pdp-features { grid-template-columns: 1fr 1fr; } }
.pdp-feature {
  position: relative;
  overflow: hidden;
  padding: 30px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  transition: transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1)), border-color .35s, background .35s;
}
.pdp-feature::after {            /* glow cobre que aparece al hover */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(130px 90px at 50% -10%, rgba(255,255,255,.18), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.pdp-feature:hover {
  transform: translateY(-4px);
  border-color: var(--copper-glow, rgba(255,255,255,.42));
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.pdp-feature:hover::after { opacity: 1; }
.pdp-feature-icon {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1)), border-color .35s, background .35s, color .35s;
}
.pdp-feature:hover .pdp-feature-icon {
  transform: scale(1.12) translateY(-2px);
  border-color: var(--copper);
  background: rgba(255,255,255,.14);
  color: var(--copper-soft, #cf9168);
}
.pdp-feature-icon svg { width: 20px; height: 20px; }
.pdp-feature h4 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}
.pdp-feature p {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.45;
}

/* Breadcrumb */
.crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 28px;
}
.crumb a:hover { color: var(--ink); }
.crumb span { margin: 0 8px; }

/* ============ CHECKOUT ============ */
.checkout-shell {
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: 80px;
}
.checkout-grid {
  gap: 40px;
  max-width: 68.75rem;
  margin: 0 auto;
}
.checkout-steps {
  display: flex; gap: 8px;
  margin-bottom: 40px;
}
.checkout-step {
  flex: 1;
  padding: 14px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 12px;
  display: flex; gap: 12px; align-items: center;
}
.checkout-step.is-active { border-color: var(--line-strong); background: var(--glass-bg-hi); }
.checkout-step-num {
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  flex-shrink: 0;
}
.checkout-step.is-active .checkout-step-num {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.checkout-step.is-done .checkout-step-num {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.checkout-step-label strong { display: block; font-weight: 500; font-size: 13px; }
.checkout-step-label span { color: var(--ink-faint); font-size: 11px; }

@media (max-width: 600px) {
  .checkout-step-label span { display: none; }
}

.checkout-card {
  padding: 32px;
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
}
.checkout-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 20px;
  letter-spacing: -.01em;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-row.full { grid-template-columns: 1fr; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field {
  display: flex; flex-direction: column;
  position: relative;
}
.field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-md);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, background .2s;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink);
  background: rgba(255,255,255,.05);
}
.field input::placeholder { color: var(--ink-faint); }

.shipping-options { display: flex; flex-direction: column; gap: 10px; }
.shipping-opt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-md);
  cursor: pointer;
  background: rgba(255,255,255,.02);
  transition: all .2s;
}
.shipping-opt:hover { background: rgba(255,255,255,.05); }
.shipping-opt input { display: none; }
.shipping-opt.is-active {
  border-color: var(--ink);
  background: rgba(255,255,255,.08);
}
.shipping-opt-info strong { display: block; font-weight: 500; font-size: 14px; }
.shipping-opt-info span { font-size: 12px; color: var(--ink-faint); }
.shipping-opt-price { font-family: var(--display); font-size: 16px; font-variant-numeric: tabular-nums; }

.payment-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 600px) { .payment-options { grid-template-columns: 1fr; } }
.payment-opt {
  padding: 16px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-md);
  cursor: pointer;
  background: rgba(255,255,255,.02);
  transition: all .2s;
  display: flex; gap: 12px; align-items: center;
}
.payment-opt input { display: none; }
.payment-opt:hover { background: rgba(255,255,255,.05); }
.payment-opt.is-active {
  border-color: var(--ink);
  background: rgba(255,255,255,.08);
}
.payment-opt-mark {
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.payment-opt-info strong { display: block; font-weight: 500; font-size: 13px; }
.payment-opt-info span { font-size: 11px; color: var(--ink-faint); }

.summary-card {
  padding: 28px;
  background: var(--glass-bg-hi);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-lg);
  position: sticky;
  top: 100px;
  align-self: start;
}
.summary-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.summary-items {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.summary-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  align-items: center;
}
.summary-item-img {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
}
.summary-item-img img { width: 80%; height: 80%; object-fit: contain; }
.summary-item-img::after {
  content: attr(data-qty);
  position: absolute;
  top: -6px; right: -6px;
  background: var(--ink);
  color: var(--bg);
  width: 18px; height: 18px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
}
.summary-item-name { font-size: 13px; }
.summary-item-meta { font-size: 11px; color: var(--ink-faint); }
.summary-item-price { font-size: 13px; font-variant-numeric: tabular-nums; }

.summary-rows { font-size: 13px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.summary-rows div { display: flex; justify-content: space-between; color: var(--ink-dim); }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
}
.summary-total-value {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.checkout-empty {
  text-align: center;
  padding: 100px 20px;
}
.checkout-empty h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.checkout-empty p {
  color: var(--ink-dim);
  margin-bottom: 28px;
}

/* ============ CONFIRMATION ============ */
.confirm-shell {
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 80px;
  text-align: center;
}
.confirm-icon {
  width: 80px; height: 80px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  animation: pop .6s var(--ease-bounce) backwards;
}
@keyframes pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.confirm-icon svg { width: 32px; height: 32px; }
.confirm-shell h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.confirm-shell .lede {
  margin: 0 auto 40px;
}
.confirm-card {
  max-width: 580px;
  margin: 0 auto;
  padding: 36px;
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: left;
}
.confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.confirm-row:last-child { border-bottom: 0; }
.confirm-row span:first-child { color: var(--ink-dim); }
.confirm-row span:last-child { font-family: var(--mono); }

/* ============ ABOUT ============ */
.about-shell { padding-top: calc(var(--nav-h) + 80px); padding-bottom: 80px; }
.about-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}
.about-image {
  margin: 80px auto;
  max-width: 900px;
  aspect-ratio: 16/9;
  background: var(--bg-2);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
}
.about-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-vals {
  gap: var(--stack-gap);
  max-width: 68.75rem;
  margin: 0 auto clamp(4rem, 10vw, 6.25rem);
}
.about-val {
  padding: 36px;
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.about-val-num {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 14px;
}
.about-val h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.about-val p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
}
.about-story {
  max-width: 680px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-dim);
}
.about-story p { margin-bottom: 22px; }
.about-story em {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
}

/* =============================================================
   PDP — Conversion Rate Optimization additions
   Best-seller pill, sold count, popular pack card, benefit ticks,
   stock indicator, trust grid, mini FAQ, live social ticker.
   ============================================================= */

/* Best-seller pill */
.pdp-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-mid);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
  font-family: var(--sans);
}
/* Preventa variant — warm cream accent */
.pdp-badge-pill--founders {
  background: rgba(255,255,255, 0.10);
  border-color: rgba(255,255,255, 0.35);
  color: #f5deb3;
}
.pdp-badge-pill--founders .pdp-badge-dot {
  background: #f5deb3;
  box-shadow: 0 0 10px rgba(255,255,255, .7);
}
/* Model line under title */
.pdp-model {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-top: 6px;
  margin-bottom: 18px;
  font-family: var(--sans);
}
/* Founder banner — explica el deal */
.pdp-founder-banner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 18px;
  margin: 24px 0;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255, 0.08), rgba(255,255,255, 0.03));
  border: 1px solid rgba(255,255,255, 0.25);
}
.pdp-founder-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255, 0.12);
  border: 1px solid rgba(255,255,255, 0.35);
  color: #f5deb3;
}
.pdp-founder-icon svg { width: 18px; height: 18px; }
.pdp-founder-text strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: .01em;
}
.pdp-founder-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pdp-founder-text li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  padding-left: 16px;
  position: relative;
}
.pdp-founder-text li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255, .55);
}
.pdp-founder-text li strong {
  display: inline;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .pdp-founder-banner { padding: 16px; gap: 12px; }
  .pdp-founder-text li { font-size: 12.5px; }
}
.pdp-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c7f0d3;
  box-shadow: 0 0 8px rgba(199, 240, 211, .6);
  animation: pdp-pulse 2.2s ease-out infinite;
}
@keyframes pdp-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: .55; }
}

/* Rating row enhanced */
.pdp-info .pdp-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 20px;
}
.pdp-info .pdp-rating-stars {
  color: #f5deb3;
  letter-spacing: .04em;
  font-size: 14px;
  line-height: 1;
}
.pdp-info .pdp-rating strong {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pdp-rating-sep {
  color: var(--ink-ghost);
  font-size: 12px;
}
.pdp-rating-sold {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 500;
}
.pdp-rating-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f5deb3;
  box-shadow: 0 0 8px rgba(255,255,255, .55);
  animation: pdp-pulse 1.8s ease-out infinite;
}

/* Lead description (richer than the small .pdp-sub) */
.pdp-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-bottom: 28px;
  max-width: 56ch;
}

/* Variant selector hint */
.pdp-variant-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Visual pack cards */
.pdp-packs {
  list-style: none;
  display: flex;            /* columna full-width, sin la sangría por defecto del <ul> */
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0 0 26px;
}
.pdp-packs > li { display: block; width: 100%; }
.pdp-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 18px 16px 16px;
  border-radius: var(--r-md);
  background: rgba(20, 20, 22, 0.55);
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    background .25s var(--ease-out),
    border-color .25s var(--ease-out),
    transform .25s var(--ease-out),
    box-shadow .25s var(--ease-out);
}
.pdp-pack:hover {
  background: rgba(28, 28, 30, 0.7);
  border-color: var(--line-mid);
  transform: translateY(-2px);
}
.pdp-pack.is-active {
  background: rgba(30, 30, 33, 0.72);
  border-color: rgba(255,255,255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 8px 22px rgba(0, 0, 0, .28);
}
.pdp-pack.is-active::before {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2'><path d='M3 8.5l3 3 7-7'/></svg>");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* MOST POPULAR pack — highlighted */
.pdp-pack--popular {
  border: 1px solid rgba(255,255,255, 0.32);
  background: linear-gradient(180deg, rgba(30, 28, 27, 0.7), rgba(20, 20, 22, 0.7));
  grid-column: 1 / -1;
  margin-top: 10px;          /* deja aire para que el tag no pise la card de arriba */
  padding-top: 26px;
}
.pdp-pack--popular .pdp-pack-tag {
  position: absolute;
  top: -10px; left: 16px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--copper);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.pdp-pack--mini {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 14px;
  grid-column: 1 / -1;
}
.pdp-pack--mini .pdp-pack-head { flex: 1; }
.pdp-pack--mini .pdp-pack-price-row { margin: 0; }
.pdp-pack--mini .pdp-pack-each {
  position: absolute;
  left: 16px; bottom: -2px;
  display: none;
}

.pdp-pack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pdp-pack-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.pdp-pack-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(199, 240, 211, .12);
  border: 1px solid rgba(199, 240, 211, .35);
  color: #c7f0d3;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pdp-pack-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.pdp-pack-price {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pdp-pack-price-old {
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-variant-numeric: tabular-nums;
}
.pdp-pack-each {
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .005em;
}
.pdp-pack-bullets {
  list-style: none;
  padding: 8px 0 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 12px;
}
.pdp-pack-bullets li {
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .005em;
  padding-left: 14px;
  position: relative;
}
.pdp-pack-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* Benefit ticks */
.pdp-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px 0;
  margin-bottom: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pdp-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.pdp-benefits strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pdp-tick {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(199, 240, 211, .14);
  border: 1px solid rgba(199, 240, 211, .35);
  color: #c7f0d3;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}

/* Price row enhanced with save badge */
.pdp-info .pdp-price-row {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.pdp-price-save {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c7f0d3;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(199, 240, 211, .10);
  border: 1px solid rgba(199, 240, 211, .25);
}
.pdp-price-save:empty,
.pdp-price-save[hidden] { display: none; }

/* Stock signal */
.pdp-stock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: rgba(199, 240, 211, .06);
  border: 1px solid rgba(199, 240, 211, .18);
  font-size: 13px;
  color: var(--ink-dim);
}
.pdp-stock strong { color: var(--ink); font-weight: 500; }
.pdp-stock-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c7f0d3;
  box-shadow: 0 0 10px rgba(199, 240, 211, .7);
  animation: pdp-pulse 2.4s ease-out infinite;
  flex-shrink: 0;
}

/* Trust grid — tarjetas con ícono, en columna full-width (sin sangría de <ul>) */
.pdp-trust-grid {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin-top: 22px;
}
.pdp-trust-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(20, 20, 22, 0.4);
  border: 1px solid var(--line);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.pdp-trust-card:hover {
  background: rgba(28, 28, 30, 0.6);
  border-color: var(--line-mid);
}
.pdp-trust-card strong {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .01em;
}
.pdp-trust-card span {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.4;
  letter-spacing: .02em;
}
.pdp-trust-icon {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  color: var(--ink);
}
.pdp-trust-icon svg { width: 14px; height: 14px; }

/* Mini FAQ inline near buy box */
.pdp-mini-faq {
  margin-top: 0;
  border-top: 1px solid var(--line);
}
.pdp-mini-faq:first-of-type { border-top: none; margin-top: 26px; }
.pdp-mini-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--sans);
}
.pdp-mini-faq summary::-webkit-details-marker,
.pdp-mini-faq summary::marker { display: none; }
.pdp-mini-faq-icon {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  font-size: 14px;
  color: var(--ink-dim);
  transition: transform .3s var(--ease-out), color .2s;
}
.pdp-mini-faq[open] .pdp-mini-faq-icon {
  transform: rotate(45deg);
  color: var(--ink);
}
.pdp-mini-faq p {
  padding: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* Live social ticker — floating bottom-left */
.pdp-ticker {
  position: fixed;
  bottom: 24px; left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px 11px 16px;
  border-radius: var(--r-pill);
  background: rgba(14, 14, 16, 0.92);
  border: 1px solid var(--line-mid);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 12px;
  color: var(--ink-dim);
  z-index: 90;
  max-width: min(360px, calc(100vw - 48px));
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.pdp-ticker.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pdp-ticker.is-hidden { display: none; }
.pdp-ticker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c7f0d3;
  box-shadow: 0 0 8px rgba(199, 240, 211, .6);
  animation: pdp-pulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
.pdp-ticker-text {
  flex: 1;
  line-height: 1.4;
  color: var(--ink);
}
.pdp-ticker-text strong { font-weight: 500; }
.pdp-ticker-text em {
  display: block;
  font-style: normal;
  color: var(--ink-faint);
  font-size: 11px;
  margin-top: 1px;
  letter-spacing: .02em;
}
.pdp-ticker-close {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--ink-faint);
  background: transparent;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.pdp-ticker-close:hover {
  background: rgba(255,255,255,.06);
  color: var(--ink);
}

@media (max-width: 479px) {
  .pdp-pack--popular { padding-top: 28px; }
  .pdp-pack-bullets { padding-top: 10px; }
  .pdp-pack-name { font-size: 16px; }
  .pdp-pack-price { font-size: 20px; }
}

/* ============ polish.css ============ */
/* =============================================================
   CALMÁ — Polish layer (non-layout)
   Locked PDP variants, pointer-events on ambient layers.
   Layout & responsive: responsive.css
   ============================================================= */

.bg-particles,
.bg-stars,
.bg-grain {
  pointer-events: none;
}

/* ---------- LOCKED variant cards (PDP) ---------- */
.pdp-pack.is-locked {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.65);
  position: relative;
}
.pdp-pack.is-locked:hover {
  transform: none;
  border-color: var(--line);
  background: var(--bg-1);
}
.pdp-pack.is-locked .pdp-pack-price {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(244,243,239,.4);
}
.pdp-pack-tag--locked {
  background: rgba(255,255,255,.05);
  color: var(--ink-faint);
  border: 1px solid var(--line);
}

.pdp-pack:focus-visible {
  outline-offset: 4px;
}
.pdp-pack.is-locked:focus-visible {
  outline: 1px dashed var(--ink-faint);
  outline-offset: 4px;
}

.cart-body .cart-item:last-of-type {
  border-bottom: 0;
}

/* ============ responsive.css ============ */
/* =============================================================
   CALMÁ — Responsive architecture (mobile-first)
   Load last. Breakpoints: sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536
   ============================================================= */

/* ---------- Global rhythm & overflow safety (structural, not hidden hacks) ---------- */
main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

:is(h1, h2, h3, h4, p, li, figcaption, blockquote) {
  overflow-wrap: break-word;
  word-break: normal;
}

:is(.container, .section, .card, .section-head, .hero-content) {
  min-width: 0;
}

/* ---------- Tablet+ spacing scale ---------- */
@media (min-width: 768px) {
  :root {
    --nav-h: 72px;
    --pad-x: clamp(1.5rem, 3.5vw, 3rem);
    --section-y: clamp(5rem, 11vh, 10rem);
    --stack-gap: clamp(1.125rem, 2vw, 1.5rem);
    --block-gap: clamp(2rem, 4vw, 3rem);
  }
}

@media (min-width: 1280px) {
  :root {
    --pad-x: clamp(2rem, 4vw, 3rem);
  }
}

/* ---------- Nav: mobile base → desktop ---------- */
.nav-mobile-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--ink);
  flex-shrink: 0;
}

.nav-actions {
  flex-shrink: 0;
}

/* Tablet: compact inline nav */
@media (min-width: 900px) {
  .nav {
    top: 14px;
    padding: 10px 12px 10px 20px;
    gap: 10px;
  }

  .nav > nav {
    display: block;
    min-width: 0;
    flex: 1;
  }

  .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
  }

  .nav-links a {
    padding: 8px 11px;
    font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
  }

  .nav-mobile-toggle {
    display: none;
  }

  .mobile-menu {
    display: none;
  }
}

@media (min-width: 1200px) {
  .nav {
    padding: 10px 14px 10px 22px;
    gap: 12px;
  }

  .nav-links a {
    padding: 9px 14px;
    font-size: 0.8125rem;
  }
}

/* ---------- Typography scale ---------- */
.h-display {
  font-size: clamp(2.25rem, 5vw + 1rem, 5.75rem);
}

.h-section {
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3.6rem);
}

.lede {
  font-size: clamp(0.9375rem, 0.35vw + 0.85rem, 1.125rem);
}

.kicker {
  font-size: clamp(0.625rem, 0.2vw + 0.58rem, 0.6875rem);
}

/* ---------- Buttons: full-width CTAs on narrow viewports ---------- */
.hero-actions,
.cta-buttons,
.perfil-cta,
.quiz-result-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: min(100%, 22rem);
  margin-inline: auto;
  padding-inline: 0;
}

.hero-actions .btn,
.cta-buttons .btn,
.perfil-cta .btn,
.quiz-result-actions .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .hero-actions,
  .cta-buttons,
  .perfil-cta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
  }

  .hero-actions .btn,
  .cta-buttons .btn,
  .perfil-cta .btn {
    width: auto;
    flex: 0 1 auto;
    min-width: min(100%, 12rem);
  }
}

@media (min-width: 768px) {
  .btn-lg {
    min-height: 56px;
    padding: 18px 30px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }
}

/* ---------- Cards: mobile padding ---------- */
.card {
  padding: clamp(1.5rem, 4vw, 2rem);
}

/* ---------- Footer ---------- */
@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 3.5rem;
    margin-bottom: 3.5rem;
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* ---------- Sticky buy + safe areas ---------- */
.sticky-buy {
  width: min(calc(100% - var(--pad-x)), 46.25rem);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.sticky-buy.is-visible {
  bottom: max(10px, env(safe-area-inset-bottom));
}

@media (max-width: 479px) {
  .sticky-buy {
    width: calc(100% - 1rem);
    border-radius: var(--r-md);
    flex-wrap: wrap;
    justify-content: center;
  }

  .sticky-buy-info {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }

  .sticky-buy .btn {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ---------- Cart drawer ---------- */
.cart-body {
  display: flex;
  flex-direction: column;
}

.cart-foot {
  flex-shrink: 0;
}

@media (max-width: 479px) {
  .cart-drawer {
    width: 100%;
    border-left: 0;
  }
}

/* =============================================================
   HOME — Hero
   ============================================================= */
.hero {
  min-height: auto;
  padding-top: calc(var(--nav-h) + max(12px, env(safe-area-inset-top)) + 1rem);
  padding-bottom: clamp(2.5rem, 8vw, 4rem);
  padding-inline: var(--pad-x);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-gap);
}

.hero-wordmark {
  width: 100%;
  max-width: min(100%, 52rem);
  margin-inline: auto;
}

.hero-wordmark img {
  width: min(100%, clamp(11rem, 72vw, 52rem));
  max-height: min(28vh, 12rem);
  object-fit: contain;
  margin-inline: auto;
}

.hero-tagline {
  font-size: clamp(1.25rem, 4.5vw, 2.4rem);
  max-width: 20ch;
  text-wrap: balance;
}

.hero-sub {
  font-size: clamp(0.8125rem, 2.5vw, 0.96875rem);
  max-width: 42ch;
  padding-inline: 0;
}

.hero-product {
  width: min(100%, clamp(15rem, 78vw, 35rem));
  margin-block: clamp(1.25rem, 4vw, 2rem);
  flex-shrink: 0;
}

.hero-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.liquid-labels {
  gap: clamp(0.375rem, 2vw, 0.625rem);
  padding-inline: 0;
  justify-content: center;
  width: 100%;
  max-width: 36rem;
}

.liquid-labels li {
  max-width: 100%;
}

.glass-chip {
  white-space: normal;
  max-width: min(100%, 11rem);
}

.scroll-hint {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  animation: none;
}

.scroll-hint::before {
  height: 28px;
}

@media (min-width: 768px) {
  .hero {
    min-height: 100svh;
    padding-bottom: 3.75rem;
  }

  .scroll-hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    animation: bob 2s ease-in-out infinite;
  }
}

@media (min-width: 1024px) {
  .hero-wordmark img {
    max-height: none;
  }
}

/* Specs row */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 32rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.spec {
  padding: clamp(1rem, 3vw, 1.375rem) clamp(0.75rem, 2vw, 1.125rem);
  min-width: 0;
}

.spec-value {
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
}

@media (min-width: 640px) {
  .specs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 51.25rem;
  }

  .spec {
    border-bottom: 0;
  }

  .spec:nth-child(-n+2) {
    border-bottom: 0;
  }

  .spec:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .spec:last-child {
    border-right: 0;
  }
}

/* =============================================================
   HOME — Story (stacked below lg to prevent overlap)
   ============================================================= */
.story {
  height: auto;
}

.story-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--block-gap);
  min-height: auto;
  padding-block: clamp(3.5rem, 10vw, 5rem);
  padding-inline: var(--pad-x);
  overflow: visible;
}

.story-product {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: min(100%, 20rem);
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
  flex-shrink: 0;
}

.story-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-chapters {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 8vw, 4rem);
  width: 100%;
  max-width: 32rem;
  pointer-events: auto;
}

.story-chapter {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: none;
  transform: none;
  opacity: 1;
  text-align: center;
  pointer-events: auto;
}

.story-chapter.is-active {
  transform: none;
}

.story-chapter-title {
  font-size: clamp(1.75rem, 6vw, 3rem);
}

.story-chapter-text {
  max-width: 36ch;
  margin-inline: auto;
}

.story-progress {
  display: none;
}

@media (min-width: 1024px) {
  .story {
    height: 380vh;
  }

  .story-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    flex-direction: row;
    justify-content: center;
    padding-inline: 0;
    overflow: hidden;
  }

  .story-product {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(17.5rem, 36vw, 30rem);
    height: clamp(17.5rem, 36vw, 30rem);
    transform: translate(-50%, -50%);
  }

  .story-chapters {
    position: absolute;
    inset: 0;
    max-width: none;
    pointer-events: none;
  }

  .story-chapter {
    position: absolute;
    left: clamp(1.5rem, 6vw, 7rem);
    top: 50%;
    width: min(26.25rem, 38vw);
    text-align: left;
    opacity: 0;
    transform: translateY(calc(-50% + 18px));
    pointer-events: none;
  }

  .story-chapter.is-active {
    opacity: 1;
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .story-chapter-title {
    font-size: clamp(3rem, 6vw, 5rem);
  }

  .story-chapter-text {
    margin-inline: 0;
  }

  .story-progress {
    display: flex;
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    top: 50%;
    transform: translateY(-50%);
  }
}

/* =============================================================
   HOME — Trust, problems, steps, vs, gallery, reviews
   ============================================================= */
.trust-list {
  gap: 1rem 1.5rem;
  padding-inline: var(--pad-x);
  text-align: center;
}

.problems-grid,
.steps,
.vs-grid,
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-gap);
}

@media (min-width: 768px) {
  .problems-grid,
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .reviews-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-gap);
  width: 100%;
}

.gallery-item {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.gallery-item--lg {
  grid-row: auto;
  aspect-ratio: 4 / 3;
}

.gallery-item .ph {
  min-height: 12rem;
  height: 100%;
}

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-item--lg {
    grid-column: span 2;
    aspect-ratio: 21 / 9;
  }
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .gallery-item--lg {
    grid-column: 1;
    grid-row: span 2;
    aspect-ratio: auto;
    min-height: 100%;
  }
}

/* Reviews summary */
.reviews-summary {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  margin-bottom: var(--block-gap);
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--r-lg);
}

.reviews-summary strong {
  font-size: clamp(1.75rem, 6vw, 2.25rem);
}

@media (min-width: 480px) {
  .reviews-summary {
    flex-direction: row;
    width: fit-content;
    max-width: 100%;
    border-radius: var(--r-pill);
    padding: 1.375rem 2rem;
  }
}

/* =============================================================
   HOME — Focus, simulator, perfil, calc, quiz, FAQ, CTA
   ============================================================= */
.focus {
  min-height: auto;
  padding-block: clamp(4rem, 12vw, 10rem);
}

.focus-title {
  font-size: clamp(2rem, 7vw, 6rem);
}

.focus-text {
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.sim-wrap {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.75rem);
}

.sim-meter {
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.sim-context {
  text-align: left;
  max-width: none;
}

.sim-db {
  font-size: clamp(2.25rem, 10vw, 3.5rem);
}

@media (min-width: 640px) {
  .sim-meter {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .sim-context {
    text-align: right;
    max-width: 16em;
  }
}

.perfil-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-gap);
}

.perfil-chart,
.perfil-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.perfil-score-value {
  font-size: clamp(2.75rem, 12vw, 4.5rem);
}

.perfil-panel-title {
  font-size: clamp(1.125rem, 3vw, 1.375rem);
}

@media (min-width: 900px) {
  .perfil-wrap {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
  }
}

.calc {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .calc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quiz-question {
  font-size: clamp(1.25rem, 4vw, 1.75rem);
}

.quiz-options {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .quiz-options {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  }
}

.quiz-result {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.quiz-result-size {
  font-size: clamp(3rem, 14vw, 5rem);
}

.quiz-result-actions {
  max-width: none;
}

.faq-item .faq-q {
  padding: 1.125rem 1.25rem;
  font-size: clamp(1rem, 3vw, 1.1875rem);
  gap: 12px;
}

.faq-item .faq-q > span:first-child {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.faq-item-body {
  padding: 0 1.25rem 1.25rem;
  font-size: clamp(0.875rem, 2.5vw, 0.90625rem);
}

.cta-stage {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 5rem);
  border-radius: clamp(1.25rem, 3vw, 2.25rem);
}

.vs-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.vs-title {
  font-size: clamp(1.25rem, 3.5vw, 1.625rem);
}

/* =============================================================
   PDP / Checkout / About
   ============================================================= */
.pdp {
  padding-top: calc(var(--nav-h) + max(12px, env(safe-area-inset-top)) + 1.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 3.75rem);
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--block-gap);
}

.pdp-gallery {
  position: static;
}

.pdp-thumbs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pdp-packs {
  grid-template-columns: 1fr;
}

.pdp-pack--popular {
  grid-column: 1;
}

.pdp-actions {
  flex-direction: column;
}

.pdp-actions .btn {
  width: 100%;
  flex: 1 1 auto;
}

.pdp-qty {
  align-self: stretch;
  justify-content: center;
}

.pdp-trust-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pdp-spec {
  grid-template-columns: minmax(5.5rem, 35%) 1fr;
  gap: 0.75rem;
}

.pdp-features {
  grid-template-columns: 1fr;
  margin-top: clamp(3rem, 8vw, 6.25rem);
}

.pdp-ticker {
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: max(12px, env(safe-area-inset-bottom));
  max-width: none;
}

@media (min-width: 640px) {
  .pdp-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-pack--popular {
    grid-column: 1 / -1;
  }

  .pdp-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .pdp-actions .btn {
    flex: 1 1 12rem;
    width: auto;
  }

  .pdp-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .pdp-grid {
    grid-template-columns: 1.05fr 1fr;
    align-items: start;
  }

  /* La galería-collage hace scroll natural y acompaña la lectura (no sticky). */

  .pdp-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pdp-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pdp-ticker {
    left: 24px;
    right: auto;
    max-width: min(22.5rem, calc(100vw - 48px));
  }
}

.checkout-shell,
.about-shell,
.confirm-shell {
  padding-top: calc(var(--nav-h) + max(12px, env(safe-area-inset-top)) + 1.5rem);
}

.checkout-grid {
  grid-template-columns: 1fr;
  gap: var(--block-gap);
}

.summary-card {
  position: static;
}

@media (min-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1.3fr 1fr;
  }

  .summary-card {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
  }
}

.checkout-card,
.summary-card,
.confirm-card {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.checkout-steps {
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 599px) {
  .checkout-step-label span {
    display: none;
  }
}

.about-vals {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .about-vals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-val-num {
  font-size: clamp(2.5rem, 10vw, 3.5rem);
}

.about-cta {
  max-width: 47.5rem;
  margin: clamp(4rem, 10vw, 6.25rem) auto 0;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 3.75rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--glass-bg);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}

.about-cta-deco {
  position: absolute;
  bottom: -2.5rem;
  right: clamp(-3rem, -5vw, -1rem);
  width: min(42%, 17.5rem);
  max-width: 100%;
  opacity: 0.1;
  pointer-events: none;
  object-fit: contain;
}

@media (max-width: 639px) {
  .about-cta-deco {
    display: none;
  }
}

.about-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 20rem;
  margin-inline: auto;
}

@media (min-width: 480px) {
  .about-cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
  }

  .about-cta-actions .btn {
    width: auto;
  }
}

.about-lede-offset {
  margin: 1.75rem auto 0;
}

.about-section-title {
  margin-bottom: 2.25rem;
}

.about-image {
  width: 100%;
  max-width: 56.25rem;
  margin-inline: auto;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ultrawide: cap line length, center stage */
@media (min-width: 1536px) {
  :root {
    --content-max: 1320px;
    --content-narrow: 920px;
  }

  .hero-content,
  .story-chapter {
    max-width: 36rem;
  }
}

.calc-result-stack {
  margin-top: 1.375rem;
}

.pdp-actions [data-pdp-add] {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Utility: inline quiz/result actions from index */
.quiz-result-note {
  margin-top: 1.125rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.quiz-result-actions {
  margin-top: 1.625rem;
}

/* =============================================================
   FINAL PASS — stacking, overflow, rhythm, component polish
   ============================================================= */

/* Prevent horizontal scroll from fixed/full-bleed layers */
.bg-grain,
.bg-particles,
.bg-stars {
  max-width: 100vw;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* Z-index stack */
.nav { z-index: 110; }
.mobile-menu { z-index: 109; }
.cart-backdrop { z-index: 199; }
.cart-drawer { z-index: 200; }
.toast { z-index: 210; }
.sticky-buy { z-index: 90; }
.pdp-ticker { z-index: 88; }

@media (max-width: 899px) {
  .pdp-ticker {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 4.5rem);
  }
}

/* Section rhythm — unified vertical spacing */
.section {
  padding-block: var(--section-y);
}

.trust-bar {
  padding-block: clamp(1.25rem, 4vw, 1.75rem);
}

/* Cards & editorial blocks */
.problem-card,
.step,
.review,
.about-val {
  min-width: 0;
}

.problem-card,
.step {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.vs-list li {
  min-width: 0;
}

.vs-list li span:last-child {
  flex: 1;
  min-width: 0;
}

/* Simulator */
.sim-wrap {
  width: 100%;
  max-width: 57.5rem;
  margin-inline: auto;
}

.sim-vis {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.sim-toggle {
  width: 100%;
  max-width: 20rem;
}

.sim-toggle button {
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* Perfil chart — prevent SVG overflow */
.perfil-chart {
  min-width: 0;
  width: 100%;
}

.perfil-svg {
  max-width: min(100%, 26.25rem);
  margin-inline: auto;
}

.perfil-cta {
  width: 100%;
  max-width: 100%;
}

/* Gallery placeholders */
.gallery-caption {
  max-width: calc(100% - 1.75rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* FAQ */
.faq-list {
  width: 100%;
}

/* CTA stage */
.cta-stage {
  width: 100%;
  margin-inline: auto;
}

.cta-stage p {
  margin-inline: auto;
  padding-inline: 0;
}

/* Footer */
.footer {
  padding-block: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2.25rem);
}

.footer-base {
  width: 100%;
}

.footer-pay {
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (min-width: 640px) {
  .footer-base {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-pay {
    justify-content: flex-end;
  }
}

/* Sticky buy — desktop pill */
@media (min-width: 768px) {
  .sticky-buy {
    border-radius: var(--r-pill);
  }

  .sticky-buy-info {
    min-width: 0;
    flex: 1;
  }

  .sticky-buy-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* PDP thumbs — horizontal scroll mobile */
@media (max-width: 639px) {
  .pdp-thumbs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
    margin-inline: calc(var(--pad-x) * -0.25);
    padding-inline: calc(var(--pad-x) * 0.25);
  }

  .pdp-thumb {
    flex: 0 0 clamp(4rem, 18vw, 4.75rem);
    scroll-snap-align: start;
  }
}

.pdp-main-img img {
  width: min(78%, 100%);
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.pdp-founder-banner {
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 640px) {
  .pdp-founder-banner {
    flex-direction: row;
    align-items: flex-start;
  }
}

.pdp-rating {
  width: 100%;
}

/* Checkout */
.checkout-step {
  min-width: 0;
  flex: 1 1 8rem;
}

.payment-opt,
.shipping-opt {
  min-width: 0;
}

/* Story mobile — tighter chapters */
@media (max-width: 1023px) {
  .story-chapters {
    gap: clamp(2rem, 6vw, 3rem);
  }

  .story-chapter-title {
    line-height: 1.02;
  }
}

/* Hero desktop centering */
@media (min-width: 768px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hero-content {
    flex: 0 1 auto;
  }

  .hero-actions {
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .hero-wordmark img {
    width: min(100%, clamp(18rem, 52vw, 52rem));
  }

  .hero-product {
    width: min(100%, clamp(18rem, 42vw, 35rem));
  }

  .specs {
    max-width: 51.25rem;
  }
}

/* Ultrawide breathing room */
@media (min-width: 1536px) {
  .hero::before {
    background:
      radial-gradient(ellipse 1400px 800px at 50% 55%, rgba(255,255,255,.045), transparent 65%),
      radial-gradient(ellipse 1000px 600px at 50% 100%, rgba(255,255,255,.02), transparent 70%);
  }

  .container-lg {
    max-width: 1440px;
  }
}

/* Quiz screens */
.quiz-screen {
  display: block;
  width: 100%;
}

.quiz-screen.is-hidden {
  display: none;
}

/* Small phones */
@media (max-width: 374px) {
  :root {
    --pad-x: 1rem;
  }

  .nav {
    width: calc(100% - 1rem);
  }

  .glass-chip {
    font-size: 0.625rem;
    padding: 0.4375rem 0.625rem;
  }

  .spec-label {
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
  }
}

/* ============ redesign.css ============ */
/* =============================================================
   CALMÁ — Redesign layer (v4)
   + Loading screen · compact stats · cinematic reveal
   ============================================================= */

/* =============================================================
   LOADER — premium minimal (Apple-level)
   Dark · soft glow · grain · thin progress · 600-1200ms
   ============================================================= */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(255,255,255,.06) 0%, transparent 65%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(20,20,30,.6) 0%, transparent 60%),
    #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  opacity: 1;
  transition: opacity .55s var(--ease-out, cubic-bezier(.16,1,.3,1)), visibility 0s linear .55s;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  z-index: 2;
  animation: loader-rise .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes loader-rise {
  from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}
.loader-mark {
  height: clamp(28px, 6vw, 40px);
  width: auto;
  opacity: 0;
  animation: loader-mark .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) .15s both;
  filter: drop-shadow(0 0 40px rgba(255,255,255, .12));
}
@keyframes loader-mark {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.loader-progress {
  width: clamp(120px, 22vw, 180px);
  height: 1.5px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.loader-progress-bar {
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  border-radius: 999px;
  animation: loader-sweep 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes loader-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
/* Grain texture for depth */
.loader-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}

/* Lock scroll briefly */
body.is-loading {
  overflow: hidden;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loader-inner,
  .loader-mark,
  .loader-progress-bar {
    animation: none !important;
    opacity: 1;
  }
  .loader-progress-bar {
    width: 100%;
    background: rgba(255,255,255,.4);
  }
}

/* Initial page reveal — after loading screen exits */
body.is-loading .hero-frame,
body.is-loading main,
body.is-loading .footer {
  opacity: 0;
  transform: translateY(12px);
}
body:not(.is-loading) .hero-frame,
body:not(.is-loading) main,
body:not(.is-loading) .footer {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

/* =============================================================
   CALMÁ — Redesign layer (v3 — Stitch reference)
   Framed window hero · sans-heavy title · horizontal product cards
   Copper final CTA · 4-col footer
   ============================================================= */

/* =============================================================
   NAV — frame-relative
   ============================================================= */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .25s, border-color .25s, transform .2s var(--ease-bounce);
}
.nav-icon-btn:hover { background: rgba(255,255,255,.10); border-color: var(--line-strong); transform: scale(1.05); }
.nav-icon-btn svg { width: 15px; height: 15px; }

@media (max-width: 899px) {
  .nav-icon-btn { display: none; }
}

/* The home nav is its own floating section, fixed to the viewport (no longer
   parked inside the hero). This lets it hide on scroll-down and reappear on
   scroll-up from ANY section — gallery, FAQ, etc. — like every other page. */
.nav-on-frame {
  position: fixed;
  top: clamp(12px, 2vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - clamp(24px, 4vw, 48px));
  max-width: 1180px;
  z-index: 110;
}

/* =============================================================
   HERO — premium black stage · product floating in a soft aura
   ============================================================= */
.hero-frame {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--deep-black);
  overflow: hidden;
}
/* faint top light + edge vignette for depth */
.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244,244,244,.04), transparent 55%),
    radial-gradient(120% 100% at 50% 60%, transparent 55%, rgba(0,0,0,.45) 100%);
}

.hero-stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(10px, 1.5vh, 18px);
  padding: clamp(88px, 12vh, 128px) clamp(20px, 5vw, 48px) clamp(52px, 7vh, 84px);
}

/* ── Aura ──────────────────────────────────────────────────── */
.hero-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-aura span { position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); }
.hero-aura-core {
  top: 30%;
  width: min(72vw, 660px);
  height: min(72vw, 660px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(248,246,242,.20) 0%,
    rgba(255,255,255,.10) 34%,
    rgba(255,255,255,.02) 55%,
    transparent 70%);
  filter: blur(6px);
  animation: heroAura 9s var(--ease-soft) infinite alternate;
}
.hero-aura-halo {
  top: 30%;
  width: min(115vw, 1120px);
  height: min(90vw, 880px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 60%);
  filter: blur(30px);
}
.hero-aura-floor {
  bottom: 7%;
  width: min(60vw, 560px);
  height: 120px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(244,244,244,.06), transparent 72%);
  filter: blur(14px);
}
@keyframes heroAura {
  0%   { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

/* ── Eyebrow ───────────────────────────────────────────────── */
.hero-eyebrow {
  font-family: var(--mono);
  font-size: clamp(.62rem, 1vw, .72rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(244,244,244,.62);
  font-weight: 500;
}

/* ── Product centerpiece ───────────────────────────────────── */
.hero-product {
  position: relative;
  width: min(64vw, 440px);
  margin-block: clamp(0px, 0.5vh, 8px);
}
.hero-product-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(255,255,255,.12));
  animation: heroFloat 7s var(--ease-soft) infinite alternate;
}
/* slow specular glint sweeping across the product */
.hero-product-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 48%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: heroGlint 9s ease-in-out 2s infinite;
}
@keyframes heroFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}
@keyframes heroGlint {
  0%, 70%, 100% { opacity: 0; transform: translateX(-12%); }
  80%           { opacity: 1; transform: translateX(0); }
  92%           { opacity: 0; transform: translateX(10%); }
}

/* ── Copy ──────────────────────────────────────────────────── */
.hero-bigtitle {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.3rem, 7vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--off-white);
  text-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.hero-bigsub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(0.96rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: rgba(244,244,244,.66);
  max-width: 46ch;
}

/* ── Actions ───────────────────────────────────────────────── */
.btn-pill { border-radius: 999px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(6px, 1.4vh, 16px);
}
.btn-hero-primary {
  background: var(--off-white);
  color: #0a0a0a;
  padding: 15px 30px;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s;
}
.btn-hero-primary:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 16px 44px rgba(244,244,244,.22);
}
.btn-hero-ghost {
  background: rgba(255,255,255,.04);
  color: var(--off-white);
  border: 1px solid rgba(244,244,244,.22);
  padding: 15px 28px;
  font-weight: 500;
  font-size: .95rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .35s var(--ease-out), border-color .25s, background .25s;
}
.btn-hero-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(244,244,244,.5);
  background: rgba(255,255,255,.08);
}

/* ── Scroll hint ───────────────────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 38px);
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 1px solid rgba(244,244,244,.25);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
  z-index: 3;
}
.hero-scroll-dot {
  width: 3px; height: 7px;
  border-radius: 999px;
  background: rgba(244,244,244,.7);
  animation: heroScroll 1.8s var(--ease-soft) infinite;
}
@keyframes heroScroll {
  0%   { opacity: 0; transform: translateY(-3px); }
  35%  { opacity: 1; }
  70%  { opacity: 0; transform: translateY(9px); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aura-core, .hero-product-img, .hero-product-glint, .hero-scroll-dot { animation: none; }
}

@media (max-width: 640px) {
  .hero-product { width: min(74vw, 360px); }
  .hero-aura-core { top: 34%; }
  .hero-aura-halo { top: 34%; }
  .hero-bigsub { max-width: 32ch; font-size: .95rem; }
  .hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
}

/* =============================================================
   SECTION HEADS — left-aligned variant
   ============================================================= */
.section-head--left {
  text-align: left;
  margin-inline: 0;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  max-width: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.section-head--left .loved-title,
.section-head--left .h-section { text-align: left; margin: 0; }
.loved-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -.015em;
  color: var(--ink);
}
.loved-sub {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* =============================================================
   MOST LOVED / TIENDA — horizontal product cards
   ============================================================= */
.section-loved { padding-top: clamp(3rem, 6vw, 5rem); }
.loved-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) {
  .loved-grid { grid-template-columns: 1fr 1fr; }
}
.loved-card {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 18px;
  background: rgba(20,20,22,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: border-color .35s, transform .45s var(--ease-out), background .35s;
}
.loved-card:hover {
  border-color: var(--line-mid);
  transform: translateY(-2px);
  background: rgba(28,28,30,.65);
}
.loved-card--featured {
  border-color: rgba(255,255,255,.18);
}
.loved-badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 2;
}
.loved-card-media {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.25));
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.loved-card-media img {
  max-width: 82%; max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.75));
  transition: transform .5s var(--ease-out);
}
.loved-card:hover .loved-card-media img { transform: scale(1.04); }
.loved-card-media--duo img:first-child { transform: translateX(-18%) rotate(-6deg); max-width: 60%; }
.loved-card-media--duo img:last-child  { transform: translateX(18%) rotate(6deg);  max-width: 60%; margin-left: -25%; }

.loved-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.loved-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.loved-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #d6a45e;
}
.loved-rating svg { width: 14px; height: 14px; }
.loved-fav {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s;
}
.loved-fav:hover { color: var(--ink); border-color: var(--line-mid); background: rgba(255,255,255,.06); }
.loved-fav svg { width: 14px; height: 14px; }

.loved-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-top: 4px;
}
.loved-meta {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.loved-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.loved-price {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.loved-buy {
  padding: 9px 16px;
  font-size: 12.5px;
  min-height: 36px;
}

@media (max-width: 480px) {
  .loved-card { grid-template-columns: 100px 1fr; gap: 14px; padding: 14px; }
  .loved-card-media { width: 100px; height: 100px; }
  .loved-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .loved-buy { width: 100%; }
}

/* =============================================================
   ABOUT V2 — product left, 3 feature lines right + 3 stat pills
   ============================================================= */
.section-about-v2 .section-head--left {
  align-items: center;
}
.about-mark {
  height: 22px;
  width: auto;
  opacity: .8;
}
.about-split-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .about-split-v2 { grid-template-columns: 1fr 1.05fr; }
}
.about-media-v2 {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.25));
  border: 1px solid var(--line);
  overflow: hidden;
}
.about-media-v2 .about-media-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 60%);
  filter: blur(36px);
  pointer-events: none;
  animation: heroglow 9s ease-in-out infinite;
}
.about-media-v2 .about-media-img {
  position: relative;
  max-width: 72%;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,.85))
    drop-shadow(0 10px 14px rgba(0,0,0,.6));
  animation: hero-float 7s ease-in-out infinite;
}

.about-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0;
}
.about-feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}
.about-feature-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about-feature-icon svg { width: 20px; height: 20px; }
.about-feature h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 4px;
}
.about-feature p {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.55;
}

.about-stats {
  list-style: none;
  margin-top: clamp(1.5rem, 3.5vw, 2rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 700px;
  margin-inline: auto;
}
.about-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(18,18,20,.5);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-width: 0;
}
.about-stat-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.about-stat-icon svg { width: 14px; height: 14px; }
.about-stat strong {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.15;
}
.about-stat span {
  display: block;
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 1px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 520px) {
  .about-stats { grid-template-columns: 1fr; }
  .about-stat { padding: 10px 14px; }
  .about-stat span { white-space: normal; }
}

/* =============================================================
   DB SIMULATOR — refinements only (logic untouched)
   ============================================================= */
.sim-wrap {
  background: rgba(14,14,16,.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--line);
  border-radius: 28px;
}
.sim-disclaimer {
  margin-top: 18px;
  font-size: 11px;
  text-align: center;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* =============================================================
   USE CASES
   ============================================================= */
.use-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
}
@media (min-width: 720px)  { .use-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

.use-card {
  padding: 18px 18px 20px;
  background: rgba(18,18,20,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .35s var(--ease-out), background .3s, border-color .3s;
  text-align: left;
}
.use-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-mid);
  background: rgba(255,255,255,.04);
}
.use-card-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.use-card-icon svg { width: 18px; height: 18px; }
.use-card h3,
.use-card-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 4px;
}
.use-card p {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.45;
}

/* Compact section heading for casos */
#casos .section-head { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
#casos.section { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* =============================================================
   COMPARATIVA — compact 3-card grid
   ============================================================= */
#comparativa.section { padding-block: clamp(2.5rem, 5vw, 4rem); }
#comparativa .section-head { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.vs-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 768px)  { .vs-grid-3 { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (min-width: 1080px) { .vs-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.vs-grid-3 .vs-card {
  background: rgba(18,18,20,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vs-grid-3 .vs-card--us {
  border-color: rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 70% 0%, rgba(255,255,255,.05), transparent 60%),
    rgba(20,20,22,.62);
}
.vs-grid-3 .vs-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}
.vs-grid-3 .vs-card--us .vs-tag { background: var(--ink); color: var(--bg); }
.vs-grid-3 .vs-card--them .vs-tag { color: var(--ink-faint); background: rgba(255,255,255,.04); }
.vs-grid-3 .vs-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
}
.vs-grid-3 .vs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding: 0;
}
.vs-grid-3 .vs-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.vs-grid-3 .vs-tick { color: var(--ink); font-weight: 600; }
.vs-grid-3 .vs-x    { color: var(--ink-faint); font-weight: 500; }

/* =============================================================
   LAUNCH / TRUST — compact
   ============================================================= */
#lanzamiento.section { padding-block: clamp(2.5rem, 5vw, 4rem); }
#lanzamiento .section-head { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.launch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 720px)  { .launch-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

.launch-card {
  padding: 18px 18px 20px;
  background: rgba(18,18,20,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .35s var(--ease-out), border-color .3s, background .3s;
}
.launch-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-mid);
  background: rgba(255,255,255,.04);
}
.launch-card-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.launch-card-icon svg { width: 18px; height: 18px; }
.launch-card h3,
.launch-card-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin: 0 0 4px;
}
.launch-card p {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.45;
}

/* =============================================================
   FINAL CTA V2 — wide copper card (matches reference)
   ============================================================= */
.section-final-v2 { padding-block: clamp(3rem, 7vw, 5rem); }
.final-cta-v2 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 100% 100% at 80% 50%, rgba(255,255,255,.45) 0%, rgba(255,255,255,.18) 35%, transparent 70%),
    linear-gradient(120deg, rgba(8,8,10,.95) 0%, rgba(18,12,8,.85) 60%, rgba(45,25,15,.7) 100%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 30px 80px rgba(0,0,0,.55),
    0 0 60px rgba(255,255,255,.08);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 760px) {
  .final-cta-v2 { grid-template-columns: 0.9fr 1.1fr; }
}
.final-cta-v2-glow {
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 60%;
  height: 120%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.final-cta-v2-media {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.final-cta-v2-media img {
  max-width: 78%;
  max-height: 260px;
  object-fit: contain;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,.85))
    drop-shadow(0 10px 18px rgba(255,255,255,.25));
  animation: hero-float 7s ease-in-out infinite;
}
.final-cta-v2-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.final-cta-v2-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.final-cta-v2-date {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-soft);
  font-weight: 500;
}
.final-cta-v2-sub {
  font-size: 14.5px;
  color: rgba(244,243,239,.78);
  max-width: 40ch;
}
.final-cta-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* =============================================================
   FOOTER V2 — 4 col with social icons
   ============================================================= */
.footer-v2 {
  position: relative;
  /* Fondo sólido (sin gradiente, a pedido del usuario 2026-06-10). */
  background: var(--deep-black);
  padding-block: 76px 28px;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: none;
}
.footer-v2::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amethyst-glow), transparent);
  pointer-events: none;
}
.footer-v2-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
@media (min-width: 900px) {
  .footer-v2-top {
    grid-template-columns: 1fr 2fr auto;
    align-items: start;
  }
}
.footer-v2-brand img {
  height: 30px;
  width: auto;
  display: block;
}
.footer-v2-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 520px) {
  .footer-v2-cols { grid-template-columns: 1fr 1fr; }
}
.footer-v2 .footer-col {
  text-align: left;
  display: flex;
  flex-direction: column;
}
.footer-v2 .footer-col h3 {
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-v2 .footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.footer-v2 .footer-col ul li { margin: 0; padding: 0; line-height: 1; }
.footer-v2 .footer-col a {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
  padding: 2px 0;
  text-decoration: none;
  transition: color .2s;
}
.footer-v2 .footer-col a:hover { color: var(--ink); }
.footer-v2-social {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer-v2-social a {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s, border-color .25s, transform .2s var(--ease-bounce);
}
.footer-v2-social a:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--line-mid);
  color: var(--ink);
  transform: scale(1.06);
}
.footer-v2-social svg { width: 16px; height: 16px; }

.footer-v2 .footer-base {
  border-top: 0;
  padding-top: 0;
}

/* =============================================================
   STICKY MOBILE CTA
   ============================================================= */
.sticky-buy {
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - 1.25rem);
  max-width: 440px;
  bottom: -120px;
  z-index: 90;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  background: rgba(14,14,16,.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--line-mid);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transition: bottom .45s var(--ease-out);
}
.sticky-buy.is-visible {
  bottom: max(12px, env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .sticky-buy { display: none; }
}
@media (max-width: 479px) {
  .sticky-buy {
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 18px;
  }
  .sticky-buy-info { flex: 1 1 auto; justify-content: flex-start; text-align: left; }
  .sticky-buy .btn { flex: 0 0 auto; width: auto; }
}
.sticky-buy-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.sticky-buy-img {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sticky-buy-img img {
  display: block !important;
  width: 80%; height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.sticky-buy-img::before { content: none !important; }
.sticky-buy-text { font-size: 13px; min-width: 0; color: var(--ink); }
.sticky-buy-text strong { display: block; font-weight: 500; font-size: 13.5px; }
.sticky-buy-text span { display: block; color: var(--ink-dim); font-size: 12px; letter-spacing: .02em; }

/* =============================================================
   Misc polish
   ============================================================= */
.section-head .h-section { text-align: center; }
.section-head .lede { text-align: center; }

/* Hide hero-product / particles / wave that belonged to old hero so they don't bleed */
.hero { display: none !important; }

/* Hide legacy stories that may be referenced */
.story, .focus { display: none; }

/* =============================================================
   Premium reveal — softer cinematic fade
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Internal stagger: children fade after parent */
.reveal .reveal-child,
.reveal .loved-card,
.reveal .use-card,
.reveal .launch-card,
.reveal .vs-card,
.reveal .gallery-tile,
.reveal .about-stat,
.reveal .about-feature,
.reveal .faq-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.in .reveal-child,
.reveal.in .loved-card,
.reveal.in .use-card,
.reveal.in .launch-card,
.reveal.in .vs-card,
.reveal.in .gallery-tile,
.reveal.in .about-stat,
.reveal.in .about-feature,
.reveal.in .faq-item {
  opacity: 1;
  transform: translateY(0);
}
.reveal.in .loved-card:nth-child(1),
.reveal.in .use-card:nth-child(1),
.reveal.in .launch-card:nth-child(1),
.reveal.in .vs-card:nth-child(1),
.reveal.in .about-stat:nth-child(1),
.reveal.in .about-feature:nth-child(1),
.reveal.in .gallery-tile:nth-child(1) { transition-delay: .08s; }
.reveal.in .loved-card:nth-child(2),
.reveal.in .use-card:nth-child(2),
.reveal.in .launch-card:nth-child(2),
.reveal.in .vs-card:nth-child(2),
.reveal.in .about-stat:nth-child(2),
.reveal.in .about-feature:nth-child(2),
.reveal.in .gallery-tile:nth-child(2) { transition-delay: .18s; }
.reveal.in .use-card:nth-child(3),
.reveal.in .launch-card:nth-child(3),
.reveal.in .vs-card:nth-child(3),
.reveal.in .about-stat:nth-child(3),
.reveal.in .about-feature:nth-child(3),
.reveal.in .gallery-tile:nth-child(3) { transition-delay: .28s; }
.reveal.in .use-card:nth-child(4),
.reveal.in .gallery-tile:nth-child(4) { transition-delay: .38s; }
.reveal.in .gallery-tile:nth-child(n+5) { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
  .reveal > * { transition: none !important; transform: none !important; }
}

/* =============================================================
   Meta-link inside product cards
   ============================================================= */
.loved-meta a.loved-meta-link {
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}
.loved-meta a.loved-meta-link:hover { color: var(--ink); }
.loved-name a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}
.loved-name a:hover { opacity: .75; }

/* =============================================================
   A11y utility
   ============================================================= */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   GALLERY — creativos + packaging masonry-like grid
   ============================================================= */
.section-gallery { padding-block: clamp(2rem, 5vw, 4rem); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(18,18,20,.55);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease-out), border-color .3s, box-shadow .3s;
}
.gallery-tile--lg {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}
@media (min-width: 1024px) {
  .gallery-tile--lg { grid-column: span 2; }
}
.gallery-tile:hover {
  transform: translateY(-3px) scale(1.005);
  border-color: var(--line-mid);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-out), filter .5s;
  filter: brightness(.95) saturate(1.02);
}
.gallery-tile:hover img {
  transform: scale(1.05);
  filter: brightness(1) saturate(1.1);
}
.gallery-tile figcaption {
  position: absolute;
  left: 14px; bottom: 12px;
  padding: 6px 12px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.gallery-tile:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   FAQ SHARE buttons
   ============================================================= */
.faq-share {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: 22px 24px;
  text-align: center;
  background: rgba(18,18,20,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.faq-share > span {
  display: block;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 12px;
  letter-spacing: .04em;
}
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  transition: background .25s, border-color .25s, transform .2s var(--ease-bounce);
}
.share-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--line-mid);
  transform: scale(1.04);
}
.share-btn svg { width: 14px; height: 14px; }

/* =============================================================
   nav-brand img tweaks (image hidden alt now)
   ============================================================= */
.nav-brand img,
.footer-v2-brand img,
.about-mark { user-select: none; -webkit-user-drag: none; }


/* ============ checkout.css ============ */
/* =============================================================
   CALMÁ — Checkout (premium minimal)
   ============================================================= */

.page-checkout {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,.05), transparent 65%),
    #050505;
  min-height: 100vh;
  color: var(--ink);
}

.checkout-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 32px);
  background: rgba(10,10,12,.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 13px;
  transition: color .2s, background .2s;
}
.checkout-back:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.checkout-back svg { width: 12px; height: 12px; }
.checkout-brand img { height: 24px; width: auto; }
.checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.checkout-secure svg { width: 14px; height: 14px; }

@media (max-width: 520px) {
  .checkout-secure { display: none; }
}

.checkout-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 32px) 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 40px);
}
@media (min-width: 900px) {
  .checkout-shell { grid-template-columns: 1.4fr 1fr; }
}

.checkout-form { min-width: 0; }
.checkout-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -.015em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 6px;
}
.checkout-sub {
  font-size: 13.5px;
  color: var(--ink-dim);
  margin-bottom: 24px;
}

.ck-step {
  margin: 0 0 22px;
  background: rgba(18,18,20,.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  /* display:flex normaliza el <legend>: deja de "pisar" el borde del
     fieldset y se alinea con el contenido. */
  display: flex;
  flex-direction: column;
}
.ck-step legend {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
  padding: 0;
  margin: 0 0 16px;
}
.ck-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
}
.ck-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 600px) { .ck-row { grid-template-columns: 1fr 1fr; } }

.ck-field { display: block; }
.ck-label {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
  font-weight: 500;
}
.ck-field input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.ck-field input:focus {
  outline: none;
  border-color: var(--ink-dim);
  background: rgba(255,255,255,.06);
}
.ck-field input::placeholder { color: var(--ink-faint); }

/* Shipping radios */
.ck-saved-addr { margin-bottom: 16px; display: grid; gap: 8px; }
.ck-saved-addr-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); }
.ck-saved-addr-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ck-saved-card {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ck-saved-card:hover { border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.ck-saved-card.is-active { border-color: var(--copper); background: rgba(255,255,255,.12); }
.ck-saved-card-label { font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ck-saved-card-label em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.16); color: var(--copper); }
.ck-saved-card-recipient { font-size: 12px; color: var(--ink-dim); }
.ck-saved-card-line { font-size: 12px; color: var(--ink-faint); line-height: 1.4; }

.ck-shipping, .ck-pay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.ck-ship, .ck-paymethod {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ck-ship input, .ck-paymethod input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ck-ship:has(input:checked),
.ck-paymethod:has(input:checked) {
  border-color: var(--ink);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.ck-ship-body strong, .ck-pay-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.ck-ship-body span, .ck-pay-body > span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.ck-ship-body em, .ck-pay-body em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}
.ck-ship-price {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ck-pay-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ck-pay-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: var(--copper-soft, #ffffff);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ck-pay-badge--alt {
  background: rgba(255,255,255,.06);
  color: var(--ink-dim);
}

/* Summary */
.checkout-summary {
  position: sticky;
  top: 80px;
  align-self: start;
  background: rgba(18,18,20,.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.ck-sum-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 14px;
}
.ck-sum-items {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ck-sum-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ck-sum-item:last-child { border-bottom: 0; }
.ck-sum-item-img {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ck-sum-item-img img { max-width: 80%; max-height: 80%; }
.ck-sum-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.ck-sum-item-meta {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.ck-sum-item-price {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ck-sum-empty {
  text-align: center;
  padding: 30px 0;
  color: var(--ink-faint);
  font-size: 13px;
}
.ck-sum-empty a { color: var(--ink); text-decoration: underline; }

.ck-sum-totals {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ck-sum-totals div {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--ink-dim);
}
.ck-sum-totals dt, .ck-sum-totals dd { margin: 0; }
.ck-sum-grand {
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}
.ck-sum-grand dt {
  font-size: 13px;
  color: var(--ink-dim);
}
.ck-sum-grand dd {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ck-sum-discount dt, .ck-sum-discount dd { color: var(--copper) !important; }

/* ── Cupón ── */
.ck-coupon { margin-top: 16px; }
.ck-coupon-row { display: flex; gap: 8px; }
.ck-coupon-input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: border-color .2s, background .2s;
}
.ck-coupon-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.ck-coupon-input:focus { outline: none; border-color: var(--copper); background: rgba(255,255,255,.06); }
.ck-coupon-btn {
  flex-shrink: 0;
  padding: 0 18px;
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-mid);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.ck-coupon-btn:hover { background: rgba(255,255,255,.1); border-color: var(--line-strong); }
.ck-coupon-msg { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; }
.ck-coupon-msg.is-ok { color: #7fd4a3; }
.ck-coupon-msg.is-warn { color: #d8b070; }
.ck-coupon-msg.is-error { color: #ff9999; }

.ck-sum-trust {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ck-sum-trust svg { width: 12px; height: 12px; }

.ck-submit {
  margin-top: 8px;
}
.ck-submit[disabled] {
  opacity: .6;
  cursor: wait;
}
.ck-fine {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.45;
}
.ck-error {
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(220, 60, 60, .12);
  border: 1px solid rgba(220, 60, 60, .35);
  color: #ff9999;
  font-size: 13px;
}
.ck-error-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ── Progreso de checkout (paso 1 datos+envío → paso 2 pago) ── */
.ck-progress {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
}
.ck-progress li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  transition: color .2s, border-color .2s;
}
.ck-progress li span {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-dim);
  font-size: 11px;
}
.ck-progress li.is-active { color: var(--ink); border-bottom-color: var(--copper); }
.ck-progress li.is-active span { background: var(--copper); color: #1a1209; }
.ck-progress li.is-done { color: var(--copper-soft); border-bottom-color: var(--copper-glow); }
.ck-progress li.is-done span { background: rgba(255,255,255,.2); color: var(--copper-soft); }

/* ── Volver al paso anterior ── */
.ck-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 4px 0;
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .2s;
}
.ck-back:hover { color: var(--ink); }
.ck-back svg { width: 14px; height: 14px; }

/* =============================================================
   CONFIRM MODAL
   ============================================================= */
.ck-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.ck-modal[hidden] { display: none; }
.ck-modal-card {
  background: var(--bg-1);
  border: 1px solid var(--line-mid);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 36px);
  width: 100%;
  max-width: 520px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: ck-modal-in .5s var(--ease-out) both;
}
@keyframes ck-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ck-modal-success {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(80, 200, 120, .18);
  color: #4ade80;
  display: flex; align-items: center; justify-content: center;
}
.ck-modal-success svg { width: 28px; height: 28px; }
.ck-modal-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.8rem;
  text-align: center;
  margin: 0 0 4px;
  color: var(--ink);
}
.ck-modal-sub {
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0 0 8px;
}
.ck-modal-code {
  text-align: center;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink);
  padding: 10px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 20px;
}
.ck-modal-block { margin-top: 8px; }

/* Currency toggle UYU / USD */
.ck-currency-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
}
.ck-currency-btn {
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ck-currency-btn.is-active {
  background: rgba(255,255,255,.10);
  color: var(--ink);
}
.ck-currency-btn:hover:not(.is-active) {
  color: var(--ink);
}
.ck-modal-block h3 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}
.ck-modal-warn {
  font-size: 12.5px;
  color: #f5c466;
  background: rgba(255,255,255, .08);
  border: 1px solid rgba(255,255,255, .25);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
  line-height: 1.45;
}
.ck-bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.ck-bank-row:last-child { border-bottom: 0; }
.ck-bank-row span {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.ck-bank-row strong {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}
.ck-modal-tip {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.ck-modal-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =============================================================
   CONFIRMATION PAGE
   ============================================================= */
.confirm-shell {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(14px, 2.4vw, 28px) clamp(16px, 4vw, 28px) 40px;
}
.confirm-card {
  background: rgba(18,18,20,.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 34px);
  text-align: center;
}
.confirm-icon {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(80, 200, 120, .18);
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: confirm-pop .55s var(--ease-out) both;
}
@keyframes confirm-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.confirm-icon svg { width: 32px; height: 32px; }
.confirm-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.confirm-sub {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0 0 16px;
  line-height: 1.5;
}
.confirm-code-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  margin-bottom: 18px;
}
.confirm-code-block span {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.confirm-code-block strong {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--ink);
}
.confirm-block {
  text-align: left;
  margin-top: 14px;
  padding: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.confirm-block h2 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 14px;
  font-weight: 500;
}
.confirm-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.confirm-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-dim);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.confirm-list li:last-child { border-bottom: 0; }
.confirm-list em { font-style: normal; color: var(--ink-faint); font-size: 11px; }
.confirm-list strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.confirm-totals {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.confirm-totals div {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--ink-dim);
}
.confirm-totals dt, .confirm-totals dd { margin: 0; }
.confirm-grand {
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}
.confirm-grand dd {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.confirm-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.confirm-steps li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.confirm-steps strong {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.confirm-steps span {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.confirm-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.confirm-empty {
  margin-top: 20px;
  padding: 18px;
  background: rgba(255,255,255, .06);
  border: 1px solid rgba(255,255,255, .2);
  border-radius: 12px;
  text-align: left;
}
.confirm-empty p {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 0 0 8px;
}
.confirm-empty p:last-child { margin: 0; }


/* =============================================================
   =============================================================
   PREMIUM POLISH PASS — visual base
   Centered layouts · refined spacing · premium icons ·
   vibrant final CTA · footer alignment · about redesign
   =============================================================
   ============================================================= */

/* ---- 0. Global rhythm & breathing ---- */
:root {
  --section-y: clamp(4.5rem, 11vw, 11rem);
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --content-max: 1240px;
  --content-narrow: 880px;
}
.section { padding-block: var(--section-y); }

/* Pull tighter blocks back to a comfortable cadence */
#casos.section,
#comparativa.section,
#lanzamiento.section,
.section-loved {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
#tienda.section { padding-top: clamp(4rem, 8vw, 6.5rem); }

/* ---- 1. Section heads — centered premium variant overriding "--left" ---- */
.section-head {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.section-head--left,
.section-about-v2 .section-head--left {
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
  gap: 14px;
  display: flex;
}
.section-head--left .loved-title,
.section-head--left .h-section,
.section-head--left .h-display {
  text-align: center;
  margin: 0;
}
.section-head--left .loved-sub,
.section-head--left .lede {
  text-align: center;
  margin: 0 auto;
  max-width: 52ch;
}

/* Lift section titles — bigger, more premium */
.loved-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
}
.loved-title em {
  font-style: italic;
  color: var(--copper-soft);
}
.loved-sub {
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The little wordmark next to "Diseñado con cuidado" — drop it */
.section-about-v2 .about-mark { display: none; }

/* ---- 2. Loved / Tienda grid — center & balance ---- */
.loved-grid {
  max-width: 1080px;
  margin-inline: auto;
  gap: clamp(16px, 2.2vw, 22px);
}

/* ---- 3. Gallery — keep alignment, but center the section ---- */
.section-gallery .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-gallery .gallery-grid {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

/* ---- 4. About v2 — centered & airier ---- */
.section-about-v2 {
  padding-block: clamp(4.5rem, 10vw, 9rem);
}
.section-about-v2 .about-split-v2 {
  max-width: 1100px;
  margin-inline: auto;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.about-features {
  gap: 26px;
}
.about-feature h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.005em;
}
.about-feature p {
  font-size: 14px;
  line-height: 1.6;
}
.about-feature-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.12);
  color: var(--copper-soft);
}
.about-feature-icon svg { width: 22px; height: 22px; }

/* ---- 5. About stats — premium tile redesign ---- */
.about-stats {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  gap: 18px;
  max-width: 960px;
  grid-template-columns: repeat(3, 1fr);
}
.about-stat {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 26px 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.10), transparent 55%),
    rgba(16,16,18,.62);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease-out), border-color .3s, background .3s;
}
.about-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  opacity: .6;
}
.about-stat::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 100%, rgba(255,255,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  z-index: -1;
}
.about-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.30);
}
.about-stat:hover::after { opacity: 1; }
.about-stat-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  color: var(--copper-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.about-stat-icon svg { width: 20px; height: 20px; stroke-width: 1.3; }
.about-stat strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.about-stat span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
  white-space: normal;
}
@media (max-width: 700px) {
  .about-stats { grid-template-columns: 1fr; gap: 12px; }
  .about-stat { flex-direction: row; align-items: center; padding: 20px 22px; }
  .about-stat strong { font-size: 1.8rem; }
}

/* ---- 6. Final CTA — vibrant, alive, still premium ---- */
.section-final-v2 { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-final-v2 .container { max-width: 1180px; }
.final-cta-v2 {
  padding: clamp(2.75rem, 6vw, 5rem) clamp(1.75rem, 5vw, 4rem);
  border-radius: 32px;
  border-color: rgba(255,255,255,.22);
  background:
    radial-gradient(ellipse 70% 100% at 88% 50%, rgba(255,255,255,.18) 0%, transparent 55%),
    radial-gradient(ellipse 100% 120% at 25% 110%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 40%, transparent 70%),
    radial-gradient(ellipse 60% 60% at 0% 0%, rgba(120,180,200,.10) 0%, transparent 55%),
    linear-gradient(125deg, #0a0807 0%, #15100c 45%, #2c1d12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 40px 100px rgba(0,0,0,.65),
    0 0 90px rgba(255,255,255,.18);
}
.final-cta-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(circle at 8% 90%, rgba(255,255,255,.10), transparent 38%);
  pointer-events: none;
  z-index: 0;
}
.final-cta-v2-glow {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.30), transparent 60%);
  width: 80%; height: 140%;
  filter: blur(50px);
}
.final-cta-v2-body { gap: 18px; }
.final-cta-v2-date {
  color: #f5deb3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
}
.final-cta-v2-date::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #f5deb3;
  box-shadow: 0 0 12px rgba(255,255,255,.7);
  animation: ctapulse 2.2s ease-in-out infinite;
}
@keyframes ctapulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.65); }
}
.final-cta-v2-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
  line-height: .95;
  letter-spacing: -.025em;
  background: linear-gradient(180deg, #ffffff 0%, #f5deb3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.final-cta-v2-sub {
  color: rgba(244,243,239,.82);
  font-size: 15px;
  line-height: 1.55;
}
.final-cta-v2-media img {
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,.85))
    drop-shadow(0 14px 24px rgba(255,255,255,.32));
}
.final-cta-v2-actions { gap: 12px; margin-top: 6px; }

/* ---- 7. Footer — fully centered ---- */
.footer-v2 {
  text-align: center;
  padding-block: clamp(4rem, 7vw, 5.5rem) clamp(1.75rem, 3vw, 2.5rem);
  /* Fondo sólido (sin gradiente, a pedido del usuario 2026-06-10). */
  background: var(--deep-black);
}
.footer-v2 .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-v2-top {
  grid-template-columns: 1fr !important;
  justify-items: center;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  gap: clamp(2.25rem, 5vw, 3rem);
  padding-bottom: clamp(2.25rem, 5vw, 3rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.25rem);
  text-align: center;
}
.footer-v2-brand {
  display: inline-flex;
  justify-content: center;
}
.footer-v2-brand img {
  height: 38px;
  margin-inline: auto;
}
.footer-v2-cols {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  width: 100%;
  max-width: 720px;
  gap: clamp(1.5rem, 4vw, 3rem);
  justify-items: center;
  margin-inline: auto;
}
@media (max-width: 560px) {
  .footer-v2-cols { grid-template-columns: 1fr; gap: 1.75rem; }
}
.footer-v2 .footer-col {
  text-align: center;
  align-items: center;
  justify-content: center;
}
.footer-v2 .footer-col h3 {
  color: var(--copper-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-align: center;
  margin-bottom: 18px;
}
.footer-v2 .footer-col ul {
  align-items: center;
  text-align: center;
  gap: 10px;
}
.footer-v2 .footer-col a {
  text-align: center;
  font-size: 13.5px;
}
.footer-v2-social {
  justify-content: center;
  gap: 12px;
}
.footer-v2 .footer-base {
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-top: 0;
}
.footer-v2 .footer-pay {
  justify-content: center;
  gap: 18px;
}
.footer-v2 .footer-base small {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

/* ---- 8. ABOUT / NUESTRA HISTORIA — premium redesign ---- */
.about-shell {
  padding-top: calc(var(--nav-h) + max(24px, env(safe-area-inset-top)) + 3.5rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.about-shell .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero */
.about-hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  width: 100%;
}
.about-hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.28);
  color: #f5deb3;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 28px;
  font-weight: 500;
}
.about-hero .kicker::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--copper-soft);
  box-shadow: 0 0 8px rgba(255,255,255,.5);
}
.about-hero .h-display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
  text-align: center;
}
.about-hero .h-display em {
  display: block;
  margin-top: 10px;
  font-style: italic;
  color: var(--ink-dim);
  font-size: .82em;
}
.about-lede-offset,
.about-hero .lede {
  margin: 28px auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.55vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink-dim);
  text-align: center;
}

/* Hero image */
.about-image {
  margin: clamp(3rem, 7vw, 5rem) auto;
  max-width: 980px;
  aspect-ratio: 16/9;
  border-radius: 28px;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.about-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

/* Values */
.about-vals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto clamp(4rem, 9vw, 6.5rem);
  width: 100%;
}
@media (min-width: 768px) {
  .about-vals { grid-template-columns: repeat(3, 1fr); }
}
.about-val {
  position: relative;
  text-align: left;
  padding: 36px 30px 32px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.06), transparent 50%),
    rgba(16,16,18,.62);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .45s var(--ease-out), border-color .3s, background .3s;
}
.about-val::before {
  content: "";
  position: absolute;
  top: 0; left: 30px; width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--copper-soft), transparent);
}
.about-val:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.28);
}
.about-val-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  color: var(--copper-soft);
  margin-bottom: 16px;
  line-height: 1;
  letter-spacing: -.02em;
}
.about-val h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17.5px;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -.005em;
}
.about-val p {
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Story */
.about-story {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.about-story .kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--copper-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
}
.about-story .h-section,
.about-story .about-section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -.02em;
  margin-bottom: 40px;
  color: var(--ink);
  line-height: 1.08;
  text-align: center;
}
.about-story .about-section-title em,
.about-story .h-section em {
  font-style: italic;
  color: var(--copper-soft);
}
.about-story p {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.85;
  color: var(--ink-dim);
  margin-bottom: 22px;
  text-align: left;
}
.about-story p strong, .about-story p em {
  color: var(--ink);
  font-weight: 500;
  font-style: normal;
}
.about-story p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 3.6em;
  float: left;
  line-height: .85;
  margin: 6px 14px 0 0;
  color: var(--copper-soft);
  font-weight: 400;
}

/* Pull quote — new emotional anchor */
.about-quote {
  max-width: 760px;
  margin: clamp(3rem, 7vw, 5rem) auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.about-quote::before {
  content: "“";
  font-family: var(--display);
  font-size: 6rem;
  line-height: 1;
  color: var(--copper-soft);
  position: absolute;
  top: -.2em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 16px;
  opacity: .9;
}
.about-quote p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 16px 0 18px;
}
.about-quote cite {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* About metric chips (optional row) */
.about-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px auto 0;
  padding: 0;
}
.about-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.about-chips li svg {
  width: 14px; height: 14px;
  color: var(--copper-soft);
}

/* About CTA */
.about-cta {
  max-width: 880px;
  margin: clamp(4rem, 9vw, 6.5rem) auto 0;
  text-align: center;
  padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 90% at 85% 0%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(ellipse 80% 80% at 10% 100%, rgba(255,255,255,.22), transparent 60%),
    rgba(16,12,8,.72);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 30px 80px rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
}
.about-cta-deco {
  position: absolute;
  bottom: -3rem;
  right: -2rem;
  width: min(40%, 16rem);
  opacity: 0.12;
  pointer-events: none;
  object-fit: contain;
}
.about-cta .kicker {
  color: #f5deb3;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
}
.about-cta .kicker::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--copper-soft);
  box-shadow: 0 0 10px var(--copper-soft);
}
.about-cta .h-section {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: 0;
}
.about-cta .lede {
  margin: 18px auto 28px;
  font-size: 15px;
  color: var(--ink-dim);
  max-width: 50ch;
}

/* ---- 9. Misc final pass on shared headers across the site ---- */
.section-head .h-section,
.section-head .h-display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.08;
}
.section-head .h-section em,
.section-head .h-display em {
  font-style: italic;
  color: var(--copper-soft);
}
.section-head .kicker {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--copper-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 500;
}

/* PDP & checkout pages remain untouched (CRO scope) */


/* =============================================================
   =============================================================
   BRAND REPAINT — bone + soft mauve editorial palette
   Replaces the "AI orange" copper feel with an editorial,
   editorial cream + dusty violet vibe that matches the OG wallpaper.
   ============================================================= */
:root {
  /* === New brand tokens === */
  --bone:           #f4f3ef;
  --bone-soft:      #ffffff;
  --bone-deep:      #cfcac0;
  --bone-glow:      rgba(255,255,255, .35);

  --mauve:          #f4f3ef;
  --mauve-soft:     #ffffff;
  --mauve-deep:     #cfcac0;
  --mauve-glow:     rgba(255,255,255, .35);

  --rose:           #f4f3ef;
  --rose-soft:      #ffffff;

  /* === Remap legacy copper tokens to the new palette
         (every component that referenced --copper now reads as bone) === */
  --copper:         var(--bone);
  --copper-soft:    var(--bone-soft);
  --copper-deep:    var(--bone-deep);
  --copper-glow:    var(--bone-glow);
}

/* Recolor every "copper-tinted" or "warm orange" hard-coded value */

/* Hero loader mark (if any orange dot was present) */
.loader-progress-bar { background: var(--bone-soft) !important; }

/* PDP founder pill — bone instead of cream-ish-yellow */
.pdp-badge-pill--founders {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.35);
  color: var(--bone-soft);
}
.pdp-badge-pill--founders .pdp-badge-dot {
  background: var(--bone-soft);
  box-shadow: 0 0 12px rgba(255,255,255,.7);
}

/* PDP founder banner — refresh to bone/mauve */
.pdp-founder-banner {
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.25);
}
.pdp-founder-icon {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  color: var(--bone-soft);
}
.pdp-founder-text li::before { background: rgba(255,255,255,.55); }

/* PDP rating stars — bone */
.pdp-info .pdp-rating-stars { color: var(--bone-soft); }
.pdp-rating-pulse {
  background: var(--bone-soft);
  box-shadow: 0 0 8px rgba(255,255,255,.55);
}

/* PDP pack popular highlight — mauve accent */
.pdp-pack--popular {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(36,32,42,.85), rgba(20,20,22,.85));
  border-color: rgba(255,255,255,.32);
}
.pdp-pack--popular .pdp-pack-tag {
  background: linear-gradient(135deg, var(--bone-soft) 0%, var(--mauve-soft) 100%);
  color: #1a1320;
  box-shadow: 0 6px 22px rgba(255,255,255,.35);
}

/* PDP pack badges (−20%, Envío gratis) — mauve mint */
.pdp-pack-badge {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.40);
  color: var(--mauve-soft);
}

/* PDP price save badge — bone */
.pdp-price-save {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.30);
  color: var(--bone-soft);
}

/* PDP stock indicator — bone */
.pdp-stock {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
}
.pdp-stock-dot {
  background: var(--bone-soft);
  box-shadow: 0 0 12px rgba(255,255,255,.7);
}

/* PDP benefit ticks — soft mauve */
.pdp-tick {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.36);
  color: var(--mauve-soft);
}

/* PDP ticker dot — mauve */
.pdp-ticker-dot {
  background: var(--mauve-soft);
  box-shadow: 0 0 10px rgba(255,255,255,.6);
}

/* Final CTA — replace copper bath with bone+mauve atmospheric */
.final-cta-v2 {
  border-color: rgba(255,255,255,.22);
  background:
    radial-gradient(ellipse 70% 100% at 88% 50%, rgba(255,255,255,.16) 0%, transparent 55%),
    radial-gradient(ellipse 90% 100% at 25% 110%, rgba(255,255,255,.38) 0%, rgba(255,255,255,.10) 40%, transparent 70%),
    radial-gradient(ellipse 60% 60% at 0% 0%, rgba(255,255,255,.10) 0%, transparent 55%),
    linear-gradient(125deg, #0a0810 0%, #14101a 45%, #221a2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 40px 100px rgba(0,0,0,.65),
    0 0 90px rgba(255,255,255,.16);
}
.final-cta-v2::before {
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(circle at 8% 90%, rgba(255,255,255,.12), transparent 38%);
}
.final-cta-v2-glow {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.30), transparent 60%);
}
.final-cta-v2-date {
  color: var(--bone-soft);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.final-cta-v2-date::before {
  background: var(--bone-soft);
  box-shadow: 0 0 12px rgba(255,255,255,.7);
}
.final-cta-v2-title {
  background: linear-gradient(180deg, #ffffff 0%, var(--bone-soft) 60%, var(--mauve-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.final-cta-v2-media img {
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,.85))
    drop-shadow(0 14px 24px rgba(255,255,255,.30));
}

/* About CTA — recolor */
.about-cta {
  border-color: rgba(255,255,255,.22);
  background:
    radial-gradient(ellipse 70% 90% at 85% 0%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(ellipse 80% 80% at 10% 100%, rgba(255,255,255,.22), transparent 60%),
    rgba(14,12,18,.72);
}
.about-cta .kicker {
  color: var(--bone-soft);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.about-cta .kicker::before {
  background: var(--bone-soft);
  box-shadow: 0 0 10px var(--bone-soft);
}

/* About hero / sections kickers */
.about-hero .kicker {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  color: var(--mauve-soft);
}
.about-hero .kicker::before {
  background: var(--mauve-soft);
  box-shadow: 0 0 8px rgba(255,255,255,.5);
}
.about-story .kicker {
  color: var(--bone-soft);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}

/* About vals — drop the copper top-border line for bone */
.about-val::before {
  background: linear-gradient(90deg, var(--bone-soft), transparent);
}
.about-val-num { color: var(--bone-soft); }
.about-val:hover { border-color: rgba(255,255,255,.28); }

/* About chips icon */
.about-chips li svg { color: var(--bone-soft); }

/* About quote large mark */
.about-quote::before { color: var(--bone-soft); }

/* About stat icons */
.about-stat-icon {
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.18);
  color: var(--bone-soft);
}
.about-stat:hover { border-color: rgba(255,255,255,.30); }
.about-stat::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.about-stat::after {
  background: radial-gradient(circle at 80% 100%, rgba(255,255,255,.18), transparent 60%);
}

/* Section heads kickers */
.section-head .kicker {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  color: var(--mauve-soft);
}

/* Loved title em accent */
.loved-title em { color: var(--bone-soft); }

/* About story drop-cap & em accent */
.about-story p:first-of-type::first-letter { color: var(--bone-soft); }
.about-story .about-section-title em,
.about-story .h-section em { color: var(--bone-soft); }
.section-head .h-section em,
.section-head .h-display em { color: var(--bone-soft); }
.about-hero .h-display em { color: var(--mauve-soft); }

/* About feature icon */
.about-feature-icon { color: var(--bone-soft); }


/* =============================================================
   =============================================================
   PDP CONVERSION PASS — make people want to buy NOW
   Founder hero · ambient color · urgent CTA · premium urgency
   ============================================================= */

/* ---- Ambient color wash on PDP page ---- */
.pdp {
  position: relative;
  isolation: isolate;
}
.pdp::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 85% 12%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 30%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 85%, rgba(255,255,255,.06) 0%, transparent 60%);
  opacity: .9;
}

/* ---- PDP title — bigger, bolder, more presence ---- */
.pdp-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  line-height: 1.02;
  letter-spacing: -.025em;
  background: linear-gradient(180deg, #ffffff 0%, var(--bone-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- FOUNDER BANNER — promoted to hero block ---- */
.pdp-founder-banner {
  display: block;
  position: relative;
  padding: 24px 22px 22px;
  margin: 26px 0 28px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(ellipse 90% 80% at 0% 100%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(28,22,38,.85), rgba(16,14,22,.85));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 26px 60px rgba(0,0,0,.45),
    0 0 60px rgba(255,255,255,.12);
}
.pdp-founder-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
.pdp-founder-banner::after {
  content: "ACCESO FUNDADOR";
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .26em;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--bone-soft) 0%, var(--mauve-soft) 100%);
  color: #1a1320;
  box-shadow: 0 8px 22px rgba(255,255,255,.30);
}
.pdp-founder-banner .pdp-founder-icon {
  display: none;
}
.pdp-founder-text {
  display: block;
  width: 100%;
}
.pdp-founder-text > strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 16px;
  padding-right: 130px;
}
.pdp-founder-text ul {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.pdp-founder-text li {
  padding: 10px 12px 10px 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  position: relative;
}
.pdp-founder-text li::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, var(--bone-soft), var(--mauve-soft));
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}
.pdp-founder-text li strong {
  color: var(--bone-soft);
  font-weight: 600;
}

/* ---- Variant label — show urgency loud ---- */
.pdp-variant-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pdp-variant-label > span:first-child {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}
.pdp-variant-hint {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 6px 12px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.30);
  color: var(--bone-soft) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.pdp-variant-hint::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bone-soft);
  box-shadow: 0 0 10px rgba(255,255,255,.7);
  animation: pdp-pulse 1.8s ease-out infinite;
}

/* ---- PRIMARY CTA — much more alive ---- */
.pdp-actions [data-pdp-add],
/* CTA principal de la PDP — clean, sólido (estilo Apple). Sin gradiente,
   glow ni sheen (quedaban turbios en el tema claro). */
.btn.btn-primary.btn-lg[data-pdp-add] {
  position: relative;
  background: var(--ink) !important;
  color: #fff !important;
  border: 0;
  box-shadow: 0 8px 24px rgba(23,19,13,.20);
  font-weight: 600;
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), filter .25s;
}
.pdp-actions [data-pdp-add]::before,
.pdp-actions [data-pdp-add]::after { content: none !important; display: none !important; }
.pdp-actions [data-pdp-add]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(23,19,13,.28);
  filter: brightness(1.12);
}
.pdp-actions [data-pdp-add] svg { stroke: #fff !important; }

/* Qty stepper — premium dark glass */
.pdp-qty {
  background: rgba(20,20,22,.6);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- Price row — make hero ---- */
.pdp-info .pdp-price-row {
  align-items: baseline;
  gap: 14px;
  padding: 16px 0 4px;
}
.pdp-price {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffffff, var(--bone-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Stock row — softer, less alarmist ---- */
.pdp-stock {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 14px;
}

/* ---- Live ticker — softer, less spammy color ---- */
.pdp-ticker {
  bottom: max(20px, env(safe-area-inset-bottom));
  background: rgba(14,12,18,.92);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 48px rgba(0,0,0,.6),
    0 0 30px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.pdp-ticker-dot {
  background: var(--mauve-soft);
  box-shadow: 0 0 10px rgba(255,255,255,.6);
}

/* ---- Trust grid — slightly richer ---- */
.pdp-trust-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.05), transparent 60%),
    rgba(18,16,22,.55);
  border-color: rgba(255,255,255,.10);
}
.pdp-trust-card:hover {
  border-color: rgba(255,255,255,.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.08), transparent 60%),
    rgba(24,22,30,.65);
}
.pdp-trust-icon {
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.20);
  color: var(--bone-soft);
}

/* Loved card — fully clickable card surface */
.loved-card { cursor: pointer; }
.loved-card-link {
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
}
.loved-card .loved-fav,
.loved-card .loved-buy,
.loved-card .loved-meta-link,
.loved-card .loved-name a {
  position: relative;
  z-index: 2;
}

/* Loved card name accent on hover via bone color */
.loved-card:hover .loved-name a { color: var(--bone-soft); }

/* Hero mini card — bone CTA */
.hero-mini-card--anchor .hero-mini-cta {
  background: linear-gradient(135deg, #ffffff 0%, var(--bone-soft) 60%, var(--mauve-soft) 100%);
  color: #1a1320;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(255,255,255,.30);
}

/* Hero mini card price hue */
.hero-mini-tag { color: var(--mauve-soft) !important; }

/* PDP rating sold — bone */
.pdp-rating-sold { color: var(--bone-soft) !important; font-weight: 600 !important; }

/* PDP packs — when popular hover lifts more & glows */
.pdp-pack--popular:hover {
  border-color: rgba(255,255,255,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 50px rgba(255,255,255,.22);
}

/* Active pack — bone tick */
.pdp-pack.is-active {
  border-color: rgba(255,255,255,.55);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255,255,255,.08), transparent 60%),
    rgba(36,32,42,.82);
}
.pdp-pack.is-active::before {
  background: linear-gradient(135deg, var(--bone-soft), var(--mauve-soft));
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1320' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3 3 7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  box-shadow: 0 4px 14px rgba(255,255,255,.4);
}

/* Pack tag (FUNDADOR pill) */
.pdp-pack-tag:not(.pdp-pack-tag--locked) {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.32);
  color: var(--bone-soft);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
  align-self: flex-start;
}

/* Pack price accent on focused/active */
.pdp-pack.is-active .pdp-pack-price {
  color: var(--bone-soft);
}

/* ---- Founder benefits row (replaces hidden trust details near CTA) ---- */
.pdp-edition-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 4px;
}
.pdp-edition-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(20,18,28,.55);
  border: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
.pdp-edition-chip svg {
  width: 18px; height: 18px;
  color: var(--bone-soft);
}
.pdp-edition-chip strong {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
}
.pdp-edition-chip span {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  line-height: 1.3;
}

/* Founder progress bar — visualize "72/200 cupos" */
.pdp-progress {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(20,18,28,.55);
  border: 1px solid rgba(255,255,255,.14);
}
.pdp-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.pdp-progress-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pdp-progress-value {
  font-family: var(--display);
  font-size: 18px;
  color: var(--bone-soft);
  font-variant-numeric: tabular-nums;
}
.pdp-progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.pdp-progress-fill {
  position: absolute;
  inset: 0;
  width: 36%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bone-soft), var(--mauve-soft));
  box-shadow: 0 0 12px rgba(255,255,255,.45);
}
.pdp-progress-foot {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

/* "Reserva sin compromiso" line near CTA */
.pdp-guarantee {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .02em;
}
.pdp-guarantee svg {
  width: 14px; height: 14px;
  color: var(--bone-soft);
  flex-shrink: 0;
}

/* PDP features (lower row) — colored icon containers */
.pdp-feature .pdp-feature-icon {
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  color: var(--bone-soft);
}

/* Final touch — give the loved-buy on cards more presence */
.loved-buy {
  background: linear-gradient(135deg, #ffffff 0%, var(--bone-soft) 100%) !important;
  color: #1a1320 !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 6px 18px rgba(255,255,255,.20) !important;
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .pdp-edition-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pdp-founder-banner { padding: 22px 18px 18px; }
  .pdp-founder-banner::after { top: 14px; right: 14px; font-size: 8.5px; padding: 4px 9px; }
  .pdp-founder-text > strong { padding-right: 0; margin-top: 28px; font-size: 1.15rem; }
}


/* =============================================================
   =============================================================
   MOTION SYSTEM — premium, Apple-grade fluidity
   Unified easings · sticky nav · reveal blur · logo hover ·
   smooth scroll · reduced-motion safe.
   ============================================================= */

:root {
  /* Unified motion tokens — used by JS too via getComputedStyle */
  --ease-premium:   cubic-bezier(0.22, 1, 0.36, 1);   /* expo-out, Apple-ish */
  --ease-soft-in:   cubic-bezier(0.32, 0, 0.67, 0);
  --ease-soft-out:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-xs:  180ms;
  --d-sm:  280ms;
  --d-md:  450ms;
  --d-lg:  700ms;
  --d-xl:  1100ms;
}

/* ---- 1. Reveal — premium fade-up + blur-out, no exageración ---- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(6px);
  transition:
    opacity   var(--d-xl) var(--ease-premium),
    transform var(--d-xl) var(--ease-premium),
    filter    var(--d-lg) var(--ease-premium);
  will-change: opacity, transform, filter;
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Children stagger — tighter and snappier than parent */
.reveal .reveal-child,
.reveal .loved-card,
.reveal .use-card,
.reveal .launch-card,
.reveal .vs-card,
.reveal .gallery-tile,
.reveal .about-stat,
.reveal .about-feature,
.reveal .about-val,
.reveal .faq-item,
.reveal .pdp-edition-chip,
.reveal .pdp-trust-card {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(4px);
  transition:
    opacity   var(--d-lg) var(--ease-premium),
    transform var(--d-lg) var(--ease-premium),
    filter    var(--d-md) var(--ease-premium);
}
.reveal.in .reveal-child,
.reveal.in .loved-card,
.reveal.in .use-card,
.reveal.in .launch-card,
.reveal.in .vs-card,
.reveal.in .gallery-tile,
.reveal.in .about-stat,
.reveal.in .about-feature,
.reveal.in .about-val,
.reveal.in .faq-item,
.reveal.in .pdp-edition-chip,
.reveal.in .pdp-trust-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* ---- 2. Sticky nav — smarter transition (translateY only via custom prop) ---- */
.nav {
  --nav-tx: -50%;
  --nav-ty: 0%;
  --nav-sc: 1;
  transform: translate(var(--nav-tx), var(--nav-ty)) scale(var(--nav-sc));
  will-change: transform;
}
.nav.is-hidden {
  --nav-ty: -135%;
  --nav-sc: .96;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--nav-tx), var(--nav-ty)) scale(var(--nav-sc));
}
.nav.is-scrolled {
  background: rgba(8, 8, 10, 0.78);
  border-color: var(--line-mid);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.6);
}

/* ---- 3. Nav links — premium underline/glow on hover ---- */
.nav-links a {
  position: relative;
  transition:
    color var(--d-xs) var(--ease-premium),
    background var(--d-xs) var(--ease-premium);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bone-soft), transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform var(--d-sm) var(--ease-premium), opacity var(--d-sm) var(--ease-premium);
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* ---- 4. Logo hover — sutil premium ---- */
.nav-brand,
.loader-mark,
.footer-v2-brand {
  display: inline-flex;
}
.nav-brand img,
.footer-v2-brand img {
  transition:
    transform var(--d-md) var(--ease-spring),
    filter var(--d-sm) var(--ease-premium);
  will-change: transform, filter;
  transform-origin: center;
}
.nav-brand:hover img,
.footer-v2-brand:hover img {
  transform: scale(1.06) translateY(-1px);
  filter:
    drop-shadow(0 4px 16px rgba(255,255,255,.45))
    drop-shadow(0 0 1px rgba(255,255,255,.6));
}
.nav-brand:active img,
.footer-v2-brand:active img {
  transform: scale(0.97) translateY(0);
  transition-duration: var(--d-xs);
}

/* Soft inner letter-glow ping (Apple-like ambient pulse) */
@keyframes brand-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(255,255,255,.25)); }
}
.nav-brand:hover img {
  animation: brand-breathe 2.4s var(--ease-premium) infinite;
}

/* Hero brand (the wordmark inside hero frame) — also gets the same touch */
.hero-window .nav-brand img {
  transition: transform var(--d-md) var(--ease-spring), filter var(--d-sm) var(--ease-premium);
}

/* ---- 5. Smooth scroll global (browser-native fallback) ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- 6. Section level "auto-reveal" — every section/header is fadable ---- */
section[id]:not(.reveal):not(.hero-frame),
.about-shell > .container > * {
  /* These get auto-tagged via JS — class gets added on DOMContentLoaded */
}

/* ---- 7. Card hover refinements — universal, smooth ---- */
.loved-card,
.use-card,
.launch-card,
.vs-card,
.pdp-pack,
.pdp-trust-card,
.about-stat,
.about-val,
.pdp-edition-chip,
.gallery-tile {
  transition:
    transform var(--d-md) var(--ease-premium),
    border-color var(--d-sm) var(--ease-premium),
    background var(--d-sm) var(--ease-premium),
    box-shadow var(--d-md) var(--ease-premium);
}

/* ---- 8. Buttons get unified easing ---- */
.btn {
  transition:
    transform var(--d-sm) var(--ease-spring),
    background var(--d-sm) var(--ease-premium),
    border-color var(--d-sm) var(--ease-premium),
    color var(--d-sm) var(--ease-premium),
    box-shadow var(--d-md) var(--ease-premium);
}
.btn:active { transform: scale(0.98); transition-duration: var(--d-xs); }

/* ---- 9. Mobile menu — fluid open ---- */
.mobile-menu {
  transition:
    transform var(--d-md) var(--ease-premium),
    opacity var(--d-md) var(--ease-premium);
}

/* ---- 10. Cart drawer — premium glide ---- */
.cart-drawer {
  transition: transform var(--d-md) var(--ease-premium);
}
.cart-backdrop {
  transition: opacity var(--d-sm) var(--ease-premium);
}

/* ---- 11. Reduced motion: kill all the motion, keep functionality ---- */
@media (prefers-reduced-motion: reduce) {
  /* Reveal: only force the reveal node itself to visible state,
     not its descendants (they may have their own interactive opacity). */
  .reveal,
  .reveal.in {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
  /* Stagger children: just neutralize their reveal-driven transforms/blur,
     don't override their authored opacity. */
  .reveal > *,
  .reveal.in > * {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
  .nav-brand img,
  .footer-v2-brand img {
    transition: none !important;
    animation: none !important;
  }
  .nav,
  .nav.is-hidden,
  .nav.is-scrolled {
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =============================================================
   =============================================================
   SOUND SIMULATOR — premium audio comparator
   3 scenarios · power button with breathing glow · live bars
   ============================================================= */

/* Hide the old simulator skin completely — we use .sim-card now */
.sim-wrap,
.sim-slider,
.sim-ticks { display: none !important; }

/* Section ambient color wash */
.section-sim {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 8rem);
}
.section-sim::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 40% at 20% 15%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(255,255,255,.08), transparent 60%);
}

/* Card wrapper */
.sim-card {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 32px;
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse 60% 60% at 90% 100%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(18,16,22,.85), rgba(10,9,12,.90));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 32px 80px rgba(0,0,0,.55);
  overflow: hidden;
  isolation: isolate;
}

/* ──────── POWER BUTTON ──────── */
.sim-power {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.sim-power-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 12px;
  border-radius: 999px;
  background: rgba(20,18,28,.72);
  border: 1px solid rgba(255,255,255,.30);
  color: var(--ink);
  cursor: pointer;
  transition:
    transform var(--d-md) var(--ease-spring),
    background var(--d-sm) var(--ease-premium),
    border-color var(--d-sm) var(--ease-premium),
    box-shadow var(--d-md) var(--ease-premium);
  isolation: isolate;
  font-family: var(--sans);
}
.sim-power-glow {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.55));
  filter: blur(20px);
  opacity: .45;
  z-index: -1;
  animation: sim-breathe 2.8s ease-in-out infinite;
}
@keyframes sim-breathe {
  0%, 100% { opacity: .35; transform: scale(.98); }
  50%      { opacity: .75; transform: scale(1.06); }
}
.sim-power-ring {
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.0);
  z-index: -1;
  pointer-events: none;
}
.sim-power-btn::before {
  /* extra invitation pulse — ring expanding outward */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  opacity: 0;
  animation: sim-invite 3.4s ease-out infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes sim-invite {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.22); }
  100% { opacity: 0;   transform: scale(1.22); }
}
.sim-power-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 18px 40px rgba(255,255,255,.18);
}
.sim-power-btn:active { transform: translateY(0) scale(.98); }
.sim-power-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bone-soft), var(--mauve-soft));
  color: #1a1320;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 6px 16px rgba(255,255,255,.35);
  flex-shrink: 0;
}
.sim-power-icon svg {
  width: 18px; height: 18px;
}
.sim-power-icon .sim-icon-off { display: block; }
.sim-power-icon .sim-icon-on  { display: none; }
.sim-card.is-audio-on .sim-power-icon .sim-icon-off { display: none; }
.sim-card.is-audio-on .sim-power-icon .sim-icon-on  { display: block; }

/* Activated state — invite ring stops, glow stays brighter */
.sim-card.is-audio-on .sim-power-btn::before { animation: none; opacity: 0; }
.sim-card.is-audio-on .sim-power-glow {
  opacity: .9;
  animation: sim-pulse-on 1.8s ease-in-out infinite;
}
@keyframes sim-pulse-on {
  0%, 100% { opacity: .60; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.sim-card.is-audio-on .sim-power-btn {
  border-color: rgba(255,255,255,.65);
}

.sim-power-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.sim-power-text strong {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .005em;
  color: var(--ink);
  transition: color var(--d-sm) var(--ease-premium);
}
.sim-power-text small {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sim-card.is-audio-on .sim-power-text strong { color: var(--bone-soft); }

/* ──────── METER + LIVE BARS ──────── */
.sim-meter-card {
  padding: 22px 22px 22px;
  border-radius: 22px;
  background: rgba(8,7,12,.6);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 18px;
}
.sim-meter-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}
.sim-meter-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.sim-db {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sim-db-val {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffffff, var(--bone-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--d-md) var(--ease-premium);
}
.sim-db-unit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.sim-context {
  font-family: var(--sans);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-dim);
  letter-spacing: .005em;
  text-align: right;
  max-width: 32ch;
  line-height: 1.45;
}
@media (max-width: 560px) {
  .sim-context { text-align: left; max-width: none; flex-basis: 100%; }
}

/* Live bars */
.sim-vis {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  height: 80px !important;
  padding: 0 2px;
  margin: 0 !important;
}
.sim-bar {
  display: block;
  flex: 1 1 0;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--bone-soft) 0%, var(--mauve-soft) 100%) !important;
  transform-origin: bottom;
  transform: scaleY(.18);
  transition: transform 120ms linear, background var(--d-md) var(--ease-premium), opacity var(--d-sm) var(--ease-premium);
  opacity: .75;
}
.sim-card.is-audio-on .sim-bar { opacity: 1; }
.sim-card.is-mode-calma .sim-bar {
  background: linear-gradient(180deg, var(--mauve-soft) 0%, var(--mauve) 100%) !important;
  opacity: .85;
}

/* ──────── SCENARIO CARDS ──────── */
.sim-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .sim-scenarios { grid-template-columns: 1fr; }
}
.sim-scenario {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: rgba(20,18,28,.55);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  overflow: hidden;
  transition:
    transform var(--d-md) var(--ease-premium),
    border-color var(--d-sm) var(--ease-premium),
    background var(--d-sm) var(--ease-premium),
    box-shadow var(--d-md) var(--ease-premium);
}
.sim-scenario::before {
  content: "";
  position: absolute;
  top: 0; left: 16px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--bone-soft), transparent);
  transition: width var(--d-md) var(--ease-premium);
}
.sim-scenario:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.32);
}
.sim-scenario.is-active {
  border-color: rgba(255,255,255,.55);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.08), transparent 60%),
    rgba(28,24,38,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 30px rgba(255,255,255,.18);
}
.sim-scenario.is-active::before { width: calc(100% - 32px); }
.sim-scenario-icon {
  width: 36px; height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  color: var(--bone-soft);
}
.sim-scenario-icon svg { width: 18px; height: 18px; }
.sim-scenario strong {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.005em;
  color: var(--ink);
}
.sim-scenario small {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ──────── MODE TOGGLE ──────── */
.sim-card .sim-toggle {
  display: inline-flex !important;
  margin: 0 auto 14px !important;
  padding: 5px !important;
  border-radius: 999px;
  background: rgba(8,7,12,.6);
  border: 1px solid rgba(255,255,255,.08);
  gap: 4px;
  width: fit-content;
}
.sim-card .sim-toggle button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px !important;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  border: 0;
  transition:
    background var(--d-sm) var(--ease-premium),
    color var(--d-sm) var(--ease-premium),
    box-shadow var(--d-md) var(--ease-premium);
}
.sim-card .sim-toggle button.is-active {
  background: linear-gradient(135deg, var(--bone-soft), var(--mauve-soft)) !important;
  color: #1a1320 !important;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(255,255,255,.30);
}
.sim-toggle-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background var(--d-sm) var(--ease-premium);
}
.sim-toggle-dot--calma { background: var(--mauve-soft); }
.sim-card .sim-toggle button.is-active .sim-toggle-dot { background: #1a1320; }

/* Center the toggle horizontally */
.sim-card > .sim-toggle { align-self: center; margin-left: auto; margin-right: auto; }
.sim-card { display: flex; flex-direction: column; }

/* Disclaimer */
.sim-card .sim-disclaimer {
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2px 0 0;
}

/* Reduced motion: kill the breathing/invite animations */
@media (prefers-reduced-motion: reduce) {
  .sim-power-glow,
  .sim-power-btn::before {
    animation: none !important;
    opacity: .4 !important;
    transform: none !important;
  }
  .sim-card.is-audio-on .sim-power-glow { opacity: .55 !important; }
  .sim-bar { transition: none !important; }
}

/* Mobile tweaks */
@media (max-width: 560px) {
  .sim-power-btn { padding: 10px 18px 10px 10px; }
  .sim-power-text strong { font-size: 13.5px; }
  .sim-power-icon { width: 36px; height: 36px; }
  .sim-meter-card { padding: 18px 18px 18px; }
  .sim-vis { height: 64px !important; }
}

/* ============ AUTH + ACCOUNT (appended) ============ */

[hidden] { display: none !important; }

.nav-account-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .2s var(--ease-bounce);
}
.nav-account-btn:hover { background: rgba(255,255,255,.10); border-color: var(--line-strong); transform: scale(1.05); }
.nav-account-icon { width: 15px; height: 15px; transition: opacity .25s; }
.nav-account-avatar {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .03em;
  color: #0a0a0a;
  text-transform: uppercase;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
}
.nav-account-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--copper);
  border: 1.5px solid var(--bg);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s, transform .25s var(--ease-bounce);
}
.nav-account-btn.is-logged .nav-account-icon { opacity: 0; }
.nav-account-btn.is-logged .nav-account-avatar { display: inline-flex; }
.nav-account-dot.is-on { opacity: 1; transform: scale(1); }

body.auth-open { overflow: hidden; }

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease-out, cubic-bezier(.16,1,.3,1)), visibility 0s linear .28s;
}
.auth-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.auth-card {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: clamp(28px, 5vw, 38px) clamp(24px, 4vw, 34px) clamp(24px, 4vw, 30px);
  border-radius: clamp(20px, 2.4vw, 26px);
  background: linear-gradient(180deg, rgba(20,20,22,.92) 0%, rgba(10,10,12,.96) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 28px 80px rgba(0,0,0,.6);
  transform: translateY(12px) scale(.98);
  transition: transform .32s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.auth-modal.is-open .auth-card { transform: translateY(0) scale(1); }
.auth-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.auth-close:hover { background: rgba(255,255,255,.12); color: var(--ink); }
.auth-close svg { width: 12px; height: 12px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-logo img { height: 18px; width: auto; opacity: .85; margin-bottom: 14px; }
.auth-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 6px;
}
.auth-sub { font-size: 13.5px; color: var(--ink-dim); margin: 0; line-height: 1.45; }
.auth-socials { display: grid; gap: 10px; margin-bottom: 18px; }
.auth-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s var(--ease-bounce);
}
.auth-social:hover { transform: scale(1.01); }
.auth-social svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-social--apple { background: #fff; color: #000; border: 1px solid #fff; }
.auth-social--apple:hover { background: #f0f0f0; }
.auth-social--google { background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid var(--line-mid); }
.auth-social--google:hover { background: rgba(255,255,255,.08); border-color: var(--line-strong); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: grid; gap: 14px; margin-bottom: 14px; }
.auth-field { display: grid; gap: 6px; }
.auth-field > span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.auth-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  transition: border-color .2s, background .2s;
}
.auth-field input::placeholder { color: var(--ink-faint); }
.auth-field input:focus { outline: none; border-color: var(--copper); background: rgba(255,255,255,.06); }
.auth-forgot { display: inline-block; margin-top: -4px; font-size: 12.5px; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.auth-forgot:hover { color: var(--ink); }
.auth-terms { font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); margin: 0; }
.auth-msg {
  font-size: 13px;
  line-height: 1.45;
  border-radius: 12px;
  padding: 10px 13px;
  margin: 2px 0;
  border: 1px solid transparent;
}
.auth-msg.is-error {
  color: #ffd9d2;
  background: rgba(220, 70, 50, .12);
  border-color: rgba(220, 70, 50, .38);
}
.auth-msg.is-success {
  color: #cdf3da;
  background: rgba(46, 160, 90, .12);
  border-color: rgba(46, 160, 90, .38);
}
.auth-msg.is-info {
  color: #d8e7ff;
  background: rgba(80, 130, 220, .12);
  border-color: rgba(80, 130, 220, .38);
}
.auth-resend {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--copper);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-resend:hover { color: var(--copper-soft); }
.auth-resend:disabled { opacity: .6; cursor: default; text-decoration: none; }
.auth-submit { margin-top: 4px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--ink-dim); margin: 4px 0 0; }
.auth-switch button { background: none; border: 0; padding: 0; font: inherit; color: var(--copper); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth-switch button:hover { color: var(--copper-soft); }
.auth-guest { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-guest a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.auth-guest a:hover { color: var(--ink); }

/* ── Address modal (con mapa) ───────────────────────────────── */
.auth-card--wide { width: min(560px, 100%); }
.auth-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-faint); opacity: .8; }
.addr-form { gap: 13px; }
.addr-chips { display: flex; gap: 8px; }
.addr-chip {
  flex: 1;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.addr-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.addr-chip.is-active { border-color: var(--copper); background: rgba(255,255,255,.14); color: var(--copper-soft); }
.addr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .addr-grid-2 { grid-template-columns: 1fr; } }
.addr-map-wrap { display: grid; gap: 8px; }
.addr-map-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.addr-map-head span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); }
.addr-map {
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-mid);
  background: rgba(255,255,255,.03);
}
.addr-map .leaflet-container { width: 100%; height: 100%; background: #0c0c0e; font-family: var(--sans); }
.addr-map-hint { font-size: 12px; line-height: 1.45; color: var(--ink-faint); margin: 0; }
.addr-default-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--ink-dim); }
.addr-default-row input { width: 16px; height: 16px; accent-color: var(--copper); cursor: pointer; }

.account-dropdown {
  position: fixed;
  z-index: 800;
  min-width: 240px;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,20,22,.96) 0%, rgba(10,10,12,.98) 100%);
  border: 1px solid var(--line-mid);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  display: grid;
  gap: 2px;
  animation: dropFade .2s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@keyframes dropFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.account-dropdown-user { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; margin-bottom: 4px; }
.account-dropdown-user strong { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.account-dropdown-user small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.account-dropdown-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
  color: #0a0a0a;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-dim);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.account-dropdown a:hover,
.account-dropdown button:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.account-dropdown button[data-account-logout] { color: var(--copper-soft); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }

.page-account { background: var(--bg); color: var(--ink); min-height: 100vh; }
.account-shell { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 40px) clamp(60px, 8vw, 100px); }
.account-gate { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.account-gate-card {
  max-width: 460px;
  text-align: center;
  padding: clamp(32px, 5vw, 48px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(20,20,22,.6) 0%, rgba(10,10,12,.4) 100%);
  border: 1px solid var(--line-mid);
}
.account-gate-glyph {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--copper-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
}
.account-gate-glyph svg { width: 28px; height: 28px; }
.account-gate-card h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 1.75rem); letter-spacing: -.02em; margin: 0 0 10px; }
.account-gate-card p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; margin: 0 0 20px; }
.account-gate-foot { margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); }
.account-gate-foot a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

.account-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (max-width: 899px) { .account-grid { grid-template-columns: 1fr; } }
.account-sidebar {
  position: sticky;
  top: 88px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,20,22,.6) 0%, rgba(10,10,12,.4) 100%);
  border: 1px solid var(--line-mid);
}
@media (max-width: 899px) { .account-sidebar { position: static; } }
.account-user { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.account-user-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
  color: #0a0a0a;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.account-user-text strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.account-user-text small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; word-break: break-all; }
.account-nav { display: grid; gap: 2px; }
.account-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-dim);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .15s, color .15s;
}
.account-nav-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.account-nav-link:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.account-nav-link.is-active {
  background: rgba(255,255,255,.14);
  color: var(--ink);
  border: 1px solid var(--copper-glow);
  padding: 10px 11px;
}
.account-nav-link.is-active svg { opacity: 1; color: var(--copper); }
.account-nav-badge {
  margin-left: auto;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: var(--copper-soft);
}
.account-nav-badge:empty { display: none; }
.account-logout {
  width: 100%;
  margin-top: 16px;
  padding: 11px 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.account-logout svg { width: 15px; height: 15px; }
.account-logout:hover { background: rgba(255,255,255,.04); color: var(--ink-dim); border-color: var(--line-mid); }

.account-content { min-width: 0; }
.account-tab { display: none; }
.account-tab.is-active { display: block; }
.account-tab-head { margin-bottom: 26px; }
.account-tab-head .kicker { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); margin-bottom: 8px; }
.account-tab-head .h-display { font-family: var(--sans); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.025em; margin: 0 0 8px; line-height: 1.05; }
.account-tab-head .h-display em { font-family: var(--display, var(--sans)); font-style: italic; font-weight: 400; color: var(--copper); }
.account-tab-head .lede { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; margin: 0; max-width: 56ch; }

.account-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.account-card {
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,20,22,.55) 0%, rgba(10,10,12,.35) 100%);
  border: 1px solid var(--line-mid);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-card--hero {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(10,10,12,.5) 100%);
  border-color: var(--copper-glow);
}
.account-card-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.account-card-stat { font-family: var(--sans); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--ink); margin: 0; letter-spacing: -.02em; }
.account-card-meta { font-size: 12.5px; color: var(--ink-dim); margin: 0; line-height: 1.5; }
.account-card-meta strong { color: var(--ink); }
.account-stat-tag { display: inline-flex; align-items: center; gap: 8px; }
.account-stat-tag svg { width: 18px; height: 18px; color: var(--copper); }

.account-overview-order strong { display: block; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.account-overview-order span { display: block; font-size: 12.5px; color: var(--ink-dim); }

.account-tracking { margin: 6px 0 12px; }
.account-tracking-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.account-tracking-steps li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-faint); }
.account-tracking-steps li span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-mid); flex-shrink: 0; }
.account-tracking-steps li.is-done { color: var(--ink-dim); }
.account-tracking-steps li.is-done span { background: var(--copper-deep); }
.account-tracking-steps li.is-current { color: var(--ink); font-weight: 500; }
.account-tracking-steps li.is-current span { background: var(--copper); box-shadow: 0 0 0 4px rgba(255,255,255,.18); }

.account-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.account-order { padding: 18px 20px; border-radius: 18px; background: rgba(20,20,22,.5); border: 1px solid var(--line-mid); }
.account-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.account-order-head strong { display: block; font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.account-order-head small { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.account-order-status {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-mid);
  color: var(--ink-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.account-order-status.is-pending    { color: #d8b070; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.account-order-status.is-preparing  { color: var(--copper-soft); border-color: var(--copper-glow); background: rgba(255,255,255,.12); }
.account-order-status.is-shipped    { color: var(--copper); border-color: var(--copper); background: rgba(255,255,255,.18); }
.account-order-status.is-delivered  { color: #8ec19a; border-color: rgba(142,193,154,.4); background: rgba(142,193,154,.1); }
.account-order-items { font-size: 13px; color: var(--ink-dim); margin: 0 0 14px; line-height: 1.5; }
.account-order-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.account-order-foot small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-bottom: 2px; }
.account-order-foot .account-order-eta { color: var(--ink-dim); }
.account-order-actions { display: flex; gap: 8px; flex-shrink: 0; }
.account-orders-empty { padding: 32px; text-align: center; border-radius: 18px; background: rgba(20,20,22,.4); border: 1px dashed var(--line-mid); color: var(--ink-dim); font-size: 13.5px; }
.account-orders-empty a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

.account-addresses { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.account-address { padding: 20px; border-radius: 18px; background: rgba(20,20,22,.5); border: 1px solid var(--line-mid); }
.account-address-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.account-address-head strong { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink); }
.account-address-default { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.16); color: var(--copper); }
.account-address p { font-size: 13px; line-height: 1.55; color: var(--ink-dim); margin: 0 0 4px; }
.account-address-recipient { color: var(--ink); font-weight: 500; }
.account-address-lines { white-space: normal; }
.account-address-phone { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.account-address-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.account-address-empty { grid-column: 1 / -1; padding: 28px; text-align: center; border-radius: 18px; background: rgba(20,20,22,.4); border: 1px dashed var(--line-mid); color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; list-style: none; }

.account-form { display: grid; gap: 14px; max-width: 560px; }
.account-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 599px) { .account-form-row { grid-template-columns: 1fr; } }
.account-field { display: grid; gap: 6px; }
.account-field > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); }
.account-field > span em { font-family: var(--sans); font-style: italic; letter-spacing: 0; text-transform: none; color: var(--ink-faint); font-size: 11px; margin-left: 4px; }
.account-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  transition: border-color .2s, background .2s;
}
.account-field input::placeholder { color: var(--ink-faint); }
.account-field input:focus { outline: none; border-color: var(--copper); background: rgba(255,255,255,.06); }
.account-field input[readonly] { opacity: .65; cursor: not-allowed; }
.account-field-hint { font-size: 11.5px; color: var(--ink-faint); }
.account-form-actions { margin-top: 6px; }
.account-form-title { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); margin: 0 0 4px; }

.account-pausa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.account-tip-chooser, .account-pack-chooser { display: flex; gap: 8px; flex-wrap: wrap; }
.account-tip {
  flex: 1;
  min-width: 48px;
  padding: 12px 0;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s var(--ease-bounce);
}
.account-tip:hover { transform: scale(1.04); }
.account-tip.is-active { background: rgba(255,255,255,.18); border-color: var(--copper); color: var(--ink); }
.account-pack {
  flex: 1;
  min-width: 130px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s var(--ease-bounce);
}
.account-pack:hover { transform: translateY(-2px); }
.account-pack strong { display: block; font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }
.account-pack small { display: block; font-size: 11.5px; color: var(--ink-faint); }
.account-pack.is-active { background: rgba(255,255,255,.14); border-color: var(--copper); }

.account-toggles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.account-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: rgba(20,20,22,.5); border: 1px solid var(--line-mid); }
.account-toggle-row strong { display: block; font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); }
.account-toggle-row small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 3px; line-height: 1.45; }
.account-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.account-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.account-switch span {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  transition: background .25s, border-color .25s;
}
.account-switch span::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .25s var(--ease-bounce);
}
.account-switch input:checked + span { background: var(--copper); border-color: var(--copper); }
.account-switch input:checked + span::before { transform: translateX(18px); }

.account-danger-zone { margin-top: 36px; padding: 22px; border-radius: 18px; background: rgba(120,30,30,.06); border: 1px solid rgba(216,84,84,.2); }
.account-danger-zone p { font-size: 13px; color: var(--ink-dim); line-height: 1.55; margin: 8px 0 14px; }

/* Footer slim de cuenta: claro y flush (no el footer negro) — fix gap 2026-06-10. */
.footer-v2--slim { background: transparent; margin-top: 40px; padding: 22px 0; border-top: 1px solid rgba(23,19,13,.12); }
.footer-v2--slim::before { display: none; }
.footer-v2--slim .footer-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: rgba(23,19,13,.50); }
.footer-v2--slim .footer-base-link { color: rgba(23,19,13,.72); text-decoration: underline; text-underline-offset: 3px; }
.footer-v2--slim .footer-base-link:hover { color: rgba(23,19,13,1); }

/* =============================================================
   PDP GALERÍA — collage (PC) · carrusel swipe (mobile/iPad) · lightbox
   ============================================================= */
.pdp-gallery-wrap { width: 100%; }

.pdp-gallery {
  position: static;
  align-self: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.pdp-shot {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-lg, 20px);
  border: 1px solid var(--line);
  background: var(--bg-2);
  cursor: default;                 /* puntero normal, como pediste */
}
.pdp-shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
  will-change: transform;
}
.pdp-shot--cover img { object-fit: cover; }
/* zoom ×3 automático al hover; el origen sigue al cursor (lo setea el JS) */
@media (hover: hover) {
  .pdp-shot:hover img { transform: scale(3); }
}

/* Desktop: el collage queda FIJO (sticky) y ajustado al alto del viewport,
   así acompaña a la izquierda mientras se scrollean TODAS las características.
   El sticky va en el wrapper (su riel es la grilla, mucho más alta). */
@media (min-width: 900px) {
  .pdp-gallery-wrap {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: start;
    height: calc(100vh - var(--nav-h) - 56px);
    min-height: 480px;
  }
  .pdp-gallery {
    height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.25fr 1fr 1fr;   /* hero arriba + 2 filas de 2 */
    gap: 12px;
  }
  .pdp-shot {
    aspect-ratio: auto;
    min-height: 0;                         /* deja que la grilla controle el alto */
  }
  .pdp-shot--lead { grid-column: 1 / -1; grid-row: 1; }
}

/* Mobile / iPad: carrusel con swipe del dedo (sin flechas) + dots. */
.pdp-gallery-dots { display: none; }
@media (max-width: 899px) {
  .pdp-gallery {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: var(--r-lg, 20px);
    border: 1px solid var(--line);
  }
  .pdp-gallery::-webkit-scrollbar { display: none; }
  .pdp-shot {
    flex: 0 0 100%;
    scroll-snap-align: center;
    border: none;
    border-radius: 0;
  }
  .pdp-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
  }
  .pdp-gallery-dots i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    transition: background .2s, transform .2s;
  }
  .pdp-gallery-dots i.is-active { background: var(--copper); transform: scale(1.3); }
}

/* ── Lightbox (clic en la imagen) ── */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(54px, 7vw, 72px) clamp(12px, 4vw, 60px) clamp(16px, 4vw, 28px);
  background: rgba(6, 6, 8, .92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.pdp-lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.pdp-lightbox[hidden] { display: none; }

.pdp-lb-stage {
  grid-row: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.pdp-lightbox.is-zoomed .pdp-lb-stage { cursor: zoom-out; }
.pdp-lb-stage img {
  max-width: min(100%, 880px);
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 16px;
  transition: transform .3s var(--ease-out, ease);
}
.pdp-lightbox.is-zoomed .pdp-lb-stage img { transform: scale(2.2); }

.pdp-lb-close,
.pdp-lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  z-index: 2;
  transition: background .2s, border-color .2s, transform .2s;
}
.pdp-lb-close { top: clamp(12px, 3vw, 22px); right: clamp(12px, 3vw, 22px); width: 42px; height: 42px; }
.pdp-lb-close:hover { background: rgba(255,255,255,.18); }
.pdp-lb-close svg { width: 18px; height: 18px; }
.pdp-lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.pdp-lb-nav:hover { background: rgba(255,255,255,.2); border-color: var(--copper); }
.pdp-lb-nav svg { width: 22px; height: 22px; }
.pdp-lb-nav--prev { left: clamp(8px, 2vw, 24px); }
.pdp-lb-nav--next { right: clamp(8px, 2vw, 24px); }
.pdp-lightbox.is-zoomed .pdp-lb-nav { opacity: 0; pointer-events: none; }

.pdp-lb-thumbs {
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.pdp-lb-thumb {
  width: 60px; height: 60px;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: var(--bg-2);
  opacity: .5;
  transition: opacity .2s, border-color .2s, transform .2s;
}
.pdp-lb-thumb:hover { opacity: .85; }
.pdp-lb-thumb.is-active { opacity: 1; border-color: var(--copper); transform: translateY(-2px); }
.pdp-lb-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-lb-thumb.is-cover img { object-fit: cover; }

@media (max-width: 560px) {
  .pdp-lb-nav { width: 38px; height: 38px; }
  .pdp-lb-nav svg { width: 18px; height: 18px; }
  .pdp-lb-thumb { width: 46px; height: 46px; }
}

/* ============ theme-light.css ============ */
/* =============================================================
   CALMÁ — LIGHT THEME
   Everything below the black hero lives on warm bone/hueso.
   We flip the design tokens inside .theme-light so token-driven
   components recolour automatically; hardcoded dark values are
   overridden below. Premium, high-contrast, conversion-friendly.
   ============================================================= */
.theme-light {
  /* Surfaces — blanco premium (estilo Loop · 2026-06-10) */
  --bg:          #FFFFFF;
  --bg-1:        #FFFFFF;
  --bg-2:        #F6F6F4;
  --bg-3:        #EFEEEB;
  --bg-elev:     #FFFFFF;

  /* legacy aliases used around the codebase */
  --navy:        #efe9dd;
  --navy-deep:   #F3EEE4;
  --navy-soft:   #e8e1d4;
  --cream:       var(--bg-1);
  --cream-2:     var(--bg-2);

  /* Ink — warm near-black on bone */
  --ink:         #17130D;
  --ink-dim:     rgba(23,19,13,.64);
  --ink-faint:   rgba(23,19,13,.40);
  --ink-ghost:   rgba(23,19,13,.10);

  --line:        rgba(23,19,13,.12);
  --line-mid:    rgba(23,19,13,.18);
  --line-strong: rgba(23,19,13,.30);

  --accent:      var(--ink);

  /* The brand-repaint remapped copper→bone (pale cream, made for the dark
     site). On bone that reads as invisible — restore a real, readable copper
     accent inside the light scope. Drives section em-titles, kickers, ticks. */
  --copper:      #17130d;
  --copper-soft: #2a2620;
  --copper-deep: #000000;
  --copper-glow: rgba(23,19,13,.30);
  --bone:        #2a2620;
  --bone-soft:   #17130d;
  --bone-deep:   #000000;
  --mauve:       #17130d;
  --mauve-soft:  #2a2620;
  --mauve-deep:  #000000;

  /* dark-context tokens → resolve light here */
  --dk-bg:       var(--bg);
  --dk-bg-1:     var(--bg-1);
  --dk-bg-2:     var(--bg-2);
  --dk-ink:      var(--ink);
  --dk-ink-dim:  var(--ink-dim);
  --dk-ink-faint:var(--ink-faint);
  --dk-line:     var(--line);
  --dk-line-mid: var(--line-mid);
  --dk-line-strong: var(--line-strong);

  /* Glass on light */
  --dk-glass-bg:    rgba(255,255,255,.66);
  --dk-glass-bg-hi: rgba(255,255,255,.85);
  --dk-glass-edge:  rgba(23,19,13,.14);
  --glass-bg:       var(--dk-glass-bg);
  --glass-bg-hi:    var(--dk-glass-bg-hi);

  /* Softer shadows for light surfaces */
  --shadow-soft:   0 4px 20px rgba(23,19,13,.07);
  --shadow-mid:    0 14px 40px rgba(23,19,13,.10);
  --shadow-strong: 0 26px 60px rgba(23,19,13,.14);
  --shadow-copper: 0 10px 30px rgba(255,255,255,.20);

  position: relative;
  color: var(--ink);
  /* Fondo plano blanco — sin gradiente negro inferior (2026-06-10). */
  background: var(--bg);
  padding-bottom: clamp(40px, 7vh, 90px);
}

/* Top section-clash fade (dark hero → bone) — only on pages with a dark hero.
   Also lives in the background (behind content). Fully opaque deep-black at the
   very top edge so it continues the hero seamlessly: no hard "step", no grey
   band. The runway padding keeps the content clear of the dark part. */
.theme-light.theme-from-dark {
  background:
    linear-gradient(180deg, var(--deep-black) 0%, rgba(5,5,5,0) clamp(200px, 26vh, 320px)) top / 100% 100% no-repeat,
    var(--bg);
  padding-top: clamp(56px, 9vh, 130px);
}

/* ---- Light-theme component overrides ----
   Components that hard-coded dark glass need light surfaces. Tokens already
   carry most of it; these fix the ones with baked-in dark rgba values. */

/* Comparison cards (CALMÁ vs el resto) */
.theme-light .vs-grid-3 .vs-card,
.theme-light .vs-card {
  background: var(--bg-elev);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.theme-light .vs-grid-3 .vs-card--us,
.theme-light .vs-card--us {
  background:
    radial-gradient(circle at 70% 0%, rgba(23,19,13,.07), transparent 60%),
    var(--bg-elev);
  border: 1px solid rgba(23,19,13,.45);
  box-shadow: 0 14px 40px rgba(23,19,13,.16);
}
.theme-light .vs-grid-3 .vs-tag,
.theme-light .vs-tag { background: rgba(23,19,13,.06); color: var(--ink-dim); }
.theme-light .vs-grid-3 .vs-card--us .vs-tag,
.theme-light .vs-card--us .vs-tag { background: var(--ink); color: var(--bg-elev); }
.theme-light .vs-grid-3 .vs-card--them .vs-tag,
.theme-light .vs-card--them .vs-tag { background: rgba(23,19,13,.04); color: var(--ink-faint); }
.theme-light .vs-tick { color: var(--copper); }
.theme-light .vs-card--them .vs-tick { color: var(--ink-faint); }

/* Use-case cards (casos) + Launch cards (lanzamiento) — white tiles */
.theme-light .use-card,
.theme-light .launch-card {
  background: var(--bg-elev);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.theme-light .use-card:hover,
.theme-light .launch-card:hover {
  background: var(--bg-elev);
  border-color: rgba(23,19,13,.40);
  box-shadow: 0 14px 36px rgba(23,19,13,.10);
}
.theme-light .use-card-icon,
.theme-light .launch-card-icon {
  background: rgba(23,19,13,.08);
  border: 1px solid rgba(23,19,13,.20);
  color: var(--copper);
}

/* Shop product cards (tienda) — crisp white tiles */
.theme-light .loved-card {
  background: var(--bg-elev);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.theme-light .loved-card:hover {
  background: var(--bg-elev);
  border-color: rgba(23,19,13,.40);
  box-shadow: 0 18px 44px rgba(23,19,13,.12);
}
.theme-light .loved-card--featured { border-color: rgba(23,19,13,.45); }
.theme-light .loved-card-media {
  background:
    radial-gradient(circle at 30% 26%, rgba(23,19,13,.05), transparent 60%),
    linear-gradient(180deg, #f7f2e8, #ece4d6);
  border: 1px solid var(--line);
}
.theme-light .loved-badge { background: var(--ink); color: var(--bg-elev); }

/* About stat chips (4 tamaños · Uruguay · 24h) */
.theme-light .about-stat {
  background: var(--bg-elev);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* About product showcase tile — lighten its dark gradient */
.theme-light .about-media-v2 {
  background:
    radial-gradient(circle at 35% 30%, rgba(23,19,13,.05), transparent 60%),
    linear-gradient(160deg, #f7f2e8, #ece4d6);
  border: 1px solid var(--line);
}
.theme-light .about-media-v2 .about-media-glow {
  background: radial-gradient(circle at 50% 50%, rgba(23,19,13,.10), transparent 60%);
}
.theme-light .about-feature-icon {
  background: linear-gradient(160deg, rgba(23,19,13,.10), rgba(23,19,13,.03));
  border: 1px solid rgba(23,19,13,.20);
  color: var(--copper);
}

/* ---- PDP (producto.html) light-theme component fixes ---- */
/* Pack selector cards */
.theme-light .pdp-pack {
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.theme-light .pdp-pack:hover {
  background: var(--bg-elev);
  border-color: rgba(23,19,13,.40);
  box-shadow: 0 10px 26px rgba(23,19,13,.10);
}
.theme-light .pdp-pack.is-active {
  background: linear-gradient(180deg, rgba(23,19,13,.07), var(--bg-elev));
  border-color: rgba(23,19,13,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 28px rgba(23,19,13,.16);
}
.theme-light .pdp-pack.is-active::before {
  background-color: var(--copper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2'><path d='M3 8.5l3 3 7-7'/></svg>");
}
.theme-light .pdp-pack--popular {
  background: linear-gradient(180deg, rgba(23,19,13,.08), var(--bg-elev));
  border-color: rgba(23,19,13,.42);
}
/* Founder banner + badge + progress + stock + edition chips */
.theme-light .pdp-founder-banner {
  background: linear-gradient(180deg, rgba(23,19,13,.07), rgba(23,19,13,.02));
  border-color: rgba(23,19,13,.22);
}
.theme-light .pdp-badge-pill--founders {
  background: rgba(23,19,13,.08);
  border-color: rgba(23,19,13,.28);
  color: var(--copper-deep);
}
.theme-light .pdp-progress {
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.theme-light .pdp-stock {
  background: rgba(23,19,13,.05);
  border-color: rgba(23,19,13,.18);
}
.theme-light .pdp-edition-chip {
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
/* Quantity stepper + trust cards */
.theme-light .pdp-qty {
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.theme-light .pdp-trust-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.theme-light .pdp-trust-card:hover {
  background: var(--bg-elev);
  border-color: rgba(23,19,13,.30);
}
.theme-light .pdp-trust-icon { color: var(--copper); }
/* Gallery overlay buttons — light glass so they read on any shot */
.theme-light .pdp-gallery-nav,
.theme-light .pdp-zoom-btn {
  background: rgba(251,248,242,.78);
  border: 1px solid var(--line);
  color: var(--ink);
}
.theme-light .pdp-gallery-nav:hover,
.theme-light .pdp-zoom-btn:hover { background: rgba(251,248,242,.95); }
/* Feature icons (bottom strip) */
.theme-light .pdp-feature-icon {
  background: linear-gradient(160deg, rgba(23,19,13,.10), rgba(23,19,13,.03));
  border: 1px solid rgba(23,19,13,.20);
  color: var(--copper);
}
/* Remove the washed-out gradient text on the title + price — solid, crisp */
.theme-light .pdp-title {
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}
.theme-light .pdp-price {
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--copper-deep);
}
/* Accent ticks / dots */
.theme-light .pdp-tick { color: var(--copper); }
.theme-light .pdp-rating-stars { color: var(--copper); }
/* NOTE: .pdp-ticker (floating toast) + .pdp-lightbox (image viewer) stay dark
   on purpose — they read as overlays, not page surfaces. */

/* ---- Nosotros / historia page ---- */
.theme-light .about-val {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.theme-light .about-val:hover {
  border-color: rgba(23,19,13,.35);
  box-shadow: 0 14px 36px rgba(23,19,13,.10);
}
.theme-light .about-val-num { color: var(--copper); }
.theme-light .about-cta {
  background:
    radial-gradient(ellipse 70% 90% at 85% 0%, rgba(23,19,13,.08), transparent 55%),
    var(--bg-elev);
  border: 1px solid rgba(23,19,13,.22);
  box-shadow: var(--shadow-mid);
}
.theme-light .about-quote {
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.theme-light .about-chips li { background: rgba(23,19,13,.03); }

/* ---- Cuenta / account dashboard ---- */
.theme-light .account-gate-card,
.theme-light .account-sidebar,
.theme-light .account-card,
.theme-light .account-order,
.theme-light .account-address,
.theme-light .account-toggle-row {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.theme-light .account-card--hero {
  background:
    linear-gradient(180deg, rgba(23,19,13,.10) 0%, var(--bg-elev) 60%);
  border: 1px solid rgba(23,19,13,.28);
}
.theme-light .account-orders-empty,
.theme-light .account-address-empty {
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.theme-light .account-nav-link:hover { background: rgba(23,19,13,.05); }
.theme-light .account-nav-link.is-active {
  background: rgba(23,19,13,.12);
  border: 1px solid rgba(23,19,13,.35);
}
.theme-light .account-logout:hover { background: rgba(23,19,13,.04); }
.theme-light .account-field input {
  background: #fff;
  border: 1px solid var(--line-mid);
}
.theme-light .account-field input:focus { background: #fff; border-color: rgba(23,19,13,.5); }
.theme-light .addr-map { background: rgba(23,19,13,.03); }
.theme-light .addr-map .leaflet-container { background: #e7e0d2; }
.theme-light .account-danger-zone {
  background: rgba(200,60,60,.06);
  border: 1px solid rgba(200,60,60,.22);
}

/* ---- Share box (¿Conocés a alguien que duerme mal?) ---- */
.theme-light .faq-share {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.theme-light .share-btn {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: transform .25s var(--ease-out), border-color .25s, background .25s, box-shadow .25s;
}
.theme-light .share-btn:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(23,19,13,.10);
}
/* Brand glyph colours + brand-tinted hover */
.theme-light .share-btn--wa svg { color: #25D366; }
.theme-light .share-btn--x  svg { color: #0a0a0a; }
.theme-light .share-btn--th svg { color: #0a0a0a; }
.theme-light .share-btn--fb svg { color: #1877F2; }
.theme-light .share-btn--wa:hover { border-color: #25D366; background: rgba(37,211,102,.07); }
.theme-light .share-btn--x:hover  { border-color: #0a0a0a; background: rgba(10,10,10,.05); }
.theme-light .share-btn--th:hover { border-color: #0a0a0a; background: rgba(10,10,10,.05); }
.theme-light .share-btn--fb:hover { border-color: #1877F2; background: rgba(24,119,242,.07); }

/* ---- Checkout + confirmation (light, flat — no hero/footer fades) ---- */
.theme-light.theme-flat {
  background: var(--bg);
  padding-bottom: 0;
}
.theme-light.page-checkout { background: var(--bg); }
.theme-light .checkout-nav {
  background: rgba(251,248,242,.85);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.theme-light .checkout-brand img { filter: brightness(0); }
.theme-light .ck-step,
.theme-light .checkout-summary,
.theme-light .confirm-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.theme-light .ck-field input,
.theme-light .ck-ship,
.theme-light .ck-paymethod { background: #fff; }
.theme-light .ck-field input:focus { background: #fff; border-color: rgba(23,19,13,.5); }
.theme-light .ck-ship:has(input:checked),
.theme-light .ck-paymethod:has(input:checked) {
  background: rgba(23,19,13,.07);
  border-color: rgba(23,19,13,.42);
}
.theme-light .ck-pay-badge--alt { background: rgba(23,19,13,.05); color: var(--ink-dim); }
.theme-light .confirm-code-block { background: var(--bg-1); border: 1px solid var(--line); }

/* ---- Nav: adaptive light state (over the bone content) ----
   js/theme.js adds .nav-on-light whenever the nav floats over a light
   section, flipping the glass + ink + wordmark from light to dark. */
/* Soft floating reappear: the nav glides + fades in (expo-out) when you
   scroll back up, and lifts away when scrolling down. */
.nav {
  transition:
    transform .62s var(--ease-premium),
    opacity   .48s var(--ease-premium),
    background .35s var(--ease-out),
    border-color .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}
.nav-brand img { transition: filter .4s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .nav { transition: opacity .2s linear, background .2s linear, border-color .2s linear; }
}
.nav.nav-on-light {
  background: rgba(251,248,242,.74);
  border-color: rgba(23,19,13,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 14px 40px rgba(23,19,13,.10);
}
.nav.nav-on-light .nav-brand img { filter: brightness(0); }
.nav.nav-on-light .nav-links a { color: rgba(23,19,13,.62); }
.nav.nav-on-light .nav-links a:hover { color: #17130d; background: rgba(23,19,13,.05); }
.nav.nav-on-light .nav-links a.is-active { color: #17130d; }
.nav.nav-on-light :is(.nav-cart-btn, .nav-icon-btn, .nav-account-btn) {
  color: #17130d;
  background: rgba(23,19,13,.045);
  border-color: rgba(23,19,13,.12);
}
.nav.nav-on-light :is(.nav-cart-btn, .nav-icon-btn, .nav-account-btn):hover {
  background: rgba(23,19,13,.09);
  border-color: rgba(23,19,13,.22);
}
.nav.nav-on-light .nav-cart-count { background: #17130d; color: #fbf8f2; }
.nav.nav-on-light .nav-mobile-toggle { color: #17130d; }

/* =============================================================
   TIENDA + PRODUCTO — upgrade 2026-06-01
   · Shop cards: vertical layout, bigger media, premium presence
   · Favourite heart: interactive, no longer covered by the badge
   · "Agregar al carrito": copper CTA with micro-interactions
   · Product features & stats: richer, more representative
   ============================================================= */

/* ---- 1. Shop grid — roomier, centred ---- */
.loved-grid {
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.6vw, 30px);
  max-width: 860px;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .loved-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- 2. Card shell — stack media over body, larger product ---- */
.loved-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
}
.theme-light .loved-card {
  box-shadow: 0 10px 34px rgba(23,19,13,.08);
}
.loved-card:hover { transform: translateY(-4px); }
.theme-light .loved-card:hover {
  box-shadow: 0 26px 56px rgba(23,19,13,.14);
}
.loved-card--featured { box-shadow: 0 14px 40px rgba(23,19,13,.16); }
.theme-light .loved-card--featured {
  border-color: rgba(23,19,13,.55);
  box-shadow: 0 18px 48px rgba(23,19,13,.20);
}

.loved-card-media {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.theme-light .loved-card-media {
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.9), transparent 55%),
    linear-gradient(165deg, #f8f3ea, #e9e0d0);
}
.loved-card-media img { max-width: 60%; max-height: 70%; }
.loved-card-media--duo img:first-child { transform: translateX(-22%) rotate(-7deg); max-width: 48%; }
.loved-card-media--duo img:last-child  { transform: translateX(22%) rotate(7deg);  max-width: 48%; margin-left: -22%; }

.loved-card-body {
  padding: 18px 22px 22px;
  gap: 9px;
}

/* ---- 3. Badge top-left · favourite top-right (no overlap) ---- */
.loved-badge {
  top: 14px;
  left: 14px;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px 6px 9px;
  font-size: 9.5px;
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}
.loved-badge svg { width: 11px; height: 11px; color: #d6a45e; }

.loved-card .loved-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 3;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(23,19,13,.08);
  box-shadow: 0 6px 16px rgba(23,19,13,.14);
  color: rgba(23,19,13,.5);
  transition: transform .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), color .2s, background .2s, box-shadow .25s;
}
.loved-fav svg { width: 19px; height: 19px; transition: transform .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.loved-fav:hover { transform: scale(1.1); background: #fff; color: #e23b54; box-shadow: 0 8px 20px rgba(23,19,13,.18); }
.loved-fav:active { transform: scale(.9); }
.loved-fav.is-fav { background: #fff; color: #e23b54; }
.loved-fav.is-fav svg { fill: #e23b54; stroke: #e23b54; animation: fav-pop .45s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }

/* ---- 4. Rating / name / price ---- */
.loved-rating { gap: 2.5px; align-items: center; }
.loved-rating svg { width: 15px; height: 15px; }
.loved-rating-note {
  margin-left: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.loved-name { font-size: 17.5px; margin-top: 2px; }
.loved-meta { font-size: 12.5px; }

.loved-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  padding-top: 14px;
}
.loved-price-wrap { display: flex; flex-direction: column; gap: 1px; }
.loved-price { font-size: 22px; }
.loved-price-note {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--copper);
}

/* ---- 5. CTA "Agregar al carrito" — copper, alive ---- */
.loved-buy {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 20px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  border-radius: 999px;
  color: #fff !important;
  border: 0 !important;
  background: var(--ink) !important;
  box-shadow: 0 8px 20px rgba(23,19,13,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transition: transform .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .3s, filter .3s;
}
.loved-buy::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--ease-out, cubic-bezier(.22,1,.36,1));
  pointer-events: none;
}
.loved-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(23,19,13,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  filter: brightness(1.12);
}
.loved-buy:hover::before { left: 130%; }
.loved-buy:active { transform: translateY(0) scale(.975); }
.loved-buy-icon { width: 19px; height: 19px; flex-shrink: 0; transition: transform .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.loved-buy:hover .loved-buy-icon { transform: translateY(-1px) rotate(-6deg) scale(1.08); }
.loved-buy-check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21px;
  height: 21px;
  transform: translate(-50%, -50%) scale(.3);
  opacity: 0;
  transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), opacity .25s;
}
/* "added" confirmation state (toggled by JS) */
.loved-buy.is-added {
  background: linear-gradient(135deg, #3f9a63, #2f7d4d) !important;
  box-shadow: 0 12px 28px rgba(47,125,77,.4), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.loved-buy.is-added .loved-buy-icon,
.loved-buy.is-added > span { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.loved-buy.is-added .loved-buy-check { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .loved-card:hover, .loved-fav, .loved-buy, .loved-buy:hover { transform: none; }
  .loved-buy::before { display: none; }
}

@media (max-width: 480px) {
  .loved-card { grid-template-columns: none; }
  .loved-card-media { width: 100%; height: auto; aspect-ratio: 5 / 4; }
  .loved-card-body { padding: 16px 18px 20px; }
}

/* ---- 6. Product features — clearer, interactive ---- */
.about-feature {
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 4px 4px 4px 0;
  border-radius: 16px;
  transition: transform .35s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.about-feature:hover { transform: translateX(4px); }
.about-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), background .3s, border-color .3s;
}
.theme-light .about-feature-icon {
  background: linear-gradient(155deg, rgba(23,19,13,.14), rgba(23,19,13,.04));
  border: 1px solid rgba(23,19,13,.22);
  color: var(--copper);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.about-feature-icon svg { width: 24px; height: 24px; }
.about-feature:hover .about-feature-icon { transform: scale(1.07) rotate(-3deg); }
.theme-light .about-feature:hover .about-feature-icon {
  background: linear-gradient(155deg, rgba(23,19,13,.22), rgba(23,19,13,.08));
  border-color: rgba(23,19,13,.4);
}

/* ---- 7. Product stats — premium tiles with copper accent ---- */
.theme-light .about-stat {
  background:
    radial-gradient(circle at 14% 0%, rgba(23,19,13,.07), transparent 55%),
    var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(23,19,13,.07);
}
.theme-light .about-stat::before {
  background: linear-gradient(90deg, transparent, rgba(23,19,13,.55), transparent);
}
.theme-light .about-stat::after {
  background: radial-gradient(circle at 82% 100%, rgba(23,19,13,.16), transparent 60%);
}
.theme-light .about-stat:hover {
  border-color: rgba(23,19,13,.4);
  box-shadow: 0 18px 40px rgba(23,19,13,.16);
}
.theme-light .about-stat-icon {
  background: linear-gradient(155deg, rgba(23,19,13,.14), rgba(23,19,13,.05));
  border: 1px solid rgba(23,19,13,.24);
  color: var(--copper);
  transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.about-stat:hover .about-stat-icon { transform: scale(1.08) rotate(-4deg); }

/* ---- 8. Account → Favoritos list ---- */
.account-favorites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.account-favorite {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.account-favorite:hover {
  border-color: rgba(23,19,13,.4);
  box-shadow: 0 14px 36px rgba(23,19,13,.10);
  transform: translateY(-2px);
}
.account-favorite-media {
  width: 74px;
  height: 74px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #f8f3ea, #e9e0d0);
  border: 1px solid var(--line);
  overflow: hidden;
}
.account-favorite-media img { max-width: 76%; max-height: 76%; object-fit: contain; }
.account-favorite-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.account-favorite-body strong { font-size: 15px; color: var(--ink); }
.account-favorite-price {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}
.account-favorite-actions { display: flex; align-items: center; gap: 8px; }
.account-favorite-actions .btn {
  color: #0a0a0a;
  border: 0;
  background: linear-gradient(135deg, var(--copper-soft), var(--copper-deep));
  box-shadow: 0 6px 16px rgba(23,19,13,.28);
  transition: transform .25s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .25s, filter .25s;
}
.account-favorite-actions .btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 10px 22px rgba(23,19,13,.36); }
.account-favorite-actions .btn:active { transform: scale(.97); }
.account-favorite-actions .btn.is-added { background: linear-gradient(135deg, #3f9a63, #2f7d4d) !important; }
.account-favorite-remove {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(23,19,13,.04);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.account-favorite-remove svg { width: 14px; height: 14px; }
.account-favorite-remove:hover { color: #e23b54; border-color: rgba(226,59,84,.4); background: rgba(226,59,84,.08); }
.account-favorites-empty { color: var(--ink-dim); }

@media (max-width: 520px) {
  .account-favorite { grid-template-columns: 60px 1fr; }
  .account-favorite-media { width: 60px; height: 60px; }
  .account-favorite-actions { grid-column: 1 / -1; justify-content: space-between; }
}

/* =============================================================
   "EL PRODUCTO" — life pass 2026-06-01
   · Nicer product showcase frame (ring · pedestal · glow)
   · Feature rows: bolder copper icon tiles + accent rail
   · Stat tiles: pointer-reactive 3D tilt on hover
   ============================================================= */

/* ---- Product showcase frame ---- */
.about-media-v2 {
  border-radius: 30px;
  isolation: isolate;
}
.theme-light .about-media-v2 {
  background:
    radial-gradient(circle at 50% 36%, #fefcf8 0%, transparent 58%),
    linear-gradient(165deg, #f7f0e4 0%, #ece2d1 68%, #e2d5c0 100%);
  border: 1px solid rgba(23,19,13,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 70px rgba(255,255,255,.45),
    0 34px 80px rgba(23,19,13,.16);
}
/* decorative concentric ring behind the product */
.about-media-v2::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -54%);
  border-radius: 50%;
  border: 1px solid rgba(23,19,13,.18);
  box-shadow: 0 0 0 14px rgba(23,19,13,.05), inset 0 0 40px rgba(23,19,13,.05);
  pointer-events: none;
}
/* soft pedestal / contact shadow under the product */
.about-media-v2::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 17%;
  left: 50%;
  width: 48%;
  height: 7%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(23,19,13,.28), transparent 72%);
  filter: blur(7px);
  pointer-events: none;
}
.about-media-v2 .about-media-img { z-index: 1; }
.theme-light .about-media-v2 .about-media-glow {
  background: radial-gradient(circle at 50% 46%, rgba(23,19,13,.18), transparent 58%);
}
.about-media-v2 .about-media-img {
  filter: drop-shadow(0 24px 30px rgba(23,19,13,.32)) drop-shadow(0 6px 10px rgba(23,19,13,.18));
  transition: transform .6s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.about-media-v2:hover .about-media-img { transform: translateY(-6px) scale(1.03); }

/* ---- Feature rows — bolder, with copper accent rail ---- */
.about-feature {
  position: relative;
  padding: 12px 14px 12px 16px;
}
.about-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--copper-soft), transparent);
  opacity: 0;
  transform: scaleY(.4);
  transform-origin: top;
  transition: opacity .3s, transform .35s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.about-feature:hover::before { opacity: 1; transform: scaleY(1); }
.theme-light .about-feature:hover {
  background: linear-gradient(90deg, rgba(23,19,13,.06), transparent 80%);
  border-radius: 16px;
}
.about-feature-icon svg { width: 25px; height: 25px; }

/* ---- Stat tiles — pointer-reactive 3D tilt ---- */
.about-stats { perspective: 1100px; }
.about-stat {
  transform-style: preserve-3d;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: transform .5s var(--ease-out, cubic-bezier(.22,1,.36,1)), border-color .3s, box-shadow .3s;
}
.about-stat-icon svg { width: 22px; height: 22px; }
/* lift the icon + value slightly on the Z axis while tilting */
.about-stat-icon,
.about-stat strong { transform: translateZ(0); transition: transform .5s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.about-stat.is-tilting .about-stat-icon { transform: translateZ(34px); }
.about-stat.is-tilting strong { transform: translateZ(20px); }
/* CSS-only fallback tilt for touch / no-JS */
@media (hover: none) {
  .about-stat:active { transform: translateY(-4px) rotateX(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .about-media-v2:hover .about-media-img { transform: none; }
  .about-stat, .about-stat.is-tilting .about-stat-icon, .about-stat.is-tilting strong { transform: none !important; }
}

/* ---- Loader tagline — "Hecho en Uruguay, con calma" ---- */
.loader-tagline {
  margin: 2px 0 0;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255, .42);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  animation: loader-mark .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) .4s both;
}
.loader-tagline span { font-size: 12px; letter-spacing: 0; }

/* =============================================================
   CHECKOUT — refinamientos 2026-06-01
   · Botón "Mi cuenta" en el header
   · Departamento como desplegable
   · Botón "Seguir comprando" en el modal de confirmación
   ============================================================= */
.checkout-nav-right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.checkout-account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 13px;
  transition: color .2s, background .2s, border-color .2s;
}
.checkout-account:hover {
  color: var(--ink);
  background: rgba(255,255,255,.08);
  border-color: var(--line-mid);
}
.checkout-account svg { width: 15px; height: 15px; }
.theme-light .checkout-account {
  background: rgba(23,19,13,.04);
  border-color: rgba(23,19,13,.12);
  color: var(--ink-dim);
}
.theme-light .checkout-account:hover {
  background: rgba(23,19,13,.08);
  border-color: rgba(23,19,13,.22);
  color: var(--ink);
}
@media (max-width: 560px) {
  .checkout-account span { display: none; }
  .checkout-account { padding: 8px; }
}

/* Departamento — select estilizado igual que los inputs */
.ck-field select {
  width: 100%;
  background-color: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 40px 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317130d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  transition: border-color .2s, background-color .2s;
}
.ck-field select:focus {
  outline: none;
  border-color: var(--ink-dim);
  background-color: rgba(255,255,255,.06);
}
.theme-light .ck-field select { background-color: #fff; border-color: var(--line-mid); }
.theme-light .ck-field select:focus { background-color: #fff; border-color: rgba(23,19,13,.5); }

/* Seguir comprando — botón del modal de confirmación */
.ck-modal-keep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.ck-modal-keep svg { width: 14px; height: 14px; }

/* =============================================================
   AJUSTES 2026-06-01 (bis)
   · Cuenta: la página llena la pantalla (sin "void" oscuro)
   · Producto: flecha del CTA reacciona al hover
   · Mini-FAQ: +/× perfectamente centrados + apertura suave
   ============================================================= */

/* ---- Página de cuenta: superficie clara a pantalla completa ----
   Antes el fondo claro vivía sólo en .account-shell (max-width 1200),
   así que en pantallas anchas se veía el negro del <body> a los costados.
   Ahora el body es la superficie clara full-bleed y el contenido se
   centra con max-width, igual que el resto de la web. */
body.page-account {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #FFFFFF;
}
.page-account .account-shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
}
.page-account .account-grid,
.page-account .account-gate {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
.page-account > .footer { flex-shrink: 0; }

/* ---- CTA "Reservar mi Pausa": la flecha gira a la derecha en hover ---- */
.pdp-actions [data-pdp-add] svg {
  transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.pdp-actions [data-pdp-add]:hover svg {
  transform: rotate(45deg);
}

/* ---- Mini-FAQ: signo +/× perfectamente centrado (barras CSS) ---- */
.pdp-mini-faq-icon {
  position: relative;
  font-size: 0;
  flex-shrink: 0;
  transition: transform .35s var(--ease-out, cubic-bezier(.22,1,.36,1)), color .2s, border-color .2s;
}
.pdp-mini-faq-icon::before,
.pdp-mini-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.7px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.pdp-mini-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.pdp-mini-faq[open] .pdp-mini-faq-icon { transform: rotate(45deg); }

/* ---- Mini-FAQ: apertura suave (altura animada por JS) ---- */
.pdp-mini-faq p {
  box-sizing: border-box;
  overflow: hidden;
  will-change: height;
  transition: height .4s var(--ease-out, cubic-bezier(.22,1,.36,1)), opacity .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pdp-mini-faq p { transition: none; }
}

/* ---- "MÁS ELEGIDO": chip en flujo, alineado igual que "FUNDADOR" ---- */
.pdp-pack--popular { padding-top: 18px; }
.pdp-pack--popular .pdp-pack-tag {
  position: static;
  top: auto;
  left: auto;
  align-self: flex-start;
  margin-bottom: 6px;
  box-shadow: 0 6px 18px rgba(255,255,255,.30);
}

/* =============================================================
   HEADER / NAV — entrada y salida suaves (2026-06-02)
   · Aparece: cae desde arriba y se asienta con calma (expo-out)
   · Se va: se sincha hacia arriba, limpio (ease-in)
   · Entrada única al cargar la página (drop-in)
   Igual en todas las páginas (vive en el bundle compartido).
   ============================================================= */
.nav {
  /* "Show / settle": deceleración suave al volver a su lugar */
  transition:
    transform   .62s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    opacity     .5s  var(--ease-out, cubic-bezier(.16,1,.3,1)),
    background  .45s ease,
    border-color .45s ease,
    box-shadow  .45s ease;
  animation: nav-enter .85s var(--ease-out, cubic-bezier(.16,1,.3,1)) .12s backwards;
}
.nav.is-hidden {
  /* "Hide / cinch up": acelera al salir hacia arriba */
  --nav-ty: -160%;
  --nav-sc: .965;
  opacity: 0;
  pointer-events: none;
  transition:
    transform .42s cubic-bezier(.5, 0, .75, 0),
    opacity   .32s ease;
}
@keyframes nav-enter {
  from { transform: translate(-50%, -160%) scale(.96); opacity: 0; }
  to   { transform: translate(-50%, 0)     scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { animation: none; transition: opacity .2s linear; }
  .nav.is-hidden { transition: opacity .2s linear; }
}

/* =============================================================
   BLOG / GUÍAS — diseño de contenido (GEO/AEO)
   ============================================================= */
.blog-shell { padding: clamp(6rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem); }
.blog-shell .container { max-width: 760px; }
.blog-index .container { max-width: 1040px; }

.blog-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.blog-head .h-display { margin: .4rem 0 1rem; }
.blog-head .lede { max-width: 56ch; margin-inline: auto; }

.blog-breadcrumb {
  font-size: .82rem; letter-spacing: .01em; opacity: .62;
  margin-bottom: 1.4rem; display: flex; gap: .5rem; flex-wrap: wrap;
}
.blog-breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.blog-breadcrumb a:hover { border-color: currentColor; }
.blog-breadcrumb span { opacity: .5; }

/* --- listado de artículos --- */
.blog-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.blog-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(26,42,58,.1);
  border-radius: 18px; overflow: hidden;
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(26,42,58,.45);
  border-color: rgba(255,255,255,.4);
}
.blog-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.blog-card-media { aspect-ratio: 16/10; overflow: hidden; background: #ece4d8; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-tag {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: #f4f3ef; font-weight: 700; margin-bottom: .55rem;
}
.blog-card-body h2 { font-size: 1.18rem; line-height: 1.25; margin: 0 0 .55rem; }
.blog-card-body p { font-size: .92rem; line-height: 1.55; opacity: .75; margin: 0 0 1rem; }
.blog-card-more { margin-top: auto; font-weight: 600; font-size: .9rem; color: #1A2A3A; }

/* --- cuerpo del artículo --- */
.post-meta {
  display: flex; gap: .9rem; flex-wrap: wrap; align-items: center;
  font-size: .82rem; opacity: .62; margin-bottom: 1.6rem;
}
.post-tag {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: #f4f3ef; font-weight: 700;
}
.post-body { font-size: 1.06rem; line-height: 1.75; }
.post-body > p:first-of-type { font-size: 1.18rem; line-height: 1.6; }
.post-body h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1.15;
  margin: 2.6rem 0 1rem;
}
.post-body h3 { font-size: 1.18rem; margin: 1.8rem 0 .7rem; font-weight: 700; }
.post-body p { margin: 0 0 1.15rem; }
.post-body ul, .post-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.post-body li { margin-bottom: .55rem; }
.post-body strong { font-weight: 700; }
.post-body a { color: #f4f3ef; text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid #f4f3ef; font-style: italic; opacity: .9;
}
.post-table-wrap { overflow-x: auto; margin: 1.6rem 0; }
.post-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.post-table th, .post-table td {
  text-align: left; padding: .8rem .9rem; border-bottom: 1px solid rgba(26,42,58,.12);
  vertical-align: top;
}
.post-table th { font-weight: 700; background: rgba(26,42,58,.04); }
.post-table tr:last-child td { border-bottom: none; }

.post-keyfacts {
  background: #1A2A3A; color: #F5F1EA; border-radius: 18px;
  padding: 1.6rem 1.7rem; margin: 2rem 0;
}
.post-keyfacts h2 { color: #fff; margin: 0 0 .9rem; font-size: 1.25rem; font-family: inherit; font-weight: 700; }
.post-keyfacts ul { margin: 0; padding-left: 1.2rem; }
.post-keyfacts li { margin-bottom: .5rem; }

.post-faq { margin: 2.6rem 0 0; }
.post-faq h2 { margin-bottom: 1.2rem; }
.post-faq details {
  border-bottom: 1px solid rgba(26,42,58,.14); padding: .3rem 0;
}
.post-faq summary {
  cursor: pointer; list-style: none; padding: .95rem 0;
  font-weight: 600; font-size: 1.03rem; display: flex; justify-content: space-between; gap: 1rem;
}
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; color: #f4f3ef; font-weight: 400; font-size: 1.4rem; line-height: 1; }
.post-faq details[open] summary::after { content: "\2013"; }
.post-faq details > div { padding: 0 0 1rem; line-height: 1.65; opacity: .85; }

.post-cta {
  margin: 3rem 0 0; padding: 2rem; border-radius: 20px;
  background: #E8DDD0; text-align: center;
}
.post-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.post-cta p { margin: 0 0 1.3rem; opacity: .8; }

.post-related { margin-top: 3rem; }
.post-related h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.post-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.post-related a { color: #1A2A3A; font-weight: 600; text-decoration: none; }
.post-related a:hover { color: #1A2A3A; opacity: .6; }

/* =============================================================
   PDP — rediseño estilo Loop (2026-06-11)
   Nombre → contador fundadores minimalista → click-to-try →
   precio → nudge pareja → cantidad + add to cart → descripción.
   Orden del flex .pdp-info (sobrescribe el orden anterior):
   ============================================================= */
.pdp-info > .pdp-title       { order: 1; }
.pdp-info > .pdp-founders    { order: 2; }
.pdp-info > .pdp-try         { order: 3; }
.pdp-info > .pdp-price-row   { order: 4; }
.pdp-info > .pdp-unit-note   { order: 5; }
.pdp-info > .pdp-installments{ order: 6; }
.pdp-info > .pdp-duo-nudge   { order: 7; }
.pdp-info > .pdp-actions     { order: 8; }
.pdp-info > .pdp-assurances  { order: 9; }
.pdp-info > .pdp-guarantee   { order: 10; }
.pdp-info > .pdp-desc        { order: 11; }
.pdp-info > .pdp-benefits    { order: 12; }
.pdp-info > .pdp-stock       { order: 13; }
.pdp-info > .pdp-trust-grid  { order: 14; }
.pdp-info > .pdp-shipping    { order: 15; }
.pdp-info > .pdp-specs       { order: 16; }
.pdp-info > .pdp-mini-faq    { order: 17; }

.pdp-info > .pdp-title { margin-bottom: 10px; }

/* ── Contador de fundadores minimalista ── */
.pdp-founders { margin: 0 0 22px; }
.pdp-founders-top {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ink-dim);
  margin-bottom: 12px;
}
.pdp-founders .pdp-rating-stars { color: var(--ink); letter-spacing: -1px; font-size: 14px; }
.pdp-founders .pdp-rating-sold { display: inline-flex; align-items: center; gap: 7px; }
.pdp-founders .pdp-rating-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); position: relative; flex: 0 0 auto;
}
.pdp-founders .pdp-rating-pulse::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--ink); opacity: .5;
  animation: pdpPulse 2.2s var(--ease-out, ease) infinite;
}
@keyframes pdpPulse { 0%{transform:scale(.6);opacity:.5} 70%{transform:scale(1.7);opacity:0} 100%{opacity:0} }
.pdp-founders .pdp-progress-track {
  height: 4px; border-radius: 999px;
  background: rgba(23,19,13,.10); overflow: hidden;
}
.pdp-founders .pdp-progress-fill {
  height: 100%; border-radius: 999px;
  background: var(--ink);
  transition: width 1.1s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.pdp-founders-foot {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 7px;
  font-size: 11px; color: var(--ink-faint);
  font-family: var(--mono); letter-spacing: .04em;
}
.pdp-founders-foot .pdp-progress-value { color: var(--ink); font-weight: 500; }

/* ── Click to try ── */
.pdp-try {
  display: inline-flex; align-items: center; gap: 11px;
  align-self: flex-start;
  padding: 11px 18px 11px 12px;
  margin: 0 0 24px;
  background: var(--bg-2, #f6f6f4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .2s;
}
.pdp-try:hover { border-color: var(--ink); transform: translateY(-1px); background: var(--bg-elev, #fff); }
.pdp-try-icon {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--bg);
}
.pdp-try-icon svg { width: 13px; height: 13px; margin-left: 1px; }
.pdp-try-text { font-size: 14px; font-weight: 500; color: var(--ink); }
.pdp-try-hint {
  font-size: 11px; color: var(--ink-faint);
  font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase;
}

/* ── Nota de precio por unidad ── */
.pdp-unit-note { font-size: 12.5px; color: var(--ink-dim); margin: 2px 0 6px; }

/* ── Nudge pareja (mismo producto, 2 sale más en cuenta) ── */
.pdp-duo-nudge {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left;
  padding: 13px 15px;
  margin: 4px 0 20px;
  background: var(--bg-2, #f6f6f4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md, 16px);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .15s;
}
.pdp-duo-nudge:hover { transform: translateY(-1px); border-color: var(--ink); }
.pdp-duo-nudge.is-active {
  border-style: solid;
  border-color: var(--ink);
  background: var(--ink);
}
.pdp-duo-nudge.is-active .pdp-duo-text strong,
.pdp-duo-nudge.is-active .pdp-duo-text small,
.pdp-duo-nudge.is-active .pdp-duo-arrow { color: var(--bg); }
.pdp-duo-nudge.is-active .pdp-duo-badge { background: var(--bg); color: var(--ink); }
.pdp-duo-badge {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-weight: 600; font-size: 14px;
}
.pdp-duo-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pdp-duo-text strong { font-size: 14px; color: var(--ink); font-weight: 600; }
.pdp-duo-text small { font-size: 12px; color: var(--ink-dim); line-height: 1.35; }
.pdp-duo-arrow { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ink-faint); }

/* ── Assurances (devolución + envío) ── */
.pdp-assurances {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.pdp-assurances li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-dim);
}
.pdp-assurances svg { width: 17px; height: 17px; color: var(--ink); flex: 0 0 auto; }
.pdp-assurances strong { color: var(--ink); font-weight: 600; }

/* ── Descripción ── */
.pdp-desc { margin: 8px 0 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.pdp-desc h2 {
  font-family: var(--display, serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 12px;
}
.pdp-desc p { font-size: 15px; line-height: 1.65; color: var(--ink-dim); margin: 0 0 12px; max-width: 56ch; }
.pdp-desc p strong { color: var(--ink); font-weight: 600; }
.pdp-desc p em { font-style: italic; color: var(--ink); }

@media (max-width: 760px) {
  .pdp-duo-text small { font-size: 11.5px; }
  .pdp-try { width: 100%; justify-content: flex-start; }
}

/* =============================================================
   PDP — calculador de envío con selector de departamento (2026-06-11)
   ============================================================= */
.pdp-shipping-label {
  display: block;
  font-size: 11px; font-family: var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 11px;
}
.pdp-shipping-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.pdp-ship-select { position: relative; flex: 1 1 auto; min-width: 0; }
.pdp-ship-select select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%;
  padding: 11px 38px 11px 14px;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-pill, 999px);
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink);
  cursor: pointer; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.pdp-ship-select select:hover { border-color: var(--line-strong); }
.pdp-ship-select select:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,19,13,.08); }
.pdp-ship-caret {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-dim); pointer-events: none;
}
.pdp-ship-zip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 9px 13px;
  background: var(--bg-2, #f6f6f4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--ink-dim); white-space: nowrap;
}
@media (max-width: 420px) {
  .pdp-shipping-row { flex-wrap: wrap; }
  .pdp-ship-zip { width: 100%; justify-content: center; }
}

/* =============================================================
   PDP — sección "Momentos" estilo Loop (banda oscura) (2026-06-11)
   ============================================================= */
.pdp-moments {
  margin-top: clamp(48px, 8vw, 96px);
  padding: clamp(56px, 9vw, 104px) 0;
  background: #0b0b0c;
  color: #f4f3ef;
  /* full-bleed dentro del .theme-light con padding lateral */
  border-radius: clamp(20px, 3vw, 32px);
}
.pdp-moments-head { text-align: center; margin-bottom: clamp(34px, 5vw, 56px); }
.pdp-moments-kicker {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,243,239,.5);
  margin-bottom: 14px;
}
.pdp-moments-title {
  font-family: var(--display, serif); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.02em; line-height: 1.05;
  color: #f4f3ef; margin: 0;
}
.pdp-moments-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
}
.pdp-moment-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
  background: #141416;
  margin-bottom: 18px;
}
.pdp-moment-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.02) brightness(.98);
  transition: transform .6s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter .6s;
}
.pdp-moment:hover .pdp-moment-media img { transform: scale(1.04); filter: grayscale(.85) contrast(1.04); }
.pdp-moment h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -.01em;
  color: #f4f3ef; margin: 0 0 8px;
}
.pdp-moment p {
  font-size: 14px; line-height: 1.6;
  color: rgba(244,243,239,.62); margin: 0; max-width: 38ch;
}
.pdp-moment em { font-style: italic; color: rgba(244,243,239,.85); }

@media (max-width: 860px) {
  .pdp-moments-grid { grid-template-columns: 1fr; gap: 28px; }
  .pdp-moment-media { aspect-ratio: 16 / 10; }
  .pdp-moment p { max-width: none; }
}

/* =============================================================
   PDP — botón "Click to try" estilo Loop + tester de sonido (2026-06-11)
   ============================================================= */
/* Botón refinado tipo Loop (pill outline + triángulo) */
.pdp-try {
  gap: 10px;
  padding: 10px 20px 10px 12px;
  border-radius: var(--r-pill, 999px);
  background: transparent;
  border: 1px solid var(--line-strong);
}
.pdp-try:hover { background: var(--bg-2, #f6f6f4); border-color: var(--ink); transform: translateY(-1px); }
.pdp-try-icon { width: 26px; height: 26px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.pdp-try:hover .pdp-try-icon { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pdp-try-icon svg { width: 9px; height: 9px; margin-left: 1px; }

/* ── Overlay del tester ── */
.vtryon {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  color: #14202c;
  background: linear-gradient(160deg, #d4ecff 0%, #b9dbf6 48%, #e8f5ff 100%);
  opacity: 0;
  transition: opacity .45s var(--ease-out, ease), background 1s var(--ease-soft, ease), color .8s ease;
  overflow: hidden;
}
.vtryon.is-open { opacity: 1; }
.vtryon.is-with {
  color: #eef6ff;
  background: linear-gradient(160deg, #2a3c50 0%, #43607c 52%, #718faf 100%);
}
.vtryon-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vtryon-stage, .vtryon-controls, .vtryon-brand, .vtryon-close { position: relative; z-index: 2; }

/* Marca + cerrar */
.vtryon-brand {
  position: absolute; top: 22px; left: 0; right: 0; z-index: 2;
  text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: currentColor; opacity: .85;
}
.vtryon-close {
  position: absolute; top: 16px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20,32,44,.14); color: currentColor;
  transition: background .2s, transform .2s;
}
.vtryon.is-with .vtryon-close { background: rgba(255,255,255,.16); }
.vtryon-close:hover { transform: scale(1.06); background: rgba(20,32,44,.24); }
.vtryon-close svg { width: 18px; height: 18px; }

/* Controles top-left */
.vtryon-controls { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vtryon-ctrl {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border-radius: var(--r-pill, 999px);
  background: rgba(20,32,44,.16); color: currentColor;
  font-size: 12.5px; font-weight: 500;
  transition: background .2s, transform .2s;
}
.vtryon.is-with .vtryon-ctrl { background: rgba(255,255,255,.16); }
.vtryon-ctrl:hover { transform: translateY(-1px); background: rgba(20,32,44,.26); }
.vtryon.is-with .vtryon-ctrl:hover { background: rgba(255,255,255,.26); }
.vtryon-ctrl svg { width: 15px; height: 15px; }
.vtryon-ctrl:not(.vtryon-ctrl--wide) { width: 34px; padding: 0; justify-content: center; }
.vtryon-ctrl-label { white-space: nowrap; }
/* swap de iconos motion/mute */
.vtryon-ico-play, .is-motion-paused .vtryon-ico-pause { display: none; }
.is-motion-paused .vtryon-ico-play { display: inline; }
.vtryon-ico-muted, .vtryon.is-muted .vtryon-ico-sound { display: none; }
.vtryon.is-muted .vtryon-ico-muted { display: inline; }

/* Stages */
.vtryon-stage { display: none; flex-direction: column; align-items: center; text-align: center; max-width: 640px; }
.vtryon-stage.is-active { display: flex; }
.vtryon-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  opacity: .8; margin-bottom: 6px;
}
.vtryon-title {
  font-family: var(--sans, sans-serif);
  font-weight: 900; letter-spacing: -.04em; line-height: .82;
  font-size: clamp(3.2rem, 11vw, 7rem);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
  margin: 0;
}
.vtryon-title > span { display: block; }

/* Tapones (glifo) */
.vtryon-plugs {
  display: inline-flex; justify-content: center; align-items: center;
  margin: -.12em 0; pointer-events: none;
}
.vtryon-plug {
  width: clamp(54px, 11vw, 92px); height: auto;
  filter: drop-shadow(0 10px 22px rgba(20,40,70,.28));
  transition: transform .6s var(--ease-bounce, cubic-bezier(.34,1.4,.64,1));
}
.vtryon-plug ellipse { fill: #fff; }
.vtryon-plug circle { stroke: #fff; }
.vtryon-plug--l { transform: translateX(14%) rotate(-8deg); }
.vtryon-plug--r { transform: translateX(-14%) rotate(8deg); margin-left: -6%; }
/* split al poner los tapones */
.vtryon.is-with .vtryon-plug--l { transform: translateX(-58%) rotate(-22deg); }
.vtryon.is-with .vtryon-plug--r { transform: translateX(58%) rotate(22deg); }

.vtryon-head-ico { margin: 18px 0 14px; opacity: .85; }
.vtryon-head-ico svg { width: 30px; height: 30px; }
.vtryon-sub { font-size: 15px; line-height: 1.55; opacity: .82; margin: 8px 0 0; max-width: 30ch; }

.vtryon-cta {
  margin-top: 30px;
  padding: 16px 44px; min-height: 54px;
  border-radius: var(--r-pill, 999px);
  background: #161616; color: #fff;
  font-size: 15px; font-weight: 600;
  transition: transform .2s, filter .2s;
}
.vtryon-cta:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.1); }

.vtryon-state-sub { margin: 16px 0 0; font-size: 14px; font-weight: 500; opacity: .85; }
.vtryon-state { margin: 20px 0 0; font-size: 15px; line-height: 1.55; opacity: .9; max-width: 34ch; min-height: 3.2em; }
.vtryon-state strong { font-weight: 700; }

.vtryon-toggle {
  margin-top: 26px;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: #161616;
  box-shadow: 0 12px 30px rgba(20,40,70,.30);
  transition: transform .2s, background .4s;
  position: relative;
}
.vtryon-toggle::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .35;
  animation: vtryonPulse 2.4s var(--ease-out, ease) infinite;
}
@keyframes vtryonPulse { 0%{transform:scale(.8);opacity:.35} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
.vtryon-toggle:hover { transform: scale(1.06); }
.vtryon-toggle-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: all .4s; }
.vtryon.is-with .vtryon-toggle { background: #fff; }
.vtryon.is-with .vtryon-toggle-dot { background: #161616; }
.vtryon-toggle-label { margin: 16px 0 0; font-size: 14px; font-weight: 600; }

@media (max-width: 600px) {
  .vtryon-ctrl--wide .vtryon-ctrl-label { display: none; }
  .vtryon-ctrl--wide { width: 34px; padding: 0; justify-content: center; }
  .vtryon-sub { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vtryon-plug, .vtryon-toggle::after { transition: none; animation: none; }
}

/* =============================================================
   Newsletter popup — 10% OFF (2026-06-12) · monocromático
   ============================================================= */
.nl-pop { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; }
.nl-pop[hidden] { display: none; }
.nl-pop-backdrop {
  position: absolute; inset: 0;
  background: rgba(8,8,9,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s ease;
}
.nl-pop.is-open .nl-pop-backdrop { opacity: 1; }
.nl-pop-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 412px;
  background: #0c0c0d; color: #f4f3ef;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 38px 30px 26px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .4s var(--ease-out, ease), transform .45s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.nl-pop.is-open .nl-pop-card { opacity: 1; transform: none; }
.nl-pop-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06); color: rgba(244,243,239,.7);
  transition: background .2s, color .2s;
}
.nl-pop-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.nl-pop-close svg { width: 14px; height: 14px; }
.nl-pop-kicker {
  display: inline-block;
  font-family: var(--mono, monospace); font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244,243,239,.5); margin-bottom: 16px;
}
.nl-pop-title {
  font-family: var(--display, serif); font-weight: 400;
  font-size: clamp(3rem, 12vw, 4rem); line-height: .95; letter-spacing: -.02em;
  margin: 0; color: #fff;
}
.nl-pop-title--sm { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.nl-pop-lead { margin: 4px 0 0; font-size: 16px; font-weight: 500; color: rgba(244,243,239,.92); }
.nl-pop-sub { margin: 14px 0 22px; font-size: 13.5px; line-height: 1.55; color: rgba(244,243,239,.62); }
.nl-pop-sub strong { color: #fff; font-weight: 600; }
.nl-pop-form { display: flex; flex-direction: column; gap: 9px; }
.nl-pop-form input {
  width: 100%; height: 50px; padding: 0 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  color: #fff; font-size: 15px; font-family: var(--sans, sans-serif); outline: none;
  transition: border-color .2s, background .2s;
}
.nl-pop-form input::placeholder { color: rgba(244,243,239,.4); }
.nl-pop-form input:focus { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.nl-pop-btn {
  width: 100%; height: 50px; border-radius: 999px;
  background: #fff; color: #0a0a0a;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: transform .2s, filter .2s; cursor: pointer;
}
.nl-pop-btn:hover { transform: translateY(-1px); filter: brightness(.92); }
.nl-pop-btn.is-loading { opacity: .65; pointer-events: none; }
.nl-pop-btn--link { margin-top: 8px; }
.nl-pop-msg { margin: 12px 0 0; font-size: 12.5px; }
.nl-pop-msg.is-error { color: #ff9a8a; }
.nl-pop-decline {
  margin-top: 14px; background: none;
  font-size: 12px; color: rgba(244,243,239,.45);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.nl-pop-decline:hover { color: rgba(244,243,239,.7); }
/* success */
.nl-pop-check {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #0a0a0a;
}
.nl-pop-check svg { width: 26px; height: 26px; }
.nl-pop-code {
  display: inline-block; margin: 18px 0 8px;
  padding: 13px 30px; cursor: pointer;
  border: 1px dashed rgba(255,255,255,.4); border-radius: 12px;
  background: rgba(255,255,255,.04);
  font-family: var(--mono, monospace); font-size: 21px; font-weight: 700;
  letter-spacing: .18em; color: #fff;
  transition: background .2s, border-color .2s;
}
.nl-pop-code:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.6); }
.nl-pop-fine { margin: 0 0 22px; font-size: 12.5px; color: rgba(244,243,239,.55); }
@media (max-width: 420px) {
  .nl-pop-card { padding: 32px 22px 22px; }
}

/* =============================================================
   ╔═══════════════════════════════════════════════════════════╗
   ║  CAPA DE DISPOSITIVOS (2026-06-12)                        ║
   ║  Experiencias distintas por dispositivo — no solo escala. ║
   ║  Mobile ≤639 · Tablet 640–899 · Desktop ≥900              ║
   ║  Va al FINAL del bundle a propósito: gana la cascada.     ║
   ╚═══════════════════════════════════════════════════════════╝
   ============================================================= */

/* ── Utilidades de visibilidad por dispositivo ─────────────── */
@media (min-width: 640px) {
  .only-mobile, [data-only-mobile] { display: none !important; }
}
@media (max-width: 639px) {
  .only-desktop, [data-only-desktop] { display: none !important; }
}

/* Toast: el estado oculto asomaba ~16px en el borde inferior
   (translateY(120%) no alcanzaba con bottom:24px). Fix global. */
.toast { transform: translateX(-50%) translateY(calc(100% + 32px)); }

/* ── HERO trust chips — existen solo en la experiencia mobile ── */
.hero-trust { display: none; }
@media (max-width: 639px) {
  .hero-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
  }
  .hero-trust li {
    font-family: var(--mono, monospace);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(244,244,244,.66);
    padding: 7px 13px;
    border: 1px solid rgba(244,244,244,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    white-space: nowrap;
  }
}

/* ════════════════════════════════════════════════════════════
   FOOTER — nueva estructura (footer.js):
   newsletter → marca+columnas → fila inferior (redes IZQ ·
   tarjetas DER) → copyright centrado.
   ════════════════════════════════════════════════════════════ */
.footer-v2-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.footer-v2-pay {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-v2 .footer-base {
  display: flex;
  justify-content: center;
  text-align: center;
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 900px) {
  /* La capa "pages" centra TODO el footer (container flex column center +
     grid 1fr !important). En desktop lo revertimos: marca a la izquierda,
     columnas a la derecha, fila inferior a todo el ancho. */
  .footer-v2 .container { align-items: stretch; }
  .footer-v2-top {
    grid-template-columns: 1fr 2fr !important;
    justify-items: start;
    align-items: start;
    text-align: left;
    max-width: none;
  }
  .footer-v2-brand { justify-content: flex-start; }
  .footer-v2-brand img { margin-inline: 0; }
  .footer-v2-cols {
    justify-items: start;
    justify-self: end;
    margin-inline: 0;
    width: 100%;
  }
  .footer-v2 .footer-col,
  .footer-v2 .footer-col h3,
  .footer-v2 .footer-col a { text-align: left; }
  .footer-v2 .footer-col { align-items: flex-start; }
  .footer-v2 .footer-col ul { align-items: flex-start; text-align: left; }
  /* redes a la IZQUIERDA · tarjetas a la DERECHA (pedido explícito) */
  .footer-v2-bottom { width: 100%; }
  .footer-v2-pay { justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE ≤ 639 — experiencia propia: centrada, liviana,
   swipeable y orientada a conversión.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {

  /* ── Performance: apagar texturas y animaciones de fondo ── */
  .bg-grain, .bg-stars, .loader-grain { display: none; }
  .hero-product-img { animation: none; }
  .hero-product-glint { display: none; }
  .hero-aura-core { animation: none; }
  .about-media-v2 .about-media-glow,
  .about-media-v2 .about-media-img,
  .final-cta-v2-media img { animation: none; }

  /* Reveal más corto y rápido (el scroll en mobile es más veloz) */
  .reveal { transform: translateY(12px); transition-duration: .55s; }
  .reveal .reveal-child, .reveal .loved-card, .reveal .use-card,
  .reveal .launch-card, .reveal .vs-card, .reveal .gallery-tile,
  .reveal .about-feature, .reveal .faq-item {
    transform: translateY(8px); transition-duration: .45s;
  }

  /* ── HERO: jerarquía propia — título primero, compra primaria ── */
  .hero-stage { gap: 14px; padding-top: 92px; }
  .hero-eyebrow  { order: 1; }
  .hero-bigtitle { order: 2; }
  .hero-product  { order: 3; width: min(68vw, 320px); }
  .hero-bigsub   { order: 4; }
  .hero-actions  { order: 5; }
  .hero-trust    { order: 6; }

  /* CTA: en mobile "Comprar" pasa a ser el botón primario */
  .hero-actions .btn-hero-ghost {
    order: -1;
    background: var(--off-white, #f4f4f4);
    color: #0a0a0a;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 10px 34px rgba(0,0,0,.45);
  }
  .hero-actions .btn-hero-primary {
    background: rgba(255,255,255,.05);
    color: var(--off-white, #f4f4f4);
    border: 1px solid rgba(244,244,244,.25);
    box-shadow: none;
  }

  /* ── Secciones: todo centrado (pedido explícito) ── */
  .section-head--left {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .section-head--left .loved-title,
  .section-head--left .h-section { text-align: center; }

  /* ── TIENDA (CTA de conversión): cards horizontales compactas,
     apiladas y LIMPIAS. Se ocultan el corazón de favorito y el
     badge flotante (se superponían sobre la imagen de 92px); el
     "más elegido" ya se comunica con la nota de rating. ── */
  .loved-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .loved-card {
    grid-template-columns: 104px 1fr;
    gap: 14px;
    padding: 12px;
    align-items: center;
    text-align: left;
  }
  .loved-card-media {
    width: 104px;
    height: 104px;
    aspect-ratio: auto;
    border-radius: 14px;
    align-self: stretch;
  }
  .loved-card-media--duo img:first-child { max-width: 56%; transform: translateX(-12%) rotate(-6deg); }
  .loved-card-media--duo img:last-child  { max-width: 56%; transform: translateX(12%) rotate(6deg); margin-left: -20%; }
  .loved-fav { display: none; }     /* secundario → fuera del CTA */
  .loved-badge { display: none; }   /* redundante con la nota de rating */
  .loved-card-body { gap: 5px; min-width: 0; }
  .loved-card-top { justify-content: flex-start; }
  .loved-rating { justify-content: flex-start; }
  .loved-rating svg { width: 12px; height: 12px; }
  .loved-rating-note { font-size: 10px; }
  .loved-name { font-size: 16px; }
  .loved-meta { font-size: 11.5px; }
  .loved-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin-top: 6px;
  }
  .loved-price-wrap { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .loved-price { font-size: 17px; }
  .loved-price-note { font-size: 10.5px; }
  .loved-buy { width: 100%; justify-content: center; padding-block: 12px; }
  /* la card destacada (Pack Pareja) se distingue por el borde, no por overlay */
  .loved-card--featured { border-color: rgba(23,19,13,.28); box-shadow: var(--shadow-soft); }

  /* ── EL PRODUCTO: sin render duplicado (ya está en el hero) ── */
  .about-media-v2 { display: none; }
  .about-features { gap: 16px; max-width: 420px; margin-inline: auto; }

  /* ── GALERÍA: mosaico 2 columnas (todo visible, sin swipe) ── */
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .gallery-tile {
    aspect-ratio: 1 / 1;
  }
  .gallery-tile--lg {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }

  /* ── PERFIL SONORO: sin radar — card LIGHT con score grande
     (el chart original es oscuro y el texto near-black quedaba
     invisible; acá lo volvemos claro y de alto contraste). ── */
  .perfil-svg { display: none; }
  .perfil-chart {
    padding: 30px 22px;
    background: var(--bg-2, #f6f6f4);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
  }
  .perfil-chart::before { display: none; }
  .perfil-score { margin-top: 0; }
  .perfil-score-label { color: var(--ink-dim); }
  .perfil-score-value { font-size: 64px; color: var(--ink); }
  .perfil-score-value .of { color: var(--ink-faint); }
  .perfil-score-tag { color: var(--ink-dim); }
  .perfil-panel { padding: 24px 18px; }

  /* ── CASOS DE USO: tiles 2×2 parejos y centrados ──
     (el padding:0 del ul base evita el corrimiento; contenido
     centrado vertical para que descripciones de distinto largo
     se vean balanceadas) ── */
  .use-grid { gap: 10px; max-width: 380px; }
  .use-card {
    text-align: center;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .use-card-icon { margin: 0 0 12px; }
  .use-card-title { margin-bottom: 4px; }
  .use-card p { text-wrap: balance; }

  /* ── COMPARATIVA: cards apiladas full-width (CALMÁ primero) ── */
  .vs-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .vs-grid-3 .vs-card { width: 100%; }

  /* ── LANZAMIENTO: filas icono-izquierda (icono ocupa 2 filas
     para que el texto NO caiga en la columna angosta) ── */
  .launch-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    row-gap: 3px;
    align-items: start;
    text-align: left;
    padding: 16px 18px;
  }
  .launch-card-icon {
    grid-row: 1 / span 2;
    margin-bottom: 0;
    width: 44px; height: 44px;
  }
  .launch-card-title { align-self: center; }

  /* ── FAQ share + CTA final: centrados ── */
  .faq-share { flex-direction: column; text-align: center; gap: 14px; }
  .share-buttons { justify-content: center; flex-wrap: wrap; }
  .final-cta-v2 { text-align: center; }
  .final-cta-v2-media { min-height: 0; }
  .final-cta-v2-media img { max-height: 170px; }
  .final-cta-v2-body { align-items: center; }
  .final-cta-v2-sub { margin-inline: auto; }
  .final-cta-v2-actions { width: 100%; flex-direction: column; }
  .final-cta-v2-actions .btn { width: 100%; justify-content: center; }

  /* ── FOOTER: todo centrado y apilado ── */
  .footer-news { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .footer-news-copy { flex: 0 1 auto; }
  .footer-news-form { width: 100%; max-width: 360px; }
  .footer-news-msg { left: 0; right: 0; text-align: center; }
  .footer-v2-top { justify-items: center; text-align: center; }
  .footer-v2-brand img { margin-inline: auto; }
  .footer-v2-cols {
    grid-template-columns: 1fr;
    gap: 26px;
    width: 100%;
  }
  .footer-v2 .footer-col { align-items: center; text-align: center; }
  .footer-v2-bottom { flex-direction: column; gap: 20px; }
  .footer-v2-pay { justify-content: center; }

  /* ── PDP (producto): breadcrumb fuera, grids compactas ── */
  .crumb { display: none; }
  .pdp { padding-top: calc(var(--nav-h) + 10px); }
  .pdp-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    text-align: center;
  }
  .pdp-feature-icon { margin-inline: auto; }
  .pdp-trust-card { text-align: center; }
  .pdp-trust-icon { margin-inline: auto; }

  /* MOMENTOS: 3 cards apiladas, centradas (imagen panorámica) */
  .pdp-moments-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .pdp-moment { text-align: center; }
  .pdp-moment-media { aspect-ratio: 16 / 10; }
  .pdp-moment p { max-width: none; font-size: 13.5px; margin-inline: auto; }
}

/* ════════════════════════════════════════════════════════════
   TABLET 640–899 — layouts intermedios propios (ni mobile
   estirado ni desktop apretado).
   ════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 899px) {
  /* Tienda: cards horizontales a 1 columna, con aire */
  .loved-grid {
    grid-template-columns: 1fr;
    max-width: 660px;
    margin-inline: auto;
  }
  /* Casos: 2×2 (4 columnas quedan apretadas hasta 900) */
  .use-grid { grid-template-columns: repeat(2, 1fr); }
  /* El producto: una columna centrada, imagen contenida */
  .about-split-v2 { grid-template-columns: 1fr; }
  .about-media-v2 { max-width: 400px; }
  .about-features { max-width: 560px; margin-inline: auto; }
}

/* ════════════════════════════════════════════════════════════
   PDP STICKY BUY BAR — solo mobile/tablet (oculta en desktop,
   donde la columna de compra queda siempre a la vista).
   ════════════════════════════════════════════════════════════ */
.pdp-sticky {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 1.25rem);
  max-width: 440px;
  bottom: -120px;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  background: rgba(14,14,16,.9);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  color: #f4f3ef;
  transition: bottom .45s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.pdp-sticky.is-visible { bottom: max(12px, env(safe-area-inset-bottom)); }
.pdp-sticky-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdp-sticky-info strong { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.pdp-sticky-info span { font-size: 12px; color: rgba(244,243,239,.65); white-space: nowrap; }
.pdp-sticky .btn { flex: 0 0 auto; }
@media (min-width: 900px) {
  .pdp-sticky { display: none; }
}
@media (max-width: 899px) {
  /* el ticker sube para no chocar con la barra sticky */
  .pdp-ticker { bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* aire extra al final para que la barra no tape el footer */
  body:has(.pdp-sticky) .footer { padding-bottom: 110px; }
}

/* =============================================================
   PÁGINAS LEGALES (términos · privacidad · devoluciones) (2026-06-14)
   ============================================================= */
.legal {
  padding-top: calc(var(--nav-h) + max(16px, env(safe-area-inset-top)) + 2rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.legal-crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.legal-crumb a { color: var(--ink-dim); text-decoration: none; }
.legal-crumb a:hover { color: var(--ink); }
.legal-crumb span { opacity: .5; }
.legal-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: -.02em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 8px;
}
.legal-updated {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.legal-body { color: var(--ink-dim); }
.legal-body h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 .6rem;
}
.legal-body p,
.legal-body li {
  font-size: 15px;
  line-height: 1.7;
}
.legal-body p { margin: 0 0 .9rem; }
.legal-body ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.legal-body li { padding-left: .15rem; }
.legal-body li::marker { color: var(--ink-faint); }
.legal-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.legal-body a:hover { opacity: .7; }
.legal-body strong { color: var(--ink); font-weight: 600; }

/* =============================================================
   BANNER DE COOKIES (analytics.js) (2026-06-14)
   ============================================================= */
.cookie-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 120%);
  width: calc(100% - 1.5rem);
  max-width: 720px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 16px 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 16px 18px;
  margin-bottom: max(14px, env(safe-area-inset-bottom));
  background: rgba(14,14,16,.94);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
  color: #f4f3ef;
  transition: transform .5s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.cookie-bar.is-visible { transform: translate(-50%, 0); }
.cookie-bar-text {
  flex: 1 1 320px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244,243,239,.82);
  margin: 0;
}
.cookie-bar-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s, filter .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.cookie-btn--solid { background: #fff; color: #0a0a0a; border: 1px solid #fff; }
.cookie-btn--solid:hover { transform: translateY(-1px); filter: brightness(.92); }
.cookie-btn--ghost { background: transparent; color: #f4f3ef; border: 1px solid rgba(255,255,255,.28); }
.cookie-btn--ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
@media (max-width: 560px) {
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-bar-actions { width: 100%; }
  .cookie-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: none; }
}

/* Enlaces legales en la base del footer */
.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 12px;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color .2s;
}
.footer-legal a:hover { color: var(--ink); }
.footer-legal span { color: var(--ink-faint); font-size: 11px; }
@media (max-width: 639px) {
  .footer-v2 .footer-base { flex-direction: column; gap: 12px; }
}

/* =============================================================
   TRUST BAR — garantías reales (home) (2026-06-14)
   ============================================================= */
.trustbar {
  max-width: var(--content-max, 1180px);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2rem) var(--pad-x, 1.25rem) 0;
}
.trustbar-grid {
  list-style: none;
  margin: 0;
  padding: clamp(16px, 2.4vw, 22px) clamp(12px, 2.5vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.5vw, 28px);
  background: var(--bg-2, #f6f6f4);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.trustbar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.trustbar-item svg {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  color: var(--ink);
  opacity: .85;
}
.trustbar-item div { display: flex; flex-direction: column; min-width: 0; }
.trustbar-item strong {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.2;
}
.trustbar-item span {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.3;
}
.trustbar-item + .trustbar-item { position: relative; }
@media (max-width: 899px) {
  .trustbar-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
}
@media (max-width: 420px) {
  .trustbar-item { gap: 10px; }
  .trustbar-item svg { width: 22px; height: 22px; }
  .trustbar-item strong { font-size: 12.5px; }
  .trustbar-item span { font-size: 11px; }
}

/* Chip honesto en las cards de tienda (reemplaza las estrellas falsas) */
.loved-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-dim);
}
.loved-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2e9e5b;
  box-shadow: 0 0 0 3px rgba(46,158,91,.16);
  flex: 0 0 auto;
}

/* =============================================================
   PÁGINA 404 (2026-06-14)
   ============================================================= */
.notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.notfound .container { display: flex; flex-direction: column; align-items: center; }
.notfound-code {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(4.5rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
  opacity: .12;
}
.notfound-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: -.4em 0 0;
}
.notfound-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 42ch;
  margin: 14px auto 0;
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}
.notfound-help { margin-top: 22px; font-size: 13px; color: var(--ink-faint); }
.notfound-help a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================
   ACCESIBILIDAD — foco visible por teclado (WCAG 2.4.7) (2026-06-14)
   El color usa --ink, que es claro en el scope oscuro y casi-negro
   en .theme-light, así que el anillo contrasta en ambos.
   ============================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[data-open-cart]:focus-visible,
[data-open-account]:focus-visible {
  outline: 2px solid var(--ink, #17130d);
  outline-offset: 2px;
  border-radius: 6px;
}
/* el foco por mouse/touch no muestra anillo; solo teclado */
:focus:not(:focus-visible) { outline: none; }

/* =============================================================
   Anclas del nav: que al saltar a una sección no quede tapada por
   el nav fijo. #tienda baja un poco más para mostrar las 2 cards. (2026-06-15)
   ============================================================= */
#galeria, #casos, #faq, #como-funcionan, #perfil, #comparativa, #lanzamiento, #tienda {
  scroll-margin-top: 72px;
}
/* #tienda se ajusta fino por JS (scroll a las cards, no al encabezado). */

/* =============================================================
   HEADER — micro-interacciones premium (2026-06-16)
   Se apila sobre el sistema de entrada/salida del nav (drop-in +
   show/hide asimétrico, líneas ~11445). NO redefine la animación;
   solo suma pulido Apple-style:
   · Hover de links → pastilla esmerilada que escala suave
   · Botones (carrito/cuenta/WhatsApp/menú) → press táctil al click
   · Condensa al scrollear → el nav se "asienta" un poco
   Respeta .nav-on-light y prefers-reduced-motion.
   ============================================================= */

/* — Condense-on-scroll: el nav se asienta (sumo `padding` a la
     transición ya existente, conservando el timing del settle). — */
.nav {
  transition:
    transform    .62s var(--ease-out),
    opacity      .5s  var(--ease-out),
    padding      .5s  var(--ease-out),
    background   .45s ease,
    border-color .45s ease,
    box-shadow   .45s ease;
}
.nav.is-scrolled { padding-top: 7px; padding-bottom: 7px; }

/* — Hover de links: pastilla esmerilada que escala (en vez del bg plano).
     El subrayado (::after) queda reservado para el link activo. — */
.nav-links a { isolation: isolate; }
.nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .085);
  opacity: 0;
  transform: scale(.78);
  transition: opacity .26s var(--ease-out), transform .42s var(--ease-bounce);
  z-index: -1;
  pointer-events: none;
}
.nav-links a:hover::before,
.nav-links a:focus-visible::before { opacity: 1; transform: scale(1); }
.nav-links a:hover { background: transparent; }
.nav-links a:hover::after { transform: scaleX(0); opacity: 0; }
.nav.nav-on-light .nav-links a::before { background: rgba(23, 19, 13, .06); }
.nav.nav-on-light .nav-links a:hover { background: transparent; }

/* — Botones del nav: press táctil al click (el hover scale ya existe). — */
:is(.nav-cart-btn, .nav-icon-btn, .nav-account-btn, .nav-mobile-toggle) {
  transition:
    background .25s var(--ease-out),
    border-color .25s var(--ease-out),
    transform .3s var(--ease-bounce);
}
:is(.nav-cart-btn, .nav-icon-btn, .nav-account-btn, .nav-mobile-toggle):active {
  transform: scale(.9);
  transition-duration: .1s;
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: opacity .2s linear, background .2s linear, border-color .2s linear; }
  .nav-links a::before { transition: opacity .15s linear; transform: none; }
  :is(.nav-cart-btn, .nav-icon-btn, .nav-account-btn, .nav-mobile-toggle) {
    transition: background .15s linear, border-color .15s linear;
  }
  :is(.nav-cart-btn, .nav-icon-btn, .nav-account-btn, .nav-mobile-toggle):active { transform: none; }
}

/* =============================================================
   HEADER — entrada que SÍ se ve (2026-06-16)
   PROBLEMA: la animación de entrada del nav (`nav-enter`, ~línea 11445)
   arranca al cargar la página, pero corre DETRÁS del loader (600–1200ms);
   para cuando el loader se va, el nav ya está quieto → "aparece de golpe".
   FIX: mientras el loader está (body.is-loading) el nav espera fuera de
   cuadro, y RECIÉN cuando el loader se va (body:not(.is-loading)) cae con
   un settle visible. La salida (scroll-down) ya está animada en .is-hidden.
   ============================================================= */
@keyframes nav-drop-in {
  0%   { opacity: 0; transform: translate(-50%, -160%) scale(.94); }
  55%  { opacity: 1; transform: translate(-50%, 9%)    scale(1.015); }
  100% { opacity: 1; transform: translate(-50%, 0)     scale(1); }
}
/* Loader presente → nav parqueado arriba, fuera de cuadro, sin animar. */
body.is-loading .nav {
  animation: none !important;
  opacity: 0;
  --nav-ty: -160%;
  --nav-sc: .94;
  transition: none !important;
}
/* Loader se fue → cae con settle (al togglear animation de none→nombre,
   se re-dispara, así que se ve aunque el nav ya existiera). `backwards`
   (no `forwards`) para que al terminar devuelva el control del transform
   al sistema de scroll (--nav-ty) y el ocultar/mostrar siga andando. */
body:not(.is-loading) .nav {
  animation: nav-drop-in 1s var(--ease-out) backwards;
}
/* La salida al bajar: un pelín más larga para que se note el deslizar. */
.nav.is-hidden {
  transition:
    transform .5s cubic-bezier(.5, 0, .75, 0),
    opacity   .34s ease;
}