/* ============================================================
   OLEA — Oro líquido, embotellado.
   One grotesk + one mono, a fluid --screen-unit scale, and a single 768px
   breakpoint. The palette is the whole differentiation brief: deep olive-black
   ground, oil gold as the one accent, cream paper for the single light block.
   ============================================================ */

@font-face {
  font-family: "Hanken";
  src: url("../fonts/hankengrotesk.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dmmono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---- Palette: almazara ---- */
  --black: #0c1208;
  --stone: #181c14;
  --panel: #141a0f;
  --linen: #d9d3c2;
  --white: #f2ecdd;
  --muted: #7d8570;
  --olive: #4a5d3a;
  --olive-lit: #8fa377;
  --gold: #c99a2e;
  --accent: #e8c25a;
  --pale: #f2ecdd;
  --pale-ink: #1b2113;

  /* ---- Type ---- */
  --display: "Hanken", system-ui, sans-serif;
  --text: "Hanken", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  /* ---- Fluid unit: min(width-based, height-based) ---- */
  --vh: 1vh;
  --site-padding-x: 3.125vw;
  --inner-width: calc(100vw - var(--site-padding-x) * 2);
  --screen-unit: min(var(--inner-width) / 1800, calc(var(--vh) * 100) / 1024 * 1.25);

  --h1: calc(168 * var(--screen-unit));
  --h2: calc(70 * var(--screen-unit));
  --h3: calc(45 * var(--screen-unit));
  --h4: calc(32 * var(--screen-unit));
  --h5: calc(20 * var(--screen-unit));
  --body1: calc(38 * var(--screen-unit));
  --body2: calc(24 * var(--screen-unit));
  --body3: calc(18 * var(--screen-unit));
  --sub1: calc(24 * var(--screen-unit));
  --sub2: calc(16 * var(--screen-unit));
  --quote: calc(30 * var(--screen-unit));
  --btn: calc(16 * var(--screen-unit));

  --grid-columns: 16;
  --gap: calc(20 * var(--screen-unit));
  --section-y: calc(160 * var(--screen-unit));
}

@media (max-width: 767.98px) {
  :root {
    --site-padding-x: 4.267vw;
    --screen-unit: min(var(--inner-width) / 343, calc(var(--vh) * 100) / 844 * 1.1);
    --h1: calc(64 * var(--screen-unit));
    --h2: calc(38 * var(--screen-unit));
    --h3: calc(26 * var(--screen-unit));
    --h4: calc(16 * var(--screen-unit));
    --h5: calc(14 * var(--screen-unit));
    --body1: calc(18 * var(--screen-unit));
    --body2: calc(16 * var(--screen-unit));
    --body3: calc(14 * var(--screen-unit));
    --sub1: calc(16 * var(--screen-unit));
    --sub2: calc(12 * var(--screen-unit));
    --quote: calc(26 * var(--screen-unit));
    --btn: calc(12 * var(--screen-unit));
    --grid-columns: 4;
    --section-y: calc(90 * var(--screen-unit));
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--text);
  font-size: var(--body2);
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; height: 100vh; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--black); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; }

/* ---- Layout helpers ---- */
.wrap { padding-inline: var(--site-padding-x); }
.section { position: relative; padding-block: var(--section-y); isolation: isolate; }
.eyebrow {
  font-family: var(--mono);
  font-size: var(--sub2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.section-head { font-size: var(--h2); max-width: 22ch; margin-top: calc(18 * var(--screen-unit)); }
.hero-lede { max-width: calc(600 * var(--screen-unit)); font-size: var(--body2); color: var(--linen); }

/* ============================================================
   Preloader + grain
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--black);
  display: grid; place-items: center;
}
#preloader-canvas { width: min(70vw, 620px); height: calc(180 * var(--screen-unit)); }
#preloader.is-done { pointer-events: none; }

#canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: soft-light;
}
#page { position: relative; z-index: 1; }

/* ============================================================
   Chrome
   ============================================================ */
#header {
  position: fixed; top: calc(20 * var(--screen-unit)); left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--site-padding-x);
  pointer-events: none;
}
#header > * { pointer-events: auto; }
.brand {
  font-family: var(--display); font-weight: 700;
  font-size: calc(22 * var(--screen-unit));
  letter-spacing: 0.22em;
  background: rgba(20, 26, 15, 0.66);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 154, 46, 0.24);
  border-radius: 999px;
  padding: calc(10 * var(--screen-unit)) calc(20 * var(--screen-unit));
  color: var(--white);
}
.brand span { color: var(--gold); }
.pill-nav {
  display: flex; align-items: center; gap: calc(26 * var(--screen-unit));
  background: rgba(20, 26, 15, 0.66);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 154, 46, 0.24);
  border-radius: 999px;
  padding: calc(10 * var(--screen-unit)) calc(26 * var(--screen-unit));
}
.pill-nav a { font-size: var(--btn); letter-spacing: 0.1em; text-transform: uppercase; }
.nav-cta {
  border: 1px solid var(--gold); border-radius: 999px;
  padding: calc(11 * var(--screen-unit)) calc(24 * var(--screen-unit));
  font-size: var(--btn); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: rgba(201, 154, 46, 0.08);
}
.menu-btn { display: none; }
#header .brand, #header .pill-nav, #header .nav-cta, #header .menu-btn {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
#header.is-over-light .brand,
#header.is-over-light .pill-nav { background: rgba(255, 255, 255, 0.7); border-color: rgba(27, 33, 19, 0.18); color: var(--pale-ink); }
#header.is-over-light .brand span { color: #8a6a1e; }
#header.is-over-light .nav-cta { background: var(--olive); border-color: var(--olive); color: var(--pale); }
#header.is-over-light .menu-btn { background: rgba(255, 255, 255, 0.78); border-color: rgba(27, 33, 19, 0.22); color: var(--pale-ink); }

@media (max-width: 767.98px) {
  .pill-nav, .nav-cta { display: none; }
  .menu-btn {
    display: block;
    border: 1px solid rgba(201, 154, 46, 0.38); border-radius: 999px;
    padding: calc(9 * var(--screen-unit)) calc(18 * var(--screen-unit));
    font-size: var(--btn); text-transform: uppercase; letter-spacing: 0.1em;
    background: rgba(20, 26, 15, 0.72);
  }
}

#mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--black); display: none;
  flex-direction: column; justify-content: center; gap: calc(18 * var(--screen-unit));
  padding: var(--site-padding-x);
}
#mobile-menu.is-open { display: flex; }
#mobile-menu a { font-family: var(--display); font-size: var(--h3); }
#mobile-menu .close { position: absolute; top: calc(24 * var(--screen-unit)); right: var(--site-padding-x); font-size: var(--h4); }

#scroll-indicator { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; height: 2px; background: rgba(217, 211, 194, 0.12); }
#scroll-indicator__bar-inner { height: 100%; width: 0%; background: var(--gold); box-shadow: 0 0 10px 3px rgba(201, 154, 46, 0.4); }
#scroll-indicator__dot {
  position: absolute; top: 50%; left: 0;
  width: calc(9 * var(--screen-unit)); height: calc(9 * var(--screen-unit));
  min-width: 6px; min-height: 6px;
  border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%); box-shadow: 0 0 1em var(--gold);
}

/* ---- Letter flipper ---- */
.is-flipper .flip-char { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.15; }
.is-flipper .flip-inner { display: inline-block; position: relative; will-change: transform; }
.is-flipper .flip-clone { position: absolute; left: 0; top: 100%; display: block; }

/* ============================================================
   El arco — la pista de scroll del héroe
   ============================================================ */
#hero { position: relative; height: 620svh; }
.no3d #hero { height: 100svh; }
#hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--black); }

#hero-scene { position: absolute; inset: 0; }
/* The fallback plate is a build-time capture of THIS scene (scripts/shot.mjs
   hero), never a second rendering of the same bottle — two renderers of one
   object never match, and the visitor would be looking at a different product
   before and after the scroll (law 9). */
.no3d #hero-scene { background: #0c1208 url("../public/hero3d.jpg") center / cover no-repeat; }
.has3d #hero-scene { display: none; }
.has3d #arc-static { display: none; }
.no3d #stage3d, .no3d #arc-h1, .no3d #arc-h1-note, .no3d #arc-title, .no3d #arc-stamp,
.no3d #arc-side, .no3d #arc-pour, .no3d #arc-ml, .no3d #arc-spec, .no3d #arc-spec-line,
.no3d #arc-crate, .no3d #arc-card { display: none; }

#stage3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#hero-load { position: absolute; inset: 0; z-index: 3; }
.arc-anchor { position: absolute; left: 0; width: 1px; height: 1px; top: 45%; }
.no3d .arc-anchor { top: 100%; }

#hero-pin > #arc-h1, #hero-pin > #arc-h1-note, #hero-pin > #arc-title, #hero-pin > #arc-stamp,
#hero-pin > #arc-side, #hero-pin > #arc-pour, #hero-pin > #arc-ml, #hero-pin > #arc-spec,
#hero-pin > #arc-spec-line, #hero-pin > #arc-crate, #hero-pin > #arc-card {
  position: absolute; z-index: 3; opacity: 0; margin: 0; pointer-events: none;
}

/* --- H0 · el estado de carga --- */
.hero-tagline {
  position: absolute; top: calc(96 * var(--screen-unit)); left: var(--site-padding-x);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
}
.hero-mark {
  position: absolute; top: calc(124 * var(--screen-unit)); left: var(--site-padding-x);
  font-family: var(--display); font-size: calc(250 * var(--screen-unit));
  font-weight: 800; letter-spacing: 0.01em; line-height: 0.82; color: var(--white);
}
.hero-side {
  position: absolute; top: 42%; right: var(--site-padding-x);
  width: calc(470 * var(--screen-unit));
  font-size: var(--body2); line-height: 1.34; color: var(--white);
}
.hero-trust {
  position: absolute; left: var(--site-padding-x); bottom: calc(52 * var(--screen-unit));
  width: calc(320 * var(--screen-unit)); min-width: 210px;
  padding: calc(22 * var(--screen-unit));
  background: linear-gradient(to bottom, rgba(38, 46, 26, 0.68), rgba(12, 18, 8, 0.3));
  border: 1px solid rgba(201, 154, 46, 0.2);
}
.hero-trust__lead {
  font-size: var(--h5); font-weight: 700; line-height: 1.16;
  text-transform: uppercase; color: var(--white);
  padding-bottom: calc(52 * var(--screen-unit));
  border-bottom: 1px dashed rgba(217, 211, 194, 0.35);
}
.hero-trust__tail { margin-top: calc(14 * var(--screen-unit)); font-size: var(--body3); line-height: 1.3; text-align: right; color: var(--white); }
.hero-cue {
  position: absolute; left: 50%; bottom: calc(34 * var(--screen-unit)); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(12 * var(--screen-unit)); white-space: nowrap;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--white);
}
.hero-cue__ring {
  width: calc(26 * var(--screen-unit)); height: calc(26 * var(--screen-unit)); min-width: 20px; min-height: 20px;
  border: 1px solid rgba(242, 236, 221, 0.5); border-radius: 50%;
  background: no-repeat center / 40% 40%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2ecdd' stroke-width='1.6'/%3E%3C/svg%3E");
}
#hero-load .video-thumb { position: absolute; right: var(--site-padding-x); bottom: calc(52 * var(--screen-unit)); width: calc(240 * var(--screen-unit)); min-width: 160px; }
.video-thumb {
  position: relative; border-radius: calc(14 * var(--screen-unit)); overflow: hidden;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 154, 46, 0.18), 0 10px 34px rgba(201, 154, 46, 0.14);
  cursor: pointer;
}
.video-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.video-thumb__play {
  position: absolute; left: 50%; bottom: calc(14 * var(--screen-unit)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: calc(8 * var(--screen-unit)); white-space: nowrap;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--black); background: var(--accent); border-radius: 999px;
  padding: calc(8 * var(--screen-unit)) calc(18 * var(--screen-unit));
  transition: transform 0.3s ease;
}
.video-thumb:hover .video-thumb__play { transform: translateX(-50%) scale(1.06); }

