/* ================================================
   LA PASIEGA · CORPORATE B2B 2026 — MOCKUP V1
   Design tokens, editorial typography, premium feel
   ================================================ */

:root {
  /* Brand */
  --ink:          #14110D;
  --ink-soft:     #3A332A;
  --paper:        #FAF6E9;   /* cream paper (de mockup-yellow) */
  --paper-soft:   #FDFAF1;
  --bone:         #E8E0CB;
  --line:         rgba(20,17,13,.10);
  --line-strong:  rgba(20,17,13,.22);
  --saffron:      #F5C518;   /* signature yellow */
  --saffron-deep: #E5B210;
  --olive:        #2A2A1F;
  --carmin:       #C90035;   /* rojo de la mascota La Pasiega */
  --carmin-deep:  #9B0028;

  /* Type — Instrument family (de mockup-yellow, validado por Ana) */
  --display: "Instrument Serif", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:    "Instrument Sans", "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "Instrument Sans", ui-monospace, monospace;

  /* Scale */
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 4px;

  /* Motion */
  --easing: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* iOS Safari elastic overscroll: el html bg se muestra abajo del footer cuando
     el usuario hace pull-up. Saffron matchea el footer → continuidad visual.
     Top overscroll lo cubre body bg (paper) que es lo que está al top de la página. */
  background: var(--saffron);
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--saffron); color: var(--ink); }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- type system ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--saffron);
  box-shadow: 0 0 0 4px rgba(245,197,24,.18);
}

.display {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(48px, 8.5vw, 132px);
  line-height: 0.92;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.display em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  position: relative;
}
.display em span {
  background: linear-gradient(transparent 62%, var(--saffron) 62%, var(--saffron) 92%, transparent 92%);
  padding: 0 .04em;
}

.lede {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 58ch;
  font-variation-settings: "opsz" 36;
}

.section__head {
  max-width: 1180px;
  margin: 0 auto clamp(40px, 5vw, 72px) 0;
}
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .section__sub { margin-inline: auto; }
.section__head--center .section__label { justify-content: center; }
.section__head--center .section__title {
  margin-inline: auto;
  text-align: center;
  max-width: min(22ch, 100%);
}

/* Ghost numeral above section headers — removed (it was another "big number"
   that ate vertical space and competed with section titles per Yanis' rule
   "quitemos todos los números grandes para ahorrar espacio y protagonismo
   al encabezado de cada sección"). The inline `.num` in `.section__label`
   keeps the section numbering small + editorial. */
.section__head[data-num]::before { display: none; }

.section__label {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ink-soft);
  text-transform: uppercase;
  position: relative;
  padding-top: 18px;
  margin-bottom: clamp(36px, 4vw, 56px);
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.section__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--ink);
}
.section__head--center .section__label::before { left: 50%; transform: translateX(-50%); }

.section__label .num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}
.section__label .lbl::before {
  content: "·";
  opacity: .35;
  margin-right: 10px;
  letter-spacing: 0;
}

.section__title {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(44px, 6.8vw, 104px);
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 22ch;
  font-variation-settings: "opsz" 96, "SOFT" 40;
}
.section__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 90, "WONK" 1;
}
.section__title em span {
  background: linear-gradient(transparent 62%, var(--saffron) 62%, var(--saffron) 92%, transparent 92%);
  padding: 0 .04em;
}
.section__title + .section__sub,
.section__title + .section__lede {
  margin-top: clamp(20px, 2.2vw, 32px);
}
.section__title--md { font-size: clamp(34px, 4.8vw, 68px); }

.section__sub {
  font-family: var(--display);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 22px;
  font-variation-settings: "opsz" 36;
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .35s var(--easing), background .25s var(--easing), color .25s var(--easing), box-shadow .25s var(--easing);
  white-space: nowrap;
  min-height: 44px;
}
.btn--lg { padding: 18px 28px; font-size: 15px; }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: var(--saffron); color: var(--ink); transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn--invert {
  background: var(--saffron);
  color: var(--ink);
}
.btn--invert:hover { background: var(--paper); color: var(--ink); transform: translateY(-2px); }

.link-ghost {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 0;
}
.link-ghost::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: currentColor; transform-origin: right;
  transition: transform .4s var(--easing);
}
.link-ghost:hover::after { transform: scaleX(0); transform-origin: left; }
.link-ghost--light { color: var(--paper); }

/* ---------- top ribbon ---------- */
.ribbon {
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .02em;
}
.ribbon__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.ribbon__motto { opacity: .82; font-family: var(--display); font-style: italic; font-size: 13px; }
.ribbon__meta { display: flex; align-items: center; gap: 14px; }
.ribbon__link { transition: color .2s; }
.ribbon__link:hover { color: var(--saffron); }
.dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .35;
}
.lang { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid rgba(250,246,233,.18); border-radius: 999px; }
.lang__btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--paper);
  opacity: .55;
  border-radius: 999px;
  transition: all .2s;
  min-height: 0;
}
.lang__btn.is-active { background: var(--saffron); color: var(--ink); opacity: 1; }

@media (max-width: 760px) {
  .ribbon__motto { display: none; }
  .ribbon__inner { justify-content: flex-end; }
}

/* ---------- main nav ---------- */
.nav {
  position: sticky; top: 0;
  background: rgba(250,246,233,.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  z-index: 50;
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.nav__brand { display: flex; align-items: center; }
.nav__logo {
  height: 44px; width: auto;
  transition: transform .4s var(--easing);
}
.nav__brand:hover .nav__logo { transform: rotate(-2deg); }
.nav__links {
  display: flex; gap: 28px;
  justify-content: center;
  font-size: 14px;
  font-weight: 450;
}
.nav__links a {
  position: relative;
  padding: 6px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--easing);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 18px; }

@media (max-width: 980px) {
  .nav__links { display: none; }
  /* Brand izquierda, button derecha — el 1fr empuja el cta al borde */
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__cta { justify-self: end; }
}

/* ---------- HERO ---------- */
.hero {
  background: var(--saffron);
  padding: clamp(60px, 9vw, 120px) var(--gutter) clamp(60px, 7vw, 100px);
  position: relative;
}
.hero__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas:
    "copy   visual"
    "ctas   visual";
  grid-template-rows: auto auto;
  column-gap: clamp(40px, 6vw, 100px);
  row-gap: 0;
  align-items: center;
}
.hero__copy { grid-area: copy; position: relative; align-self: end; }
.hero__visual { grid-area: visual; }
.hero__ctas { grid-area: ctas; align-self: start; }
.hero__copy .eyebrow { margin-bottom: 24px; }
.hero__copy .lede { margin-top: 32px; }
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 40px;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero__stats li {
  display: flex; flex-direction: column; gap: 6px;
}
.hero__stats strong {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96;
}
.hero__stats span {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* hero visual / paper
   Editorial polaroid feel: thin saffron frame + premium food photo dominates.
   Sello + mascot are heritage cues, sit OFF the photo so they don't compete.
*/
.hero__visual { position: relative; height: 100%; min-height: 520px; }
.hero__paper {
  position: relative;
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 6px;
  box-shadow:
    0 30px 60px -30px rgba(14,14,12,.32),
    0 1px 0 rgba(14,14,12,.06);
}
.hero__paper::before {
  /* paper grain via gradient */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.06), transparent 50%);
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}
/* Photo dominates: ~92% of the card with a thin uniform saffron border,
   subtle inner ring lifts the photo from the yellow frame. */
.hero__photo {
  position: absolute;
  inset: clamp(14px, 1.6vw, 22px);
  background: url("assets/hero/hero-v7-191604.png") center/cover no-repeat;
  border-radius: 3px;
  box-shadow:
    0 18px 36px -22px rgba(14, 14, 12, 0.45),
    inset 0 0 0 1px rgba(14, 14, 12, 0.10);
  z-index: 1;
}
.hero__visual, .hero__paper { overflow: visible !important; }
.hero__seal, .hero__tape { z-index: 4; }

/* Sello: small editorial stamp floating at top-right corner of the paper,
   with a paper halo so it reads against any background. */
.hero__seal {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 58%, rgba(246, 241, 228, 0) 72%);
  animation: spin 60s linear infinite;
  z-index: 5;
}
.hero__seal img {
  width: 78px;
  height: auto;
  display: block;
}
@keyframes spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

/* Mascot: smaller and pushed further off the bottom-right corner so she
   sits in the negative space NEXT to the photo, never on top of product. */
.hero__mascot {
  position: absolute;
  bottom: -8%;
  right: -12%;
  width: 22%;
  max-width: 132px;
  filter: drop-shadow(0 6px 0 rgba(14,14,12,.04));
  animation: float 7s ease-in-out infinite;
  z-index: 3;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Tape removed in v7-motion-improved: redundant with sello (DESDE 1988)
   and the brand identity already lives in nav + sello. Kept rule for
   defensive fallback if any old HTML still has .hero__tape. */
.hero__tape { display: none; }

@media (max-width: 980px) {
  /* Mobile: copy (text) → visual (photo) → ctas (buttons) — pedido del cliente */
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "ctas";
    row-gap: clamp(24px, 4vw, 40px);
  }
  .hero__copy, .hero__ctas { align-self: stretch; }
  .hero__visual { min-height: 380px; margin-top: 0; }
  .hero__ctas { margin-top: 0; }
  /* Defensive: sello + mascot ya removidos del hero pero por si vuelven */
  .hero__seal { top: -14px; right: -14px; width: 80px; height: 80px; }
  .hero__seal img { width: 64px; }
  .hero__mascot { bottom: -6%; right: -6%; max-width: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mascot, .hero__seal { animation: none; }
}

/* ---------- MARQUEE ---------- */
.marquee {
  background: var(--ink);
  color: var(--paper);
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
.marquee__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  opacity: .6;
  margin-bottom: 18px;
  padding-inline: var(--gutter);
}
.marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__row {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-shrink: 0;
}
.mq {
  font-family: var(--sans);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--paper);
  opacity: .85;
}
.mq--script {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
  font-size: clamp(28px, 3vw, 44px);
  text-transform: none;
  letter-spacing: -.01em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- MANIFESTO ---------- */
.manifesto {
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.manifesto__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.manifesto__label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 8px;
}
.manifesto__label .num { font-size: 36px; font-family: var(--display); font-weight: 350; color: var(--ink); letter-spacing: -.02em; }
.manifesto__lead {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 60;
}
.manifesto__text {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 32px;
}
.manifesto__sign {
  display: flex; align-items: center; gap: 16px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.manifesto__sign img { width: 54px; height: 54px; object-fit: contain; }
.manifesto__sign-name { font-family: var(--display); font-style: italic; font-size: 20px; }
.manifesto__sign-role { font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }

@media (max-width: 860px) {
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__label { position: static; }
}

/* ---------- BRAND GRID ---------- */
.brands {
  padding: clamp(60px, 9vw, 120px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.brands__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 40px;
}
.brand-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 26px;
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 22px;
  position: relative;
  transition: transform .4s var(--easing), border-color .25s, background .25s;
}
.brand-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
}
.brand-card--feature {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  min-height: 360px;
}
.brand-card--feature:hover { background: var(--olive); }
.brand-card__top {
  display: flex; align-items: center; justify-content: space-between;
}
.brand-card__index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  opacity: .55;
}
.brand-card--feature .brand-card__index { color: var(--paper); }
.brand-card__chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--saffron);
  color: var(--ink);
  border-radius: 999px;
}
.brand-card__logo {
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
}
.brand-card--feature .brand-card__logo--tf {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(48px, 5vw, 84px);
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  line-height: 1;
}
.brand-card__logo--script {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1;
  font-size: clamp(26px, 2.4vw, 38px);
  letter-spacing: -.01em;
}
.brand-card__logo--open {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(24px, 2.2vw, 32px);
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
  color: var(--ink);
}
.brand-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.brand-card__meta div { display: flex; flex-direction: column; gap: 2px; }
.brand-card__meta span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}
.brand-card__meta strong {
  font-size: 13px;
  font-weight: 500;
}
.brand-card__more {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.brand-card--feature .brand-card__more { color: var(--saffron); }
.brand-card--open {
  background: transparent;
  border: 1px dashed var(--line-strong);
}
.brand-card--open:hover {
  background: var(--saffron);
  border-color: var(--ink);
}
.brand-card__open-copy {
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 24;
}

@media (max-width: 1024px) {
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  .brand-card--feature { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px) {
  .brands__grid { grid-template-columns: 1fr; }
  .brand-card--feature { grid-column: auto; }
}

/* ---------- CATEGORIES ---------- */
.cats {
  background: var(--paper-soft);
  padding: clamp(80px, 11vw, 140px) var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cats__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 36px 28px 28px;
  position: relative;
  min-height: 260px;
  transition: transform .4s var(--easing), border-color .25s, box-shadow .25s;
  display: flex; flex-direction: column; gap: 14px;
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 20px 40px -24px rgba(14,14,12,.18);
}
.cat-card__icon {
  width: 80px; height: 80px; object-fit: contain;
  margin-bottom: 12px;
  transition: transform .4s var(--easing);
}
.cat-card:hover .cat-card__icon { transform: rotate(-4deg) scale(1.05); }
.cat-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 48;
}
.cat-card__sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cat-card__index {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  opacity: .5;
}

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

/* ---------- SERVICES / PILLARS ---------- */
.services {
  padding: clamp(48px, 6vw, 84px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
}
.pillar {
  background: var(--paper);
  padding: 44px 40px;
  transition: background .35s var(--easing);
  position: relative;
}
.pillar:hover { background: var(--saffron); }
.pillar__head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 24px;
}
.pillar__num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.pillar__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 72;
}
.pillar__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 52ch;
}
.pillar:hover .pillar__text { color: var(--ink); }
.pillar__list {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 18px;
}
.pillar__list li {
  font-size: 14px;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pillar:hover .pillar__list li { color: var(--ink); }
.pillar__list li::before {
  content: "→ "; color: var(--saffron-deep); margin-right: 6px;
}
.pillar:hover .pillar__list li::before { color: var(--ink); }

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

/* ---------- COVERAGE ---------- */
.coverage {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 11vw, 140px) 0;
  border-top: 1px solid var(--ink);
}
.coverage__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.coverage .section__label {
  color: var(--paper);
  border-top-color: var(--paper);
  opacity: .85;
}
.coverage .section__title { color: var(--paper); }
.coverage .section__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 90, "WONK" 1;
  color: var(--saffron);
}
.coverage .section__title em span {
  background: none;
  padding: 0;
  color: inherit;
}
.coverage__text {
  font-family: var(--display);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(250,246,233,.7);
  max-width: 50ch;
  margin-top: 28px;
  font-variation-settings: "opsz" 36;
}
.coverage__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(250,246,233,.18);
}
.cstat strong {
  display: block;
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--saffron);
  font-variation-settings: "opsz" 96;
}
.cstat span {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(250,246,233,.65);
  margin-top: 8px;
  display: block;
}
.coverage__channels {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 36px;
}
.coverage__channels li {
  font-size: 12px;
  letter-spacing: .04em;
  padding: 8px 14px;
  border: 1px solid rgba(250,246,233,.22);
  border-radius: 999px;
}

.coverage__map { position: relative; }
.mx-map {
  width: 100%;
  height: auto;
  color: rgba(250,246,233,.35);
}
.mx-city circle { fill: var(--paper); }
.mx-city__main { fill: var(--saffron) !important; }
.mx-city__hq { fill: var(--saffron) !important; stroke: var(--paper); stroke-width: 2; }
.mx-city text {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 11.5px;
  fill: rgba(250,246,233,.78);
  letter-spacing: -.005em;
  font-variation-settings: "opsz" 18, "SOFT" 80, "WONK" 0;
}
.mx-city__main-label { fill: var(--saffron) !important; font-weight: 500; }
.mx-city__hq-label { fill: var(--saffron) !important; font-weight: 600; font-size: 13px !important; }
.map-legend {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(250,246,233,.65);
}
.map-legend i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.map-legend .dot-hq { background: var(--saffron); box-shadow: 0 0 0 2px var(--paper); }
.map-legend .dot-main { background: var(--saffron); }
.map-legend .dot-ret { background: var(--paper); }

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

/* ---------- TIMELINE / STORY ---------- */
.story {
  padding: clamp(60px, 8vw, 110px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 32px;
}
.tline {
  background: var(--paper);
  padding: 36px 30px;
  display: flex; flex-direction: column;
  gap: 12px;
  transition: background .35s var(--easing);
}
.tline:hover { background: var(--paper-soft); }
.tline__year {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.tline__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
}
.tline p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.tline--now {
  background: var(--saffron);
}
.tline--now:hover { background: var(--saffron); }
.tline--now .tline__year,
.tline--now .tline__title,
.tline--now p { color: var(--ink); }

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

/* ---------- STORYLINE — Interactive editorial timeline ---------- */
.storyline {
  max-width: 980px;
  margin: 32px auto 0;
}
.storyline__spine {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-bottom: clamp(36px, 5vw, 56px);
  padding: 0 14px;
}
.storyline__spine::before {
  /* Hairline connector between dots */
  content: "";
  position: absolute;
  top: 10px;
  left: calc(8.33% + 14px);
  right: calc(8.33% + 14px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--line-strong) 8%,
    var(--line-strong) 92%, transparent 100%);
  z-index: 0;
}
/* Saffron fill line — grows from 1988 toward the active year */
.storyline__fill {
  position: absolute;
  top: 10px;
  left: calc(8.33% + 14px);
  height: 1.5px;
  width: calc((100% - 16.66%) * var(--progress-fill, 0) / 100);
  background: var(--saffron);
  z-index: 0;
  transition: width .8s cubic-bezier(.2, .8, .2, 1);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(245, 197, 24, 0.35);
}
.storyline__year {
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 350;
  letter-spacing: .01em;
  color: var(--ink-soft);
  transition: color .3s var(--easing);
  z-index: 1;
  font-variation-settings: "opsz" 48;
}
.storyline__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-soft);
  transition: all .35s cubic-bezier(.2, .8, .2, 1);
  position: relative;
}
.storyline__year:hover { color: var(--ink); }
.storyline__year:hover .storyline__dot {
  border-color: var(--ink);
  transform: scale(1.08);
}
.storyline__year[aria-selected="true"] {
  color: var(--ink);
  font-weight: 500;
}
.storyline__year[aria-selected="true"] .storyline__dot {
  background: var(--saffron);
  border-color: var(--ink);
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(245, 197, 24, 0.18);
}
.storyline__year--now .storyline__year-label {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 90, "WONK" 1;
}
.storyline__year:focus-visible {
  outline: none;
}
.storyline__year:focus-visible .storyline__dot {
  box-shadow: 0 0 0 4px rgba(14, 14, 12, .15);
}

