/* =============================================================
   PEGADITO B2B — stylesheet
   System: refined barbershop · navy + azure · Playfair Display + Inter
   See PRODUCT.md, DESIGN.md for the full system rationale.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* --- Color (OKLCH; warm-tinted neutrals, never pure black/white) --- */
  --ink:               oklch(0.34 0.095 256);    /* navy core */
  --ink-deep:          oklch(0.24 0.080 256);    /* hero blocks, footer */
  --ink-soft:          oklch(0.44 0.110 256);    /* hover */
  --ink-glow:          oklch(0.60 0.150 256);    /* subtle accents on dark bg */

  --bone:              oklch(0.97 0.010 75);     /* default surface */
  --bone-deep:         oklch(0.94 0.014 75);     /* alt sections */
  --cream:             oklch(0.99 0.006 75);     /* elevated surfaces */
  --cream-warm:        oklch(0.985 0.012 70);    /* hero overlap */

  --graphite:          oklch(0.22 0.015 60);     /* primary text */
  --graphite-soft:     oklch(0.38 0.012 60);     /* secondary text */
  --graphite-mute:     oklch(0.55 0.010 60);     /* meta, captions */
  --rule:              oklch(0.85 0.012 60);     /* 1px dividers */
  --rule-soft:         oklch(0.90 0.010 60);     /* hairlines */

  --copper:            oklch(0.51 0.145 242);    /* azure accent (secondary blue) */
  --copper-deep:       oklch(0.44 0.140 244);    /* hover on cream */
  --copper-soft:       oklch(0.74 0.125 238);    /* lighter azure on dark backgrounds */

  --success:           oklch(0.55 0.08 145);
  --warning:           oklch(0.68 0.12 75);
  --danger:            oklch(0.50 0.13 25);

  /* --- Typography --- */
  --font-display: "Playfair Display", "GT Sectra", "Tiempos Headline", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Söhne", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --fs-caption:  0.75rem;
  --fs-small:    0.875rem;
  --fs-body:     1rem;
  --fs-lead:     1.125rem;
  --fs-h4:       clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h3:       clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --fs-h2:       clamp(2rem, 1.2rem + 3vw, 3.75rem);
  --fs-h1:       clamp(2.75rem, 1.4rem + 5.5vw, 6rem);
  --fs-display:  clamp(3.5rem, 1.4rem + 8vw, 9rem);

  /* --- Spacing (4px base) --- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  192px;

  /* --- Layout --- */
  --maxw:           1280px;
  --maxw-narrow:    920px;
  --maxw-prose:     680px;
  --pad-x:          clamp(20px, 4vw, 64px);
  --section-y:      clamp(72px, 8vw, 128px);
  --section-y-lg:   clamp(96px, 10vw, 160px);

  /* --- Radii (subtle, near-industrial) --- */
  --r-sm:   2px;
  --r:      4px;
  --r-md:   6px;
  --r-lg:   12px;

  /* --- Motion --- */
  --ease-out-quint:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   180ms;
  --t-base:   320ms;
  --t-slow:   600ms;
  --t-stage:  900ms;

  /* --- Elevation (used sparingly; cream ground is the primary visual) --- */
  --shadow-1:  0 1px 2px oklch(0.22 0.05 256 / 0.06), 0 0 0 1px oklch(0.22 0.05 256 / 0.04);
  --shadow-2:  0 6px 18px oklch(0.22 0.05 256 / 0.08), 0 1px 2px oklch(0.22 0.05 256 / 0.04);
  --shadow-3:  0 24px 48px oklch(0.22 0.05 256 / 0.16), 0 4px 8px oklch(0.22 0.05 256 / 0.06);

  --header-h:  72px;

  /* --- Semantic token layer (preferred for new code) ---
     Primitives (--graphite, --bone, --ink) keep their literal meaning.
     Semantic tokens are what gets reassigned in dark scopes. */
  --text:           var(--graphite);
  --text-soft:      var(--graphite-soft);
  --text-mute:      var(--graphite-mute);
  --surface:        var(--bone);
  --surface-alt:    var(--bone-deep);
  --surface-elev:   var(--cream);
  --surface-dark:   var(--ink);
  --surface-darker: var(--ink-deep);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--graphite);
  background: var(--bone);
  font-feature-settings: "ss01", "cv11";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; display: block; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }

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

/* Skip link */
.skip-link {
  position: absolute;
  inset-block-start: -9999px;
  inset-inline-start: 0;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { inset-block-start: 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--graphite);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 450; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p { margin: 0 0 1em; max-width: 65ch; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
em { font-style: italic; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--graphite-soft);
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 6px;
  border-radius: 3px;
  /* barber-pole nod (brand blues): navy + azure + cream, adapts to light/dark */
  background: repeating-linear-gradient(115deg, var(--ink) 0 4px, var(--copper) 4px 7px, var(--cream) 7px 10px);
  flex-shrink: 0;
}
/* On dark surfaces, eyebrow softens */
.is-dark .eyebrow { color: var(--copper-soft); }

/* Numerals */
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.container.narrow { max-width: var(--maxw-narrow); }
.container.prose  { max-width: var(--maxw-prose); }

section { padding-block: var(--section-y); }
section.tight { padding-block: clamp(48px, 6vw, 80px); }
section.alt   { background: var(--bone-deep); }
section.dark  {
  background: var(--ink-deep);
  color: var(--cream);
}
section.drenched {
  background: var(--ink);
  color: var(--cream);
}

.is-dark,
section.dark,
section.drenched,
section.hero,
section.cta-final,
section.page-head,
footer.site-footer {
  --graphite: var(--cream);
  --graphite-soft: oklch(0.85 0.02 75);
  --graphite-mute: oklch(0.72 0.02 75);
  --rule: oklch(0.40 0.04 256);
  /* Semantic tokens follow */
  --text:      var(--cream);
  --text-soft: oklch(0.85 0.02 75);
  --text-mute: oklch(0.72 0.02 75);
}
.is-dark h1, .is-dark h2, .is-dark h3, .is-dark h4,
section.dark h1, section.dark h2, section.dark h3, section.dark h4,
section.drenched h1, section.drenched h2, section.drenched h3, section.drenched h4 {
  color: var(--cream);
}

.section-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--graphite-soft); font-size: var(--fs-lead); }
.section-head.center p { margin-inline: auto; }

/* Editorial rule */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.rule.copper { background: var(--copper); height: 1px; max-width: 64px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: oklch(0.97 0.010 75 / 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
  transition: background var(--t-base) var(--ease-out-quint), box-shadow var(--t-base) var(--ease-out-quint);
}
.site-header[data-scrolled="true"] {
  box-shadow: 0 1px 0 oklch(0.22 0.06 256 / 0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--header-h);
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.06em;
}
.nav-logo img { height: 40px; width: auto; }
.nav-logo .wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.nav-links a {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--graphite);
  padding: 8px 0;
  transition: color var(--t-fast) ease;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 4px;
  height: 1px;
  background: var(--copper);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--t-base) var(--ease-out-quint);
}
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn):hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); }

/* Restore button colors (override .nav-links a base color) */
.nav-links a.btn-primary { color: var(--cream); }
.nav-links a.btn-outline { color: var(--ink); }
.nav-links a.btn-outline:hover { color: var(--cream); }
.nav-links a.btn-primary:hover { color: var(--cream); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
  border-radius: var(--r);
}
.nav-toggle:hover { background: var(--bone-deep); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.nav-toggle .bar {
  display: block;
  position: relative;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out-quint), opacity var(--t-fast);
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out-quint), top var(--t-base) var(--ease-out-quint);
}
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  /* The header's backdrop-filter creates a containing block for the
     position:fixed mobile drawer (a descendant), trapping it inside the
     ~73px header. Drop the filter at mobile widths so the fullscreen menu
     anchors to the viewport. The header stays translucent. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sp-5);
    padding: 96px var(--pad-x) 48px;
    background: var(--ink);
    color: var(--cream);
    transform: translateX(100%);
    transition: transform var(--t-base) var(--ease-out-expo);
    visibility: hidden;
    z-index: 70;
  }
  .nav-links[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
  }
  .nav-links a {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--cream);
    padding: 0;
  }
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--copper-soft); }
  .nav-links .btn { font-family: var(--font-body); font-size: var(--fs-body); }
  .nav-toggle[aria-expanded="true"] { color: var(--cream); }
  body[data-nav-open="true"] { overflow: hidden; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  background: var(--ink);
  color: var(--cream);
  transition: background var(--t-base) var(--ease-out-quint),
              color var(--t-base) var(--ease-out-quint),
              transform var(--t-fast) var(--ease-out-quint),
              border-color var(--t-base) var(--ease-out-quint);
  white-space: nowrap;
}
.btn:hover { background: var(--ink-soft); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

.btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

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

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  padding-inline: 8px;
}
.btn-ghost:hover { color: var(--ink-soft); background: oklch(0.94 0.014 75 / 0.6); }

/* On dark surfaces (hero, cta-final, page-head, drenched, dark, is-dark, footer) */
.is-dark .btn-primary,
section.dark .btn-primary,
section.drenched .btn-primary,
section.hero .btn-primary,
section.cta-final .btn-primary,
section.page-head .btn-primary,
footer.site-footer .btn-primary {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.is-dark .btn-primary:hover,
section.dark .btn-primary:hover,
section.drenched .btn-primary:hover,
section.hero .btn-primary:hover,
section.cta-final .btn-primary:hover,
section.page-head .btn-primary:hover {
  background: var(--copper-soft);
  color: var(--ink-deep);
  border-color: var(--copper-soft);
}
.is-dark .btn-outline,
section.dark .btn-outline,
section.drenched .btn-outline,
section.hero .btn-outline,
section.cta-final .btn-outline,
section.page-head .btn-outline {
  color: var(--cream);
  border-color: var(--cream);
  background: transparent;
}
.is-dark .btn-outline:hover,
section.dark .btn-outline:hover,
section.drenched .btn-outline:hover,
section.hero .btn-outline:hover,
section.cta-final .btn-outline:hover,
section.page-head .btn-outline:hover {
  background: var(--cream);
  color: var(--ink);
}

.btn-lg { min-height: 52px; padding: 14px 28px; font-size: var(--fs-body); }
.btn-sm { min-height: 38px; padding: 9px 20px; font-size: var(--fs-caption); }
/* Nav-specific button: more horizontal breathing room on small screens */
.nav-links .btn-sm { padding: 9px 22px; }

.btn-arrow::after {
  content: "→";
  font-family: var(--font-body);
  transition: transform var(--t-base) var(--ease-out-quint);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* ---------- Hero (drenched) ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(80px, 12vw, 160px) clamp(72px, 10vw, 128px);
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 80% 0%, oklch(0.42 0.13 240 / 0.55), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, oklch(0.22 0.10 256) 0%, transparent 70%);
  pointer-events: none;
}
.hero > .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 880px) {
  .hero > .container { grid-template-columns: 1.4fr 1fr; gap: var(--sp-9); align-items: center; }
}
.hero .eyebrow { color: var(--copper-soft); }
.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 350;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0 0 var(--sp-5);
}
.hero h1 .accent {
  font-style: italic;
  font-weight: 350;
  color: var(--copper-soft);
}
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  animation: heroWord var(--t-stage) var(--ease-out-expo) forwards;
  animation-delay: calc(var(--word-i, 0) * 70ms + 80ms);
}
@keyframes heroWord {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-sub {
  max-width: 50ch;
  font-size: var(--fs-lead);
  color: oklch(0.88 0.02 75);
  margin-bottom: var(--sp-7);
  opacity: 0;
  animation: fadeUp var(--t-slow) var(--ease-out-expo) 480ms forwards;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  opacity: 0;
  animation: fadeUp var(--t-slow) var(--ease-out-expo) 580ms forwards;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  margin-top: var(--sp-8);
  border-top: 1px solid oklch(0.45 0.06 256);
  padding-top: var(--sp-5);
  opacity: 0;
  animation: fadeUp var(--t-slow) var(--ease-out-expo) 700ms forwards;
}
.hero-meta div { min-width: 0; }
.hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 450;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hero-meta strong .unit {
  display: inline-block;
  font-size: 0.42em;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--copper-soft);
  margin-left: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.6em;
  line-height: 1;
}
.hero-meta span {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.78 0.04 75);
  margin-top: 6px;
}
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset-block-end: -10%;
  inset-inline: 10%;
  height: 24px;
  background: radial-gradient(closest-side, oklch(0.10 0.05 256 / 0.55), transparent 70%);
  filter: blur(4px);
  z-index: 0;
}
.hero-visual img {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  filter: drop-shadow(0 24px 32px oklch(0.10 0.05 256 / 0.45));
  animation: drift 8s var(--ease-in-out) infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--ink-deep);
  color: var(--copper-soft);
  border-block: 1px solid oklch(0.40 0.06 256);
  overflow: clip;
  padding-block: 14px;
}
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 60s linear infinite;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
.marquee-track span::before {
  content: "·";
  color: var(--copper);
  font-size: 1.5em;
  line-height: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Page header (non-hero pages) ---------- */
.page-head {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(80px, 9vw, 120px) clamp(56px, 7vw, 96px);
  position: relative;
  overflow: clip;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 100% 0%, oklch(0.42 0.13 240 / 0.45), transparent 60%);
  pointer-events: none;
}
.page-head .container { position: relative; }
.page-head h1 {
  color: var(--cream);
  font-size: clamp(2.5rem, 1.4rem + 4.5vw, 5rem);
  font-weight: 350;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}
.page-head .lead {
  color: oklch(0.88 0.02 75);
  max-width: 60ch;
  font-size: var(--fs-lead);
}