/* --- H1 · el par de textos alrededor del giro --- */
#arc-h1 { inset: 0; }
.arc-h1__left {
  position: absolute; top: 50%; left: var(--site-padding-x); transform: translateY(-50%);
  font-size: var(--h2); font-weight: 800; line-height: 1.02; text-transform: uppercase; color: var(--white);
}
.arc-h1__right {
  position: absolute; top: 40%; right: var(--site-padding-x);
  width: calc(330 * var(--screen-unit));
  font-size: var(--body2); font-weight: 500; line-height: 1.38; color: var(--linen);
}
#arc-h1-note {
  right: var(--site-padding-x); bottom: calc(34 * var(--screen-unit));
  padding-top: calc(10 * var(--screen-unit));
  border-top: 1px dashed rgba(217, 211, 194, 0.4);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.14em; text-transform: uppercase; text-align: right; color: var(--linen);
}

/* --- H2 · el título que sale del desenfoque letra a letra --- */
#arc-title {
  top: calc(92 * var(--screen-unit)); left: 0; right: 0; text-align: center;
  font-size: var(--h1); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; color: var(--white);
}
#arc-title .w { display: inline-block; white-space: nowrap; }
#arc-title .ch { display: inline-block; will-change: filter; }
#arc-stamp {
  top: calc(262 * var(--screen-unit)); right: 18%; text-align: right;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}

/* --- H3 --- */
/* H3/H4 park the bottle on the RIGHT (see KEYS in bottle3d.js), so all of
   their copy lives on the LEFT. */
#arc-side {
  left: var(--site-padding-x); top: 38%; text-align: left;
  width: calc(420 * var(--screen-unit));
  font-size: var(--sub1); font-weight: 700; line-height: 1.5; text-transform: uppercase; color: var(--white);
}

/* --- H4 · el gag del vertido --- */
#arc-pour {
  left: var(--site-padding-x); bottom: calc(120 * var(--screen-unit));
  display: flex; flex-direction: column; gap: calc(12 * var(--screen-unit)); align-items: center;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.arc-pour__glyph {
  width: calc(26 * var(--screen-unit)); height: calc(26 * var(--screen-unit)); min-width: 18px; min-height: 18px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  border: 1px solid var(--accent);
  background: linear-gradient(to bottom, rgba(232, 194, 90, 0.05), rgba(232, 194, 90, 0.45));
}
#arc-pour .arc-rule { display: block; width: calc(160 * var(--screen-unit)); min-width: 110px; border-top: 1px dashed rgba(232, 194, 90, 0.5); }
#arc-ml {
  left: var(--site-padding-x); bottom: calc(258 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--linen);
}
#arc-ml b { font-family: var(--display); font-size: var(--h3); font-weight: 700; color: var(--accent); letter-spacing: 0; display: block; }

/* --- H5 · el plano de medición --- */
#arc-spec { inset: 0; --sx: 50%; --sy: 50%; --sr: 200px; --sw: 300px; --sh: 300px; }
#arc-spec i { position: absolute; display: block; }
.arc-spec__ring {
  left: var(--sx); top: var(--sy); width: calc(var(--sr) * 2); height: calc(var(--sr) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(242, 236, 221, 0.5);
}
.arc-spec__frame {
  left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
  transform: translate(-50%, -50%); border: 1px dashed rgba(232, 194, 90, 0.55);
}
.arc-spec__tick { left: var(--sx); width: 1px; height: calc(14 * var(--screen-unit)); background: rgba(242, 236, 221, 0.7); }
.arc-spec__tick--t { top: calc(var(--sy) - var(--sh) / 2); }
.arc-spec__tick--b { top: calc(var(--sy) + var(--sh) / 2 - 14 * var(--screen-unit)); }
.arc-spec__dot { left: calc(var(--sx) + var(--sw) / 2 - 6px); top: calc(var(--sy) - var(--sh) / 2 - 6px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
#arc-spec-line {
  left: var(--site-padding-x); bottom: calc(120 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--white);
  padding-top: calc(10 * var(--screen-unit)); border-top: 1px dashed rgba(217, 211, 194, 0.4);
}

/* --- H6 --- */
#arc-crate {
  left: var(--site-padding-x); bottom: calc(96 * var(--screen-unit));
  width: calc(360 * var(--screen-unit)); min-width: 220px;
  font-size: var(--body3); line-height: 1.5; color: var(--linen);
}

/* --- H7 · la tarjeta sube a la caja que la galería va a dibujar --- */
#arc-card {
  left: calc(28 * var(--screen-unit)); top: 50%;
  height: min(70svh, 660px); width: auto; aspect-ratio: 4 / 3;
  border: 1px solid rgba(201, 154, 46, 0.2);
  border-radius: calc(16 * var(--screen-unit));
  overflow: hidden; transform: translateY(-50%);
}
#arc-card img { width: 100%; height: 100%; object-fit: cover; }
.arc-card__dot { position: absolute; right: calc(18 * var(--screen-unit)); top: calc(18 * var(--screen-unit)); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.deco-dot { position: absolute; left: 50%; top: calc(72 * var(--screen-unit)); width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.7; }
.side-tab {
  position: absolute; right: 0; top: 50%; transform-origin: 100% 0; transform: rotate(90deg) translate(50%, -100%);
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  padding-right: calc(20 * var(--screen-unit));
}

@media (max-width: 767.98px) {
  .has3d #hero { height: 580svh; }
  .no3d #hero-scene { background-image: url("../public/hero3d-m.jpg"); }
  .hero-tagline { top: calc(72 * var(--screen-unit)); }
  .hero-mark { top: calc(94 * var(--screen-unit)); font-size: calc(104 * var(--screen-unit)); }
  .hero-side { top: calc(200 * var(--screen-unit)); left: var(--site-padding-x); right: var(--site-padding-x); width: auto; font-size: var(--body3); }
  .hero-trust { left: var(--site-padding-x); bottom: calc(30 * var(--screen-unit)); width: 48%; min-width: 0; padding: calc(14 * var(--screen-unit)); }
  .hero-trust__lead { font-size: var(--body3); padding-bottom: calc(14 * var(--screen-unit)); }
  .hero-trust__tail { display: none; }
  #hero-load .video-thumb { right: var(--site-padding-x); bottom: calc(30 * var(--screen-unit)); width: 42%; min-width: 0; }
  .hero-cue { display: none; }
  .arc-h1__left { top: auto; bottom: calc(96 * var(--screen-unit)); transform: none; font-size: var(--h3); }
  .arc-h1__right { top: calc(96 * var(--screen-unit)); width: auto; max-width: 70%; font-size: var(--body3); }
  #arc-title { font-size: calc(56 * var(--screen-unit)); top: calc(76 * var(--screen-unit)); line-height: 0.95; }
  #arc-stamp { top: calc(226 * var(--screen-unit)); left: 0; right: 0; text-align: center; font-size: calc(11 * var(--screen-unit)); }
  #arc-side { left: var(--site-padding-x); right: var(--site-padding-x); width: auto; top: auto; bottom: calc(250 * var(--screen-unit)); font-size: var(--body3); }
  #arc-pour { left: var(--site-padding-x); bottom: calc(64 * var(--screen-unit)); align-items: flex-start; }
  #arc-ml { bottom: calc(180 * var(--screen-unit)); }
  #arc-spec-line { right: var(--site-padding-x); bottom: calc(52 * var(--screen-unit)); }
  #arc-crate { width: auto; right: var(--site-padding-x); bottom: calc(150 * var(--screen-unit)); }
  #arc-card { left: calc(12 * var(--screen-unit)); width: 86vw; height: auto; }
  .side-tab { display: none; }
}

/* fallback estático de H1–H4 */
#arc-static { text-align: center; }
.ai-title { font-size: var(--h1); line-height: 0.9; }
.ai-footnote { margin-top: calc(50 * var(--screen-unit)); font-family: var(--mono); font-size: var(--body3); color: var(--muted); }

/* ============================================================
   1 · La mesa (galería horizontal)
   ============================================================ */
#galeria { padding: 0; }
#gallery-pin { height: 100svh; overflow: hidden; position: relative; display: flex; align-items: center; }
/* reduced motion: a real scroller, so every card is reachable without a scrub */
#gallery-pin.is-static { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
#gallery-pin.is-static::-webkit-scrollbar { display: none; }
#gallery-pin.is-static .g-item { scroll-snap-align: center; }
#gallery-pin.is-static .g-rail { display: none; }
#gallery-track { display: flex; align-items: center; will-change: transform; }
.g-item {
  position: relative; flex: 0 0 auto;
  height: min(70svh, 660px);
  margin-inline: calc(28 * var(--screen-unit));
  border-radius: calc(16 * var(--screen-unit));
  overflow: hidden; border: 1px solid rgba(201, 154, 46, 0.2);
}
.g-item img { height: 100%; width: auto; aspect-ratio: 4/3; object-fit: cover; }
.g-item__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(20 * var(--screen-unit));
  background: linear-gradient(to top, rgba(12, 18, 8, 0.94), transparent);
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.06em;
}
.g-item__idx { color: var(--accent); margin-right: 0.8em; letter-spacing: 0.16em; }