/* Hover tooltip — small preview title above each dot */
.storyline__tip {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: -.01em;
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--easing), transform .2s var(--easing);
  font-variation-settings: "opsz" 36, "SOFT" 70, "WONK" 1;
  z-index: 10;
}
.storyline__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--ink);
}
.storyline__year:hover .storyline__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.storyline__year[aria-selected="true"] .storyline__tip {
  /* Hide tip on active dot — its info is already in the panel below */
  opacity: 0 !important;
}

/* Keyboard hint */
.storyline__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.6;
}
.storyline__hint-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0;
}
.storyline__hint-text { margin-left: 4px; }

.storyline__panels {
  position: relative;
  min-height: 200px;
  text-align: center;
  padding: 0 16px;
}
.storyline__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--easing), transform .45s var(--easing);
  pointer-events: none;
}
.storyline__panel--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.storyline__chapter {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 5px 14px;
}
.storyline__chapter--now {
  background: var(--saffron);
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 500;
}
.storyline__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1;
  max-width: 18ch;
}
.storyline__text {
  font-family: var(--display);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
  font-variation-settings: "opsz" 36;
}

/* Stats trio per year — count-up animated numerals */
.storyline__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 620px;
  width: 100%;
}
.storyline__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.storyline__stats strong {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
  font-variant-numeric: tabular-nums;
}
.storyline__stats span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
  max-width: 14ch;
}

@media (max-width: 560px) {
  .storyline__stats { grid-template-columns: 1fr; gap: 18px; }
  .storyline__stats li { flex-direction: row; gap: 12px; text-align: left; align-items: baseline; }
  .storyline__stats strong { font-size: 28px; }
  .storyline__stats span { max-width: none; }
}

@media (max-width: 720px) {
  /* Timeline vertical en mobile: spine = 1 col × 6 rows, todo centrado.
     El bloque dot+label se mantiene unido y la columna entera se centra
     horizontalmente con margin auto + width fit-content. */
  .storyline {
    margin-top: 24px;
    padding: 0 8px;
  }
  .storyline__spine {
    grid-template-columns: max-content;
    justify-content: center;
    gap: 24px;
    padding: 8px 0;
    margin-inline: auto;
    width: fit-content;
    position: relative;
  }
  .storyline__spine::before {
    /* Vertical hairline connector centrado en los dots */
    top: 24px;
    bottom: 24px;
    left: 10px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      transparent 0%, var(--line-strong) 4%,
      var(--line-strong) 96%, transparent 100%);
  }
  .storyline__fill {
    /* Vertical saffron fill alineado con el connector */
    top: 24px;
    left: 10px;
    bottom: auto;
    width: 1.5px;
    height: calc((100% - 48px) * var(--progress-fill, 0) / 100);
    box-shadow: 0 0 8px rgba(245, 197, 24, 0.35);
    transition: height .8s cubic-bezier(.2, .8, .2, 1);
  }
  .storyline__year {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 0;
    font-size: 18px;
  }
  .storyline__dot {
    flex: none;
  }
  .storyline__year-label {
    flex: 1;
    text-align: left;
  }
  /* Hover tip horizontal a la derecha en lugar de arriba */
  .storyline__tip {
    top: 50%;
    left: auto;
    right: 0;
    transform: translateY(-50%) translateX(6px);
  }
  .storyline__tip::after {
    top: 50%;
    left: -4px;
    right: auto;
    transform: translateY(-50%);
    border-left: 0;
    border-right: 4px solid var(--ink);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .storyline__year:hover .storyline__tip {
    transform: translateY(-50%) translateX(0);
  }
  .storyline__panels { min-height: 220px; }
  /* Keyboard hint less prominent on mobile (touch first) */
  .storyline__hint { margin: 8px 0 24px; }
}

/* ---------- RETAILER CHIPS — logos with brand favicons in pillar 01 ---------- */
.retailer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 18px;
}
.retailer-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  transition: border-color .25s, background .25s;
}
.retailer-chip:hover {
  border-color: var(--ink);
  background: var(--paper-soft);
}
.retailer-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
  background: #fff;
  padding: 1px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .retailer-grid { grid-template-columns: 1fr; }
}

/* ---------- CATÁLOGO STRIP ---------- */
.catalog {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(60px, 9vw, 100px) var(--gutter);
  position: relative;
  overflow: hidden;
}
.catalog__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 60px;
  align-items: center;
}
.catalog__seal {
  width: 140px; height: 140px;
  filter: invert(1);
  opacity: .9;
  animation: spin 80s linear infinite;
}
.catalog__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--saffron);
  display: block;
  margin-bottom: 14px;
}
.catalog__title {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--paper);
  font-variation-settings: "opsz" 96, "SOFT" 40;
}
.catalog__title em {
  font-style: italic;
  display: block;
  font-variation-settings: "opsz" 96, "SOFT" 90, "WONK" 1;
  font-size: clamp(20px, 2vw, 28px);
  color: rgba(250,246,233,.65);
  margin-top: 8px;
}
.catalog__title em span { background: none; padding: 0; }
.catalog__ctas { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }

@media (max-width: 900px) {
  .catalog__inner { grid-template-columns: 1fr; gap: 36px; }
  .catalog__ctas { align-items: flex-start; }
  .catalog__seal { width: 100px; height: 100px; }
}

/* ---------- CONTACTO ---------- */
.contact {
  padding: clamp(44px, 5.5vw, 76px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.contact__paths {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.cpath {
  /* Yanis 21-may PM: card A bg ahora matchea el bg de la sección (--paper)
     para que se funda visualmente. El border + giant index "A" siguen
     dándole presencia sin generar contraste de fondo. */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 44px 40px;
  position: relative;
}
.cpath--b {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cpath--b .btn { align-self: flex-start; }
.cpath__index {
  position: absolute;
  top: 30px; right: 36px;
  font-family: var(--display);
  font-weight: 350;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--saffron);
  font-variation-settings: "opsz" 144;
}
.cpath__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: 22ch;
  margin-bottom: 18px;
  font-variation-settings: "opsz" 72;
}
.cpath p {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 28px;
  color: var(--ink-soft);
}
.cpath--b p { color: var(--ink-soft); }

.cform { display: flex; flex-direction: column; gap: 14px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform__full label { width: 100%; }
.cform label { display: flex; flex-direction: column; gap: 6px; }
.cform label > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cform button[type="submit"] span {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--paper);
}
.cform input,
.cform select,
.cform textarea {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, background .2s;
  min-height: 44px;
  font-family: var(--sans);
}
.cform textarea { resize: vertical; }
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  border-color: var(--ink);
  background: var(--paper-soft);
}
.cform button { align-self: flex-start; margin-top: 4px; }

.wa-card {
  display: block;
  background: var(--saffron);
  color: var(--ink);
  padding: 26px 28px;
  border-radius: 6px;
  margin-bottom: 26px;
  transition: transform .35s var(--easing);
}
.wa-card:hover { transform: translateY(-3px); }
.wa-card__top { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.wa-card p { font-size: 14px; color: var(--ink); margin-bottom: 14px; }
.wa-card__cta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }

.cpath__direct {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(250,246,233,.18);
}
.cpath__direct > div:nth-child(3) { grid-column: span 2; }
.cpath__direct-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,233,.55);
  display: block;
  margin-bottom: 6px;
}
.cpath__direct a,
.cpath__direct span:not(.cpath__direct-lbl) {
  font-size: 15px;
  font-weight: 500;
  color: var(--paper);
}
.cpath__direct a:hover { color: var(--saffron); }

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

/* ---------- FOOTER ---------- */
.foot {
  background: var(--saffron);
  border-top: 1px solid rgba(20,17,13,.18);
  padding: clamp(60px, 8vw, 100px) var(--gutter) 32px;
}
.foot__top {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2.4fr auto;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.foot__brand {
  display: flex; flex-direction: column; gap: 28px;
  align-items: flex-start;
}
.foot__logo { height: 96px; width: auto; }
.foot__claim {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
  font-variation-settings: "opsz" 36;
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.foot__cols h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.foot__cols a,
.foot__cols span {
  display: block;
  font-size: 14px;
  color: var(--ink);
  padding: 4px 0;
}
.foot__cols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot__seal img { width: 130px; opacity: .9; animation: spin 100s linear infinite; }
.foot__bottom {
  max-width: var(--container);
  margin: 60px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(20,17,13,.22);
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__seal { order: -1; }
}
@media (max-width: 700px) {
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- REVEAL (subtle scroll-fade) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--easing), transform .8s var(--easing);
  transition-delay: var(--d, 0s);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- focus ---------- */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =================================================
   V2 ADDITIONS — About / Productos / Catálogos /
   Distribución / Brand cards
   ================================================= */

/* ---------- ABOUT wrapper (manifesto + story + services) ---------- */
.about { padding-top: 0; }
.about .manifesto { padding-bottom: clamp(50px, 7vw, 80px); }
.about .story { padding-top: 0; padding-bottom: clamp(70px, 9vw, 120px); }
.about .services { padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(40px, 5.5vw, 72px); }

/* pillars--3 (services about) */
.pillars--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .pillars--3 { grid-template-columns: 1fr; }
}

/* pillars--2 (distribución operativa) */
.pillars--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 800px) {
  .pillars--2 { grid-template-columns: 1fr; }
}

/* ---------- PRODUCTOS ---------- */
.products {
  background: var(--paper-soft);
  padding: clamp(44px, 5.5vw, 76px) var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.products .section__head { max-width: var(--container); margin-inline: auto; }
.products__footer {
  max-width: var(--container);
  margin: 60px auto 0;
  text-align: center;
}
.products__footer .link-ghost {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
}

.cats-list {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---------- CAT TABS (v4 — pestañas por categoría) ---------- */
.cat-tabs {
  max-width: var(--container);
  margin: 0 auto 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0;
}
.cat-tabs::-webkit-scrollbar { height: 4px; }
.cat-tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.cat-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: transparent;
  color: var(--ink-soft);
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .25s var(--easing), border-color .25s var(--easing), background .25s var(--easing);
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
}
.cat-tab:hover {
  color: var(--ink);
  background: var(--paper);
}
.cat-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--saffron);
  background: var(--paper);
}
.cat-tab__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  opacity: .55;
  font-weight: 500;
}
.cat-tab.is-active .cat-tab__num { opacity: .9; }
.cat-tab__label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.cat-tab__count {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--bone);
  color: var(--ink-soft);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  font-weight: 500;
  min-width: 24px;
  text-align: center;
}
.cat-tab.is-active .cat-tab__count {
  background: var(--saffron);
  color: var(--ink);
}

.cat-panels {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.cat-panel {
  display: none;
}
.cat-panel.is-active {
  display: block;
  animation: catFadeIn .4s var(--easing);
}
@keyframes catFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-panel.is-active { animation: none; }
}

.cat-panel__head {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px dashed var(--line-strong);
}
.cat-panel__icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  background: var(--saffron);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-panel__icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.cat-panel__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 72, "SOFT" 40;
  line-height: 1.05;
}
.cat-panel__desc {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 8px;
  font-weight: 400;
}
.cat-panel .brands-row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 28px;
  grid-gap: 14px;
  gap: 14px;
}

/* === Category panel layouts — explicit grid by brand count so every panel
   gets a clean rectangular grid (no voids from "hero card" spans).
   Mobile: stacks 1-col below 720px regardless of layout. === */

.cat-panel .brands-row {
  gap: 14px;
}
.cat-panel .brands-row > .b-card {
  min-height: 200px;
  min-width: 0; /* permite que las cards se compriman dentro del grid */
  padding: 26px 22px;
  justify-content: space-between;
}

/* Desktop grid choices per brand count */
@media (min-width: 900px) {
  /* A · 4 brands → 4 cols on one row (Pescados) */
  .cat-panel[data-layout="A"] .brands-row { grid-template-columns: repeat(4, 1fr); }
  /* B · 2 brands → 2 equal cols (Conservas, Almíbares, Mermeladas) */
  .cat-panel[data-layout="B"] .brands-row { grid-template-columns: repeat(2, 1fr); }
  /* C · 3 brands → 3 cols (Especias, Pastas, Bebidas) */
  .cat-panel[data-layout="C"] .brands-row { grid-template-columns: repeat(3, 1fr); }
  /* E · 6 brands → 3 cols × 2 rows (Galletas y dulces) */
  .cat-panel[data-layout="E"] .brands-row { grid-template-columns: repeat(3, 1fr); }
}
/* Tablet — collapse multi-col to 2-col */
@media (min-width: 720px) and (max-width: 899px) {
  .cat-panel[data-layout="A"] .brands-row,
  .cat-panel[data-layout="B"] .brands-row,
  .cat-panel[data-layout="C"] .brands-row,
  .cat-panel[data-layout="E"] .brands-row { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile — single column (subido a 720 para que 2-col no apriete) */
@media (max-width: 719px) {
  .cat-panel[data-layout="A"] .brands-row,
  .cat-panel[data-layout="B"] .brands-row,
  .cat-panel[data-layout="C"] .brands-row,
  .cat-panel[data-layout="E"] .brands-row { grid-template-columns: 1fr; }
  /* Mobile typography: descripciones más chicas, cards más apretadas */
  .cat-panel .brands-row > .b-card {
    min-height: 170px;
    padding: 22px 18px;
  }
  .b-card__logo { height: 72px; min-width: 72px; max-width: 200px; }
  .b-card__mark { min-height: 80px; }
  .b-card__desc { font-size: 12px; line-height: 1.5; }
  .b-card__pill { font-size: 10.5px; }
}

/* D · Single feature centered (Aceites · Pons solo) */
.cat-panel[data-layout="D"] .brands-row {
  grid-template-columns: 1fr;
  max-width: 520px;
  margin-inline: auto;
}
.cat-panel[data-layout="D"] .b-card {
  padding: 56px 36px;
  align-items: center;
  text-align: center;
  min-height: 280px;
  justify-content: center;
  gap: 20px;
}
.cat-panel[data-layout="D"] .b-card .b-card__mark {
  flex-direction: column-reverse;
  align-items: center;
  gap: 20px;
}
.cat-panel[data-layout="D"] .b-card .b-card__name {
  font-size: clamp(26px, 3vw, 34px);
}
.cat-panel[data-layout="D"] .b-card .b-card__logo {
  width: 72px; height: 72px;
}

@media (max-width: 600px) {
  .cat-panel__head { grid-template-columns: 60px 1fr; gap: 16px; padding: 20px 22px; }
  .cat-panel__icon-wrap { width: 60px; height: 60px; }
  .cat-panel__icon { width: 44px; height: 44px; }
  .cat-panel .brands-row { padding: 18px; }
}

.cat-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(28px, 4vw, 48px);
  transition: border-color .3s var(--easing), box-shadow .3s var(--easing);
}
.cat-block:hover {
  border-color: var(--line-strong);
  box-shadow: 0 16px 32px -24px rgba(14,14,12,.18);
}
.cat-block__head {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--line-strong);
}
.cat-block__icon-wrap {
  width: 88px; height: 88px;
  border-radius: 8px;
  background: var(--saffron);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-block__icon {
  width: 64px; height: 64px;
  object-fit: contain;
}
.cat-block__heading {
  display: flex; flex-direction: column; gap: 4px;
}
.cat-block__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--ink-soft);
}
.cat-block__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 72, "SOFT" 40;
  line-height: 1.05;
}
.cat-block__title a {
  transition: color .25s var(--easing);
  border-bottom: 1px solid transparent;
}
.cat-block__title a:hover {
  color: var(--saffron-deep);
  border-bottom-color: var(--saffron);
}
.cat-block__count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  margin-top: 4px;
}

@media (max-width: 600px) {
  .cat-block__head { grid-template-columns: 64px 1fr; gap: 18px; }
  .cat-block__icon-wrap { width: 64px; height: 64px; }
  .cat-block__icon { width: 48px; height: 48px; }
}

/* ---------- BRAND CARDS within a category ---------- */
.brands-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.brands-row--wide { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1100px) {
  .brands-row { grid-template-columns: repeat(3, 1fr); }
  .brands-row--wide { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .brands-row { grid-template-columns: repeat(2, 1fr); }
  .brands-row--wide { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .brands-row { grid-template-columns: 1fr; }
  .brands-row--wide { grid-template-columns: 1fr; }
}

.b-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 18px 18px;
  display: flex; flex-direction: column;
  gap: 12px;
  min-height: 150px;
  transition: transform .35s var(--easing), border-color .25s, background .25s;
  position: relative;
}
.b-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
}
.b-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 100px;
}
.b-card__name {
  /* El nombre de la marca se repite con el wordmark del logo en la mayoría
     de cards; lo escondemos visualmente pero lo dejamos accesible al SR. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.b-card__logo {
  width: auto;
  height: 96px;
  min-width: 96px;
  max-width: 260px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  /* Funde el fondo blanco embebido del PNG/JPG con el color del papel. */
  mix-blend-mode: multiply;
}
.b-card__logo--house {
  width: auto;
  height: 56px;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}
.b-card__desc {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: auto;
  font-weight: 400;
}
.b-card__desc strong {
  color: var(--saffron-deep);
  font-weight: 600;
  letter-spacing: 0;
}

/* b-card variants */
.b-card--own {
  background: var(--saffron);
  border-color: var(--ink);
}
.b-card--own:hover { background: var(--saffron-deep); }
.b-card--own .b-card__logo--house {
  position: static;
  background: none;
  max-height: 80px;
  filter: contrast(1.05);
}
.b-card--own .b-card__desc { color: var(--ink); }
.b-card--own .b-card__desc strong { color: var(--ink); }

