/* =========================================================
   EN EL PATIO — stylesheet
   ========================================================= */

/* ---------- self-hosted fonts (was Google Fonts CDN) ---------- */
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/Anton-400-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/Anton-400-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-400-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-400-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-500-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-500-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-600-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-600-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-700-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-700-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-800-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-800-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-900-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/Archivo-900-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/Baloo2-600-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/Baloo2-600-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/Baloo2-700-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/Baloo2-700-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/Baloo2-800-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/Baloo2-800-latin.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;
}

/* Playfair Display italic — carta-style display headings */
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/PlayfairDisplay-Italic-400-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/PlayfairDisplay-Italic-400-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/PlayfairDisplay-Italic-700-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/PlayfairDisplay-Italic-700-latin.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;
}

:root{
  --black:#0b0b0b;
  --near-black:#141210;
  --panel:#1a1714;
  --red:#e5162c;
  --red-dark:#a80f20;
  --white:#f7f4ee;
  --cream:#efe8da;
  --gray:#9a948a;
  --gold:#d4a94c;
  --strawberry:#ef6f92;
  --line:rgba(247,244,238,.14);
  --header-h:84px;
  --header-h-m:62px;
  --ff-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --ff-body:'Archivo', 'Segoe UI', Arial, sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--ff-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--ff-display); font-weight:400; margin:0; letter-spacing:.5px; line-height:1; text-transform:uppercase; }
section{ scroll-margin-top: var(--header-h); }

/* ---------- utility: generic reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
  will-change:transform,opacity;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.reveal-inline{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal-inline.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1.5px solid transparent;
  padding:12px 26px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:transform .25s var(--ease-out), background .25s, color .25s, border-color .25s;
  background:none;
  color:var(--white);
}
.btn:hover{ transform:translateY(-2px); }
.btn-reservar{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-reservar:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn-outline-light{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--black); }
.btn-outline-gold{ border-color:var(--gold,#d4a94c); color:var(--gold,#d4a94c); }
.btn-outline-gold:hover{ background:var(--gold,#d4a94c); color:var(--black); }
.btn-solid-red{ background:var(--red); color:#fff; }
.btn-solid-red:hover{ background:var(--red-dark); }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.loader span{
  width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--red);
  animation:spin .8s linear infinite;
}
.loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--header-h);
  background:var(--black);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1440px; margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
}
.header-left{ display:flex; align-items:center; gap:22px; }
.brand{ display:flex; align-items:center; }
.brand-logo{ height:56px; width:auto; }
.burger{
  width:32px; height:21px; display:flex; flex-direction:column;
  justify-content:space-between; background:none; border:none; padding:3px 0;
}
.burger span{ display:block; height:3.5px; width:100%; background:#fff; border-radius:2px; transition:transform .3s var(--ease-out), opacity .3s; }
.burger.active span:nth-child(1){ transform:translateY(8.75px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform:translateY(-8.75px) rotate(-45deg); }

.header-right{ display:flex; align-items:center; gap:12px; }

.lang-switch{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:1.5px solid rgba(255,255,255,.55); color:#fff;
  border-radius:999px; padding:11px 18px; font-weight:700; font-size:13px; letter-spacing:.04em;
}
.lang-caret{ transition:transform .25s var(--ease-out); }
.lang-switch.open .lang-caret{ transform:rotate(180deg); }
.lang-dropdown{
  position:absolute; top:calc(100% + 10px); right:0;
  background:var(--near-black); border:1px solid var(--line); border-radius:14px;
  min-width:100%; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
}
.lang-switch.open .lang-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-option{
  display:block; width:100%; background:none; border:none; color:#fff;
  padding:11px 18px; font-weight:700; font-size:13px; text-align:center;
}
.lang-option:hover{ background:var(--red); }
.lang-option[hidden]{ display:none; }

/* =========================================================
   DRAWER
   ========================================================= */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:600;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
  backdrop-filter:blur(2px);
}
.drawer-overlay.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; left:0; height:100%; width:min(380px,86vw); z-index:601;
  background:var(--black); border-right:1px solid var(--line);
  padding:32px 30px; display:flex; flex-direction:column;
  transform:translateX(-104%); transition:transform .45s var(--ease-out);
}
.drawer.open{ transform:translateX(0); }
.drawer-close{ align-self:flex-end; background:none; border:none; color:#fff; font-size:34px; line-height:1; }
.drawer-list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.drawer-link{
  display:block; font-family:var(--ff-display); font-size:clamp(28px,6vw,38px);
  padding:10px 2px; text-transform:uppercase; color:#fff; border-bottom:1px solid var(--line);
  transition:color .2s, padding-left .2s;
}
.drawer-link:hover{ color:var(--red); padding-left:10px; }
.drawer-social{ margin-top:auto; display:flex; gap:22px; padding-top:24px; }
.drawer-social a{ font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray); }
.drawer-social a:hover{ color:#fff; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  height:100vh;
  min-height:560px;
  background:var(--black);
  overflow:hidden;
  padding-top:var(--header-h);
}
.hero-marquee{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(12px,3vh,40px);
  gap:clamp(4px,1.4vh,14px);
}
/* on phone widths, raise the marquee back toward center and shorten the
   hero itself so a small sliver of the next section (the image carousel)
   peeks in at the bottom of the first screen — a visual cue to scroll */
