/* MIR Internacional — Hero V4 checkpoint */
:root {
  --ink: #060606;
  --ink-2: #0d0c0b;
  --gold: #c9a35b;
  --gold-soft: rgba(201, 163, 91, .38);
  --ivory: #f4efe6;
  --ivory-70: rgba(244, 239, 230, .72);
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 6.2vw, 92px);
  --header-h: clamp(72px, 7.4vw, 104px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure { margin: 0; }
:focus-visible { /* keyboard only: pointer interaction is untouched */
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  background: #040404; /* opaque so the on-black logo blends seamlessly */
}
.site-header::after { /* soft hand-off into the hero plate */
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: clamp(40px, 6vw, 90px);
  background: linear-gradient(180deg, rgba(4,4,4,1) 0%, rgba(4,4,4,.55) 45%, rgba(4,4,4,0) 100%);
  pointer-events: none;
}
@media (min-width: 768px) { /* product sits on the right: keep its caps out of the long fade */
  .site-header::after { /* long fade only over the copy side */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 56%);
    mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 56%);
  }
  .site-header::before { /* short hand-off over the product column */
    content: "";
    position: absolute; left: 0; right: 0; top: 100%;
    height: clamp(20px, 2vw, 32px);
    background: linear-gradient(180deg, rgba(4,4,4,1) 0%, rgba(4,4,4,.35) 35%, rgba(4,4,4,0) 100%);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 56%);
    mask-image: linear-gradient(90deg, transparent 44%, #000 56%);
  }
}
.site-header__inner {
  height: 100%;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.brand { justify-self: start; display: block; line-height: 0; }
.brand img {
  height: clamp(56px, 5.5vw, 79px);
  width: auto;
  mix-blend-mode: screen;
}
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(28px, 3.6vw, 62px); }
.main-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,239,230,.86);
  padding: 8px 0;
  transition: color .35s var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .45s var(--ease);
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--gold); }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }

.header-tools { justify-self: end; display: flex; align-items: center; gap: 22px; }

.lang { position: relative; }
.lang__toggle {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .14em; font-weight: 400;
  padding: 8px 2px;
  color: var(--ivory);
}
.lang__toggle svg { transition: transform .3s var(--ease); opacity: .8; }
.lang.is-open .lang__toggle svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: -14px; top: calc(100% + 10px);
  list-style: none; margin: 0; padding: 10px 0;
  min-width: 78px;
  background: rgba(8,8,8,.96);
  border: 1px solid rgba(201,163,91,.22);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu span {
  display: block; padding: 6px 20px;
  font-size: 12px; letter-spacing: .16em;
  color: rgba(244,239,230,.38);
  cursor: default;
}
.lang__menu span.is-active { color: var(--gold); }
/* every locale is a real page now: options read as links, not as disabled items */
.lang__menu { z-index: 2; box-shadow: 0 18px 40px rgba(0,0,0,.55); border-color: rgba(201,163,91,.4); } /* above the header fade */
.lang__menu a { display: block; }
.lang__menu a span { color: rgba(244,239,230,.82); cursor: pointer; transition: color .25s var(--ease); }
.lang__menu a:hover span, .lang__menu a:focus-visible span { color: var(--gold); }
.lang__menu a:focus-visible { outline-offset: -3px; }
.mobile-menu__langs a { color: rgba(244,239,230,.82); }
.mobile-menu__langs a:hover, .mobile-menu__langs a:focus-visible { color: var(--gold); }

@media (min-width: 992px) { /* wide screens: the lone selector gets the same hairline frame as the CTA */
  .lang__toggle {
    padding: 8px 12px 8px 14px;
    border: 1px solid rgba(201,163,91,.55);
    border-radius: 2px;
    transition: border-color .3s var(--ease), background .3s var(--ease);
  }
  .lang__toggle:hover, .lang.is-open .lang__toggle { border-color: var(--gold); background: rgba(201,163,91,.08); }
  .lang__toggle svg { color: var(--gold); opacity: 1; }
  .lang__menu { right: 0; top: calc(100% + 8px); min-width: 100%; }
}

.burger { display: none; width: 30px; height: 30px; position: relative; }
.burger span {
  position: absolute; left: 3px; right: 3px; height: 1px; background: var(--ivory);
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.burger span:first-child { top: 11px; }
.burger span:last-child { top: 19px; left: 9px; }
.burger[aria-expanded="true"] span:first-child { top: 15px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 15px; left: 3px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: #050505;
  padding: calc(var(--header-h) + 40px) var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 10px; }
.mobile-menu nav a {
  font-family: var(--serif); font-size: 44px; line-height: 1.15; color: var(--ivory);
  border-bottom: 1px solid rgba(201,163,91,.14); padding-bottom: 10px;
}
.mobile-menu__langs { display: flex; gap: 18px; font-size: 13px; letter-spacing: .16em; color: rgba(244,239,230,.38); }
.mobile-menu__langs .is-active { color: var(--gold); }
body.menu-open .site-header { position: fixed; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: clamp(680px, 100svh, 1120px);
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  background: var(--ink);
  --plate-h: 100cqh;
  --fx: .7;
  --px: 71%;
  --pb: 28%;
  --ph: 56%;
}
/* Plate keeps the background and products in one coordinate system (object-fit: cover logic) */
.hero__plate {
  position: absolute;
  bottom: var(--plate-bottom, 0);
  width: max(100cqw, calc(var(--plate-h) * 1.7768));
  aspect-ratio: 1672 / 941;
  left: calc((100cqw - max(100cqw, calc(var(--plate-h) * 1.7768))) * var(--fx));
  z-index: 0;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  animation: plateIn 2.4s var(--ease) both;
}
.hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,5,.9) 0%, rgba(5,5,5,.62) 26%, rgba(5,5,5,.12) 50%, rgba(5,5,5,0) 62%),
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,0) 78%, rgba(5,5,5,.9) 100%);
}