/* ---------- Value props (editorial, numbered, NOT icon-card) ---------- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .value-grid { grid-template-columns: repeat(4, 1fr); }
}
.value-cell {
  background: var(--bone);
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 280px;
}
.value-cell .num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 350;
  font-style: italic;
  color: var(--copper);
  letter-spacing: -0.02em;
  line-height: 1;
}
.value-cell h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.value-cell p {
  color: var(--graphite-soft);
  font-size: var(--fs-small);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Tier grid (intentional hierarchy) ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: stretch;
}
@media (min-width: 880px) {
  .tier-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
.tier-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-7) var(--sp-6);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  position: relative;
  transition: transform var(--t-base) var(--ease-out-quint);
}
.tier-card .tier-name {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite-mute);
  margin-bottom: var(--sp-4);
}
.tier-card .tier-discount {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 5vw, 5rem);
  font-weight: 350;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin-bottom: var(--sp-2);
}
.tier-card .tier-discount sub {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: super;
  margin-left: 4px;
  color: var(--graphite-mute);
  font-family: var(--font-body);
  font-style: normal;
}
.tier-card > p {
  color: var(--graphite-soft);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-5);
}
.tier-card ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--graphite-soft);
}
.tier-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.tier-card ul li::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 1px;
  background: var(--copper);
  margin-top: 0.7em;
}

.tier-bronce .tier-discount { color: var(--copper); }
.tier-bronce .tier-name { color: var(--copper); }

.tier-plata { background: var(--bone-deep); }
.tier-plata .tier-discount { color: var(--graphite); }
.tier-plata .tier-name { color: var(--graphite-soft); }

.tier-oro {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.tier-oro .tier-name { color: var(--copper-soft); }
.tier-oro .tier-discount { color: var(--cream); }
.tier-oro .tier-discount sub { color: var(--copper-soft); }
.tier-oro > p { color: oklch(0.85 0.02 75); }
.tier-oro ul { border-color: oklch(0.45 0.06 256); color: oklch(0.85 0.02 75); }
.tier-oro h4 { color: var(--cream); }
@media (min-width: 880px) {
  .tier-oro { transform: translateY(-12px); box-shadow: var(--shadow-3); }
}
.tier-oro .tier-flag {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: var(--sp-5);
  background: var(--copper);
  color: var(--ink-deep);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 0 0 var(--r) var(--r);
}

/* ---------- Steps (numbered, horizontal flow with hairlines) ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--bone);
  padding: var(--sp-7) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 240px;
}
section.dark .step { background: var(--ink-deep); }
section.drenched .step { background: var(--ink); }
.step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 2.5rem;
  color: var(--copper);
  letter-spacing: -0.02em;
  line-height: 1;
}
.step h3 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
}
.step p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--graphite-soft);
  line-height: 1.6;
}

/* ---------- Editorial stat row (replaces hero-metric SaaS template) ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-7);
  border-block: 1px solid var(--rule);
  padding-block: var(--sp-7);
}
@media (min-width: 880px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(3rem, 6.5vw, 4.5rem) !important;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.is-dark .stat strong, section.dark .stat strong, section.drenched .stat strong { color: var(--cream); }
.stat strong span { font-size: inherit; }
.stat span {
  font-size: var(--fs-small);
  color: var(--graphite-soft);
  max-width: 24ch;
  line-height: 1.4;
}

/* ---------- Catalog: gated notice + filter + product grid ---------- */
.gated-notice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-7);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  position: relative;
}
@media (min-width: 720px) {
  .gated-notice { grid-template-columns: 1fr auto; gap: var(--sp-7); }
}
.gated-notice .gated-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 1.5rem;
  color: var(--copper);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 6px;
}
.gated-notice h2,
.gated-notice h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--graphite);
}
.gated-notice p {
  margin: 0;
  color: var(--graphite-soft);
  font-size: var(--fs-small);
}

.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  border-block: 1px solid var(--rule);
  padding-block: var(--sp-4);
}
.cat-filter a,
.cat-filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Tap target >= 44x44 en mobile (WCAG 2.5.5 AAA). 12px+20fs+12px = 44. */
  padding: 12px 16px;
  min-height: 44px;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--graphite-soft);
  background: transparent;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.cat-filter a:hover,
.cat-filter button:hover { color: var(--ink); background: var(--bone-deep); }
.cat-filter a.active,
.cat-filter button.active { color: var(--cream); background: var(--ink); }

.cat-section {
  padding-block: var(--sp-9);
  border-bottom: 1px solid var(--rule);
}
.cat-section:last-of-type { border-bottom: 0; }
.cat-section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  align-items: end;
}
@media (min-width: 880px) {
  .cat-section-head { grid-template-columns: 1fr auto; gap: var(--sp-7); }
}
.cat-section-head h2 { margin: 0; }
.cat-section-head p { margin: 0; color: var(--graphite-soft); max-width: 50ch; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  /* 3D depth so .product-card rotateY actually reads as perspective tilt,
     not flat skew. Editorial magazine vibe, not Apple-3D. */
  perspective: 1400px;
  perspective-origin: 50% 30%;
}
@media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
@media (min-width: 1080px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--t-base) var(--ease-out-quint),
              box-shadow var(--t-base) var(--ease-out-quint),
              border-color var(--t-base) var(--ease-out-quint);
}
/* Composite hover: lift + rotateZ + rotateY for personality.
   Odd cards tilt one way, :nth-child(even) the other (rule below)
   so the grid feels organic, not synchronized.

   IMPORTANT: We use :nth-child(n) on the base rule to bump specificity
   above .reveal.is-visible (defined later in this file, which would
   otherwise win the cascade and reset transform to translateY(0)). */
.product-card:nth-child(n):hover,
.product-card:nth-child(n):focus-visible {
  transform: translateY(-4px) rotateZ(-0.9deg) rotateY(2.6deg);
  box-shadow: var(--shadow-2);
  border-color: oklch(0.78 0.02 75);
}
.product-card:nth-child(even):hover,
.product-card:nth-child(even):focus-visible {
  transform: translateY(-4px) rotateZ(0.9deg) rotateY(-2.6deg);
}
@media (prefers-reduced-motion: reduce) {
  .product-card:nth-child(n):hover,
  .product-card:nth-child(n):focus-visible,
  .product-card:nth-child(even):hover,
  .product-card:nth-child(even):focus-visible {
    transform: none;
  }
}
.product-img {
  position: relative;
  background: var(--bone-deep);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18%;
  transition: transform var(--t-slow) var(--ease-out-quint);
}
.product-card:hover .product-img img { transform: scale(1.06); }
/* Base badge: visual identity. Decoupled from .product-img so it can be reused
   inline in product-detail page meta column or anywhere else. */
.badge {
  background: var(--ink);
  color: var(--cream);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  line-height: 1.4;
}
.badge.copper { background: var(--copper); color: var(--ink-deep); }
.product-img .badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
}
.product-info {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.product-info .meta {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite-mute);
}
.product-info h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.product-info .desc {
  font-size: var(--fs-small);
  color: var(--graphite-soft);
  line-height: 1.5;
  margin: 0;
}
.product-info .price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-3);
  margin-top: auto;
  font-size: var(--fs-small);
}
.product-info .price b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-info .price .label {
  color: var(--graphite-mute);
  letter-spacing: 0.04em;
}

/* Empty state for filtered catalog */
.empty-state {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
}
.empty-state .mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 4rem;
  color: var(--copper);
  display: block;
}

/* ---------- Long-form prose (Nosotros) ---------- */
.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--graphite);
}
.prose p { margin-bottom: 1.25em; }
.prose .lead { font-size: 1.25rem; line-height: 1.6; margin-bottom: 2em; }
.prose h2, .prose h3 { margin-top: 1.4em; }
.prose blockquote {
  border-inline-start: 2px solid var(--copper);
  margin: 2em 0;
  padding: 4px 0 4px 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1.4;
}

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-8);
}
@media (min-width: 720px) {
  .timeline { grid-template-columns: 160px 1fr; gap: var(--sp-7) var(--sp-8); }
}
.timeline .year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 2rem;
  color: var(--copper);
  letter-spacing: -0.02em;
}
.timeline .entry h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.timeline .entry p { color: var(--graphite-soft); margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--maxw-narrow); margin-inline: auto; }
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item:first-of-type { border-top: 1px solid var(--rule); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--copper);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
  transition: transform var(--t-base) var(--ease-out-quint);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .answer {
  color: var(--graphite-soft);
  font-size: var(--fs-body);
  line-height: 1.65;
  padding-block-end: var(--sp-6);
  max-width: 65ch;
}

/* ---------- Form ---------- */
.form-wrap {
  max-width: 880px;
  margin-inline: auto;
  background: var(--cream);
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.form-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-block: var(--sp-7) var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.form-section-head:first-of-type { margin-top: 0; }
.form-section-head .step-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 1.25rem;
  color: var(--copper);
}
.form-section-head h3 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 720px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: 0.01em;
}
.field label .req { color: var(--ink); margin-left: 4px; }
.field .hint {
  font-size: 0.78rem;
  color: var(--graphite-mute);
  margin-top: 2px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-body);
  font-family: var(--font-body);
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--graphite);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: oklch(0.70 0.02 60); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  background: var(--cream);
  box-shadow: 0 0 0 3px oklch(0.32 0.12 256 / 0.15);
}
.field[data-error="true"] input,
.field[data-error="true"] select,
.field[data-error="true"] textarea {
  border-color: var(--danger);
  background: oklch(0.97 0.02 25 / 0.5);
}
.field .error-msg {
  font-size: 0.78rem;
  color: var(--danger);
  margin-top: 4px;
  display: none;
}
.field[data-error="true"] .error-msg { display: block; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.form-actions .meta {
  font-size: var(--fs-small);
  color: var(--graphite-mute);
  margin-left: auto;
  max-width: 32ch;
  text-align: right;
}

/* Form success state */
.form-success {
  display: none;
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
}
.form-success[data-visible="true"] { display: block; animation: successIn 900ms var(--ease-out-expo) both; }
.form-success .seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 2.5rem;
  margin: 0 auto var(--sp-5);
  position: relative;
}
.form-success .seal::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--copper);
  animation: pulseRing 2.4s var(--ease-in-out) infinite;
}
.form-success h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-3);
}
.form-success p {
  color: var(--graphite-soft);
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}
@keyframes successIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 0; }
}

/* ---------- Contact direct ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 880px) { .contact-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.contact-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--t-base) var(--ease-out-quint), background var(--t-base) var(--ease-out-quint);
}
.contact-card:hover {
  background: var(--bone-deep);
  border-color: oklch(0.78 0.02 75);
}
.contact-card .label {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}
.contact-card .value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  word-break: break-word;
}
.contact-card .desc {
  font-size: var(--fs-small);
  color: var(--graphite-soft);
  margin: 0;
}

/* ---------- Reveal on scroll (intersect-once) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease-out-expo), transform var(--t-slow) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Final CTA ---------- */
.cta-final {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(80px, 10vw, 144px);
  text-align: center;
  position: relative;
  overflow: clip;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 100%, oklch(0.42 0.13 240 / 0.55), transparent 70%);
  pointer-events: none;
}
.cta-final .container { position: relative; max-width: 720px; }
.cta-final .eyebrow { color: var(--copper-soft); justify-content: center; }
.cta-final h2 {
  color: var(--cream);
  font-size: clamp(2rem, 1.2rem + 4vw, 4rem);
  font-weight: 350;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}
.cta-final p { color: oklch(0.86 0.02 75); margin-bottom: var(--sp-7); margin-inline: auto; }
.cta-final .hero-actions { justify-content: center; opacity: 1; animation: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-deep);
  color: oklch(0.85 0.02 75);
  padding-block: clamp(64px, 7vw, 96px) 32px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid oklch(0.40 0.04 256);
}
@media (min-width: 720px) { .site-footer .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper-soft);
  margin: 0 0 var(--sp-4);
}
.site-footer ul { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-small); }
.site-footer a { color: oklch(0.85 0.02 75); transition: color var(--t-fast); }
.site-footer a:hover { color: var(--cream); }
.site-footer .footer-brand img { height: 56px; width: auto; margin-bottom: var(--sp-4); filter: brightness(1.05); }
.site-footer .footer-brand p { font-size: var(--fs-small); color: oklch(0.78 0.02 75); max-width: 38ch; }

.site-footer .footer-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(4rem, 14vw, 11rem);
  color: oklch(0.32 0.10 256);
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin-block: var(--sp-7) 0;
  user-select: none;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  font-size: 0.78rem;
  color: oklch(0.65 0.02 75);
}
.footer-bottom a:hover { color: var(--copper-soft); }

/* ---------- WhatsApp FAB (editorial, not green-cliché) ---------- */
.wa-fab {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  width: 56px;
  height: 56px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-2);
  z-index: 60;
  transition: transform var(--t-base) var(--ease-out-quint), background var(--t-base);
}
.wa-fab:hover { transform: translateY(-2px); background: var(--ink); color: var(--cream); }
.wa-fab svg { width: 24px; height: 24px; }
.wa-fab::after {
  content: "";
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  width: 8px;
  height: 8px;
  background: var(--copper);
  border-radius: 50%;
  border: 2px solid var(--cream);
}

/* ---------- Reveal fallback for reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; transform: translateX(0) !important; }
  .hero-visual img { animation: none !important; }
  .hero h1 .word { opacity: 1; transform: none; filter: none; animation: none; }
  .hero-sub, .hero-actions, .hero-meta { opacity: 1; animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .form-success .seal::before { animation: none; }
  .tier-oro { transform: none !important; }
}

/* ---------- Utilities ---------- */
.flex { display: flex; }
.center { text-align: center; }
.muted { color: var(--graphite-mute); }
.tag-todo {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: oklch(0.95 0.03 240);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
  border: 1px dashed var(--copper);
}

