/* ==========================================================================
   DORADA® Premium Pilsner — sitio v4 (preview)
   Superficie crema plana · un solo acento (dorado profundo) · la foto manda.
   Firma geométrica: regla doble y óvalo de la etiqueta. Profundidad por capas,
   luz rasante y parallax lentos; todo pausable y opcional (sin JS queda completa).
   ========================================================================== */

/* ---------- 1 · Fuentes auto-hospedadas ---------------------------------- */

@font-face{
  font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/marcellus-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/marcellus-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/jost-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/jost-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/jost-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/jost-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/jost-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 2 · Tokens --------------------------------------------------- */

:root{
  /* Paleta — DESIGN.md §2, HEX exactos */
  --dorado:#F2C136;
  --dorado-claro:#FDD47D;
  --dorado-profundo:#E7A216;
  --ambar:#7C3415;
  --metal-oscuro:#916D1F;
  --metal-texto:#85641C;    /* texto pequeño dorado: 5.12:1 sobre crema-web */
  --metal-claro:#FED686;
  --crema:#F9F2E5;
  --crema-web:#FBF7EE;
  --marron:#221405;

  /* Metálico de titulares sobre crema (v4): todas las paradas ≥ 3.4:1 sobre
     #FBF7EE y #F9F2E5 — texto grande AA. El brillo claro solo pasa como luz. */
  --metal-titular:linear-gradient(45deg,#85641C 0%,#A67A22 45%,#916D1F 100%);
  --metal-luz:linear-gradient(100deg,#C08F2C 0%,#DEAB44 34%,#FDD47D 50%,#DEAB44 66%,#C08F2C 100%);

  --linea:rgba(231,162,22,.35);      /* dorado profundo al 35 % */
  --linea-tenue:rgba(34,20,5,.16);

  --serif:"Marcellus",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --max:1240px;
  --gutter:clamp(20px,4vw,56px);
  --ritmo:clamp(64px,8vw,120px);
}

/* ---------- 3 · Base ----------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.gate-open{overflow:hidden}
body{
  margin:0;background:var(--crema-web);color:var(--marron);
  font:400 17px/1.65 var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd,table{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--metal-texto);outline-offset:3px}
.nb{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:90;min-height:44px;display:inline-flex;align-items:center;background:var(--dorado-profundo);color:var(--marron);padding:0 18px;font:600 14px/1 var(--sans)}
.skip:focus{left:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);width:100%}

/* ---------- 4 · Tipografía de marca -------------------------------------- */

.eyebrow,.sub h3,.ficha h3,.cita__fuente,.retail__lbl,.pie__lema,.cifra dt,.eti__notas b{
  font:500 12.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--metal-texto);margin:0 0 14px;
}
.h1,.h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;line-height:1.02}
.t-apoyo,.t-clave{display:block}
.t-apoyo{color:var(--marron);letter-spacing:.07em}
.t-clave{color:var(--metal-texto);letter-spacing:.04em}
.ln{display:inline-block}

.h1{font-size:clamp(38px,6.4vw,74px);margin:0 0 26px}
.h1 .t-apoyo{font-size:.6em;margin-bottom:.16em}

/* Palabra clave: metálico oscuro legible (≥ 3.4:1). En el hero además pasa
   una luz rasante por el metal (.glint), solo transform. */
.t-metal,.h2 .t-clave .ln{
  background-image:var(--metal-titular);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.t-metal{position:relative}
/* ® de marca registrada: pequeño, arriba a la derecha; color sólido (un hijo posicionado no entra en el background-clip:text del metálico) */
.reg{font-size:.3em;line-height:0;vertical-align:top;position:relative;top:.55em;margin-left:.06em;letter-spacing:0;color:var(--metal-texto)}
.glint{
  position:absolute;left:0;top:0;bottom:0;width:32%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 58%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 58%,transparent 100%);
  transform:translate3d(-100%,0,0);
}
.glint__in{
  position:absolute;left:0;top:0;width:312.5%;   /* = ancho del titular */
  background-image:var(--metal-luz);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translate3d(32%,0,0);
}
.glint__in::before{content:attr(data-t)}
/* sin JS / reducir movimiento: la luz queda congelada a media pasada */
.no-js .glint{display:none}

.h2{font-size:clamp(28px,3.4vw,46px);margin:0}
.h2 .t-apoyo{font-size:.6em;margin-bottom:.2em}

.lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;max-width:46ch;margin:0 0 30px}
.body p:not(.eyebrow):not(.destacada):not(.cita__fuente):not(.retail__lbl):not(.sub__anio){
  max-width:60ch;margin:0 0 18px;font-size:17px;
}
.body p:not(.eyebrow):not(.destacada):not(.cita__fuente):not(.retail__lbl):not(.sub__anio):last-child{margin-bottom:0}
.body .destacada,.destacada{
  font-family:var(--serif);font-size:clamp(20px,2.05vw,27px);line-height:1.42;
  letter-spacing:.005em;max-width:32ch;margin:0 0 26px;
}
.sub{position:relative;margin-top:36px;padding-top:26px;border-top:1px solid var(--linea-tenue)}
/* el año como cifra de exhibición: contorno fino, en su propio renglón */
.body .sub__anio{
  display:block;margin:0 0 12px;
  font:400 clamp(58px,6vw,88px)/.9 var(--serif);letter-spacing:.03em;
  color:transparent;-webkit-text-stroke:1px var(--metal-texto);
  user-select:none;
}