.hero__product {
  position: absolute;
  left: var(--px);
  bottom: var(--pb);
  height: var(--ph);
  z-index: 2;
  transform: translate3d(-50%, 18px, 0);
  opacity: 0;
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  pointer-events: none;
}
.hero__product.is-active { opacity: 1; transform: translate3d(-50%, 0, 0); }
.hero__product::before { /* warm back glow separating product from plate */
  content: "";
  position: absolute; left: -30%; right: -30%; top: 8%; bottom: -4%;
  background: radial-gradient(closest-side, rgba(255,170,80,.16), rgba(255,170,80,0));
  z-index: -2;
}
.hero__product::after { /* soft contact shadow on the wet rock: wide blur, low opacity, one pool per bottle */
  content: "";
  position: absolute; left: -8%; right: -8%; bottom: -3.2%; height: 8%;
  background:
    radial-gradient(ellipse 24% 38% at 27% 50%, rgba(0,0,0,.62), rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 24% 38% at 73% 50%, rgba(0,0,0,.62), rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.34), rgba(0,0,0,0) 100%);
  filter: blur(9px);
  z-index: -1;
}
.hero__img { /* no colour filters on the product itself */
  display: block;
  height: 100%; width: auto;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.38)); /* soft depth only, outside the packaging */
}
.hero__reflect { /* diffuse vertical reflection, fast fade */
  position: absolute; left: 0; top: 98.3%;
  height: 100%; width: auto;
  transform: scaleY(-1);
  opacity: .1;
  filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 5%, rgba(0,0,0,0) 11%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 5%, rgba(0,0,0,0) 11%);
  z-index: -1;
}
.hero__product--monkey { height: calc(var(--ph) * .98); }
.hero__product--monkey::after, .hero__product--aperimax::after {
  left: -14%; right: -14%;
  background: radial-gradient(ellipse 48% 42% at 50% 50%, rgba(0,0,0,.6), rgba(0,0,0,0) 100%);
}
.hero__product--aperimax { height: calc(var(--ph) * .9); }
.hero__product--monkey .hero__reflect, .hero__product--aperimax .hero__reflect { top: 99.5%; }

.hero__content {
  position: relative; z-index: 3;
  height: 100%;
  padding: var(--header-h) var(--gutter) 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: 900px;
}
.hero__label {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-size: clamp(11px, .9vw, 13.5px);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(58px, 8.6vw, 142px);
  line-height: .9;
  letter-spacing: -.012em;
  color: var(--ivory);
}
.hero__title span { display: block; }
.hero__title span + span { margin-top: .02em; }
.hero__text {
  margin: clamp(16px, 1.7vw, 26px) 0 0;
  max-width: 17.5em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 35px);
  line-height: 1.16;
  color: rgba(244,239,230,.9);
}
.btn-gold {
  margin-top: clamp(26px, 3vw, 44px);
  display: inline-flex; align-items: center; gap: 18px;
  padding: 16px 26px 16px 28px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-size: 15px; font-weight: 400; letter-spacing: .02em;
  color: var(--ivory);
  background: rgba(6,6,6,.28);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.btn-gold svg { color: var(--gold); transition: transform .45s var(--ease), color .45s var(--ease); }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--gold); color: var(--ink); }
.btn-gold:hover svg, .btn-gold:focus-visible svg { color: var(--ink); transform: translateX(4px); }

.hero__pager {
  position: absolute; z-index: 3;
  left: var(--gutter); bottom: clamp(28px, 5.4cqh, 56px);
  display: flex; align-items: center; gap: 18px;
}
.hero__pager button {
  font-size: 12.5px; letter-spacing: .12em; color: rgba(244,239,230,.62);
  display: flex; align-items: center; gap: 18px;
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.hero__pager button::after {
  content: ""; display: block; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--gold) 40%, rgba(244,239,230,.35) 40%);
  transition: width .6s var(--ease);
}
.hero__pager button.is-active { color: var(--gold); }
.hero__pager button.is-active::after { width: 64px; }