@media (max-width:699px){
  .hero{ height:90vh; }
  .hero-marquee{ justify-content:center; padding-bottom:0; }
}
.hero-row{ position:relative; width:100%; overflow:hidden; white-space:nowrap; }
.hero-row-track{
  display:inline-flex; will-change:transform;
}
.hero-row-track span{
  font-family:var(--ff-display);
  font-size:clamp(95px,16vw,190px);
  padding:0 .05em;
  letter-spacing:.05em;
  line-height:1;
  white-space:nowrap;
}
.hero-row-track span.word-fill{
  color:var(--white);
  -webkit-text-stroke:1.5px var(--white);
}
.hero-row-track span.word-outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(247,244,238,.75);
}

/* entrance (played once) */
.hero-row{ opacity:0; }
.hero-row.from-left .hero-row-track{ transform:translateX(-38%); }
.hero-row.from-right .hero-row-track{ transform:translateX(38%); }
.hero-row.enter{
  opacity:1;
  transition:opacity .9s var(--ease-out);
}
.hero-row.enter .hero-row-track{
  transition:transform .9s var(--ease-out);
  transform:translateX(0);
}
/* infinite loop once settled */
.hero-row.loop.dir-left .hero-row-track{ animation:marqueeLeft 42s linear infinite; }
.hero-row.loop.dir-right .hero-row-track{ animation:marqueeRight 42s linear infinite; }
@keyframes marqueeLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marqueeRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }


/* =========================================================
   PROXIMAMENTE DUO
   ========================================================= */
.soon-duo{ padding:16px 5vw 130px; background:var(--black); overflow:hidden; }
.soon-carousel{
  position:relative; max-width:1400px; margin:0 auto;
  border-radius:22px; overflow:hidden; aspect-ratio:16/9;
  transform:scale(.72); transform-origin:center center; will-change:transform;
  cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-drag:none;
}
.soon-carousel.dragging{ cursor:grabbing; }
.soon-vignette{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 38%, rgba(0,0,0,.92) 100%);
  opacity:1; will-change:opacity;
}
.soon-track{ position:relative; width:100%; height:100%; }
.soon-card{
  position:absolute; inset:0; display:block; overflow:hidden;
  isolation:isolate; pointer-events:none;
}
.soon-card.is-active{ pointer-events:auto; }
.soon-media{ position:absolute; inset:0; filter:brightness(.62); }
.soon-media--a{
  background:
    linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.32) 100%),
    url(../assets/img/soon-chancletera.jpg) center/cover no-repeat;
}
.soon-media--b{
  background:
    linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.32) 100%),
    url(../assets/img/soon-menu-mexicano.jpg) center/cover no-repeat;
}
.soon-media--c{
  background:
    linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.32) 100%),
    url(../assets/img/soon-azucar-vida.jpg) center/cover no-repeat;
}
.soon-media--d{
  background:
    linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.32) 100%),
    url(../assets/img/soon-dogfriendly.jpg) center top/cover no-repeat;
}
.soon-copy{
  position:absolute; left:28px; right:28px; bottom:26px; display:flex; flex-direction:column; gap:6px;
}
.soon-eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.soon-link{ color:inherit; text-decoration:none; }
.soon-cta{
  display:inline-block;
  margin-top:22px; font-size:clamp(13px,1.6vw,16px); font-weight:700;
  letter-spacing:.02em; text-transform:uppercase;
}
.soon-cta span{ display:inline-block; transition:transform .25s var(--ease-out); }
.soon-cta:hover span{ transform:translate(3px,-3px); }
.soon-copy h3{ font-size:clamp(30px,4vw,52px); transition:opacity .2s ease; }
.soon-copy a.soon-link:hover h3{ opacity:.8; }
.soon-card-vignette{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(120% 120% at 50% 50%, transparent 38%, rgba(0,0,0,.92) 100%);
}

.soon-nav{ position:absolute; top:22px; right:22px; z-index:3; display:flex; gap:10px; }
.soon-arrow{
  width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,.35); border:1.5px solid rgba(255,255,255,.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background .25s, transform .25s;
}
.soon-arrow:hover{ background:#fff; color:var(--black); transform:scale(1.06); }
.soon-arrow[hidden]{ display:none; }
.soon-count{
  position:absolute; bottom:22px; right:22px; z-index:3;
  width:36px; height:36px; border-radius:50%;
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; background:rgba(0,0,0,.35); backdrop-filter:blur(4px);
}
.soon-count-ring{
  position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);
}
.soon-count-ring .ring-bg{
  fill:none; stroke:rgba(255,255,255,.3); stroke-width:2.5;
}
.soon-count-ring .ring-progress{
  fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:106.8; stroke-dashoffset:53.4;
  transition:stroke-dashoffset .5s var(--ease-out);
}
.soon-count-num{ position:relative; z-index:1; }

/* =========================================================
   MARQUEE STRIP (MENU / EVENTOS banners)
   ========================================================= */