/* ---------- 5 · Firma geométrica: regla doble ---------------------------- */

.rule2{position:relative;display:block;width:100%;height:5px;margin-bottom:22px}
.rule2::before,.rule2::after{
  content:"";position:absolute;left:0;width:100%;height:1px;
  background:var(--dorado-profundo);
  transform:scaleX(1);transform-origin:left center;
}
.rule2::before{top:0}
.rule2::after{top:4px}

.sec-head{margin-bottom:30px}

/* ---------- 6 · Header --------------------------------------------------- */

.hdr{
  position:sticky;top:0;z-index:60;background:var(--crema-web);
  border-bottom:1px solid var(--linea);
}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,2.6vw,44px);min-height:78px}
.hdr__brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;padding:6px 0}
.hdr__brand img{display:block;height:44px;width:auto}
/* hilo de avance de lectura sobre la regla del header */
.hdr__prog{
  position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:var(--dorado-profundo);transform:scaleX(0);transform-origin:left center;
  pointer-events:none;
}
.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.nav a{
  position:relative;display:inline-block;padding:15px 2px;text-decoration:none;
  font:500 14.5px/1 var(--sans);letter-spacing:.03em;color:var(--marron);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;
  background:var(--dorado-profundo);transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after,.nav a.is-here::after{transform:scaleX(1)}
.hdr__cta{flex:0 0 auto}
.nav > .btn{display:none}
.burger{display:none;width:48px;height:48px;margin-left:auto;align-items:center;justify-content:center}
.burger i{display:block;position:relative;width:22px;height:1.5px;background:var(--marron)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--marron)}
.burger i::before{top:-7px}.burger i::after{top:7px}
.nav__close{display:none}
.scrim{display:none}

