/* Agave Style — rediseño de marca. Paleta tomada del logotipo oficial. */
@font-face{font-family:"Gloock";src:url(../assets/fonts/gloock-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --teal-950:#0b2630;
  --teal-900:#12384a;
  --teal-700:#245464;   /* azul-verde del logotipo */
  --teal-600:#346474;
  --teal-500:#548c94;
  --teal-100:#d3e4df;
  --gold:#fcc404;       /* corona del logotipo */
  --straw:#d9bd74;      /* paja de agave: fondo suave en lugar del dorado brillante */
  --amber:#f47c04;
  --bone:#f1f0e7;
  --ink:#0a1519;
  --gut:clamp(1.25rem,4.2vw,4.5rem);
  --nav-h:4.5rem;
  --display:"Gloock",Georgia,serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bone);color:var(--teal-950);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
::selection{background:var(--gold);color:var(--teal-950)}
.wrap{width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--gold);color:var(--teal-950);padding:.7rem 1rem;border-radius:.5rem;font-weight:600;transition:top .2s}
.skip:focus{top:1rem}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.7rem;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .35s var(--ease),background-color .25s,color .25s}
.btn:hover{transform:translateY(-3px)}
.btn--gold{background:var(--gold);color:var(--teal-950)}
.btn--teal{background:var(--teal-950);color:var(--bone)}
.card__link{display:inline-block;align-self:flex-start;color:var(--ac,currentColor);font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding-bottom:.25rem;transition:background-size .4s var(--ease)}
.card__link:hover{background-size:0 1px;background-position:right bottom}
.card__link--dark{color:var(--teal-700)}