.marquee-strip{
  background:var(--black);
  border-top:3px solid var(--white); border-bottom:3px solid var(--white);
  overflow:hidden; padding:16px 0;
  scroll-margin-top:var(--header-h);
}
.ingredients-section + .marquee-strip{ border-top:none; }
.marquee-track{ display:inline-flex; white-space:nowrap; animation:marqueeLeft 34s linear infinite; }
.marquee-track span{
  font-family:var(--ff-display);
  font-size:clamp(58px,13vw,132px);
  padding:0 .05em;
  letter-spacing:.05em;
  line-height:1;
}
.marquee-track span.filled{ color:var(--white); -webkit-text-stroke:1px var(--white); }
.marquee-track span.outline{ color:transparent; -webkit-text-stroke:1.4px var(--white); }

/* color-inverted variant (cream bg, black text/lines) — same size, padding
   and scroll animation as the other banners, just a slower scroll speed */
.marquee-strip--antidieta{
  background:var(--white);
  border-top-color:#000; border-bottom-color:#000;
}
.marquee-strip--antidieta .marquee-track{ animation-duration:60s; }
.marquee-strip--antidieta .marquee-track span.filled{ color:#000; -webkit-text-stroke:1px #000; }
.marquee-strip--antidieta .marquee-track span.outline{ color:transparent; -webkit-text-stroke:1.4px #000; }

.marquee-strip--static{
  display:flex; align-items:center; justify-content:center; padding:14px 5vw; overflow:visible;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.marquee-static-text{
  position:relative;
  font-family:var(--ff-display);
  font-size:clamp(26px,6vw,70px);
  letter-spacing:.05em;
  line-height:1.15;
  color:var(--white);
  -webkit-text-stroke:1px var(--white);
  text-align:center;
}
.marquee-static-text::after{
  content:'';
  position:absolute;
  left:50%; bottom:-10px;
  width:46px; height:2px;
  background:var(--red);
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:transform .6s var(--ease-out);
  transition-delay:.35s;
}
.marquee-static-text.reveal.is-visible::after{ transform:translateX(-50%) scaleX(1); }

/* =========================================================
   MENU SECTION
   ========================================================= */
.menu-section{ padding:56px 0 60px; background:var(--black); }

.menu-carousel{ position:relative; max-width:1360px; margin:0 auto; }

.menu-scroller{
  position:relative; z-index:1; overflow:hidden;
  height:380px;
  padding:10px 0 26px;
  cursor:grab; touch-action:pan-y;
  user-select:none;
}
.menu-scroller.dragging{ cursor:grabbing; }

.menu-slide{
  position:absolute; top:10px; left:50%;
  width:min(320px,68vw);
  background:none; border:none; padding:0 10px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#fff;
  transition:transform .5s cubic-bezier(.22,.68,.32,1), opacity .5s ease;
  will-change:transform, opacity;
}
.menu-slide .product-img{
  width:100%; max-width:260px; height:220px; object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.5));
  pointer-events:none;
}
.product-visual{
  position:relative; display:block; overflow:hidden;
  width:100%; max-width:260px; height:220px;
  border-radius:36px 36px 0 0;
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}
.product-visual .product-img{ position:absolute; inset:0; }
.product-visual .product-img-objects{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  pointer-events:none;
  opacity:0; transform:scale(.88);
  transition:opacity .5s ease, transform .5s var(--ease-out);
}
.menu-slide.is-center .product-img-objects{ opacity:1; transform:scale(1); }
.menu-slide .product-name{
  font-family:var(--ff-display); font-size:26px; text-transform:uppercase; pointer-events:none;
  transition:opacity .18s ease;
}
.menu-slide .product-tagline{
  font-size:13px; color:var(--gray); font-style:italic; text-align:center;
  margin-top:12px; max-width:240px; pointer-events:none;
  transition:opacity .18s ease;
}

.menu-detail{
  position:absolute; z-index:60; top:0; left:0; width:52%; height:100%;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:10px; padding:0 4vw 26px 4px; text-align:left;
  opacity:0; transform:translateX(-26px);
  transition:opacity .22s ease, transform .22s var(--ease-out);
  pointer-events:none;
}
.menu-detail.open{ opacity:1; transform:translateX(0); pointer-events:auto; }
.menu-detail-eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:700; }
.menu-detail-specs{ font-size:16px; color:var(--gray); margin:0; }
.menu-detail-price{ font-family:var(--ff-display); color:var(--white); font-size:clamp(22px,5vw,32px); align-self:center; margin-left:20%; }
.menu-dots{ display:flex; gap:9px; justify-content:center; margin-top:6px; }
.menu-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.25); border:none; padding:0;
  transition:background .25s, transform .25s;
}
.menu-dot.active{ background:var(--red); transform:scale(1.3); }

/* =========================================================
   COUNTER SECTION
   ========================================================= */