/* ---------- 7 · Botones -------------------------------------------------- */

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.62em;
  min-height:48px;padding:0 26px;border-radius:2px;overflow:hidden;
  background:var(--dorado-profundo);color:var(--marron);text-decoration:none;
  font:600 14px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
}
.btn::before{
  content:"";position:absolute;inset:-2px -30px;background:var(--dorado);
  transform:translate3d(-112%,0,0) skewX(-38deg);
  transition:transform .55s var(--ease);
}
.btn > *{position:relative;z-index:1}
.btn:hover::before{transform:translate3d(0,0,0) skewX(-38deg)}
.ar{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .ar,.btn:focus-visible .ar{transform:translateX(4px)}
.btn--gh{background:transparent;color:var(--marron);box-shadow:inset 0 0 0 1.5px var(--marron)}
.btn--gh::before{background:rgba(231,162,22,.22)}
.btn--sm{min-height:44px;padding:0 20px;font-size:13px}
.btn--off{background:transparent;color:rgba(34,20,5,.62);box-shadow:inset 0 0 0 1.5px var(--linea-tenue);cursor:default}
.btn--off::before{display:none}

/* ---------- 8 · Foto: sombra de contacto y profundidad -------------------- */

.shot{position:relative;margin:0;display:flex;justify-content:center;align-items:flex-end}
.shot::before{
  content:"";position:absolute;left:50%;bottom:0;z-index:0;
  width:var(--sombra-w,72%);height:var(--sombra-h,34px);
  transform:translate3d(-50%,calc(42% + var(--py,0px)),0) scaleX(1);transform-origin:50% 50%;
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(124,52,21,.25) 0%,rgba(124,52,21,.19) 34%,rgba(124,52,21,.10) 58%,
    rgba(124,52,21,.035) 78%,rgba(124,52,21,0) 100%);
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.shot picture{display:block;position:relative;z-index:1}
.shot--px picture{transform:translate3d(0,var(--py,0px),0)}
.shot img{position:relative;z-index:1;display:block;
  width:min(100%,calc(var(--h,540px) * var(--r,1)));height:auto;max-width:100%;
  transition:transform .5s var(--ease)}
.shot--hov:hover img{transform:translateY(-6px)}
.shot--hov:hover::before{transform:translate3d(-50%,calc(42% + var(--py,0px)),0) scaleX(.86);opacity:.78}

/* brillo de estudio sobre el vidrio: enmascarado a la silueta de la foto,
   solo pasa una banda de luz (transform). Nunca glow. */
.sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  /* silueta de la botella ∩ banda vertical que excluye la etiqueta de papel
     (el papel es mate: el reflejo solo corre por el vidrio y el cuello) */
  -webkit-mask-image:var(--mask),linear-gradient(180deg,#000 0%,#000 45%,transparent 50%,transparent 92%,#000 96%);
          mask-image:var(--mask),linear-gradient(180deg,#000 0%,#000 45%,transparent 50%,transparent 92%,#000 96%);
  -webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mix-blend-mode:screen;
}
.sheen::before{
  content:"";position:absolute;top:-6%;bottom:-6%;left:0;width:18%;
  background:linear-gradient(90deg,rgba(255,244,214,0) 0%,rgba(255,244,214,.06) 30%,
    rgba(255,246,222,.32) 50%,rgba(255,244,214,.06) 70%,rgba(255,244,214,0) 100%);
  transform:translate3d(-120%,0,0) skewX(-4deg);
}
.sheen--frontal{--mask:url("../assets/fotos/botella_frontal_b_1000.webp")}
.no-js .sheen{display:none}

/* ---------- 9 · Hero ----------------------------------------------------- */

.hero{position:relative;padding:clamp(48px,6vw,86px) 0 clamp(64px,7.5vw,112px);overflow:hidden}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.hero__text{max-width:760px;position:relative;z-index:2}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:0}

.hero__stage{
  --bh:min(70vh,660px);
  position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:470px;
}
.hero__shot{--sombra-w:150%;--sombra-h:44px;z-index:2}
.hero__shot img{--h:var(--bh)}

/* capas del escenario: luz (atrás) · óvalo (medio) · botella (frente).
   El JS solo mueve estas capas con transform; sin JS quedan quietas. */
.hero__field,.hero__oval,.hero__shot{will-change:transform}

/* el óvalo de doble línea de la etiqueta como tarima */
.hero__oval{
  position:absolute;left:0;right:0;margin-inline:auto;z-index:1;pointer-events:none;
  bottom:calc(var(--bh) * .015);
  height:calc(var(--bh) * .9);aspect-ratio:400/640;
}
.hero__oval svg{display:block;width:100%;height:100%;overflow:visible}
.ov{fill:none;stroke:var(--dorado-profundo);stroke-width:1;vector-effect:non-scaling-stroke}
.ov--a{opacity:.7}
.ov--b{opacity:.5}

/* luz de estudio — anclada a la botella, nunca bajo el texto */
.hero__field{position:absolute;inset:-14% -22% -8% -30%;z-index:0;pointer-events:none;contain:paint}
.hero__glow{position:absolute;inset:0;overflow:hidden}
.hero__glow > i{position:absolute;display:block;will-change:transform,opacity;backface-visibility:hidden}
.hero__glow-key{
  left:6%;top:-4%;width:88%;height:100%;opacity:.95;
  background:radial-gradient(farthest-side at 50% 50%,
    rgba(255,253,247,.98) 0%,rgba(255,253,247,.9) 18%,rgba(255,253,247,.72) 34%,
    rgba(255,253,247,.48) 50%,rgba(255,253,247,.26) 66%,rgba(255,253,247,.1) 82%,rgba(255,253,247,0) 100%);
}
.hero__glow-fill{
  left:18%;top:16%;width:70%;height:76%;opacity:.9;
  background:radial-gradient(farthest-side at 50% 50%,
    rgba(253,212,125,.34) 0%,rgba(253,212,125,.27) 22%,rgba(253,212,125,.18) 42%,
    rgba(253,212,125,.09) 62%,rgba(253,212,125,.03) 82%,rgba(253,212,125,0) 100%);
}
.js .hero__glow-key{animation:luz-key 16s var(--ease) infinite}
.js .hero__glow-fill{animation:luz-fill 14s var(--ease) -3.5s infinite}
@keyframes luz-key{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.82}
  42%{transform:translate3d(-4.6%,3.2%,0) scale(1.15);opacity:1}
  74%{transform:translate3d(3.4%,-2.6%,0) scale(.92);opacity:.66}
}
@keyframes luz-fill{
  0%,100%{transform:translate3d(4.2%,3.6%,0) scale(.9);opacity:.38}
  50%{transform:translate3d(-5.4%,-4.4%,0) scale(1.14);opacity:1}
}

