/* ============================================================
   APRÈS DISTILLERY — sistema visual
   Paleta y tipografías según Brand Book (2.3 / 2.4)
   ============================================================ */

:root{
  /* Principales */
  --carbon:#1E1E1E;
  --moss:#494B30;
  --brown:#462D1A;
  --sand:#BEB5A2;
  --offwhite:#E8E7E2;
  /* Expandidos */
  --ivory:#DDD3C8;
  --graphite:#3D3C3B;
  --stone:#676966;
  --slate:#455160;
  --navy:#0A253E;
  --clay:#D86144;
  --copper:#B94F30;
  --olive:#88845F;
  --taupe:#7D736B;

  --ink:var(--carbon);
  --paper:#fff;              /* fondo del sitio: blanco, no el hueso de la paleta */

  --serif:"Playfair Display", "Times New Roman", serif;
  --sans:"Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --gut:clamp(1.25rem, 4vw, 4.5rem);
  --sec:clamp(5.5rem, 12vh, 11rem);
  --max:1440px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%; height:auto; display:block}
[hidden]{display:none !important}   /* el reset de img gana al UA sin esto */
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
::selection{background:var(--clay); color:var(--offwhite)}

/* ── Tipografía base ─────────────────────────────────────── */
.eyebrow{
  font-size:.68rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase;
  color:var(--taupe); margin:0 0 1.6em;
}
.eyebrow--light{color:var(--sand)}

.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem,5.2vw,4.3rem);
  line-height:1.06; letter-spacing:-.015em; margin:0 0 .55em;
}
.h2--light{color:var(--offwhite)}
.p{font-size:clamp(.98rem,1.15vw,1.08rem); line-height:1.75; color:var(--stone); margin:0 0 1.1em; max-width:46ch}
.p--light{color:var(--ivory); opacity:.82}
.p--wide{max-width:54ch}

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.05em 2.4em; border-radius:999px;
  font-size:.72rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
  border:1px solid transparent; white-space:nowrap;
}
.btn--solid{background:var(--carbon); color:var(--offwhite)}
.btn--solid:hover{background:var(--copper); transform:translateY(-2px)}
.btn--ghost{border-color:rgba(30,30,30,.28); color:var(--carbon)}
.btn--ghost:hover{border-color:var(--carbon)}

/* ============================================================
   AGE GATE
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:200;
  background:#fff;
  display:grid; place-items:center; padding:var(--gut);
  text-align:center;
}
.gate[hidden]{display:none}
.gate.is-out{opacity:0; visibility:hidden; transition:opacity .8s var(--ease), visibility .8s}
.gate__inner{max-width:34rem}
.gate__logo{width:clamp(130px,15vw,180px); height:auto; margin:0 auto 2.6rem}
.gate__q{font-family:var(--serif); font-size:clamp(1.1rem,1.9vw,1.45rem); line-height:1.5; margin:0 0 2.4rem}
.gate__actions{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.8rem}
.gate__legal{font-size:.7rem; letter-spacing:.09em; color:var(--taupe); line-height:1.9; margin:0}
.gate__deny{display:none; max-width:30rem}
.gate.is-denied .gate__inner{display:none}
.gate.is-denied .gate__deny{display:block}

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:190; background:#fff;
  display:grid; place-items:center; gap:2.4rem; align-content:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
.loader__logo{width:clamp(120px,13vw,160px); height:auto; opacity:.9}
.loader__bar{width:min(220px,40vw); height:1px; background:rgba(30,30,30,.14); overflow:hidden}
.loader__bar span{display:block; height:100%; width:0; background:var(--carbon); transition:width .4s var(--ease)}
.loader.is-out{opacity:0; visibility:hidden; pointer-events:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.15rem var(--gut);
  transition:background .6s var(--ease), padding .6s var(--ease), border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--nav-bg, rgba(255,255,255,.86)); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(30,30,30,.09); padding-top:.7rem; padding-bottom:.7rem;
}
.nav__logo img{width:clamp(74px,6vw,92px); height:auto; transition:filter .6s var(--ease)}
/* isotipo AD: casi cuadrado, se dimensiona por alto */
.nav__logo img.nav__ad{width:auto; height:clamp(34px,3.4vw,46px)}
.nav__links{display:flex; gap:clamp(1.2rem,2.4vw,2.6rem)}
.nav__links a, .nav__cta{
  font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; position:relative; padding:.3em 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .5s var(--ease);
}
.nav__links a:hover::after{width:100%}
.nav__cta{border:1px solid currentColor; border-radius:999px; padding:.72em 1.5em; opacity:.85}
.nav__cta:hover{opacity:1}

