/* ─────────────────────────────────────────────────────────────────
   OFTÁLMICA BONET — Modern Medical Editorial
   Brand palette: crimson, magenta, white.
   Display: Instrument Serif. Body: DM Sans. Mono: JetBrains Mono.
   ───────────────────────────────────────────────────────────────── */

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  /* canvas */
  --white:        #FFFFFF;
  --canvas:       #FCFAFB;
  --canvas-soft:  #F8F4F6;
  --rose-mist:    #FBEFF4;
  --rose-tint:    #F4D8E5;
  --rose-line:    #ECC2D5;

  /* brand accents */
  --rose:         #E0488C;
  --rose-vivid:   #E91E72;
  --crimson:      #A8174E;
  --crimson-deep: #7E0F37;
  --crimson-ink:  #5A0A26;

  /* ink */
  --ink:          #1A1117;
  --ink-soft:     #43363D;
  --ink-whisper:  rgba(26, 17, 23, 0.55);
  --ink-faint:    rgba(26, 17, 23, 0.32);
  --rule:         rgba(168, 23, 78, 0.14);
  --rule-strong:  rgba(168, 23, 78, 0.28);
  --rule-ink:     rgba(26, 17, 23, 0.10);

  /* glows */
  --rose-glow:    rgba(233, 30, 114, 0.08);
  --crimson-glow: rgba(168, 23, 78, 0.06);

  /* type */
  --font-display: 'Instrument Serif', 'Times New Roman', Times, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* fluid scale */
  --step--2: clamp(0.7rem, 0.66rem + 0.18vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.78rem + 0.22vw, 0.92rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.8vw, 2.85rem);
  --step-4:  clamp(2.6rem, 2rem + 2.8vw, 4.2rem);
  --step-5:  clamp(3.4rem, 2.4rem + 4.6vw, 6rem);
  --step-6:  clamp(4.4rem, 2.8rem + 7.2vw, 8.5rem);
  --step-7:  clamp(5.4rem, 3rem + 11vw, 12rem);

  /* layout */
  --container: 1320px;
  --gutter:    clamp(1.1rem, 0.5rem + 2vw, 2.2rem);

  /* motion */
  --ease:      cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--crimson); color: var(--white); }

/* ── Typography ───────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.025em;
}

.display em {
  font-style: italic;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.018em;
  margin: 0 0 0.4em;
  line-height: 1.05;
}

p { margin: 0 0 1em; }

.label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.label--crimson { color: var(--crimson); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  display: block;
}

/* ── Layout primitives ────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--wide { max-width: 1480px; }

.rule {
  border: 0;
  border-top: 1px solid var(--rule-ink);
  margin: 0;
}

.rule--strong { border-top-color: rgba(26, 17, 23, 0.22); }

section { padding-block: clamp(4.5rem, 3rem + 5vw, 8.5rem); }

/* ── Optical mark ─────────────────────────────────────────────── */
.mark {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
}

.mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

.mark::after {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--rose-vivid), var(--crimson));
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  --bg: var(--crimson);
  --fg: var(--white);
  --br: var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95em 1.7em;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--br);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.btn:hover { --bg: var(--crimson-deep); --br: var(--crimson-deep); transform: translateY(-1px); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  --br: var(--ink);
}
.btn--ghost:hover { --bg: var(--ink); --fg: var(--white); --br: var(--ink); }

.btn--rose { --bg: var(--rose-vivid); --br: var(--rose-vivid); }
.btn--rose:hover { --bg: var(--crimson); --br: var(--crimson); }

.btn--inline {
  background: none;
  border: 0;
  padding: 0;
  color: var(--crimson);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  padding-bottom: 0.1em;
}

.btn--inline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.btn--inline:hover::after { transform: scaleX(0.55); }

.btn--inline .arrow {
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 0.4s var(--ease);
}

.btn--inline:hover .arrow { transform: translateX(0.3em); }

/* ── Chip ─────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35em 0.95em;
  border: 1px solid var(--rule-ink);
  border-radius: 999px;
  font-size: var(--step--1);
  background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

a.chip:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.chip--crimson {
  color: var(--crimson);
  border-color: var(--rule-strong);
  background: var(--rose-mist);
}

a.chip--crimson:hover {
  background: var(--crimson);
  color: var(--white);
  border-color: var(--crimson);
}

/* ── Header ───────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule-ink);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding-block: 1.1rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.5s var(--ease);
}

.site-brand__logo {
  height: clamp(48px, 4vw + 28px, 68px);
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(168, 23, 78, 0));
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease);
}

.site-brand:hover { transform: translateY(-1px); }
.site-brand:hover .site-brand__logo {
  filter: drop-shadow(0 4px 14px rgba(168, 23, 78, 0.22));
  transform: scale(1.015);
}

/* Pill-rail: the menu reads as a single, deliberate object —
   editorial index numbers + a glass "spotlight" that glides on hover. */
.site-nav {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-self: center;
  gap: 0.1rem;
  padding: 0.32rem;
  margin: 0;
  list-style: none;
  counter-reset: navindex;
  border: 1px solid var(--rule-ink);
  border-radius: 999px;
  background:
    linear-gradient(color-mix(in srgb, var(--canvas-soft) 65%, transparent),
                    color-mix(in srgb, var(--rose-mist) 55%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(26, 17, 23, 0.03);
}

/* the magnetic spotlight (a raised glass key) */
.site-nav__spot {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-radius: 999px;
  background: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(168, 23, 78, 0.10),
    0 8px 22px -10px rgba(168, 23, 78, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    transform 0.5s var(--ease-out),
    width 0.5s var(--ease-out),
    height 0.5s var(--ease-out),
    opacity 0.35s var(--ease);
}
.site-nav.is-spot-on .site-nav__spot { opacity: 1; }
.site-nav__spot.is-instant { transition: opacity 0.35s var(--ease); }

.site-nav > li,
.site-nav > a { counter-increment: navindex; }
.site-nav > li { display: flex; list-style: none; }

.site-nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.66em 1.1em;
  border-radius: 999px;
  font-size: clamp(0.94rem, 0.9rem + 0.2vw, 1.04rem);
  font-weight: 500;
  letter-spacing: -0.004em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

/* editorial catalog index — 01 · 02 · 03 · 04 */
.site-nav a::before {
  content: counter(navindex, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink-faint);
  transform: translateY(-0.55em);
  transition: color 0.3s var(--ease);
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--crimson); outline: none; }
.site-nav a:hover::before,
.site-nav a:focus-visible::before { color: var(--rose-vivid); }

/* current page */
.site-nav .current_page_item > a,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { color: var(--crimson); }
.site-nav .current_page_item > a::before,
.site-nav .current-menu-item > a::before,
.site-nav .current-menu-ancestor > a::before { color: var(--rose-vivid); }

/* fallback resting pill when JS / spotlight is unavailable */
html:not(.js) .site-nav a:hover,
html:not(.js) .site-nav .current_page_item > a,
html:not(.js) .site-nav .current-menu-item > a,
html:not(.js) .site-nav .current-menu-ancestor > a {
  background: var(--white);
  box-shadow: 0 1px 2px rgba(168, 23, 78, 0.10), 0 8px 22px -10px rgba(168, 23, 78, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__spot { transition: opacity 0.2s linear; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.icon-btn {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--rule-ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.icon-btn:hover { background: var(--crimson); color: var(--white); border-color: var(--crimson); }
.icon-btn svg { width: 1rem; height: 1rem; }

.nav-toggle { display: none; }

@media (max-width: 920px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-grid; }
  .site-header__inner { grid-template-columns: 1fr auto; padding-block: 0.9rem; }
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 1.4rem var(--gutter) 2.4rem;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--rose-mist), transparent 60%),
    var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out), visibility 0s 0.45s;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out), visibility 0s;
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.mobile-nav__close { position: static; }

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  margin-top: 0.6rem;
}

.mobile-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0.2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  opacity: 0;
  transform: translateY(0.7rem);
}
.mobile-nav.is-open .mobile-nav__list a {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease) var(--d, 0s), transform 0.5s var(--ease-out) var(--d, 0s), color 0.3s var(--ease);
}
.mobile-nav__list a:nth-child(1) { --d: 0.08s; }
.mobile-nav__list a:nth-child(2) { --d: 0.15s; }
.mobile-nav__list a:nth-child(3) { --d: 0.22s; }
.mobile-nav__list a:nth-child(4) { --d: 0.29s; }