.hero__thumbs {
  position: absolute; z-index: 3;
  right: clamp(24px, 2.4vw, 40px); top: 50%;
  transform: translateY(-46%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hero__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(244,239,230,.2);
  display: grid; place-items: center;
  color: rgba(244,239,230,.55);
  margin-block: 6px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.hero__arrow:hover { border-color: var(--gold-soft); color: var(--gold); }
.hero__thumb {
  width: 72px; height: 80px;
  display: grid; place-items: center;
  border: 1px solid rgba(244,239,230,.1);
  background: rgba(8,8,8,.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.hero__thumb img { height: 64px; width: auto; opacity: .42; transition: opacity .35s var(--ease); }
.hero__thumb:hover img { opacity: .75; }
.hero__thumb.is-active img { opacity: 1; }
.hero__thumb.is-active { border-color: var(--gold); background: rgba(201,163,91,.08); }

.stub { height: 1px; }

/* Entrance */
.hero__label, .hero__title span, .hero__text, .btn-gold, .hero__pager, .hero__thumbs {
  animation: rise 1.1s var(--ease) both;
}
.hero__label { animation-delay: .15s; }
.hero__title span:first-child { animation-delay: .25s; }
.hero__title span:last-child { animation-delay: .35s; }
.hero__text { animation-delay: .5s; }
.btn-gold { animation-delay: .62s; }
.hero__pager, .hero__thumbs { animation-delay: .9s; }
.hero__thumbs { animation-name: fade; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes plateIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- Tablet / small laptop ---------- */
@media (max-width: 1199.98px) {
  .main-nav ul { gap: 26px; }
  .hero { --fx: .76; --px: 72%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .main-nav { display: none; }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .burger { display: block; }
  .hero__thumbs { display: none; }
}

@media (max-width: 767.98px) {
  .brand img { height: 56px; }
  .header-tools { gap: 16px; }
  .lang__menu { right: -8px; }

  .hero {
    height: clamp(860px, 115svh, 1020px);
    --plate-h: 115cqh;
    --plate-bottom: -15cqh; /* rock surface lands at ~81cqh, below the CTA */
    --fx: .76;
    --px: 71%;
    --pb: 29.5%;
    --ph: 31%;
  }
  .hero__product::after { filter: blur(6px); }
  .hero__reflect { filter: blur(1.5px); }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.78) 30%, rgba(5,5,5,.25) 46%, rgba(5,5,5,0) 58%, rgba(5,5,5,0) 84%, rgba(5,5,5,.95) 100%);
  }
  .hero__content {
    justify-content: flex-start;
    padding-top: calc(var(--header-h) + 24px);
  }
  .hero__label { font-size: 11px; letter-spacing: .2em; }
  .hero__title { font-size: clamp(56px, 16vw, 76px); }
  .hero__title span:last-child { font-size: .94em; }
  .hero__text { font-size: 20px; line-height: 1.3; max-width: 16.5em; color: rgba(244,239,230,.84); }
  .btn-gold { margin-top: 28px; padding: 14px 20px 14px 22px; font-size: 14.5px; }
  .hero__pager { /* just below the product base, inside the first viewport */
    top: calc(81cqh + 6px); bottom: auto;
    left: 0; right: 0;
    justify-content: center;
    gap: 14px;
  }
  .hero__pager button { font-size: 11.5px; gap: 14px; text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8); }
  .hero__pager button.is-active::after { width: 36px; }
}

/* ---------- Hero · tablet corridor (768-1099.98) ----------
   Same desktop composition (copy left, product right on the rock). The product keeps its
   approved position whenever the copy fits; otherwise it moves right towards the edge
   (or the thumbnail rail), the copy column is capped 24px before it and the H1 scales to
   that column. The product only shrinks, at most 8%, when even that leaves < 302px of copy. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .hero {
    --t1-pw: max(100cqw, calc(var(--plate-h) * 1.7768));        /* plate width (cover) */
    --t1-p: calc(var(--t1-pw) / 1.7768 * .56);                   /* approved product height */
    --t1-r: calc(100cqw - 20px);                                 /* right limit of the product */
    --t1-hs: clamp(calc(var(--t1-p) * .92), calc((var(--t1-r) - 326px - var(--gutter)) / .752), var(--t1-p));
    --t1-x: min(max(calc((100cqw - var(--t1-pw)) * var(--fx) + var(--t1-pw) * .72),
                    calc(var(--gutter) + max(44.72cqw, 385px) + 24px + var(--t1-hs) * .376)),
                calc(var(--t1-r) - var(--t1-hs) * .376));        /* product centre, viewport x */
    --t1-col: calc(var(--t1-x) - var(--t1-hs) * .376 - 24px - var(--gutter));
    --ph: var(--t1-hs);
    --px: calc(var(--t1-x) - (100cqw - var(--t1-pw)) * var(--fx));
  }
  .hero__content { max-width: min(900px, calc(var(--t1-col) + var(--gutter) * 2)); }
  .hero__title { font-size: min(8.6vw, calc(var(--t1-col) / 5.2)); } /* "Internacional" is 5.12em wide */
}
@media (min-width: 992px) and (max-width: 1099.98px) {
  .hero { --t1-r: calc(97.6cqw - 88px); } /* stop 16px before the thumbnail rail */
}

/* ---------- Hero · tall viewports (1100-1199.98, aspect <= 1.18) ----------
   Only tall windows reach the conflict here (copy/product air < 24px from ~1.18 down,
   overlap from ~1.07); 1100x900 and every wider aspect keep the approved layout.
   Same rules as the tablet corridor, product floor 95%. */
@media (min-width: 1100px) and (max-width: 1199.98px) and (max-aspect-ratio: 59/50) {
  .hero {
    --t2-pw: max(100cqw, calc(var(--plate-h) * 1.7768));
    --t2-p: calc(var(--t2-pw) / 1.7768 * .56);
    --t2-r: calc(97.6cqw - 88px);                                /* 16px before the thumbnail rail */
    --t2-hs: clamp(calc(var(--t2-p) * .95), calc((var(--t2-r) - 326px - var(--gutter)) / .752), var(--t2-p));
    --t2-x: min(max(calc((100cqw - var(--t2-pw)) * var(--fx) + var(--t2-pw) * .72),
                    calc(var(--gutter) + max(44.72cqw, 385px) + 24px + var(--t2-hs) * .376)),
                calc(var(--t2-r) - var(--t2-hs) * .376));
    --t2-col: calc(var(--t2-x) - var(--t2-hs) * .376 - 24px - var(--gutter));
    --ph: var(--t2-hs);
    --px: calc(var(--t2-x) - (100cqw - var(--t2-pw)) * var(--fx));
  }
  .hero__content { max-width: min(900px, calc(var(--t2-col) + var(--gutter) * 2)); }
  .hero__title { font-size: min(8.6vw, calc(var(--t2-col) / 5.2)); }
}

/* ---------- Hero · safe frame (wide desktop, aspect >= 1.18) ----------
   When the window is wider than ~1.78x the hero height the plate becomes width-driven and the
   packshot grows upwards behind the header. The product keeps the approved size and position
   whenever it fits; otherwise it first moves down (never below the lowest allowed base line) and
   only shrinks by what still does not fit. All three slides share the same base line. */
@media (min-width: 1100px) and (min-aspect-ratio: 59/50) {
  .hero {
    --sf-plate-h: max(100cqh, 56.281cqw);                               /* plate height (cover) */
    --sf-h0: calc(var(--sf-plate-h) * .56);                             /* approved product height */
    --sf-base0: calc(100cqh - var(--sf-plate-h) * .28);                 /* approved base line */
    --sf-top: calc(var(--header-h) + clamp(20px, 2vw, 32px) + 8px);     /* header + its fade + air */
    --sf-base-max: max(var(--sf-base0), calc(100cqh * var(--sf-base-ratio, .82))); /* lowest base: ~10% of the hero above the pager */
    --sf-h: min(var(--sf-h0), calc(var(--sf-base-max) - var(--sf-top)));
    --sf-base: max(var(--sf-base0), calc(var(--sf-top) + var(--sf-h)));
    --ph: var(--sf-h);
    --pb: calc(100cqh - var(--sf-base));
  }
}