/* nav sobre fondo oscuro */
.nav.is-dark{color:var(--offwhite)}
.nav.is-dark .nav__logo img{filter:brightness(0) invert(1)}
.nav.is-dark.is-stuck{background:rgba(20,20,20,.6); border-bottom-color:rgba(232,231,226,.12)}

.nav__burger{display:none; width:34px; height:34px; position:relative}
.nav__burger span{
  position:absolute; left:6px; right:6px; height:1px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s;
}
.nav__burger span:nth-child(1){top:14px}
.nav__burger span:nth-child(2){top:20px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:90; background:var(--carbon); color:var(--offwhite);
  display:grid; place-items:center;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-io);
}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu__links{display:grid; gap:.2rem; text-align:center}
.menu__links a{
  font-family:var(--serif); font-size:clamp(2rem,8vw,3.4rem); line-height:1.25;
  opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .4s;
}
.menu__links a em{
  font-family:var(--sans); font-style:normal; font-size:.62rem; letter-spacing:.22em;
  color:var(--taupe); vertical-align:super; margin-right:.9em;
}
.menu__links a:hover{color:var(--sand)}
body.menu-open .menu__links a{opacity:1; transform:none}
body.menu-open .menu__links a:nth-child(1){transition-delay:.18s}
body.menu-open .menu__links a:nth-child(2){transition-delay:.24s}
body.menu-open .menu__links a:nth-child(3){transition-delay:.30s}
body.menu-open .menu__links a:nth-child(4){transition-delay:.36s}
body.menu-open .menu__links a:nth-child(5){transition-delay:.42s}

/* ============================================================
   HERO DE VIDEO
   ============================================================ */
.film{
  position:relative; height:100svh; overflow:hidden;
  background:var(--carbon); color:var(--offwhite);
  display:grid; place-items:center;
}
.film__media{position:absolute; inset:0; overflow:hidden}
.film__video{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(calc(1 + var(--film-p,0) * .12));
  opacity:0; transition:opacity 1.6s var(--ease);
}
.film--playing .film__video{opacity:1}
/* sin archivo de video queda una textura de respaldo */
.film__media::before{
  content:""; position:absolute; inset:0;
  background:url("../img/tex-wood.png") center/cover no-repeat;
  filter:saturate(.45) brightness(.55);
}
.film__scrim{
  position:absolute; inset:0;
  background:
    /* oscurece justo detrás del titular sin apagar toda la imagen */
    radial-gradient(62% 46% at 50% 47%, rgba(12,12,12,.62) 0%, rgba(12,12,12,.28) 55%, rgba(12,12,12,0) 78%),
    linear-gradient(180deg, rgba(16,16,15,.70) 0%, rgba(16,16,15,.20) 32%, rgba(16,16,15,.28) 60%, rgba(16,16,15,.88) 100%);
}
.film__body{
  position:relative; z-index:2; text-align:center; padding:0 var(--gut);
  width:min(1100px,92vw);
  opacity:calc(1 - var(--film-p,0) * 1.35);
  transform:translateY(calc(var(--film-p,0) * -46px));
}
.film__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.3rem,5.9vw,5.2rem); line-height:1.04; letter-spacing:-.022em;
  margin:0 0 .6em; text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.film__title em{font-style:italic; color:var(--sand)}
.film__sub{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--offwhite); margin:0; opacity:.95;
  text-shadow:0 1px 14px rgba(0,0,0,.7);
}
.film .eyebrow{color:var(--sand); text-shadow:0 1px 14px rgba(0,0,0,.7)}