.mobile-nav__idx {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rose-vivid);
  line-height: 1;
}
.mobile-nav__txt {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mobile-nav__arrow {
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--crimson);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease);
}
.mobile-nav__arrow svg { width: 1rem; height: 1rem; }

.mobile-nav__list a:hover .mobile-nav__txt,
.mobile-nav__list a:active .mobile-nav__txt { color: var(--crimson); }
.mobile-nav__list a:hover .mobile-nav__arrow {
  background: var(--crimson);
  color: var(--white);
  transform: translateX(0.25rem);
}

.mobile-nav__foot {
  margin-top: auto;
  padding-top: 1.6rem;
}
.mobile-nav__foot .btn { width: 100%; justify-content: center; }
.mobile-nav__foot .btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
  overflow: hidden;
  background: var(--white);
}

/* radial wash behind hero */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--rose-glow), transparent 60%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 4rem);
  align-items: center;
  position: relative;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  margin-bottom: 3.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-ink);
}

.hero__meta strong { color: var(--crimson); font-weight: 500; }

.hero__title {
  font-size: clamp(2.8rem, 1.8rem + 5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
}

.hero__title em {
  font-style: italic;
  color: var(--crimson);
}

.hero__lead {
  max-width: 32ch;
  margin-top: 2.2rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero__cta {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
}

.hero__visual {
  position: relative;
  aspect-ratio: 1;
  color: var(--ink);
  animation: heroFloat 14s ease-in-out infinite alternate;
}

.hero__visual svg { width: 100%; height: 100%; }

@keyframes heroFloat {
  from { transform: translateY(-0.5rem) rotate(-0.4deg); }
  to   { transform: translateY(0.5rem)  rotate(0.4deg); }
}

.hero__visual .pupil {
  transform-origin: 300px 300px;
  animation: pupilBreath 7s ease-in-out infinite;
}

@keyframes pupilBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.88); }
}

/* la pupila sigue al puntero — main.js fija el translate; el latido (.pupil) es independiente */
.hero__visual .hero-eye__look {
  transition: transform 0.5s var(--ease-out);
}

/* hero brand marquee */
.hero__strip {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-block: 1.4rem;
  border-block: 1px solid var(--rule-ink);
  overflow: hidden;
  background: var(--canvas);
  position: relative;
}

/* fade hacia el canvas en los extremos — el texto se desvanece bajo los botones */
.hero__strip::before,
.hero__strip::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: clamp(3.5rem, 7%, 6.5rem);
  pointer-events: none;
  z-index: 1;
}
.hero__strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--canvas) 30%, transparent);
}
.hero__strip::after {
  right: 0;
  background: linear-gradient(-90deg, var(--canvas) 30%, transparent);
}

.hero__strip-track {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  animation: marquee 65s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

/* cuando JS toma el control, suprimimos la animación CSS (RAF se encarga) */
.hero__strip.is-js .hero__strip-track {
  animation: none;
}

.hero__strip:hover .hero__strip-track,
.hero__strip:focus-within .hero__strip-track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Controles de navegación del marquee ─────────────────────── */
.hero__strip-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 50%;
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    border-color 0.25s var(--ease),
    color        0.25s var(--ease),
    transform    0.25s var(--ease),
    box-shadow   0.25s var(--ease);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.hero__strip-nav--prev { left: 0.9rem; }
.hero__strip-nav--next { right: 0.9rem; }

.hero__strip-nav svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.hero__strip-nav:hover {
  border-color: var(--crimson);
  color: var(--crimson);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hero__strip-nav:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
  border-color: var(--crimson);
  color: var(--crimson);
}

.hero__strip-nav:active {
  transform: translateY(-50%) scale(0.94);
}

/* sin JS, los botones no sirven — los ocultamos */
.no-js .hero__strip-nav { display: none; }

@media (max-width: 640px) {
  .hero__strip-nav {
    width: 2.2rem;
    height: 2.2rem;
  }
  .hero__strip-nav--prev { left: 0.5rem; }
  .hero__strip-nav--next { right: 0.5rem; }
}

/* ── Enlace de marca en el marquee: solo texto, separador ✦ ── */
.hero__strip-link {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.hero__strip-link:hover { color: var(--crimson); }

.hero__strip-link::before {
  content: "✦";
  margin-right: 2.4rem;
  color: var(--rose-vivid);
  font-style: normal;
  font-size: 0.7em;
  vertical-align: middle;
  display: inline-block;
}

.hero__strip-link:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Section header ───────────────────────────────────────────── */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule-ink);
}

.section-head__num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  display: block;
  margin-bottom: 0.7rem;
}

.section-head__title {
  font-size: var(--step-4);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 14ch;
}

.section-head__title em {
  font-style: italic;
  color: var(--crimson);
}

.section-head__lead {
  max-width: 44ch;
  color: var(--ink-soft);
  margin: 0;
  font-size: var(--step-0);
}

@media (max-width: 700px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head__title { max-width: none; }
}

/* ── Categories grid ──────────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

@media (max-width: 900px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .cat-grid { grid-template-columns: 1fr; } }

.cat-card {
  background: var(--white);
  padding: 1.8rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 14rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--rule-ink);
  border-radius: 4px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}

.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--rose-mist), var(--white));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: -1;
}

.cat-card:hover {
  border-color: var(--crimson);
  transform: translateY(-2px);
}
.cat-card:hover::before { opacity: 1; }
.cat-card:hover .cat-card__num { color: var(--crimson); }
.cat-card:hover .cat-card__icon { color: var(--crimson); }

.cat-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cat-card__num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  color: var(--ink-whisper);
  transition: color 0.4s var(--ease);
}

.cat-card__icon { width: 2.4rem; height: 2.4rem; color: var(--ink-soft); transition: color 0.4s var(--ease); }

.cat-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.0;
  margin: 0;
  letter-spacing: -0.015em;
}

.cat-card__count {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

/* ── Featured / product grid layouts ──────────────────────────── */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem 1.6rem;
}

.featured-grid .product-card:nth-child(1) { grid-column: span 6; }
.featured-grid .product-card:nth-child(2),
.featured-grid .product-card:nth-child(3) { grid-column: span 3; }
.featured-grid .product-card:nth-child(4),
.featured-grid .product-card:nth-child(5),
.featured-grid .product-card:nth-child(6) { grid-column: span 4; }