/* ---------- Utilities (a11y + editorial) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.link-mark {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-fast) ease, color var(--t-fast) ease;
}
.link-mark:hover { text-decoration-color: var(--ink); color: var(--ink-soft); }
.is-dark .link-mark, section.dark .link-mark, section.drenched .link-mark {
  color: var(--cream);
  text-decoration-color: var(--copper-soft);
}
.is-dark .link-mark:hover { text-decoration-color: var(--cream); }

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.pull-quote-attr {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-mute);
  letter-spacing: 0.04em;
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-style: normal;
}

/* ---------- Drenched value-grid (no inline overrides) ---------- */
section.drenched .value-grid {
  background: oklch(0.40 0.06 256);
  border-color: oklch(0.40 0.06 256);
}
/* Adapt column count to actual cell count when in drenched: 3 cells = 3 cols */
section.drenched .value-grid:has(> .value-cell:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
section.drenched .value-cell {
  background: var(--ink);
  color: var(--cream);
}
section.drenched .value-cell .num { color: var(--copper-soft); }
section.drenched .value-cell h3 { color: var(--cream); }
section.drenched .value-cell p { color: oklch(0.85 0.02 75); }
@media (max-width: 1079px) {
  section.drenched .value-grid:has(> .value-cell:nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 1079px) {
  section.drenched .value-grid:has(> .value-cell:nth-child(3):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Tier-plata legibility on .alt sections ---------- */
section.alt .tier-plata { background: var(--cream); }

/* ---------- FAQ smooth-open (CSS-only via grid trick) ---------- */
.faq-item .answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease-out-quint);
}
.faq-item[open] .answer-wrap { grid-template-rows: 1fr; }
.faq-item .answer-wrap > * { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-item .answer-wrap { transition: none; }
}

/* ---------- Catalog filter: real toggle ---------- */
.cat-filter a[aria-pressed="true"],
.cat-filter button[aria-pressed="true"],
.cat-filter a.active,
.cat-filter button.active {
  color: var(--cream);
  background: var(--ink);
}
.cat-filter a:focus-visible,
.cat-filter button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.cat-section[hidden] { display: none; }

/* ---------- Product card as link ---------- */
a.product-card {
  text-decoration: none;
  color: inherit;
}
a.product-card:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}
a.product-card .product-info h3 { transition: color var(--t-fast) ease; }
a.product-card:hover .product-info h3 { color: var(--copper-deep); }
a.product-card .product-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: var(--sp-3);
  transition: gap var(--t-fast) ease, color var(--t-fast) ease;
}
a.product-card:hover .product-cta { gap: 10px; color: var(--ink); }
.product-info .price[data-empty="true"] { display: none; }

/* ---------- Timeline as ordered list ---------- */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
  padding: 0;
  margin: var(--sp-7) 0 0;
  list-style: none;
  counter-reset: tline;
}
.timeline-list > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-7);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .timeline-list > li {
    grid-template-columns: 160px 1fr;
    gap: var(--sp-7) var(--sp-8);
  }
}
.timeline-list > li:last-child { border-bottom: 0; }
.timeline-list .year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 2rem;
  color: var(--copper);
  letter-spacing: -0.02em;
  line-height: 1;
}
.timeline-list .entry h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.timeline-list .entry p { color: var(--graphite-soft); margin: 0; }

/* ---------- Button loading state ---------- */
.btn[data-loading="true"] {
  pointer-events: none;
  opacity: 0.85;
}
.btn[data-loading="true"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
  margin-left: 4px;
}
.btn[data-loading="true"].btn-arrow::after {
  margin-left: 0;
}
.btn-arrow[data-loading="true"]::before {
  content: "";
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="true"]::after { animation: none; border: 2px solid currentColor; }
}

/* ---------- Hero drift: pause when offscreen (toggled via JS) ---------- */
.hero-visual[data-paused="true"] img { animation-play-state: paused; }

/* ---------- Form success actions (replaces hero-actions inline override) ---------- */
.success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-5);
}

/* ---------- Form: title + intro (replace inline styles) ---------- */
.form-title {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}
.form-intro {
  font-size: var(--fs-small);
  margin-bottom: var(--sp-7);
}
.req-marker {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Form: noscript notice ---------- */
.noscript-notice {
  background: oklch(0.95 0.03 240);
  border: 1px dashed var(--copper);
  padding: var(--sp-4);
  border-radius: var(--r);
  font-size: var(--fs-small);
  color: var(--ink);
  margin-bottom: var(--sp-5);
}

/* ---------- Stats: visual variance (avoid flat row of identical magnitudes) ---------- */
/* varied class retained for HTML compatibility — sizes now inherit from .stat strong */

/* ---------- Catalog: print niceties (specific to product list) ---------- */
@media print {
  .cat-filter,
  .gated-notice,
  .page-head { display: none; }
  .cat-section { break-inside: avoid; padding-block: 24px; }
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .product-card { box-shadow: none !important; border: 1px solid #ddd !important; }
  .product-card .badge { display: none; }
}

/* ---------- Final CTA: copper sub-rule (replaces banned border-inline-start in prose) ---------- */
.prose blockquote {
  border-inline-start: 0;
  padding: 0;
  margin: 2em 0;
  position: relative;
}
.prose blockquote::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--copper);
  margin-bottom: var(--sp-5);
}

/* ---------- Brand mark section (big logo) ---------- */
.brand-mark {
  background: var(--bone-deep);
  padding-block: clamp(96px, 12vw, 160px);
  position: relative;
  overflow: clip;
}
.brand-mark .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}
.brand-mark .eyebrow {
  margin: 0;
  justify-content: center;
}
.brand-mark .seal {
  position: relative;
  width: clamp(220px, 38vw, 460px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark .seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.42 0.13 240 / 0.10), transparent 72%);
  z-index: 0;
}
.brand-mark .seal img {
  position: relative;
  z-index: 1;
  width: 88%;
  height: auto;
  filter: drop-shadow(0 24px 48px oklch(0.10 0.05 256 / 0.18));
}
.brand-mark .seal-rule {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}
.brand-mark .seal-rule::before,
.brand-mark .seal-rule::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--copper);
}
.brand-mark h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--ink);
  margin: 0;
  max-width: 24ch;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Print niceties */
@media print {
  .site-header, .wa-fab, .marquee, .cta-final { display: none; }
  body { color: #000; background: #fff; }
}

/* ============================================================
   Product detail page (productos/[slug].html)
   ============================================================ */

/* Breadcrumb */
.breadcrumb {
  font-size: var(--fs-small);
  color: var(--graphite-soft);
  font-family: var(--font-body);
  margin-bottom: var(--sp-5);
  letter-spacing: 0.01em;
}
.breadcrumb a {
  color: var(--graphite-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.breadcrumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* Product hero: 2-col layout (gallery + info) */
.product-hero {
  padding-block: var(--sp-7) var(--sp-8);
}
.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 880px) {
  .product-layout { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); }
}

/* Gallery: main image + thumbnails strip */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.gallery-main {
  position: relative;
  background: var(--cream-warm);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .15s ease;
  padding: var(--sp-5);
  background: transparent;
}
.gallery-thumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--sp-2);
}
.gallery-thumbs li { margin: 0; padding: 0; }
.gallery-thumbs button {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 4px;
  background: var(--cream-warm);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  overflow: hidden;
}
.gallery-thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gallery-thumbs button:hover { border-color: var(--ink); }
.gallery-thumbs button.is-active {
  border-color: var(--ink);
  border-width: 2px;
  padding: 3px;
}
.gallery-thumbs button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* Product info column */
.product-meta { display: flex; flex-direction: column; gap: var(--sp-4); }
.product-meta h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.product-meta .ean {
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  color: var(--graphite-soft);
  margin: 0;
  letter-spacing: 0.04em;
}
.product-meta .tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: var(--sp-2) 0 0;
  text-wrap: balance;
  max-width: 38ch;
}
/* Inline badge modifier: detaches from the absolute-positioned catalog placement
   so it can sit above the H1 in the product-meta column. */
.badge.badge--inline {
  position: static;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--sp-2);
}

/* Price block */
.price-block {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-block: 1px solid var(--rule);
  margin: var(--sp-3) 0;
}
.price-block .label {
  font-size: var(--fs-small);
  color: var(--graphite-soft);
  font-family: var(--font-body);
}
.price-block b {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 2rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Marketplace buttons (Amazon, ML) */
.marketplace-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 540px) {
  .marketplace-actions { flex-direction: row; flex-wrap: wrap; }
  .marketplace-actions .btn { flex: 1 1 auto; min-width: 200px; }
}
.marketplace-actions p.muted {
  width: 100%;
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-small);
  color: var(--graphite-soft);
}

/* B2B CTA */
.b2b-cta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}
.b2b-cta .muted {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--graphite-soft);
  font-family: var(--font-body);
}

/* B2B pricing placeholder (hidden until login) */
#b2b-pricing[hidden] { display: none; }

/* Product details: description + specs + usage */
.product-details {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--rule);
}
.product-details .container.narrow { max-width: var(--maxw-narrow); }
.product-details h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  margin: var(--sp-7) 0 var(--sp-4);
  color: var(--ink);
}
.product-details h2:first-child { margin-top: 0; }
.product-details p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--graphite);
  max-width: var(--maxw-prose);
}

/* Specs grid (dl) */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .specs-grid { grid-template-columns: 1fr 1fr; }
}
.specs-grid > div {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.specs-grid dt {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graphite-soft);
  font-weight: 500;
  margin: 0;
}
.specs-grid dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}

/* Related products */
.related-products {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--rule);
}
.related-products .product-grid {
  margin-top: var(--sp-5);
}

/* ============================================================
   Lightbox (fullscreen image viewer)
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: oklch(0.10 0.04 256 / 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  animation: lb-fade 0.2s ease;
}
@keyframes lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}
.lightbox-stage {
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--cream-warm);
  border-radius: 4px;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--rule);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, background .15s;
  font-family: var(--font-body);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { transform: scale(1.08); background: var(--cream-warm); }
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.lightbox-close { top: var(--sp-4); right: var(--sp-4); font-size: 1.75rem; }
.lightbox-prev  { left: var(--sp-4);  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-counter {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  background: oklch(0.10 0.04 256 / 0.6);
  padding: 6px 14px;
  border-radius: 999px;
}
body[data-lb-open="true"] { overflow: hidden; }

/* ============================================================
   View Transitions — cross-document cinematic morph
   Anchors the product image so it travels from catalog card to
   detail page gallery hero. Progressive enhancement: Chrome 126+,
   Safari 18+. Older browsers fall back to instant navigation.
   ============================================================ */

@view-transition { navigation: auto; }

/* Per-EAN view-transition-name pairs.
   Each rule matches BOTH the catalog card image and the detail
   page main gallery image for that EAN, so the API matches them
   as the same logical element across documents. */
.product-card[data-ean="6920663782331"] .product-img > img,
body[data-product-ean="6920663782331"] [data-gallery-main] > img { view-transition-name: vt-prod-6920663782331; }

.product-card[data-ean="6920663782317"] .product-img > img,
body[data-product-ean="6920663782317"] [data-gallery-main] > img { view-transition-name: vt-prod-6920663782317; }

.product-card[data-ean="6920663782324"] .product-img > img,
body[data-product-ean="6920663782324"] [data-gallery-main] > img { view-transition-name: vt-prod-6920663782324; }

.product-card[data-ean="7406283019853"] .product-img > img,
body[data-product-ean="7406283019853"] [data-gallery-main] > img { view-transition-name: vt-prod-7406283019853; }

.product-card[data-ean="6920663783567"] .product-img > img,
body[data-product-ean="6920663783567"] [data-gallery-main] > img { view-transition-name: vt-prod-6920663783567; }

.product-card[data-ean="7406283019860"] .product-img > img,
body[data-product-ean="7406283019860"] [data-gallery-main] > img { view-transition-name: vt-prod-7406283019860; }

.product-card[data-ean="7406283019884"] .product-img > img,
body[data-product-ean="7406283019884"] [data-gallery-main] > img { view-transition-name: vt-prod-7406283019884; }

.product-card[data-ean="7406283018726"] .product-img > img,
body[data-product-ean="7406283018726"] [data-gallery-main] > img { view-transition-name: vt-prod-7406283018726; }
body[data-product-ean="6920663783550"] [data-gallery-main] > img { view-transition-name: vt-prod-6920663783550; }

/* The image morph: longer, more deliberate. Ease-out-expo so it
   decelerates with editorial calm, never bouncy. */
::view-transition-old(vt-prod-6920663782331),::view-transition-new(vt-prod-6920663782331),
::view-transition-old(vt-prod-6920663782317),::view-transition-new(vt-prod-6920663782317),
::view-transition-old(vt-prod-6920663782324),::view-transition-new(vt-prod-6920663782324),
::view-transition-old(vt-prod-7406283019853),::view-transition-new(vt-prod-7406283019853),
::view-transition-old(vt-prod-6920663783567),::view-transition-new(vt-prod-6920663783567),
::view-transition-old(vt-prod-7406283019860),::view-transition-new(vt-prod-7406283019860),
::view-transition-old(vt-prod-7406283019884),::view-transition-new(vt-prod-7406283019884),
::view-transition-old(vt-prod-7406283018726),::view-transition-new(vt-prod-7406283018726),
::view-transition-old(vt-prod-6920663783550),::view-transition-new(vt-prod-6920663783550) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
}

/* The rest of the page: shorter crossfade. Image leads, page follows. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Honor reduced motion: collapse all transitions to near-instant. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  ::view-transition-old(vt-prod-6920663782331),::view-transition-new(vt-prod-6920663782331),
  ::view-transition-old(vt-prod-6920663782317),::view-transition-new(vt-prod-6920663782317),
  ::view-transition-old(vt-prod-6920663782324),::view-transition-new(vt-prod-6920663782324),
  ::view-transition-old(vt-prod-7406283019853),::view-transition-new(vt-prod-7406283019853),
  ::view-transition-old(vt-prod-6920663783567),::view-transition-new(vt-prod-6920663783567),
  ::view-transition-old(vt-prod-7406283019860),::view-transition-new(vt-prod-7406283019860),
  ::view-transition-old(vt-prod-7406283019884),::view-transition-new(vt-prod-7406283019884),
  ::view-transition-old(vt-prod-7406283018726),::view-transition-new(vt-prod-7406283018726),
  ::view-transition-old(vt-prod-6920663783550),::view-transition-new(vt-prod-6920663783550) {
    animation: none !important;
  }
}

/* ============================================================
   Catalog card hover glow
   A soft radial atmosphere in each product's dominant color
   blooms behind the product image on hover. Colors sampled
   per-EAN from the product hero photo via canvas histogram.
   ============================================================ */