/* ---------- Història ---------- */
.historia {
  --gold-deep: #9a7636; /* MIR gold, deepened for large text on ivory (3.6:1, large-text AA) */
  --gold-text: #86662c; /* same gold, one step deeper for small labels (4.6:1, AA) */
  position: relative;
  z-index: 1; /* paints over the hero's trailing space on mobile */
  background: var(--ivory);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 37vw) minmax(0, 1fr) auto;
  column-gap: clamp(48px, 5.6vw, 96px);
  align-items: center;
  padding-block: clamp(72px, 7.2vw, 120px);
  padding-right: var(--gutter);
  scroll-margin-top: 0;
}

.historia__media {
  position: relative;
  height: clamp(460px, 44vw, 700px);
  overflow: hidden;
  background: #1a1510;
}
.historia__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 20% 50%;
  transform: scale(1.06);
  transition: transform 2.4s var(--ease);
}
.historia__media.is-in img { transform: none; }
.historia__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,6,4,.62) 0%, rgba(8,6,4,.18) 34%, rgba(8,6,4,0) 55%);
  pointer-events: none;
}
.historia__values {
  position: absolute; z-index: 1;
  right: clamp(24px, 3vw, 44px); bottom: clamp(28px, 3.2vw, 48px);
  display: flex; flex-direction: column; gap: 10px;
  padding-left: 22px;
  border-left: 1px solid rgba(201,163,91,.75);
  font-size: 12px; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(244,239,230,.94);
}

.historia__body { max-width: 560px; }
.eyebrow {
  margin: 0;
  display: flex; align-items: center; gap: 16px;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-text);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.historia__title {
  margin: clamp(10px, 1vw, 16px) 0 clamp(26px, 2.6vw, 40px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(58px, 6vw, 96px);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--ink);
}
.historia__text p {
  margin: 0;
  font-size: clamp(15.5px, 1.12vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(6,6,6,.8);
}
.historia__text p + p { margin-top: 1.1em; }

.historia__highlight {
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: clamp(40px, 4vw, 64px);
  border-left: 1px solid rgba(201,163,91,.5);
  min-width: 220px;
}
.historia__years {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 4.3vw, 70px);
  line-height: .98;
  color: var(--gold-deep);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.historia__years span { display: block; }
.historia__years span:first-child { font-size: .72em; font-style: italic; font-weight: 400; }
.historia__claim {
  margin: clamp(22px, 2.2vw, 32px) 0 0;
  font-size: 12px; font-weight: 400;
  letter-spacing: .3em; line-height: 2.1;
  text-transform: uppercase;
  color: rgba(6,6,6,.72);
}
.historia__rule { display: block; width: 44px; height: 1px; margin-top: clamp(24px, 2.4vw, 34px); background: var(--gold); }

/* Scroll reveal (only when JS is on) */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .historia__body[data-reveal] { transition-delay: .12s; }
.js .historia__highlight[data-reveal] { transition-delay: .26s; }

@media (max-width: 1199.98px) {
  .historia { grid-template-columns: minmax(0, 40vw) minmax(0, 1fr); row-gap: 56px; }
  .historia__highlight { grid-column: 2; align-self: start; min-width: 0; }
}

@media (max-width: 767.98px) {
  /* The frozen hero keeps its fixed mobile height (its cq-based geometry depends on it);
     its last ~19% below the pager is empty dark rock, so Història overlaps that tail
     leaving ~60px after the pager box (pager bottom = 81cqh + 34px). */
  .hero + .historia { margin-top: calc(118px - .19 * clamp(860px, 115svh, 1020px)); }
  .historia {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    padding: 0 0 72px;
  }
  .historia__media { /* full bleed; ratio keeps the previous height (0.938vw × 1.1) so the cover crop does not zoom */
    height: auto; aspect-ratio: 1 / 1.0318;
  }
  .historia__media img { object-position: 18.2% 50%; } /* same left crop as the former 366px-wide panel */
  .historia__values { font-size: 10.5px; gap: 8px; padding-left: 16px; }
  .historia__body { padding: 52px var(--gutter) 0; max-width: none; }
  .historia__title { font-size: 64px; margin: 10px 0 26px; }
  .historia__text p { font-size: 17px; line-height: 1.58; }
  .historia__text p + p { margin-top: 1.05em; }
  .historia__highlight {
    grid-column: 1;
    margin: 48px var(--gutter) 0;
    padding: 32px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(201,163,91,.5);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    align-items: center;
  }
  .historia__years { font-size: 50px; }
  .historia__claim { margin: 0; font-size: 10.5px; letter-spacing: .26em; line-height: 2; padding-left: 22px; border-left: 1px solid rgba(201,163,91,.5); }
  .historia__rule { display: none; }
}

/* ---------- Begudes ---------- */
.begudes {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--ivory);
}
.begudes__intro {
  display: grid;
  grid-template-columns: auto clamp(56px, 6vw, 110px) auto 1fr;
  align-items: end;
  column-gap: clamp(28px, 3vw, 48px);
  padding: clamp(64px, 5.4vw, 88px) var(--gutter) clamp(40px, 3.4vw, 54px);
}
.begudes .eyebrow { color: var(--gold); }
.begudes__title {
  margin: clamp(10px, 1vw, 16px) 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(64px, 6.6vw, 104px);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--ivory);
}
.begudes__line {
  height: 1px;
  margin-bottom: clamp(30px, 3vw, 46px);
  background: linear-gradient(90deg, rgba(201,163,91,.7), rgba(201,163,91,.15));
}
.begudes__descriptor {
  margin: 0 0 clamp(20px, 2.1vw, 34px);
  font-size: 12.5px; font-weight: 400;
  letter-spacing: .26em; line-height: 2.05;
  text-transform: uppercase;
  color: rgba(244,239,230,.74);
}

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