@media (max-width: 900px) {
  .featured-grid .product-card { grid-column: span 6 !important; }
}
@media (max-width: 600px) {
  .featured-grid .product-card { grid-column: span 12 !important; }
}

/* product card */
.product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--canvas-soft);
  overflow: hidden;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(126, 15, 55, 0.18));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.product-card:hover .product-card__media::after { opacity: 1; }

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.product-card:hover img { transform: scale(1.05); }

.product-card__media--placeholder {
  display: grid;
  place-items: center;
  color: var(--rose-tint);
  background: var(--canvas-soft);
}

.product-card__media--placeholder svg { width: 40%; height: 40%; }

.product-card__compare {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4em 0.85em;
  background: var(--white);
  border: 1px solid var(--rule-ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transform: translateY(-0.4rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.product-card:hover .product-card__compare { opacity: 1; transform: translateY(0); }
.product-card__compare:hover { color: var(--crimson); border-color: var(--crimson); }

body.is-compare-disabled .product-card__compare { display: none; }

.product-card__ref {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 0.4rem;
}

.product-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.05;
  margin: 0 0 0.35rem;
  letter-spacing: -0.015em;
  transition: color 0.3s var(--ease);
}

.product-card:hover .product-card__title { color: var(--crimson); }

.product-card__brand {
  font-size: var(--step--1);
  color: var(--ink-whisper);
}

.product-card__brand em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}

/* ── Brand grid ───────────────────────────────────────────────── */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

@media (max-width: 760px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

.brand-card {
  background: var(--white);
  padding: 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  min-height: 11rem;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule-ink);
  border-radius: 4px;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.brand-card:hover {
  background: var(--rose-mist);
  border-color: var(--crimson);
  transform: translateY(-2px);
}
.brand-card:hover .brand-card__arrow { transform: translate(0.3rem, -0.3rem); color: var(--crimson); }
.brand-card:hover .brand-card__name { color: var(--crimson); }

.brand-card__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
  transition: color 0.3s var(--ease);
}

.brand-card__logo {
  display: block;
  max-width: 88%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto 0;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.78;
  transition: filter 0.45s var(--ease), opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.brand-card--has-logo {
  justify-content: space-between;
  align-items: stretch;
  padding-block: 2.2rem 1.4rem;
}

.brand-card--has-logo .brand-card__country {
  align-self: flex-start;
}

.brand-card:hover .brand-card__logo {
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: scale(1.03);
}

.brand-card__country {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.brand-card__arrow {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--ink-faint);
  transition: transform 0.5s var(--ease), color 0.4s var(--ease);
}

/* ── About strip ──────────────────────────────────────────────── */
.about {
  background: linear-gradient(180deg, var(--rose-mist) 0%, var(--white) 100%);
  padding-block: clamp(5rem, 4rem + 5vw, 9rem);
  position: relative;
  overflow: hidden;
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 5rem);
  align-items: center;
}

@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } }

.about__copy h2 {
  font-size: var(--step-5);
  line-height: 0.95;
  margin: 1.5rem 0 1.5rem;
  letter-spacing: -0.03em;
}

.about__copy h2 em {
  font-style: italic;
  color: var(--crimson);
}

.about__copy p {
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
  max-width: 32rem;
}

.stat {
  background: var(--white);
  padding: 1.4rem 1.4rem;
  border: 1px solid var(--rule-ink);
  border-radius: 4px;
  transition: border-color 0.3s var(--ease);
}

.stat:hover { border-color: var(--crimson); }

.stat__num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--crimson);
}

.stat__lbl {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  margin-top: 0.4rem;
}

.about__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
}

.about__visual svg { width: 90%; height: 90%; }

/* ── Footer (deep crimson — brand signature) ──────────────────── */
.site-footer {
  background: var(--crimson-ink);
  color: var(--white);
  padding: clamp(4.5rem, 3rem + 4vw, 7.5rem) 0 1.8rem;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}

.site-footer a { color: var(--white); transition: color 0.3s var(--ease); }
.site-footer a:hover { color: var(--rose-tint); }

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

@media (max-width: 900px) {
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}

@media (max-width: 540px) {
  .footer__cols { grid-template-columns: 1fr; }
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-tint);
  margin: 0 0 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li + li { margin-top: 0.55rem; }
.footer__col p { color: rgba(255,255,255,0.9); margin: 0 0 0.4rem; }

.footer__brand .display {
  font-size: clamp(1.7rem, 1.1rem + 1.2vw, 2.4rem);
  margin-top: 1rem;
  margin-bottom: 0.8rem;
  letter-spacing: -0.02em;
  font-style: italic;
}

.footer__brand .label {
  color: var(--rose-tint);
}

.footer__brand-logo {
  background: var(--white);
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  display: inline-block;
  max-width: 220px;
}

.footer__brand-logo img { display: block; width: 100%; height: auto; }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2.5rem + 12vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin: 2.8rem 0 0;
  text-align: center;
  color: var(--white);
}

.footer__wordmark em {
  font-style: italic;
  color: var(--rose-vivid);
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  margin-bottom: 2rem;
}

.breadcrumb a:hover { color: var(--crimson); }
.breadcrumb__sep { color: var(--crimson); }

/* ── Archive layout ───────────────────────────────────────────── */
.archive-head {
  padding-top: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(2rem, 2vw, 3rem);
  border-bottom: 1px solid var(--rule-ink);
  background: linear-gradient(180deg, var(--rose-mist) 0%, var(--white) 100%);
}

.archive-head__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
}

@media (max-width: 740px) { .archive-head__row { grid-template-columns: 1fr; } }

.archive-head h1 {
  font-size: var(--step-5);
  line-height: 0.95;
  margin: 0.5rem 0 0;
  letter-spacing: -0.025em;
  max-width: 18ch;
}

.archive-head__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}

.archive-head__lead {
  margin-top: 1.4rem;
  max-width: 60ch;
  color: var(--ink-soft);
}

/* ── Brand plate (cabecera del archivo /marca/<slug>/) ──────── */
.archive-head--marca {
  background: linear-gradient(180deg, var(--canvas-soft) 0%, var(--white) 100%);
  padding-bottom: clamp(2.4rem, 2.4vw, 3.6rem);
}

.brand-plate {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  margin-top: 1.2rem;
}

@media (max-width: 740px) {
  .brand-plate {
    grid-template-columns: minmax(160px, 220px);
    justify-content: center;
    gap: 1.6rem;
    text-align: left;
  }
  .brand-plate__body { grid-column: 1 / -1; }
}

/* tarjeta del logo */
.brand-plate__logo-card {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--white, #fff);
  border: 1px solid var(--rule-ink);
  border-radius: 2px;
  aspect-ratio: 5 / 4;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.02),
    0 18px 40px -28px rgba(80, 10, 30, 0.18);
}

/* sello editorial sobre el borde superior izquierdo */
.brand-plate__tag {
  position: absolute;
  top: -0.7rem;
  left: clamp(0.9rem, 1vw, 1.4rem);
  padding: 0.18rem 0.55rem;
  background: var(--white, #fff);
  border: 1px solid var(--rule-ink);
  font-family: var(--font-mono);
  font-size: var(--step--3, 0.7rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  line-height: 1;
}

/* esquina decorativa interna — un acento, sin ruido */
.brand-plate__logo-card::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  pointer-events: none;
  border-radius: 1px;
}

.brand-plate__logo {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.02));
}