/* ---------- Navegación ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gut);color:var(--bone);transition:transform .5s var(--ease),color .3s}
.nav[data-theme=light],.nav[data-theme=gold]{color:var(--teal-950)}
.nav.is-hidden{transform:translateY(-110%)}
.nav.is-menu{color:var(--bone)!important;transform:none!important}
.nav__logo{position:relative;display:block;width:5.4rem;height:3.4rem}
.nav__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.nav__logo-c{opacity:0}
.nav[data-theme=light]:not(.is-menu) .nav__logo-w,.nav[data-theme=gold]:not(.is-menu) .nav__logo-w{opacity:0}
.nav[data-theme=light]:not(.is-menu) .nav__logo-c,.nav[data-theme=gold]:not(.is-menu) .nav__logo-c{opacity:1}
.nav__right{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.nav__link{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-weight:600;font-size:.95rem}
.nav__link:hover{text-decoration:underline;text-underline-offset:.3em}
.nav__menu{display:inline-flex;align-items:center;gap:.8rem;padding:.65rem 1.05rem;border:1px solid currentColor;border-radius:999px;font-weight:600;font-size:.95rem;transition:background-color .25s,color .25s}
@media (hover:hover){.nav__menu:hover{background:currentColor}.nav__menu:hover .nav__menu-label{color:var(--teal-950)}.nav__menu:hover .nav__burger i{background:var(--teal-950)}}
.nav__burger{display:grid;gap:5px;width:1.1rem}
.nav__burger i{display:block;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.nav__menu[aria-expanded=true] .nav__burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__menu[aria-expanded=true] .nav__burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero-wrap{position:relative;height:200svh}
.hero{position:sticky;top:0;height:100svh;min-height:34rem;overflow:hidden;background:var(--teal-700);color:var(--bone);z-index:0}
.hero__glow{position:absolute;left:50%;top:44%;width:min(120vh,90vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(252,196,4,.34),rgba(84,140,148,.28) 45%,transparent 72%)}
.hero__inner{position:relative;height:100%}
.hero__cue{position:absolute;z-index:5;right:var(--gut);bottom:clamp(1.5rem,5vh,3.2rem);display:flex;align-items:center;gap:.8rem;text-decoration:none;font-weight:600;font-size:.95rem}
.hero__cue i{width:1px;height:3.2rem;background:currentColor;transform-origin:top;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero__head{position:absolute;z-index:2;left:0;right:0;top:calc(var(--nav-h) + 1vh);padding-inline:var(--gut)}
.hero__tag{margin-top:clamp(.6rem,2vh,1.4rem);font-family:var(--display);font-size:clamp(1.3rem,2.2vw,2.2rem);line-height:1.15;max-width:11ch}
.hero__title{font-size:clamp(5rem,17.2vw,25rem);line-height:.8;text-align:center;white-space:nowrap;color:var(--bone);margin-inline:calc(var(--gut)*-1)}
.hero__line{display:block}
.hero__word{display:inline-block;overflow:hidden;padding:.06em .02em .3em;margin:-.06em -.02em -.3em}
.hero__title .ch{display:inline-block}
.hero__stage{position:absolute;inset:0}
.hb{position:absolute;bottom:clamp(3.5rem,8vh,6rem);height:var(--h);aspect-ratio:var(--ar);left:var(--x);translate:-50% 0;pointer-events:none}
.hb__m,.hb img{height:100%;width:100%}
.hb img{object-fit:contain;filter:drop-shadow(0 28px 34px rgba(5,25,32,.45))}
.hb--sierpe{--h:min(62vh,56vw);--ar:658/1300;--x:50%;z-index:3}
.hb--b2{--h:min(54vh,46vw);--ar:568/1400;--x:34%;z-index:1;rotate:-4deg}
.hb--b4{--h:min(48vh,42vw);--ar:471/827;--x:66%;z-index:1;rotate:3deg}
.hb--b1{--h:min(42vh,36vw);--ar:567/1400;--x:19%;z-index:3;rotate:-7deg;bottom:clamp(4rem,9vh,7rem)}
.hb--b5{--h:min(44vh,38vw);--ar:508/1200;--x:81%;z-index:3;rotate:6deg;bottom:clamp(4rem,9vh,7rem)}
.js .hero [data-in],.js .hero .hb{visibility:hidden}

/* ---------- Intro ---------- */
.intro{position:relative;z-index:2;margin-top:-100svh;background:var(--bone);border-radius:clamp(1.6rem,3.4vw,3.2rem) clamp(1.6rem,3.4vw,3.2rem) 0 0;padding:clamp(7rem,18vh,12rem) 0 clamp(5rem,12vh,9rem);box-shadow:0 -30px 80px rgba(8,30,38,.35);color:var(--teal-900)}
.intro__title{font-size:clamp(2.5rem,6.2vw,6.6rem);line-height:1.02;max-width:15ch;color:var(--teal-700)}
.intro__body{margin-top:clamp(2rem,5vh,3.5rem);font-size:clamp(1.25rem,2.1vw,2rem);line-height:1.4;max-width:42ch;margin-left:auto;margin-right:0}
.w{display:inline-block}
.agave-word{margin:clamp(3rem,9vh,7rem) 0 clamp(3rem,8vh,6rem);overflow:hidden;text-align:center;line-height:1}
.agave-word span{display:inline-block;font-family:var(--display);font-size:clamp(7rem,31vw,40rem);line-height:.82;padding:.04em .04em .2em;letter-spacing:-.025em;background:url(../assets/img/p-campo.webp) 50% 50%/auto 170% no-repeat,var(--teal-700);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.intro__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,7rem)}
.intro__cols h3{font-size:clamp(1.7rem,2.6vw,2.6rem);color:var(--teal-700);margin-bottom:1rem;line-height:1.1}
.intro__cols p{max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.chips li{padding:.45rem 1rem;border:1px solid var(--teal-500);border-radius:999px;font-weight:500;font-size:.95rem;color:var(--teal-700)}

/* ---------- Territorios ---------- */
.terr{position:relative;z-index:2;background:#0b2630;color:var(--bone);overflow:hidden}
.terr__track{display:flex;height:100svh;min-height:36rem;width:max-content}
.tp{position:relative;flex:0 0 auto;height:100%;padding:calc(var(--nav-h) + 2rem) var(--gut) clamp(5.5rem,13vh,8rem);display:flex;flex-direction:column;justify-content:flex-end}
.tp--intro{width:min(54rem,74vw);justify-content:center;padding-bottom:clamp(4rem,10vh,7rem)}
.tp__h{font-size:clamp(3rem,7.4vw,8rem);line-height:.98;margin-bottom:2rem}
.tp--intro p{max-width:34rem;font-size:1.12rem;opacity:.88}
.tp__legend{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.tp__legend li{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem 1rem .4rem .5rem;border:1px solid rgba(241,240,231,.25);border-radius:999px;font-weight:600;font-size:.95rem}
.tp__dot{display:block;width:1.7rem;height:1.7rem;background:var(--gold);-webkit-mask:var(--shape) center/contain no-repeat;mask:var(--shape) center/contain no-repeat}
.tp__hint{margin-top:2.2rem;font-size:.95rem;opacity:.6}
.tp--state{width:min(100vw,120rem);min-width:min(100vw,60rem);overflow:hidden}
.tp__map{position:absolute;right:9%;top:calc(50% - 1rem);translate:0 -50%;width:min(76vh,50vw);aspect-ratio:1}
.tp__map::before{content:"";position:absolute;inset:0;background:var(--gold);-webkit-mask:var(--shape) center/contain no-repeat;mask:var(--shape) center/contain no-repeat;translate:1.3rem 1.3rem}
.tp__map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.95);-webkit-mask:var(--shape) center/contain no-repeat;mask:var(--shape) center/contain no-repeat}
.tp__name{position:relative;z-index:2;font-size:clamp(4.6rem,13.2vw,16rem);line-height:.9;letter-spacing:-.02em;padding-bottom:.06em}
.tp__fab{position:relative;z-index:2;display:grid;gap:.15rem;margin-top:.9rem;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.35;font-weight:600}
.tp__fab small{font-size:.85rem;font-weight:500;color:var(--gold)}
.terr__rail{position:absolute;z-index:6;left:var(--gut);right:var(--gut);bottom:clamp(1.5rem,4vh,2.6rem)}
.terr__line{display:block;height:1px;background:rgba(241,240,231,.22)}
.terr__line i{display:block;height:3px;margin-top:-1px;background:var(--gold);transform:scaleX(0);transform-origin:left}
.terr__rail ol{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.9rem;font-weight:600}
.terr__rail li{opacity:.45;transition:opacity .3s,color .3s}
.terr__rail li.is-active{opacity:1;color:var(--gold)}

/* ---------- Marcas ---------- */
.brands{position:relative;z-index:2;background:var(--ink);color:var(--bone)}
.brands__head{padding-top:clamp(6rem,16vh,11rem);padding-bottom:clamp(3rem,9vh,6rem);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.brands__title{font-size:clamp(2.6rem,6vw,6.4rem);line-height:1;max-width:11ch}
.brands__head p{max-width:40ch;opacity:.85;font-size:1.1rem}
.brandnav{position:fixed;right:1rem;top:50%;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .4s}
.brandnav.is-on{opacity:1;pointer-events:auto}
.brandnav a{position:relative;display:flex;align-items:center;gap:.7rem;padding:.35rem 0;text-decoration:none;font-size:.85rem;font-weight:500;color:var(--bone);opacity:.55;transition:opacity .25s}
.brandnav a span{position:absolute;right:1.4rem;padding:.3rem .7rem;border-radius:999px;background:var(--bone);color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.brandnav a:hover span,.brandnav a:focus-visible span{opacity:1}
.brandnav a::after{content:"";width:.5rem;height:.5rem;border-radius:50%;border:1px solid currentColor;transition:background-color .25s,transform .25s}
.brandnav a.is-active{opacity:1}
.brandnav a.is-active::after{background:var(--gold);border-color:var(--gold);transform:scale(1.3)}
.stack{position:relative}
.card{position:sticky;top:0;height:100svh;min-height:38rem;background:var(--bg);color:var(--bone);overflow:hidden;isolation:isolate;border-radius:clamp(1.4rem,3vw,2.8rem) clamp(1.4rem,3vw,2.8rem) 0 0;box-shadow:0 -24px 60px rgba(0,0,0,.35)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 62% at 72% 55%,var(--glow),transparent 72%);opacity:.6}
.card--flip::before{background:radial-gradient(55% 62% at 28% 55%,var(--glow),transparent 72%)}
.card__veil{position:absolute;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none}
.card__in{position:relative;height:100%;max-width:1560px;margin-inline:auto;padding:calc(var(--nav-h) + 1vh) var(--gut) clamp(1.5rem,5vh,3.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,5rem)}
.card--flip .card__copy{order:2}
.card__copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(.7rem,1.8vh,1.2rem);min-height:0}
.card__logo{display:inline-block;align-self:flex-start;height:clamp(2.4rem,4.6vh,3.6rem);background:var(--ac);-webkit-mask:var(--logo) left center/contain no-repeat;mask:var(--logo) left center/contain no-repeat}
.card__name{font-size:clamp(2.3rem,4.7vw,5rem);line-height:.98;margin-top:.2rem}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.card__kind{color:var(--ac);font-weight:600;font-size:1.02rem}
.card__txt{max-width:46ch;font-size:clamp(.95rem,1.15vw,1.06rem);line-height:1.55;opacity:.88}
.facts{display:grid;max-width:46ch}
.facts div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.6rem 0;border-top:1px solid rgba(241,240,231,.18);font-size:.95rem}
.facts div:last-child{border-bottom:1px solid rgba(241,240,231,.18)}
.facts dt{color:var(--ac);font-weight:600}
.styles{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.6rem;max-width:46ch}
.styles li{display:grid;padding:.55rem 0;border-top:1px solid rgba(241,240,231,.18);font-size:.9rem}
.styles b{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--ac)}
.styles span{opacity:.8}
.botanicals{max-width:46ch;font-family:var(--display);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.5;color:var(--ac)}
.notes{max-width:46ch;font-size:.92rem}
.notes summary{cursor:pointer;color:var(--ac);font-weight:600;list-style:none;display:inline-flex;gap:.5rem;align-items:center}
.notes summary::-webkit-details-marker{display:none}
.notes summary::before{content:"+";display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border:1px solid currentColor;border-radius:50%;line-height:1}
.notes[open] summary::before{content:"–"}
.notes p{margin-top:.6rem;opacity:.85;line-height:1.5}
.card__vis{position:relative;display:grid;place-items:center;min-height:0}
.card__ghost{position:absolute;inset:6% -8% 6% -8%;background:var(--ac);opacity:.07;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.card__arch{position:absolute;left:58%;bottom:0;translate:-50% 0;width:min(60%,29rem);height:88%;overflow:hidden;border-radius:999px 999px 1rem 1rem}
.card--flip .card__arch{left:42%}
.card__arch img{width:100%;height:100%;object-fit:cover}
.card__arch--soft{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18)}
.card__arch--soft img{opacity:.7;mix-blend-mode:luminosity}
.card__prod{position:relative;z-index:2;height:min(76vh,46rem);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 30px 36px rgba(0,0,0,.5))}
.card__prod--wide{height:auto;width:min(100%,44rem);max-height:70vh}
.card__prod--slim{height:min(64vh,38rem);width:auto}
.card__melon{position:absolute;left:-2%;bottom:2%;width:62%;max-height:50%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
.card__can{position:absolute;z-index:1;height:min(38vh,22rem);width:auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.45))}
.card__can--a{left:2%;bottom:7%;rotate:-9deg}
.card__can--b{right:1%;bottom:13%;rotate:8deg;z-index:3}