.brand-stage {
  position: relative;
  height: clamp(640px, 50vw, 780px);
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  background: #050505;
  --plate-h: 100cqh;
  --fx: .3;
}
.brand-stage--winner { --fx: .18; }
.brand-stage + .brand-stage::before { /* hairline between the two stages */
  content: "";
  position: absolute; left: 0; top: 10%; bottom: 10%; z-index: 4;
  width: 1px;
  background: linear-gradient(180deg, rgba(201,163,91,0), rgba(201,163,91,.5) 30%, rgba(201,163,91,.5) 70%, rgba(201,163,91,0));
}
/* Plates share the hero's cover geometry: background and products live in one coordinate system */
.brand-stage__plate {
  position: absolute;
  bottom: 0;
  width: max(100cqw, calc(var(--plate-h) * 1.7768));
  aspect-ratio: 1672 / 941;
  left: calc((100cqw - max(100cqw, calc(var(--plate-h) * 1.7768))) * var(--fx));
  z-index: 0;
}
.brand-stage__plate--products { z-index: 2; pointer-events: none; }
.brand-stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.brand-stage__shade { /* background only, never over the packaging */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,5,.74) 0%, rgba(5,5,5,.36) 30%, rgba(5,5,5,0) 52%, rgba(5,5,5,0) 82%, rgba(5,5,5,.6) 100%),
    linear-gradient(90deg, rgba(5,5,5,.58) 0%, rgba(5,5,5,.2) 30%, rgba(5,5,5,0) 48%);
}

.brand-stage__slot {
  position: absolute;
  left: var(--x); bottom: var(--b); height: calc(var(--h) * var(--hm, 1));
  transform: translateX(-50%);
}
.brand-stage__slot::after { /* soft contact shadow */
  content: "";
  position: absolute; left: -18%; right: -18%; bottom: -3.4%; height: 8%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.66), rgba(0,0,0,0) 100%);
  filter: blur(8px);
  z-index: -1;
}
.brand-stage__prod { position: relative; height: 100%; }
.brand-stage__img { /* no colour filters on the product itself */
  position: relative; z-index: 1;
  display: block;
  height: 100%; width: auto;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.42));
}
.brand-stage__reflect {
  position: absolute; left: 0; top: 97.6%;
  height: 100%; width: auto;
  transform: scaleY(-1);
  opacity: .12;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 5%, rgba(0,0,0,0) 11%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 5%, rgba(0,0,0,0) 11%);
}

.brand-stage__copy {
  position: absolute; z-index: 3;
  left: clamp(32px, 4.4vw, 72px);
  top: clamp(56px, 10cqh, 96px);
  max-width: 300px;
}
.brand-stage__label {
  margin: 0;
  font-size: 12px; font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);
}
.brand-stage__title {
  margin: 12px 0 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 4.4vw, 68px);
  line-height: 1;
  white-space: nowrap;
  color: var(--ivory);
}
.brand-stage__text {
  margin: 0;
  font-size: 15px; font-weight: 300;
  line-height: 1.65;
  color: rgba(244,239,230,.86);
}

.js .brand-stage__copy[data-reveal] { transition-delay: .1s; }
.js .brand-stage__slot--back .brand-stage__prod[data-reveal] { transition-delay: .35s; }
.js .begudes__descriptor[data-reveal] { transition-delay: .15s; }

@media (max-width: 767.98px) {
  .begudes__intro {
    grid-template-columns: clamp(44px, 14vw, 64px) 1fr;
    column-gap: 20px;
    padding: 64px var(--gutter) 44px;
  }
  .begudes__heading { grid-column: 1 / -1; margin-bottom: 20px; }
  .begudes__title { font-size: 64px; }
  .begudes__line { margin-bottom: 0; align-self: center; }
  .begudes__descriptor { margin: 0; font-size: 11px; letter-spacing: .22em; line-height: 1.9; }

  .begudes__brands { grid-template-columns: minmax(0, 1fr); }
  .brand-stage {
    height: clamp(700px, 200vw, 880px);
    --plate-h: 78cqh;
    --fx: .55;
    --hm: 1.12; /* products a bit larger in the story panel */
  }
  .brand-stage--winner { --fx: .47; }
  .brand-stage + .brand-stage::before { display: none; }
  .brand-stage__shade {
    background:
      linear-gradient(180deg, #050505 0%, #050505 22%, rgba(5,5,5,.45) 31%, rgba(5,5,5,0) 44%, rgba(5,5,5,0) 84%, rgba(5,5,5,.92) 100%);
  }
  .brand-stage__copy {
    left: var(--gutter); right: var(--gutter);
    top: 44px;
    max-width: none;
  }
  .brand-stage__title { font-size: 52px; margin: 10px 0 14px; }
  .brand-stage__text { font-size: 15.5px; line-height: 1.6; }
  .brand-stage__slot::after { filter: blur(6px); }
}
@media (max-width: 374.98px) { /* narrow phones: keep ~40px between the copy and the products */
  .brand-stage { --hm: 1; }
  .brand-stage--aperimax { --mw: 29%; }
}
@media (min-width: 375px) and (max-width: 409.98px) {
  .brand-stage--winner { --hm: 1.05; }
}

/* ---------- Snack ---------- */
.snack {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--ivory);
}
.snack__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: clamp(32px, 4vw, 72px);
  padding: clamp(64px, 5.4vw, 88px) var(--gutter) clamp(40px, 3.4vw, 54px);
}
.snack .eyebrow { color: var(--gold); }
.snack__title {
  margin: clamp(10px, 1vw, 16px) 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(64px, 6.6vw, 104px);
  line-height: .95;
  letter-spacing: -.01em;
}
.snack__descriptor { /* right-aligned with a hairline above: same language as Begudes, different rhythm */
  margin: 0 0 clamp(18px, 2vw, 30px);
  justify-self: end;
  text-align: right;
  padding-top: 14px;
  border-top: 1px solid rgba(201,163,91,.45);
  font-size: 12.5px; font-weight: 400;
  letter-spacing: .26em; line-height: 2.05;
  text-transform: uppercase;
  color: rgba(244,239,230,.74);
}