.counter-section{
  background:var(--black); padding:60px 5vw 110px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:50px;
}
.counter-title{ font-size:clamp(24px,4vw,46px); max-width:900px; line-height:1.2; }
.counter-display{ display:flex; gap:0; flex-wrap:wrap; justify-content:center; }
.digit{
  position:relative;
  width:clamp(38px,7vw,84px);
  aspect-ratio:44/76;
}
.digit .seg{
  position:absolute;
  background-image:radial-gradient(circle, rgba(229,22,44,.16) 42%, transparent 44%);
  background-size:6px 6px;
}
.digit .seg-a, .digit .seg-g, .digit .seg-d{ left:27%; width:46%; height:10%; }
.digit .seg-a{ top:3%; }
.digit .seg-g{ top:45%; }
.digit .seg-d{ top:87%; }
.digit .seg-f, .digit .seg-b, .digit .seg-e, .digit .seg-c{ width:10%; height:34%; }
.digit .seg-f, .digit .seg-e{ left:13%; }
.digit .seg-b, .digit .seg-c{ left:77%; }
.digit .seg-f, .digit .seg-b{ top:9%; }
.digit .seg-e, .digit .seg-c{ top:54%; }
.digit.lit .seg.on{
  background-image:radial-gradient(circle, var(--red) 42%, transparent 44%);
  filter:drop-shadow(0 0 3px rgba(229,22,44,.9)) drop-shadow(0 0 9px rgba(229,22,44,.6));
}
.digit.lit.flicker .seg.on{ animation:neonFlickerSeg 4.4s infinite; }
@keyframes neonFlickerSeg{
  0%, 3%, 6%, 40%, 43%, 65%, 100%{
    background-image:radial-gradient(circle, var(--red) 42%, transparent 44%);
    filter:drop-shadow(0 0 3px rgba(229,22,44,.9)) drop-shadow(0 0 9px rgba(229,22,44,.6));
  }
  4%, 5%, 41%, 64%, 66%{
    background-image:radial-gradient(circle, rgba(229,22,44,.24) 42%, transparent 44%);
    filter:none;
  }
}

/* =========================================================
   FRIENDS WITH BENEFITS
   ========================================================= */