/* ---------- 10 · Secciones ----------------------------------------------- */

.sec{padding:var(--ritmo) 0;scroll-margin-top:80px}
.sec--crema{background:var(--crema)}
.sec__grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,5vw,80px);align-items:center;
}
.sec__body{grid-column:1;grid-row:1}
.sec__media{grid-column:2;grid-row:1}
.sec__grid--izq{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.sec__grid--izq .sec__body{grid-column:2}
.sec__grid--izq .sec__media{grid-column:1}
.sec__media .shot img{--h:min(58vh,540px)}

/* Historia */
#historia .sec__media .shot img{--h:min(60vh,560px)}
#historia .sec__media .shot{--sombra-w:46%;--sombra-h:30px}
#historia .sec__media .shot::before{left:38%}

/* La cerveza — la foto acompaña a toda la columna de texto */
#la-cerveza .sec__grid{align-items:start}
#la-cerveza .sec__media{align-self:stretch}
#la-cerveza .sec__media .shot{position:sticky;top:110px}
#la-cerveza .sec__media .shot img{--h:min(80vh,760px)}

/* cifras de exhibición */
.cifras{
  display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;
  margin:clamp(34px,4vw,48px) 0 0;border-top:1px solid var(--linea-tenue);border-bottom:1px solid var(--linea-tenue);
}
.cifra{padding:18px clamp(20px,3vw,40px) 16px;border-left:1px solid var(--linea-tenue)}
.cifra:first-child{padding-left:0;border-left:0}
.cifra dt{margin:0 0 6px}
.cifra dd{font:400 clamp(36px,4vw,54px)/1 var(--serif);letter-spacing:.02em;color:var(--marron)}
.cifra dd small{font-size:.42em;letter-spacing:.06em;color:var(--metal-texto)}

.ficha{margin-top:clamp(34px,4vw,50px);max-width:560px}
.ficha h3{margin:0 0 14px}
.tabla{width:100%;border-collapse:collapse;text-align:left}
.tabla th,.tabla td{padding:12px 0;border-bottom:1px solid var(--linea-tenue);vertical-align:baseline}
.tabla tr:first-child th,.tabla tr:first-child td{border-top:1px solid var(--linea-tenue)}
.tabla th{
  width:1%;white-space:nowrap;padding-right:clamp(24px,4vw,56px);
  font:500 12.5px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--metal-texto);
}
.tabla td{font:400 16.5px/1.5 var(--sans);color:var(--marron)}