.g-rail {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: calc(10 * var(--screen-unit));
  pointer-events: none; padding: calc(10 * var(--screen-unit));
  border-radius: calc(10 * var(--screen-unit));
  background: rgba(12, 18, 8, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 154, 46, 0.16);
}
.g-rail--l { left: calc(18 * var(--screen-unit)); }
.g-rail--r { right: calc(18 * var(--screen-unit)); }
.g-rail img {
  width: calc(56 * var(--screen-unit)); min-width: 34px; aspect-ratio: 1; object-fit: cover;
  border-radius: calc(6 * var(--screen-unit)); opacity: 0.3; border: 1px solid transparent;
  transition: opacity 0.35s ease, border-color 0.35s ease;
}
.g-rail img.is-active { opacity: 1; border-color: var(--gold); }
.g-progress {
  position: absolute; bottom: calc(28 * var(--screen-unit)); left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.16em; z-index: 5;
}
.g-progress b { color: var(--accent); font-weight: 400; }

@media (max-width: 767.98px) {
  .g-item { height: auto; width: 86vw; margin-inline: calc(12 * var(--screen-unit)); }
  .g-item img { width: 100%; height: auto; }
  .g-rail { display: none; }
}

/* ============================================================
   2 · La luz lo es todo — la lente de cursor
   ============================================================ */
/* Exactly one screen tall. At 118svh every absolutely-positioned label in here
   is anchored to a box taller than the viewport, so the punchline and the
   formula sat below the fold at every scroll position that showed the lens —
   caught in the section sweep, not guessed. */
#luz { position: relative; height: 100svh; overflow: hidden; --lz-h: 100svh; background: #070a05; }
.lz-plate { position: absolute; inset: 0; overflow: hidden; }
/* Height-fitted, not cover-fitted. The anchor plate is a 2:3 portrait of the
   whole bottle; over-covering a 16:9 viewport with it crops away the neck and
   the base and leaves the lens sliding over one featureless flank. */
.lz-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 100%; width: auto; aspect-ratio: 2 / 3;
}
.lz-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* The LIT read is the same file, graded. One extra decode of an already-cached
   image; no second generation, no second environment to keep consistent. */
.lz-under { filter: brightness(1.45) saturate(1.7) contrast(0.96) sepia(0.14) hue-rotate(-6deg); }
.lz-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 42% at 50% 56%, rgba(255, 214, 122, 0.42), transparent 72%);
  mix-blend-mode: screen;
}
/* La capa de ARRIBA es la escena en penumbra; la máscara radial le abre un
   agujero, y por ese agujero se ve la MISMA escena atravesada por la luz. */