.product-card[data-ean="6920663782331"] { --card-glow: oklch(0.30 0.164 261); } /* Hair Pomade — navy */
.product-card[data-ean="6920663782317"] { --card-glow: oklch(0.54 0.180 29);  } /* Hair Paste — red */
.product-card[data-ean="6920663782324"] { --card-glow: oklch(0.49 0.180 29);  } /* Hair Wax — deep red */
.product-card[data-ean="7406283019853"] { --card-glow: oklch(0.62 0.130 95);  } /* Forming Cream — warm tan (chroma tempered) */
.product-card[data-ean="6920663783567"] { --card-glow: oklch(0.52 0.134 49);  } /* Liquid Gel — amber */
.product-card[data-ean="7406283019860"] { --card-glow: oklch(0.55 0.110 270); } /* Styling Powder — dark navy, lifted so the glow reads as light */
.product-card[data-ean="7406283019884"] { --card-glow: oklch(0.55 0.100 270); } /* Hair Wax Stick — dark navy, lifted */
.product-card[data-ean="7406283018726"] { --card-glow: oklch(0.53 0.172 28);  } /* Shaving Gel — red */
.product-card[data-ean="6920663783550"] { --card-glow: oklch(0.58 0.085 74);  } /* Beard Oil — amber glass */

/* The image container hosts the glow via a pseudo-element that
   sits BEHIND the product image (negative z-index, isolated stacking).
   On rest: invisible and slightly contracted. On hover: blooms.
   Editorial timing: ease-out-expo, longer scale than opacity. */
.product-card .product-img {
  position: relative;
  isolation: isolate;
}
.product-card .product-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Peak the color around the product's perimeter (transparent at dead-center
     since the product covers that area anyway, brightest where the can edge
     meets the transparent PNG corners, fading out toward the card frame). */
  background: radial-gradient(
    circle at center,
    transparent 0%,
    oklch(from var(--card-glow, transparent) l c h / 0.55) 32%,
    oklch(from var(--card-glow, transparent) l c h / 0.22) 55%,
    transparent 80%
  );
  filter: blur(6px);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity var(--t-base, 320ms) cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.product-card:hover .product-img::after,
.product-card:focus-visible .product-img::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .product-card .product-img::after {
    transition: opacity 1ms;
    transform: scale(1);
  }
}


/* =============================================================
   HOME · DARK LUXURY  (scoped to body.home)
   Pegadito index — cinematic obsidian + navy glow + product 3D.
   All rules below sit under body.home so other pages stay untouched.
   ============================================================= */

:root {
  /* Refined barbershop palette on dark (token names kept; values are
     the navy + azure + steel system). */
  --obsidian:        oklch(0.27 0.070 256);   /* navy core surface */
  --obsidian-elev:   oklch(0.31 0.078 256);   /* elevated card surface */
  --obsidian-soft:   oklch(0.40 0.095 256);   /* hover / lifted */
  --obsidian-edge:   oklch(0.47 0.100 256);
  --gilt:            oklch(0.80 0.080 234);   /* icy steel-blue highlight */
  --gilt-soft:       oklch(0.70 0.090 236);
  --halo-ink:        oklch(0.55 0.16 256 / 0.48);
  --halo-copper:     oklch(0.66 0.140 240 / 0.30);
  --halo-gilt:       oklch(0.88 0.04 235 / 0.20);
  --rule-dark:       oklch(1 0 0 / 0.14);
  --rule-dark-soft:  oklch(1 0 0 / 0.07);
  --cream-dim:       oklch(0.95 0.014 75);     /* primary text on navy */
  --cream-mute:      oklch(0.84 0.030 62);     /* secondary text */
}

/* ----- Body in home scope. Header keeps the default cream editorial
   treatment. ----- */
body.home {
  background: var(--obsidian);
  color: var(--cream-dim);
}

/* ----- Section scaffolding ----- */
.lux-section {
  position: relative;
  padding-block: clamp(96px, 12vw, 180px);
  color: var(--cream-dim);
}
.lux-section .container { position: relative; z-index: 2; }
.lux-head { max-width: 720px; margin-bottom: clamp(48px, 6vw, 96px); }
.lux-head.center { margin-inline: auto; text-align: center; }
.lux-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gilt);
  margin: 0 0 var(--sp-5);
}
.lux-eyebrow::before {
  content: "";
  width: 22px;
  height: 6px;
  border-radius: 3px;
  /* barber-pole stripe on dark (azure + cream) */
  background: repeating-linear-gradient(115deg, var(--copper-soft) 0 4px, var(--cream-dim) 4px 8px);
  box-shadow: 0 0 12px oklch(0.74 0.125 238 / 0.45);
  animation: pulseDot 2.4s var(--ease-in-out) infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}
.lux-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0 0 var(--sp-5);
}
.lux-h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gilt);
}
.lux-lede {
  font-size: var(--fs-lead);
  color: var(--cream-mute);
  max-width: 60ch;
  line-height: 1.55;
}
/* Sections share one obsidian ground; decorative glows are layered on top
   so adjacent sections meld with no visible seam. */
.lux-section,
.lux-manifest,
.lux-tiers,
.lux-origin {
  background-color: var(--obsidian);
}

/* Universal edge-fade: every home section dissolves into pure obsidian at its
   top and bottom edges, so adjacent sections meet at an identical color with
   no visible seam, regardless of the glow or halo inside. The overlay sits
   above background + halos (z 1) but below content (z 2). */
body.home main > section {
  position: relative;
  isolation: isolate;
}
body.home main > section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--obsidian) 0%,
    oklch(0.30 0.115 256 / 0) 14%,
    oklch(0.30 0.115 256 / 0) 86%,
    var(--obsidian) 100%
  );
}
/* Keep all real content above the edge-fade overlay. */
body.home main > section > .container,
.lux-showcase-inner,
.lux-hero-copy,
.lux-stage {
  position: relative;
  z-index: 2;
}

/* ----- Halo primitives (mix-blend lighting) ----- */
.lux-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.95;
  will-change: transform, opacity;
}
@supports not (mix-blend-mode: screen) {
  .lux-halo { opacity: 0.55; mix-blend-mode: normal; }
}
.lux-halo.ink     { background: var(--halo-ink); }
.lux-halo.copper  { background: var(--halo-copper); }
.lux-halo.gilt    { background: var(--halo-gilt); }

/* =============================================================
   1 · Hero cinemático
   ============================================================= */
.lux-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(24px, 3vw, 56px) clamp(72px, 9vw, 120px);
  overflow: clip;
  isolation: isolate;
  background-color: var(--obsidian);
  background-image:
    radial-gradient(85% 55% at 50% 56%, oklch(0.40 0.13 256 / 0.6) 0%, transparent 64%);
}
.lux-hero .lux-halo.ink {
  inset-block-start: 18%;
  inset-inline-start: 38%;
  width: 720px;
  height: 720px;
  transform: translate(-50%, -50%);
}
.lux-hero .lux-halo.copper {
  inset-block-start: -8%;
  inset-inline-end: -10%;
  width: 540px;
  height: 540px;
}
.lux-hero .lux-halo.gilt {
  inset-block-end: -20%;
  inset-inline-start: -10%;
  width: 480px;
  height: 480px;
}

.lux-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  min-height: calc(100svh - var(--header-h) - clamp(96px, 12vw, 176px));
}
@media (min-width: 960px) {
  .lux-hero .container { grid-template-columns: 1.15fr 1fr; }
}

.lux-hero-copy { position: relative; z-index: 3; }
.lux-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.5rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 0 0 var(--sp-5);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.lux-hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gilt);
}
.lux-hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(10px);
}
body.home.is-ready .lux-hero h1 .word {
  animation: luxWord 1100ms var(--ease-out-expo) both;
  animation-delay: calc(var(--word-i, 0) * 75ms + 100ms);
}
@keyframes luxWord {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.lux-hero-sub {
  font-size: var(--fs-body);
  color: var(--cream-mute);
  max-width: 52ch;
  margin: 0 0 var(--sp-6);
  line-height: 1.55;
}
.lux-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.btn-lux {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease-out-quint),
              background var(--t-base) ease,
              box-shadow var(--t-base) ease,
              color var(--t-base) ease;
}
.btn-lux .arrow {
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--t-base) var(--ease-out-quint);
}
.btn-lux .arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn-lux:hover .arrow { width: 28px; }
.btn-lux.primary {
  background: var(--cream);
  color: var(--obsidian);
  box-shadow:
    0 0 0 1px oklch(1 0 0 / 0.1),
    0 18px 40px -12px oklch(0.55 0.18 240 / 0.45);
}
.btn-lux.primary:hover {
  transform: translateY(-2px);
  background: var(--gilt);
  box-shadow:
    0 0 0 1px var(--gilt),
    0 22px 50px -10px oklch(0.55 0.18 240 / 0.6),
    0 0 80px -10px var(--gilt-soft);
}
.btn-lux.ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--rule-dark);
}
.btn-lux.ghost:hover {
  border-color: var(--cream);
  background: oklch(1 0 0 / 0.04);
  transform: translateY(-2px);
}

.lux-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule-dark);
}
.lux-kpi div { min-width: 0; }
.lux-kpi strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
  font-weight: 350;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
  white-space: nowrap;
}
.lux-kpi strong .unit {
  display: inline-block;
  font-size: 0.42em;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--gilt);
  margin-left: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.45em;
}
.lux-kpi span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin-top: 10px;
}

/* Hero product stage */
.lux-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.lux-stage::before {
  /* ground plane reflection */
  content: "";
  position: absolute;
  inset-block-end: 6%;
  inset-inline: 12%;
  height: 38%;
  background: radial-gradient(closest-side, oklch(0.06 0.04 256 / 0.85), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.lux-stage::after {
  /* spotlight from above */
  content: "";
  position: absolute;
  inset-block-start: -10%;
  inset-inline: 0;
  height: 50%;
  background: conic-gradient(from 200deg at 50% 0%, transparent 0deg, oklch(0.85 0.05 240 / 0.18) 40deg, transparent 80deg);
  filter: blur(30px);
  z-index: 1;
}
.lux-stage .lux-product {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  filter: drop-shadow(0 60px 60px oklch(0 0 0 / 0.55))
          drop-shadow(0 0 80px oklch(0.55 0.18 240 / 0.35));
  animation: luxFloat 7s var(--ease-in-out) infinite;
}
.lux-stage .lux-product[data-paused="true"] { animation-play-state: paused; }
@keyframes luxFloat {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%      { transform: translateY(-18px) rotate(0.4deg); }
}

/* Hero scroll cue */
.lux-cue {
  position: absolute;
  inset-block-end: 28px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-mute);
  z-index: 3;
}
.lux-cue::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--cream-mute);
  animation: cueLine 1.8s var(--ease-in-out) infinite;
}
@keyframes cueLine {
  0%, 100% { transform: scaleX(0.4); transform-origin: left; opacity: 0.5; }
  50%      { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

/* =============================================================
   2 · Showcase scroll horizontal (los 9 SKU)
   ============================================================= */
.lux-showcase {
  position: relative;
  background-color: var(--obsidian);
  background-image:
    radial-gradient(70% 55% at 50% 50%, oklch(0.39 0.12 256 / 0.8) 0%, transparent 70%);
  padding-block: 0;
  overflow: clip;
}
.lux-showcase-inner {
  position: relative;
  padding-block: clamp(48px, 6vw, 80px);
}
.lux-showcase-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(24px, 3vw, 40px);
  padding-inline: var(--pad-x);
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 880px) {
  .lux-showcase-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
.lux-track-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-mute);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.lux-track-meta strong {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1;
}

.lux-track-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scroll-behavior: auto;
}
.lux-track-viewport.is-dragging {
  cursor: grabbing;
}
.lux-track-viewport.is-dragging .lux-slide { transition: none; }
.lux-track-viewport::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lux-track-viewport { scroll-behavior: auto; }
}
.lux-track {
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
  padding-inline: var(--pad-x);
  padding-block: clamp(12px, 1.5vw, 24px);
  scroll-snap-type: x mandatory;
}
.lux-slide {
  position: relative;
  flex: 0 0 min(82vw, 400px);
  aspect-ratio: 5 / 6;
  max-height: 560px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--obsidian-elev), var(--obsidian));
  border: 1px solid var(--rule-dark);
  overflow: clip;
  scroll-snap-align: center;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out-quint),
              border-color var(--t-base) ease,
              box-shadow var(--t-base) ease;
}
.lux-slide::before {
  /* per-SKU halo using existing --card-glow values */
  content: "";
  position: absolute;
  inset: -2% -2% 30% -2%;
  background: radial-gradient(60% 50% at 50% 55%,
    oklch(from var(--card-glow, oklch(0.55 0.18 240)) l c h / 0.55) 0%,
    oklch(from var(--card-glow, oklch(0.55 0.18 240)) l c h / 0.18) 45%,
    transparent 75%);
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.85;
  z-index: 0;
  transition: opacity var(--t-base) ease, transform var(--t-base) ease;
}
.lux-slide::after {
  /* spotlight rim */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.06) 0%, transparent 30%),
    linear-gradient(0deg, oklch(0 0 0 / 0.5) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.lux-slide:hover {
  transform: translateY(-8px);
  border-color: oklch(from var(--card-glow, var(--cream)) l c h / 0.5);
  box-shadow:
    0 30px 60px -20px oklch(0 0 0 / 0.6),
    0 0 80px -20px oklch(from var(--card-glow, var(--cream)) l c h / 0.5);
}
.lux-slide:hover::before { opacity: 1; transform: scale(1.04); }
.lux-slide:hover .lux-slide-img { transform: scale(1.05) translateY(-4px); }

.lux-slide-img-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58%;
  padding: var(--sp-5) var(--sp-5) 0;
}
.lux-slide-img {
  max-height: 100%;
  width: auto;
  filter: drop-shadow(0 40px 32px oklch(0 0 0 / 0.6));
  transition: transform var(--t-base) var(--ease-out-quint);
}
.lux-slide-foot {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--rule-dark-soft);
  background: linear-gradient(180deg, transparent, oklch(0.10 0.04 256 / 0.85));
}
.lux-slide-idx {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gilt);
}
.lux-slide-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0;
}
.lux-slide-size {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-mute);
}
.lux-slide-cta {
  position: absolute;
  inset-block-start: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 3;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.06);
  border: 1px solid var(--rule-dark);
  color: var(--cream);
  font-size: 18px;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease;
}
.lux-slide:hover .lux-slide-cta {
  background: var(--cream);
  color: var(--obsidian);
  transform: rotate(-45deg);
}