/* ---------- Mesa ---------- */
.mesa{position:relative;z-index:2;background:var(--teal-100);color:var(--teal-950);padding:clamp(6rem,15vh,11rem) 0 clamp(5rem,12vh,9rem)}
.mesa__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.mesa__sticky{position:sticky;top:calc(var(--nav-h) + 1rem)}
.mesa__title{font-size:clamp(2rem,3.5vw,3.6rem);line-height:1.05;color:var(--teal-700)}
.mesa__lede{margin:1.2rem 0 1.8rem;max-width:42ch}
.frame{position:relative;width:min(100%,25rem);aspect-ratio:4/5;max-height:46vh;overflow:hidden;border-radius:999px 999px 1.4rem 1.4rem;background:var(--teal-500)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.frame img.is-on{opacity:1}
.rcp{border-top:1px solid rgba(18,56,74,.28)}
.rcp:last-child{border-bottom:1px solid rgba(18,56,74,.28)}
.rcp button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:1.35rem 0;text-align:left;font-family:var(--display);font-size:clamp(1.6rem,2.7vw,2.7rem);line-height:1.1;color:var(--teal-900);transition:color .25s,padding .4s var(--ease)}
.rcp button:hover{color:var(--teal-600);padding-left:.6rem}
.rcp button i{position:relative;flex:0 0 1.7rem;height:1.7rem}
.rcp button i::before,.rcp button i::after{content:"";position:absolute;left:50%;top:50%;width:1.1rem;height:1.5px;background:currentColor;translate:-50% -50%;transition:transform .4s var(--ease)}
.rcp button i::after{transform:rotate(90deg)}
.rcp.is-open button i::after{transform:rotate(0)}
.rcp__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.rcp__body>div{overflow:hidden;min-height:0}
.rcp.is-open .rcp__body{grid-template-rows:1fr}
.rcp__body ul{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.5rem;font-size:.95rem;padding-bottom:1rem}
.rcp__body li{padding:.3rem 0;border-bottom:1px dotted rgba(18,56,74,.3)}
.rcp__body p{max-width:60ch;padding-bottom:1.8rem;font-size:.98rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);margin-top:clamp(5rem,12vh,9rem)}
.pair__title{grid-column:1/-1;font-size:clamp(2.2rem,4.6vw,4.6rem);color:var(--teal-700);line-height:1}
.pair__mezcal{font-weight:700;margin-bottom:1.2rem;color:var(--teal-900)}
.pair__foods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.6vw,1.4rem)}
.pair__foods figure{aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px .8rem .8rem;margin-bottom:.7rem;background:var(--teal-500)}
.pair__foods img{width:100%;height:100%;object-fit:cover}
.pair__foods span{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.pair__drinks{margin-top:1.2rem;font-size:.95rem}

/* ---------- Maquila ---------- */
.maq{position:relative;z-index:2;background:var(--straw);color:var(--teal-950);padding:clamp(6rem,15vh,11rem) 0}
.maq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,7vw,8rem);align-items:start}
.maq__sticky{position:sticky;top:calc(var(--nav-h) + 1.5rem);display:grid;gap:1.2rem;justify-items:start}
.maq__title{font-size:clamp(2.3rem,4.6vw,4.8rem);line-height:1.02}
.maq__sticky p{max-width:44ch}
.maq__sticky .btn{margin-top:.8rem}
.steps{position:relative;counter-reset:s;padding-left:0}
.steps__line{position:absolute;left:2.75rem;top:3rem;bottom:3rem;width:2px;background:rgba(11,38,48,.15);display:none}
.steps li{counter-increment:s;position:relative;display:grid;grid-template-columns:5.5rem 1fr auto;gap:clamp(1rem,2.4vw,2rem);align-items:center;padding:1.5rem 0;border-top:1px solid rgba(11,38,48,.28)}
.steps li:last-child{border-bottom:1px solid rgba(11,38,48,.28)}
.steps li::after{content:counter(s,decimal-leading-zero);font-family:var(--display);font-size:clamp(2rem,3.4vw,3.4rem);color:rgba(11,38,48,.6);align-self:start}
.steps img{width:5.5rem;height:5.5rem;border-radius:50%}
.steps h3{font-size:clamp(1.4rem,2vw,2rem);line-height:1.12}
.steps p{margin-top:.35rem;font-size:.98rem;max-width:40ch}

