:root{--ladrillo:#83382A;--terracota:#8F4438;--arena:#D8C19C;--crema:#F2D8B3;--bordo:#2D0D15;
--script:'Great Vibes',cursive;--sans:'Days One',sans-serif;--serif:'Libre Caslon Text',serif;--gutter:clamp(20px,4vw,48px)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0}
html{background:#000;-webkit-font-smoothing:antialiased}
body{background:transparent}
#bg{position:fixed;inset:0;z-index:-2;background:#000}
#bg-tex{position:fixed;inset:0;z-index:-1;background-image:url(assets/textura.svg);opacity:0;mix-blend-mode:multiply;pointer-events:none}
body{font-family:var(--serif);color:var(--crema)}
a{color:inherit;text-decoration:none}
::selection{background:var(--ladrillo);color:var(--crema)}
button:focus-visible,a:focus-visible{outline:1px solid var(--arena);outline-offset:4px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gutter);color:var(--crema);transition:color .5s ease;pointer-events:none}
header.on-light{color:var(--ladrillo)}
header::before,header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s ease}
header::before{background:var(--hdr-bg,transparent)}
header::after{background-image:url(assets/textura.svg);mix-blend-mode:multiply}
header.solid::before{opacity:1}
header.solid::after{opacity:var(--hdr-tex,0)}
header .logo,header nav{pointer-events:auto}
.logo{font-family:var(--script);font-size:36px;line-height:1;opacity:0;transition:opacity .6s ease}
header.show-logo .logo{opacity:1}
nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
nav a:hover,nav button:hover{opacity:.6}
.btn-outline{border:1px solid currentColor;padding:10px 14px 9px;transition:background .3s}
.btn-outline:hover{background:rgba(143,68,56,.25)}
nav button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:10px 0;cursor:pointer}
.narrow{display:none}
@media (max-width:819px){.wide{display:none}.narrow{display:inline}}

#overlay{position:fixed;inset:0;z-index:60;background:var(--bordo);color:var(--crema);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;font-family:var(--sans);font-size:13px;letter-spacing:.3em;text-transform:uppercase}
#close-menu{position:absolute;top:22px;right:24px;background:none;border:0;color:var(--arena);font:inherit;font-size:11px;letter-spacing:.28em;cursor:pointer;text-transform:uppercase}
.overlay-logo{font-family:var(--script);font-size:56px;letter-spacing:0;text-transform:none;margin-bottom:12px}
.btn-outline.light{border-color:var(--crema);padding:12px 18px 11px}
.fox-small{position:absolute;bottom:28px;width:44px;height:81px;background:var(--ladrillo);-webkit-mask:url(assets/zorro-fumando.png) center/contain no-repeat;mask:url(assets/zorro-fumando.png) center/contain no-repeat}

.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:transparent;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.hero picture{position:absolute;inset:0}
.hero img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:50% 50%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 45%)}
.hero-grain{position:absolute;inset:0;background-image:url(assets/textura.svg);opacity:.35;mix-blend-mode:overlay;pointer-events:none}
.hero-text{position:absolute;left:0;right:0;top:clamp(84px,11vh,120px);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hero-text h1{font-family:var(--script);font-weight:400;font-size:clamp(104px,12vw,168px);line-height:.95}
.hero-text p{font-family:var(--sans);font-size:12px;letter-spacing:.34em;text-transform:uppercase}

.casa{position:relative;background:transparent;padding:clamp(100px,15vh,160px) 0 clamp(90px,13vh,140px);display:flex;flex-direction:column;align-items:center;gap:44px;text-align:center;overflow:hidden;color:var(--ladrillo)}
.tex{position:absolute;inset:0;background-image:url(assets/textura.svg);opacity:var(--tex,.55);mix-blend-mode:multiply;pointer-events:none}
.casa h2{position:relative;align-self:flex-start;margin:0 var(--gutter);text-align:left;font-family:var(--script);font-weight:400;font-size:clamp(48px,6vw,76px);line-height:1.05;text-wrap:balance}
.carousel{position:relative;width:100%;display:flex;flex-direction:column;gap:22px}
.track{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gutter);scroll-padding:0 var(--gutter);-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track figure{flex:0 0 min(78vw,460px);scroll-snap-align:start}
.track img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.controls{display:flex;align-items:center;justify-content:center;gap:28px;font-family:var(--sans);font-size:11px;letter-spacing:.28em}
.controls button{background:none;border:0;color:inherit;font:inherit;font-size:18px;padding:10px 12px;cursor:pointer}
.controls button:hover{color:var(--terracota)}
.controls button.dim{opacity:.3}

.reservas{position:relative;background:transparent;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;padding:140px 24px;overflow:hidden;text-align:center}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--arena)}
.reservas h2{max-width:11ch;font-family:var(--script);font-weight:400;font-size:clamp(60px,9vw,120px);line-height:1.02;text-wrap:balance}
.link-cta{font-family:var(--sans);font-size:12px;letter-spacing:.3em;text-transform:uppercase;border-bottom:1px solid var(--crema);padding-bottom:7px;transition:color .3s,border-color .3s}
.link-cta:hover{color:var(--arena);border-color:var(--arena)}
.fox-peek{position:absolute;bottom:0;right:clamp(20px,9vw,140px);width:92px;height:170px;background:var(--arena);-webkit-mask:url(assets/zorro-fumando.png) center top/contain no-repeat;mask:url(assets/zorro-fumando.png) center top/contain no-repeat;transform:translateY(101%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fox-peek.peek{transform:translateY(34%)}

footer{position:relative;z-index:1;background:transparent;padding:clamp(90px,14vh,140px) 24px 40px;display:flex;flex-direction:column;align-items:center;gap:56px;text-align:center}
.isotipo{width:clamp(110px,14vw,150px);aspect-ratio:518/604;background:var(--crema);-webkit-mask:url(assets/isotipo.png) center/contain no-repeat;mask:url(assets/isotipo.png) center/contain no-repeat}
.closing{max-width:12ch;font-family:var(--script);font-size:clamp(52px,8vw,100px);line-height:1.05;text-wrap:balance}
.info{width:100%;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:40px clamp(40px,6vw,88px)}
.info>div{display:flex;flex-direction:column;align-items:center;gap:12px}
.label{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase}
.text{font-size:15px;line-height:1.6;text-align:center}
.line{display:block;white-space:nowrap}
@media (max-width:420px){.text{font-size:13.5px}}
a.text{transition:color .3s}
a.text:hover{color:var(--bordo)}
.sign{margin-top:24px}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
[data-reveal].shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
.no-js [data-reveal]{opacity:1;transform:none}