/* Draggable horizontal scrollbar under the carousel */
.lux-scrollbar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--rule-dark);
  width: min(420px, calc(100% - var(--pad-x) * 2));
  margin: clamp(28px, 3.5vw, 52px) auto 0;
  cursor: pointer;
  touch-action: none;
}
.lux-scrollbar::before {
  /* enlarged hit area for easier grabbing */
  content: "";
  position: absolute;
  inset: -14px 0;
}
.lux-scrollbar-thumb {
  position: absolute;
  inset-block: -1px;
  left: 0;
  width: 40%;
  min-width: 44px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gilt-soft), var(--gilt));
  box-shadow: 0 0 16px -2px oklch(0.82 0.09 240 / 0.5);
  cursor: grab;
  transition: background var(--t-fast) ease, transform var(--t-fast) var(--ease-out-quint);
}
.lux-scrollbar-thumb::after {
  /* grip ticks */
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: oklch(0.16 0.04 256 / 0.45);
}
.lux-scrollbar:hover .lux-scrollbar-thumb { transform: scaleY(1.35); }
.lux-scrollbar.is-dragging { cursor: grabbing; }
.lux-scrollbar.is-dragging .lux-scrollbar-thumb {
  cursor: grabbing;
  transform: scaleY(1.5);
}
@media (prefers-reduced-motion: reduce) {
  .lux-scrollbar-thumb { transition: background var(--t-fast) ease; }
  .lux-scrollbar:hover .lux-scrollbar-thumb,
  .lux-scrollbar.is-dragging .lux-scrollbar-thumb { transform: none; }
}

/* =============================================================
   3 · Manifest rows (Por qué Pegadito reimaginado)
   ============================================================= */
.lux-manifest {
  background: var(--obsidian);
}
.lux-rows { display: grid; gap: clamp(40px, 5vw, 96px); }
.lux-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  position: relative;
  padding-block: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid var(--rule-dark);
}
@media (min-width: 880px) {
  .lux-row { grid-template-columns: 0.9fr 1.4fr; }
  .lux-row:nth-child(even) { grid-template-columns: 1.4fr 0.9fr; }
  .lux-row:nth-child(even) .lux-row-num { order: 2; text-align: right; }
  .lux-row:nth-child(even) .lux-row-body { order: 1; }
}
.lux-row-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 12rem);
  font-weight: 250;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px oklch(0.65 0.05 256 / 0.6);
  margin: 0;
  font-variation-settings: "opsz" 144;
}
.lux-row-num em {
  font-style: italic;
  -webkit-text-stroke: 1px var(--gilt-soft);
  color: transparent;
}
.lux-row-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 var(--sp-4);
  max-width: 22ch;
}
.lux-row-body p {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--cream-mute);
  max-width: 56ch;
  margin: 0;
}

/* =============================================================
   4 · Tiers escalera
   ============================================================= */
.lux-tiers {
  background-color: var(--obsidian);
  background-image:
    radial-gradient(60% 55% at 50% 42%, oklch(0.40 0.13 256 / 0.78) 0%, transparent 72%);
}
.lux-stack {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  perspective: 1600px;
}
@media (min-width: 880px) {
  .lux-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    align-items: stretch;
  }
}
.lux-tier {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--obsidian-elev), var(--obsidian));
  border: 1px solid var(--rule-dark);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out-quint),
              border-color var(--t-base) ease,
              box-shadow var(--t-base) ease;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.lux-tier::before {
  content: "";
  position: absolute;
  inset: -30% -30% 50% -30%;
  background: radial-gradient(50% 60% at 50% 50%, var(--tier-glow, transparent), transparent 70%);
  filter: blur(50px);
  mix-blend-mode: screen;
  opacity: 0.7;
  z-index: 0;
}
.lux-tier > * { position: relative; z-index: 1; }
.lux-tier.bronze { --tier-glow: oklch(0.66 0.09 232 / 0.55); }
.lux-tier.silver { --tier-glow: oklch(0.70 0.03 250 / 0.45); }
.lux-tier.gold   { --tier-glow: var(--halo-gilt); }
.lux-tier:hover {
  transform: translateY(-6px);
  border-color: var(--rule-dark);
}
.lux-tier.gold {
  border-color: oklch(0.62 0.09 240 / 0.55);
  box-shadow:
    0 30px 60px -20px oklch(0 0 0 / 0.6),
    0 0 80px -20px var(--halo-gilt);
}
@media (min-width: 880px) {
  .lux-tier.gold { transform: translateY(-12px); }
  .lux-tier.gold:hover { transform: translateY(-18px); }
}
.lux-tier-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-mute);
}
.lux-tier.gold .lux-tier-label { color: var(--gilt); }
.lux-tier-name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 1.8vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
}
.lux-tier-discount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 5vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cream);
  margin: var(--sp-2) 0 var(--sp-4);
}
.lux-tier-discount sub {
  font-family: var(--font-body);
  font-size: 0.32em;
  font-weight: 500;
  vertical-align: 0.6em;
  color: var(--gilt-soft);
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.lux-tier-desc {
  color: var(--cream-mute);
  margin: 0 0 var(--sp-5);
  line-height: 1.6;
}
.lux-tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--sp-5);
}
.lux-tier-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: var(--fs-small);
  color: var(--cream-dim);
}
.lux-tier-list li::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--gilt);
}
.lux-tier-flag {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
  background: var(--gilt);
  color: var(--obsidian);
  animation: flagFloat 6s var(--ease-in-out) infinite;
}
@keyframes flagFloat {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

/* =============================================================
   5 · Steps (cómo funciona)
   ============================================================= */
.lux-steps { display: grid; gap: clamp(24px, 3vw, 56px); position: relative; }
@media (min-width: 880px) {
  .lux-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lux-step {
  position: relative;
  padding: clamp(28px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--rule-dark);
}
.lux-step-num {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gilt);
  background: var(--obsidian);
  padding-right: 12px;
}
.lux-step h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0 0 var(--sp-3);
}
.lux-step p {
  color: var(--cream-mute);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0;
}

/* =============================================================
   6 · Origen editorial
   ============================================================= */
.lux-origin {
  background-color: var(--obsidian);
  background-image:
    radial-gradient(48% 52% at 78% 45%, oklch(0.40 0.13 256 / 0.78) 0%, transparent 72%);
}
.lux-origin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
@media (min-width: 960px) {
  .lux-origin-grid { grid-template-columns: 0.9fr 1.1fr; }
}
.lux-origin-visual {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.lux-origin-visual::before {
  content: "";
  position: absolute;
  inset: 8% 0;
  background:
    radial-gradient(50% 50% at 50% 50%, var(--halo-ink) 0%, oklch(0.55 0.20 240 / 0.18) 35%, transparent 70%);
  filter: blur(40px);
  mix-blend-mode: screen;
  z-index: 0;
  animation: originBreathe 7s var(--ease-in-out) infinite;
}
.lux-origin-visual::after {
  /* ground reflection */
  content: "";
  position: absolute;
  inset-block-end: 8%;
  inset-inline: 18%;
  height: 28px;
  background: radial-gradient(closest-side, oklch(0 0 0 / 0.75), transparent 75%);
  filter: blur(14px);
  z-index: 0;
}
@keyframes originBreathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
.lux-origin-visual img {
  position: relative;
  z-index: 1;
  max-width: 78%;
  max-height: 78%;
  width: auto;
  height: auto;
  filter:
    drop-shadow(0 40px 40px oklch(0 0 0 / 0.65))
    drop-shadow(0 0 60px oklch(0.55 0.18 240 / 0.4));
  animation: luxFloat 8s var(--ease-in-out) infinite;
}
.lux-origin-tag {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gilt);
}
@media (prefers-reduced-motion: reduce) {
  .lux-origin-visual::before,
  .lux-origin-visual img { animation: none; }
}

.lux-prose {
  max-width: 56ch;
  color: var(--cream-mute);
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.lux-prose .dropcap {
  float: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 4.4em;
  line-height: 0.85;
  color: var(--gilt);
  margin: 0.06em 0.12em 0 -0.04em;
}
.lux-prose blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  line-height: 1.3;
  color: var(--cream);
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--gilt);
  letter-spacing: -0.01em;
}
.lux-prose p + p { margin-top: var(--sp-5); }

/* =============================================================
   7 · Seal
   ============================================================= */
.lux-seal {
  position: relative;
  text-align: center;
  background-color: var(--obsidian);
  background-image:
    radial-gradient(42% 48% at 50% 50%, oklch(0.41 0.13 256 / 0.85) 0%, transparent 72%);
  padding-block: clamp(120px, 14vw, 200px);
  overflow: clip;
}
.lux-seal .lux-halo.ink {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  opacity: 0.5;
  animation: sealBreathe 5s var(--ease-in-out) infinite;
}
@keyframes sealBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 0.7; }
}
.lux-seal-mark {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-bottom: var(--sp-6);
}
.lux-seal-mark img {
  width: clamp(180px, 22vw, 320px);
  height: auto;
  filter:
    drop-shadow(0 0 80px var(--halo-ink))
    drop-shadow(0 40px 40px oklch(0 0 0 / 0.5));
}
.lux-seal-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: var(--sp-6);
}
.lux-seal h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--cream);
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
.lux-seal h2 em { font-style: italic; color: var(--gilt); }

/* =============================================================
   8 · CTA final
   ============================================================= */
.lux-cta {
  position: relative;
  background-color: var(--obsidian);
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 55%, oklch(0.22 0.10 256) 100%);
  text-align: center;
  overflow: clip;
}
.lux-cta .lux-halo.ink {
  inset-block-start: -20%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  opacity: 0.6;
}
.lux-cta .lux-halo.copper {
  inset-block-end: -20%;
  inset-inline-end: -10%;
  width: 500px;
  height: 500px;
}
.lux-cta h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 0 auto var(--sp-5);
  max-width: 18ch;
  text-wrap: balance;
}
.lux-cta h2 em { font-style: italic; color: var(--gilt); }
.lux-cta p {
  font-size: var(--fs-lead);
  color: var(--cream-mute);
  max-width: 52ch;
  margin: 0 auto var(--sp-7);
  line-height: 1.6;
}
.lux-cta .lux-hero-cta { justify-content: center; }

/* =============================================================
   Footer (deeper burgundy to ground the page)
   ============================================================= */
body.home .site-footer,
body.lux .site-footer {
  background: oklch(0.22 0.10 256);
  color: var(--cream-mute);
  border-top: 1px solid var(--rule-dark);
}
body.home .site-footer h3,
body.lux .site-footer h3 { color: var(--cream); }
body.home .site-footer a,
body.lux .site-footer a { color: var(--cream-dim); }
body.home .site-footer a:hover,
body.lux .site-footer a:hover { color: var(--gilt); }
body.home .site-footer .footer-mark,
body.lux .site-footer .footer-mark {
  color: oklch(1 0 0 / 0.05);
}
body.home .site-footer .footer-bottom,
body.lux .site-footer .footer-bottom { border-top-color: var(--rule-dark); }

body.home .wa-fab,
body.lux .wa-fab {
  background: var(--cream);
  color: var(--obsidian);
}
body.home .wa-fab:hover,
body.lux .wa-fab:hover { background: var(--gilt); color: var(--obsidian); }

/* =============================================================
   Reveal-on-scroll · reduced motion fallbacks
   ============================================================= */