.brand-plate__nologo {
  position: relative;
  z-index: 1;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: var(--step-2);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  padding: 0.4rem;
  line-height: 1.05;
}

/* body */
.brand-plate__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.brand-plate__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.1rem;
}

.brand-plate__country {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.brand-plate__country::before {
  content: "";
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  background: var(--rose-vivid);
  border-radius: 50%;
}

.brand-plate__title {
  font-size: clamp(var(--step-3), 4vw, var(--step-5));
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 18ch;
}

.brand-plate__lead {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  max-width: 58ch;
  line-height: 1.55;
}

.brand-plate__actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-ink);
}

.brand-plate__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}

.brand-plate__web {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.brand-plate__web:hover,
.brand-plate__web:focus-visible {
  color: var(--crimson);
  border-bottom-color: currentColor;
}
.brand-plate__arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.brand-plate__web:hover .brand-plate__arrow {
  transform: translate(2px, -2px);
}

.archive-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  padding-block: clamp(2rem, 1rem + 3vw, 4rem);
}

@media (max-width: 880px) {
  .archive-layout { grid-template-columns: 1fr; }
}

.archive-filters h3 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-ink);
}

.archive-filters ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.archive-filters li { padding: 0.25rem 0; }
.archive-filters a {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--step--1);
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}

.archive-filters a:hover,
.archive-filters .is-current a {
  color: var(--crimson);
}

.archive-filters .count {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-faint);
}

/* ── Árbol jerárquico de categorías (raíz + subcategorías) ──── */
.archive-filters .filter-tree { margin: 0 0 2rem; padding: 0; list-style: none; }
.archive-filters .filter-tree > .filter-cat { padding: 0; }
.archive-filters .filter-tree > .filter-cat + .filter-cat { margin-top: 0; }

.filter-cat__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0;
}

.filter-cat__link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}

.filter-cat__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-cat.is-current > .filter-cat__row .filter-cat__link,
.filter-cat__link:hover {
  color: var(--crimson);
}

.filter-cat.is-current > .filter-cat__row .filter-cat__name::before {
  content: "—";
  margin-right: 0.4em;
  color: var(--rose-vivid);
}

/* botón chevron */
.filter-cat__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.filter-cat__toggle svg {
  width: 0.7rem;
  height: 0.7rem;
  display: block;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-cat__toggle:hover,
.filter-cat__toggle:focus-visible {
  color: var(--crimson);
  background: color-mix(in srgb, var(--crimson) 8%, transparent);
  outline: none;
}

.filter-cat[data-expanded="true"] > .filter-cat__row .filter-cat__toggle svg {
  transform: rotate(180deg);
}

/* contenedor animado de subcategorías — max-height, overflow hidden */
.filter-cat__sub-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-cat[data-expanded="true"] > .filter-cat__sub-wrap {
  max-height: 30rem;
}

.archive-filters .filter-tree .filter-sub {
  margin: 0;
  padding: 0.15rem 0 0.45rem 0.95rem;
  list-style: none;
  position: relative;
}

/* guía vertical editorial */
.filter-sub::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  bottom: 0.55rem;
  left: 0.1rem;
  width: 1px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}

.archive-filters .filter-tree .filter-sub__item { padding: 0; }

.filter-sub__item a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-family: inherit;
  font-style: normal;
  font-size: calc(var(--step--1) * 0.94);
  color: var(--ink-soft);
  letter-spacing: 0.003em;
  padding: 0.22rem 0;
  position: relative;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.filter-sub__item a::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 0.55rem;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}

.filter-sub__item a:hover {
  color: var(--crimson);
  padding-left: 0.15rem;
}
.filter-sub__item a:hover::before {
  background: var(--crimson);
  width: 0.8rem;
}

.filter-sub__item.is-current a {
  color: var(--crimson);
}
.filter-sub__item.is-current a::before {
  background: var(--rose-vivid);
  width: 0.8rem;
}

.filter-cat__link .count,
.filter-sub__item .count { flex: 0 0 auto; }

/* sin JS: todas las subcategorías abiertas, sin chevron animado */
.no-js .filter-cat__sub-wrap { max-height: none; }
.no-js .filter-cat__toggle { display: none; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.8rem 1.8rem;
}

@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .product-grid { grid-template-columns: 1fr; } }

/* ── Single product ───────────────────────────────────────────── */
.product {
  padding-top: clamp(1.2rem, 1vw, 2rem);
  padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
}

.product__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 5rem);
  align-items: start;
}

@media (max-width: 900px) { .product__layout { grid-template-columns: 1fr; } }

.product__media {
  position: sticky;
  top: 6rem;
}

@media (max-width: 900px) { .product__media { position: static; } }

.gallery__main {
  aspect-ratio: 4 / 3;
  background: var(--canvas-soft);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

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

.gallery__main .corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  padding: 0.6rem 0.9rem;
  background: var(--white);
  border-radius: 2px;
}

.gallery__main .corner--tl { top: 0.8rem; left: 0.8rem; }
.gallery__main .corner--br { bottom: 0.8rem; right: 0.8rem; }

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.gallery__thumb {
  aspect-ratio: 1;
  background: var(--canvas-soft);
  border: 1px solid var(--rule-ink);
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.3s var(--ease);
}

.gallery__thumb:hover { border-color: var(--crimson); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--crimson); outline: 1px solid var(--crimson); outline-offset: 1px; }

.product__info .label--crimson { display: block; margin-bottom: 1rem; }

.product__title {
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 1.2rem;
}

.product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}

.product__lead {
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.5;
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
  padding: 1.5rem 0;
  margin: 1.5rem 0 2rem;
}

.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
}

.product__share {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-ink);
}

.product__share a {
  width: 2.3rem;
  height: 2.3rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--rule-ink);
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.product__share a:hover { background: var(--crimson); color: var(--white); border-color: var(--crimson); }

/* tabs */
.tabs {
  margin-top: clamp(3rem, 2rem + 2vw, 5rem);
  border-top: 1px solid var(--rule-ink);
}

.tabs__list {
  display: flex;
  gap: 2.8rem;
  flex-wrap: wrap;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule-ink);
}

.tabs__btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  position: relative;
  transition: color 0.3s var(--ease);
}

.tabs__btn:hover { color: var(--ink-soft); }

.tabs__btn.is-active {
  color: var(--crimson);
  font-style: italic;
}

.tabs__btn.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1.4rem;
  height: 2px;
  background: var(--crimson);
}

.tabs__panel { display: none; padding-block: 2.2rem; }
.tabs__panel.is-active { display: block; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  max-width: 52rem;
}

.spec-table tr { border-bottom: 1px solid var(--rule-ink); }
.spec-table td { padding: 1rem 0; vertical-align: top; font-size: var(--step-0); }
.spec-table td:first-child {
  width: 38%;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}
.spec-table td:last-child { color: var(--ink); }

.doc-list { list-style: none; padding: 0; margin: 0; max-width: 38rem; }
.doc-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule-ink);
}

.doc-list .doc__icon {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--crimson);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--crimson);
  border-radius: 2px;
}

.doc-list .doc__name { font-size: var(--step-0); color: var(--ink); }
.doc-list .doc__sub  { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-whisper); }
.doc-list .doc__action {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  transition: color 0.3s var(--ease);
}
.doc-list .doc__action:hover { color: var(--ink); }