.lz-over {
  z-index: 1;
  /* the "sensor off" grade: the same plate held down to a shadow read, so what
     burns through inside the circle is unmistakably the light */
  filter: brightness(0.34) saturate(0.42) contrast(1.05);
  --lr: calc(150 * var(--screen-unit));
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx, -50%) var(--ly, -50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 86%, #000 100%);
  mask-image: radial-gradient(circle var(--lr) at var(--lx, -50%) var(--ly, -50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 86%, #000 100%);
}
/* Sin JS o con movimiento reducido la máscara nunca se arma: la sección es la
   escena iluminada, quieta, que es su estado legible. */
#luz:not(.has-lens) .lz-over { -webkit-mask-image: none; mask-image: none; opacity: 0; }
#luz.has-lens { cursor: none; }
.lz-lens {
  position: absolute; z-index: 2; pointer-events: none;
  left: var(--lx, -50%); top: var(--ly, -50%);
  width: calc(300 * var(--screen-unit)); aspect-ratio: 1;
  margin: calc(-150 * var(--screen-unit));
  border-radius: 50%; border: 1px solid rgba(232, 194, 90, 0.8);
  box-shadow: 0 0 calc(30 * var(--screen-unit)) rgba(201, 154, 46, 0.3), inset 0 0 calc(26 * var(--screen-unit)) rgba(232, 194, 90, 0.14);
  opacity: 0; transition: opacity 0.4s ease;
}
.lz-lens::before, .lz-lens::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(232, 194, 90, 0.6); }
.lz-lens::before { width: calc(18 * var(--screen-unit)); height: 1px; transform: translate(-50%, -50%); }
.lz-lens::after { width: 1px; height: calc(18 * var(--screen-unit)); transform: translate(-50%, -50%); }
#luz.has-lens .lz-lens { opacity: 1; }
.lz-box {
  position: absolute; z-index: 2; left: 44%; top: 40%; width: 12%; height: 40%;
  border: 1px solid rgba(232, 194, 90, 0.5);
}
.lz-box::before, .lz-box::after { content: ""; position: absolute; background: var(--accent); }
.lz-box::before { left: 50%; top: -1px; width: calc(30 * var(--screen-unit)); height: 2px; transform: translateX(-50%); }
.lz-box::after { left: 50%; bottom: -1px; width: calc(30 * var(--screen-unit)); height: 2px; transform: translateX(-50%); }
.lz-read {
  position: absolute; z-index: 2; left: 57%; top: 40%;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--linen);
  padding-left: calc(14 * var(--screen-unit)); border-left: 1px solid rgba(232, 194, 90, 0.5);
}
.lz-read b { display: block; color: var(--accent); font-weight: 400; }