.snack__seam { /* editorial seam between story rows (desktop only) */
  display: none;
  position: relative;
  height: 22px;
  background: var(--ink);
}
.snack__seam::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 88px; height: 1px;
  transform: translate(-50%, -50%);
  background: var(--gold);
  opacity: .3;
}
@media (min-width: 1280px) { .snack__seam { display: block; } } /* only where the desktop two-column rhythm returns */
.snack__pair { display: grid; grid-template-columns: 1fr 1fr; }
.snack__pair .brand-stage__copy { max-width: 280px; }
.snack__pair .brand-stage + .brand-stage::before { /* hairline between Fura and RAP */
  content: "";
  position: absolute; left: 0; top: 10%; bottom: 10%; z-index: 4;
  width: 1px;
  background: linear-gradient(180deg, rgba(201,163,91,0), rgba(201,163,91,.5) 30%, rgba(201,163,91,.5) 70%, rgba(201,163,91,0));
}

/* Full-width brand stories */
.brand-stage--wide { height: clamp(520px, 42vw, 700px); }
.brand-stage--tabasco { --fx: .34; }
.brand-stage--aperimax { --fx: .5; }
.brand-stage--fura { --fx: .3; }
.brand-stage--rap { --fx: .28; }

/* Wide packshot groups are sized by width instead of height */
.brand-stage__slot--wide { width: var(--w); height: auto; }
.brand-stage__slot--wide .brand-stage__prod { height: auto; }
.brand-stage__slot--wide .brand-stage__img { width: 100%; height: auto; }
.brand-stage__slot--wide .brand-stage__reflect { width: 100%; height: auto; top: 98%; }
.brand-stage__slot--wide::after { left: -10%; right: -10%; bottom: -4%; height: 14%; }

.brand-stage--tabasco .brand-stage__shade {
  background:
    linear-gradient(180deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.3) 26%, rgba(5,5,5,0) 48%, rgba(5,5,5,0) 84%, rgba(5,5,5,.6) 100%),
    linear-gradient(90deg, rgba(5,5,5,.8) 0%, rgba(5,5,5,.42) 28%, rgba(5,5,5,0) 52%);
}
.brand-stage--aperimax .brand-stage__shade { /* copy sits on the right here */
  background:
    linear-gradient(180deg, rgba(5,5,5,.7) 0%, rgba(5,5,5,.28) 26%, rgba(5,5,5,0) 48%, rgba(5,5,5,0) 84%, rgba(5,5,5,.6) 100%),
    linear-gradient(270deg, rgba(5,5,5,.82) 0%, rgba(5,5,5,.45) 26%, rgba(5,5,5,0) 50%);
}
.brand-stage--aperimax .brand-stage__copy {
  left: auto;
  right: clamp(32px, 4.4vw, 72px);
  text-align: right;
  max-width: 340px;
}
.brand-stage--aperimax .brand-stage__label { letter-spacing: .26em; }
.brand-stage--wide .brand-stage__copy { top: 50%; transform: translateY(-50%); max-width: 360px; }
.js .brand-stage--wide .brand-stage__copy[data-reveal] { transform: translateY(calc(-50% + 28px)); }
.js .brand-stage--wide .brand-stage__copy[data-reveal].is-in { transform: translateY(-50%); }
.brand-stage--wide .brand-stage__title { font-size: clamp(52px, 5vw, 76px); }

@media (max-width: 991.98px) {
  .brand-stage--wide .brand-stage__copy { top: clamp(44px, 7cqh, 72px); transform: none; }
  .js .brand-stage--wide .brand-stage__copy[data-reveal] { transform: translateY(28px); }
  .js .brand-stage--wide .brand-stage__copy[data-reveal].is-in { transform: none; }
}

@media (max-width: 767.98px) {
  .snack__intro {
    grid-template-columns: minmax(0, 1fr);
    padding: 64px var(--gutter) 44px;
    row-gap: 22px;
  }
  .snack__title { font-size: 64px; }
  .snack__descriptor {
    margin: 0; justify-self: start; text-align: left;
    font-size: 11px; letter-spacing: .22em; line-height: 1.9;
    padding-top: 18px;
  }
  .snack__pair { grid-template-columns: minmax(0, 1fr); }
  .snack__pair .brand-stage + .brand-stage::before { display: none; }

  .brand-stage--wide { height: clamp(540px, 140vw, 680px); }
  .brand-stage--aperimax .brand-stage__copy { right: auto; left: var(--gutter); text-align: left; max-width: none; }
  .brand-stage--wide .brand-stage__copy { max-width: none; }

  /* the inline --x/--b/--w on each slot are desktop values, so mobile re-declares the properties */
  .brand-stage--tabasco { --fx: .55; --mx: 52.4%; --mw: 46%; --mb: 21%; }
  .brand-stage--fura { --fx: .5; --mx: 50%; --mw: 32%; --mb: 29%; }
  /* RAP and Aperimax get their own panel height so the packshot row does not leave a dead band */
  .brand-stage--rap { --fx: .5; --mx: 50%; --mw: 44%; --mb: 27%; height: clamp(560px, 150vw, 680px); }
  .brand-stage--aperimax { --fx: .52; --mx: 51%; --mw: 32%; --mb: 30%; height: clamp(580px, 160vw, 700px); }
  .brand-stage__slot--wide {
    left: var(--mx); bottom: var(--mb); width: var(--mw);
  }
  .brand-stage--tabasco .brand-stage__shade,
  .brand-stage--aperimax .brand-stage__shade {
    background:
      linear-gradient(180deg, #050505 0%, #050505 22%, rgba(5,5,5,.45) 31%, rgba(5,5,5,0) 44%, rgba(5,5,5,0) 84%, rgba(5,5,5,.92) 100%);
  }
}

/* ---------- Gourmet ---------- */
.gourmet {
  position: relative;
  z-index: 1;
  background: var(--ink);
}
.gourmet__seam { /* opens a new chapter after Snack, same editorial language (desktop only) */
  display: none;
  position: relative;
  height: 22px;
  background: var(--ink);
}
.gourmet__seam::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 88px; height: 1px;
  transform: translate(-50%, -50%);
  background: var(--gold);
  opacity: .3;
}
@media (min-width: 768px) { .gourmet__seam { display: block; } }