.video-frame {
  aspect-ratio: 16/9;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: var(--white);
  margin-bottom: 1rem;
  border-radius: 4px;
  overflow: hidden;
}

.video-frame iframe, .video-frame video { width: 100%; height: 100%; }

.related {
  padding-top: clamp(3rem, 2rem + 3vw, 6rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 6rem);
  border-top: 1px solid var(--rule-ink);
  background: var(--canvas);
}

/* ── Compare bar ──────────────────────────────────────────────── */
.compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--crimson);
  color: var(--white);
  padding: 1rem var(--gutter);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body:not(.is-compare-disabled) .compare-bar.is-visible { display: flex; }

/* ── Pages ────────────────────────────────────────────────────── */
.page-hero {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-bottom: clamp(2rem, 1rem + 2vw, 4rem);
  border-bottom: 1px solid var(--rule-ink);
  background: linear-gradient(180deg, var(--rose-mist) 0%, var(--white) 100%);
}

.page-hero h1 {
  font-size: var(--step-6);
  line-height: 0.9;
  margin: 0.7rem 0 0;
  letter-spacing: -0.03em;
}

.page-hero h1 em { font-style: italic; color: var(--crimson); }

.page-content {
  padding-block: clamp(2rem, 2vw, 4rem);
  max-width: 66ch;
  margin: 0 auto;
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink-soft);
}

.page-content h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  margin-top: 2.5rem;
  color: var(--ink);
}

.page-content a {
  color: var(--crimson);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ── Search form ──────────────────────────────────────────────── */
.search-form {
  display: flex;
  align-items: center;
  border-bottom: 1.5px solid var(--ink);
  padding: 0.5rem 0;
}

.search-form input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.5rem 0;
  font-size: var(--step-1);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}

.search-form input:focus { outline: 0; }
.search-form input::placeholder { color: var(--ink-faint); }

.search-form button {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination, .nav-links {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 3rem;
}

.pagination a, .pagination span,
.nav-links a, .nav-links span {
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--rule-ink);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
}

.pagination a:hover, .nav-links a:hover { background: var(--crimson); color: var(--white); border-color: var(--crimson); }
.pagination .current, .nav-links .current { background: var(--crimson); color: var(--white); border-color: var(--crimson); }

/* ── Utilities ────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.fade-up {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.fade-up.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   ABOUT PAGE · documentary-editorial
   "Crónica de una familia óptica"
   ═════════════════════════════════════════════════════════════════ */

.about-page { background: var(--white); }
.about-page .page-hero { display: none; } /* hide generic page hero, we have our own */

/* ── Hero ─────────────────────────────────────────────────────── */
.about-hero {
  position: relative;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding-bottom: clamp(5rem, 4rem + 4vw, 9rem);
  /* overflow:hidden eliminado · clipa los ascendentes italic del '1961' */
  background:
    radial-gradient(ellipse 80% 50% at 80% 0%, var(--rose-glow), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, var(--crimson-glow), transparent 60%),
    var(--white);
  /* el grain interno ya tiene position:absolute inset:0 y se mantiene contenido */
  isolation: isolate;
}

/* el grain era el motivo real para overflow:hidden — lo contenemos al
   sub-elemento que SÍ debería estar acotado */
.about-hero__grain {
  overflow: hidden;
  clip-path: inset(0);
}

.about-hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0.12 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.about-hero__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  margin-top: 1.5rem;
  margin-bottom: 4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-ink);
}

@media (max-width: 700px) {
  .about-hero__meta { flex-direction: column; gap: 0.4rem; }
}

.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 5rem);
  align-items: center;
}

@media (max-width: 900px) {
  .about-hero__grid { grid-template-columns: 1fr; gap: 1rem; }
}

.about-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-hero__year {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  line-height: 0.82;
  text-align: right;
  /* nudge hacia dentro: el italic del '1' final no toca el borde derecho */
  margin-right: clamp(2rem, 4vw, 5rem);
  padding-right: 0.5rem;
  min-width: 0;
  overflow: visible;
}

@media (max-width: 900px) {
  .about-hero__year {
    align-items: flex-start;
    text-align: left;
    margin-top: 1rem;
    margin-right: 0;
    padding-right: 0;
  }
}

.about-hero__year-prefix {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.about-hero__year-num {
  font-family: var(--font-display);
  /* cap reducido para que no se desborde en pantallas medianas */
  font-size: clamp(4rem, 2rem + 8.5vw, 10rem);
  /* line-height 1.0 contiene los ascendentes italic íntegros (antes 0.85
     cortaba la cabeza/serif del '1' italic en Instrument Serif) */
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-feature-settings: "lnum";
  display: inline-block;
  /* respiración para el slant italic en ambos extremos */
  padding: 0.06em 0.1em 0 0.04em;
  overflow: visible;
}

.about-hero__year-num em {
  font-style: italic;
  background: linear-gradient(180deg, var(--crimson) 0%, var(--rose-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
}

.about-hero__title em {
  font-style: italic;
  color: var(--crimson);
}

.about-hero__sub {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 50ch;
}

.about-hero__scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.about-hero__scroll-cue svg {
  animation: scrollCue 2.2s ease-in-out infinite;
}

@keyframes scrollCue {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ── Chapter heads ────────────────────────────────────────────── */
.about-chapter {
  padding-block: clamp(5rem, 4rem + 4vw, 9rem);
  position: relative;
}

.about-chapter--origin { background: var(--white); }
.about-chapter--philosophy {
  background: var(--canvas);
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
}

.about-chapter__head {
  text-align: center;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.about-chapter__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 1.2rem;
}

.about-chapter__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.8rem + 4vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}

.about-chapter__title em {
  font-style: italic;
  color: var(--crimson);
}

/* ── Origin grid ──────────────────────────────────────────────── */
.about-origin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 5rem);
  align-items: center;
}

@media (max-width: 900px) {
  .about-origin__grid { grid-template-columns: 1fr; }
}

.about-origin__media {
  position: relative;
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  transition: transform 0.1s linear;
}

.about-figure {
  margin: 0;
  position: relative;
  background: var(--canvas);
  padding: 1.2rem;
  border: 1px solid var(--rule-ink);
}

.about-figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.95);
  transition: filter 0.8s var(--ease);
}

.about-figure:hover img {
  filter: saturate(1.05);
}

.about-figure__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 0.9rem;
}

.about-figure figcaption {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--ink-whisper);
  line-height: 1.4;
}

.about-origin__copy {
  max-width: 38rem;
}

.about-origin__years {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  color: var(--crimson);
  margin-bottom: 2rem;
  line-height: 1;
}

.about-origin__years-bar {
  width: 4rem;
  height: 1px;
  background: var(--crimson);
}

.about-origin__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.6rem;
}

.about-origin__copy .dropcap {
  font-family: var(--font-display);
  font-size: 4em;
  line-height: 0.78;
  float: left;
  margin: 0.05em 0.12em 0 -0.04em;
  color: var(--crimson);
  font-style: italic;
}

.about-origin__copy p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
}

.about-origin__copy p + p { margin-top: 1.1rem; }

.about-origin__copy strong {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Pull quote ───────────────────────────────────────────────── */
.about-quote {
  padding-block: clamp(5rem, 3rem + 5vw, 9rem);
  background: var(--white);
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-quote::before,
.about-quote::after {
  content: "";
  position: absolute;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--rose-glow), transparent 70%);
  pointer-events: none;
}