.b-card--anchor {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.b-card--anchor:hover { background: var(--olive); }
.b-card--anchor .b-card__name { color: var(--paper); }
.b-card--anchor .b-card__logo {
  background: transparent;
  /* En la card oscura: invertimos el logo para que su fondo blanco se vuelva
     oscuro y se funda con la card via 'screen', dejando visible solo la marca. */
  mix-blend-mode: screen;
  filter: invert(1) brightness(1.1);
}
.b-card--anchor .b-card__desc { color: rgba(250,246,233,.7); }
.b-card--anchor .b-card__desc strong { color: var(--saffron); }

.b-card--family { grid-column: span 1; }
.b-card__sub {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.b-card__sub li {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-weight: 400;
}
.b-card__sub li::before {
  content: "↳ ";
  opacity: .4;
}

/* ---------- CATÁLOGOS ---------- */
.catalogs {
  padding: clamp(44px, 5.5vw, 76px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.catalogs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
@media (max-width: 1024px) {
  .catalogs__grid { grid-template-columns: 1fr; gap: 14px; }
}
.catalog-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: transform .35s var(--easing), border-color .25s, box-shadow .25s;
  position: relative;
}
.catalog-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 20px 40px -24px rgba(14,14,12,.18);
}
.catalog-card__top {
  display: flex; justify-content: space-between; align-items: center;
}
.catalog-card__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
}
.catalog-card__date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.catalog-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 60, "SOFT" 50;
  margin-top: 8px;
}
.catalog-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.catalog-card__meta {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px dashed var(--line-strong);
  border-bottom: 1px dashed var(--line-strong);
  margin-top: auto;
}
.catalog-card__meta li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px;
}
.catalog-card__meta span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.catalog-card__meta strong {
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  color: var(--ink);
}
.catalog-card__ctas {
  display: flex; align-items: center; gap: 16px;
  margin-top: 4px;
}
.catalog-card__ctas .btn { flex: 1; min-width: 0; }
.catalogs__note {
  max-width: 62ch;
  margin: 40px auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* ---------- BRAND WALL (post-hero) ---------- */
.brand-wall {
  padding: clamp(60px, 9vw, 100px) var(--gutter) clamp(40px, 6vw, 70px);
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.brand-wall__head {
  max-width: 900px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}
.brand-wall__label {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  letter-spacing: .005em;
  color: var(--ink-soft);
  text-transform: none;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  margin-bottom: 28px;
  font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
}
.brand-wall__label .num { display: none; }
.brand-wall__label .lbl::before { content: ""; }
.brand-wall__title {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "SOFT" 40;
}
.brand-wall__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 90, "WONK" 1;
}
.brand-wall__title em span {
  background: linear-gradient(transparent 62%, var(--saffron) 62%, var(--saffron) 92%, transparent 92%);
  padding: 0 .04em;
}
.brand-wall__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .brand-wall__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .brand-wall__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .brand-wall__grid { grid-template-columns: 1fr; } }
.bw-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-height: 130px;
  transition: transform .35s var(--easing), border-color .25s, background .25s;
}
.bw-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  background: var(--paper);
}
.bw-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 4px;
}
.bw-card__own-logo {
  width: 92% !important;
  height: auto !important;
  max-height: none !important;
  max-width: 240px;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  object-fit: contain;
}
.bw-card--own .bw-card__name { display: none; }
.bw-card--own { padding: 18px 8px 14px; justify-content: center; gap: 4px; }
.bw-card__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.1;
}
.bw-card__cat {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: auto;
  font-weight: 400;
}
.bw-card--own {
  background: var(--saffron);
  border-color: var(--ink);
}
.bw-card--own:hover { background: var(--saffron-deep); }
.bw-card--anchor {
  background: var(--ink);
  border-color: var(--ink);
}
.bw-card--anchor:hover { background: var(--olive); }
.bw-card--anchor .bw-card__name { color: var(--paper); }
.bw-card--anchor .bw-card__cat { color: var(--saffron); }
.bw-card--anchor img { background: rgba(250,246,233,.08); border-color: rgba(250,246,233,.18); }

/* === Brand wall — hover color reveal pattern.
   In repose every card is calm paper-soft cream with logos in natural color.
   On hover the card adopts its brand color (defined inline via --brand-bg /
   --brand-fg) and the text recolors with a smooth 320ms transition.
   La Pasiega (.bw-card--own) and Tea Forté (.bw-card--anchor) stay
   permanently active as visual anchors. === */
.bw-card[style*="--brand-bg"] {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  transition: background .32s var(--easing), border-color .32s var(--easing), transform .32s var(--easing);
}
.bw-card[style*="--brand-bg"] .bw-card__name {
  color: var(--ink);
  transition: color .32s var(--easing);
}
.bw-card[style*="--brand-bg"] .bw-card__cat {
  color: var(--ink-soft);
  transition: color .32s var(--easing);
}
.bw-card[style*="--brand-bg"] img {
  background: transparent;
  border: 0;
  width: 88px;
  height: 88px;
  padding: 0;
  box-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.10));
  object-fit: contain;
  transition: filter .32s var(--easing), transform .32s var(--easing);
}
.bw-card[style*="--brand-bg"]:hover {
  background: var(--brand-bg);
  border-color: var(--brand-bg);
  transform: translateY(-3px);
}
.bw-card[style*="--brand-bg"]:hover .bw-card__name { color: var(--brand-fg); }
.bw-card[style*="--brand-bg"]:hover .bw-card__cat { color: var(--brand-fg); opacity: .72; }
.bw-card[style*="--brand-bg"]:hover img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transform: scale(1.04);
}

.brand-wall__note {
  max-width: 62ch;
  margin: 36px auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

/* (Brand wall responsive breakpoints defined earlier near .brand-wall__grid) */

/* ---------- B-CARD: add pill for "ver marca" ---------- */
.b-card__pill {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  font-weight: 500;
}
.b-card--anchor .b-card__pill { color: var(--saffron); }
/* (External-link X badge removed — felt like a close button instead of an indicator) */

/* === Retailers strip — logos of the 13 distribution chains, sits below
   the 3 services pillars as a "social proof" line. Default: full color
   (per Yanis 15-may: "que se vean por default de color"). Hover: subtle scale. === */
.retailers-strip {
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.retailers-strip__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.retailers-strip__row {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: clamp(14px, 2vw, 32px);
  width: 100%;
  max-width: 1180px;
  align-items: center;
  justify-items: center;
}
.retailers-strip__row li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
}
.retailers-strip__row img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: none;
  transition: transform .3s var(--easing), filter .3s var(--easing);
}
.retailers-strip__row img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 2px 6px rgba(14, 14, 12, .12));
}
@media (max-width: 1100px) {
  .retailers-strip__row { grid-template-columns: repeat(7, 1fr); }
}
@media (max-width: 720px) {
  .retailers-strip__row { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .retailers-strip__row li { height: 48px; }
}
@media (max-width: 480px) {
  .retailers-strip__row { grid-template-columns: repeat(3, 1fr); }
}

/* ===================================================
   BRAND PAGE TEMPLATE (marca-*.html)
   =================================================== */
.brand-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand-page__back {
  padding: 24px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand-page__back a:hover { color: var(--saffron-deep); }

.brand-page__hero {
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  border-top: 1px solid var(--ink);
}
.brand-page__logo-wrap {
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 1;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
}
.brand-page__logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Funde el fondo blanco embebido del PNG/JPG con el paper de la card */
  mix-blend-mode: multiply;
}
/* Anchor (Tea Forté): mismo fondo paper que las demás marcas — la pill
   "Caso ancla" arriba del título ya marca la distinción. */
.brand-page__logo-wrap--anchor {
  background: var(--paper);
  border-color: var(--line-strong);
}
.brand-page__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.brand-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand-page__eyebrow strong {
  background: var(--saffron);
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .12em;
}
.brand-page__title {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.94;
  letter-spacing: -.025em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.brand-page__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}
.brand-page__lede {
  font-family: var(--display);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 56ch;
  font-variation-settings: "opsz" 36;
}
.brand-page__quick {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 22px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.brand-page__quick div {
  display: flex; flex-direction: column; gap: 4px;
}
.brand-page__quick strong {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 72;
}
.brand-page__quick span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.brand-page__section {
  padding: clamp(60px, 8vw, 100px) 0;
  border-top: 1px solid var(--line);
}
.brand-page__sec-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.brand-page__sec-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand-page__sec-label .num {
  font-family: var(--display);
  font-weight: 350;
  font-size: 36px;
  letter-spacing: -.02em;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.brand-page__sec-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 96, "SOFT" 40;
}
.brand-page__sec-title em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 90, "WONK" 1;
}

.brand-page__story p {
  font-family: var(--display);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  font-variation-settings: "opsz" 36;
}
.brand-page__story p + p { margin-top: 22px; }

.brand-page__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bp-product {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
}
.bp-product__sku {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp-product__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 60;
}
.bp-product__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.bp-product__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.bp-product__meta span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp-product__meta strong {
  font-size: 13px;
  font-weight: 500;
}

.brand-page__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
}
.bp-spec {
  background: var(--paper);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-spec__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp-spec__val {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.01em;
}
.bp-spec__txt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.brand-page__cta {
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  padding: clamp(40px, 6vw, 64px);
  margin: clamp(60px, 8vw, 100px) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.brand-page__cta-title {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--paper);
  font-variation-settings: "opsz" 96, "SOFT" 40;
  max-width: 22ch;
}
.brand-page__cta-title em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 90, "WONK" 1;
  color: var(--saffron);
}
.brand-page__cta-ctas {
  display: flex; flex-direction: column; gap: 12px;
}

@media (max-width: 900px) {
  .brand-page__hero { grid-template-columns: 1fr; gap: 32px; }
  .brand-page__sec-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .brand-page__products { grid-template-columns: 1fr; }
  .brand-page__specs { grid-template-columns: 1fr; }
  .brand-page__cta { grid-template-columns: 1fr; }
}

/* ===================================================
   CATEGORY PAGE TEMPLATE (bebidas.html, etc.)
   =================================================== */
.cat-page__hero {
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(36px, 5vw, 60px);
  align-items: center;
  border-top: 1px solid var(--ink);
}
.cat-page__icon-wrap {
  width: clamp(100px, 12vw, 140px);
  aspect-ratio: 1;
  background: var(--saffron);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 24px);
  flex-shrink: 0;
}
.cat-page__icon-wrap img {
  width: 80%; height: 80%; object-fit: contain;
}
.cat-page__hero-copy { display: flex; flex-direction: column; gap: 14px; }
.cat-page__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cat-page__title {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.96;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.cat-page__lede {
  font-family: var(--display);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  font-variation-settings: "opsz" 36;
}

.cat-page__brands {
  padding: clamp(40px, 5vw, 60px) 0 clamp(80px, 10vw, 120px);
}
.cat-page__brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .cat-page__hero { grid-template-columns: 1fr; }
  .cat-page__brands-grid { grid-template-columns: 1fr; }
}

.cat-brand-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
  transition: transform .35s var(--easing), border-color .25s, box-shadow .25s;
  position: relative;
}
.cat-brand-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 20px 40px -24px rgba(14,14,12,.18);
}
.cat-brand-card__logo {
  width: 80px; height: 80px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 10px;
}
.cat-brand-card__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
  letter-spacing: -.01em;
}
.cat-brand-card__origin {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-weight: 500;
}
.cat-brand-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cat-brand-card__cta {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--saffron-deep);
}
.cat-brand-card--anchor {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cat-brand-card--anchor:hover { background: var(--olive); }
.cat-brand-card--anchor .cat-brand-card__name { color: var(--paper); }
.cat-brand-card--anchor .cat-brand-card__origin,
.cat-brand-card--anchor .cat-brand-card__desc { color: rgba(250,246,233,.7); }
.cat-brand-card--anchor .cat-brand-card__cta { color: var(--saffron); }
.cat-brand-card--anchor .cat-brand-card__logo { background: rgba(250,246,233,.08); border-color: rgba(250,246,233,.18); }

/* ---------- DISTRIBUCIÓN wrapper ---------- */
.distribution {
  background: var(--paper);
}
.distribution > .section__head {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(44px, 5.5vw, 76px) var(--gutter) clamp(20px, 3vw, 36px);
}
.distribution > .pillars {
  max-width: var(--container);
  margin: 0 auto clamp(40px, 5.5vw, 72px);
}
/* coverage inside distribution: keep its own dark background */
.distribution .coverage {
  margin-top: 0;
}

/* ===================================================
   LOGO STRIP · carrusel chico de marcas (hero → servicios)
   Silent marquee, color por default, link a marca-*.html.
   No usa GSAP (intencional — el motion velocity-scrub
   solo aplica a `.marquee`, no a este strip).
   =================================================== */
.logo-strip {
  background: var(--paper);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: clamp(18px, 2.6vw, 28px) 0 clamp(20px, 2.8vw, 30px);
  position: relative;
  overflow: hidden;
}
.logo-strip__head {
  text-align: center;
  margin-bottom: clamp(12px, 1.8vw, 18px);
}
.logo-strip__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.logo-strip__viewport {
  position: relative;
  overflow: hidden;
  /* Soft edge fade in/out — anchors the strip without hard cuts */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-strip__track {
  display: flex;
  width: max-content;
  animation: logoStripScroll 60s linear infinite;
}
.logo-strip:hover .logo-strip__track,
.logo-strip:focus-within .logo-strip__track {
  animation-play-state: paused;
}
.logo-strip__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.5vw, 76px);
  padding-right: clamp(40px, 5.5vw, 76px);
}
.logo-strip__row li { display: flex; }
.logo-strip__row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 60px;
  transition: transform .25s var(--easing), filter .25s var(--easing), opacity .25s var(--easing);
}
.logo-strip__row img {
  max-height: 100%;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  filter: none;
  /* Borra el fondo blanco embebido del PNG/JPG fundiéndolo con el papel. */
  mix-blend-mode: multiply;
}
.logo-strip__row a:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 3px 8px rgba(14, 14, 12, .15));
}
@keyframes logoStripScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track {
    animation: none;
  }
  .logo-strip__row {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 720px) {
  .logo-strip__row a { height: 36px; min-width: 50px; }
  .logo-strip__row img { max-width: 92px; }
  .logo-strip__row { gap: clamp(28px, 6vw, 48px); padding-right: clamp(28px, 6vw, 48px); }
}

/* ===================================================
   QUIÉNES SOMOS · teaser home (sección 02)
   Layout centrado editorial: label → headline → lead → meta
   (signature + CTA inline) → timeline horizontal compacto.
   La página completa con storyline interactivo vive en
   quienes-somos.html (link desde el CTA).
   =================================================== */
.qs-home {
  background: var(--paper);
  padding: clamp(48px, 6vw, 84px) var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.qs-home__inner {
  max-width: 880px;
  margin: 0 auto;
}
.qs-home__head {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.qs-home__head .section__label {
  display: inline-flex;
  margin-bottom: 22px;
}
.qs-home__head .section__title {
  margin: 0 auto 24px;
  max-width: 22ch;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
}
.qs-home__lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
  max-width: 56ch;
  margin: 0 auto;
}
/* Gap entre dos qs-home__lead consecutivos (21-may PM: copy de 2 párrafos) */
.qs-home__lead + .qs-home__lead {
  margin-top: clamp(16px, 1.5vw, 22px);
}

/* Meta row: signature (left) + CTA (right) on desktop, stacked on mobile */
.qs-home__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 36px);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.qs-home__sign {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.qs-home__sign img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: none;
}
.qs-home__sign-name {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.2;
}
.qs-home__sign-role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Timeline horizontal compacto · 6 hitos puntuados por una línea fina */
.qs-timeline {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 3.5vw, 40px) 0 0;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.5vw, 18px);
  position: relative;
}
.qs-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--ink);
  opacity: .12;
}
.qs-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding-top: 18px;
}
.qs-timeline__step::before {
  /* dot anchor on the line */
  content: "";
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .55;
}
.qs-timeline__step--now::before {
  background: var(--saffron);
  opacity: 1;
  width: 12px;
  height: 12px;
  top: -7px;
  box-shadow: 0 0 0 4px var(--paper);
}
.qs-timeline__year {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--ink);
  line-height: 1;
  font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 1;
}
.qs-timeline__step--now .qs-timeline__year { color: var(--saffron-deep, #C99A0A); }
.qs-timeline__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.3;
  max-width: 14ch;
}

@media (max-width: 720px) {
  .qs-home__head .section__title { max-width: none; }
  .qs-timeline {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
  }
  .qs-timeline::before { display: none; }
  .qs-timeline__step { padding-top: 0; }
  .qs-timeline__step::before { display: none; }
}

/* ===================================================
   BRAND ALMANAC · portafolio editorial (reemplaza cat-tabs)
   - Filter chips arriba (radiogroup, default = Todas)
   - Grid 4-col de 20 paneles editoriales
   - Cada panel: Nº01 mono + nombre Fraunces italic grande
                + origin mono + categoría mono
   - Hover: fondo saffron, color ink (contraste 4.5:1+)
   - Anchor (Tea Forté): saffron permanente
   =================================================== */

/* Filter chips · row scrollable */
.brand-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 48px);
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 4px;
}
.brand-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.brand-filter__chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.brand-filter__chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.brand-filter__count {
  font-family: var(--mono);
  font-size: 11px;
  opacity: .55;
}
.brand-filter__chip.is-active .brand-filter__count { opacity: .75; }

/* Grid 4-col · responsive
   Líneas via "1px gap con background coloreado" — funciona bien con filter
   hidden porque las celdas display:none se colapsan y los gaps se rebalancean.
   data-visible (JS) colapsa el grid a las columnas que realmente caben
   cuando el filter deja pocos items (1/2/3) — sin esto, las cols vacías
   mostrarían el bg gris. */
.brand-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
.brand-grid > li {
  display: flex;
  background: var(--paper);
}
/* Cuando el filter deja menos de 4 items visibles, encogemos el grid
   para que no quede zona gris a la derecha. */
.brand-grid[data-visible="1"] {
  grid-template-columns: minmax(0, 360px);
  max-width: 360px;
}
.brand-grid[data-visible="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}
.brand-grid[data-visible="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
}

/* Editorial panel */
.brand-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 220px;
  padding: 26px 28px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: background .25s var(--easing), color .25s var(--easing), transform .25s var(--easing);
  position: relative;
}
.brand-panel:hover,
.brand-panel:focus-visible {
  background: var(--saffron);
  color: var(--ink);
  outline: none;
}
.brand-panel--anchor {
  background: var(--saffron);
}
.brand-panel__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.brand-panel__arrow {
  position: absolute;
  top: 24px;
  right: 26px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-soft);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.brand-panel:hover .brand-panel__arrow,
.brand-panel:focus-visible .brand-panel__arrow,
.brand-panel--anchor .brand-panel__arrow {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--ink);
}
.brand-panel__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 16px;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
}
.brand-panel__origin {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .75;
  margin-top: auto;
}
.brand-panel__cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}
.brand-panel:hover .brand-panel__origin,
.brand-panel:hover .brand-panel__cat,
.brand-panel--anchor .brand-panel__origin,
.brand-panel--anchor .brand-panel__cat { color: var(--ink); opacity: 1; }

/* Hidden by filter */
.brand-panel.is-hidden,
.brand-grid > li.is-hidden { display: none; }