.hermanos-section{
  position:relative; padding:140px 5vw; min-height:70vh;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(to bottom, var(--black) 0%, rgba(11,11,11,0) 14%),
    radial-gradient(120% 100% at 50% 20%, #241a15 0%, var(--black) 65%);
}
.friends-inner{ position:relative; z-index:1; text-align:center; max-width:820px; padding:0 24px; display:flex; flex-direction:column; align-items:center; gap:26px; }
.friends-coin{
  display:block;
  width:clamp(120px,16vw,200px); aspect-ratio:1/1;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
  user-select:none;
  cursor:grab;
}
.friends-coin.dragging{ cursor:grabbing; }
.friends-title{ font-size:clamp(38px,7vw,86px); line-height:1.2; }
.friends-title-accent{ color:var(--gold); font-size:1.3em; }
#hermanoBtn:hover{ background:var(--gold); color:var(--black); }
.friends-subtitle{ font-size:15px; color:var(--white); opacity:.85; max-width:520px; margin:-10px 0 0; line-height:1.5; }


/* =========================================================
   NO SOLO VENDEMOS HAMBURGUESAS
   ========================================================= */
.ingredients-section{
  position:relative; background:var(--black) url(../assets/img/ingredients-bg.jpg?v=3) center/cover no-repeat;
  padding:140px 5vw;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  min-height:80vh;
}
.ingredients-copy{
  position:relative; z-index:2; text-align:center; max-width:760px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.ingredients-eyebrow{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.ingredients-copy h2{ font-size:clamp(32px,6vw,72px); }

/* =========================================================
   EVENTOS SECTION
   ========================================================= */
.stack-reveal{ position:relative; }
.news-stack{
  position:sticky; top:0; z-index:1;
  background:var(--black);
  border-radius:0 0 32px 32px;
  overflow:hidden;
}
.events-section{ background:var(--black); padding:100px 5vw 130px; }
.events-grid{ max-width:460px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:22px; }
.event-card{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; display:flex; align-items:flex-end; }
.event-media{ position:absolute; inset:0; transition:transform .5s var(--ease-out); }
.event-card:hover .event-media{ transform:scale(1.08); }
.event-media--1{ background:#0b0b0b url('../assets/img/event-cerrados.jpg?v=3') center 85%/cover no-repeat; }
.event-name{
  position:relative; z-index:2; padding:22px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:18px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--white); color:var(--black); padding:70px 5vw 30px;
  position:relative; z-index:2;
  border-radius:32px 32px 0 0;
}
.footer-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:40px; max-width:1360px; margin:0 auto 50px; }
.footer-logo{ height:92px; width:auto; }
.footer-nav-col{ display:flex; flex-direction:column; align-items:flex-end; gap:22px; }
.footer-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; text-align:right; }
.footer-directions-btn{ color:#fff; }
.footer-nav a{
  font-family:var(--ff-display); font-size:clamp(30px,5vw,58px); text-transform:uppercase;
  color:var(--black); transition:color .25s;
}
.footer-nav a:hover{ color:var(--red); }
.footer-bottom{
  max-width:1360px; margin:0 auto; padding-top:26px; border-top:1px solid rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.footer-bottom p{ margin:0; font-size:13px; color:#57534c; }
.footer-legal{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-legal a{ font-size:13px; color:#57534c; text-decoration:none; transition:color .25s; }
.footer-legal a:hover{ color:var(--red); }
.footer-social{ display:flex; gap:16px; }
.footer-social a{ color:var(--black); transition:color .25s, transform .25s; }
.footer-social a:hover{ color:var(--red); transform:translateY(-2px); }

/* =========================================================
   MODAL
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
  backdrop-filter:blur(3px);
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{
  position:relative; width:min(620px,100%); max-height:82vh; overflow:hidden;
  background:var(--near-black); border-radius:24px; border:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateY(30px) scale(.97); transition:transform .4s var(--ease-out);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:14px; right:16px; z-index:5;
  background:rgba(0,0,0,.4); border:none; color:#fff; font-size:26px; line-height:1;
  width:36px; height:36px; border-radius:50%;
}
.modal-close:hover{ background:var(--red); }
.modal-banner{ background:var(--red); overflow:hidden; padding:14px 0; }
.modal-banner-track{ display:inline-flex; white-space:nowrap; animation:marqueeLeft 14s linear infinite; }
.modal-banner-track span{
  font-family:var(--ff-display); font-size:22px; padding:0 .05em; color:#fff; letter-spacing:.05em;
}
.modal-content{
  padding:40px 30px 44px; text-align:center; overflow-y:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.modal-content::-webkit-scrollbar{ display:none; }
.modal-banner[hidden] + .modal-content:not(.modal-content--flush){ padding-top:56px; }
.modal-content h3{ font-size:clamp(22px,4vw,34px); margin-bottom:14px; }
.modal-content p{ color:var(--gray); font-size:15px; line-height:1.6; margin:0 0 22px; }
.modal-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

.modal-content--flush{ padding:0; max-height:82vh; }

.carta-gallery{
  display:flex; flex-direction:column; gap:2px;
  background:#000;
}
.carta-gallery .carta-page{ width:100%; display:block; }

/* ---------- rules page (dogfriendly.html) ---------- */
.rules-page{ background:#000; min-height:100vh; }
.rules-photo{
  position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  margin-top:var(--header-h);
}
.rules-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.rules-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 55%, #000 100%);
}
.rules-photo-overlay{
  position:absolute; left:6vw; right:6vw; bottom:28px; z-index:2; text-align:center;
}
.rules-photo-overlay .promo-eyebrow{ margin-bottom:2px; }
.rules-list{ padding:36px 6vw 80px; max-width:640px; margin:0 auto; display:flex; flex-direction:column; }
.rule-row{
  display:flex; align-items:flex-start; gap:16px; padding:16px 0;
  text-align:left; border-bottom:1px solid var(--line);
}
.rule-row:last-child{ border-bottom:none; }
.rule-num{
  font-family:var(--ff-display); color:var(--red); font-size:28px;
  line-height:1; min-width:28px; flex-shrink:0;
}
.rule-icon{ width:26px; height:26px; flex-shrink:0; margin-top:3px; color:var(--white); }
.rule-icon svg{ width:100%; height:100%; display:block; }
.rule-text strong{
  display:block; color:var(--white); font-size:15px; text-transform:uppercase;
  letter-spacing:.02em; margin-bottom:3px; font-family:var(--ff-body); font-weight:700;
}
.rule-text span{ color:var(--gray); font-size:14px; line-height:1.55; }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px);
  background:#fff; color:var(--black); padding:14px 24px; border-radius:999px;
  font-weight:700; font-size:13.5px; letter-spacing:.02em; z-index:950;
  max-width:min(420px,86vw); text-align:center; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
@media (max-width:520px){ .toast{ white-space:normal; border-radius:20px; } }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal-inline, .hero-row{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-row-track{ animation:none !important; }
  .soon-carousel{ transform:scale(1) !important; filter:none !important; }
  .soon-vignette{ opacity:0 !important; }
  .menu-slide, .menu-slide .product-img{ transition:none !important; }
  .product-img-objects{ transition:none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:720px){
  :root{ --header-h:var(--header-h-m); }
  .header-inner{ padding:0 16px; }
  .brand-logo{ height:42px; }
  .btn-reservar{ padding:9px 16px; font-size:12px; }
  .lang-btn{ padding:9px 12px; font-size:12px; }
  .header-right{ gap:8px; }

  /* shorter than the full viewport on purpose — a sliver of the next
     section (the promo carousel) peeks in at the bottom, hinting to
     the user that there's more below to scroll to */
  .hero{ height:88vh; }
  .hero-marquee{ justify-content:center; padding-bottom:0; }

  .soon-carousel{ aspect-ratio:4/5; }
  .soon-arrow{ width:32px; height:32px; }

  .menu-scroller{ padding:10px 5vw 22px; }

  .footer-top{ flex-direction:column; align-items:flex-start; gap:26px; }
  .footer-nav{ text-align:left; }
  .footer-nav-col{ align-items:flex-start; }
  .footer-logo{ height:64px; }

  .ingredients-section{ padding:100px 20px; min-height:70vh; }

  .friends-title{ font-size:clamp(30px,8.5vw,54px); }
  .digit{ width:clamp(30px,10.5vw,54px); }
}

/* =========================================================
   HELADO SUBPAGE
   ========================================================= */
.helado-hero{
  display:flex;
  flex-direction:column;
  background:#000;
  padding-top:var(--header-h);
  min-height:100vh;
}
.helado-hero-copy{
  padding:24px 6vw 12px;
  display:flex;
  flex-direction:column;
  gap:14px;
  /* near-black sampled from helado-hero.jpg's own studio backdrop edges,
     so the text panel reads as part of the same photo with no visible seam */
  background:#000;
}
.helado-eyebrow{
  color:var(--strawberry);
  font-size:13px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.helado-title{
  font-family:'Baloo 2', var(--ff-display);
  font-weight:800;
  font-size:clamp(44px,11.5vw,102px);
  line-height:.9;
  letter-spacing:0;
}
.helado-title-small{
  display:block;
  font-size:.32em;
  line-height:1;
  color:var(--strawberry);
  letter-spacing:.1em;
  margin:.12em 0;
}
.helado-subtitle{
  color:rgba(247,244,238,.72);
  font-size:clamp(15px,2vw,19px);
  max-width:46ch;
  font-family:var(--ff-body);
}
.helado-title-graphic{
  width:100%;
  max-width:480px;
  height:auto;
  display:block;
}
.promo-hero--chancletera .helado-title-graphic{
  max-width:300px;
  margin:0 auto;
}
.helado-hero-media{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#000;
  margin-top:-4px;
}
.helado-hero-img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  display:block;
}
/* pull the footer up just enough to overlap the image so it reads as
   sitting on the photo, without a bare gap in between; square corners and
   a pure white background instead of the site's usual rounded cream footer */
.helado-footer{
  margin-top:-18px;
  border-radius:0;
  background:#fff;
}

@media (min-width:900px){
  .helado-hero{
    flex-direction:row;
    align-items:stretch;
  }
  .helado-hero-copy{
    width:46%;
    justify-content:center;
    padding:0 4vw;
  }
  .helado-hero-media{
    width:54%;
    aspect-ratio:auto;
  }
}

/* =========================================================
   PROMO HERO — full-bleed scroll-through promo sections
   (tacos.html "TACOS ULTRA PRO MAX" + "NUEVA QUESADILLA")
   ========================================================= */
.promo-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  padding-top:var(--header-h);
  overflow:hidden;
  background:#000;
}
/* the quesadilla/nachos spotlight sections have much shorter content than
   the tacos list, so anchor them near the top instead of the bottom —
   otherwise the short text block floats far down, leaving a big empty
   gap right after the previous section ends */
.promo-hero--quesadilla, .promo-hero--nachos, .promo-hero--chancletera{ align-items:flex-start; }
/* also drop the forced full-viewport height on these two — they sit
   back-to-back with another product section right below, so once the
   content is anchored to the top, min-height:100vh just leaves a big
   dead-space gap at the BOTTOM before the next product's text starts */
.promo-hero--quesadilla, .promo-hero--nachos{ min-height:auto; }
.promo-hero-bg{ position:absolute; inset:0; z-index:0; }
.promo-hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    #000 0%, rgba(0,0,0,.72) 12%, rgba(0,0,0,.68) 28%, rgba(0,0,0,.75) 60%, rgba(0,0,0,.9) 88%, #000 100%);
}
/* quesadilla + nachos: lighter scrim so the food photo reads clearly;
   text legibility is carried by a soft text-shadow instead of a heavy
   overlay. Edges still fade to black so the sections join seamlessly. */
.promo-hero--quesadilla .promo-hero-vignette,
.promo-hero--nachos .promo-hero-vignette{
  background:linear-gradient(to bottom,
    #000 0%, rgba(0,0,0,.46) 9%, rgba(0,0,0,.4) 28%, rgba(0,0,0,.44) 60%, rgba(0,0,0,.62) 90%, #000 100%);
}
.promo-hero--quesadilla .promo-hero-content,
.promo-hero--nachos .promo-hero-content{
  text-shadow:0 2px 14px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.6);
}
.promo-hero-content{
  position:relative; z-index:2; width:100%;
  padding:32px 6vw 36px;
}

/* reusable scroll-reveal for horizontal divider lines (paired with the
   generic .reveal fade/slide used on the text itself) */
.reveal-line{
  transform:scaleX(0);
  opacity:0;
  transition:transform .7s var(--ease-out), opacity .5s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal-line.is-visible{ transform:scaleX(1); opacity:1; }

.promo-line{
  width:100%; max-width:360px; height:2px; background:var(--red);
  margin:16px auto; transform-origin:center;
}

/* ---- TACOS section ---- */
.promo-title{
  display:flex; flex-direction:column; align-items:center; gap:0;
  margin-bottom:18px; text-align:center;
}
.promo-title-fill{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(76px,20vw,180px); line-height:.85;
  color:var(--red);
}
.promo-title-outline{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(32px,8.6vw,74px); letter-spacing:.01em;
  color:var(--red);
  margin-top:4px;
}
.promo-items{ display:flex; flex-direction:column; max-width:520px; margin:0 auto; text-align:center; }
.promo-item{ padding:22px 0; }
.promo-item-name{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--red);
  font-size:clamp(24px,5.6vw,34px); line-height:1.12; margin-bottom:10px;
}
.promo-item-desc{
  font-family:var(--ff-body); color:var(--white); font-size:14px; line-height:1.55;
  margin:0 0 12px; opacity:.92;
}
.promo-item-price{
  font-family:var(--ff-display); color:var(--white); font-size:clamp(28px,6.4vw,42px);
}

/* ---- QUESADILLA section ---- */
.promo-hero-content--quesadilla{ text-align:center; max-width:560px; margin:0 auto; }
.promo-eyebrow{
  display:block; font-family:var(--ff-display); text-transform:uppercase; color:var(--red);
  font-size:clamp(20px,5vw,30px); letter-spacing:.03em; margin-bottom:-.1em;
}
.promo-title-red{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--red);
  font-size:clamp(50px,14vw,110px); line-height:.88; margin-bottom:14px;
}
.promo-subtitle{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--white);
  font-size:clamp(20px,4.6vw,28px); line-height:1.2; margin-bottom:14px;
}
.promo-hero--chancletera .promo-subtitle{
  font-size:clamp(30px,7vw,44px);
}
.promo-desc{
  font-family:var(--ff-body); color:var(--white); font-size:15px; line-height:1.6;
  max-width:44ch; margin:0 auto 14px; opacity:.92;
}
.promo-price{
  font-family:var(--ff-display); color:var(--white); font-size:clamp(32px,8vw,52px);
}
.promo-tagline{
  font-family:var(--ff-body); font-weight:700; text-transform:uppercase; color:var(--white);
  font-size:clamp(13px,2.2vw,16px); letter-spacing:.02em; line-height:1.5; margin:0;
}

@media (min-width:700px){
  .promo-hero-content{ padding-bottom:50px; }
}

/* growing text-shadow on every promo text element (but not the prices),
   spreading out as each piece reveals in — reuses the same .is-visible
   trigger as the scroll-reveal system, just adding a shadow transition */
.promo-title-fill, .promo-title-outline,
.promo-item-name, .promo-item-desc,
.promo-desc, .promo-tagline{
  text-shadow:0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
  transition:text-shadow 1.1s var(--ease-out), opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.promo-title-fill.is-visible, .promo-title-outline.is-visible,
.promo-item-name.is-visible, .promo-item-desc.is-visible,
.promo-desc.is-visible, .promo-tagline.is-visible{
  text-shadow:2px 3px 4px rgba(0,0,0,.9), 4px 7px 18px rgba(0,0,0,.85);
}

/* =========================================================
   CARTA CAROUSEL (homepage) + MENU SECTION PAGES (carta-*.html)
   ========================================================= */
.menu-carousel-section{ background:var(--black); padding:56px 0; }
.menu-carousel-scroll{
  display:flex; gap:16px; overflow-x:auto; overflow-y:visible; padding:10px 5vw 0;
  scroll-snap-type:x mandatory;
  scroll-padding-left:5vw;
  scroll-behavior:smooth;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.menu-carousel-scroll::-webkit-scrollbar{ display:none; }
.menu-carousel-scroll.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.menu-carousel-item{
  flex:0 0 auto; width:min(76vw, 340px); scroll-snap-align:start;
  display:flex; flex-direction:column; gap:14px;
  color:var(--white); text-decoration:none;
  opacity:0;
  transform:translateY(46px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.menu-carousel-item.is-visible{ opacity:1; transform:translateY(0); }
.menu-carousel-photo{
  display:block; width:100%; aspect-ratio:1/1;
  border-radius:20px; border:2px solid var(--white);
  background:var(--red);
  background-size:cover; background-position:center;
  transition:transform .3s var(--ease-out);
}
.menu-carousel-item:hover .menu-carousel-photo{ transform:scale(1.03); }
.menu-carousel-photo--entrantes{ background-image:url(../assets/img/carta-entrantes-hero.jpg); }
.menu-carousel-photo--hamburguesas{ background-image:url(../assets/img/carta-hamburguesas-hero.jpg); }
.menu-carousel-photo--sandwiches{ background-image:url(../assets/img/carta-sandwiches-hero.jpg); }
.menu-carousel-photo--delmar{ background-image:url(../assets/img/carta-delmar-hero.jpg); }
.menu-carousel-photo--papas{ background-image:url(../assets/img/carta-papas-hero.jpg); }
.menu-carousel-photo--perros{ background-image:url(../assets/img/carta-perros-hero.jpg); }
.menu-carousel-photo--baby{ background-image:url(../assets/img/carta-baby-hero.jpg); }
.menu-carousel-photo--refrescar{ background-image:url(../assets/img/carta-refrescar-hero.jpg); }
.menu-carousel-photo--cocteles{ background-image:url(../assets/img/carta-cocteles-hero.jpg); }
.menu-carousel-label{
  font-family:'Playfair Display', var(--ff-body), serif; font-style:italic; font-weight:400;
  text-transform:none; color:var(--white);
  font-size:clamp(17px,4.6vw,22px); line-height:1.25; letter-spacing:0;
}
.menu-carousel-label strong{ font-weight:700; }
.menu-carousel-label span{ color:var(--white); font-style:normal; }

/* ---- individual menu-section pages ---- */
.menu-page{ background:#000; min-height:100vh; }
.menu-page-hero{
  position:relative; width:100%; height:42vh; min-height:260px;
  margin-top:var(--header-h); overflow:hidden;
}
.menu-page-box{ position:absolute; inset:0; background:var(--red); background-size:cover; background-position:center; }
.menu-page-box--entrantes{ background-image:url(../assets/img/carta-entrantes-hero.jpg); }
.menu-page-box--hamburguesas{ background-image:url(../assets/img/carta-hamburguesas-hero.jpg); }
.menu-page-box--sandwiches{ background-image:url(../assets/img/carta-sandwiches-hero.jpg); }
.menu-page-box--delmar{ background-image:url(../assets/img/carta-delmar-hero.jpg); }
.menu-page-box--papas{ background-image:url(../assets/img/carta-papas-hero.jpg); }
.menu-page-box--perros{ background-image:url(../assets/img/carta-perros-hero.jpg); }
.menu-page-box--baby{ background-image:url(../assets/img/carta-baby-hero.jpg); }
.menu-page-box--refrescar{ background-image:url(../assets/img/carta-refrescar-hero.jpg); }
.menu-page-box--cocteles{ background-image:url(../assets/img/carta-cocteles-hero.jpg); }
.menu-page-fade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 70%, #000 100%);
}
.menu-page-title{
  position:absolute; left:6vw; right:6vw; bottom:24px; z-index:2;
  font-family:var(--ff-display); text-transform:uppercase; color:var(--white);
  font-size:clamp(30px,7vw,52px); line-height:1;
}
.menu-page-list{ max-width:680px; margin:0 auto; padding:28px 6vw 80px; background:#000; }
/* the helado hero image is much taller than the carta heroes, so its fade
   needs to hit solid black well before the seam into the price list below —
   otherwise the handoff between image and list reads as a visible cut */
.helado-hero-media .menu-page-fade{
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.92) 70%, #000 88%);
}
/* lay the price list directly over the image, starting right where the
   fade begins turning dark, instead of as a separate block underneath */
.helado-hero-media .menu-page-list{
  position:absolute; left:0; right:0; top:45%; z-index:2;
  padding:0 6vw; background:transparent;
}
.menu-page-item{ padding:11px 0; }
.menu-page-row{
  display:flex; align-items:baseline; gap:10px;
}
.menu-page-name{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--white);
  font-size:clamp(14px,3.4vw,18px); white-space:nowrap; letter-spacing:.01em;
}
.menu-page-dots{
  flex:1 1 auto; border-bottom:3px dotted rgba(247,244,238,.4);
  height:0; margin-bottom:5px; min-width:16px;
}
.menu-page-dots.reveal-line{ transform-origin:left; }
.menu-page-price{
  font-family:var(--ff-display); color:var(--white);
  font-size:clamp(14px,3.4vw,18px); white-space:nowrap;
}
.menu-page-desc{
  margin:6px 0 0; color:rgba(247,244,238,.55);
  font-size:13px; line-height:1.5; max-width:52ch;
}
.menu-page-item--sold-out .menu-page-name{ opacity:.45; }
.menu-page-item--sold-out .menu-page-dots{ opacity:.25; }
.menu-page-item--sold-out .menu-page-price{
  opacity:.7; color:var(--red); text-transform:uppercase; font-size:13px; letter-spacing:.03em;
}
.menu-page-item--sold-out .menu-page-desc{ opacity:.4; }

/* =========================================================
   LEGAL PAGES (privacidad / terminos / cookies)
   ========================================================= */
.legal-page{ background:#000; min-height:100vh; padding:calc(var(--header-h) + 48px) 6vw 90px; }
.legal-content{ max-width:760px; margin:0 auto; }
.legal-title{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--white);
  font-size:clamp(32px,6vw,52px); line-height:1.05; margin:0 0 10px;
}
.legal-updated{ color:var(--gray); font-size:14px; margin:0 0 44px; }
.legal-content h2{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--red);
  font-size:clamp(19px,2.6vw,25px); letter-spacing:.02em; margin:40px 0 14px;
}
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{ color:var(--gray); line-height:1.75; font-size:16px; margin:0 0 16px; }
.legal-content ul{ color:var(--gray); line-height:1.75; font-size:16px; margin:0 0 16px; padding-left:22px; }
.legal-content li{ margin-bottom:6px; }
.legal-content strong{ color:var(--white); }
.legal-content a{ color:var(--white); text-decoration:underline; text-underline-offset:2px; }
.legal-content a:hover{ color:var(--red); }

/* =========================================================
   ACCESSIBILITY — skip-to-content link
   ========================================================= */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--red); color:var(--white);
  padding:14px 22px; font-family:var(--ff-body); font-weight:700;
  text-decoration:none; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; top:0; }