/* ---------- Pilares ---------- */
.pillars{position:relative;z-index:2;background:var(--teal-700);color:var(--bone);padding:clamp(4rem,10vh,8rem) 0 clamp(5rem,12vh,9rem);overflow:hidden}
.marq{overflow:hidden;margin-bottom:clamp(2.5rem,7vh,5rem)}
.marq__row{display:flex;gap:4vw;width:max-content;font-family:var(--display);font-size:clamp(6rem,17vw,22rem);line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(241,240,231,.5);padding-bottom:.08em}
.pillars__title{font-size:clamp(2.2rem,4.6vw,4.6rem);margin-bottom:clamp(2rem,6vh,4rem);line-height:1}
.pillars__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,6vw,6rem)}
.pillars__grid article{padding:1.8rem 0 2.4rem;border-top:1px solid rgba(241,240,231,.3)}
.pillars__grid h3{font-size:clamp(1.5rem,2.2vw,2.2rem);line-height:1.12;margin-bottom:.9rem;color:var(--gold)}
.pillars__grid p{max-width:48ch;opacity:.92}

/* ---------- Blog ---------- */
.blog{position:relative;z-index:2;background:var(--bone);color:var(--teal-950);padding:clamp(6rem,14vh,10rem) 0 clamp(5rem,12vh,8rem)}
.blog__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,7vw,8rem);align-items:start}
.blog__intro{position:sticky;top:calc(var(--nav-h) + 1.5rem);display:grid;gap:1.2rem;justify-items:start}
.blog__title{font-size:clamp(3.5rem,9vw,9rem);line-height:.9;color:var(--teal-700);padding-bottom:.12em}
.blog__intro p{max-width:34ch}
.posts a{display:block;padding:1.5rem 0 1.7rem;border-top:1px solid rgba(18,56,74,.25);text-decoration:none;transition:padding .45s var(--ease)}
.posts li:last-child a{border-bottom:1px solid rgba(18,56,74,.25)}
.posts a:hover{padding-left:1rem}
.posts a:hover h3{color:var(--teal-500)}
.posts time{font-size:.88rem;font-weight:600;color:var(--teal-600)}
.posts h3{font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1.12;margin:.35rem 0 .5rem;transition:color .25s;color:var(--teal-900)}
.posts p{max-width:58ch;font-size:.98rem;opacity:.85}
.events{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.5rem);margin-top:clamp(3.5rem,9vh,6rem)}
.ev{display:block;text-decoration:none}
.ev img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:1rem;transition:transform .8s var(--ease)}
.ev span{display:block;margin-top:.9rem;font-family:var(--display);font-size:clamp(1.3rem,1.9vw,1.9rem);line-height:1.15;color:var(--teal-900)}
.ev{overflow:hidden}
.ev:hover img{transform:scale(1.035)}