/* Responsive — el patrón gap+bg se mantiene en todos los breakpoints */
@media (max-width: 1100px) {
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-grid[data-visible="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}
/* Mobile (≤720px): carrusel horizontal de 2 filas con scroll-snap.
   Items se acomodan en columnas (auto-flow: column) llenando primero
   row 1 y row 2 — así 20 marcas → 10 columnas × 2 filas swipeable.
   Cuando el filter deja <4 items, vuelve a stack vertical. */
@media (max-width: 720px) {
  .brand-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 64vw;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .brand-grid::-webkit-scrollbar { display: none; }
  .brand-grid > li {
    scroll-snap-align: start;
    min-width: 0;
  }
  /* Cuando hay 1-3 items visibles → stack vertical, sin scroll horizontal */
  .brand-grid[data-visible="1"],
  .brand-grid[data-visible="2"],
  .brand-grid[data-visible="3"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    max-width: none;
  }
  .brand-panel { min-height: 200px; padding: 22px 20px; }
  .brand-panel__name { font-size: clamp(22px, 5.5vw, 30px); }
  .brand-panel__num { margin-bottom: 24px; }
  .brand-filter { gap: 6px; }
  .brand-filter__chip { padding: 8px 14px; font-size: 12px; }
}
/* Small mobile (≤480px): mismo patrón carrusel pero typography más apretada */
@media (max-width: 480px) {
  .brand-grid { grid-auto-columns: 70vw; }
  .brand-grid[data-visible="1"],
  .brand-grid[data-visible="2"],
  .brand-grid[data-visible="3"] {
    grid-auto-columns: auto;
  }
  .brand-panel {
    min-height: 180px;
    padding: 18px 16px;
  }
  .brand-panel__num {
    font-size: 10px;
    margin-bottom: 18px;
  }
  .brand-panel__arrow { top: 16px; right: 14px; font-size: 12px; }
  .brand-panel__name {
    font-size: 22px;
    margin-bottom: 14px;
    line-height: 1.1;
  }
  .brand-panel__origin,
  .brand-panel__cat {
    font-size: 10px;
    letter-spacing: .08em;
  }
}

/* Legacy cat-tabs ya no se usan en home (refactor 16-may a editorial almanac)
   pero los marca-*.html los usan en pages de marca individual, así que las
   reglas viejas de cat-tab/cat-panel se mantienen abajo. */

/* ===================================================
   TOP MARCAS TAB · primera pestaña del portafolio
   (15-may: añadida para fusionar brand wall + portafolio)
   =================================================== */
.cat-tab--top {
  position: relative;
}
.cat-tab--top .cat-tab__num {
  color: var(--saffron);
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
.cat-tab--top.is-active .cat-tab__num,
.cat-tab--top.is-active .cat-tab__label,
.cat-tab--top.is-active .cat-tab__count {
  color: var(--ink);
}
.cat-tab--top.is-active::after {
  background: var(--saffron);
}
.cat-panel__icon-wrap--top {
  background: var(--saffron);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cat-panel__star {
  font-family: var(--display);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}
.cat-panel__hint {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 1;
}

/* ===================================================
   PAGE · QUIÉNES SOMOS (page-about / page-hero / page-cta)
   =================================================== */
.page-about .page-hero {
  padding: clamp(70px, 9vw, 120px) var(--gutter) clamp(40px, 5vw, 70px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.page-hero__inner .display {
  margin: 18px 0 22px;
}
.page-hero__inner .lede {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(17px, 1.55vw, 19px);
  color: var(--ink-soft);
}
.page-about .page-about__manifesto,
.page-about .page-about__story {
  padding-top: clamp(60px, 7vw, 100px);
  padding-bottom: clamp(60px, 7vw, 100px);
}
.page-about .page-about__manifesto {
  border-bottom: 1px dashed var(--line);
}
.page-about .storyline__panels--narrative .storyline__panel {
  max-width: 760px;
  margin: 0 auto;
}
.page-about .storyline__panels--narrative .storyline__text {
  font-size: clamp(17px, 1.45vw, 19px);
  line-height: 1.65;
  color: var(--ink);
  max-width: none;
}

/* CTA al final de la página */
.page-cta {
  background: var(--paper);
  padding: clamp(70px, 9vw, 110px) var(--gutter);
  border-top: 1px dashed var(--line);
  text-align: center;
}
.page-cta__inner {
  max-width: 820px;
  margin: 0 auto;
}
.page-cta__sub {
  margin: 18px auto 30px;
  max-width: 600px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.3vw, 17px);
}
.page-cta__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Nav: indicador de página actual */
.nav__links a.is-current {
  color: var(--ink);
}
.nav__links a.is-current::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--saffron);
  margin-top: 4px;
}

/* ============================================================
   ALL-BRANDS PANEL — 20 cards in 5 columns × 4 rows (2 rows + 2
   hidden rows). The toggle flips .is-collapsed off and reveals
   .b-card--extra cards with a soft staggered fade.
   The high-specificity selectors (`cat-panel.cat-panel--top
   [data-layout="all"]`) ensure these rules win over the legacy
   `data-layout` grids defined earlier in the file.
   ============================================================ */
.cat-panel.cat-panel--top[data-layout="all"] .brands-row--all {
  display: grid;
  gap: 10px;
  /* mobile default: 2 columnas siempre */
  grid-template-columns: repeat(2, 1fr);
}
.cat-panel.cat-panel--top[data-layout="all"] .brands-row--all > .b-card {
  min-height: 170px;
  padding: 18px 16px;
}
@media (min-width: 680px) {
  .cat-panel.cat-panel--top[data-layout="all"] .brands-row--all {
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
  }
  .cat-panel.cat-panel--top[data-layout="all"] .brands-row--all > .b-card {
    padding: 26px 22px;
  }
}
@media (min-width: 900px) {
  .cat-panel.cat-panel--top[data-layout="all"] .brands-row--all {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1180px) {
  .cat-panel.cat-panel--top[data-layout="all"] .brands-row--all {
    grid-template-columns: repeat(5, 1fr);
  }
}

.cat-panel--top.is-collapsed .brands-row--all > .b-card--extra {
  display: none;
}
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra {
  animation: cardFadeUp 0.5s ease-out both;
}
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(11) { animation-delay: 0s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(12) { animation-delay: .04s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(13) { animation-delay: .08s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(14) { animation-delay: .12s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(15) { animation-delay: .16s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(16) { animation-delay: .2s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(17) { animation-delay: .24s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(18) { animation-delay: .28s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(19) { animation-delay: .32s; }
.cat-panel--top:not(.is-collapsed) .brands-row--all > .b-card--extra:nth-child(20) { animation-delay: .36s; }

@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cat-panel__expand {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.b-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.b-toggle:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.b-toggle:active { transform: translateY(1px); }
.b-toggle .b-toggle__less { display: none; }
.b-toggle[aria-expanded="true"] .b-toggle__more { display: none; }
.b-toggle[aria-expanded="true"] .b-toggle__less { display: inline; }
.b-toggle[aria-expanded="true"] .b-toggle__icon { transform: rotate(180deg); }
.b-toggle__icon { transition: transform .25s ease; line-height: 1; }

/* =================================================================
   AJUSTES MOCKUP-FINAL · validado por Ana Abascal (17-may-2026)
   - Fuentes: Instrument Serif + Instrument Sans (de mockup-yellow)
   - Hero amarillo · resto del site en paper cream
   - Limpieza de font-variation-settings (Fraunces only, no aplican)
   ================================================================= */

/* Instrument Serif/Sans no soportan opsz/SOFT/WONK → reset */
.display, .display em,
.section__title, .section__title em,
.lede,
.hero__stats strong,
.section__label .num,
.ribbon__motto {
  font-variation-settings: normal;
}

/* Pesos editoriales nuevos para Instrument Serif (regular + italic only) */
.display          { font-weight: 400; }
.display em       { font-weight: 400; }
.section__title   { font-weight: 400; }
.section__title em{ font-weight: 400; }
.lede             { font-weight: 400; }

/* ---- Hero amarillo: acentos sobre saffron --------------------- */
.hero .eyebrow {
  color: var(--ink);
}
.hero .eyebrow__dot {
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(20,17,13,.12);
}
.hero .lede {
  color: var(--ink);
}
.hero .display em span {
  background: linear-gradient(transparent 62%, var(--paper) 62%, var(--paper) 92%, transparent 92%);
}

/* Botones del hero adaptados a fondo amarillo */
.hero .btn--primary {
  background: var(--ink);
  color: var(--saffron);
}
.hero .btn--primary:hover {
  background: #2a1a00;
  color: var(--paper);
  transform: translateY(-2px);
}
.hero .btn--ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.hero .btn--ghost:hover {
  background: var(--ink);
  color: var(--saffron);
}

/* Logo strip después del hero · vuelve a paper cream para crear corte editorial */
.logo-strip { background: var(--paper); }

/* ---- Brand grid · mascota La Pasiega rellena los huecos del filter ---- */
.brand-panel--mascot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  padding: 28px 28px;
  min-height: 220px;
  position: relative;
  /* JS aplica grid-column: span N dinámicamente según huecos del filter */
  overflow: hidden;
}
.brand-panel--mascot img {
  max-height: 180px;
  width: auto;
  height: auto;
  max-width: 60%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(20,17,13,.08));
  transition: transform .6s var(--easing);
}
.brand-panel--mascot:hover img {
  transform: translateY(-4px) rotate(-2deg);
}
/* Mobile: la mascota deja de expandirse y queda como una "ficha" normal */
@media (max-width: 720px) {
  .brand-panel--mascot {
    grid-column: auto;
    min-height: 180px;
  }
  .brand-panel--mascot img { max-height: 130px; }
}

/* ---- Toques de rojo carmín (de la mascota) ----
   Sólo como acento sutil: dot del eyebrow, hovers de filter chips,
   underline del CTA "¿Tu marca encaja...?" y arrows del brand grid. */

/* Dot del eyebrow → carmín */
.eyebrow__dot {
  background: var(--carmin);
  box-shadow: 0 0 0 4px rgba(201,0,53,.14);
}
/* En el hero amarillo, el dot ink se mantiene (mejor contraste) */
.hero .eyebrow__dot {
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(20,17,13,.12);
}

/* Filter chips: subrayado carmín en el chip activo */
.brand-filter__chip.is-active {
  position: relative;
}

/* Arrow del brand-panel al hacer hover → carmín */
.brand-panel:hover .brand-panel__arrow,
.brand-panel:focus-visible .brand-panel__arrow {
  color: var(--carmin);
}

/* Link "¿Tu marca encaja...?" — underline carmín on hover */
.products__footer .link-ghost { transition: color .25s ease; }
.products__footer .link-ghost:hover { color: var(--carmin); }
.products__footer .link-ghost::after { background: var(--carmin); }

/* Filter chip activo en carmín (era ink negro) */
.brand-filter__chip.is-active {
  background: var(--carmin);
  border-color: var(--carmin);
  color: var(--paper);
}
.brand-filter__chip.is-active .brand-filter__count { opacity: .85; }
.brand-filter__chip:focus-visible { outline: 2px solid var(--carmin); outline-offset: 3px; }

/* Brand panel · numeración cambia a carmín al hover */
.brand-panel:hover .brand-panel__num,
.brand-panel:focus-visible .brand-panel__num,
.brand-panel--anchor .brand-panel__num { color: var(--carmin); opacity: 1; }

/* Selection del texto → carmín suave (era saffron) */
::selection { background: var(--carmin); color: var(--paper); }

/* Sello del hero · agregar borde carmín sutil (si existe en HTML) */
.hero__seal { box-shadow: 0 0 0 2px var(--carmin), 0 12px 30px -12px rgba(20,17,13,.25); }

/* ============ COMPRESIÓN DE ESPACIOS ENTRE SECCIONES ============
   Las secciones tenían padding-block 76-160px que dejaba huecos enormes
   entre 04→05 y 05→06. Reducimos top/bottom + label margins. */

/* section__head: menor distancia entre label/title y el resto */
.section__head { margin: 0 auto clamp(28px, 3.6vw, 52px) 0; }
.section__label {
  padding-top: 14px;
  margin-bottom: clamp(22px, 2.8vw, 38px);
}

/* Catalogs (04) — reducir padding-top y padding-bottom */
.catalogs { padding: clamp(28px, 4vw, 56px) var(--gutter); }
.catalogs__note { margin-top: 28px; }

/* Distribution (05) — section__head top/bottom comprimidos */
.distribution > .section__head {
  padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(14px, 2vw, 24px);
}
.distribution > .pillars { margin-bottom: clamp(28px, 4vw, 56px); }

/* Contact (06) */
.contact { padding: clamp(28px, 4vw, 56px) var(--gutter); }

/* About / Products / qs-home — ya tienen padding compacto, pero
   aseguramos que no haya gaps duplicados en la transición. */
.products { padding: clamp(32px, 4.4vw, 60px) var(--gutter); }

/* ============ UNIFORMIZACIÓN DE TÍTULOS Y SUBTÍTULOS ============
   Todos los section__title al mismo tamaño (uno solo clamp). Las secciones
   centradas alinean label + title + sub al centro de forma consistente. */

/* Section title — tamaño único más conservador para evitar que un title
   largo (ej: sección 03 "Somos los distribuidores...") se vea enorme y un
   title corto (ej: 04 "Tres catálogos...") se vea proporcionalmente chico. */
.section__title {
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 28ch;
}

/* Section sub uniforme y consistente */
.section__sub {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  max-width: 58ch;
  margin-top: clamp(16px, 1.6vw, 24px);
  color: var(--ink-soft);
}

/* Centrado: label + title + sub TODOS centrados como bloque y como texto */
.section__head--center {
  text-align: center;
  margin-inline: auto;
}
.section__head--center .section__label {
  justify-content: center;
}
.section__head--center .section__title {
  margin-inline: auto;
  text-align: center;
  max-width: min(34ch, 100%);
}
.section__head--center .section__sub {
  margin-inline: auto;
  text-align: center;
  max-width: min(58ch, 100%);
}

/* Sección no-centrada: label + title + sub TODOS a la izquierda consistente */
.section__head:not(.section__head--center) .section__label,
.section__head:not(.section__head--center) .section__title,
.section__head:not(.section__head--center) .section__sub {
  text-align: left;
  margin-inline: 0;
}

/* qs-home (sección 02) tenía su propio override de tamaño — alinearlo al
   resto para uniformidad visual entre todas las secciones. */
.qs-home__head .section__title {
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: min(34ch, 100%);
  margin: 0 auto clamp(16px, 1.6vw, 24px);
}

/* Coverage / mapa (anidado dentro de distribution) — se queda con su
   tratamiento propio (dark bg). No tocar. */

/* =====================================================================
   ANA 18-may · OVERRIDES FINALES (mockup-final-three)
   Comentarios de Ana Abascal en "comentarios pagina.pptx.pdf"
   ===================================================================== */

/* ---------- 1) NAV amarillo (sticky sobre el hero amarillo) ---------- */
.nav.nav--yellow {
  background: var(--saffron);
  border-bottom: 1px solid rgba(20,17,13,.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* sin botón Hablemos → grid 2 columnas (logo · links) */
.nav.nav--yellow .nav__inner {
  grid-template-columns: auto 1fr;
}
.nav.nav--yellow .nav__cta { display: none; }
.nav.nav--yellow .nav__links {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: clamp(14px, 2vw, 32px);
  color: var(--ink);
}
.nav.nav--yellow .nav__links a {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.nav.nav--yellow .nav__links a::after { background: var(--ink); }
.nav.nav--yellow.is-scrolled {
  background: rgba(245, 197, 24, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(20,17,13,.22);
}
.nav .nav__logo { height: 44px; width: auto; }
@media (max-width: 980px) {
  .nav.nav--yellow .nav__links { gap: 14px; font-size: 13px; }
}

/* ---------- 2) HERO con muñeca caminando + subrayado negro ---------- */
.hero__visual--mascot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.hero__visual.hero__visual--mascot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(420px, 60vh, 640px);
  overflow: visible !important;
  padding: 0;
}
.hero__photo-frame {
  position: relative;
  width: clamp(260px, 32vw, 440px);
  aspect-ratio: 4 / 5;
  background: var(--paper-soft);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -24px rgba(20,17,13,.32),
    0 1px 0 rgba(20,17,13,.08);
  transform: none; /* era rotate(-1.5deg) — Ana 2-sep-2026: «enderezar la imagen» en desktop */
}
.hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Muñeca en la esquina superior izquierda — overlap la foto, mira hacia ella */
.hero__visual--mascot .hero__mascot {
  position: absolute !important;
  bottom: -20px !important;
  right: -32px !important;
  width: clamp(140px, 16vw, 220px) !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(20,17,13,.22));
  animation: pasiega-walk 4s var(--easing) infinite !important;
  z-index: 3;
  transform-origin: bottom center;
}
@media (max-width: 760px) {
  .hero__photo-frame { transform: rotate(0); }
  .hero__visual--mascot .hero__mascot { width: 120px !important; right: -10px !important; bottom: -8px !important; }
}
@keyframes pasiega-walk {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mascot { animation: none; }
}

/* Italic + subrayado negro en hero titles y section titles (Ana: "subrayar con negro") */
.hero .display em,
.qs-home__head .section__title em,
.section__title em,
.coverage .section__title em,
.brand-wall__title em {
  font-style: italic;
  font-family: var(--display);
}
/* Override del legacy saffron highlighter (lo reemplazamos por subrayado limpio) */
.hero .display em span,
.qs-home__head .section__title em span,
.section__title em span,
.coverage .section__title em span,
.brand-wall__title em span {
  background: none !important;
  padding: 0 !important;
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: clamp(2px, 0.18em, 4px);
  text-underline-offset: clamp(4px, 0.10em, 10px);
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

/* ---------- 3) LOGO-STRIP sin título, logos más grandes ---------- */
.logo-strip.logo-strip--xl {
  padding-block: clamp(32px, 4.4vw, 64px);
  background: var(--paper);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.logo-strip.logo-strip--xl .logo-strip__row a {
  height: clamp(56px, 6.5vw, 90px);
  min-width: clamp(80px, 9vw, 140px);
}
.logo-strip.logo-strip--xl .logo-strip__row img {
  max-height: 100%;
  max-width: clamp(120px, 13vw, 200px);
  filter: grayscale(.1);
  opacity: .92;
  transition: opacity .25s var(--easing), filter .25s var(--easing);
}
.logo-strip.logo-strip--xl .logo-strip__row a:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.logo-strip.logo-strip--xl .logo-strip__row {
  gap: clamp(48px, 6vw, 96px);
  padding-right: clamp(48px, 6vw, 96px);
}

/* ---------- 3b) LOGO-STRIP · RETAILERS (presentes en) ----------
   Marquee bajo "02 Qué hacemos": muestra cadenas, departamentales,
   gourmet, e-commerce y food-service donde están las marcas.
   Reusa la mecánica del .logo-strip pero con header editorial,
   bg paper-soft (puente al 03 Marcas) y dirección invertida vs
   el strip superior de partner-brands. */
.logo-strip.logo-strip--retailers {
  /* Yanis 21-may PM: retailers vuelve a paper-soft tras probar saffron — los
     fondos corporativos azules/rojos chocan con el amarillo. Beige fusiona mejor. */
  background: var(--paper-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(36px, 5vw, 64px);
}
.logo-strip.logo-strip--retailers .logo-strip__head {
  max-width: 720px;
  margin: 0 auto clamp(22px, 2.6vw, 32px);
  padding: 0 var(--gutter);
  text-align: center;
}
.logo-strip.logo-strip--retailers .logo-strip__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
}
.logo-strip.logo-strip--retailers .logo-strip__label .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--saffron);
  font-size: 0;
}
.logo-strip.logo-strip--retailers .logo-strip__sub {
  margin: 12px auto 0;
  max-width: 56ch;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.45;
  color: var(--ink);
}
.logo-strip.logo-strip--retailers .logo-strip__track--rev {
  animation-direction: reverse;
  animation-duration: 75s;
}
.logo-strip.logo-strip--retailers .logo-strip__row {
  gap: clamp(40px, 5vw, 72px);
  padding-right: clamp(40px, 5vw, 72px);
}
.logo-strip.logo-strip--retailers .logo-strip__row li { align-items: center; }
.logo-strip.logo-strip--retailers .logo-strip__row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(58px, 6.2vw, 90px);
  min-width: clamp(96px, 11vw, 160px);
  cursor: default;
}
.logo-strip.logo-strip--retailers .logo-strip__row img {
  max-height: 100%;
  max-width: clamp(140px, 15vw, 220px);
  width: auto;
  object-fit: contain;
  opacity: 1;
  /* Sobre paper-soft: multiply funde cualquier fondo blanco residual del PNG. */
  mix-blend-mode: multiply;
  transition: transform .3s var(--easing);
}
.logo-strip.logo-strip--retailers .logo-strip__row span:hover img {
  transform: translateY(-2px) scale(1.03);
}
@media (max-width: 720px) {
  .logo-strip.logo-strip--retailers { padding-block: clamp(34px, 7vw, 48px); }
  .logo-strip.logo-strip--retailers .logo-strip__sub { font-size: 15px; }
  .logo-strip.logo-strip--retailers .logo-strip__row span {
    height: 48px;
    min-width: 78px;
  }
  .logo-strip.logo-strip--retailers .logo-strip__row img { max-width: 110px; }
  .logo-strip.logo-strip--retailers .logo-strip__row {
    gap: clamp(28px, 7vw, 44px);
    padding-right: clamp(28px, 7vw, 44px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip.logo-strip--retailers .logo-strip__track--rev {
    animation: none;
  }
  .logo-strip.logo-strip--retailers .logo-strip__row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------- 4) QUIENES SOMOS — stats inline (reemplaza timeline) ---------- */
.qs-home.qs-home--beige {
  /* Yanis 21-may PM: 01 Quiénes Somos vuelve a paper-soft tras probar saffron —
     en sección larga de copy + stats el amarillo satura. Las anclas saffron quedan
     en hero / 02 Qué Hacemos sigue beige / retailers / 04 catálogo / 06 contacto / footer. */
  background: var(--paper-soft);
  padding-block: clamp(48px, 5.5vw, 80px) !important;
}
/* Center el .section__label line dentro del qs-home (default era left) */
.qs-home__head .section__label { justify-content: center; }
.qs-home__head .section__label::before { left: 50% !important; transform: translateX(-50%); }
.qs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 56px);
  margin: clamp(40px, 5vw, 72px) auto 0;
  max-width: 1080px;
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.qs-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qs-stat__num {
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
}
.qs-stat__lbl {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 720px) {
  .qs-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.qs-home__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

/* =====================================================================
   5) SERVICIOS — v3 simple legible sobre beige (Yanis 20-may PM)
   Cards limpios con número grande visible · sin atmósfera · sin ghosts.
   Fácil de leer · jerarquía clara · respira.
   ===================================================================== */
.about.about--yellow {
  background: var(--paper-soft);
  padding-block: clamp(56px, 6vw, 88px);
  position: relative;
}
.about--yellow::before { display: none; }

.about--yellow .section__head {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  margin-bottom: clamp(48px, 5vw, 80px);
}
.about--yellow .section__sub {
  color: var(--ink-soft);
  max-width: 56ch;
  margin: clamp(18px, 1.6vw, 24px) auto 0;
}

/* Grid 3 × 2 con cards limpias */
.pillars.pillars--6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  background: transparent !important;
  border: 0 !important;
}

.about--yellow .pillar {
  position: relative;
  background: #fff;
  border: 1px solid rgba(20,17,13,.10);
  border-radius: 8px;
  padding: clamp(28px, 2.8vw, 40px);
  isolation: isolate;
  transition: transform .3s var(--easing), border-color .3s var(--easing), box-shadow .3s var(--easing);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: clamp(240px, 24vw, 300px);
}
.about--yellow .pillar:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 18px 40px -18px rgba(20,17,13,.18);
}

/* Reset del pillar__head: número visible + título debajo */
.about--yellow .pillar__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 4px;
}
.about--yellow .pillar__num {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  color: var(--saffron-deep);
  letter-spacing: -.02em;
  flex: none;
}
.about--yellow .pillar__title {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--ink);
  font-weight: 400;
}
.about--yellow .pillar__text {
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* Línea fina saffron sutil arriba (acento de marca) */
.about--yellow .pillar::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: clamp(48px, 5vw, 72px);
  height: 3px;
  background: var(--saffron);
  border-radius: 8px 0 0 0;
}

@media (max-width: 980px) {
  .pillars.pillars--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pillars.pillars--6 { grid-template-columns: 1fr; gap: 14px; }
  .about--yellow .pillar { min-height: 0; padding: 24px 22px; }
  .about--yellow .pillar__num { font-size: 32px; }
  .about--yellow .pillar__title { font-size: 18px; }
}

/* ---------- 6) MARCAS — grid limpio + filtros editoriales ---------- */
.products.products--beige {
  background: var(--paper-soft);
  padding-block: clamp(48px, 5vw, 80px);
}

/* Filtros chips con iconos brandbook (Yanis 20-may v3) */
.products--beige .brand-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1180px;
  margin: clamp(28px, 3vw, 44px) auto 0;
  padding-inline: var(--gutter);
}
.products--beige .brand-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(20,17,13,.32);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  cursor: pointer;
  transition: background .25s var(--easing), color .25s var(--easing), border-color .25s var(--easing);
}
.brand-filter__icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  transition: filter .25s var(--easing);
}
.products--beige .brand-filter__chip:hover {
  border-color: var(--ink);
  background: rgba(20,17,13,.04);
}
.products--beige .brand-filter__chip.is-active {
  background: var(--saffron);
  color: var(--ink);
  border-color: var(--saffron);
}
/* Icons removidos (Yanis 21-may PM): se quedaron como ruido visual en el chip.
   La regla queda dormante por si alguna otra página los reintroduce. */
.brand-filter__icon { display: none !important; }
/* "Todas" chip en línea solo abajo (Yanis 20-may v5) — ahora saffron también */
.brand-filter__chip--all {
  padding: 12px 22px 12px 12px;
  gap: 12px;
  flex-basis: 100%;
  order: 99;
  justify-content: center;
  margin-top: 14px;
  background: var(--saffron) !important;
  color: var(--ink) !important;
  border-color: var(--saffron) !important;
  min-width: 260px;
  max-width: 320px;
  margin-inline: auto;
}
.products--beige .brand-filter { align-items: center; }
.brand-filter__chip--all .brand-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--saffron);
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
}
.brand-filter__chip--all.is-active .brand-filter__count {
  background: var(--ink);
  color: var(--saffron);
}

/* Banda Todas: eliminada (Yanis 20-may v3, ahora chip normal con badge saffron) */
.brand-filter__all { display: none !important; }
.brand-grid.brand-grid--clean {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 !important;
  margin: clamp(40px, 4vw, 64px) auto 0;
  max-width: 1280px;
  padding-inline: var(--gutter);
  list-style: none;
  background: transparent !important;
  border: 0 !important;
}
.brand-grid.brand-grid--clean li { list-style: none; background: transparent !important; }
/* ===== MARCAS · Mockup 01 "Hairline Grid" aplicado (Yanis 20-may v6 final) =====
   Grid 5 × 4 sobre cream paper-soft, sin card chrome.
   Hairlines 1px que se tocan formando un índice editorial limpio.
   Logos centrados + nombre italic abajo. La Pasiega = único logo en su forma
   orgánica amarilla (logo oficial fondoamarillo.png).
   ============================================================================ */
.brand-grid.brand-grid--clean {
  background: var(--paper-soft) !important;
  border: 1px solid var(--line) !important;
  /* border-right + border-bottom restaurados 21-may PM noche — antes eran 0, dejaban
     el grid sin líneas de cierre (right edge + Cap Soul bottom edge orphan) */
  max-width: 1100px !important;
  margin: clamp(32px, 3.5vw, 56px) auto 0 !important;
  padding-inline: 0 !important;
}
.brand-grid--clean > li { width: 100%; min-width: 0; }
.brand-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 18px !important;
  min-height: 180px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  transition: background .3s var(--easing) !important;
  transform: none !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
.brand-card:hover {
  background: rgba(245, 197, 24, .08) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* El wrapper logo se vuelve transparente — el img se muestra directo como en el mockup */
.brand-card__logo {
  display: contents !important;
}
.brand-card__logo img {
  max-width: 75% !important;
  max-height: 56px !important;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(.05);
  mix-blend-mode: multiply;
  transition: filter .3s var(--easing);
}
.brand-card:hover .brand-card__logo img { filter: grayscale(0); }
.brand-card__name {
  font-family: var(--display) !important;
  font-style: italic;
  font-size: 15px !important;
  text-align: center;
  color: var(--ink);
  opacity: .82;
  line-height: 1.2;
  padding: 0 !important;
  background: transparent !important;
  font-weight: 400 !important;
}
/* La Pasiega — logo oficial fondoamarillo. Wrapper transparente como el resto */
.brand-card--own .brand-card__logo--yellow {
  display: contents !important;
}
.brand-card--own .brand-card__logo--yellow img {
  filter: none;
  mix-blend-mode: normal;
  max-width: 92% !important;
  max-height: 108px !important;
}
.brand-card--own .brand-card__name {
  font-weight: 600 !important;
  opacity: 1;
}

/* Bordes de la celda: la última columna sin border-right · la última fila sin border-bottom */
.brand-grid--clean > li:nth-child(5n) .brand-card { border-right: 0 !important; }
/* últimas 6 celdas (sólo aplica si total es 21 = 4 filas completas + 1 = última fila tiene solo 1) */
.brand-grid--clean > li:nth-last-child(-n+1) .brand-card { border-bottom: 0 !important; }
/* Cuando son 20 brands + La Pasiega = 21 cells en 5 cols: 4 filas de 5 + 1 fila de 1 (huérfano) */
/* Para que el grid se sienta completo, hacemos que la celda 21 ocupe span 5 (full row) */
.brand-grid--clean > li:nth-child(21) { grid-column: span 5; }
.brand-grid--clean > li:nth-child(21) .brand-card { border-right: 0 !important; }

@media (max-width: 1080px) {
  .brand-grid.brand-grid--clean { grid-template-columns: repeat(4, 1fr) !important; }
  .brand-grid--clean > li:nth-child(5n) .brand-card { border-right: 1px solid var(--line) !important; }
  .brand-grid--clean > li:nth-child(4n) .brand-card { border-right: 0 !important; }
  .brand-grid--clean > li:nth-child(21) { grid-column: span 4; }
}
@media (max-width: 820px) {
  .brand-grid.brand-grid--clean { grid-template-columns: repeat(3, 1fr) !important; }
  .brand-grid--clean > li:nth-child(4n) .brand-card { border-right: 1px solid var(--line) !important; }
  .brand-grid--clean > li:nth-child(3n) .brand-card { border-right: 0 !important; }
  .brand-grid--clean > li:nth-child(21) { grid-column: span 3; }
}
@media (max-width: 560px) {
  .brand-grid.brand-grid--clean { grid-template-columns: repeat(2, 1fr) !important; }
  .brand-grid--clean > li:nth-child(3n) .brand-card { border-right: 1px solid var(--line) !important; }
  .brand-grid--clean > li:nth-child(2n) .brand-card { border-right: 0 !important; }
  .brand-grid--clean > li:nth-child(21) { grid-column: span 2; }
  .brand-card { padding: 22px 14px !important; min-height: 140px; }
  .brand-card__logo img { max-height: 44px !important; }
}

/* Filtros: oculta tarjetas que no coinciden */
.brand-grid.brand-grid--clean li.is-hidden { display: none; }

@media (max-width: 1080px) { .brand-grid.brand-grid--clean { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .brand-grid.brand-grid--clean { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .brand-grid.brand-grid--clean { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* ---------- 7) CATÁLOGO — sección saffron (Yanis 21-may: era bone grisáceo,
   ahora amarillo que cumple lo que dice el class name --yellow) ---------- */
.catalogs.catalogs--yellow {
  background: var(--saffron);
  padding-block: clamp(72px, 8vw, 120px);
}
.catalogs--yellow .section__sub { color: var(--ink); opacity: .78; }
.catalogs__grid.catalogs__grid--single {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.catalog-card.catalog-card--solo {
  max-width: 600px;
  width: 100%;
  background: var(--paper-soft);
  border: 1px solid rgba(20,17,13,.18);
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--radius);
  text-align: left;
  box-shadow: 0 24px 48px rgba(20,17,13,.10);
}
.catalog-card.catalog-card--solo .catalog-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.catalog-card.catalog-card--solo .catalog-card__tag {
  background: var(--saffron);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  padding: 8px 16px;
  border-radius: 999px;
  text-transform: uppercase;
}
.catalog-card.catalog-card--solo .catalog-card__date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.catalog-card.catalog-card--solo .catalog-card__title {
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  margin-bottom: 26px;
  color: var(--ink);
}
.catalog-card.catalog-card--solo .catalog-card__ctas {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.catalogs.catalogs--single .catalogs__note {
  margin-top: clamp(28px, 3vw, 40px);
  text-align: center;
  font-style: italic;
  color: var(--ink);
  opacity: .78;
  max-width: 640px;
  margin-inline: auto;
}

/* ---------- 8) CONTACTO — sin pie (eliminado Yanis 20-may v5) ---------- */
.contact.contact--beige {
  /* Yanis 21-may PM: section bg pasa a --paper (cream) para que matchee el bg
     del card A "marca". Card A se funde con la sección, sólo el card B dark
     destaca. Crea un cierre warm antes del footer saffron. */
  background: var(--paper);
  padding-block: clamp(72px, 8vw, 120px);
}
/* Pie de sección Hablemos — info directa (restored 21-may PM, aunque sea repetitivo) */
.contact__pie {
  max-width: var(--container);
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 32px);
  padding-inline: var(--gutter);
  border-top: 1px solid rgba(20,17,13,.12);
}
.contact__pie-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
}
.contact__pie-item dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.contact__pie-item dd {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.35;
  color: var(--ink);
}
.contact__pie-item dd a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--easing);
}
.contact__pie-item dd a:hover { border-bottom-color: var(--ink); }
@media (max-width: 820px) {
  .contact__pie-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
  .contact__pie-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Section divider editorial (entre Catálogo y Hablemos) */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 5vw, 64px) var(--gutter);
  background: var(--paper-soft);
  position: relative;
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink) 30%, var(--ink) 70%, transparent);
  opacity: .25;
}
.section-divider::before { margin-right: 24px; }
.section-divider::after  { margin-left: 24px; }
.section-divider__mark {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--saffron-deep);
  transform: rotate(8deg);
  display: inline-block;
}

/* ---------- 9) FOOTER 3 columnas ---------- */
.foot__cols.foot__cols--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 56px);
}
@media (max-width: 720px) {
  .foot__cols.foot__cols--3 { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- 10) Limpieza de elementos legacy (no se ven más) ---------- */
.qs-timeline,
.brand-panel--mascot,
.distribution,
.coverage { display: none !important; }
.logo-strip:not(.logo-strip--retailers) .logo-strip__head { display: none !important; }

/* Hide old brand-panel internals (cuando aún se cargue cualquier CSS legacy) */
.brand-panel__num,
.brand-panel__arrow,
.brand-panel__origin,
.brand-panel__cat { display: none !important; }

/* ---------- 11) Hero: ÚNICA sección amarilla (Yanis 20-may) + neutraliza paper/photo legacy ---------- */
.hero {
  background: var(--saffron) !important;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(255,255,255,.18) 0, transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(20,17,13,.06) 0, transparent 55%);
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero .hero__paper, .hero .hero__photo { display: none; }
.hero__visual--mascot .hero__mascot {
  filter: drop-shadow(0 18px 24px rgba(20,17,13,.20)) !important;
}

/* ---------- 12) Wordmark fallback para logos sin asset (duckduckgo offline) ---------- */
.logo-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--ink);
  white-space: nowrap;
  padding: 0 8px;
}
.logo-strip__row .logo-wordmark {
  height: 100%;
  min-width: 100px;
}
.brand-card__logo .logo-wordmark {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 28px);
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-card:hover .brand-card__logo .logo-wordmark {
  color: var(--ink);
}