.about-quote::before { top: -3rem; left: -3rem; }
.about-quote::after  { bottom: -3rem; right: -3rem; }

.about-quote__text {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 4vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 20ch;
  color: var(--ink);
  position: relative;
}

.about-quote__text em {
  font-style: italic;
  color: var(--crimson);
}

.about-quote__mark {
  font-family: var(--font-display);
  color: var(--rose-vivid);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 0.05em;
}

.about-quote__mark--end {
  margin-right: 0;
  margin-left: 0.05em;
}

.about-quote__attr {
  margin: 2.5rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

/* ── Philosophy ───────────────────────────────────────────────── */
.about-philosophy {
  max-width: 62ch;
  margin: 0 auto;
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink-soft);
}

.about-philosophy p {
  margin-bottom: 1.4rem;
}

.about-philosophy p + p { margin-top: 0; }

.about-philosophy em {
  font-style: italic;
  color: var(--crimson);
  font-family: var(--font-display);
  font-size: 1.1em;
  letter-spacing: -0.01em;
}

.about-philosophy strong {
  color: var(--ink);
  font-weight: 500;
}

/* ── Full-bleed stand · constellation of brands ───────────────── */
.about-stand {
  position: relative;
  min-height: clamp(36rem, 28rem + 30vw, 58rem);
  overflow: hidden;
  background: var(--ink);
}

.about-stand__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.about-stand__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: kenBurns 28s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}

.about-stand__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(126, 15, 55, 0.65) 0%, rgba(26, 17, 23, 0.78) 60%, rgba(11, 5, 13, 0.85) 100%);
}

.about-stand__overlay {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 3rem + 5vw, 8rem);
  color: var(--white);
}

.about-stand__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 1rem 0 2.5rem;
  max-width: 22ch;
}

.about-stand__title em {
  font-style: italic;
  color: var(--rose-tint);
}

.about-brands {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 900px) { .about-brands { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .about-brands { grid-template-columns: 1fr; } }

.about-brands__item {
  background: transparent;
  backdrop-filter: blur(2px);
  transition: background 0.4s var(--ease);
}

.about-brands__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.about-brands__item a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem 1.4rem;
  text-decoration: none;
  color: var(--white);
  height: 100%;
  transition: color 0.3s var(--ease);
}

.about-brands__item a:hover { color: var(--rose-tint); }

.about-brands__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.015em;
  font-style: italic;
}

.about-brands__pill {
  background: var(--white);
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  width: 100%;
  max-width: 12rem;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  box-shadow: 0 2px 8px rgba(11, 5, 13, 0.25);
}

.about-brands__pill img {
  display: block;
  max-width: 100%;
  max-height: 2.4rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.2);
  transition: filter 0.45s var(--ease);
}

.about-brands__item--has-logo a {
  gap: 0.8rem;
}

.about-brands__item:hover .about-brands__pill {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 5, 13, 0.4);
}

.about-brands__item:hover .about-brands__pill img {
  filter: grayscale(0);
}

.about-brands__country {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ── CTA ──────────────────────────────────────────────────────── */
.about-cta {
  padding-block: clamp(5rem, 4rem + 4vw, 8rem);
  background:
    radial-gradient(ellipse 50% 100% at 50% 0%, var(--rose-glow), transparent 60%),
    var(--white);
  text-align: center;
}

.about-cta__inner { max-width: 38rem; margin: 0 auto; }

.about-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0 0 1.2rem;
}

.about-cta__title em {
  font-style: italic;
  color: var(--crimson);
}

.about-cta__sub {
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.5;
  margin: 0 0 2.4rem;
}

.about-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Reduced motion overrides ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .about-stand__img,
  .about-hero__scroll-cue svg { animation: none !important; }
  .about-origin__media { transform: none !important; }
}

/* ═════════════════════════════════════════════════════════════════
   SEARCH OVERLAY · buscador instantáneo
   ═════════════════════════════════════════════════════════════════ */

html.has-search-open { overflow: hidden; }

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.search-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}

.search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 17, 23, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.search-overlay__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--white);
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--rule-ink);
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
  max-height: 100vh;
  overflow-y: auto;
}

.search-overlay.is-open .search-overlay__inner {
  transform: translateY(0);
  opacity: 1;
}

.search-overlay__form {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding: 0.4rem 0;
}

.search-overlay__icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--crimson);
}

.search-overlay__icon svg { width: 100%; height: 100%; }

.search-overlay__form input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.6rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  min-width: 0;
}

.search-overlay__form input:focus { outline: 0; }
.search-overlay__form input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.search-overlay__close {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--rule-ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.search-overlay__close svg { width: 1rem; height: 1rem; }
.search-overlay__close:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.search-overlay__hint {
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.search-overlay__results {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.6rem;
}

.search-result {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--canvas);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.search-result:hover {
  background: var(--rose-mist);
  border-color: var(--crimson);
  transform: translateX(2px);
}

.search-result__thumb {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--white);
  border: 1px solid var(--rule-ink);
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.search-result__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result__placeholder {
  font-family: var(--font-mono);
  color: var(--rose-tint);
  font-size: 1.4rem;
}

.search-result__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.search-result__ref {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
}

.search-result__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.1;
  color: var(--ink);
}

.search-result__meta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--ink-whisper);
}

.search-result__arrow {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--ink-faint);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.search-result:hover .search-result__arrow {
  color: var(--crimson);
  transform: translateX(3px);
}

.search-overlay__footer {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.search-overlay__footer kbd {
  font-family: var(--font-mono);
  background: var(--canvas);
  border: 1px solid var(--rule-ink);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  font-size: 0.95em;
  color: var(--ink);
}

@media (max-width: 600px) {
  .search-result { grid-template-columns: 3.5rem 1fr auto; gap: 0.8rem; }
  .search-result__thumb { width: 3.5rem; height: 3.5rem; }
  .search-overlay__form input { font-size: 1.4rem; }
}

/* ═════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═════════════════════════════════════════════════════════════════ */
.contact {
  padding-block: clamp(3rem, 2rem + 3vw, 6rem);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 4rem);
  align-items: start;
}

@media (max-width: 880px) { .contact__grid { grid-template-columns: 1fr; } }

/* form */
.contact-form {
  background: var(--canvas);
  border: 1px solid var(--rule-ink);
  border-radius: 6px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.contact-form__product {
  padding: 1rem 1.2rem;
  background: var(--rose-mist);
  border-left: 3px solid var(--crimson);
  border-radius: 3px;
}
.contact-form__product .label { display: block; margin-bottom: 0.4rem; }
.contact-form__product p { margin: 0; font-size: var(--step-0); }
.contact-form__product a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.contact-form__product a:hover { color: var(--crimson); }
.contact-form__ref {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--ink-whisper);
  margin-left: 0.6rem;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } }

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.contact-form__label em {
  color: var(--crimson);
  font-style: normal;
  margin-left: 0.15em;
}

.contact-form__label small {
  font-family: var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-faint);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule-ink);
  border-radius: 3px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 0;
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px var(--rose-glow);
}

.contact-form input.is-invalid,
.contact-form textarea.is-invalid {
  border-color: var(--crimson);
  background: #FFF6FA;
}

.contact-form textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form__error {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--crimson);
  min-height: 1em;
}