/* ---------- Contacto ---------- */
.contact{position:relative;z-index:2;background:var(--teal-900);color:var(--bone);padding:clamp(6rem,14vh,10rem) 0 clamp(5rem,10vh,8rem)}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2.5rem,7vw,8rem);align-items:start}
.contact__title{font-size:clamp(2.6rem,5.6vw,6rem);line-height:1;margin-bottom:1.4rem}
.contact__copy{display:grid;gap:1.4rem;justify-items:start}
.contact__copy>p{max-width:44ch}
.contact__ways{display:grid;gap:.3rem;width:100%;max-width:30rem}
.contact__ways li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid rgba(241,240,231,.25)}
.contact__ways li:last-child{border-bottom:1px solid rgba(241,240,231,.25)}
.contact__ways span{opacity:.7}
.contact__ways a{font-weight:600;text-decoration:none}
.contact__ways a:hover{color:var(--gold)}
.contact__copy .card__link{color:var(--gold)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem}
.field{display:grid;gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-size:.9rem;opacity:.75}
.field input,.field textarea{width:100%;font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid rgba(241,240,231,.45);padding:.6rem 0;border-radius:0;transition:border-color .25s}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--gold)}
.field input:focus-visible,.field textarea:focus-visible{outline:0}
.field [aria-invalid=true]{border-color:#ff9a8a}
.form .btn{grid-column:1/-1;justify-self:start;margin-top:.6rem}
.form__status{grid-column:1/-1;min-height:1.5rem;font-size:.95rem;color:var(--gold)}

/* ---------- Footer ---------- */
.foot{position:relative;z-index:2;background:var(--teal-950);color:var(--bone);padding:clamp(3.5rem,8vh,6rem) 0 1.5rem;overflow:hidden}
.foot__top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font-weight:500}
.foot__nav,.foot__social{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot__social{opacity:.7;font-size:.95rem}
.foot__mark{padding:clamp(3rem,9vh,6rem) var(--gut) 1rem}
.foot__mark img{width:min(34rem,70vw);height:auto;margin-inline:auto}
.foot__legal{text-align:center;font-size:.85rem;opacity:.55;padding:0 var(--gut)}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .brandnav{display:none}
  .card__in{grid-template-columns:1fr 1fr}
  .facts div{grid-template-columns:6rem 1fr}
}

/* ---------- Estático: móvil, tablet vertical y poca altura ---------- */
@media (max-width:899px){
  :root{--nav-h:4rem}
  .nav__shop{display:none}
  .hero__title{font-size:clamp(4.6rem,29vw,15rem);line-height:.78}
  .hero__word{display:block}
  .hero__tag{max-width:none;font-size:1.25rem;text-align:center;margin-top:clamp(1.4rem,3.4vh,2.2rem)}
  .hero__cue{display:none}
  .hb{bottom:clamp(3rem,7vh,5rem)}
  .hb--sierpe{--h:min(58svh,86vw);--x:50%}
  .hb--b2{--h:min(44svh,66vw);--x:18%}
  .hb--b4{--h:min(42svh,60vw);--x:82%}
  .hb--b1,.hb--b5{display:none}
  .intro__cols{grid-template-columns:1fr}
  .intro__body{margin-left:0}
  .brands__head{grid-template-columns:1fr}
  .card,.card.card{position:relative;height:auto;min-height:0;border-radius:1.6rem 1.6rem 0 0;margin-top:-1.4rem}
  .card__in{display:flex;flex-direction:column;padding-top:calc(var(--nav-h) + 1rem);padding-bottom:3rem;gap:2rem;height:auto}
  .card--flip .card__copy{order:0}
  .card__vis{order:-1;min-height:min(60svh,26rem)}
  .card__copy{gap:.9rem}
  .card__prod{height:min(52svh,24rem)}
  .card__prod--wide{width:min(100%,26rem);height:auto}
  .card__prod--slim{height:min(46svh,20rem)}
  .card__arch{width:min(56%,15rem);height:80%}
  .card__can{height:min(28svh,12rem)}
  .mesa__grid,.maq__grid,.blog__grid,.contact__grid,.pair{grid-template-columns:1fr}
  .mesa__sticky,.maq__sticky,.blog__intro{position:static}
  .frame{max-height:none;width:min(100%,20rem)}
  .pillars__grid{grid-template-columns:1fr}
  .events{grid-template-columns:1fr}
  .steps li{grid-template-columns:4rem 1fr}
  .steps li::after{display:none}
  .steps img{width:4rem;height:4rem}
  .form{grid-template-columns:1fr}
  .rcp__body ul{grid-template-columns:1fr}
}
@media (max-width:480px){
  .nav__menu-label{display:none}
  .pair__foods{gap:.5rem}
  .pair__foods span{font-size:.82rem}
}