/* ============================================================
   STAGE — escenario de producto que gira con el scroll
   ============================================================ */
.stage{position:relative; height:var(--stage-h,620vh)}
.stage__sticky{position:sticky; top:0; height:100svh; overflow:hidden}

.stage__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.3; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.stage__grain--dark{mix-blend-mode:screen; opacity:.14}

.stage__canvas{position:absolute; inset:0; z-index:1}
.stage__canvas canvas{display:block; width:100%; height:100%}

/* escenarios a sangre: velo lateral para que se lea la información */
.stage__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,14,14,.80) 0%, rgba(14,14,14,.10) 30%, rgba(14,14,14,0) 45%,
                           rgba(14,14,14,0) 55%, rgba(14,14,14,.10) 70%, rgba(14,14,14,.80) 100%),
    linear-gradient(180deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,0) 22%, rgba(14,14,14,0) 74%, rgba(14,14,14,.72) 100%);
}
/* variante para escenarios de fondo claro */
/* blanco puro: con un velo hueso sobre un cuadro blanco se veía la banda
   del degradado y, sobre todo, la costura entre un escenario y el siguiente */
.stage__scrim--light{
  /* cada escenario pasa el color de su fondo en --scrim-rgb */
  background:
    linear-gradient(90deg, rgba(var(--scrim-rgb,255,255,255),.86) 0%, rgba(var(--scrim-rgb,255,255,255),.14) 30%, rgba(var(--scrim-rgb,255,255,255),0) 45%,
                           rgba(var(--scrim-rgb,255,255,255),0) 55%, rgba(var(--scrim-rgb,255,255,255),.14) 70%, rgba(var(--scrim-rgb,255,255,255),.86) 100%),
    linear-gradient(180deg, rgba(var(--scrim-rgb,255,255,255),.55) 0%, rgba(var(--scrim-rgb,255,255,255),0) 24%, rgba(var(--scrim-rgb,255,255,255),0) 76%, rgba(var(--scrim-rgb,255,255,255),.7) 100%);
}
/* el grano en multiply ensucia el blanco y se corta en el borde de la sección */
.stage[data-theme="light"] .stage__grain{display:none}
@media (max-width:860px){
  .stage__scrim{
    background:linear-gradient(180deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,0) 26%,
                                       rgba(14,14,14,0) 44%, rgba(14,14,14,.88) 82%);
  }
  .stage__scrim--light{
    background:linear-gradient(180deg, rgba(var(--scrim-rgb,255,255,255),.5) 0%, rgba(var(--scrim-rgb,255,255,255),0) 26%,
                                       rgba(var(--scrim-rgb,255,255,255),0) 44%, rgba(var(--scrim-rgb,255,255,255),.94) 82%);
  }
}

/* ── bloques de información laterales ───────────────────── */
.beats{position:absolute; inset:0; z-index:3; pointer-events:none}
.beat{
  position:absolute; top:50%; width:min(30ch,30vw);
  opacity:0; transform:translateY(-50%) translateY(var(--dy,0px));
  will-change:opacity,transform;
}
.beat--left{left:clamp(1.5rem,6vw,7rem); text-align:left}
.beat--right{right:clamp(1.5rem,6vw,7rem); text-align:right}
.beat--center{
  left:50%; width:min(40ch,86vw); text-align:center; top:auto;
  transform:translateX(-50%) translateY(var(--dy,0px));
  bottom:auto; top:14vh;
}
.beat__n{
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--copper); margin:0 0 1.3em;
}
.beat__t{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,3.4vw,3.1rem); line-height:1.06; letter-spacing:-.015em;
  margin:0 0 .7em;
}
.beat__t sup{font-size:.45em; vertical-align:super}
.beat__d{font-size:.92rem; line-height:1.8; color:var(--stone); margin:0}
.beat__d--note{margin-top:1.1em; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75}
.beat--intro .beat__t{font-size:clamp(2.6rem,6.4vw,4.8rem); margin:0}
.beat--intro .beat__n{margin-bottom:.9em}