.contact-form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 0.4rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.contact-form__consent input[type="checkbox"] {
  margin-top: 0.3rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--crimson);
}

.contact-form__consent a {
  color: var(--crimson);
  border-bottom: 1px solid currentColor;
}

.contact-form__consent .contact-form__error { grid-column: 2; }

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.contact-form__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.contact-form button[data-submit]:disabled {
  opacity: 0.6;
  cursor: wait;
}

.contact-form__feedback {
  min-height: 0;
  transition: min-height 0.3s var(--ease);
}

.contact-form__feedback.is-success {
  padding: 1rem 1.2rem;
  background: var(--rose-mist);
  border-left: 3px solid var(--crimson);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.4;
  min-height: 3rem;
}

.contact-form__feedback.is-error {
  padding: 1rem 1.2rem;
  background: #FCE4E4;
  border-left: 3px solid var(--crimson);
  border-radius: 3px;
  color: var(--crimson-ink);
  font-size: var(--step-0);
  min-height: 3rem;
}

/* info aside */
.contact-info {
  position: sticky;
  top: 6rem;
}

@media (max-width: 880px) { .contact-info { position: static; } }

.contact-info__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 2rem;
}

.contact-info__title em { font-style: italic; color: var(--crimson); }

.contact-info__block {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--rule-ink);
}

.contact-info__block:last-child { border-bottom: 0; }

.contact-info__block .label { display: block; margin-bottom: 0.5rem; }

.contact-info__block p {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.5;
}

.contact-info__block a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.contact-info__block a:hover {
  color: var(--crimson);
  border-bottom-color: currentColor;
}

/* ═════════════════════════════════════════════════════════════════
   BRANDS PAGE · Editorial brand atlas
   ═════════════════════════════════════════════════════════════════ */

.brands-page .page-hero { display: none; }

.brands-hero {
  padding-top: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  background: linear-gradient(180deg, var(--rose-mist) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--rule-ink);
}

.brands-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 5rem);
  align-items: end;
  margin-block: 1.5rem 3rem;
}

@media (max-width: 880px) { .brands-hero__grid { grid-template-columns: 1fr; } }

.brands-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 4.5vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0.8rem 0 0;
}

.brands-hero__title em { font-style: italic; color: var(--crimson); }

.brands-hero__lead {
  max-width: 38ch;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-soft);
}

.brands-hero__lead strong { color: var(--ink); font-weight: 500; }

.brands-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule-ink);
  border: 1px solid var(--rule-ink);
  border-radius: 4px;
  overflow: hidden;
}

@media (max-width: 700px) { .brands-stats { grid-template-columns: repeat(2, 1fr); } }

.brands-stats li {
  background: var(--white);
  padding: 1.4rem 1.4rem;
  text-align: left;
}

.brands-stats__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3.2rem);
  line-height: 1;
  color: var(--crimson);
  letter-spacing: -0.025em;
}

.brands-stats__lbl {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

/* ── Brand Index ──────────────────────────────────────────── */
.brands-index {
  padding-block: clamp(3rem, 2rem + 3vw, 6rem);
}

.brand-row {
  padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0;
  border-bottom: 1px solid var(--rule-ink);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transition: background 0.4s var(--ease), padding-inline 0.4s var(--ease);
  margin-inline: calc(-1 * clamp(0.5rem, 1vw, 1.5rem));
  padding-inline: clamp(0.5rem, 1vw, 1.5rem);
  border-radius: 4px;
}

.brand-row:first-child { padding-top: 0; }
.brand-row:last-child  { border-bottom: 0; padding-bottom: 0; }

.brand-row:hover {
  background: var(--rose-mist);
}

.brand-row__head {
  display: grid;
  grid-template-columns: auto minmax(140px, 200px) 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
}

@media (max-width: 880px) {
  .brand-row__head {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num   logo"
      "title title"
      "meta  meta";
    gap: 1rem;
  }
  .brand-row__num   { grid-area: num; }
  .brand-row__logo  { grid-area: logo; justify-self: end; }
  .brand-row__title { grid-area: title; }
  .brand-row__meta  { grid-area: meta; flex-direction: row; flex-wrap: wrap; }
}

.brand-row__num {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.7rem + 0.8vw, 1.3rem);
  letter-spacing: 0.14em;
  color: var(--crimson);
  align-self: start;
  padding-top: 0.4em;
}

.brand-row__logo {
  background: var(--white);
  border: 1px solid var(--rule-ink);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.brand-row:hover .brand-row__logo {
  border-color: var(--crimson);
  box-shadow: 0 4px 14px rgba(168, 23, 78, 0.08);
}

.brand-row__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: filter 0.4s var(--ease);
  filter: grayscale(0.1);
}

.brand-row:hover .brand-row__logo img { filter: grayscale(0); }

.brand-row__nologo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink);
}

.brand-row__title h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.brand-row__title a {
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.brand-row:hover .brand-row__title a,
.brand-row__title a:hover {
  color: var(--crimson);
}

.brand-row__country {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.brand-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  text-align: right;
}

.brand-row__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.brand-row__count strong {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6em;
  color: var(--crimson);
  font-weight: 400;
}

.brand-row__cta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1em;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.brand-row__cta:hover,
.brand-row:hover .brand-row__cta {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
}

.brand-row__cta svg { width: 0.9em; height: 0.9em; }

.brand-row__web {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

.brand-row__web:hover { color: var(--crimson); }

/* ── Productos por marca ────────────────────────────────── */
.brand-row__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 600px) { .brand-row__products { grid-template-columns: 1fr 1fr; } }

.brand-row__product {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--ink);
  position: relative;
}

.brand-row__product-media {
  aspect-ratio: 4 / 3;
  background: var(--white);
  border: 1px solid var(--rule-ink);
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}

.brand-row__product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.brand-row__product:hover .brand-row__product-media {
  border-color: var(--crimson);
  transform: translateY(-2px);
}

.brand-row__product:hover .brand-row__product-media img {
  transform: scale(1.04);
}

.brand-row__product-placeholder {
  font-family: var(--font-mono);
  font-size: 2rem;
  color: var(--rose-tint);
}

.brand-row__product-ref {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
}

.brand-row__product-title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.2;
  color: var(--ink);
}

.brand-row__product:hover .brand-row__product-title { color: var(--crimson); }

.brand-row__empty {
  padding: 1.2rem;
  background: var(--canvas);
  border-left: 3px solid var(--rule-strong);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0;
}

.brand-row__empty a {
  color: var(--crimson);
  border-bottom: 1px solid currentColor;
}

/* ── CTA bottom ─────────────────────────────────────────── */
.brands-cta {
  background: var(--crimson-ink);
  color: var(--white);
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
  text-align: center;
}

.brands-cta__inner { max-width: 48rem; margin: 0 auto; }

.brands-cta .label--crimson { color: var(--rose-tint); }

.brands-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 1rem 0 1.5rem;
}

.brands-cta__title em {
  font-style: italic;
  color: var(--rose-tint);
}

.brands-cta__sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--step-1);
  line-height: 1.55;
  margin: 0 auto 2.5rem;
  max-width: 36rem;
}

.brands-cta__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.brands-cta .btn {
  --bg: var(--white);
  --fg: var(--crimson-ink);
  --br: var(--white);
}
.brands-cta .btn:hover { --bg: var(--rose-tint); --fg: var(--crimson-ink); --br: var(--rose-tint); }