/* Poca altura en escritorio: tarjetas fluyen (evita contenido cortado) */
@media (min-width:900px) and (max-height:620px){
  .card{position:relative;height:auto}
  .card__in{height:auto;padding-bottom:4rem}
  .card__vis{min-height:30rem}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-wrap{height:auto}
  .hero{position:relative}
  .intro{margin-top:0}
  .hero__cue i{animation:none}
  .card{position:relative;height:auto;min-height:100svh}
  .card__in{height:auto}
  .marq__row{white-space:normal;flex-wrap:wrap;width:auto}
  .brandnav{display:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:900px){
}

/* ---------- Capítulos: cada sección sube sobre la anterior ---------- */
.mesa,.maq,.pillars,.blog,.contact{--r:clamp(1.6rem,3.4vw,3.2rem);border-radius:var(--r) var(--r) 0 0;margin-top:calc(var(--r)*-1)}
.nav:focus-within{transform:none}
@media (max-width:899px){.card--naipe .card__arch{display:none}}
@media (min-width:600px) and (max-width:899px){
  .hb--sierpe{--h:min(44svh,62vw)}
  .hb--b2{--h:min(34svh,48vw)}
  .hb--b4{--h:min(32svh,46vw)}
}

.card--naipe .card__arch{display:none}

/* ---------- Naipe: tarjeta resumen ---------- */
.shelf{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:1rem}
.shelf img{flex:0 0 auto;height:min(46vh,32rem);width:auto;max-width:none;margin-inline:-1.3rem;filter:drop-shadow(0 26px 28px rgba(0,0,0,.5))}
.card__links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
.card__link--sub{opacity:.7}
.card--naipe .styles{grid-template-columns:1fr 1fr 1fr}
.card--naipe .styles li:nth-child(n+4){grid-column:span 1}
@media (max-width:899px){.shelf img{height:min(30svh,15rem);margin-inline:-.7rem}.card--naipe .styles{grid-template-columns:1fr 1fr}}

/* ---------- Naipe: las cinco cervezas ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.beer{position:relative;z-index:2;background:var(--ink);color:var(--bone)}
.beer__head{padding-top:clamp(4rem,10vh,7rem);padding-bottom:2rem}
.beer__head h2{font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1.05}
.beer__prog{display:none}
.bp{position:relative;background:var(--bg);color:var(--bone);overflow:hidden;display:grid;gap:1.2rem;padding:clamp(3rem,8vh,5rem) var(--gut)}
.bp__glyph{position:absolute;right:-12%;top:4%;width:min(90vw,26rem);aspect-ratio:1;fill:var(--ac);opacity:.12;pointer-events:none}
.bp__name{position:relative;z-index:1;font-size:clamp(4.2rem,20vw,9rem);line-height:.9;letter-spacing:-.02em;order:1}
.bp__bottle{position:relative;z-index:2;justify-self:center;height:min(52svh,26rem);width:auto;max-width:none;order:0;filter:drop-shadow(0 30px 34px rgba(0,0,0,.5))}
.bp__copy{position:relative;z-index:3;order:2;display:grid;gap:.9rem;max-width:34rem}
.bp__style{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.9rem);color:var(--ac);line-height:1.1}
.bp__desc{font-size:1rem;line-height:1.55;opacity:.9}
.bp .facts{max-width:none}
.bp .facts div{grid-template-columns:6.5rem 1fr}
/* escena fijada (escritorio con movimiento) */
.beer.is-scene .beer__head{position:absolute;z-index:10;left:0;right:0;top:calc(var(--nav-h) + .4rem);padding:0 var(--gut);max-width:none;margin:0}
.beer.is-scene .beer__head h2{font-size:1.15rem;font-family:var(--body);font-weight:600;opacity:.75;letter-spacing:0}
.beer.is-scene .beer__scene{position:relative;height:100svh;min-height:36rem;overflow:hidden}
.beer.is-scene .bp{position:absolute;inset:0;display:block;padding:0}
.beer.is-scene .bp__glyph{right:auto;left:70%;top:50%;translate:-50% -50%;width:min(86vh,50vw);opacity:.1}
.beer.is-scene .bp__name{position:absolute;left:var(--gut);top:calc(var(--nav-h) + 11vh);font-size:clamp(5rem,12.6vw,15rem)}
.beer.is-scene .bp__bottle{position:absolute;left:70%;bottom:6.5vh;translate:-50% 0;height:min(77vh,54rem)}
.beer.is-scene .bp__copy{position:absolute;left:var(--gut);bottom:clamp(3rem,9vh,6rem);width:min(32rem,38vw)}
.beer.is-scene .bp::before{content:"";position:absolute;left:70%;top:55%;width:min(100vh,56vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 30%,transparent),transparent 70%)}
.beer.is-scene .beer__prog{display:flex;position:absolute;z-index:10;left:50%;bottom:1.4rem;translate:-50% 0;gap:1.4rem;font-size:.85rem;font-weight:600}
.beer.is-scene .beer__prog li{opacity:.45;transition:opacity .3s}
.beer.is-scene .beer__prog li.is-active{opacity:1}
@media (min-width:900px) and (max-width:1100px){.beer.is-scene .bp__copy{width:min(28rem,44vw)}}
@media (prefers-reduced-motion:reduce){.beer__prog{display:none!important}}