/* ================================================================== */
/* MASCOT REPOSITION (21-may PM) — pasiega fuera de la foto             */
/* Antes: bottom-right de .hero__photo (tapaba ~32% horiz × 50% vert).  */
/* Ahora: bottom-center, en el negative-space amarillo entre botones    */
/* y foto. Tamaño reducido, mismo walking animation.                    */
/* ================================================================== */
.hero { position: relative; }

.hero__mascot.hero__mascot--corner {
  position: absolute;
  bottom: clamp(8px, 1.5vw, 20px);
  left: clamp(440px, 36vw, 560px);
  right: auto;
  top: auto;
  width: clamp(110px, 12vw, 160px);
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(20,17,13,.22));
  animation: pasiega-walk 4s var(--easing) infinite;
  z-index: 3;
  transform-origin: bottom center;
  pointer-events: none;
}

/* Tablet: centrarla horizontalmente cuando el grid colapsa */
@media (max-width: 980px) {
  .hero__mascot.hero__mascot--corner {
    left: auto;
    right: clamp(8px, 3vw, 24px);
    bottom: 8px;
    width: 96px;
  }
}

/* Mobile: corner bottom-right, pequeña */
@media (max-width: 600px) {
  .hero__mascot.hero__mascot--corner {
    width: 84px;
    right: 6px;
    bottom: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mascot.hero__mascot--corner { animation: none; }
}

/* ================================================================== */
/* MOBILE FIXES (21-may PM noche) — 3 issues:                          */
/*  1. Hero mobile reorder: text → img → ctas → mascot (less spacing) */
/*  2. Brand wall mobile: kill legacy carrusel rule en brand-grid--clean */
/*  3. Catalog card mobile: stack pill + date vertical                  */
/* ================================================================== */

/* ---- 1) HERO mobile reorder + tighter gaps ---- */
@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "visual"
      "ctas"
      "mascot" !important;
    row-gap: clamp(14px, 2.5vw, 22px) !important;
  }
  .hero__copy { grid-area: copy; align-self: start; }
  .hero__visual { grid-area: visual; min-height: auto !important; }
  .hero__ctas { grid-area: ctas; margin-top: 0 !important; justify-content: flex-start; }

  /* Mascot pasa a grid item (no absolute en mobile) */
  .hero__mascot.hero__mascot--corner {
    position: relative !important;
    grid-area: mascot;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: clamp(110px, 22vw, 140px) !important;
    height: auto !important;
    margin: 0 auto !important;
    justify-self: center;
    display: block;
  }

  /* Tighter padding interno del hero */
  .hero {
    padding-top: clamp(40px, 7vw, 80px) !important;
    padding-bottom: clamp(28px, 5vw, 60px) !important;
  }
  /* Lede más compacta en mobile */
  .hero__copy .lede { margin-top: 18px !important; }
}