.lux-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 900ms var(--ease-out-expo),
    transform 900ms var(--ease-out-expo),
    filter 900ms var(--ease-out-expo);
  transition-delay: calc(var(--lux-i, 0) * 80ms);
}
.lux-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  body.home.is-ready .lux-hero h1 .word {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .lux-stage .lux-product { animation: none; }
  .lux-cue::after { animation: none; }
  .lux-tier-flag { animation: none; transform: rotate(0); }
  .lux-eyebrow::before { animation: none; }
  .lux-seal .lux-halo.ink { animation: none; }
  .lux-reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* =============================================================
   Mobile shaping
   ============================================================= */
@media (max-width: 720px) {
  .lux-hero { min-height: auto; }
  .lux-stage { aspect-ratio: 1 / 1; }
  .lux-stage .lux-product { width: min(78%, 360px); }
  .lux-kpi { grid-template-columns: 1fr; gap: var(--sp-4); }
  .lux-cue { display: none; }
  .lux-row-num { font-size: clamp(4rem, 24vw, 7rem); }
  .lux-track { gap: 20px; }
  .lux-slide { flex: 0 0 78vw; }
}

/* =============================================================
   SITE-WIDE THEME  (body.lux — all pages except index home)
   Balanced editorial system: burgundy obsidian SECTIONS with the
   original cream/light CARDS sitting on top for contrast. Only
   text that lands directly on a dark section is re-coloured;
   cards keep their original light styling untouched.
   Scoped to body.lux main so the cream header stays default.
   ============================================================= */

body.lux {
  background: var(--obsidian);
  color: var(--cream-dim);
}

/* ----- Sections: burgundy obsidian ground lit with soft ambient
   blooms (warm-red + copper). The blooms are anchored toward the
   section interior so they fade out before the edges, and a
   universal edge-fade dissolves every section to pure obsidian at
   its top and bottom — so adjacent sections meet seamlessly. ----- */
body.lux main > section {
  background-color: var(--obsidian);
  background-image:
    radial-gradient(50% 44% at 80% 30%, oklch(0.52 0.13 240 / 0.5) 0%, transparent 72%),
    radial-gradient(46% 40% at 12% 72%, oklch(0.56 0.10 245 / 0.3) 0%, transparent 74%),
    radial-gradient(88% 62% at 50% 50%, oklch(0.36 0.122 19 / 0.5) 0%, transparent 82%);
  color: var(--cream-dim);
  position: relative;
  isolation: isolate;
}
body.lux main section.alt,
body.lux main section.tight,
body.lux main section.dark,
body.lux main section.drenched,
body.lux main .cat-section { background-color: var(--obsidian); }
/* Mirror the bloom anchors on alternating sections so stacked
   sections feel composed, never banded */
body.lux main > section:nth-of-type(even) {
  background-image:
    radial-gradient(50% 44% at 18% 32%, oklch(0.50 0.13 240 / 0.46) 0%, transparent 72%),
    radial-gradient(46% 40% at 86% 70%, oklch(0.56 0.10 245 / 0.3) 0%, transparent 74%),
    radial-gradient(86% 60% at 50% 52%, oklch(0.355 0.12 19 / 0.46) 0%, transparent 82%);
}
/* Universal edge-fade: each section dissolves into pure obsidian at
   its top and bottom edges, so the seam between any two sections is
   invisible. Sits above the background/blooms (z 1), below content
   (z 2). */
body.lux main > section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--obsidian) 0%,
    oklch(0.30 0.115 256 / 0) 15%,
    oklch(0.30 0.115 256 / 0) 85%,
    var(--obsidian) 100%
  );
}
body.lux main > section > .container { position: relative; z-index: 2; }

/* ----- On-section text → cream (cards keep their light styling) ----- */
body.lux main .eyebrow { color: var(--gilt); }
body.lux main .section-head h1,
body.lux main .section-head h2,
body.lux main .section-head h3,
body.lux main .cat-section-head h2 { color: var(--cream); }
body.lux main .section-head p,
body.lux main .cat-section-head p { color: var(--cream-mute); }
body.lux main .cta-final h2 { color: var(--cream); }
body.lux main .cta-final p { color: var(--cream-mute); }

/* ----- Page head: cinematic ambient lighting, blooms kept interior
   so the edge-fade leaves a clean seam with the next section ----- */
body.lux .page-head {
  background-color: var(--obsidian);
  background-image:
    radial-gradient(56% 60% at 84% 34%, oklch(0.55 0.14 240 / 0.52) 0%, transparent 70%),
    radial-gradient(50% 54% at 8% 74%, oklch(0.56 0.10 245 / 0.3) 0%, transparent 72%);
  isolation: isolate;
}
body.lux .page-head::before {
  background:
    radial-gradient(54% 58% at 32% 40%, oklch(0.46 0.14 24 / 0.4), transparent 70%);
}

/* ----- Stat row (numbers sit on the section) ----- */
body.lux main .stat-row { border-block-color: var(--rule-dark); }
body.lux main .stat strong { color: var(--cream); }
body.lux main .stat span { color: var(--cream-mute); }

/* ----- Catalog filter pills (on section) ----- */
body.lux main .cat-filter { border-block-color: var(--rule-dark); }
body.lux main .cat-filter a,
body.lux main .cat-filter button { color: var(--cream-mute); }
body.lux main .cat-filter a:hover,
body.lux main .cat-filter button:hover {
  color: var(--cream);
  background: var(--obsidian-soft);
}
body.lux main .cat-filter a.active,
body.lux main .cat-filter button.active,
body.lux main .cat-filter button[aria-pressed="true"] {
  color: var(--obsidian);
  background: var(--gilt);
}
body.lux main .cat-section { border-bottom-color: var(--rule-dark); }
body.lux main .empty-state { border-color: var(--rule-dark); }

/* ----- Tier Oro: keep its dark accent but lift it off the section ----- */
body.lux main .tier-oro { border-color: oklch(0.62 0.09 240 / 0.5); }

/* ----- Catalog cards: match the cream header surface ----- */
body.lux main .product-card { background: var(--bone); }

/* ----- Depth: light cards lift off the dark sections -----
   On a dark ground, depth reads from (a) a crisp warm hairline that
   defines the card edge, (b) a near-black tight contact shadow that
   contrasts against the burgundy, and (c) a wide soft shadow. ----- */
body.lux main .product-card,
body.lux main .tier-card,
body.lux main .gated-notice,
body.lux main .contact-card,
body.lux main .value-grid,
body.lux main .steps,
body.lux main .form-wrap,
body.lux main .gallery-main {
  border: 1px solid oklch(0.90 0.014 70);
  box-shadow:
    0 0 0 1px oklch(0.10 0.05 256 / 0.55),
    0 2px 4px oklch(0.04 0.02 256 / 0.7),
    0 10px 20px -6px oklch(0.03 0.015 256 / 0.7),
    0 30px 56px -20px oklch(0 0 0 / 0.85);
}
body.lux main .tier-oro {
  border-color: oklch(0.62 0.09 240 / 0.55);
  box-shadow:
    0 0 0 1px oklch(0.10 0.05 256 / 0.6),
    0 4px 8px oklch(0.04 0.02 256 / 0.7),
    0 16px 32px -8px oklch(0.03 0.015 256 / 0.78),
    0 40px 70px -24px oklch(0 0 0 / 0.9),
    0 0 70px -22px var(--halo-gilt);
}
body.lux main .product-card,
body.lux main .contact-card {
  transition:
    transform var(--t-base) var(--ease-out-quint),
    box-shadow var(--t-base) var(--ease-out-quint),
    border-color var(--t-base) var(--ease-out-quint),
    background var(--t-base) var(--ease-out-quint);
}
body.lux main .product-card:nth-child(n):hover,
body.lux main .product-card:nth-child(n):focus-visible,
body.lux main .contact-card:hover {
  border-color: oklch(0.94 0.012 70);
  box-shadow:
    0 0 0 1px oklch(0.10 0.05 256 / 0.6),
    0 4px 8px oklch(0.04 0.02 256 / 0.75),
    0 18px 34px -8px oklch(0.03 0.015 256 / 0.78),
    0 48px 84px -26px oklch(0 0 0 / 0.92);
}
body.lux main .contact-card:hover { transform: translateY(-4px); }

/* ----- FAQ (text directly on section) ----- */
body.lux main .faq-item { border-bottom-color: var(--rule-dark); }
body.lux main .faq-item:first-of-type { border-top-color: var(--rule-dark); }
body.lux main .faq-item summary { color: var(--cream); }
body.lux main .faq-item summary::after { color: var(--gilt); }
body.lux main .faq-item .answer { color: var(--cream-mute); }

/* ----- Prose (on section) ----- */
body.lux main .prose { color: var(--cream-mute); }
body.lux main .prose .lead { color: var(--cream-dim); }
body.lux main .prose h2,
body.lux main .prose h3 { color: var(--cream); }
body.lux main .prose blockquote {
  color: var(--cream);
  border-inline-start-color: var(--gilt);
}
body.lux main .prose .link-mark { color: var(--gilt); }
body.lux main .prose a.link-mark:hover { color: var(--cream); }
body.lux main .pull-quote { color: var(--cream); }
body.lux main .pull-quote-attr { color: var(--cream-mute); }

/* ----- Timeline (on section) ----- */
body.lux main .timeline,
body.lux main .timeline-list { border-top-color: var(--rule-dark); }
body.lux main .year { color: var(--gilt); }
body.lux main .entry h3 { color: var(--cream); }
body.lux main .entry p { color: var(--cream-mute); }

/* ----- Product detail — info column sits on the dark section ----- */
body.lux main .breadcrumb,
body.lux main .breadcrumb a { color: var(--cream-mute); }
body.lux main .breadcrumb a:hover {
  color: var(--cream);
  border-bottom-color: var(--gilt);
}
body.lux main .product-meta h1 { color: var(--cream); }
body.lux main .product-meta .ean { color: var(--cream-mute); }
body.lux main .product-meta .tagline { color: var(--cream-dim); }
body.lux main .price-block { border-block-color: var(--rule-dark); }
body.lux main .price-block .label { color: var(--cream-mute); }
body.lux main .price-block b { color: var(--cream); }
body.lux main .b2b-cta { border-top-color: var(--rule-dark); }
body.lux main .b2b-cta .muted,
body.lux main .marketplace-actions p.muted { color: var(--cream-mute); }
body.lux main .product-details { border-top-color: var(--rule-dark); }
body.lux main .product-details h2 { color: var(--cream); }
body.lux main .product-details p { color: var(--cream-mute); }
body.lux main .specs-grid { border-top-color: var(--rule-dark); }
body.lux main .specs-grid > div { border-bottom-color: var(--rule-dark-soft); }
body.lux main .specs-grid dt { color: var(--cream-mute); }
body.lux main .specs-grid dd { color: var(--cream); }
body.lux main .related-products { border-top-color: var(--rule-dark); }

/* ----- CTA final ----- */
body.lux main .cta-final { background-color: var(--obsidian); }

/* ----- Buttons that sit directly on a dark section ----- */
body.lux main .btn-primary {
  background: var(--cream);
  color: var(--obsidian);
  border-color: var(--cream);
}
body.lux main .btn-primary:hover {
  background: var(--gilt);
  color: var(--obsidian);
  border-color: var(--gilt);
}
body.lux main .btn-outline {
  color: var(--cream);
  border-color: var(--rule-dark);
  background: transparent;
}
body.lux main .btn-outline:hover {
  background: var(--cream);
  color: var(--obsidian);
  border-color: var(--cream);
}
body.lux main .btn-ghost { color: var(--cream); }
body.lux main .btn-ghost:hover { color: var(--gilt); }

/* ----- Buttons inside the light cards keep the burgundy treatment ----- */
body.lux main .gated-notice .btn-primary,
body.lux main .form-wrap .btn-primary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
body.lux main .gated-notice .btn-primary:hover,
body.lux main .form-wrap .btn-primary:hover {
  background: var(--ink-soft);
  color: var(--cream);
  border-color: var(--ink-soft);
}
body.lux main .form-wrap .btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
body.lux main .form-wrap .btn-outline:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
body.lux main .form-wrap .btn-ghost { color: var(--ink); }
body.lux main .form-wrap .btn-ghost:hover { color: var(--copper-deep); }

/* ----- Reveal handoff to GSAP -----
   On lux pages site.js owns the card reveals. Neutralise the CSS
   .reveal transition so it does not fight GSAP's per-frame tween
   (that fight made the entrance animations look broken), and zero
   the base transform so cleared GSAP tweens land at the right spot.
   The .reveal{opacity:0} stays, keeping the cards FOUC-free; if GSAP
   never loads, main.js still reveals them via .is-visible. */
body.lux main .reveal {
  transition: none;
  transform: none;
}

/* ============================================================
   AUTH · Login, alta de mayoristas y precios por tier (M1)
   Estilos para los elementos que crea / revela assets/js/auth.js.
   ============================================================ */

/* ----- Mensajes de formulario (login y alta) ----- */
.auth-message {
  margin: 0 0 var(--sp-5);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.45;
  border: 1px solid transparent;
}
.auth-message[data-kind="error"] {
  background: oklch(0.95 0.04 25);
  border-color: oklch(0.78 0.10 25);
  color: oklch(0.40 0.13 25);
}
.auth-message[data-kind="ok"] {
  background: oklch(0.95 0.03 150);
  border-color: oklch(0.74 0.08 150);
  color: oklch(0.38 0.10 150);
}

/* ----- Checkbox de aceptación (aviso de privacidad) ----- */
.check-field {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}
.check-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--ink);
}

/* ----- Precio mayorista en tarjetas del catálogo ----- */
.product-card .wholesale-price {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product-card .wholesale-price .wp-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.product-card .wholesale-price b {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

/* ----- Bloque de precio B2B en la ficha de producto ----- */
#b2b-pricing .b2b-price {
  margin: var(--sp-4) 0 0;
  padding: 16px 18px;
  border: 1px solid var(--copper);
  border-radius: 10px;
  background: oklch(0.97 0.02 70);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#b2b-pricing .b2b-price .label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
#b2b-pricing .b2b-price b {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
}
#b2b-pricing .b2b-price .moq {
  font-size: 0.82rem;
  color: var(--graphite-soft);
}

/* ----- Aviso de estado de cuenta (pendiente / rechazado) ----- */
.account-banner {
  padding: 14px 0;
  border-bottom: 1px solid transparent;
}
.account-banner p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.account-banner--pendiente {
  background: oklch(0.96 0.04 85);
  border-color: oklch(0.82 0.09 85);
  color: oklch(0.40 0.08 70);
}
.account-banner--rechazado {
  background: oklch(0.95 0.04 25);
  border-color: oklch(0.80 0.10 25);
  color: oklch(0.40 0.13 25);
}
/* Banner de error de red — distinto del rechazado (estado real del backend).
   Se usa cuando fetchProfile o fetch de products.json falla por red. */
.account-banner--error {
  background: oklch(0.95 0.04 25);
  border: 1px solid oklch(0.80 0.10 25);
  color: oklch(0.40 0.13 25);
}
/* Override para body.lux: en pagina con fondo navy el banner queda con
   superficie crema legible. */
body.lux main .account-banner--error {
  background: oklch(0.95 0.04 25);
  color: oklch(0.30 0.13 25);
  border-color: oklch(0.80 0.10 25);
}
body.lux main .account-banner--error a {
  color: oklch(0.30 0.13 25);
  text-decoration: underline;
}