/* ---------- Hero: capas extra ---------- */
.hero__horizon{position:absolute;left:0;right:0;bottom:0;height:46%;opacity:.4;-webkit-mask-image:linear-gradient(to top,#000 25%,transparent);mask-image:linear-gradient(to top,#000 25%,transparent);mix-blend-mode:luminosity;pointer-events:none}
.hero__horizon img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero__ring{position:absolute;left:50%;top:64%;width:min(58vh,46vw);aspect-ratio:1;translate:-50% -50%;fill:var(--bone);opacity:.55;pointer-events:none;animation:ring 110s linear infinite}
.hero__ring text{font-family:var(--display);font-size:17px;letter-spacing:.02em}
@keyframes ring{to{rotate:360deg}}
.hero__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.hero__chips a{padding:.45rem .95rem;border:1px solid rgba(241,240,231,.55);border-radius:999px;font-size:.9rem;font-weight:600;text-decoration:none;transition:background-color .25s,color .25s,border-color .25s}
.hero__chips a:hover{background:var(--gold);border-color:var(--gold);color:var(--teal-950)}
.hb{pointer-events:none}
.hb__a{position:relative;display:block;height:100%;pointer-events:auto;cursor:pointer}
.hb__a img{transition:scale .6s var(--ease)}
.hb__a:hover img,.hb__a:focus-visible img{scale:1.045}
.hb__tag{position:absolute;left:50%;top:-1rem;translate:-50% 0;z-index:5;display:grid;gap:.1rem;padding:.55rem .9rem;border-radius:.8rem;background:var(--bone);color:var(--teal-950);font-size:.8rem;line-height:1.25;white-space:nowrap;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.hb__tag b{font-family:var(--display);font-weight:400;font-size:1rem}
.hb__a:hover .hb__tag,.hb__a:focus-visible .hb__tag{opacity:1;transform:none}
@media (max-width:899px){
  .hero__ring{width:min(96vw,60svh);top:67%}
  .hero__chips{justify-content:center}
  .hero__horizon{height:34%}
  .hb__tag{display:none}
}
@media (prefers-reduced-motion:reduce){.hero__ring{animation:none}}

/* ---------- Menú y capítulos: ajustes móviles ---------- */
@media (max-width:899px){
  /* cervezas */
  .bp{padding:3rem var(--gut) 2.6rem;gap:1rem}
  .bp__bottle{height:min(40svh,21rem)}
  .bp__name{font-size:clamp(3.8rem,19vw,7rem)}
  .foot__nav a,.foot__social a{display:inline-block;padding:.5rem 0}
}
@media (min-width:900px) and (max-height:800px){.hero__chips{display:none}}
@media (max-width:899px) and (max-height:720px){
  .hero__chips{display:none}
  .hb{bottom:2.2rem}
  .hb--sierpe{--h:min(42svh,78vw)}
  .hb--b2{--h:min(33svh,58vw)}
  .hb--b4{--h:min(31svh,54vw)}
  .hero__ring{top:72%;width:min(94vw,52svh)}
}
/* Teléfono en horizontal */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:0}
  .hero__word{display:inline-block}
  .hero__title{font-size:min(15vw,36svh);line-height:.8}
  .hero__tag,.hero__chips,.hero__cue,.hero__ring{display:none}
  .hb{bottom:.8rem}
  .hb--sierpe{--h:min(50svh,40vw)}
  .hb--b2{--h:min(40svh,30vw)}
  .hb--b4{--h:min(38svh,28vw)}
  .hb--b1,.hb--b5{display:block;--h:min(30svh,24vw)}
  .hb--b1{--x:15%}
  .hb--b5{--x:85%}
  .bp{grid-template-columns:1fr 1fr;align-items:center}
  .bp__bottle{grid-row:1/4;grid-column:2;height:min(70svh,18rem)}
  .bp__name,.bp__copy{grid-column:1}
}

/* ---------- Territorios: versión apilada (móvil y movimiento reducido) ---------- */
@media (max-width:899px){
  .terr__rail{display:none}
  .tp--state{background:var(--bg);display:grid;grid-template-columns:1fr;align-content:end;gap:.3rem;padding:3.5rem var(--gut) 3rem;min-height:0}
  .tp__map{position:relative;right:auto;top:auto;translate:none;width:min(78vw,22rem);justify-self:center;margin-bottom:.8rem}
  .tp__map::before{translate:.9rem .9rem}
  .tp__name{font-size:clamp(3.6rem,18vw,8rem)}
  .tp--intro{padding-top:calc(var(--nav-h) + 3rem);padding-bottom:3rem}
  .tp__hint{display:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:900px){
  .terr__rail{display:none}
  .tp--state{background:var(--bg);min-height:100svh}
}
@media (max-width:899px){
  .terr__track{flex-direction:column;height:auto;width:100%}
  .tp{height:auto;min-height:0;padding:3.5rem var(--gut) 3rem}
  .tp--intro{width:100%}
  .tp--state{width:100%;min-width:0;min-height:88svh;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .terr__track{flex-direction:column;height:auto;width:100%}
  .tp{height:auto;min-height:80svh}
  .tp--intro,.tp--state{width:100%;min-width:0}
}

/* ---------- Menú: círculo que crece desde el botón, enlaces gigantes ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav__menu{border:0;border-radius:0;padding:.9rem .4rem;gap:0}
.nav__burger{width:1.9rem;gap:7px}
.nav__burger i{height:2px}
.nav__menu[aria-expanded=true] .nav__burger i:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__menu[aria-expanded=true] .nav__burger i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media (hover:hover){.nav__menu:hover{background:none}.nav__menu:hover .nav__burger i{background:currentColor}.nav__menu:hover .nav__burger i:last-child{transform:scaleX(.6);transform-origin:right}}
.menu{position:fixed;inset:0;z-index:55;background:var(--teal-700);color:var(--bone);clip-path:circle(0px at calc(100% - 3rem) 2.25rem);overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
.menu[hidden]{display:block}
.menu.is-open{visibility:visible}
.menu__inner{min-height:100%;display:grid;grid-template-rows:1fr auto;padding:calc(var(--nav-h) + 1vh) var(--gut) clamp(1.2rem,3.5vh,2.2rem)}
.menu__list{align-self:center;text-align:center;padding-block:1rem}
.menu__list li{overflow:hidden}
.menu__list a{position:relative;display:inline-block;text-decoration:none;transition:opacity .35s,color .25s}
.menu__t{display:block;font-family:var(--display);font-size:clamp(2.6rem,min(8.2vw,7.4vh),8rem);line-height:1.04;padding-bottom:.08em;letter-spacing:-.01em}
.menu__list small{position:absolute;left:calc(100% + 1.2rem);top:50%;translate:0 -50%;white-space:nowrap;font-size:.95rem;font-weight:500;color:var(--gold);opacity:0;transform:translateX(-.6rem);transition:opacity .3s,transform .4s var(--ease)}
@media (hover:hover){.menu__list:hover a{opacity:.35}.menu__list a:hover{opacity:1;color:var(--gold)}.menu__list a:hover small{opacity:1;transform:none}}
.menu__list a:focus-visible{color:var(--gold)}
.menu__bar{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem 2rem;align-items:center;padding-top:1.2rem;border-top:1px solid rgba(241,240,231,.28);font-size:.98rem}
.menu__bar a{text-decoration:none}
.menu__bar p a:hover{color:var(--gold)}
.menu__contact{display:grid;gap:.15rem}
.menu__brands{display:flex;gap:1.6rem;font-family:var(--display);font-size:1.4rem}
.menu__social{display:flex;gap:.3rem}
.menu__social a,.rail__social a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;transition:background-color .25s,color .25s}
.menu__social a:hover{background:var(--gold);color:var(--teal-950)}
.menu__end{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.menu__bar .btn{padding:.8rem 1.4rem;white-space:nowrap}

/* ---------- Barra lateral con enlaces rotados (escritorio) ---------- */
.rail{position:fixed;z-index:50;left:1rem;top:var(--nav-h);bottom:0;width:2.6rem;display:none;flex-direction:column;justify-content:space-between;align-items:center;padding-block:1rem 1.4rem;color:var(--bone);transition:color .3s}
.rail[data-theme=light],.rail[data-theme=gold]{color:var(--teal-950)}
.rail__list{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.3rem,3.6vh,2.4rem)}
.rail__list a{display:block;position:relative;writing-mode:vertical-rl;rotate:180deg;text-decoration:none;font-weight:700;font-size:.9rem;letter-spacing:.03em;opacity:.6;transition:opacity .25s,color .25s}
.rail__list a::before{content:"";position:absolute;left:50%;bottom:100%;translate:-50% 0;width:2px;height:0;margin-bottom:.6rem;background:var(--gold);transition:height .4s var(--ease)}
.rail__list a:hover,.rail__list a.is-active{opacity:1}
.rail__list a.is-active::before{height:1.3rem}
.rail__social{display:grid;gap:.2rem}
.rail__social a:hover{background:var(--gold);color:var(--teal-950)}
@media (min-width:1200px) and (min-height:600px){.rail{display:flex}}

/* ---------- Menú en móvil ---------- */
@media (max-width:899px){
  .menu{height:100dvh}
  .menu__inner{padding:calc(var(--nav-h) + .5rem) var(--gut) calc(1.2rem + env(safe-area-inset-bottom))}
  .menu__t{font-size:clamp(2.4rem,min(12vw,7.6svh),4.4rem)}
  .menu__list small{display:none}
  .menu__bar{grid-template-columns:1fr 1fr;gap:.9rem 1rem;font-size:.92rem}
  .menu__contact{grid-column:1/-1}
  .menu__brands{font-size:1.25rem;gap:1.2rem}
  .menu__end{grid-column:1/-1;flex-direction:row-reverse;justify-content:space-between}
  .menu__bar .btn{flex:1;margin-right:1rem}
}
@media (prefers-reduced-motion:reduce){.menu{clip-path:none}}
.menu__brands a{white-space:nowrap}
@media (max-width:899px){
  .menu__t{font-size:clamp(2.2rem,min(11vw,6.8svh),4rem)}
  .menu__list{padding-block:.4rem}
  .menu__brands{grid-column:1/-1;justify-content:flex-start}
}

/* X de cierre: origen centrado y giro limpio al pasar el cursor */
.nav__burger{transition:transform .5s var(--ease)}
.nav__burger i{transform-origin:center}
.nav__menu[aria-expanded=true] .nav__burger i:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__menu[aria-expanded=true] .nav__burger i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media (hover:hover){
  .nav__menu[aria-expanded=true]:hover .nav__burger{transform:rotate(90deg)}
  .nav__menu[aria-expanded=false]:hover .nav__burger i:last-child{transform:scaleX(.6);transform-origin:right}
}
.nav__menu[aria-expanded=true] .nav__burger i{transform-origin:center!important}

/* ---------- Cervezas (móvil/tableta vertical): símbolo centrado detrás de la botella ---------- */
.beer:not(.is-scene) .bp{--bh:min(52svh,26rem)}
.beer:not(.is-scene) .bp__bottle{height:var(--bh)}
.beer:not(.is-scene) .bp::before{content:"";position:absolute;left:50%;top:calc(clamp(3rem,8vh,5rem) + var(--bh)/2);width:min(120vw,34rem);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 30%,transparent),transparent 70%);pointer-events:none}
.beer:not(.is-scene) .bp__glyph{right:auto;left:50%;top:calc(clamp(3rem,8vh,5rem) + var(--bh)/2);translate:-50% -50%;width:min(86vw,24rem);opacity:.17}
@media (max-width:899px){
  .beer:not(.is-scene) .bp{--bh:min(40svh,21rem)}
  .beer:not(.is-scene) .bp::before{top:calc(3rem + var(--bh)/2)}
  .beer:not(.is-scene) .bp__glyph{top:calc(3rem + var(--bh)/2);width:min(94vw,22rem)}
}