#luz::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(7, 10, 5, 0.94) 0%, rgba(7, 10, 5, 0.55) 34%, transparent 62%),
              linear-gradient(to top, rgba(7, 10, 5, 0.9), transparent 42%);
  pointer-events: none;
}
#luz > *:not(.lz-plate) { position: absolute; z-index: 2; }
.lz-copy { left: var(--site-padding-x); top: calc(140 * var(--screen-unit)); width: calc(430 * var(--screen-unit)); max-width: 32vw; }
.lz-icon {
  display: grid; place-items: center; width: calc(52 * var(--screen-unit)); height: calc(52 * var(--screen-unit)); min-width: 34px; min-height: 34px;
  border: 1px solid rgba(232, 194, 90, 0.4); border-radius: 50%; margin-bottom: calc(20 * var(--screen-unit));
}
.lz-icon svg { width: 56%; fill: none; stroke: var(--accent); stroke-width: 1.3; }
.lz-copy .eyebrow { color: var(--white); font-family: var(--display); font-weight: 700; font-size: var(--h5); letter-spacing: 0.02em; text-transform: none; }
.lz-lede { margin-top: calc(18 * var(--screen-unit)); font-size: var(--body3); color: var(--linen); }
.lz-hint {
  display: none; align-items: center; gap: calc(10 * var(--screen-unit)); margin-top: calc(22 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  transition: opacity 0.6s ease;
}
.lz-hint i { width: calc(16 * var(--screen-unit)); height: calc(16 * var(--screen-unit)); min-width: 12px; min-height: 12px; border: 1px solid var(--accent); border-radius: 50%; }
#luz.has-lens .lz-hint { display: inline-flex; }
#luz.lens-used .lz-hint { opacity: 0; }
.lz-mode { margin-top: calc(38 * var(--screen-unit)); padding-top: calc(20 * var(--screen-unit)); border-top: 1px dotted rgba(217, 211, 194, 0.3); }
.lz-mode__label { display: flex; justify-content: space-between; gap: 1em; font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.lz-mode__label b { color: var(--accent); font-weight: 400; }
.lz-read2 { margin-top: calc(12 * var(--screen-unit)); font-size: var(--body3); color: var(--linen); min-height: 4.6em; }

.lz-rail { right: var(--site-padding-x); top: 26%; height: 44%; width: calc(230 * var(--screen-unit)); }
#cata-bar {
  position: absolute; right: 0; top: 0; bottom: 0; width: calc(8 * var(--screen-unit)); min-width: 6px;
  border: 1px solid rgba(201, 154, 46, 0.4); border-radius: 999px; cursor: grab;
  background: linear-gradient(to bottom, rgba(201, 154, 46, 0.06), rgba(201, 154, 46, 0.4));
}
#cata-bar.is-drag { cursor: grabbing; }
#cata-knob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(22 * var(--screen-unit)); height: calc(22 * var(--screen-unit)); min-width: 15px; min-height: 15px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 1.4em rgba(232, 194, 90, 0.6);
}
.cata__ticks { position: absolute; inset: 0; right: calc(44 * var(--screen-unit)); }
.cata__ticks span {
  position: absolute; right: 0; top: var(--p); transform: translateY(-50%); text-align: right;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.cata__ticks span b { display: block; font-weight: 400; }
.cata__ticks span i { font-style: normal; color: var(--muted); }
.cata__ticks span.is-on { color: var(--white); }
.cata__ticks span.is-on i { color: var(--accent); }
.lz-punch {
  left: var(--site-padding-x); bottom: calc(96 * var(--screen-unit));
  font-size: var(--h2); font-weight: 800; text-transform: uppercase; line-height: 0.94; color: var(--white);
}
.lz-eq {
  right: var(--site-padding-x); bottom: calc(96 * var(--screen-unit)); text-align: right;
  display: flex; flex-direction: column; gap: calc(12 * var(--screen-unit)); align-items: flex-end;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.lz-eq__sub { color: var(--muted); opacity: 0.7; }
.lz-eq__f { font-size: var(--h4); letter-spacing: 0; text-transform: none; color: var(--white); }
.lz-eq__f b { font-weight: 400; color: var(--accent); }

@media (max-width: 767.98px) {
  #luz { height: auto; padding-block: calc(80 * var(--screen-unit)); --lz-h: 56svh; }
  .lz-plate { position: relative; height: 56svh; }
  .lz-frame { width: max(100%, calc(56svh * 0.86)); }
  /* 150su is a 312px circle on a 390px screen — the "lens" would be the whole
     plate, which is the same as having no lens. */
  .lz-over { --lr: calc(68 * var(--screen-unit)); }
  .lz-lens { width: calc(136 * var(--screen-unit)); margin: calc(-68 * var(--screen-unit)); }
  #luz > *:not(.lz-plate) { position: static; }
  .lz-copy, .lz-rail { width: auto; max-width: none; margin-top: calc(30 * var(--screen-unit)); padding-inline: var(--site-padding-x); }
  .lz-rail { display: none; }
  .lz-punch, .lz-eq { padding-inline: var(--site-padding-x); margin-top: calc(34 * var(--screen-unit)); text-align: left; align-items: flex-start; }
  #luz::before { background: linear-gradient(to top, rgba(7, 10, 5, 0.9), transparent 46%); }
  .lz-box, .lz-read { display: none; }
}

/* ============================================================
   3 · La cosecha — el bloque claro
   ============================================================ */
.is-light { background: var(--pale); color: var(--pale-ink); }
.is-light .eyebrow { color: #8a6a1e; }
.is-light .section-head { color: var(--pale-ink); }
.is-light::before, .is-light::after {
  content: ""; position: absolute; left: 0; right: 0; height: calc(120 * var(--screen-unit)); pointer-events: none; z-index: 0;
}
.is-light::before { top: 0; background: linear-gradient(to bottom, #0c1208, transparent); opacity: 0.28; }
.is-light::after { bottom: 0; background: linear-gradient(to top, #0c1208, transparent); opacity: 0.28; }
.is-light > * { position: relative; z-index: 1; }

.co-hero { text-align: center; padding-block: calc(30 * var(--screen-unit)) calc(100 * var(--screen-unit)); }
.co-eyebrow { font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.2em; text-transform: uppercase; color: #8a6a1e; }
/* El palabrón de borde a borde: 12vw mínimo, tal como pide el brief. */
.co-giant {
  font-size: max(12vw, calc(300 * var(--screen-unit)));
  font-weight: 800; line-height: 0.82; letter-spacing: -0.045em;
  color: var(--olive); margin-top: calc(10 * var(--screen-unit));
}
.co-lines { margin-top: calc(52 * var(--screen-unit)); font-size: var(--body3); color: #3d4a30; }
.co-lines p { max-width: 52ch; margin-inline: auto; }

.co-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
.co-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: calc(30 * var(--screen-unit));
  border: 1px dotted rgba(27, 33, 19, 0.32);
}
.co-card h3 { font-size: var(--h5); text-transform: uppercase; letter-spacing: 0.04em; color: var(--olive); }
.co-card p { font-size: var(--body3); color: #3d4a30; }
.co-card > p:not(.co-foot) { margin-top: calc(26 * var(--screen-unit)); max-width: 32ch; }
.co-foot { margin-top: auto; padding-top: calc(30 * var(--screen-unit)); }
.co-foot b { font-weight: 400; color: var(--pale-ink); }
.co-card--solid { background: var(--olive); color: var(--pale); border-color: transparent; }
.co-card--solid h3 { color: #cfe0b8; }
.co-card--solid p { color: rgba(242, 236, 221, 0.8); }
.co-card--solid .co-foot { color: rgba(242, 236, 221, 0.56); position: relative; z-index: 1; }
.co-ghost {
  position: absolute; right: calc(-16 * var(--screen-unit)); bottom: calc(-30 * var(--screen-unit));
  font-family: var(--display); font-weight: 800; font-size: calc(240 * var(--screen-unit));
  line-height: 0.8; color: rgba(242, 236, 221, 0.14); pointer-events: none;
}
.co-round { margin-top: calc(24 * var(--screen-unit)); display: grid; place-items: center; }
.co-round .stat__svg { width: 74%; height: auto; }
.s-line { stroke: var(--olive); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.s-pulse { fill: var(--gold); }
.s-orbit { stroke-dasharray: 6 8; opacity: 0.6; }
.stat.is-in .s-orbit { animation: s-orbit 3.4s linear infinite; }
@keyframes s-orbit { to { stroke-dashoffset: -28; } }

.co-ring { position: relative; margin-top: calc(28 * var(--screen-unit)); aspect-ratio: 1 / 0.96; width: 100%; }
.co-ring__o { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(27, 33, 19, 0.26); border-radius: 50%; }
.co-ring__o:nth-of-type(1) { width: 96%; aspect-ratio: 1; }
.co-ring__o:nth-of-type(2) { width: 74%; aspect-ratio: 1; }
.co-ring__o:nth-of-type(3) { width: 52%; aspect-ratio: 1; }
.var-chip {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; color: var(--pale-ink);
  border: 1px solid rgba(27, 33, 19, 0.3); border-radius: 999px;
  padding: calc(7 * var(--screen-unit)) calc(15 * var(--screen-unit));
  background: rgba(255, 255, 255, 0.55);
  transition: opacity 0.5s ease;
}
.co-aside { margin-top: calc(40 * var(--screen-unit)); font-family: var(--mono); font-size: var(--body3); color: #5c6a4c; }

@media (max-width: 767.98px) {
  .co-cards { grid-template-columns: 1fr; }
  .co-giant { font-size: 22vw; }
  .co-ghost { font-size: calc(180 * var(--screen-unit)); }
}

/* ============================================================
   4 · La despensa — noche a sangre, titular detrás del estante
   ============================================================ */
#bodega { position: relative; height: 100svh; overflow: hidden; background: #040603; }
.bd-plate { position: absolute; inset: 0; overflow: hidden; }
.bd-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, calc(100svh * 1.34)); aspect-ratio: 16 / 9; }
.bd-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-punch {
  position: absolute; z-index: 1; left: 0; right: 0; top: 54%; transform: translateY(-50%); text-align: center;
  /* one line, so the bottle passes through a single word rather than eating
     the middle of a two-line block */
  font-size: min(8.2vw, calc(150 * var(--screen-unit))); font-weight: 800; line-height: 0.9;
  letter-spacing: -0.035em; text-transform: uppercase; white-space: nowrap;
  color: var(--white); mix-blend-mode: screen;
}
/* Una copia pixel a pixel de la misma placa, recortada a la columna del
   estante y apilada por encima del texto: la costura es invisible y no hace
   falta recortar ningún asset. */
.bd-cut { z-index: 2; }
.bd-cut .bd-frame { clip-path: inset(0 48.4% 0 47.6%); }
#bodega::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 6, 3, 0.94), transparent 40%);
}
.bd-label {
  position: absolute; z-index: 4; left: var(--site-padding-x); bottom: calc(74 * var(--screen-unit));
  width: calc(420 * var(--screen-unit)); max-width: 60vw;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--linen);
}
#bodega .deco-eq { z-index: 4; }

@media (max-width: 767.98px) { #bodega { height: 76svh; } .bd-punch { font-size: 11vw; white-space: normal; } .bd-cut .bd-frame { clip-path: inset(0 47.5% 0 46.5%); } }

/* ============================================================
   5 · Elija su OLEA — la segunda bancada 3D
   ============================================================ */
/* The wordmark runs at 14vw here, so the default section padding put it under
   the fixed nav pill. */
#eleccion { background: #090d06; text-align: center; padding-top: calc(230 * var(--screen-unit)); }
.pk-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pk-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: saturate(0.8) brightness(0.8); }
.pk-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 20%, rgba(9, 13, 6, 0.88) 82%); }
.big-mark__eyebrow { font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.22em; text-transform: uppercase; color: var(--linen); }
.big-mark {
  font-size: max(14vw, calc(320 * var(--screen-unit)));
  font-weight: 800; line-height: 0.84; letter-spacing: 0.005em; color: var(--white);
  margin-bottom: calc(34 * var(--screen-unit));
}
.sku-picker { display: flex; gap: calc(12 * var(--screen-unit)); flex-wrap: wrap; justify-content: center; }
.sku-btn {
  border: 1px solid rgba(217, 211, 194, 0.3); border-radius: 999px;
  padding: calc(12 * var(--screen-unit)) calc(28 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--btn); letter-spacing: 0.12em; text-transform: uppercase; color: var(--linen);
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.sku-btn.is-on { border-color: var(--gold); color: var(--accent); background: rgba(201, 154, 46, 0.1); box-shadow: 0 0 2em rgba(201, 154, 46, 0.18); }
.pk-stage { position: relative; margin-top: calc(46 * var(--screen-unit)); }
.pk-stage::before {
  content: ""; position: absolute; left: 50%; bottom: calc(30 * var(--screen-unit)); transform: translateX(-50%);
  width: 46%; height: calc(30 * var(--screen-unit));
  background: radial-gradient(ellipse at center, rgba(201, 154, 46, 0.24), transparent 70%);
}
#pk-canvas { display: none; }
.pk-live .pk-bg { opacity: 0.26; }
.pk-live #pk-canvas { display: block; border-radius: calc(14 * var(--screen-unit)); width: 100%; height: min(72svh, 760px); margin-inline: auto; }
.pk-live .pk-stage img { display: none; }
.pk-stage img { width: min(100%, calc(760 * var(--screen-unit))); margin-inline: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: calc(14 * var(--screen-unit)); }
#product-details { max-width: calc(760 * var(--screen-unit)); margin-inline: auto; text-align: left; margin-top: calc(30 * var(--screen-unit)); }
#product-details h3 { font-size: var(--h2); }
#product-details .p-sub { font-family: var(--mono); font-size: var(--sub2); color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: calc(14 * var(--screen-unit)); }
#product-details p { font-size: var(--body3); color: var(--linen); margin-top: calc(16 * var(--screen-unit)); }
#eleccion .section-head, #eleccion .eyebrow { margin-inline: auto; }
.spec-wrap { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: calc(60 * var(--screen-unit)); font-size: var(--body3); text-align: left; }
.spec-table th, .spec-table td { text-align: left; padding: calc(16 * var(--screen-unit)) calc(12 * var(--screen-unit)); border-bottom: 1px solid rgba(217, 211, 194, 0.14); }
.spec-table thead th { font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.spec-table tbody th { font-weight: 400; color: var(--linen); }
.spec-table td { color: var(--white); }

/* ============================================================
   6 · Voces
   ============================================================ */
.sec-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sec-bg img { width: 100%; height: 100%; object-fit: cover; }
.sec-bg--veil img { filter: brightness(0.5) saturate(0.85); }
.sec-bg--veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12, 18, 8, 0.9), rgba(12, 18, 8, 0.82)); }

.vc {
  overflow-x: auto; overflow-y: hidden;
  margin-inline: calc(var(--site-padding-x) * -1);
  padding-inline: var(--site-padding-x);
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; touch-action: pan-y;
  margin-top: calc(50 * var(--screen-unit));
}
.vc::-webkit-scrollbar { display: none; }
.vc.is-drag { cursor: grabbing; }
.vc-track { display: flex; gap: var(--gap); width: max-content; }
.vc-card {
  flex: 0 0 calc(62 * var(--inner-width) / 100);
  display: grid; grid-template-columns: calc(230 * var(--screen-unit)) minmax(0, 1fr);
  gap: calc(34 * var(--screen-unit)); align-items: center;
  padding: calc(30 * var(--screen-unit));
  border: 1px dotted rgba(217, 211, 194, 0.3);
  background: linear-gradient(160deg, rgba(30, 38, 20, 0.76), rgba(12, 18, 8, 0.46));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vc-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vc-card * { user-select: none; -webkit-user-drag: none; }
.vc-body { min-width: 0; }
.voice-quote { font-size: var(--quote); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: calc(28 * var(--screen-unit)); }
.voice-quote em { font-style: normal; color: var(--accent); }
.vc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(20 * var(--screen-unit)); }
.voice-who { font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--white); }
.voice-role { font-family: var(--mono); font-size: var(--sub2); color: var(--olive-lit); text-transform: uppercase; letter-spacing: 0.08em; margin-top: calc(4 * var(--screen-unit)); }
.stars { font-size: var(--body3); color: var(--accent); letter-spacing: 0.2em; white-space: nowrap; }
.stars small { display: block; font-family: var(--mono); font-size: var(--sub2); color: var(--muted); letter-spacing: 0.12em; margin-top: calc(6 * var(--screen-unit)); }
.vc-dots { display: flex; gap: calc(10 * var(--screen-unit)); justify-content: center; margin-top: calc(34 * var(--screen-unit)); }
.vc-dots button {
  width: calc(9 * var(--screen-unit)); height: calc(9 * var(--screen-unit)); min-width: 7px; min-height: 7px;
  border-radius: 50%; background: rgba(217, 211, 194, 0.3);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.vc-dots button.is-on { background: var(--accent); transform: scale(1.35); }

@media (max-width: 767.98px) {
  .vc-card { flex-basis: 86vw; grid-template-columns: 1fr; gap: calc(18 * var(--screen-unit)); }
  /* The one selector that was missing a phone value: --screen-unit is ~1.04 on
     a 390px viewport, so max(14vw, 320su) resolved to a 333px wordmark and
     "OLEA" ran 860px wide — a 470px horizontal scroll on the whole document,
     measured, not eyeballed. */
  .big-mark { font-size: 24vw; }
  #eleccion { padding-top: calc(150 * var(--screen-unit)); }
}

/* ============================================================
   7 · El final — el vuelco y el charco
   ============================================================ */
#final { position: relative; height: 220svh; background: var(--black); }
#final-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14svh var(--site-padding-x) 0;
}
#final-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#final-claim {
  position: relative; z-index: 2; text-align: center; max-width: 24ch;
  /* the pool tops out below this, but a scrim costs nothing and the last line
     of the page is the one line that must always be readable */
  text-shadow: 0 2px 26px rgba(12, 18, 8, 0.85);
}
.no3d #final { height: auto; }
.no3d #final-pin { position: static; height: auto; padding-block: var(--section-y); }
.no3d #final-canvas { display: none; }
@media (max-width: 767.98px) { #final { height: 190svh; } }

/* ============================================================
   Footer
   ============================================================ */
#footer { padding-block: calc(30 * var(--screen-unit)) calc(70 * var(--screen-unit)); text-align: center; }
#fall-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.footer-punch { font-size: var(--h2); max-width: 22ch; margin-inline: auto; line-height: 1.04; }
.footer-punch em { font-style: normal; color: var(--accent); }
.footer-sub { font-size: var(--body2); color: var(--linen); max-width: calc(660 * var(--screen-unit)); margin: calc(26 * var(--screen-unit)) auto 0; }
.footer-cta {
  display: inline-block; margin-top: calc(34 * var(--screen-unit));
  border: 1px solid var(--gold); border-radius: 999px; color: var(--accent);
  padding: calc(16 * var(--screen-unit)) calc(40 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--btn); letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(201, 154, 46, 0.08);
}
.foot-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin-top: calc(70 * var(--screen-unit)); text-align: left; align-items: start;
}
.share-box { border: 1px dotted rgba(217, 211, 194, 0.3); padding: calc(24 * var(--screen-unit)); }
.share-box__brand { font-size: var(--h5); font-weight: 700; text-transform: uppercase; line-height: 1.18; }
.share-box__brand span { color: var(--gold); }
.share-box__line { margin-top: calc(22 * var(--screen-unit)); font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.share-box__btn {
  margin-top: calc(12 * var(--screen-unit)); border: 1px dashed rgba(217, 211, 194, 0.4); border-radius: 999px;
  padding: calc(10 * var(--screen-unit)) calc(22 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em; text-transform: uppercase;
}
.share-box__btn.is-done { color: var(--accent); border-color: var(--accent); border-style: solid; }
.nl__label { font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nl__form { display: flex; align-items: center; gap: calc(10 * var(--screen-unit)); margin-top: calc(14 * var(--screen-unit)); border-bottom: 1px solid rgba(217, 211, 194, 0.34); }
.nl__form input { flex: 1; min-width: 0; background: none; border: 0; padding: calc(12 * var(--screen-unit)) 0; font-size: var(--body3); }
.nl__form input::placeholder { color: var(--muted); }
.nl__form input:focus { outline: none; }
.nl__form button { font-size: var(--h5); color: var(--accent); transition: transform 0.3s ease; }
.nl__form button:hover { transform: translateX(4px); }
.nl__state { margin-top: calc(12 * var(--screen-unit)); font-family: var(--mono); font-size: var(--sub2); color: var(--olive-lit); min-height: 1.4em; }
.foot-cols { display: flex; flex-direction: column; gap: calc(26 * var(--screen-unit)); }
.foot-cols__label { font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.foot-cols__val { font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-top: calc(6 * var(--screen-unit)); }
.footer-meta {
  display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; text-align: left;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.1em; color: var(--muted);
}
.footer-meta__disc { max-width: calc(560 * var(--screen-unit)); text-align: right; }
.footer-meta a { color: var(--olive-lit); }

@media (max-width: 767.98px) {
  .foot-grid { grid-template-columns: 1fr; }
  .footer-meta__disc { text-align: left; }
}

/* ============================================================
   Deco + shared bits
   ============================================================ */
.deco-eq {
  position: absolute; right: var(--site-padding-x); bottom: calc(40 * var(--screen-unit));
  display: flex; align-items: baseline; gap: calc(14 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.deco-eq b { font-size: var(--h4); font-weight: 400; color: var(--accent); letter-spacing: 0; text-transform: none; }
.is-light .deco-eq { color: #5c6a4c; }
.is-light .deco-eq b { color: #8a6a1e; }
.deco-dots { height: 0; border-top: 1px dotted rgba(217, 211, 194, 0.3); }
.is-light .deco-dots { border-top-color: rgba(27, 33, 19, 0.3); }
.scroll-cue {
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--screen-unit));
  margin-top: calc(50 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue i { display: grid; place-items: center; width: calc(24 * var(--screen-unit)); height: calc(24 * var(--screen-unit)); min-width: 18px; min-height: 18px; border: 1px solid rgba(217, 211, 194, 0.34); border-radius: 50%; }
.scroll-cue i::before { content: "\2304"; line-height: 1; }
.is-light .scroll-cue { color: #5c6a4c; }
.is-light .scroll-cue i { border-color: rgba(27, 33, 19, 0.34); }
.split-line { overflow: hidden; }

/* the travelling seam band between sections (see transitions() in main.js) */
.seam { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: calc(150 * var(--screen-unit)); overflow: hidden; pointer-events: none; }
.seam::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--sx, -60%); width: 58%;
  background: linear-gradient(90deg, transparent, rgba(201, 154, 46, 0.14) 45%, rgba(232, 194, 90, 0.2) 55%, transparent);
  filter: blur(calc(26 * var(--screen-unit)));
}
.is-light > .seam::before { background: linear-gradient(90deg, transparent, rgba(74, 93, 58, 0.12) 45%, rgba(74, 93, 58, 0.16) 55%, transparent); }

#video-overlay { position: fixed; inset: 0; z-index: 180; background: rgba(4, 6, 3, 0.94); display: none; place-items: center; padding: var(--site-padding-x); }
#video-overlay.is-open { display: grid; }
#video-overlay video { width: min(100%, 1100px); border-radius: calc(12 * var(--screen-unit)); }
#video-overlay .close { position: absolute; top: calc(24 * var(--screen-unit)); right: var(--site-padding-x); font-size: var(--h4); }

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