/* ---- 2) BRAND WALL — destruir regla legacy carrusel horizontal en grid--clean ---- */
@media (max-width: 720px) {
  .brand-grid.brand-grid--clean {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    max-width: 1100px !important;
  }
  .brand-grid.brand-grid--clean > li {
    scroll-snap-align: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .brand-grid.brand-grid--clean > li:nth-child(2n) .brand-card {
    border-right: 0 !important;
  }
  .brand-grid.brand-grid--clean > li:nth-child(2n+1) .brand-card {
    border-right: 1px solid var(--line) !important;
  }
  /* Última fila huérfana (cell 21 en grid de 2 col): span full row */
  .brand-grid.brand-grid--clean > li:nth-child(21) {
    grid-column: span 2 !important;
  }
  .brand-grid.brand-grid--clean > li:nth-child(21) .brand-card {
    border-right: 0 !important;
  }
}

/* ---- 3) CATALOG CARD mobile — stack pill + date ---- */
@media (max-width: 560px) {
  .catalog-card.catalog-card--solo .catalog-card__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }
  .catalog-card.catalog-card--solo .catalog-card__tag {
    padding: 7px 14px;
    font-size: 10px;
    letter-spacing: .12em;
  }
  .catalog-card.catalog-card--solo .catalog-card__date {
    font-size: 10px;
  }
  .catalog-card.catalog-card--solo {
    padding: 26px 22px;
  }
  .catalog-card.catalog-card--solo .catalog-card__title {
    font-size: clamp(18px, 5.2vw, 22px);
    margin-bottom: 22px;
  }
  .catalog-card.catalog-card--solo .catalog-card__ctas {
    gap: 14px;
  }
  .catalog-card.catalog-card--solo .catalog-card__ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================== */
/* BRAND WALL — FILTERED STATES (21-may PM noche-2)                    */
/* Cuando el filter deja N cards visibles, el grid se encogía a 5 cols */
/* dejando columnas vacías a la derecha SIN bordes (zona muerta).       */
/* Fix: shrink grid template columns + max-width al N de cards,         */
/* restaura border-right en todas las cards (las nth-child(5n) que      */
/* tenían border-right:0 asumían 5 cols), y deshace el span 5 de cell 21*/
/* ================================================================== */
.brand-grid.brand-grid--clean[data-visible="1"] {
  grid-template-columns: minmax(0, 360px) !important;
  max-width: 360px !important;
}
.brand-grid.brand-grid--clean[data-visible="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 720px !important;
}
.brand-grid.brand-grid--clean[data-visible="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 880px !important;
}
.brand-grid.brand-grid--clean[data-visible="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
}
/* 5 visibles → 5 cols (1 fila perfecta) */
.brand-grid.brand-grid--clean[data-visible="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
}
/* 6 visibles → 3 cols × 2 filas (rectángulo limpio, evita huérfano) */
.brand-grid.brand-grid--clean[data-visible="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 880px !important;
}
/* 7 visibles → 4 cols (3+1 huérfano spans remaining) */
.brand-grid.brand-grid--clean[data-visible="7"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
}
/* 8 visibles → 4 cols × 2 filas (rectángulo limpio) */
.brand-grid.brand-grid--clean[data-visible="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
}
/* 9 visibles → 3 cols × 3 filas (rectángulo limpio) */
.brand-grid.brand-grid--clean[data-visible="9"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 880px !important;
}
/* 10 visibles → 5 cols × 2 filas (rectángulo limpio) */
.brand-grid.brand-grid--clean[data-visible="10"] {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
}

/* En estados filtrados (1-10 visibles): restaurar border-right + bottom en
   TODAS las cards (los nth-child(5n/4n/3n/2n) override de 0 asumían el
   default 5 cols, ya no aplican en grids reducidos). El border del container
   del lado derecho se encarga del cierre visual. */
.brand-grid.brand-grid--clean[data-visible="1"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="2"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="3"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="4"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="5"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="6"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="7"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="8"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="9"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="10"] > li .brand-card {
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
/* Cell 21 (Cap Soul orphan) deshace span 5 cols cuando está filtrado */
.brand-grid.brand-grid--clean:not([data-visible="21"]) > li:nth-child(21) {
  grid-column: auto !important;
}

/* Last visible card huérfana (impar count): spans las columnas restantes para
   cerrar el rectángulo (selector :nth-last-child(1 of S) — Chrome 111+/Safari 9+/FF 113+) */
@supports selector(:nth-last-child(1 of :not(.is-hidden))) {
  .brand-grid.brand-grid--clean[data-visible="7"] > li:nth-last-child(1 of :not(.is-hidden)) {
    grid-column: span 4 !important;
  }
}

/* ================================================================== */
/* BRAND WALL — FILTERED STATES en MOBILE (21-may PM noche-3)          */
/* En ≤720px las cards filtradas seguían en 2/3/4/5 cols → quedan      */
/* apretadas. Forzar 2 cols en todos los estados filtrados (2-10).      */
/* Para counts impares (3, 5, 7, 9), última card huérfana span 2 cols.  */
/* ================================================================== */
@media (max-width: 720px) {
  .brand-grid.brand-grid--clean[data-visible="2"],
  .brand-grid.brand-grid--clean[data-visible="3"],
  .brand-grid.brand-grid--clean[data-visible="4"],
  .brand-grid.brand-grid--clean[data-visible="5"],
  .brand-grid.brand-grid--clean[data-visible="6"],
  .brand-grid.brand-grid--clean[data-visible="7"],
  .brand-grid.brand-grid--clean[data-visible="8"],
  .brand-grid.brand-grid--clean[data-visible="9"],
  .brand-grid.brand-grid--clean[data-visible="10"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 1100px !important;
  }
  /* data-visible="1" se queda en 1 col (ya cubierto antes pero re-asegurar) */
  .brand-grid.brand-grid--clean[data-visible="1"] {
    grid-template-columns: minmax(0, 100%) !important;
    max-width: 100% !important;
  }
}

/* Counts impares (3, 5, 7, 9) en mobile: última card visible spans 2 cols */
@supports selector(:nth-last-child(1 of :not(.is-hidden))) {
  @media (max-width: 720px) {
    .brand-grid.brand-grid--clean[data-visible="3"] > li:nth-last-child(1 of :not(.is-hidden)),
    .brand-grid.brand-grid--clean[data-visible="5"] > li:nth-last-child(1 of :not(.is-hidden)),
    .brand-grid.brand-grid--clean[data-visible="7"] > li:nth-last-child(1 of :not(.is-hidden)),
    .brand-grid.brand-grid--clean[data-visible="9"] > li:nth-last-child(1 of :not(.is-hidden)) {
      grid-column: span 2 !important;
    }
  }
}

/* ================================================================== */
/* RIBBON + MOBILE NAV — fixes mobile (21-may PM noche-4)              */
/* (1) Ribbon en ≤640px: hide dots, tighter font/gap → fit en 1 línea  */
/* (2) Burger menu (3 barras) + overlay nav mobile                      */
/* ================================================================== */

/* (1) Ribbon compacto en mobile */
@media (max-width: 640px) {
  .ribbon { font-size: 11px; }
  .ribbon__inner {
    padding: 8px clamp(10px, 3vw, 16px);
    gap: 8px;
  }
  .ribbon__meta { gap: 8px; flex-wrap: nowrap; }
  .ribbon__link { white-space: nowrap; }
  .ribbon .dot { display: none; }  /* remove separator dots para ahorrar espacio */
  .lang { padding: 1px; }
  .lang__btn { padding: 3px 8px; font-size: 10px; letter-spacing: .06em; }
}
@media (max-width: 420px) {
  /* iPhone narrow: aún más compacto, mantener todo en una línea */
  .ribbon { font-size: 10px; }
  .ribbon__inner { padding: 7px 10px; gap: 6px; }
  .ribbon__meta { gap: 6px; }
  .lang__btn { padding: 2px 6px; font-size: 10px; }
}

/* (2) Burger button — visible solo en mobile */
.nav__burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 60;
}
.nav__burger-bar {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--easing), opacity .25s var(--easing);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* En mobile: mostrar burger, nav__links se vuelve overlay full-screen */
@media (max-width: 980px) {
  .nav__burger { display: flex; }
  .nav__inner {
    grid-template-columns: auto 1fr !important;
    justify-content: space-between;
  }
  .nav__brand { grid-column: 1; }
  .nav__burger { grid-column: 2; justify-self: end; }

  .nav__links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: min(82vw, 360px);
    height: 100vh;
    height: 100dvh;
    padding: 96px 32px 32px;
    background: var(--saffron);
    box-shadow: -20px 0 40px rgba(20,17,13,.18);
    gap: 4px;
    font-size: 20px;
    font-weight: 500;
    transform: translateX(100%);
    transition: transform .35s var(--easing);
    z-index: 55;
    overflow-y: auto;
  }
  .nav.is-open .nav__links {
    transform: translateX(0);
  }
  .nav__links a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(20,17,13,.12);
    font-family: var(--display);
    font-style: italic;
    font-size: 22px;
  }
  .nav__links a::after { display: none; }  /* sin underline animation en mobile */

  /* Backdrop scrim cuando el menú está abierto */
  .nav.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20,17,13,.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 54;
    animation: nav-backdrop-fade .25s var(--easing);
  }
  /* Bloquear scroll del body cuando el menú está abierto (via class en body) */
  body.menu-open { overflow: hidden; }
}
@keyframes nav-backdrop-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ================================================================== */
/* FILTER CHIPS + BRAND WALL — fixes mobile (21-may PM noche-5)        */
/* (1) Chips de categoría compactos en mobile (3-4 cols estilo         */
/*     convenientdistributor.com) en vez de 1 por línea                 */
/* (2) Quitar bordes del brand wall en mobile (limpia, sin grid lines) */
/* ================================================================== */

/* (1) Filter chips compactos en mobile */
@media (max-width: 720px) {
  .products--beige .brand-filter {
    gap: 8px;
    padding-inline: 16px;
  }
  .products--beige .brand-filter__chip {
    flex: 1 1 calc(50% - 8px);  /* 2 cols */
    min-width: 0;
    padding: 9px 12px 9px 10px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    gap: 6px;
    justify-content: flex-start;
    line-height: 1.15;
  }
  .products--beige .brand-filter__chip .brand-filter__icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }
  /* Botón "Todas" abajo sigue full-width (ya lo era), pero más compacto */
  .brand-filter__chip--all {
    flex-basis: 100% !important;
    padding: 12px 18px 12px 14px !important;
    font-size: 13px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  .products--beige .brand-filter__chip {
    font-size: 11px !important;
    padding: 8px 10px 8px 8px !important;
  }
  .products--beige .brand-filter__chip .brand-filter__icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* (2) Brand wall sin bordes en mobile (limpia y aireada) */
@media (max-width: 720px) {
  .brand-grid.brand-grid--clean {
    border: 0 !important;
    background: transparent !important;
  }
  .brand-grid.brand-grid--clean > li .brand-card {
    border: 0 !important;
  }
  /* Override de los rules generales que ponían border-right/bottom: 1px */
  .brand-grid.brand-grid--clean > li:nth-child(2n+1) .brand-card,
  .brand-grid.brand-grid--clean > li:nth-child(2n) .brand-card,
  .brand-grid.brand-grid--clean > li:nth-child(3n) .brand-card,
  .brand-grid.brand-grid--clean > li:nth-child(4n) .brand-card,
  .brand-grid.brand-grid--clean > li:nth-child(5n) .brand-card {
    border: 0 !important;
  }
  /* Card padding + min-height redux para grid abierto */
  .brand-grid.brand-grid--clean .brand-card {
    padding: 18px 12px !important;
    min-height: 120px;
    gap: 10px;
  }
}

/* Last chip (count impar → solo en fila): que ocupe centrado en mobile */
@media (max-width: 720px) {
  .products--beige .brand-filter > .brand-filter__chip:not(.brand-filter__chip--all):last-of-type:nth-of-type(odd) {
    flex-basis: 100% !important;
    justify-content: center !important;
  }
}

/* ================================================================== */
/* BRAND WALL borderless — desktop también (21-may PM noche-6)         */
/* User: "quitar las lineas en desktop también" — el pattern limpio    */
/* de mobile se aplica a todos los breakpoints                          */
/* ================================================================== */
.brand-grid.brand-grid--clean {
  border: 0 !important;
  background: transparent !important;
}
.brand-grid.brand-grid--clean > li .brand-card {
  border: 0 !important;
}
/* Override de todos los nth-child borders previos */
.brand-grid.brand-grid--clean > li:nth-child(2n+1) .brand-card,
.brand-grid.brand-grid--clean > li:nth-child(2n) .brand-card,
.brand-grid.brand-grid--clean > li:nth-child(3n) .brand-card,
.brand-grid.brand-grid--clean > li:nth-child(4n) .brand-card,
.brand-grid.brand-grid--clean > li:nth-child(5n) .brand-card,
.brand-grid.brand-grid--clean[data-visible="1"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="2"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="3"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="4"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="5"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="6"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="7"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="8"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="9"] > li .brand-card,
.brand-grid.brand-grid--clean[data-visible="10"] > li .brand-card {
  border: 0 !important;
}

/* ================================================================== */
/* HERO MOBILE — 19-ago-2026: la foto VUELVE en celular.               */
/* En mayo se ocultó porque era imagen de banco y no era de ellos; la  */
/* muñeca funcionaba mejor de ancla. Ahora es el shoot propio de Ana y */
/* en celular está la mayor parte del tráfico, así que se muestra.     */
/* Composición: copy → foto → ctas, con la muñeca encimada abajo a la  */
/* izquierda de la foto (misma área del grid, por eso se traslapan).   */
/* ================================================================== */
@media (max-width: 980px) {
  .hero__visual,
  .hero__visual--mascot {
    display: flex !important;
    grid-area: visual !important;
    min-height: 0 !important;
    justify-content: center;
    align-items: center;
    margin-top: 0 !important;
  }
  .hero__grid {
    grid-template-areas:
      "copy"
      "visual"
      "mascot"
      "ctas" !important;
    row-gap: clamp(20px, 3.5vw, 32px) !important;
  }
  .hero__photo-frame {
    width: min(74vw, 340px) !important;
    margin-inline: auto;
  }
  /* Muñeca: fila propia sobre el amarillo, debajo de la foto (Ana 24-ago:
     encimada a la foto se perdía contra la zona oscura y no se veía en celular) */
  .hero__mascot.hero__mascot--corner {
    position: relative !important;
    grid-area: mascot !important;
    align-self: start !important;
    justify-self: center !important;
    bottom: auto !important; left: auto !important;
    right: auto !important; top: auto !important;
    width: clamp(96px, 24vw, 132px) !important;
    height: auto !important;
    margin: -6px auto 0 !important;
    z-index: 2;
    display: block;
    filter: drop-shadow(0 14px 22px rgba(20,17,13,.22)) !important;
  }
  .hero__ctas {
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }
}

/* ================================================================== */
/* TIENDA ONLINE — sección 05 redirect a Importaciones Cantabria        */
/* (Yanis 21-may PM noche-8) — channel D2C / B2C                       */
/* ================================================================== */
/* ===================================================
   05 · TIENDA — Postcard card (Yanis 21-may PM noche)
   Card asimétrico tipo postal: izquierda paper-soft con copy
   editorial · URL, derecha dark ink con flecha saffron oversize
   como CTA. Whole card es el <a> link. Dashed perforation
   entre lados refuerza el feel "tear here / take away".
   =================================================== */
.shop-link {
  background: var(--paper-soft);
  padding-block: clamp(64px, 8vw, 110px);
  padding-inline: var(--gutter);
  position: relative;
}
.shop-card {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  isolation: isolate;
  transition: transform .4s var(--easing), box-shadow .4s var(--easing), border-color .4s var(--easing);
}
.shop-card::before {
  /* Perforation line entre copy y action */
  content: "";
  position: absolute;
  inset: 14px auto 14px calc((100% / 2.45) * 1.45);
  width: 1px;
  background-image: linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 14px);
  background-size: 1px 14px;
  z-index: 1;
}
.shop-card:hover,
.shop-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -22px rgba(20,17,13,.32), 0 6px 14px -8px rgba(20,17,13,.18);
  border-color: rgba(20,17,13,.32);
  outline: none;
}
/* LEFT — copy editorial */
.shop-card__copy {
  padding: clamp(32px, 4.4vw, 64px) clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}