/* La etiqueta — macro con anotaciones */
.eti{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,80px);align-items:center;
}
.eti__hint{font-size:16px!important;color:rgba(34,20,5,.72)}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.eti__hint{display:none}}
.no-js .eti__hint{display:none}
.no-js .mk::after{display:block}
.eti__fig{
  position:relative;margin:0;
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(44px,5vw,76px);align-items:stretch;
}
.eti__img{position:relative;align-self:start}
.eti__img img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 97%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 97%,transparent 100%);
}
.mk{
  position:absolute;left:var(--x);top:var(--y);z-index:3;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--crema-web);
  box-shadow:0 0 0 1px var(--dorado-profundo);
  transition:transform .4s var(--ease);
}
.mk.is-on{transform:scale(1.45)}
.mk::after{   /* numeral visible solo cuando no hay líneas (móvil) */
  content:attr(data-n);position:absolute;left:14px;top:50%;display:none;
  padding:1px 5px;transform:translateY(-50%);
  font:400 13px/1.2 var(--serif);color:var(--marron);background:rgba(251,247,238,.92);
}
.eti__lineas{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.eti__lineas path{fill:none;stroke:var(--dorado-profundo);stroke-width:1;opacity:.75;transition:opacity .4s var(--ease)}
.eti__lineas path.is-on{opacity:1;stroke-width:1.5}
.eti__notas li:hover b{color:var(--marron)}
.js .eti__fig .eti__lineas path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease),opacity .4s var(--ease)}
.js .eti__fig.in-view .eti__lineas path{stroke-dashoffset:0}
.eti__notas ol{display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:4% 0}
.eti__notas li{
  position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:6px;
  padding:6px 0;cursor:default;
}
.eti__notas li::before{
  content:attr(data-n);grid-row:1 / span 2;
  font:400 16px/1.3 var(--serif);color:var(--metal-texto);letter-spacing:.04em;
}
.eti__notas b{display:block;margin:0 0 3px;font-weight:500}
.eti__notas span{display:block;font-size:16px;line-height:1.5;color:var(--marron)}
/* lupa: flotante, la única otra sombra proyectada */
.lupa{
  position:absolute;left:0;top:0;z-index:4;width:188px;height:188px;margin:-94px 0 0 -94px;
  border-radius:50%;pointer-events:none;opacity:0;
  background-color:var(--crema);background-repeat:no-repeat;
  box-shadow:0 0 0 1px var(--dorado-profundo),0 0 0 4px var(--crema-web),0 0 0 5px var(--dorado-profundo),
    0 22px 44px -20px rgba(34,20,5,.5);
  transform:translate3d(var(--lx,0px),var(--ly,0px),0) scale(.82);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.lupa.on{opacity:1;transform:translate3d(var(--lx,0px),var(--ly,0px),0) scale(1)}

/* Recordar — cita */
.panel-doble{
  width:fit-content;max-width:100%;margin-inline:auto;
  padding:clamp(20px,3vw,34px) clamp(18px,2.2vw,28px) 0;
  background:var(--crema-web);
  border:1px solid var(--dorado-profundo);
  box-shadow:0 0 0 3px var(--crema-web),0 0 0 4px var(--dorado-profundo);
  border-radius:2px;overflow:hidden;
}
.panel-doble .shot{display:block}
/* ventana: la foto se desliza apenas dentro del marco al hacer scroll */
.shot--win picture{margin-bottom:-34px;transform:translate3d(0,var(--py,0px),0)}
.panel-doble .shot img{display:block;--h:min(64vh,600px);margin-inline:auto}
#recordar .shot::before{display:none}
.cita{
  font-family:var(--serif);font-size:clamp(25px,3.1vw,42px);line-height:1.22;
  letter-spacing:.005em;color:var(--marron);margin:0 0 18px;max-width:18ch;
}
.cita__fuente{margin:0 0 28px}

/* Encuéntranos */
.retail{margin:34px 0 0}
.retail__lbl{margin:0 0 14px}
.retail__row{display:flex;flex-wrap:wrap;gap:16px}
.retail__panel{
  flex:1 1 180px;max-width:250px;min-height:112px;
  display:flex;align-items:center;justify-content:center;padding:22px 26px;
  background:var(--crema);border:1px solid var(--linea);border-radius:3px;
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.retail__panel:hover{transform:translateY(-3px);border-color:var(--dorado-profundo)}
.sec--crema .retail__panel{background:var(--crema-web)}
.retail__panel img{display:block;width:auto;object-fit:contain}
.retail__panel--heb img{height:46px}
.retail__panel--7e img{height:76px}
.ciudades{margin-top:38px;max-width:420px}
.ciudades li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--linea-tenue);
  font:400 17px/1.4 var(--sans);
}
.ciudades li:first-child{border-top:1px solid var(--linea-tenue)}
.ciudades__edo{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--metal-texto)}

/* Tienda */
#tienda .sec__media .shot img{--h:min(38vh,340px)}
#tienda .sec__media .shot{--sombra-w:62%;--sombra-h:28px}

/* ---------- 11 · Cierre de marca ----------------------------------------- */

/* banda dorada sólida (única en la página); la copa rompe el borde superior */
.cierre{
  position:relative;background:var(--dorado);color:var(--marron);
  margin-top:clamp(56px,6vw,96px);
  padding:clamp(56px,7vw,96px) 0 22px;
}
.cierre__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(24px,5vw,80px);align-items:end;
}
.cierre__grande{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,4.4vw,64px);line-height:1.06;letter-spacing:.05em;
  color:var(--marron);margin:0;
}
.cierre__grande span{display:block}
.cierre__remate{
  font-family:var(--serif);font-size:clamp(17px,1.7vw,23px);letter-spacing:.06em;
  color:var(--marron);margin:22px 0 0;
}
.cierre__copa{
  --sombra-w:70%;--sombra-h:26px;
  margin-top:calc(-1 * clamp(120px,12vw,180px));margin-right:clamp(0px,3vw,48px);
}
.cierre__copa img{--h:clamp(360px,40vw,520px)}
.cierre__copa::before{
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(124,52,21,.25) 0%,rgba(124,52,21,.16) 40%,rgba(124,52,21,.06) 72%,rgba(124,52,21,0) 100%);
}
.cierre__legal{
  font:500 11.5px/1.6 var(--sans);letter-spacing:.14em;
  color:var(--marron);margin:clamp(40px,5vw,64px) 0 0;
}

/* ---------- 12 · Footer -------------------------------------------------- */