/* escenario sobre fondo oscuro */
.stage[data-theme="dark"] .beat__t{color:var(--offwhite)}
.stage[data-theme="dark"] .beat__d{color:var(--ivory); opacity:.82}
.stage[data-theme="dark"] .beat__n{color:var(--clay)}

/* ── indicador de scroll y de progreso ──────────────────── */
.scrollhint{
  position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom:2.2rem;
  display:flex; align-items:center; gap:.9rem;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--taupe);
  transition:opacity .5s var(--ease);
}
.scrollhint--light{color:var(--sand); opacity:calc(1 - var(--film-p,0) * 2.4)}
.scrollhint span{
  width:1px; height:34px; background:currentColor; opacity:.4; position:relative; overflow:hidden;
}
.scrollhint span::after{
  content:""; position:absolute; inset:0; background:currentColor;
  animation:trickle 2.4s var(--ease-io) infinite;
}
@keyframes trickle{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

.progress{
  position:absolute; z-index:3; right:clamp(.9rem,2vw,1.8rem); top:50%; transform:translateY(-50%);
  width:1px; height:26vh; background:currentColor; opacity:.18;
}
.progress i{display:block; width:100%; height:0; background:var(--copper)}
.stage[data-theme="dark"] .progress{color:var(--sand); opacity:.24}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{
  background:var(--carbon); color:var(--offwhite);
  padding:calc(var(--sec)*1.25) var(--gut); text-align:center;
  position:relative; overflow:hidden;
}
.quote::before{
  content:""; position:absolute; inset:0;
  background:url("../img/tex-wood.png") center/cover no-repeat;
  opacity:.16; filter:saturate(.55) contrast(1.1);
}
.quote::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(75% 70% at 50% 50%, transparent, rgba(20,20,20,.85));
}
.quote__inner{position:relative; z-index:1; max-width:64rem; margin:0 auto}
.quote__big{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.3rem,6.4vw,5.4rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 1.1em;
}
.quote__big em{font-style:italic; color:var(--sand)}
.quote__sub{
  max-width:44ch; margin:0 auto; color:var(--ivory); opacity:.78;
  font-size:clamp(.98rem,1.15vw,1.1rem); line-height:1.8;
}

/* ============================================================
   EDITORIAL — foto a un lado, texto al otro
   ============================================================ */
.editorial{
  display:grid; grid-template-columns:1.05fr 1fr; min-height:92vh;
  background:var(--moss); color:var(--offwhite);
}
.editorial__media{margin:0; position:relative; overflow:hidden; background:var(--moss)}
.editorial__media img{width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.editorial__media::after{      /* funde la foto hacia el verde, sin corte duro */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(73,75,48,.22), transparent 32%, transparent 72%, rgba(73,75,48,.55));
}
/* si la foto todavía no está, el bloque no se rompe */
.editorial--noimg .editorial__media img{display:none}
.editorial--noimg .editorial__media{
  background:url("../img/botanical.png") center/auto 118% no-repeat var(--moss);
  background-blend-mode:multiply;
}
.editorial__body{
  display:grid; align-content:center;
  padding:clamp(3.5rem,7vw,7rem) clamp(1.6rem,5.5vw,6.5rem);
}
.editorial__sign{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.6rem); line-height:1.35; color:var(--sand);
  margin:2.4rem 0 0; padding-top:2rem; border-top:1px solid rgba(232,231,226,.22);
}

/* ============================================================
   MOMENTOS
   ============================================================ */
.moments{padding:var(--sec) var(--gut); background:#fff}
.moments > *{max-width:var(--max); margin-left:auto; margin-right:auto}
.moments__head{margin-bottom:clamp(3rem,7vh,6rem)}
/* las cuatro fotos traen el texto compuesto: la tarjeta sólo las encuadra */
.moments__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.8vw,1.6rem);
}
.moment{margin:0}
.moment img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  background:var(--paper);
}
.moment figcaption{
  margin-top:1rem; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.35rem); letter-spacing:-.01em;
}