.shop-card__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.shop-card__label .num { font-weight: 600; color: var(--ink); }
.shop-card__label .sep { opacity: .5; }
.shop-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--ink);
}
.shop-card__title em {
  font-style: italic;
  display: inline-block;
}
.shop-card__title em span {
  position: relative;
}
.shop-card__title em span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: 2px;
  background: currentColor;
  transform-origin: left;
  transition: transform .5s var(--easing);
}
.shop-card:hover .shop-card__title em span::after,
.shop-card:focus-visible .shop-card__title em span::after {
  transform: scaleX(1.04);
}
.shop-card__body {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.5;
  color: var(--ink);
  opacity: .82;
  max-width: 40ch;
}
.shop-card__url {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(8px, 1vw, 14px) 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.shop-card__url .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--saffron);
}
.shop-card__url .mono { color: var(--ink); font-weight: 500; }
.shop-card__url .ext {
  font-style: italic;
  letter-spacing: 0;
  opacity: .7;
  font-family: var(--display);
  font-size: 13px;
}
/* RIGHT — action zone (dark + saffron arrow) */
.shop-card__action {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: clamp(28px, 3.6vw, 48px) clamp(24px, 3vw, 40px);
  text-align: center;
  gap: clamp(16px, 2vw, 28px);
  overflow: hidden;
}
.shop-card__action::before {
  /* Subtle radial saffron glow behind arrow */
  content: "";
  position: absolute;
  inset: auto auto -30% -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle at 50% 50%, rgba(245,197,24,.16), transparent 56%);
  pointer-events: none;
  z-index: 0;
}
.shop-card__tag {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--saffron);
  opacity: .9;
  align-self: start;
}
.shop-card__arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(100px, 12vw, 160px);
  height: clamp(100px, 12vw, 160px);
  border-radius: 50%;
  background: var(--saffron);
  color: var(--ink);
  transition: transform .45s var(--easing), background .3s var(--easing);
}
.shop-card__arrow svg {
  width: 56%;
  height: 56%;
}
.shop-card:hover .shop-card__arrow,
.shop-card:focus-visible .shop-card__arrow {
  transform: translate(4px, -4px) rotate(2deg);
  background: var(--saffron-deep);
}
.shop-card__cta {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--paper);
  align-self: end;
  letter-spacing: -.005em;
}
.shop-card__cta::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--saffron);
  margin-top: 6px;
  width: 32px;
  margin-inline: auto;
  transform-origin: center;
  transition: width .35s var(--easing);
}
.shop-card:hover .shop-card__cta::after,
.shop-card:focus-visible .shop-card__cta::after {
  width: 56px;
}

@media (max-width: 860px) {
  .shop-card { grid-template-columns: 1fr; border-radius: 14px; }
  .shop-card::before {
    /* Perforation now horizontal */
    inset: auto 16px auto 16px;
    top: calc(100% - 0px); /* hidden — handled by alt rule below */
    display: none;
  }
  .shop-card__copy { padding: clamp(28px, 7vw, 40px) clamp(22px, 6vw, 32px); }
  .shop-card__action {
    padding: clamp(28px, 7vw, 40px) clamp(22px, 6vw, 32px);
    grid-template-rows: auto auto auto;
    border-top: 1px dashed rgba(245,197,24,.45);
  }
  .shop-card__arrow {
    width: 96px;
    height: 96px;
  }
  .shop-card__title { font-size: clamp(36px, 9vw, 52px); }
}
@media (max-width: 480px) {
  .shop-card__url { flex-wrap: wrap; gap: 6px 10px; }
  .shop-card__url .ext { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-card,
  .shop-card__arrow,
  .shop-card__title em span::after,
  .shop-card__cta::after { transition: none; }
}

/* Tienda link en el nav — visual distintivo (saffron underline + arrow) */
.nav__links .nav__shop-link {
  position: relative;
  font-weight: 500;
}
.nav__links .nav__shop-link::after {
  background: var(--saffron-deep) !important;
  transform: scaleX(1) !important;
  height: 2px !important;
  opacity: .5;
}
.nav__links .nav__shop-link:hover::after { opacity: 1 !important; }

/* ===================================================
   BRAND PAGE V2 — layout corto y visual (21-may PM)
   Reemplaza .brand-page (logo card + specs B2B largos).
   Estructura: hero banner full-bleed + intro breve +
   portafolio 4 imágenes lifestyle + CTA dark.
   Usado primero en marca-st-dalfour.html como prueba.
   =================================================== */
.bp2 {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.bp2__back {
  padding: 24px 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp2__back a { color: inherit; text-decoration: none; transition: color .2s ease; }
.bp2__back a:hover { color: var(--saffron-deep); }

/* HERO BANNER — imagen full-width + título debajo */
.bp2__hero {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 44px);
  padding: 12px 0 clamp(60px, 8vw, 100px);
}
.bp2__hero-img {
  width: 100%;
  aspect-ratio: 16 / 8;
  background: var(--paper-soft);
  border-radius: 10px;
  overflow: hidden;
}
.bp2__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bp2__hero-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 800px;
}
.bp2__hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp2__hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -.03em;
  color: var(--ink);
}
.bp2__hero-title em {
  font-style: italic;
  font-weight: 400;
}

/* INTRO — 2 cols: numeración + copy breve (≤ 2 párrafos) */
.bp2__intro {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(40px, 5vw, 64px) 0 clamp(60px, 8vw, 100px);
  border-top: 1px solid var(--line);
}
.bp2__intro-num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.bp2__intro-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 64ch;
}
.bp2__intro-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.bp2__intro-title em {
  font-style: italic;
}
.bp2__intro-copy p {
  font-family: var(--display);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* PORTAFOLIO */
.bp2__portfolio {
  padding: clamp(60px, 8vw, 100px) 0;
  border-top: 1px solid var(--line);
}
.bp2__sec-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(36px, 5vw, 60px);
  align-items: end;
}
.bp2__sec-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp2__sec-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.0;
  letter-spacing: -.02em;
}
.bp2__sec-title em { font-style: italic; }

.bp2__portfolio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.bp2__product {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}
.bp2__product--wide { grid-column: span 6; }

.bp2__product-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--paper-soft);
  border-radius: 8px;
  overflow: hidden;
}
.bp2__product--wide .bp2__product-img {
  aspect-ratio: 16 / 7;
}
.bp2__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.bp2__product:hover .bp2__product-img img {
  transform: scale(1.03);
}
.bp2__product figcaption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}
.bp2__product-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp2__product-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.bp2__product figcaption p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* CTA — bloque oscuro idéntico al .brand-page__cta original */
.bp2__cta {
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: clamp(36px, 5vw, 64px);
  margin: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.bp2__cta-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--paper);
  max-width: 24ch;
}
.bp2__cta-title em {
  font-style: italic;
  color: var(--saffron);
}
.bp2__cta-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .bp2__hero-img { aspect-ratio: 16 / 10; }
  .bp2__intro { grid-template-columns: 1fr; gap: 18px; }
  .bp2__sec-head { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .bp2__portfolio-grid { grid-template-columns: 1fr; }
  .bp2__product,
  .bp2__product--wide { grid-column: span 1; }
  .bp2__product-img,
  .bp2__product--wide .bp2__product-img { aspect-ratio: 4 / 3; }
  .bp2__cta { grid-template-columns: 1fr; padding: 36px 30px; gap: 28px; }
  .bp2__cta-ctas { align-items: stretch; }
  .bp2__cta-ctas .btn { justify-content: center; }
  .bp2__cta-ctas .link-ghost { text-align: center; }
}

/* CTA — variante "¿Dónde comprar?" (2 filas: pieza + mayoreo) */
.bp2__cta--shop {
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: left;
}
.bp2__cta--shop .bp2__cta-title {
  max-width: none;
  text-align: left;
}
.bp2__cta-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bp2__cta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.bp2__cta-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.bp2__cta-copy {
  font-family: var(--sans);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
  color: var(--paper);
  opacity: .92;
  margin: 0;
}
.bp2__cta-copy strong {
  font-weight: 600;
  color: var(--saffron);
  letter-spacing: .01em;
}
@media (max-width: 720px) {
  .bp2__cta-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 0;
  }
  .bp2__cta-row .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .bp2__hero-title { font-size: clamp(48px, 13vw, 72px); }
  .bp2__hero-img { aspect-ratio: 4 / 3; border-radius: 8px; }
  .bp2__intro { padding: 32px 0 56px; }
  .bp2__portfolio { padding: 56px 0; }
}

/* ===================================================
   BRAND PAGE V2 — JAR GRID (portafolio con renders 3D)
   Usado en marca-st-dalfour.html con los renders oficiales
   stdalfour.com (PNG transparente sobre paper-soft).
   =================================================== */
.bp2__jars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
}
.bp2__jar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  text-align: center;
}
.bp2__jar-img {
  background: var(--paper-soft);
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.4vw, 36px) clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  transition: background-color .4s ease;
}
.bp2__jar:hover .bp2__jar-img {
  background: #FFFDF4;
}
.bp2__jar-img img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.bp2__jar:hover .bp2__jar-img img {
  transform: translateY(-4px) scale(1.03);
}
.bp2__jar figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.bp2__jar-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
}
.bp2__jar-fr {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp2__jars-note {
  margin: clamp(28px, 3vw, 44px) 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 70ch;
}

/* ===================================================
   BRAND PAGE V2 — LIFESTYLE ROW (Cómo se disfruta)
   3 cards lifestyle (recipe photos) en row · 1 col mobile
   =================================================== */
.bp2__lifestyle {
  padding: clamp(60px, 8vw, 100px) 0;
  border-top: 1px solid var(--line);
}
.bp2__lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.bp2__life-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.bp2__life-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--paper-soft);
  border-radius: 8px;
  overflow: hidden;
}
.bp2__life-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.bp2__life-card:hover .bp2__life-img img {
  transform: scale(1.04);
}
.bp2__life-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}
.bp2__life-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp2__life-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* RESPONSIVE — jars + lifestyle */
@media (max-width: 980px) {
  .bp2__jars { grid-template-columns: repeat(3, 1fr); }
  .bp2__lifestyle-grid { grid-template-columns: 1fr; gap: 28px; }
  .bp2__life-img { aspect-ratio: 16 / 11; }
}
@media (max-width: 640px) {
  .bp2__jars { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .bp2__jar-img { aspect-ratio: 1 / 1.2; padding: 18px 12px; }
  .bp2__lifestyle { padding: 56px 0; }
  .bp2__life-img { aspect-ratio: 4 / 5; }
}

/* ===================================================
   BRAND PAGE V2.1 — BANNER LOGO + BLOQUE MARCA 2 COLS
   Estructura nueva pedida por Yanis (sketch libreta 21-may):
   Banner con logo · Bloque marca/producto · Portafolio 6 SKUs · CTA cierre.
   Sin sección "Cómo se disfruta", sin numeración 01/02/03.
   =================================================== */

/* Banner — logo de marca centrado sobre fondo paper-soft */
.bp2__banner {
  width: 100%;
  background: var(--paper-soft);
  border-radius: 10px;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 64px);
  margin: 12px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bp2__banner-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 720px;
}
.bp2__banner-logo {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  display: block;
}

/* Bloque marca — 2 cols: copy + media (foto producto) */
.bp2__brand {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding: clamp(56px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--line);
}
.bp2__brand-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  max-width: 56ch;
}
.bp2__brand-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bp2__brand-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 88px);
  line-height: 0.95;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
.bp2__brand-name em {
  font-style: italic;
  font-weight: 400;
}
.bp2__brand-lead {
  font-family: var(--display);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.bp2__brand-links {
  list-style: none;
  padding: 0;
  margin: clamp(6px, 1vw, 12px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2vw, 24px);
}
.bp2__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .01em;
  transition: color .2s ease;
}
.bp2__brand-link:hover { color: var(--saffron-deep); }
.bp2__brand-link-ic {
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: color .2s ease;
}
.bp2__brand-link:hover .bp2__brand-link-ic { color: var(--saffron-deep); }

.bp2__brand-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--paper-soft);
  border-radius: 10px;
  overflow: hidden;
}
.bp2__brand-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Override sec-head — sin numeral, queda como bloque vertical título + lead, centrado */
.bp2__sec-head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 20px);
  grid-template-columns: none;
  margin: 0 auto clamp(36px, 5vw, 60px);
  max-width: 70ch;
  align-items: center;
  text-align: center;
}
.bp2__sec-lead {
  font-family: var(--display);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}

/* Override jars — 3 cols default para 6 SKUs (antes 4 para 8) · compactado 21-may */
.bp2__jars {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 22px);
  max-width: 880px;
  margin: 0 auto;
}
.bp2__jars .bp2__jar-img {
  aspect-ratio: 1 / 1.1;
  padding: clamp(14px, 1.6vw, 24px) clamp(10px, 1.2vw, 18px);
}
.bp2__jars .bp2__jar-name {
  font-size: clamp(16px, 1.2vw, 19px);
}
.bp2__jars .bp2__jar-fr {
  font-size: 10px;
}

/* CTA "Ver catálogo completo" debajo del grid de jars */
.bp2__jars-cta {
  display: flex;
  justify-content: center;
  margin: clamp(36px, 4vw, 52px) 0 0;
}

/* Variante landscape — para packshots horizontales (paquetes pasta, salsas, etc.) */
.bp2__jars--landscape .bp2__jar-img {
  aspect-ratio: 1 / 0.78;
  padding: clamp(10px, 1.2vw, 18px) clamp(8px, 1vw, 14px);
}
.bp2__jars--landscape .bp2__jar-img img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Variante dark — para imágenes lifestyle con fondo negro/dark (brand collabs, theatrical shots) */
.bp2__brand-media--dark {
  background: var(--ink);
  aspect-ratio: 4 / 3;
}
.bp2__brand-media--dark img {
  object-fit: contain;
  padding: clamp(20px, 3vw, 48px);
}

/* Variante btn — outline sobre fondo dark (para .bp2__cta) */
.btn--outline-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, .35);
}
.btn--outline-light:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  transform: translateY(-2px);
}

/* CTA cierre — alinear los 2 botones horizontal en desktop */
.bp2__cta .bp2__cta-ctas {
  flex-direction: row;
  gap: 14px;
  align-items: center;
}

/* Responsive */
@media (max-width: 980px) {
  .bp2__banner { padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 40px); }
  .bp2__banner-logo { max-height: 160px; }
  .bp2__buy { padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 40px); }
  .bp2__brand {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 0;
  }
  .bp2__brand-media { aspect-ratio: 4 / 3; max-height: 460px; }
  .bp2__jars { grid-template-columns: repeat(3, 1fr); }
  .bp2__cta .bp2__cta-ctas { flex-direction: column; align-items: stretch; }
  .bp2__cta .bp2__cta-ctas .btn { justify-content: center; }
}
@media (max-width: 640px) {
  .bp2__banner { padding: 36px 20px; border-radius: 8px; }
  .bp2__banner-logo { max-height: 120px; }
  .bp2__buy { padding: 40px 20px; border-radius: 8px; margin-bottom: 40px; }
  .bp2__brand-name { font-size: clamp(44px, 12vw, 64px); }
  .bp2__brand-media { aspect-ratio: 1 / 1; }
  .bp2__jars { grid-template-columns: repeat(2, 1fr); }
  .bp2__jars-cta .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   V2.15 · Ronda de feedback de Ana (jun 2026)
   Limpieza editorial: sin numeración/eyebrows de sección, botones unificados,
   marcas solo-logo, cards de "Qué hacemos" sin hover tipo-botón.
   ===================================================================== */

/* (1) Quitar numeración + eyebrows de sección en todo el sitio
   (Ana: "quitar numeración de secciones y títulos, p.ej. 01 quiénes somos"). */
.section__label { display: none !important; }
.shop-card__label { display: none !important; }

/* (2) Marcas: solo el logo, sin el nombre debajo (Ana). */
.brand-grid--clean .brand-card__name { display: none !important; }

/* (3) Marcas: la última card huérfana NO se estira al filtrar
   (Ana: "Cap Soul mismo tamaño que las demás aunque quede sola abajo"). */
.brand-grid.brand-grid--clean > li:nth-last-child(1 of :not(.is-hidden)) { grid-column: auto !important; }
.brand-grid.brand-grid--clean > li:nth-child(21) { grid-column: auto !important; }

/* (4) "Qué hacemos": las cards no son clicables → sin hover tipo-botón (Ana). */
.about--yellow .pillar,
.about--yellow .pillar:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #fff !important;
  border-color: rgba(20,17,13,.10) !important;
  cursor: default;
}
.about--yellow .pillar:hover .pillar__text { color: var(--ink-soft); }

/* (5) Botones unificados: footer de Marcas con dos CTAs centrados. */
.products__footer--ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

/* =====================================================================
   V2.16 · Tienda online — botón clásico en vez del círculo-flecha (Yanis)
   ===================================================================== */
.shop-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 30px);
}
.shop-card__tag { align-self: center; }
.shop-card__btn {
  position: relative;
  z-index: 1;
  padding: 15px 30px;
  font-size: 15px;
}

/* =====================================================================
   V2.17 · Marcas — iconos de categoría restaurados + logos uniformes (Yanis)
   ===================================================================== */
/* (1) Iconos de categoría ocultos — filtros sólo texto (Yanis 23-jun). */
.products--beige .brand-filter__chip .brand-filter__icon {
  display: none !important;
}

/* (2) Logos de marca: cada uno en un box del mismo tamaño, centrado y más grande
   (Yanis: "más grandes y uniformados, que todos tomen el mismo espacio"). */
.brand-grid--clean .brand-card__logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
}
/* Altura FIJA igual para todos → mismo peso óptico en cada celda
   (el ancho varía por la forma del logo, pero la altura uniforme es lo que
   el ojo lee como "mismo espacio"). Ultra-anchos topan al 94% del ancho. */
.brand-grid--clean .brand-card__logo img {
  height: 84px !important;   /* 56 → 84: Ana 25-ago, «¿más grandes todavía?» */
  width: auto !important;
  max-width: 94% !important;
  max-height: none !important;
  object-fit: contain;
}
@media (max-width: 560px) {
  .brand-grid--clean .brand-card__logo { height: 70px; }
  .brand-grid--clean .brand-card__logo img { height: 46px !important; }
}

/* V2.18 · Marcas — placas (tiles): BLOQUE RETIRADO 19-ago-2026.
   Existía para forzar un footprint uniforme cuando cada logo traía su propio
   aire interno. Ahora los 21 logos son lienzos 800x400 normalizados por área
   óptica, así que el footprint ya es parejo desde el asset — y Ana pidió
   explícitamente los logos «sin cuadro ni delineado de fondo».
   Ver el bloque FASE 2 más abajo. */

/* ══════════════════════════════════════════════════════════════════════════
   FASE 2 · Cambios del home pedidos por Ana — 19-ago-2026
   ══════════════════════════════════════════════════════════════════════ */

/* — Cinta negra: WhatsApp (WA Business, lo atiende Cristian) ————————————— */
.ribbon__wa { display: inline-flex; align-items: center; gap: 6px; }
.ribbon__wa svg { flex: none; opacity: .92; }
@media (max-width: 900px) { .ribbon__wa span { display: none; } }

/* — Botón flotante de WhatsApp, en todas las páginas ——————————————————— */
.wa-fab {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: 900;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 28px -10px rgba(20,17,13,.45), 0 2px 6px -2px rgba(20,17,13,.26);
  transition: transform .28s var(--easing), box-shadow .28s var(--easing);
}
.wa-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 34px -12px rgba(20,17,13,.5); }
.wa-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 640px) { .wa-fab { width: 52px; height: 52px; } }

/* — Hero: las 4 fotos nuevas en crossfade ——————————————————————————————— */
.hero__photo-frame--rotate .hero__photo-img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--easing);
}
.hero__photo-frame--rotate .hero__photo-img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__photo-frame--rotate .hero__photo-img { transition: none; }
}