.pie{background:var(--crema);padding:clamp(52px,6vw,84px) 0 40px}
.pie__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,72px);align-items:start}
.pie__logo{display:block;height:124px;width:auto;margin:0 0 20px}
.pie__claim{font-family:var(--serif);font-size:19px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px}
.pie__tag{font-size:16.5px;margin:0 0 4px}
.pie__lema{margin:14px 0 0}
.pie__nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 26px;margin:-12px 0 0}
.pie__nav a{
  position:relative;display:inline-block;padding:12px 0;text-decoration:none;
  font:500 14.5px/1.4 var(--sans);letter-spacing:.03em;
}
.pie__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--dorado-profundo);
  transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease);
}
.pie__nav a:hover::after,.pie__nav a:focus-visible::after{transform:scaleX(1)}
.pie__redes{margin:6px 0 0}
.pie__redes a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;font:500 14.5px/1.4 var(--sans);letter-spacing:.03em;text-decoration:none;color:var(--marron)}
.pie__handle{color:var(--metal-texto);text-decoration:underline;text-decoration-color:var(--dorado-profundo);text-underline-offset:4px}
/* Ícono Instagram propio: silueta reconocible + doble anillo del marco de la etiqueta
   + destello de cuatro puntas del emblema (único toque dorado). */
.ig{flex:none;display:block;color:var(--metal-texto)}
.ig__destello{fill:var(--dorado-profundo);transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease)}
.pie__redes a:hover .ig__destello,.pie__redes a:focus-visible .ig__destello{transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){.ig__destello{transition:none}}
.pie__legal{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--linea)}
.pie__nom{font:500 11.5px/1.7 var(--sans);letter-spacing:.14em;margin:0 0 10px}
.pie__mini{font-size:14.5px;line-height:1.6;color:rgba(34,20,5,.72);margin:0 0 6px}
.pie__copy{font-size:14px;color:rgba(34,20,5,.66);margin:14px 0 0}

/* ---------- 13 · Verificación de edad ------------------------------------ */