/* ============================================================
   SPLIT (lujo silencioso)
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1fr; min-height:88vh; background:var(--brown)}
.split__media{
  background:url("../img/tex-wood.png") center/cover no-repeat;
  filter:saturate(.7) brightness(.85);
  position:relative;
}
.split__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(30,30,30,.35), transparent 55%, rgba(70,45,26,.55));
}
.split__body{
  display:grid; align-content:center;
  padding:clamp(3.5rem,7vw,7rem) clamp(1.6rem,5vw,6rem);
}
.specs{list-style:none; margin:2.8rem 0 0; padding:0; display:grid; gap:0}
.specs li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:1.05rem 0; border-bottom:1px solid rgba(232,231,226,.16);
}
.specs li:first-child{border-top:1px solid rgba(232,231,226,.16)}
.specs span{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand)}
.specs b{font-family:var(--serif); font-weight:400; font-size:1.08rem; color:var(--offwhite)}

/* ============================================================
   COLECCIÓN
   ============================================================ */
.collection{padding:var(--sec) var(--gut); max-width:var(--max); margin:0 auto}
.collection__head{margin-bottom:clamp(3rem,7vh,6rem); max-width:60rem}
.collection__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2.6rem)}
.card{background:#fff; border:1px solid rgba(30,30,30,.07); transition:transform .7s var(--ease), box-shadow .7s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(30,30,30,.28)}
.card__img{
  aspect-ratio:4/5; display:grid; place-items:center; padding:clamp(1.5rem,3vw,3rem);
  background:linear-gradient(180deg,#F4F3F0,#E9E7E2);
  overflow:hidden;
}
.card__img img{max-height:100%; width:auto; object-fit:contain; transition:transform .9s var(--ease)}
/* los renders de lata traen fondo blanco recortado: multiply lo funde
   y el zoom deja fuera de cuadro el borde del recorte */
.card__img--photo{background:#fff}
.card__img--photo img{mix-blend-mode:multiply; transform:scale(1.34)}
.card:hover .card__img--photo img{transform:scale(1.4)}
.card:hover .card__img img{transform:scale(1.045)}
.card__img--bottle img{max-height:112%}
.card__body{padding:clamp(1.4rem,2.4vw,2.2rem)}
.card__kicker{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); margin:0 0 1em}
.card__title{font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2.2vw,1.9rem); margin:0 0 .35em}
.card__meta{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); margin:0 0 1.2em}
.card__d{font-size:.9rem; line-height:1.75; color:var(--stone); margin:0}

/* ============================================================
   VALORES
   ============================================================ */
.values{background:var(--carbon); color:var(--offwhite); padding:var(--sec) var(--gut); position:relative; overflow:hidden}
/* la ilustración botánica trae fondo blanco: multiply funde el blanco
   y deja sólo el grabado, sin el borde del recuadro */
.values::before{
  content:""; position:absolute; inset:0;
  background:url("../img/botanical.png") right -6% top 50%/auto 120% no-repeat;
  opacity:.5; mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(58% 88% at 100% 50%, #000 18%, transparent 76%);
  mask-image:radial-gradient(58% 88% at 100% 50%, #000 18%, transparent 76%);
}
.values__head{max-width:var(--max); margin:0 auto clamp(3rem,7vh,6rem); position:relative}
.values__grid{
  max-width:var(--max); margin:0 auto; position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem);
}
.value{border-top:1px solid rgba(232,231,226,.24); padding-top:1.6rem}
.value h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.15rem,1.7vw,1.5rem);
  margin:0 0 .6em; color:var(--offwhite);
}
.value p{margin:0; font-size:.9rem; line-height:1.8; color:var(--ivory); opacity:.78}

/* el alambique: foto a un lado, argumento al otro */
.still-block{
  max-width:var(--max); margin:0 auto clamp(3.5rem,8vh,7rem); position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4.5vw,5rem); align-items:center;
}
.still{margin:0}
.still img{width:100%; height:auto; display:block}
.still figcaption{
  margin-top:1rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand); opacity:.85;
}
.h3{
  font-family:var(--serif); font-weight:400; line-height:1.12;
  font-size:clamp(1.6rem,3vw,2.4rem); margin:0 0 1em; letter-spacing:-.01em;
}
.h3--light{color:var(--offwhite)}
.still__text .specs{margin-top:2rem}