/* — Quiénes somos: foto del abuelo a la izquierda, texto a la derecha ——— */
.qs-home__inner--split {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: center;
}
.qs-home__inner--split .qs-home__head { margin: 0; }
.qs-home__media { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.qs-home__media img {
  width: 100%; height: auto; display: block;
  border-radius: 3px;
  box-shadow: 0 28px 56px -30px rgba(20,17,13,.45), 0 1px 0 rgba(20,17,13,.07);
}
.qs-home__media figcaption {
  font-family: var(--sans);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .7;
}
@media (max-width: 900px) {
  .qs-home__inner--split { grid-template-columns: 1fr; }
}

/* — «Cada marca…»: fondo amarillo, sin el detalle de esquina —————————— */
.about.about--yellow { background: var(--saffron); }
.about--yellow .pillar::before { display: none; }          /* el detalle amarillo */
.about--yellow .pillar { border-color: rgba(20,17,13,.13); }
.about--yellow .section__sub { color: var(--ink); opacity: .8; }

/* — Grid de marcas: sin cuadro ni delineado, 21 en 7 × 3 ————————————— */
.brand-grid.brand-grid--clean {
  background: transparent !important;
  border: 0 !important;
  max-width: 1280px !important;   /* 1180 → 1280: celda más ancha p/ logos anchos (Ana 25-ago) */
  gap: clamp(6px, 1.1vw, 16px) !important;
  grid-template-columns: repeat(7, 1fr);
}
.brand-grid.brand-grid--clean .brand-card {
  border: 0 !important;
  background: transparent !important;
  padding: 20px 6px !important;
  min-height: 148px;
  gap: 12px;
}
.brand-grid.brand-grid--clean .brand-card:hover { background: transparent !important; }
.brand-grid.brand-grid--clean .brand-card__logo img {
  transition: transform .3s var(--easing);
}
.brand-grid.brand-grid--clean .brand-card:hover .brand-card__logo img { transform: translateY(-4px); }
@media (max-width: 1100px) { .brand-grid.brand-grid--clean { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 860px)  { .brand-grid.brand-grid--clean { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .brand-grid.brand-grid--clean { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px)  { .brand-grid.brand-grid--clean { grid-template-columns: repeat(2, 1fr); } }

/* — Filtros: ahora son 11 categorías —————————————————————————————————— */
.brand-filter { justify-content: center; row-gap: 10px; }

/* — «Directo a tu casa»: banda amarilla, título grande, solo botones ——— */
.shop-band {
  background: var(--saffron);
  padding-block: clamp(66px, 8vw, 116px);
  padding-inline: var(--gutter);
  text-align: center;
}
.shop-band__inner {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}
.shop-band .section__label { margin-bottom: 0; }
.shop-band .section__label::before { left: 50%; transform: translateX(-50%); }
.shop-band__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(46px, 7.4vw, 96px);
  line-height: .98; letter-spacing: -.018em;
  margin: 0; color: var(--ink);
}
.shop-band__title em { font-style: italic; }
.shop-band__lead {
  font-family: var(--display); font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: var(--ink); opacity: .82; max-width: 48ch; margin: 0;
}
.shop-band__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(6px, 1vw, 14px);
}
.shop-band .btn--primary:hover { background: var(--paper); color: var(--ink); }
.shop-band .btn--ghost:hover   { background: var(--ink); color: var(--saffron); }

/* — Página de marca · sección 4 «Comprar productos» (formato que pidió Ana:
     fondo amarillo, título grande, solo botones abajo). Tarjeta contenida —
     no full-bleed— porque el footer también es amarillo y se fundían. ——— */
.bp2__buy {
  background: var(--saffron);
  border-radius: 10px;
  padding: clamp(48px, 6vw, 84px) var(--gutter);
  margin-bottom: clamp(48px, 7vw, 96px);
  text-align: center;
}
.bp2__buy-inner {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px, 3vw, 36px);
}
.bp2__buy-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 6.4vw, 82px);
  line-height: 1; letter-spacing: -.018em;
  margin: 0; color: var(--ink);
}
.bp2__buy-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.bp2__buy .btn--primary:hover { background: var(--paper); color: var(--ink); }
.bp2__buy .btn--ghost:hover   { background: var(--ink); color: var(--saffron); }

/* — Quiénes somos en dos columnas: el texto se alinea a la izquierda ————— */
.qs-home__inner--split { max-width: 1180px; }
.qs-home__inner--split .qs-home__body {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(20px, 2.4vw, 30px);
}
.qs-home__inner--split .qs-home__head {
  text-align: left;
  margin-bottom: 0;
  display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px);
}
.qs-home__inner--split .qs-home__head .section__label { margin-bottom: 4px; }
.qs-home__inner--split .qs-home__head .section__title {
  margin: 0; max-width: 18ch;
  font-size: clamp(34px, 3.6vw, 52px);
}
.qs-home__inner--split .qs-home__lead { margin: 0; max-width: 46ch; }
.qs-home__inner--split .qs-home__lead + .qs-home__lead { margin-top: 0; }
.qs-home__inner--split .qs-home__cta { margin: 0; }
@media (max-width: 900px) {
  .qs-home__inner--split .qs-home__head { text-align: center; align-items: center; }
  .qs-home__inner--split .qs-home__body { align-items: center; }
  .qs-home__inner--split .qs-home__head .section__title { max-width: 22ch; }
}

/* — El chip «Todas» llevaba order:99 + flex:100% para caer en su propia línea
     al final, cuando eran 9 categorías. Con 11 estorba: vuelve al inicio
     y fluye igual que los demás. ————————————————————————————————————————— */
.brand-filter .brand-filter__chip--all {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 4 · Páginas de marca — anatomía de 4 secciones (Ana, 19-ago-2026)
   ══════════════════════════════════════════════════════════════════════ */

/* — Portafolio: el grid fijo de 3 columnas dejaba filas huérfanas cuando la
     marca tiene 1, 2, 4 o 5 productos. Flex + centrado lo resuelve para
     cualquier cantidad, y el ancho de cada tarjeta se calcula del contenedor
     para que siempre entren tres por fila. ——————————————————————————————— */
.bp2__jars {
  --jgap: clamp(16px, 1.8vw, 28px);
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--jgap);
  margin-inline: auto;
}
.bp2__jars .bp2__jar { flex: 0 1 calc((100% - 2 * var(--jgap)) / 3); }

/* 1, 2 y 4 productos: contenedor más angosto y dos por fila */
.bp2__jars--n1 { max-width: 340px; }
.bp2__jars--n1 .bp2__jar { flex-basis: 100%; }
.bp2__jars--n2,
.bp2__jars--n4 { max-width: 660px; }
.bp2__jars--n2 .bp2__jar,
.bp2__jars--n4 .bp2__jar { flex-basis: calc((100% - var(--jgap)) / 2); }

/* — El nombre del producto va solo, sin gramaje (Ana). El segundo renglón
     ya no se emite; la regla queda por si sobrevive en algún lado. ——————— */
.bp2__jar-fr { display: none !important; }

/* — «Nuestro portafolio» sin punto final: el <em> ya no lo lleva ————————— */

@media (max-width: 640px) {
  .bp2__jars .bp2__jar { flex-basis: calc(50% - 8px); min-width: 0; }
  .bp2__jars--n1 .bp2__jar { flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA LEGAL · Aviso de privacidad (19-ago-2026)
   ══════════════════════════════════════════════════════════════════════ */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(60px, 8vw, 110px);
}
.legal__draft {
  background: var(--saffron);
  border: 1px solid rgba(20,17,13,.22);
  border-radius: 6px;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.legal__head { margin-bottom: clamp(32px, 4vw, 52px); }
.legal__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 14px;
}
.legal__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 5.6vw, 68px); line-height: 1.02;
  letter-spacing: -.015em; margin: 0 0 12px; color: var(--ink);
}
.legal__title em { font-style: italic; }
.legal__meta {
  font-family: var(--sans); font-size: 12.5px;
  color: var(--ink-soft); margin: 0;
}
.legal__sec { margin-top: clamp(30px, 3.6vw, 46px); }
.legal__sec h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2;
  letter-spacing: -.008em; margin: 0 0 14px; color: var(--ink);
}
.legal__sec p,
.legal__sec li {
  font-family: var(--sans);
  font-size: 15.5px; line-height: 1.68; color: var(--ink-soft);
}
.legal__sec p { margin: 0 0 14px; }
.legal__sec p:last-child { margin-bottom: 0; }
.legal__sec strong { color: var(--ink); font-weight: 600; }
.legal__sec ul {
  margin: 0 0 16px; padding-left: 1.15em;
  display: flex; flex-direction: column; gap: 7px;
}
.legal__sec a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__sec a:hover { color: var(--saffron-deep); }
/* [POR CONFIRMAR] — se ve distinto para que no se cuele a producción */
.tbc {
  background: rgba(245,197,24,.35);
  border-bottom: 1px dashed var(--saffron-deep);
  padding: 0 3px; color: var(--ink);
}
.legal__back { margin-top: clamp(40px, 5vw, 64px); }

/* ══════════════════════════════════════════════════════════════════════════
   NOSOTROS · Nuestra historia + el personaje (Fase 3 — 19-ago-2026)
   Reemplaza la línea de tiempo del mockup de mayo, cuyos hitos eran inventados.
   ══════════════════════════════════════════════════════════════════════ */
.hist { background: var(--paper); padding-block: clamp(56px, 7vw, 100px); }
.hist__inner {
  max-width: 1160px; margin: 0 auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px);
}
.hist__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hist__head .section__label { margin-bottom: 20px; }
.hist__head .section__label::before { left: 50%; transform: translateX(-50%); }
.hist__head .section__title { margin: 0; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; }

.hist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hist__row--flip .hist__media { order: 2; }
.hist__row--flip .hist__copy  { order: 1; }

.hist__media { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hist__media img {
  width: 100%; height: auto; display: block; border-radius: 3px;
  box-shadow: 0 28px 56px -30px rgba(20,17,13,.45), 0 1px 0 rgba(20,17,13,.07);
}
.hist__media figcaption {
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .7;
}
/* Postal + logo antiguo: el logo monta la esquina de la postal */
.hist__media--pair { position: relative; padding-bottom: clamp(28px, 4vw, 52px); }
.hist__media--pair .hist__postal { width: min(82%, 380px); }
.hist__media--pair .hist__logo-old {
  position: absolute; right: 0; bottom: 0;
  width: min(46%, 210px);
  box-shadow: none;
  filter: drop-shadow(0 14px 26px rgba(20,17,13,.24));
}

.hist__copy { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.hist__copy p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6;
  color: var(--ink); margin: 0; max-width: 46ch;
}
.hist__closer {
  font-family: var(--display); font-style: italic;
  font-size: clamp(19px, 1.9vw, 27px); line-height: 1.5;
  color: var(--ink); text-align: center;
  max-width: 62ch; margin: 0 auto;
}

/* — El personaje: 1988 → 2018 → 2026 ——————————————————————————————————— */
.muneca { background: var(--saffron); padding-block: clamp(56px, 7vw, 100px); }
.muneca__inner {
  max-width: 1100px; margin: 0 auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 64px);
}
.muneca__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.muneca__head .section__label { margin-bottom: 20px; }
.muneca__head .section__label::before { left: 50%; transform: translateX(-50%); }
.muneca__head .section__title { margin: 0 0 14px; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.05; }
.muneca__lead {
  font-family: var(--display); font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5;
  color: var(--ink); opacity: .82; max-width: 46ch; margin: 0;
}
.muneca__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px); align-items: end;
}
.muneca__item {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.muneca__fig { display: flex; align-items: flex-end; justify-content: center; height: clamp(180px, 22vw, 300px); }
.muneca__fig img { max-height: 100%; width: auto; display: block; }
.muneca__year {
  font-family: var(--display); font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* — Cierre: correo y WhatsApp ————————————————————————————————————————— */
.page-cta__contact {
  list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(14px, 2.4vw, 40px);
}
.page-cta__contact li { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.page-cta__k {
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}
.page-cta__contact a {
  font-family: var(--display); font-size: clamp(18px, 1.7vw, 24px);
  color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.page-cta__contact a:hover { color: var(--saffron-deep); }

@media (max-width: 860px) {
  .hist__row { grid-template-columns: 1fr; }
  .hist__row--flip .hist__media { order: 1; }
  .hist__row--flip .hist__copy  { order: 2; }
  .hist__copy p { max-width: none; }
}
@media (max-width: 560px) {
  .muneca__row { gap: 12px; }
  .muneca__fig { height: 140px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FIXES DE MÓVIL — 21-ago-2026 (dos comentarios de Yanis)
   ══════════════════════════════════════════════════════════════════════ */

/* (1) El menú se abría con los links pegados hasta abajo y medio panel vacío.
       Causa: .nav__links hereda justify-content:flex-end del layout de
       escritorio —donde empuja los links a la derecha—, y al volverse columna
       en móvil los empuja al fondo. */
@media (max-width: 980px) {
  .nav .nav__links {
    justify-content: flex-start !important;
    padding-top: 84px;
    gap: 0;
  }
  .nav .nav__links a {
    padding: 16px 0;
    font-size: 24px;
    line-height: 1.15;
  }
  .nav .nav__links a:last-child { border-bottom: 0; }
  /* La cinta de contacto, al alcance del pulgar y no perdida arriba */
  .nav .nav__links::after {
    content: "contacto@la-pasiega.com";
    margin-top: auto;
    padding-top: 24px;
    font-family: var(--sans);
    font-size: 12.5px;
    letter-spacing: .02em;
    color: rgba(20,17,13,.62);
  }
}

/* (2) Muro de marcas en móvil: la tarjeta medía 148 px de alto para un logo
       de 46 px. El nombre va oculto (pedido de Ana), así que todo ese espacio
       era aire. Se aprieta la caja y se agranda el logo. */
@media (max-width: 560px) {
  .brand-grid.brand-grid--clean {
    gap: 6px !important;
  }
  .brand-grid.brand-grid--clean .brand-card {
    min-height: 0 !important;
    padding: 8px 6px !important;
    gap: 0 !important;
  }
  .brand-grid--clean .brand-card__logo { height: 72px; }
  .brand-grid--clean .brand-card__logo img { height: 64px !important; }   /* 54 → 64: Ana 25-ago */
}

/* El botón flotante de WhatsApp (z-index 900) quedaba encima del menú abierto */
body.menu-open .wa-fab,
.nav.is-open ~ .wa-fab { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── Chip «Todas»: que sea un chip más ────────────────────────────────────
   Arrastraba el diseño de cuando vivía solo en su propia línea al final:
   margin-top:14px (la desalineación vertical), min-width:260px y
   margin-inline:auto (por qué en móvil se salía de la retícula de 2 columnas
   y estiraba a «Aceites y vinagres»). Se normaliza a la misma caja que los
   demás; el amarillo se conserva porque marca el estado activo. */
.brand-filter .brand-filter__chip--all {
  margin-top: 0 !important;
  margin-inline: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  align-self: auto !important;
}
/* Los chips traían padding asimétrico (10 izq / 16 der) reservado para un ícono
   que hoy va oculto, así que el texto quedaba descentrado. Se simetriza todo. */
.brand-filter .brand-filter__chip {
  padding: 8px 16px !important;
  justify-content: center !important;
  text-align: center;
}
@media (max-width: 720px) {
  /* En móvil van en dos columnas: «Todas» toma su celda como cualquier otro */
  .products--beige .brand-filter .brand-filter__chip--all {
    flex: 1 1 calc(50% - 8px) !important;
    flex-basis: calc(50% - 8px) !important;
  }
  .products--beige .brand-filter .brand-filter__chip {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
  /* Cuando un chip se va a dos renglones, su pareja de fila lo iguala */
  .products--beige .brand-filter { align-items: stretch !important; }
}

/* ================================================================== */
/* RONDA ANA 24-ago-2026 — solo lo que pidió su correo                 */
/* ================================================================== */

/* Ícono de teléfono en la cinta negra, como el de WhatsApp */
.ribbon__tel { display: inline-flex; align-items: center; gap: 6px; }
.ribbon__tel svg { flex: none; opacity: .92; }

/* «Descargar catálogo»: hover amarillo (no negro) para los botones
   fantasma sobre fondo beige — Ana: «se vuelve negro en lugar de amarillo» */
.products--beige .btn--ghost:hover { background: var(--saffron); color: var(--ink); }

/* Muro «Marcas que ya confían»: logos más grandes, como los del banner de clientes.
   El tamaño real lo fija `height` en la regla del muro limpio (línea ~6446);
   ahí se subió 56px → 84px (móvil 54 → 64). */

/* Redes sociales en el footer (LinkedIn · Instagram · Facebook) */
.foot__social { display: flex; gap: 16px; margin-top: 2px; }
.foot__social a { color: var(--ink); display: inline-flex; opacity: .82; transition: opacity .2s, transform .2s; }
.foot__social a:hover { opacity: 1; transform: translateY(-1px); }

/* Nosotros: «aquí» como botón evidente dentro de la frase */
.page-cta__sub .btn { padding: 8px 18px; min-height: 0; font-size: 13px; vertical-align: middle; margin-left: 2px; }

/* ================================================================== */
/* RONDA ANA 2-sep-2026 — solo lo que pidió su correo                  */
/* ================================================================== */

/* 1) Foto del hero derecha en desktop → .hero__photo-frame (transform: none). */

/* 2) Cifras bajo el párrafo del hero. Reutiliza .hero__stats (existía en el
      CSS sin uso desde mayo) en versión de 3 columnas sobre el amarillo. */
.hero__stats.hero__stats--3 {
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(22px, 2.4vw, 32px);
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 0; /* Ana 3-sep-2026: la línea atravesaba a la muñeca en desktop; se quita y lo demás queda igual */
}
.hero__stats--3 strong { color: var(--ink); font-size: clamp(28px, 2.9vw, 40px); }
.hero__stats--3 span   { color: var(--ink); opacity: .78; }
@media (max-width: 480px) {
  .hero__stats.hero__stats--3 { gap: 14px; }
  .hero__stats--3 strong { font-size: clamp(24px, 7vw, 30px); }
  .hero__stats--3 span   { font-size: 11px; }
}

/* 3–4) «Cada marca con la que nos aliamos»: subtítulo más grande
        (antes clamp(15px, 1.05vw, 17px), el tamaño estándar de todas las secciones). */
.about--yellow .section__sub {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  max-width: 52ch;
}

/* ================================================================== */
/* FASE 5 · Formulario conectado a contacto@ (3-sep-2026)              */
/* ================================================================== */
.cform__honey { display: none !important; }
.cform__status {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cform__status.is-ok      { color: var(--ink); font-weight: 600; }
.cform__status.is-fail    { color: var(--carmin); }
.cform__status.is-pending { color: var(--ink-soft); }