.gate{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(251,247,238,.96);
}
.gate[hidden]{display:none}
.gate__panel{
  width:min(524px,100%);background:var(--crema);border:1px solid var(--linea);border-radius:3px;
  padding:clamp(28px,4vw,44px);text-align:center;
  box-shadow:0 26px 60px -24px rgba(34,20,5,.38);
}
.js .gate__panel{animation:panel .8s var(--ease) both}
@keyframes panel{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.gate__logo{display:block;height:46px;width:auto;margin:0 auto 22px}
.gate__rule{width:64px;margin:0 auto 24px}
.gate__q{font-family:var(--serif);font-size:clamp(24px,3vw,32px);text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px}
.gate__sub{font-size:16px;color:rgba(34,20,5,.78);margin:0 0 28px}
.gate__acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.gate__acts .btn{flex:1 1 auto;min-width:0;padding:0 18px;letter-spacing:.06em}
.gate__acts .btn--gh{flex:0 0 112px}
.gate__legal{
  font:500 11.5px/1.6 var(--sans);letter-spacing:.13em;
  color:rgba(34,20,5,.72);margin:30px 0 0;
}
.gate__out .gate__q{margin-bottom:10px}

/* ---------- 14 · Movimiento ---------------------------------------------- */

/* Nada lleva opacity:0 si no hay JS. */
.js [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
.js [data-reveal].in-view{opacity:1;transform:none}

/* la regla doble se dibuja de izquierda a derecha — solo transform */
.js .sec-head[data-reveal] .rule2::before,
.js .sec-head[data-reveal] .rule2::after{
  transform:scaleX(0);transition:transform 1.1s var(--ease) .12s;
}
.js .sec-head[data-reveal] .rule2::after{transition-delay:.24s}
.js .sec-head[data-reveal].in-view .rule2::before,
.js .sec-head[data-reveal].in-view .rule2::after{transform:scaleX(1)}

/* titulares: cada línea emerge detrás de una máscara (el colchón vertical
   cuida acentos y descendentes de Marcellus) */
.js .sec-head[data-reveal] .h2 > span{overflow:hidden;padding:.16em 0 .14em;margin:-.16em 0 -.14em}
.js .sec-head[data-reveal] .h2 > .t-apoyo{margin-bottom:calc(.2em - .14em)}
.js .sec-head[data-reveal] .h2 .ln{transform:translate3d(0,112%,0);transition:transform 1s var(--ease) .1s}
.js .sec-head[data-reveal] .h2 .t-clave .ln{transition-delay:.22s}
.js .sec-head[data-reveal].in-view .h2 .ln{transform:none}

/* cita: palabra por palabra (el JS envuelve las palabras; sin JS, texto normal) */
.js .cita .w{display:inline-block;opacity:0;transform:translate3d(0,.3em,0);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 60ms + .25s)}
.js .sec-head.in-view .cita .w{opacity:1;transform:none}

/* filas en cascada — opacidad, sin transform sobre <tr> */
.js .tabla tr[data-reveal]{transform:none;transition:opacity .55s var(--ease);transition-delay:var(--reveal-delay,0ms)}

/* entrada del hero escalonada */
.js .hero__text > *{opacity:0;transform:translateY(22px);animation:sube .8s var(--ease) forwards}
.js .hero__text > :nth-child(1){animation-delay:.06s}
.js .hero__text > :nth-child(2){animation-delay:.18s}
.js .hero__text > :nth-child(3){animation-delay:.30s}
.js .hero__text > :nth-child(4){animation-delay:.42s}
@keyframes sube{to{opacity:1;transform:none}}

.js .hero__shot img{opacity:0;transform:translateY(34px);animation:aterriza .9s var(--ease) .18s forwards}
@keyframes aterriza{to{opacity:1;transform:none}}
.js .hero__shot::before{transform:translate3d(-50%,42%,0) scaleX(.7);opacity:0;animation:asienta .9s var(--ease) .18s forwards}
@keyframes asienta{to{transform:translate3d(-50%,42%,0) scaleX(1);opacity:1}}

/* el óvalo se traza una vez, después de que la botella aterriza */
.js .ov{stroke-dasharray:1;stroke-dashoffset:1;animation:traza 2.4s var(--ease) .7s forwards}
.js .ov--b{animation-delay:.95s}
@keyframes traza{to{stroke-dashoffset:0}}

/* luz rasante: por el vidrio de la botella (17 s) y por el metal del titular (14 s) */
.js .sheen::before{animation:brillo 17s var(--ease) 2.6s infinite}
@keyframes brillo{
  0%{transform:translate3d(-120%,0,0) skewX(-4deg)}
  30%,100%{transform:translate3d(660%,0,0) skewX(-4deg)}
}
.js .glint{animation:glint 14s var(--ease) 1.8s infinite}
.js .glint__in{animation:glint-in 14s var(--ease) 1.8s infinite}
@keyframes glint{0%{transform:translate3d(-100%,0,0)}26%,100%{transform:translate3d(312.5%,0,0)}}
@keyframes glint-in{0%{transform:translate3d(32%,0,0)}26%,100%{transform:translate3d(-100%,0,0)}}

/* gobierno: fuera de pantalla o con la pestaña oculta, todo en pausa */
.is-paused .hero__glow > i,
.is-paused .sheen::before,
.is-paused .glint,.is-paused .glint__in{animation-play-state:paused}

/* la entrada del hero espera a que se resuelva la verificación de edad */
html.gate-open .hero__text > *,
html.gate-open .hero__shot img,
html.gate-open .hero__shot::before,
html.gate-open .ov,
html.gate-open .glint,html.gate-open .glint__in,
html.gate-open .sheen::before{animation-play-state:paused}

/* ---------- 15 · Responsive ---------------------------------------------- */

@media (max-width:1020px){
  .hero__grid{grid-template-columns:1fr;gap:clamp(28px,6vw,56px)}
  .hero__text{max-width:none}
  .hero__stage{min-height:0;--bh:min(52vh,460px)}
  .hero__field{inset:-10% -8% -6% -8%}
  .sec__grid,.sec__grid--izq{grid-template-columns:1fr;gap:clamp(30px,6vw,52px)}
  .sec__body,.sec__media,
  .sec__grid--izq .sec__body,.sec__grid--izq .sec__media{grid-column:1}
  .sec__body{grid-row:1}
  .sec__media{grid-row:2}
  .pie__top{grid-template-columns:1fr;gap:34px}
  .pie__nav{justify-content:flex-start}
  .cierre__in{grid-template-columns:minmax(0,1fr)}
  .cierre__copa{grid-row:1;justify-self:center;margin-right:0;margin-top:calc(-1 * clamp(110px,16vw,170px))}
}

@media (max-width:1180px) and (min-width:861px){
  .hdr__cta{display:none}
}

@media (max-width:860px){
  .hdr__in{min-height:70px}
  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);z-index:60;
    margin:0;background:var(--crema);border-left:1px solid var(--linea);
    padding:22px var(--gutter);
    transform:translateX(102%);visibility:hidden;
    transition:transform .38s var(--ease),visibility 0s .38s;
    box-shadow:-24px 0 60px -30px rgba(34,20,5,.4);
    overflow-y:auto;
  }
  .nav.open{transform:none;visibility:visible;transition:transform .38s var(--ease),visibility 0s}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;margin-top:44px}
  .nav a{display:block;padding:16px 0;font-size:16px;border-bottom:1px solid var(--linea-tenue)}
  .nav a::after{bottom:10px}
  .nav__close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:12px;right:12px;width:48px;height:48px;font-size:26px;line-height:1;
  }
  .burger{display:flex}
  .hdr__cta{display:none}
  .nav > .btn{display:inline-flex;margin-top:22px;width:100%}
  .scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(34,20,5,.3);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
  .scrim.on{opacity:1;pointer-events:auto}
  .no-js .burger,.no-js .nav__close,.no-js .nav > .btn{display:none}
  .no-js .hdr__in{flex-wrap:wrap}
  .no-js .nav{position:static;transform:none;visibility:visible;width:100%;padding:0 0 10px;
    background:none;border:0;box-shadow:none;overflow:visible}
  .no-js .nav ul{flex-direction:row;flex-wrap:wrap;margin:0;gap:0 18px}
  .no-js .nav a{border:0;padding:14.5px 0;font-size:15px}
  .retail__panel{flex:1 1 140px;min-height:96px;padding:18px}
  .retail__panel--heb img{height:40px}
  .retail__panel--7e img{height:66px}
}