.brands-cta .btn--ghost {
  --bg: transparent;
  --fg: var(--white);
  --br: rgba(255, 255, 255, 0.4);
}
.brands-cta .btn--ghost:hover { --bg: var(--white); --fg: var(--crimson-ink); --br: var(--white); }

/* ═════════════════════════════════════════════════════════════════
   SITEMAP PAGE · Library Card Catalog
   Tabla de contenidos editorial con dotted leaders
   ═════════════════════════════════════════════════════════════════ */

.sitemap-page .page-hero { display: none; }

.sitemap-hero {
  padding-top: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  background: linear-gradient(180deg, var(--rose-mist) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--rule-ink);
}

.sitemap-hero__top {
  max-width: 38rem;
  margin-bottom: 3rem;
}

.sitemap-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.8rem + 5vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0.8rem 0 1.5rem;
}

.sitemap-hero__title em { font-style: italic; color: var(--crimson); }

.sitemap-hero__lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
}

.sitemap-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
}

@media (max-width: 700px) { .sitemap-stats { grid-template-columns: repeat(2, 1fr); } }

.sitemap-stats li {
  padding: 1.4rem 1rem 1.4rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  border-right: 1px solid var(--rule-ink);
}

.sitemap-stats li:last-child { border-right: 0; }
@media (max-width: 700px) {
  .sitemap-stats li:nth-child(2) { border-right: 0; }
}

.sitemap-stats li:not(:first-child) { padding-left: 1.4rem; }

.sitemap-stats__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.4rem);
  font-style: italic;
  color: var(--crimson);
  line-height: 1;
  letter-spacing: -0.025em;
}

.sitemap-stats__lbl {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

/* ── Chapter heads ─────────────────────────────────────── */
.sitemap-chapter {
  padding-block: clamp(3rem, 2rem + 3vw, 5.5rem);
}

.sitemap-chapter--alt { background: var(--canvas); }

.sitemap-chapter__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--ink);
}

.sitemap-chapter__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
}

.sitemap-chapter__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.018em;
  margin: 0;
}

.sitemap-chapter__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}

/* ── Table of Contents (dotted leaders) ────────────────── */
.toc {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc--two-col {
  columns: 2;
  column-gap: 4rem;
}

@media (max-width: 700px) { .toc--two-col { columns: 1; } }

.toc__item {
  break-inside: avoid;
  margin-bottom: 0.4rem;
}

.toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.toc__link:hover { color: var(--crimson); }

.toc__link:hover .toc__leader { opacity: 1; }
.toc__link:hover .toc__name::before { width: 1.4rem; opacity: 1; }

.toc__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.45rem);
  letter-spacing: -0.012em;
  position: relative;
  padding-left: 0;
  transition: padding-left 0.35s var(--ease);
  flex-shrink: 0;
  max-width: 70%;
}

.toc__name::before {
  content: "";
  position: absolute;
  left: -0.2rem;
  top: 50%;
  height: 1px;
  width: 0;
  background: var(--crimson);
  opacity: 0;
  transition: width 0.35s var(--ease), opacity 0.35s var(--ease);
}

.toc__link:hover .toc__name { padding-left: 1.7rem; }

.toc__sub {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  margin-left: 0.5rem;
}

.toc__leader {
  flex: 1;
  height: 0;
  border-bottom: 1px dotted var(--rule-strong);
  position: relative;
  top: -0.25em;
  margin: 0 0.4rem;
  opacity: 0.65;
  transition: opacity 0.25s var(--ease);
}

.toc__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}

.toc__link--small .toc__name {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  font-style: normal;
}

.toc__link--small .toc__name::before { display: none; }
.toc__link--small:hover .toc__name { padding-left: 0; }

/* ── Catalog grid (cap. 02) ─────────────────────────────── */
.toc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 4rem;
}

@media (max-width: 760px) { .toc-grid { grid-template-columns: 1fr; gap: 2rem; } }

.toc-block {
  break-inside: avoid;
}

.toc-block__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.toc-block__title:hover {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
}

.toc-block__count {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}

.toc-children {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
  border-left: 1px solid var(--rule-ink);
}

.toc-children li { margin-bottom: 0; }

.toc-children .toc__link { padding-block: 0.3rem; }

/* ── Colofón ───────────────────────────────────────────── */
.sitemap-colophon {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--crimson-ink);
  color: var(--white);
}

.sitemap-colophon__inner { max-width: 48rem; }

.sitemap-colophon .label { color: var(--rose-tint); }

.sitemap-colophon__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--white);
  margin: 1rem 0 0;
}

.sitemap-colophon__text strong {
  color: var(--rose-tint);
  font-style: normal;
  font-weight: 400;
}

.sitemap-colophon .btn--ghost {
  --bg: transparent;
  --fg: var(--white);
  --br: rgba(255, 255, 255, 0.4);
}

.sitemap-colophon .btn--ghost:hover { --bg: var(--white); --fg: var(--crimson-ink); --br: var(--white); }
.sitemap-colophon .btn--ghost svg { transform: rotate(180deg); }

/* ═════════════════════════════════════════════════════════════════
   BACK TO TOP · marca óptica de retorno
   ═════════════════════════════════════════════════════════════════ */
.to-top {
  position: fixed;
  z-index: 35;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: var(--crimson);
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.6rem) scale(0.96);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--crimson);
  padding: 0.45em 0.9em 0.45em 1em;
  border-radius: 999px 0 0 999px;
  transform: translateX(0.8rem);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  box-shadow: 0 4px 14px rgba(168, 23, 78, 0.18);
}

.to-top__mark {
  width: 3.2rem;
  height: 3.2rem;
  background: var(--white);
  border: 1px solid var(--crimson);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--crimson);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(168, 23, 78, 0.16);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.to-top__mark svg {
  width: 1.6rem;
  height: 1.6rem;
}

.to-top__mark .to-top__axis,
.to-top__mark .to-top__chev {
  transition: transform 0.5s var(--ease-out), opacity 0.3s var(--ease);
  transform-origin: 20px 18px;
}

/* pupila late suavemente cuando el botón está visible */
.to-top.is-visible .to-top__pupil {
  animation: toTopPupil 4s ease-in-out infinite;
}

@keyframes toTopPupil {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.7); transform-origin: 20px 26px; }
}

/* hover · ojo y label revelados */
.to-top:hover .to-top__mark,
.to-top:focus-visible .to-top__mark {
  background: var(--crimson);
  color: var(--white);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 26px rgba(168, 23, 78, 0.28);
}

.to-top:hover .to-top__label,
.to-top:focus-visible .to-top__label {
  opacity: 1;
  transform: translateX(0);
}

/* el chevron y eje saltan hacia arriba al hacer hover */
.to-top:hover .to-top__chev,
.to-top:hover .to-top__axis {
  animation: toTopJump 0.7s var(--ease-out);
}

@keyframes toTopJump {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  60%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* foco accesible */
.to-top:focus-visible {
  outline: 0;
}
.to-top:focus-visible .to-top__mark {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .to-top__mark { width: 2.8rem; height: 2.8rem; }
  .to-top__mark svg { width: 1.4rem; height: 1.4rem; }
  .to-top__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top__mark, .to-top__label,
  .to-top__pupil, .to-top__axis, .to-top__chev {
    animation: none !important;
    transition: opacity 0.01ms !important;
  }
}