@font-face{font-family:'Barbaro';src:url('../fonts/barbaro.woff2') format('woff2');font-display:swap}
@font-face{font-family:'BigNoodle';src:url('../fonts/BigNoodleTitling.woff2') format('woff2');font-display:swap}
@font-face{font-family:'ATCond';src:url('../fonts/ATCondensedBold.woff2') format('woff2');font-display:swap}

html,body{margin:0;padding:0;background:#000;color:#fff;-webkit-font-smoothing:antialiased}
a{color:#fff;text-decoration:none}
a:hover{color:#fff}
img{display:block}
button{all:unset;cursor:pointer;box-sizing:border-box}
::placeholder{color:#5a5a5a;opacity:1}
:focus-visible{outline:3px solid #fff;outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@keyframes pcChivoIn{from{opacity:0;transform:translateX(-260px)}to{opacity:1;transform:translateX(0)}}
@keyframes pcTextoIn{from{opacity:0;transform:translateX(260px)}to{opacity:1;transform:translateX(0)}}
@keyframes pcFadeIn{from{opacity:0}to{opacity:1}}

/* Escalado del diseño de 1920 px: --z lo calcula el script de la cabecera */
.zoom{zoom:var(--z,1)}
#root{width:1920px;margin:0 auto;background:#000;position:relative}

/* ---------- Visibilidad por página (data-page en <html>) ---------- */
#gate,#rechazo,#site,.page{display:none}
html[data-page=gate] #gate,
html[data-page=rechazo] #rechazo{display:block}
html:not([data-page=gate]):not([data-page=rechazo]) #site{display:block}
html[data-page=inicio] #p-inicio,
html[data-page=leyenda] #p-leyenda,
html[data-page=proceso] #p-proceso,
html[data-page=mezcales] #p-mezcales,
html[data-page=tienda] #p-tienda,
html[data-page=contacto] #p-contacto{display:block}

/* ---------- Utilidades ---------- */
.abs{position:absolute}
.rel{position:relative}
.full{position:absolute;left:0;top:0}
.hr5{width:1920px;height:5px;background:#fff}
.hr2{width:1920px;height:2px;background:#fff}
.frame{position:absolute;left:25px;top:25px;right:25px;bottom:25px;border:4px solid #fff;pointer-events:none}
.frame.t10{top:10px}.frame.t11{top:11px}.frame.t14{top:14px}.frame.t18{top:18px}
.frame-sm{position:absolute;left:12px;top:12px;right:12px;bottom:12px;border:3px solid #fff;pointer-events:none}
.hov{transition:transform 220ms ease,opacity 220ms ease}
.hov:hover{transform:scale(1.05);opacity:.85}
.arrow{position:absolute;width:50px;height:50px}
.arrow img{width:50px;height:50px}

/* ---------- Filtro de edad ---------- */
.gate{position:relative;width:1920px;height:1080px;overflow:hidden;background:#000}
.gate .bg{position:absolute;left:0;top:0;width:1920px;height:1080px}
.gate .chivo{transition:opacity 1500ms ease}
.gate .dialog{position:absolute;left:548px;top:345px;width:823px;height:539px;transition:opacity 700ms ease}
.gate.leaving .chivo,.gate.leaving .dialog{opacity:0}
.gate .dialog>img{position:absolute;left:0;top:0;width:823px;height:539px}
.gate h1{position:absolute;left:37px;top:30px;width:746px;height:122px;margin:0;display:flex;align-items:center;justify-content:center;font:normal 86px/1 'Barbaro';color:#fff;white-space:nowrap;letter-spacing:1px}
.gate h1 .inv{display:inline-block;transform:rotate(180deg);margin-right:14px}
.gate h1 .q{margin-left:6px}
.age-btn{position:absolute;top:154px;height:204px;display:flex;align-items:center;justify-content:center}
.age-btn.yes{left:37px;width:346px}
.age-btn.no{left:385px;width:398px}
.age-btn img{width:337px;height:204px}
.age-btn.no img{width:332px}
.age-btn .h{position:absolute;top:0;opacity:0}
.age-btn.yes .h{left:4px}
.age-btn.no .h{left:33px}
.age-btn:hover .h,.age-btn:focus-visible .h{opacity:1}
.age-btn:hover .s,.age-btn:focus-visible .s{opacity:0}
.remember{position:absolute;left:37px;top:359px;width:746px;height:69px;display:flex;align-items:center;justify-content:center;gap:16px}
.remember .box{width:32px;height:29px;border:3px solid #fff;box-sizing:border-box;background:transparent}
.remember[aria-pressed=true] .box{background:#fff}
.remember .lbl{font:normal 42px/1 'Barbaro';color:#fff;letter-spacing:1px}
.evita{position:absolute;left:37px;top:430px;width:746px;height:69px;display:flex;align-items:center;justify-content:center;font:normal 56px/1 'Barbaro';color:#fff;letter-spacing:1px}
.rechazo{width:1920px;height:1080px;background:#000;animation:pcFadeIn 900ms ease both}
.rechazo img{width:1920px;height:1080px}

/* ---------- Menú ---------- */
.nav{width:1920px;height:105px;background:#000;display:flex;align-items:center;justify-content:center;gap:44px;font:normal 55px/1 'Barbaro';color:#fff;letter-spacing:1px}
.nav .sep{opacity:.9}
.nav a{display:block}
.nav .social img{width:50px;height:50px}

/* ---------- Inicio ---------- */
.hero{position:relative;width:1920px;height:1210px;overflow:hidden}
.hero .bg{position:absolute;left:0;top:0;width:1920px;height:1210px}
.hero .chivo{position:absolute;left:0;top:0;width:1077px;height:1210px;animation:pcChivoIn 1500ms cubic-bezier(.22,.61,.36,1) both}
.hero .texto{position:absolute;left:967px;top:514px;width:953px;height:634px;animation:pcTextoIn 1500ms cubic-bezier(.22,.61,.36,1) 350ms both}
.intro{width:1920px;padding:43px 95px 46px;box-sizing:border-box;font:normal 50px/60px 'BigNoodle';color:#fff}
.intro p{margin:0;text-align:left;text-wrap:pretty}
.intro p+p{margin-top:50px;text-align:right}
.band{width:1920px;padding:50px 95px;box-sizing:border-box;font:normal 50px/60px 'BigNoodle';color:#fff;text-align:right}
.tile{position:relative;display:block;width:1920px;height:1210px;overflow:hidden}
.tile>img{width:1920px;height:1210px}
.tile .cap{position:absolute;left:0;right:0;bottom:50px;height:210px;background:rgba(0,0,0,.75);padding:20px 95px 0;box-sizing:border-box}
.tile .cap.tall{height:262px;padding-top:19px}
.cap.r{text-align:right}.cap.l{text-align:left}
a.cap{display:block}
.cap .t{font:normal 120px/118px 'Barbaro';color:#fff}
.cap .s{font:normal 52px/62px 'ATCond';color:#fff}
.cap.tall .s{margin-top:2px}

/* ---------- Encabezados de sección ---------- */
.head{position:relative;width:1920px;height:800px;overflow:hidden}
.head>img{width:1920px;height:800px}

/* ---------- Leyenda ---------- */
.big-noodle{margin:0;width:1920px;padding:100px 95px;box-sizing:border-box;font:normal 115px/120px 'BigNoodle';color:#fff;text-align:center}
.story{width:1920px;padding:100px 95px;box-sizing:border-box;font:normal 50px/60px 'ATCond';color:#fff;text-align:left;text-wrap:pretty;margin:0}
.wide800{width:1920px;height:800px}

/* ---------- Proceso ---------- */
.proceso{width:1920px;background:#000 url('../assets/proceso/fondo.webp') repeat-y center top}
.lema{margin:0;width:1920px;padding:74px 95px;box-sizing:border-box;font:normal 97px/103px 'ATCond';color:#fff;text-align:center;text-shadow:0 6px 10px rgba(0,0,0,.85);text-wrap:pretty}
.step{display:flex;width:1920px;height:800px}
.gap65{height:65px}.gap60{height:60px}.gap56{height:56px}
.step .pic{position:relative;width:1130px;height:800px;overflow:hidden}
.step .pic>img{position:absolute;left:0;top:0;width:1130px;height:800px}
.step .pic .arrow{top:375px}
.step .pic .arrow.prev{left:22px}.step .pic .arrow.next{right:22px}
.step .txt{width:790px;height:800px;background:rgba(0,0,0,.70);box-sizing:border-box;padding:56px 50px;color:#fff}
.step .txt.l{text-align:left}.step .txt.r{text-align:right}
.step h2{margin:0;font:normal 100px/100px 'Barbaro'}
.step p{margin:34px 0 0;font:normal 40px/48px 'ATCond'}
.step h2+p{margin-top:22px}
.home-proc .arrow{top:470px}
.home-proc .arrow.prev{left:50px}.home-proc .arrow.next{right:50px}

/* ---------- Mezcales ---------- */
.mezcal{width:1920px;height:930px}

/* ---------- Tienda ---------- */
.grid{width:1920px;background:url('../assets/proceso/fondo.webp') repeat center top;padding:92px 110px;box-sizing:border-box;display:grid;grid-template-columns:800px 800px;column-gap:100px;row-gap:77px}
.prod{position:relative;width:800px;height:800px;margin:0}
.prod>img{position:absolute;left:0;top:0;width:800px;height:800px}
.prod figcaption{position:absolute;left:0;right:0;bottom:46px;text-align:center;font:normal 34px/43px 'ATCond';color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.prod .arrow{top:375px}
.prod .arrow.prev{left:34px}.prod .arrow.next{right:34px}

/* ---------- Contacto ---------- */
.contact-lead{margin:0;width:1920px;padding:93px 95px 96px;box-sizing:border-box;font:normal 97px/103px 'ATCond';color:#fff;text-align:center;text-wrap:pretty}
.form{width:1920px;padding:70px 95px 0;box-sizing:border-box;display:flex;gap:100px}
.form .col1{display:flex;flex-direction:column;gap:22px;width:790px}
.form .col2{display:flex;flex-direction:column;align-items:flex-end;gap:26px;width:840px}
.form input,.form textarea{width:790px;height:62px;box-sizing:border-box;border:0;border-radius:0;background:#f0f0f0;padding:0 18px;font:26px Helvetica,Arial,sans-serif;color:#111;outline:none}
.form textarea{width:840px;height:250px;padding:14px 18px;resize:none}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid #fff;outline-offset:3px}
.form .send{width:180px;height:56px;background:#f0f0f0;color:#111;display:flex;align-items:center;justify-content:center;font:26px Helvetica,Arial,sans-serif}
.form .send[disabled]{opacity:.6;cursor:wait}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-msg{width:1920px;padding:24px 95px 0;box-sizing:border-box;text-align:right;font:normal 30px/40px 'ATCond';color:#fff;min-height:46px}

/* ---------- Pie ---------- */
.foot{width:1920px;padding:69px 95px 60px;box-sizing:border-box;font:normal 30px/43px 'ATCond';color:#fff;display:flex;flex-direction:column;align-items:center}
.foot .row{display:flex;gap:78px}
.foot .link{transition:opacity 220ms ease}
.foot .link:hover{opacity:.7;text-decoration:underline}

/* ---------- Aviso de privacidad ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:50;display:flex;align-items:center;justify-content:center;padding:60px;box-sizing:border-box}
.modal[hidden]{display:none}
.modal .box{width:1100px;max-height:80vh;overflow:auto;background:#0b0b0b;border:3px solid #fff;padding:56px 60px;box-sizing:border-box;color:#fff}
.modal h2{margin:0 0 28px;font:normal 64px/66px 'Barbaro'}
.modal .body{font:normal 34px/44px 'ATCond';white-space:pre-line}
.modal .close{margin-top:36px;width:160px;height:52px;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font:normal 30px 'ATCond'}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
}