.gourmet__scene {
  position: relative;
  height: clamp(500px, 41vw, 620px);
  overflow: hidden;
  background: var(--ink);
}
.gourmet__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 13%;
}
.gourmet__shade { /* sinks the corners of the scene and hands off to the black above and below */
  position: absolute; inset: 0;
  background:
    radial-gradient(84% 70% at 50% 50%, rgba(6,6,6,0) 0%, rgba(6,6,6,.2) 46%, rgba(6,6,6,.9) 100%),
    linear-gradient(90deg, rgba(6,6,6,.95) 0%, rgba(6,6,6,.5) 13%, rgba(6,6,6,0) 30%),
    linear-gradient(270deg, rgba(6,6,6,.9) 0%, rgba(6,6,6,.36) 11%, rgba(6,6,6,0) 26%),
    linear-gradient(180deg, rgba(6,6,6,.92) 0%, rgba(6,6,6,.3) 20%, rgba(6,6,6,.2) 52%, rgba(6,6,6,.72) 82%, rgba(6,6,6,.96) 100%);
}
.gourmet__copy {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100% - var(--gutter) * 2));
  text-align: center;
}
.js .gourmet__copy[data-reveal] { transform: translate(-50%, calc(-50% + 24px)); }
.js .gourmet__copy[data-reveal].is-in { transform: translate(-50%, -50%); }
.gourmet__rule {
  display: block;
  width: 88px; height: 1px;
  margin: 0 auto clamp(22px, 2.2vw, 32px);
  background: var(--gold);
  opacity: .55;
}
.gourmet__label {
  margin: 0;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold);
}
.gourmet__title {
  margin: clamp(12px, 1.3vw, 20px) 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(76px, 8.4vw, 132px);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--ivory);
}

@media (max-width: 767.98px) {
  .gourmet__scene { height: clamp(460px, 122vw, 560px); }
  .gourmet__bg { object-position: 50% 50%; }
  .gourmet__shade { /* the phone crop already loses the foreground props: keep more atmosphere visible */
    background:
      radial-gradient(122% 66% at 50% 48%, rgba(6,6,6,0) 0%, rgba(6,6,6,.16) 50%, rgba(6,6,6,.8) 100%),
      linear-gradient(90deg, rgba(6,6,6,.9) 0%, rgba(6,6,6,.3) 10%, rgba(6,6,6,0) 22%),
      linear-gradient(270deg, rgba(6,6,6,.9) 0%, rgba(6,6,6,.3) 10%, rgba(6,6,6,0) 22%),
      linear-gradient(180deg, rgba(6,6,6,.88) 0%, rgba(6,6,6,.22) 16%, rgba(6,6,6,.18) 56%, rgba(6,6,6,.72) 84%, rgba(6,6,6,.96) 100%);
  }
  .gourmet__label { font-size: 11px; letter-spacing: .3em; }
  .gourmet__title { font-size: clamp(64px, 17.5vw, 86px); }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  background: #040404; /* same black as the header, so the logo blends */
  color: rgba(244,239,230,.72);
  border-top: 1px solid rgba(201,163,91,.22);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .75fr);
  column-gap: clamp(40px, 5vw, 96px);
  padding: clamp(72px, 7vw, 112px) var(--gutter) clamp(56px, 5.2vw, 84px);
}
.site-footer__logo { display: inline-block; line-height: 0; }
.site-footer__logo img { height: clamp(64px, 5.6vw, 84px); width: auto; mix-blend-mode: screen; }
.site-footer__tagline {
  margin: clamp(20px, 2vw, 28px) 0 0;
  max-width: 19em;
  font-family: var(--serif);
  font-size: clamp(22px, 1.7vw, 27px);
  line-height: 1.3;
  color: rgba(244,239,230,.82);
}
.site-footer__label {
  margin: 10px 0 clamp(20px, 1.8vw, 26px);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}
.site-footer__address,
.site-footer__links { font-size: 15px; line-height: 1.8; font-style: normal; }
.site-footer__name { display: block; color: var(--ivory); font-weight: 400; }
.site-footer__contact { margin: 18px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 15px; line-height: 1.8; }
.site-footer__contact a,
.site-footer__links a {
  color: var(--ivory);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat;
  transition: color .3s var(--ease), background-size .45s var(--ease);
  overflow-wrap: anywhere;
}
.site-footer__contact a:hover, .site-footer__contact a:focus-visible,
.site-footer__links a:hover, .site-footer__links a:focus-visible,
.site-footer__links a[aria-current="page"] { color: var(--gold); background-size: 100% 1px; }
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  margin: 0 var(--gutter);
  padding: 22px 0 30px;
  border-top: 1px solid rgba(244,239,230,.08);
  font-size: 12px; letter-spacing: .14em;
  color: rgba(244,239,230,.56);
}
.site-footer__bottom p { margin: 0; }
.site-footer__credit a { color: rgba(244,239,230,.72); transition: color .3s var(--ease); }
.site-footer__credit a:hover, .site-footer__credit a:focus-visible { color: var(--gold); }
@media (max-width: 991.98px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 56px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); row-gap: 44px; padding-block: 64px 48px; }
  .site-footer__logo img { height: 64px; }
  .site-footer__bottom { flex-direction: column; padding-bottom: 28px; }
}