/* ============================================================
   CTA + FORM
   ============================================================ */
/* mismo carbón que Destilería y el pie: el bloque de cierre queda continuo */
.cta{padding:var(--sec) var(--gut); text-align:center; background:var(--carbon); color:var(--offwhite)}
.cta .h2{color:var(--offwhite)}
.cta .p{color:var(--ivory); opacity:.82}
.cta .eyebrow{color:var(--sand)}
.cta .form--contact label span{color:var(--sand); opacity:.8}
.cta .form input, .cta .form textarea{
  border-color:rgba(232,231,226,.26); color:var(--offwhite);
}
.cta .form input::placeholder, .cta .form textarea::placeholder{color:rgba(232,231,226,.42)}
.cta .form input:focus, .cta .form textarea:focus{border-color:var(--sand)}
.cta .btn--solid{background:var(--offwhite); color:var(--carbon)}
.cta .btn--solid:hover{background:var(--clay); color:var(--offwhite)}
.cta .form__note{color:var(--clay)}
.cta__inner{max-width:44rem; margin:0 auto}
.cta .p{margin-left:auto; margin-right:auto}
.form{display:flex; gap:.6rem; margin:2.4rem auto 0; max-width:30rem; flex-wrap:wrap}
.form input{
  flex:1 1 14rem; min-width:0; padding:1.05em 1.4em; border-radius:999px;
  border:1px solid rgba(30,30,30,.2); background:transparent; font-family:var(--sans);
  font-size:.85rem; color:var(--ink); transition:border-color .4s;
}
.form input:focus{outline:none; border-color:var(--carbon)}
.form input::placeholder{color:var(--taupe)}
.form__note{min-height:1.4em; margin:1rem 0 0; font-size:.76rem; letter-spacing:.09em; color:var(--copper)}

/* formulario de contacto: cuatro campos, alineado a la izquierda */
.form--contact{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem 1rem;
  max-width:44rem; text-align:left;
}
@media (max-width:860px){ .form--contact{grid-template-columns:1fr 1fr} }
.form--contact label{display:grid; gap:.5rem}
.form--contact label span{
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe);
}
.form--contact textarea{
  width:100%; padding:1.05em 1.4em; border-radius:1.4rem;
  border:1px solid rgba(30,30,30,.2); background:transparent; font-family:var(--sans);
  font-size:.85rem; color:var(--ink); resize:vertical; transition:border-color .4s;
}
.form--contact textarea:focus{outline:none; border-color:var(--carbon)}
.form--contact textarea::placeholder{color:var(--taupe)}
.form--contact input{flex:none; width:100%}
.form__wide{grid-column:1 / -1}
.form--contact .btn{justify-self:start; margin-top:.4rem}
@media (max-width:560px){ .form--contact{grid-template-columns:1fr} }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--carbon); color:var(--offwhite); padding:clamp(3.5rem,8vh,6rem) var(--gut) 2rem}
.footer__top{
  max-width:var(--max); margin:0 auto; display:flex; gap:clamp(2rem,6vw,6rem);
  justify-content:space-between; flex-wrap:wrap; padding-bottom:clamp(3rem,6vh,5rem);
}
/* versión en negativo del brand book: conserva los remates finos y el «Est. 2024»,
   que el filtro CSS aplastaba a blanco puro */
.footer__logo{width:clamp(120px,10vw,164px); height:auto; opacity:.95}

.footer__brand{display:grid; justify-items:start; gap:1.6rem}
.social{
  list-style:none; display:flex; gap:.8rem; padding:0; margin:0;
}
.social a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:6px;
  border:1px solid rgba(232,231,226,.24); color:var(--offwhite); opacity:.8;
  transition:opacity .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.social a:hover{opacity:1; border-color:var(--sand); transform:translateY(-2px)}