/* ----- Página de cuenta ----- */
body.lux main .account-card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: var(--sp-6);
  box-shadow: 0 14px 40px -24px oklch(0 0 0 / 0.5);
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.account-grid dt {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0 0 2px;
}
.account-grid dd {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.account-note {
  margin: 0 0 var(--sp-5);
  color: var(--graphite);
  font-size: 0.95rem;
  line-height: 1.5;
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 560px) {
  .account-grid { grid-template-columns: 1fr; }
}

/* ----- Tarjeta de direccion predeterminada (M4.1+) ----- */
body.lux main .account-shipping {
  margin-top: var(--sp-5);
}
.account-shipping-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.account-shipping-head h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0;
}
.account-shipping-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-5);
}
[data-shipping-empty] {
  margin: var(--sp-3) 0 0;
  padding: 14px 16px;
  background: oklch(0.97 0.01 75);
  border: 1px dashed var(--rule);
  border-radius: 10px;
  color: var(--graphite);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ----- Páginas legales (aviso de privacidad, términos B2B) -----
   Tipografía y color consistentes en todo el documento. */
body.lux main .legal-doc .legal-note {
  font-size: 0.85rem;
  color: var(--cream-mute);
  background: oklch(0.99 0.01 75 / 0.05);
  border-left: 2px solid var(--copper);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 0 0 var(--sp-7);
}
body.lux main .legal-doc h2 {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: var(--sp-6) 0 var(--sp-2);
}
body.lux main .legal-doc p {
  color: var(--cream-mute);
  line-height: 1.7;
  margin: 0 0 var(--sp-3);
}
body.lux main .legal-doc .link-mark {
  color: var(--gilt);
  text-decoration-color: var(--gilt);
}
body.lux main .legal-doc .link-mark:hover {
  color: var(--cream);
  text-decoration-color: var(--cream);
}

/* ----- Botones dentro de la tarjeta de cuenta (carta clara) -----
   Sin esto, .btn-outline hereda texto crema y queda invisible. */
body.lux main .account-card .btn-primary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
body.lux main .account-card .btn-primary:hover {
  background: var(--ink-soft);
  color: var(--cream);
  border-color: var(--ink-soft);
}
body.lux main .account-card .btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
body.lux main .account-card .btn-outline:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ----- Campo de contraseña con botón mostrar/ocultar ----- */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap > input {
  width: 100%;
  padding-right: 46px;
}
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--graphite-soft);
  transition: color var(--t-fast) var(--ease-out-quint);
}
.pw-toggle:hover {
  color: var(--ink);
}
.pw-toggle svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   ADMIN · Panel de administración (M2)
   ============================================================ */
.admin-loading,
.admin-empty {
  color: var(--cream-mute);
  font-size: 0.95rem;
}
.admin-section { margin-bottom: var(--sp-8); }
.admin-section:last-child { margin-bottom: 0; }
body.lux main .admin-h {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 var(--sp-4);
}

/* Tarjetas claras (error, "no permiso", solicitud pendiente) */
body.lux main .admin-card,
body.lux main .admin-request {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: var(--sp-5);
  box-shadow: 0 14px 40px -24px oklch(0 0 0 / 0.5);
  color: var(--graphite);
}
body.lux main .admin-card { text-align: center; }
body.lux main .admin-card h2 { color: var(--ink); margin: 0 0 var(--sp-2); }
body.lux main .admin-card p { margin: 0 0 var(--sp-4); }
body.lux main .admin-request { margin-bottom: var(--sp-4); }

.admin-request-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--sp-3);
}
body.lux main .admin-request-head h3 {
  color: var(--ink);
  margin: 0;
  font-size: 1.15rem;
}

.admin-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.admin-fields .full { grid-column: 1 / -1; }
.admin-fields dt {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0 0 2px;
}
.admin-fields dd { margin: 0; color: var(--graphite); font-size: 0.92rem; }

.admin-request-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
}
.admin-tier-label {
  font-size: 0.8rem;
  color: var(--graphite-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Botones de admin sobre carta clara (tratamiento burgundy) */
body.lux main .admin-request .btn-primary,
body.lux main .admin-table .btn-primary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
body.lux main .admin-request .btn-primary:hover,
body.lux main .admin-table .btn-primary:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}
body.lux main .admin-request .btn-outline,
body.lux main .admin-table .btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
body.lux main .admin-request .btn-outline:hover,
body.lux main .admin-table .btn-outline:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* Selectores de tier */
.admin-request select,
.admin-table select {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--cream);
  color: var(--ink);
}

/* Insignias de estado */
.adm-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.adm-status--pendiente { background: oklch(0.92 0.07 85);  color: oklch(0.40 0.08 70); }
.adm-status--aprobado  { background: oklch(0.92 0.07 150); color: oklch(0.36 0.10 150); }
.adm-status--rechazado { background: oklch(0.92 0.06 25);  color: oklch(0.40 0.13 25); }

/* Tabla de todos los distribuidores */
body.lux main .admin-table-wrap {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow-x: auto;
  box-shadow: 0 14px 40px -24px oklch(0 0 0 / 0.5);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 12px var(--sp-4);
  vertical-align: top;
}
.admin-table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--copper-deep);
  border-bottom: 1px solid var(--rule);
}
.admin-table tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
.admin-table td { color: var(--graphite); }
.adm-sub { color: var(--graphite-soft); font-size: 0.8rem; }

/* =============================================================
   CART (M4) — carrito mayorista
   ============================================================= */

/* ----- Icono y badge en el nav ----- */
.nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 4px;
  border-radius: 8px;
  transition: background var(--t-fast) var(--ease-out-quint);
}
.nav-cart:hover { background: var(--bone-deep); }
.nav-cart-icon {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--copper);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cart-badge[hidden] { display: none; }

/* ----- Controles "Agregar al carrito" (ficha + catalogo) ----- */
.cart-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
}
.cart-controls-label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 600;
}
.qty-row {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  width: max-content;
}
.qty-row button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out-quint);
}
.qty-row button:hover { background: var(--bone-deep); }
.qty-row button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}
.qty-row input[type="number"] {
  width: 64px;
  border: 0;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  background: var(--cream);
  color: var(--ink);
  appearance: textfield;
  -moz-appearance: textfield;
}
.qty-row input[type="number"]::-webkit-outer-spin-button,
.qty-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-row input[type="number"]:focus {
  outline: none;
  background: var(--bone);
}

/* Variante catalogo: input mas compacto, fila centrada */
.cart-controls--catalog {
  margin-top: 10px;
  padding-top: 10px;
  gap: 6px;
}
.cart-controls--catalog .cart-controls-label {
  font-size: 0.65rem;
  text-align: center;
}
/* La fila queda en su ancho natural (3 celdas: 36+64+36 = 136px) y se
   centra horizontalmente en la card. Antes era width:100% sin flex-grow,
   asi que -/numero/+ quedaban a la izquierda con hueco a la derecha. */
.cart-controls--catalog .qty-row {
  align-self: center;
  width: max-content;
}
.cart-controls--catalog .cart-add-btn { width: 100%; }

/* Variante ficha de producto */
.cart-controls--product {
  gap: var(--sp-3);
}
.cart-controls--product .cart-add-btn { align-self: flex-start; }

/* ----- Toast ----- */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 14px 40px -18px oklch(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--t-base) var(--ease-out-quint),
    transform var(--t-base) var(--ease-out-quint);
  z-index: 200;
}
.cart-toast[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cart-toast[data-kind="warn"] {
  background: oklch(0.40 0.13 65);
}

/* ----- Pagina carrito.html ----- */
body.lux main .cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
/* Importante: con display:flex el navegador NO oculta por defecto al
   poner el atributo hidden. La regla agente [hidden]{display:none} y
   tambien .cart-lines[hidden] pierden por especificidad contra
   body.lux main .cart-lines (que es 0,2,2). Por eso scopeamos con el
   mismo prefijo. Esto causaba que al borrar la ultima linea, la card
   del producto quedara abajo del estado vacio. */
body.lux main .cart-lines[hidden],
body.lux main .orders-list[hidden] { display: none; }
body.lux main .cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 8px 24px -18px oklch(0 0 0 / 0.4);
}
@media (max-width: 720px) {
  body.lux main .cart-line {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "img  info   remove"
      "img  qty    total";
    row-gap: var(--sp-3);
  }
  .cart-line-img    { grid-area: img; }
  .cart-line-info   { grid-area: info; }
  .cart-line-qty    { grid-area: qty; }
  .cart-line-total  { grid-area: total; justify-self: end; }
  .cart-line-remove { grid-area: remove; justify-self: end; }
}
.cart-line-img img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--cream);
}
.cart-line-info h3 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}
.cart-line-info .meta {
  display: block;
  font-size: 0.78rem;
  color: var(--graphite-soft);
  margin-bottom: 4px;
}
.cart-line-info .muted {
  display: block;
  font-size: 0.85rem;
  color: var(--graphite-soft);
}
.cart-line-info .muted b { color: var(--ink); font-weight: 600; }
.cart-line-total {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 110px;
  text-align: right;
}
.cart-line-remove {
  border: 1px solid var(--rule);
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--graphite-soft);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out-quint),
    color var(--t-fast) var(--ease-out-quint);
}
.cart-line-remove:hover {
  background: oklch(0.95 0.04 25);
  color: oklch(0.40 0.13 25);
}

/* ----- Layout 2 columnas del carrito ----- */
.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-3);
}
@media (max-width: 960px) {
  .cart-grid { grid-template-columns: 1fr; }
}
/* Si todo esta oculto (estado vacio / confirmacion), el grid colapsa. */
.cart-grid:has(> [hidden]:only-child),
.cart-grid:not(:has(> :not([hidden]))) { margin-top: 0; }

/* Aire entre el page-head y la lista/contenido en paginas internas:
   sin override, la suma de paddings da ~224px de espacio vacio entre el
   subheader azul y el contenido. Comprimimos a algo decente.
   Cobertura: carrito, pedidos, admin, login, restablecer, cuenta y los
   documentos legales (aviso de privacidad + terminos B2B). */
body.lux main .page-head:has(+ section.alt[data-cart-page]),
body.lux main .page-head:has(+ section.alt[data-orders-page]),
body.lux main .page-head:has(+ section.alt[data-admin-page]),
body.lux main .page-head:has(+ section.alt[data-login-page]),
body.lux main .page-head:has(+ section.alt[data-account-page]),
body.lux main .page-head:has(+ section.legal-doc[data-legal-page]) {
  padding-bottom: var(--sp-5);
}
body.lux main section.alt[data-cart-page],
body.lux main section.alt[data-orders-page],
body.lux main section.alt[data-admin-page],
body.lux main section.alt[data-login-page],
body.lux main section.alt[data-account-page],
body.lux main section.legal-doc[data-legal-page] {
  padding-top: var(--sp-5);
}

/* ----- Resumen del carrito ----- */
body.lux main .cart-summary {
  padding: var(--sp-6);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 14px 40px -22px oklch(0 0 0 / 0.45);
  position: sticky;
  top: var(--sp-5);
}
@media (max-width: 960px) {
  body.lux main .cart-summary { position: static; }
}
.cart-summary-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule-soft);
}
.cart-summary dl { margin: 0 0 var(--sp-4); padding: 0; }
.cart-summary dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.cart-summary dl > div:last-child { border-bottom: 0; }
.cart-summary dt {
  font-size: 0.88rem;
  color: var(--graphite-soft);
  font-weight: 500;
}
.cart-summary dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cart-summary dl > div.total dt {
  color: var(--ink);
  font-weight: 600;
}
.cart-summary dl > div.total dd {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  white-space: nowrap;   /* evita que "MXN" caiga a la siguiente linea */
}
.cart-summary .muted {
  display: block;
  font-size: 0.82rem;
  color: var(--graphite-soft);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}
.cart-summary [data-place-order] { width: 100%; }
[data-cart-error] {
  margin-top: var(--sp-4);
  padding: 12px 14px;
  border-radius: 10px;
  background: oklch(0.95 0.04 25);
  border: 1px solid oklch(0.80 0.10 25);
  color: oklch(0.40 0.13 25);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* ----- Direccion de entrega (M4.1) -----
   Tarjeta crema sobre la seccion oscura, encima del .cart-grid.
   Reusa el sistema .form-grid / .field de solicitar-acceso.html. */
body.lux main [data-cart-shipping] {
  display: block;
  padding: var(--sp-6);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 14px 40px -22px oklch(0 0 0 / 0.45);
  margin-bottom: var(--sp-5);
}
/* [hidden] perderia por especificidad contra el display:block de arriba. */
body.lux main [data-cart-shipping][hidden] { display: none; }

.cart-shipping-help {
  display: block;
  margin: -8px 0 var(--sp-5);
  font-size: 0.85rem;
  color: var(--graphite-soft);
  line-height: 1.5;
}

[data-shipping-error] {
  margin-top: var(--sp-4);
  padding: 12px 14px;
  border-radius: 10px;
  background: oklch(0.95 0.04 25);
  border: 1px solid oklch(0.80 0.10 25);
  color: oklch(0.40 0.13 25);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* ----- Confirmacion de pedido -----
   El card vive sobre la seccion oscura (body.lux main): hay que fijar
   colores explicitos porque .gated-mark solo tiene estilos dentro de
   .gated-notice y el resto del texto heredaria los tonos atenuados
   pensados para fondo oscuro. */
body.lux main [data-order-confirm] {
  max-width: 560px;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-7);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-align: center;
  color: var(--graphite);
  box-shadow: 0 14px 40px -22px oklch(0 0 0 / 0.45);
}
body.lux main [data-order-confirm] .gated-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: 1.35rem;
  color: var(--copper);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 6px;
}
body.lux main [data-order-confirm] h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-style: italic;
  font-weight: 400;
  margin: var(--sp-3) 0 var(--sp-4);
  color: var(--ink);
}
body.lux main [data-order-confirm] p {
  color: var(--graphite);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 var(--sp-3);
}
body.lux main [data-order-confirm] p:last-of-type { color: var(--graphite-soft); }
body.lux main [data-order-confirm] a { color: var(--copper-deep); font-weight: 600; }
body.lux main [data-order-confirm] b[data-order-id] {
  display: inline-block;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  background: var(--ink);
  color: var(--cream);
  padding: 4px 12px;
  border-radius: 6px;
  margin-left: 4px;
}