/* ---------- Home en celular vertical: abanico de las cinco botellas ---------- */
@media (max-width:899px) and (orientation:portrait){
  .hb--b1,.hb--b5{display:block;z-index:0}
  .hb--b1{--h:min(32svh,50vw);--x:3%;rotate:-9deg;bottom:clamp(3.4rem,8vh,5.5rem)}
  .hb--b5{--h:min(32svh,50vw);--x:97%;rotate:9deg;bottom:clamp(3.4rem,8vh,5.5rem)}
  .hb--b2{--x:23%}
  .hb--b4{--x:77%}
  .hero__glow{top:62%;width:min(150vw,90svh)}
  .hero__ring{top:66%;width:min(104vw,62svh);opacity:.6}
  .hero__cue{display:flex;left:50%;right:auto;translate:-50% 0;bottom:.6rem;flex-direction:column;gap:.3rem;font-size:.8rem;opacity:.85}
  .hero__cue i{height:1.6rem}
}
@media (max-width:899px) and (orientation:portrait) and (max-height:720px){
  .hb--b1,.hb--b5{--h:min(26svh,44vw)}
  .hero__cue{display:none}
}
@media (max-width:899px) and (orientation:portrait){
  .hero__ring{top:68%;width:min(92vw,54svh)}
  .hero__chips{position:relative;z-index:6}
}
@media (max-width:899px) and (orientation:portrait) and (max-height:720px){.hero__ring{top:73%;width:min(88vw,50svh)}}