.footer__cols{display:flex; gap:clamp(2rem,5vw,5rem); flex-wrap:wrap}
.footer__cols h4{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sand);
  font-weight:400; margin:0 0 1.5em;
}
.footer__cols a{display:block; font-size:.86rem; color:var(--ivory); opacity:.72; padding:.34em 0; transition:opacity .3s}
.footer__cols a:hover{opacity:1}
.footer__claim{
  max-width:var(--max); margin:0 auto; text-align:center;
  font-family:var(--serif); font-size:clamp(1.5rem,4.6vw,3.4rem); line-height:1.15;
  padding:clamp(2.5rem,6vh,4.5rem) 0; border-top:1px solid rgba(232,231,226,.13);
  border-bottom:1px solid rgba(232,231,226,.13); color:var(--sand);
}
.footer__legal{
  max-width:var(--max); margin:0 auto; padding-top:2.2rem;
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  font-size:.68rem; line-height:1.85; letter-spacing:.05em; color:var(--taupe);
}
.footer__legal p{margin:0; max-width:62ch}
.footer__legal b{color:var(--ivory); font-weight:400}

/* ============================================================
   REVEALS
   ============================================================ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.moments__grid .reveal.is-in:nth-child(2){transition-delay:.09s}
.moments__grid .reveal.is-in:nth-child(3){transition-delay:.18s}
.moments__grid .reveal.is-in:nth-child(4){transition-delay:.27s}
.collection__grid .reveal.is-in:nth-child(2){transition-delay:.12s}
.collection__grid .reveal.is-in:nth-child(3){transition-delay:.24s}
.values__grid .reveal.is-in:nth-child(2){transition-delay:.09s}
.values__grid .reveal.is-in:nth-child(3){transition-delay:.18s}
.values__grid .reveal.is-in:nth-child(4){transition-delay:.27s}

body.is-loading .reveal{transition:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .moments__grid{grid-template-columns:repeat(2,1fr)}
  .values__grid{grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem}
  .collection__grid{grid-template-columns:1fr; gap:1.5rem}
  .card{display:grid; grid-template-columns:minmax(0,38%) 1fr; align-items:center}
  .card__img{aspect-ratio:3/4}
}

@media (max-width:860px){
  .nav__links, .nav__cta{display:none}
  .nav__burger{display:block}
  .still-block{grid-template-columns:1fr; gap:2.2rem}

  .stage{height:calc(var(--stage-h,620vh) * .78)}
  .beat{
    position:absolute; left:50%; right:auto; top:auto; bottom:clamp(2.5rem,9vh,5rem);
    width:min(38ch,86vw); text-align:center;
    transform:translateX(-50%) translateY(var(--dy,0px));
  }
  .beat--left, .beat--right{left:50%; right:auto; text-align:center}
  .beat--center, .beat--intro{top:auto; bottom:clamp(2.5rem,9vh,5rem)}
  .beat__n{margin-bottom:.9em}
  .beat__t{font-size:clamp(1.7rem,7vw,2.4rem); margin-bottom:.5em}
  .beat--intro .beat__t{font-size:clamp(2rem,9vw,3rem)}
  .beat__d{font-size:.86rem; line-height:1.7}
  /* a sangre en móvil el texto va sobre el producto: se aclara */
  /* en pantalla angosta el texto cae sobre el producto: sobre los escenarios
     oscuros va en claro, y sobre los blancos en tinta, o desaparece */
  .stage--cover[data-theme="dark"] .beat__d{color:var(--offwhite); opacity:.9}
  .stage--cover[data-theme="light"] .beat__d{color:var(--carbon); opacity:1}
  .progress{display:none}
  .scrollhint{bottom:1.2rem}

  .editorial{grid-template-columns:1fr}
  .editorial__media{min-height:58vh}
  .editorial__media::after{background:linear-gradient(180deg, transparent 55%, rgba(73,75,48,.6))}
  .split{grid-template-columns:1fr}
  .split__media{min-height:52vh}
  .footer__legal{flex-direction:column}
}

@media (max-width:560px){
  .moments__grid{grid-template-columns:1fr}
  .card{grid-template-columns:1fr}
  .values__grid{grid-template-columns:1fr}
  .gate__actions{flex-direction:column}
  .gate__actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .scrollhint span::after{animation:none}
}