/* El boton "Volver al catalogo" usa .btn-outline; sobre el card claro
   forzamos contraste oscuro en vez del estilo de seccion oscura. */
body.lux main [data-order-confirm] .btn-outline {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}
body.lux main [data-order-confirm] .btn-outline:hover {
  background: var(--ink);
  color: var(--cream);
}

/* ----- Estado vacio y no-acceso ----- */
body.lux main [data-cart-empty],
body.lux main [data-no-access] {
  max-width: 560px;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-7);
  text-align: center;
  background: var(--cream);
  border: 1px dashed var(--rule);
  border-radius: 14px;
}
[data-cart-empty] p,
[data-no-access] p {
  margin: 0 0 var(--sp-4);
  color: var(--graphite-soft);
}

/* ----- Boton add-to-cart en la ficha (mas grande) ----- */
.cart-controls--product .cart-add-btn {
  padding: 10px 22px;
  font-size: 0.92rem;
}

/* ----- Cuando el catalogo carga con sesion, el card sigue siendo <a>:
        que el cursor no sugiera link sobre los controles. ----- */
.product-card .cart-controls,
.product-card .cart-controls * { cursor: auto; }
.product-card .cart-controls button,
.product-card .cart-controls input { cursor: pointer; }
.product-card .cart-controls input { cursor: text; }

/* ----- Nav: link "Mis pedidos" ----- */
.nav-orders { white-space: nowrap; }

/* ----- Pagina pedidos.html ----- */
body.lux main .orders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
body.lux main .order-card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: var(--sp-5) var(--sp-6);
  color: var(--graphite);
  box-shadow: 0 10px 30px -20px oklch(0 0 0 / 0.4);
}
.order-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.order-card-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-folio {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graphite-soft);
}
.order-folio b {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.order-date {
  font-size: 0.85rem;
  color: var(--graphite);
}
.order-ship {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--graphite-soft);
  letter-spacing: 0.02em;
}
.order-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.order-status--nuevo       { background: oklch(0.92 0.07 85);  color: oklch(0.40 0.10 70); }
.order-status--confirmado  { background: oklch(0.92 0.06 242); color: oklch(0.36 0.12 242); }
.order-status--pagado      { background: oklch(0.92 0.08 150); color: oklch(0.34 0.12 150); }
.order-status--enviado     { background: oklch(0.92 0.06 270); color: oklch(0.36 0.13 270); }
.order-status--entregado   { background: oklch(0.36 0.10 165); color: oklch(0.96 0.05 165); }
.order-status--cancelado   { background: oklch(0.92 0.06 25);  color: oklch(0.40 0.13 25); }

.order-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.95rem;
  color: var(--graphite);
  flex-wrap: wrap;
}
.order-card-meta .order-total {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.order-card-meta .order-total small {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--graphite-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 6px;
}

.order-toggle {
  background: transparent;
  border: 0;
  padding: var(--sp-3) 0 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--copper-deep);
  cursor: pointer;
  text-align: left;
}
.order-toggle:hover { text-decoration: underline; }

.order-items {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
  overflow-x: auto;
}
.order-items[hidden] { display: none; }
.order-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.order-items-table th,
.order-items-table td {
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.order-items-table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
.order-items-table tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
.order-items-table td { color: var(--graphite); }
.order-items-table b { color: var(--ink); font-weight: 600; }
.order-items-table .muted { color: var(--graphite-soft); }
.order-item-ean {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--graphite-soft);
  margin-top: 2px;
}

.order-actions {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}
body.lux main .order-actions .btn-outline {
  color: oklch(0.40 0.13 25);
  border-color: oklch(0.80 0.10 25);
  background: transparent;
}
body.lux main .order-actions .btn-outline:hover {
  background: oklch(0.40 0.13 25);
  color: var(--cream);
}
.order-cancel-error {
  color: oklch(0.40 0.13 25);
  font-size: 0.85rem;
}

body.lux main [data-orders-empty],
body.lux main [data-orders-loading] {
  text-align: center;
  padding: var(--sp-7);
  background: var(--cream);
  border: 1px dashed var(--rule);
  border-radius: 14px;
  color: var(--graphite);
}
body.lux main [data-orders-empty] p,
body.lux main [data-orders-loading] p { margin: 0 0 var(--sp-4); color: var(--graphite-soft); }

/* =============================================================
   ADMIN · UPGRADES (M2.1) — tabs, drawer, prices grid
   ============================================================= */

/* ----- Nav de tabs -----
   Pestañas cream estilo folder. Las inactivas en --bone discretas;
   la activa crece, se ilumina al cream brillante, tiene franja azure
   arriba y sombra de elevacion. La linea de tope es cream visible
   para que las pestañas se vean "sentadas" sobre una repisa. */
body.lux main .admin-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: var(--sp-3);
  border-bottom: 2px solid var(--cream);
}
body.lux main .admin-tab {
  background: var(--bone);
  border: 1px solid transparent;
  border-bottom: none;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--graphite);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  margin-bottom: -2px;       /* solapa con la linea cream */
  position: relative;
  transition:
    background var(--t-fast) var(--ease-out-quint),
    color var(--t-fast) var(--ease-out-quint),
    padding var(--t-fast) var(--ease-out-quint);
}
body.lux main .admin-tab:hover {
  background: var(--cream);
  color: var(--ink);
}
body.lux main .admin-tab[aria-pressed="true"] {
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;        /* crece vertical y horizontalmente */
  border-color: var(--rule);
  border-top: 3px solid var(--copper); /* franja azure de seleccion */
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -10px 22px -10px oklch(0 0 0 / 0.45);
  z-index: 2;
}

/* Las secciones internas de los tabs heredarian padding: 102px 0 del
   tema "body.lux main section" (las grandes secciones oscuras). Aqui
   lo anulamos: son contenedores logicos sin aire propio. */
body.lux main [data-admin-section] { padding: 0; }
body.lux main [data-admin-section]::after { content: none; }
body.lux main [data-admin-section] > .admin-section { margin-top: 0; }
body.lux main [data-admin-section] .admin-h { margin-top: 0; }

/* ----- Estados de pedido en .adm-status (mismos colores que .order-status--*) ----- */
.adm-status--nuevo       { background: oklch(0.92 0.07 85);  color: oklch(0.40 0.10 70); }
.adm-status--confirmado  { background: oklch(0.92 0.06 242); color: oklch(0.36 0.12 242); }
.adm-status--pagado      { background: oklch(0.92 0.08 150); color: oklch(0.34 0.12 150); }
.adm-status--enviado     { background: oklch(0.92 0.06 270); color: oklch(0.36 0.13 270); }
.adm-status--entregado   { background: oklch(0.36 0.10 165); color: oklch(0.96 0.05 165); }
.adm-status--cancelado   { background: oklch(0.92 0.06 25);  color: oklch(0.40 0.13 25); }

/* ----- Grid editable de precios mayoristas ----- */
body.lux main .admin-prices-card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: var(--sp-5);
  box-shadow: 0 10px 30px -22px oklch(0 0 0 / 0.4);
}
body.lux main .admin-prices-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
body.lux main .admin-prices-grid th,
body.lux main .admin-prices-grid td {
  text-align: left;
  padding: 10px 12px;
  vertical-align: middle;
}
body.lux main .admin-prices-grid thead th {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--copper-deep);
  border-bottom: 1px solid var(--rule);
}
body.lux main .admin-prices-grid th[scope="row"] {
  color: var(--ink);
  font-weight: 600;
}
body.lux main .admin-prices-grid th[scope="row"] .meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--graphite-soft);
  font-family: var(--font-mono), ui-monospace, monospace;
}
body.lux main .admin-prices-grid tbody tr + tr td,
body.lux main .admin-prices-grid tbody tr + tr th { border-top: 1px solid var(--rule-soft); }
body.lux main .admin-prices-grid input[type="number"] {
  width: 110px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color var(--t-fast) var(--ease-out-quint),
              background var(--t-fast) var(--ease-out-quint);
}
body.lux main .admin-prices-grid input[type="number"]::-webkit-outer-spin-button,
body.lux main .admin-prices-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.lux main .admin-prices-grid input[type="number"]:focus {
  outline: none;
  border-color: var(--copper);
  background: var(--cream);
}
/* Indica cambio pendiente sin guardar */
body.lux main .admin-prices-grid input[data-dirty="true"] {
  border-color: var(--copper);
  background: oklch(0.97 0.025 242);
}
body.lux main .admin-prices-grid input[data-saving="true"] {
  opacity: 0.6;
  pointer-events: none;
}
.admin-prices-footnote {
  margin-top: var(--sp-4);
  font-size: 0.82rem;
  color: var(--graphite-soft);
}

/* ----- Tabla de pedidos del admin ----- */
body.lux main .admin-orders-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.admin-filter-chip {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--graphite);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out-quint),
              border-color var(--t-fast) var(--ease-out-quint),
              color var(--t-fast) var(--ease-out-quint);
}
.admin-filter-chip:hover { background: var(--bone-deep); }
.admin-filter-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
body.lux main .admin-orders-table select {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  background: var(--cream);
  color: var(--ink);
}
body.lux main .admin-orders-table .order-total-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-orders-empty {
  padding: var(--sp-5);
  text-align: center;
  color: var(--graphite-soft);
  background: var(--cream);
  border: 1px dashed var(--rule);
  border-radius: 14px;
}

/* ----- Drawer lateral (detalle de pedido o distribuidor) ----- */
.admin-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.5);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out-quint);
}
.admin-drawer-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 100vw);
  background: var(--bone);
  border-left: 1px solid var(--rule);
  box-shadow: -18px 0 50px -20px oklch(0 0 0 / 0.4);
  z-index: 200;
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out-quint);
  overflow-y: auto;
  color: var(--graphite);
}
.admin-drawer[data-open="true"] { transform: translateX(0); }
.admin-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--bone);
  z-index: 1;
}
.admin-drawer-head h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0;
}
.admin-drawer-close {
  background: transparent;
  border: 1px solid var(--rule);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--graphite);
}
.admin-drawer-close:hover { background: var(--bone-deep); color: var(--ink); }
.admin-drawer-body {
  padding: var(--sp-5);
}
.admin-drawer-body dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.admin-drawer-body dl > div {
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: var(--sp-3);
}
.admin-drawer-body dl > div:last-child { border-bottom: 0; }
.admin-drawer-body dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--graphite-soft);
  font-weight: 600;
  margin-bottom: 4px;
}
.admin-drawer-body dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}
.admin-drawer-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: var(--sp-3);
}
.admin-drawer-body table th,
.admin-drawer-body table td {
  padding: 8px;
  text-align: left;
  vertical-align: top;
}
.admin-drawer-body table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  border-bottom: 1px solid var(--rule);
}
.admin-drawer-body table tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
.admin-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* Que .admin-table tr sea clickeable (drawer) */
body.lux main .admin-table tbody tr[data-clickable] { cursor: pointer; }
body.lux main .admin-table tbody tr[data-clickable]:hover td { background: var(--bone); }


/* ============================================================
   CATALOGO · spacing tightening
   El catalogo apila page-head + (gated-notice opcional) + filtro
   + 4 secciones de categoria. Con los paddings por defecto da
   demasiado aire muerto, mas cuando la card "Solicitar acceso"
   esta oculta (precios ya desbloqueados, ver auth.js#markGatedNotice).
   ============================================================ */
body[data-page="catalogo"].lux main .page-head {
  padding-block: clamp(72px, 8vw, 104px) var(--sp-6);
}
body[data-page="catalogo"].lux main section.tight {
  padding-block: var(--sp-6);
}
body[data-page="catalogo"].lux main .cat-section {
  padding-block: var(--sp-7);
}
/* Si la seccion de la gated-notice esta hidden (cliente aprobado),
   el filtro queda pegado al page-head: compensamos un poco. */
body[data-page="catalogo"].lux main .page-head + section.tight[hidden] + section.tight {
  padding-top: var(--sp-5);
}

/* ============================================================
   COOKIES NOTICE · banner inferior, primera visita
   Se inyecta dinamicamente desde main.js#initCookiesNotice
   y se persiste en localStorage (key: pegadito_cookies_v1).
   ============================================================ */
.cookies-banner {
  position: fixed;
  inset: auto var(--sp-4) var(--sp-4) var(--sp-4);
  z-index: 80;
  background: var(--cream);
  color: var(--graphite);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg, 14px);
  box-shadow:
    0 24px 60px -22px oklch(0 0 0 / 0.45),
    0 2px 4px oklch(0 0 0 / 0.18);
  max-width: 720px;
  margin-inline: auto;
}
.cookies-banner.is-leaving {
  opacity: 0;
  transition: opacity 240ms var(--ease-out-quint, ease-out);
}
.cookies-banner-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  align-items: center;
}
@media (min-width: 720px) {
  .cookies-banner-inner {
    grid-template-columns: 1fr auto;
    gap: var(--sp-5);
  }
}
.cookies-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  line-height: 1.45;
}
.cookies-banner-text strong {
  font-weight: 600;
  color: var(--ink);
}
.cookies-banner-text span {
  color: var(--graphite-soft);
}
.cookies-banner-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookies-banner-text a:hover { color: var(--copper); }
.cookies-banner-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
}
@media (prefers-reduced-motion: reduce) {
  .cookies-banner { transition: none; }
}
/* Mover el FAB de WhatsApp para que no choque con el banner.
   Antes el selector requeria .is-visible pero el JS no agrega esa clase
   nunca (la entrada es instantanea sin animacion). Cualquier presencia
   del banner que NO se este yendo basta. */
body:has(.cookies-banner:not(.is-leaving)) .wa-fab {
  transform: translateY(-92px);
  transition: transform 320ms var(--ease-out-quint, ease-out);
}