/* ---------- Legal pages ---------- */
.legal {
  background: var(--ink);
  padding: calc(var(--header-h) + clamp(48px, 6vw, 96px)) var(--gutter) clamp(88px, 9vw, 140px);
}
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal__back {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244,239,230,.72);
  transition: color .3s var(--ease);
}
.legal__back svg { color: var(--gold); transition: transform .35s var(--ease); }
.legal__back:hover, .legal__back:focus-visible { color: var(--gold); }
.legal__back:hover svg { transform: translateX(-4px); }
.legal__head { margin-top: clamp(40px, 4.4vw, 64px); padding-bottom: clamp(36px, 3.6vw, 52px); border-bottom: 1px solid rgba(201,163,91,.22); }
.legal__eyebrow { margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.legal__title {
  margin: 16px 0 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(46px, 5.6vw, 80px); line-height: 1; letter-spacing: -.01em;
  color: var(--ivory);
  overflow-wrap: break-word; hyphens: auto;
}
.legal__updated { margin: 22px 0 0; font-size: 13px; letter-spacing: .04em; color: rgba(244,239,230,.56); }
.legal__note { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: rgba(244,239,230,.56); }
.legal__body { font-size: 17px; line-height: 1.75; color: rgba(244,239,230,.8); }
.legal__intro { margin: clamp(36px, 3.6vw, 52px) 0 0; font-size: 18px; color: rgba(244,239,230,.86); }
.legal__body h2 {
  margin: clamp(44px, 4.2vw, 60px) 0 14px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px, 2.2vw, 32px); line-height: 1.2;
  color: var(--ivory);
}
.legal__body p { margin: 0 0 14px; }
.legal__body ul { margin: 0 0 14px; padding-left: 1.1em; }
.legal__body li { margin-bottom: 10px; padding-left: .3em; }
.legal__body li::marker { color: var(--gold); }
.legal__body strong { font-weight: 400; color: var(--ivory); }
.legal__body a {
  color: var(--ivory);
  text-decoration: underline; text-decoration-color: rgba(201,163,91,.6); text-underline-offset: 4px; text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: color .3s var(--ease);
}
.legal__body a:hover, .legal__body a:focus-visible { color: var(--gold); }
.legal__data { margin: 20px 0 0; border-top: 1px solid rgba(244,239,230,.08); }
.legal__data div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid rgba(244,239,230,.08); }
.legal__data dt { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding-top: .35em; }
.legal__data dd { margin: 0; color: var(--ivory); }
@media (max-width: 767.98px) {
  .legal__body { font-size: 16.5px; line-height: 1.7; }
  .legal__intro { font-size: 17px; }
  .legal__data div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) { /* one long German compound (Datenschutzerklärung): sized to stay whole on a single line */
  .legal__title--fit { font-size: min(46px, 10.1vw); }
}

/* ---------- 404 ---------- */
.error-page {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px var(--gutter);
  text-align: center;
  background: #040404;
}
.error-page__logo { line-height: 0; }
.error-page__logo img { height: clamp(64px, 5.6vw, 84px); width: auto; mix-blend-mode: screen; }
.error-page .legal__eyebrow { margin-top: clamp(40px, 5vw, 64px); }
.error-page__code {
  margin: 12px 0 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(96px, 14vw, 180px); line-height: .9;
  color: var(--ivory);
}
.error-page__text { margin: 22px 0 0; font-size: 17px; line-height: 1.6; color: rgba(244,239,230,.8); }
.error-page__text + .error-page__text { margin-top: 2px; color: rgba(244,239,230,.56); }
.error-page .legal__back { margin-top: clamp(36px, 4vw, 52px); }

/* ---------- Tablet corridor 768-1279.98 ----------
   One story per row, exactly like the approved phone rhythm, scaled for tablet.
   Nothing here leaks into <=767.98 (phone) or >=1280 (desktop). */
@media (min-width: 768px) and (max-width: 1279.98px) {
  /* Begudes and the Fura/RAP pair stop being two narrow columns */
  .begudes__brands,
  .snack__pair { grid-template-columns: minmax(0, 1fr); }
  .brand-stage + .brand-stage::before,
  .snack__pair .brand-stage + .brand-stage::before { display: none; }

  .brand-stage,
  .snack__pair .brand-stage {
    height: clamp(620px, 76vw, 760px);
    --plate-h: 72cqh;
    --fx: .5;
  }
  .brand-stage--winner { --fx: .44; }
  .brand-stage__shade,
  .brand-stage--tabasco .brand-stage__shade,
  .brand-stage--aperimax .brand-stage__shade {
    background:
      linear-gradient(180deg, #050505 0%, #050505 20%, rgba(5,5,5,.5) 30%, rgba(5,5,5,0) 44%, rgba(5,5,5,0) 84%, rgba(5,5,5,.92) 100%);
  }

  /* copy sits at the top of the scene, as on phones */
  .brand-stage__copy,
  .snack__pair .brand-stage__copy,
  .brand-stage--wide .brand-stage__copy,
  .brand-stage--aperimax .brand-stage__copy {
    left: var(--gutter); right: auto;
    top: 52px; transform: none;
    text-align: left;
    max-width: 560px;
  }
  .js .brand-stage--wide .brand-stage__copy[data-reveal] { transform: translateY(28px); }
  .js .brand-stage--wide .brand-stage__copy[data-reveal].is-in { transform: none; }

  /* Begudes packshots: primary in front, secondary behind-left, both inside the panel */
  .brand-stage--monkey .brand-stage__slot { left: 57%; bottom: 19%; height: 61%; }
  .brand-stage--monkey .brand-stage__slot--back { left: 74%; bottom: 21.5%; height: 42%; }
  .brand-stage--winner .brand-stage__slot { left: 61%; bottom: 16%; height: 64%; }
  .brand-stage--winner .brand-stage__slot--back { left: 47%; bottom: 19%; height: 49%; }

  /* Snack packshot groups keep the width-driven sizing, retuned for the full-width row */
  .brand-stage--wide,
  .snack__pair .brand-stage { height: clamp(620px, 76vw, 760px); }
  .brand-stage--tabasco { --fx: .5; }
  .brand-stage--fura { --fx: .5; }
  .brand-stage--rap { --fx: .5; }
  .brand-stage--aperimax { --fx: .5; }
  .brand-stage--tabasco .brand-stage__slot--wide { left: 52%; bottom: 18%; width: 56%; }
  .brand-stage--fura .brand-stage__slot--wide { left: 54%; bottom: 21%; width: 38%; }
  .brand-stage--rap .brand-stage__slot--wide { left: 52%; bottom: 20%; width: 54%; }
  .brand-stage--aperimax .brand-stage__slot--wide { left: 52%; bottom: 21%; width: 42%; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) { /* wide tablet: the trio rises into the last copy line */
  .brand-stage--aperimax .brand-stage__copy { max-width: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}