@media (max-width:1100px){
  .eti{grid-template-columns:1fr}
  .eti__fig{max-width:760px}
}

/* etiqueta sin líneas: marcadores numerados + lista debajo */
@media (max-width:760px){
  .eti__fig{grid-template-columns:1fr;gap:28px}
  .eti__img{width:min(340px,100%);margin-inline:auto}
  .eti__lineas{display:none}
  .mk::after{display:block}
  .eti__notas ol{height:auto;padding:0;gap:4px;border-top:1px solid var(--linea-tenue)}
  .eti__notas li{padding:12px 0;border-bottom:1px solid var(--linea-tenue)}
  .cierre__copa img{--h:340px}
}

@media (max-width:600px){
  body{font-size:16px}
  .hero{padding:34px 0 52px}
  .hero__stage{--bh:min(46vh,400px)}
  /* escenario estático: una capa de luz, sin haz ni brillo */
  .js .hero__glow-key{animation:none}
  .js .hero__glow-fill{animation:none}
  .hero__glow > .hero__glow-fill{display:none}
  .hero__field{opacity:.9}
  .sheen{display:none}
  .js .glint,.js .glint__in{animation:none}
  .glint{display:none}
  .h1 .t-apoyo{margin-bottom:.22em}
  .gate__acts{flex-direction:column}
  .gate__acts .btn{width:100%;flex:none}
  .cierre__grande{letter-spacing:.04em}
  .cifra{padding-inline:14px}
  .cifra dd{font-size:32px}
  .body .sub__anio{font-size:52px}
}

@media (max-width:360px){
  .retail__row{flex-direction:column}
  .retail__panel{max-width:none}
  .cifras{grid-template-columns:1fr 1fr}
  .cierre__grande span{display:inline}
  .cifra:nth-child(3){grid-column:1 / -1;padding-left:0;border-left:0;border-top:1px solid var(--linea-tenue)}
}

/* ---------- 16 · Movimiento reducido ------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js [data-reveal],
  .js .hero__text > *,
  .js .hero__shot img,
  .js .sec-head[data-reveal] .h2 .ln,
  .js .cita .w{opacity:1!important;transform:none!important}
  .js .hero__shot::before{opacity:1!important;transform:translate3d(-50%,42%,0) scaleX(1)!important}
  .js .sec-head[data-reveal] .rule2::before,
  .js .sec-head[data-reveal] .rule2::after{transform:scaleX(1)!important}
  .js .ov,.js .eti__fig .eti__lineas path{stroke-dashoffset:0!important}
  .sheen{display:none}
  .glint{display:none}
  .lupa{display:none}
  .hdr__prog{display:none}
}

@media (forced-colors:active){
  .btn{border:1px solid ButtonText}
}

@media print{
  .js [data-reveal],.js .sec-head[data-reveal] .h2 .ln,.js .cita .w,.js .hero__text > *,.js .hero__shot img{opacity:1!important;transform:none!important;animation:none!important}
  .hdr,.gate,.scrim,.lupa,.sheen,.glint,.hdr__prog{display:none!important}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .sec-head[data-reveal] .rule2::before,.js .sec-head[data-reveal] .rule2::after{transform:scaleX(1)!important}
  .js .ov,.js .eti__fig .eti__lineas path{stroke-dashoffset:0!important}
  .t-metal,.h2 .t-clave .ln{background:none!important;color:#85641C!important}
}