/* =========================================================================
   Restaurante Los Tulipanes — rediseño 2026 (v2)
   Identidad: logo (rosa, amarillo, verde), cinta tabasqueña bordada, cabeza
   olmeca, Playfair Display (itálica en títulos) + Manrope. Secciones de color
   pleno como el sitio anterior: rosa, petate, naranja, morado, verde, amarillo.
   ========================================================================= */
:root {
  --papel: #FBF4E6;
  --papel-2: #F4E8D2;
  --blanco: #FFFCF6;
  --tinta: #1D1A16;
  --tinta-2: #4A443C;
  --verde: #0F4D30;
  --verde-osc: #0B3A24;
  --verde-neg: #072519;
  --verde-vivo: #0A6B35;
  --rosa: #D8147D;
  --rosa-osc: #A80E60;
  --rosa-cl: #F7C2DB;
  --naranja: #FF6321;
  --naranja-osc: #B8400E;
  --amarillo: #FFD700;
  --amarillo-2: #FFC936;
  --amarillo-cl: #FFE9A6;
  --morado: #8500B2;
  --morado-osc: #5E0080;
  --wa: #25D366;
  --wa-osc: #128C7E;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radio: 22px;
  --radio-s: 14px;
  --sombra: 0 18px 50px -22px rgba(29, 26, 22, .4);
  --sombra-s: 0 10px 30px -16px rgba(29, 26, 22, .3);
  --trans: .32s cubic-bezier(.22, 1, .36, 1);
  --nav-h: 86px;
  --cinta-h: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); color: var(--tinta); background: var(--papel); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--verde); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.saltar:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }

/* ---------- la cinta tabasqueña: el distintivo (al doble de grueso) ---------- */
.cinta { height: var(--cinta-h); background: url('../img/cinta.jpg') repeat-x center / auto 100%; position: relative; }
.cinta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); translate: -120% 0; opacity: 0; }
.cinta--nav { height: 34px; }
.cinta--div { height: 48px; box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, .35), 0 8px 24px -10px rgba(0, 0, 0, .35); }
.cinta--footer { height: 48px; }
/* se revela del centro hacia los lados con borde suave y luego pasa un brillo (motion.js pone --t y .brilla) */
.m .cinta--div { -webkit-mask: radial-gradient(ellipse 60% 140% at 50% 50%, #000 calc(var(--t, 0) * 100%), transparent calc(var(--t, 0) * 100% + 14%)); mask: radial-gradient(ellipse 60% 140% at 50% 50%, #000 calc(var(--t, 0) * 100%), transparent calc(var(--t, 0) * 100% + 14%)); }
.m .cinta--div.brilla::after { opacity: 1; animation: brillo 1.4s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes brillo { to { translate: 120% 0; } }

/* ---------- textos ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 14px; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-osc); background: #fff; border: 1px solid rgba(216, 20, 125, .22); position: relative; overflow: hidden; }
.eyebrow .i { width: 1.1em; height: 1.1em; color: var(--rosa); }
.eyebrow::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); translate: -120% 0; }
.m .eyebrow.on::after { animation: brillo 1.1s ease .2s; }
.titulo { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(40px, 5.8vw, 72px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 18px; color: var(--verde-osc); text-wrap: balance; }
.sub { font-size: clamp(17px, 1.4vw, 19.5px); color: var(--tinta-2); max-width: 640px; margin: 0 auto; }
.cabecera { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.cabecera--clara .titulo { color: #fff; }
.cabecera--clara .sub { color: rgba(255, 255, 255, .85); }
.cabecera--clara .eyebrow { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }
.cabecera--clara .eyebrow .i { color: var(--amarillo); }
h3 { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.005em; margin: 0 0 8px; line-height: 1.2; }
.cita { margin: 10px auto 0; max-width: 680px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 22px); color: #fff; line-height: 1.5; position: relative; padding-top: 10px; }
.cita .i { width: 34px; height: 34px; color: var(--amarillo); margin: 0 auto 10px; stroke: none; display: block; }
.cita__cierra { rotate: 180deg; margin: 12px auto 0 !important; }
.cita__linea { display: block; width: 72px; height: 3px; margin: 16px auto 0; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--amarillo), transparent); }
.cita p { margin: 0; }
.nota { text-align: center; color: rgba(255, 255, 255, .8); font-size: 14.5px; margin: 26px 0 0; font-style: italic; }
.titulo.dividido .palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .06em .08em; margin: 0 -.06em; }
.titulo.dividido .palabra > span { display: inline-block; }
.m .titulo.dividido .palabra > span { translate: 0 110%; opacity: 0; filter: blur(8px); }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: 15px 26px; border-radius: 999px; font-weight: 800; font-size: 15.5px; letter-spacing: .01em; line-height: 1; white-space: nowrap; border: 2px solid transparent; transition: background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans); }
.btn .i { stroke-width: 2.2; }
.btn--wa { background: var(--wa); color: #073b1f; border-color: var(--wa); box-shadow: 0 12px 28px -12px rgba(18, 140, 126, .6); }
.btn--wa:hover { background: #1fbf5c; border-color: #1fbf5c; }
.btn--wa .i { fill: #073b1f; stroke: none; }
.btn--linea { background: transparent; color: var(--verde-osc); border-color: rgba(15, 77, 48, .35); }
.btn--linea:hover { border-color: var(--verde-osc); background: rgba(15, 77, 48, .06); }
.btn--naranja { background: var(--naranja); color: #fff; border-color: var(--naranja); box-shadow: 0 12px 28px -12px rgba(214, 77, 18, .7); }
.btn--naranja:hover { background: var(--naranja-osc); border-color: var(--naranja-osc); }
.btn--naranja .i { fill: #fff; stroke: none; }
.btn--amarillo { background: var(--amarillo); color: var(--verde-neg); border-color: var(--amarillo); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .4); }
.btn--amarillo:hover { background: #ffe24a; border-color: #ffe24a; }
.btn--amarillo .i { fill: var(--verde-neg); stroke: none; }
.btn--blanco { background: #fff; color: var(--verde-osc); border-color: #fff; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .4); }
.btn--blanco:hover { background: var(--amarillo-cl); border-color: var(--amarillo-cl); }
.btn--blanco .i { fill: var(--wa-osc); stroke: none; }

/* texto blanco sobre el naranja de marca: sombra suave para legibilidad */
.buffet .sub, .buffet .cabecera p { text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.footer { --tinta-2: #4A3416; }

/* ---------- navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; transition: background var(--trans), box-shadow var(--trans), opacity .9s ease, translate .9s cubic-bezier(.22, 1, .36, 1); }
/* durante la historia del hero no hay menú ni flotante: entran al final */
html.hero-sin-menu .nav { opacity: 0; translate: 0 -24px; pointer-events: none; }
html.hero-sin-menu .flotante { opacity: 0 !important; pointer-events: none; }
.nav__in { width: min(1280px, 100% - 40px); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav__logo img { width: 92px; height: auto; transition: width var(--trans); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .14)); }
.menu { display: flex; align-items: center; gap: 2px; }
.menu > a { padding: 10px 12px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--verde-osc); transition: background var(--trans), color var(--trans); }
.menu > a:hover, .menu > a.activo { background: rgba(15, 77, 48, .08); }
.menu > a.activo { color: var(--rosa-osc); }
.menu__cta { margin-left: 8px; padding: 12px 20px; font-size: 14.5px; }
.nav__boton { display: none; width: 48px; height: 48px; border-radius: 14px; align-items: center; justify-content: center; color: var(--verde-osc); background: rgba(255, 255, 255, .8); }
.nav__boton .i { width: 26px; height: 26px; }
.nav:not(.is-scrolled):not(.abierto) .menu > a { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.nav:not(.is-scrolled):not(.abierto) .menu > a:hover { background: rgba(255, 255, 255, .14); }
.nav:not(.is-scrolled):not(.abierto) .nav__boton { background: rgba(255, 255, 255, .9); }
.nav.is-scrolled { background: rgba(251, 244, 230, .88); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 10px 30px -22px rgba(29, 26, 22, .5); }
.nav.is-scrolled .nav__in { height: 70px; }
.nav.is-scrolled .nav__logo img { width: 74px; }

/* ---------- hero: la fachada vacía, la cabeza que cae, los platos que pasan ---------- */
.hero { position: relative; height: 1000vh; background: #2a1a0c; }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; isolation: isolate; background: #2a1a0c; perspective: 1200px; }
.hero__marco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.hero__olmeca { position: absolute; left: 28.4%; top: 48.8%; width: 24.7%; margin: 0; z-index: 2; translate: 0 -130vh; }
.hero__frente { position: absolute; left: 0; width: 100%; z-index: 3; pointer-events: none; }
.hero__frente img { display: block; width: 100%; height: auto; }
.hero__olmeca picture { display: block; }
/* la sombra solo mientras cae: al asentarse la cabeza queda igual que en la foto */
.hero__olmeca img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 24px 30px rgba(40, 20, 0, .55)); transition: filter .6s ease-out; }
.hero.impacto .hero__olmeca img { filter: drop-shadow(0 0 0 rgba(40, 20, 0, 0)); }
.hero__polvo { position: absolute; z-index: 4; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(236, 214, 176, .98), rgba(236, 214, 176, .55) 38%, rgba(236, 214, 176, 0) 68%); filter: blur(5px); opacity: 0; pointer-events: none; transform-origin: 50% 70%; }
.hero__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 10, 2, .5) 0%, rgba(20, 10, 2, 0) 30%, rgba(20, 10, 2, 0) 62%, rgba(20, 10, 2, .6) 100%), linear-gradient(90deg, rgba(20, 10, 2, 0) 50%, rgba(20, 10, 2, .3) 100%); opacity: .2; }
.hero__sombra { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1); background: linear-gradient(90deg, rgba(14, 8, 2, .8) 0%, rgba(14, 8, 2, .66) 28%, rgba(14, 8, 2, .3) 46%, rgba(14, 8, 2, 0) 60%); }
.hero.frase .hero__sombra { opacity: 1; }
.hero__platos { position: absolute; inset: 0; z-index: 4; pointer-events: none; transform-style: preserve-3d; }
.plato { position: absolute; left: 50%; top: 50%; width: min(58vw, 96vh); margin: 0; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; will-change: translate, scale, transform; }
.plato img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 28px 22px rgba(30, 15, 0, .45)); }
.plato__sombra { position: absolute; left: 10%; right: 10%; bottom: -9%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(30, 15, 0, .55), transparent 70%); filter: blur(10px); opacity: 0; }
.hero__nombre { position: absolute; left: 50%; bottom: 8vh; bottom: calc(100lvh - 100svh + 8vh); translate: -50% 16px; z-index: 5; margin: 0; padding: 10px 26px; border-radius: 999px; background: rgba(255, 252, 246, .94); color: var(--verde-osc); font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); white-space: nowrap; opacity: 0; transition: opacity .35s, translate .5s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); }
.hero__nombre.on { opacity: 1; translate: -50% 0; }
/* en escritorio la frase va a la izquierda, sobre los ventanales, para no tapar la cabeza */
.hero__texto { position: absolute; left: 6vw; top: 52%; translate: 0 -50%; z-index: 3; width: min(640px, 46vw); text-align: left; pointer-events: none; }
.hero.frase .hero__texto, html:not(.m) .hero__texto { pointer-events: auto; }
.eyebrow--hero { background: rgba(255, 252, 246, .92); }
.hero__titulo { font-family: var(--serif); font-weight: 800; font-style: normal; font-size: clamp(42px, 4.9vw, 76px); line-height: .98; letter-spacing: -.02em; margin: 0 0 20px; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .55); }
.hero__titulo .linea { display: block; overflow: hidden; padding: 0 .08em; margin: 0 -.08em; }
.hero__titulo .linea > span { display: block; }
.hero__titulo em { font-style: italic; font-weight: 700; color: var(--amarillo); }
.hero__p { max-width: 520px; margin: 0 0 26px; font-size: clamp(16px, 1.3vw, 18.5px); color: rgba(255, 255, 255, .92); text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.hero__botones { display: none; gap: 12px; flex-wrap: wrap; }
/* descenso aéreo cuadro a cuadro (canvas), ligado al scroll */
.hero__cuadros { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.hero__guia { position: absolute; left: 50%; bottom: 22px; bottom: calc(100lvh - 100svh + 22px); translate: -50% 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff; opacity: .8; }
.hero__guia i { width: 2px; height: 42px; background: linear-gradient(var(--amarillo), transparent); border-radius: 2px; overflow: hidden; position: relative; }
.hero__guia i::after { content: ''; position: absolute; inset: 0; background: #fff; animation: guia 1.8s ease-in-out infinite; }
@keyframes guia { from { translate: 0 -100%; } to { translate: 0 100%; } }
/* entrada al cargar: la foto; la frase aparece al final de los platos con desenfoque (BlurFade) */
.m .hero__foto { opacity: 0; }
.m .hero.listo .hero__foto { opacity: 1; transition: opacity 1.2s; }
.m .hero__texto > * { opacity: 0; translate: 0 18px; filter: blur(10px); }
.m .hero__titulo .linea > span { translate: 0 110%; opacity: 0; }
.m .hero.frase .hero__texto > * { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), translate .9s cubic-bezier(.22, 1, .36, 1), filter .9s; }
.m .hero.frase .hero__titulo { opacity: 1; translate: 0 0; filter: none; transition: none; }
.m .hero.frase .hero__titulo .linea > span { translate: 0 0; opacity: 1; transition: translate 1.05s cubic-bezier(.22, 1, .36, 1) .45s, opacity .6s .45s; }
.m .hero.frase .hero__titulo .linea:nth-child(2) > span { transition-delay: .6s; }
.m .hero.frase .eyebrow--hero { transition-delay: .3s; }
.m .hero.frase .hero__p { transition-delay: .8s; }
.m .hero.frase .hero__botones { transition-delay: .95s; }
.m .hero__guia { opacity: 0; }
.m .hero.listo .hero__guia { opacity: .8; transition: opacity 1s 1.4s; }
/* impacto de la cabeza (clase que pone hero.js al terminar la caída) */
.hero.impacto .hero__olmeca img { animation: aplasta .75s cubic-bezier(.22, 1, .36, 1); }
.hero.impacto .hero__polvo { animation: polvo 1.4s ease-out forwards; }
.hero.impacto .hero__marco { animation: sacude .5s ease-out; }
@keyframes aplasta { 0% { scale: 1.1 .84; } 35% { scale: .95 1.06; } 65% { scale: 1.03 .98; } 100% { scale: 1 1; } }
@keyframes polvo { 0% { opacity: 0; scale: .3 .4; } 12% { opacity: .95; scale: .9 .8; } 45% { opacity: .75; scale: 1.5 1.1; translate: 0 -6%; } 100% { opacity: 0; scale: 2.2 1.5; translate: 0 -28%; } }
@keyframes sacude { 0%, 100% { translate: 0 0; } 18% { translate: 0 11px; } 42% { translate: 0 -6px; } 68% { translate: 0 3px; } }
html:not(.m) .plato { display: none; }
html:not(.m) .hero__olmeca { translate: 0 0; }
html:not(.m) .hero__texto > *, html:not(.m) .hero__titulo .linea > span { opacity: 1; translate: 0 0; filter: none; }

/* ---------- tarjetas con inclinación y luz que sigue al puntero (Tilt Card / Spotlight de 21st.dev) ---------- */
.tilt { transition: transform .12s linear, box-shadow .4s var(--trans); }
.tilt::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 3; }
.tilt:hover::before { opacity: 1; }
.tilt.celda::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .3), transparent 60%); }
.turno, .promo, .platillo, .mapa-card, .sucursal, .sello { position: relative; }

/* ---------- secciones ---------- */
.seccion { position: relative; padding: 110px 0; overflow-x: clip; }
.seccion .cinta--div { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- sucursales (rosa) ---------- */
.sucursales { background: var(--rosa); color: #fff; padding-top: 100px; padding-bottom: 150px; }
.petalos { position: relative; height: 0; }
.petalos img { position: absolute; top: -20px; left: var(--x); width: 54px; opacity: 0; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.sucursales__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; perspective: 1400px; max-width: 1000px; margin: 0 auto; }
.sucursal { position: relative; background: var(--blanco); color: var(--tinta); border-radius: var(--radio); padding: 34px 34px 30px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); border: 3px solid var(--amarillo); transform-style: preserve-3d; }
.sucursal h3 { font-size: 30px; color: var(--naranja-osc); margin-bottom: 10px; }
.sucursal__dir { color: var(--tinta-2); margin: 0 0 12px; font-size: 15.5px; }
.sucursal__tel { display: inline-flex; align-items: center; gap: .5em; font-weight: 800; font-size: 20px; color: var(--verde-osc); margin: 0 0 18px; }
.sucursal__tel .i { color: var(--naranja); }
.sucursal .btn { width: 100%; }
.pin { position: absolute; right: 26px; top: -30px; width: 56px; height: 56px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--rosa); display: grid; place-items: center; box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .5); border: 3px solid #fff; }
.pin .i { rotate: 45deg; color: #fff; width: 26px; height: 26px; }
.pin--chico { position: static; width: 46px; height: 46px; flex: none; }
.pin--chico .i { width: 22px; height: 22px; }
.horario { margin: 36px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; width: fit-content; padding: 20px 34px; border-radius: 999px; }
.horario > div { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; }
.horario .i { grid-row: span 2; width: 28px; height: 28px; }
.horario small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; opacity: .8; }
.horario strong { font-size: 19px; font-weight: 800; }
.horario--naranja { background: var(--naranja); color: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.horario--naranja .i { color: var(--amarillo); }
.horario--claro { background: var(--blanco); color: var(--verde-osc); box-shadow: var(--sombra); }
.horario--claro .i { color: var(--naranja); }

/* ---------- historia (petate) ---------- */
.tradicion { background: #5a3a1e url('../img/petate.jpg') center / 900px repeat; color: #fff; }
.tradicion::before { content: ''; position: absolute; inset: 0; background: rgba(60, 35, 12, .55); pointer-events: none; }
.tradicion .wrap { position: relative; }
.tradicion .eyebrow { color: var(--naranja); background: rgba(255, 255, 255, .95); border-color: transparent; }
.tradicion .titulo { color: var(--naranja); }
.mesa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; perspective: 1400px; }
.platillo { background: var(--blanco); color: var(--tinta); border-radius: var(--radio); padding: 20px 22px 26px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); transform-style: preserve-3d; }
.platillo__foto { aspect-ratio: 1; border-radius: 16px; overflow: hidden; margin-bottom: 16px; background: #fff; }
.platillo__foto img { width: 100%; height: 100%; object-fit: cover; }
.platillo h3 { font-size: 24px; color: var(--naranja-osc); }
.platillo p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.platillo--destino { outline: 3px solid var(--amarillo); outline-offset: -3px; }

/* ---------- buffet (naranja) ---------- */
.buffet { background: var(--naranja); color: #fff; padding-bottom: 150px; }
.buffet .eyebrow { color: var(--naranja-osc); background: #fff; }
.turnos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; perspective: 1400px; }
.turno { background: var(--blanco); color: var(--tinta); border-radius: var(--radio); overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); transform-style: preserve-3d; position: relative; transition: translate .5s var(--trans), box-shadow .5s var(--trans); }
.turno:hover { translate: 0 -8px; box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .7); }
.turno__foto { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.turno__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--trans); }
.turno:hover .turno__foto img { scale: 1.06; }
.turno__info { padding: 22px 24px 26px; position: relative; }
.precio { display: inline-grid; place-items: center; min-width: 78px; height: 78px; padding: 0 12px; border-radius: 999px; background: var(--amarillo); color: var(--verde-neg); font-weight: 800; font-size: 25px; letter-spacing: -.02em; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.precio--rosa { background: var(--rosa); color: #fff; }
.turno .precio { position: absolute; right: 20px; top: -39px; rotate: -6deg; }
.turno h3 { font-size: 25px; color: var(--naranja-osc); margin-top: 10px; }
.turno__horario { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 10px; color: var(--rosa-osc); font-weight: 700; font-size: 14px; }
.turno p:last-child { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.buffet .horario--claro { margin-top: 48px; }

/* ---------- promociones (morado) ---------- */
.promos { background: var(--morado); color: #fff; }
.promos .eyebrow { color: var(--morado-osc); background: #fff; }
.promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; perspective: 1400px; }
.promo { background: var(--blanco); color: var(--tinta); border-radius: var(--radio); overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); transform-style: preserve-3d; display: flex; flex-direction: column; }
.promo__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.promo__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: scale .8s var(--trans); }
.promo:hover .promo__foto img { scale: 1.05; }
.promo__foto .precio { position: absolute; right: 16px; top: 16px; rotate: -6deg; }
.precio--gratis { background: var(--amarillo); color: var(--rosa-osc); font-family: var(--sans); font-style: italic; font-weight: 900; font-size: 20px; letter-spacing: .02em; display: grid; place-items: center; }
.promo__info { padding: 22px 24px 26px; }
.promo h3 { font-size: 26px; color: var(--naranja-osc); }
.promo__cuando { color: var(--rosa); font-style: italic; font-weight: 600; font-size: 15px; margin: 0 0 8px; }
.promo p:last-child { margin: 0; color: var(--tinta-2); font-size: 15.5px; }

/* ---------- eventos (verde) ---------- */
.eventos { background: var(--verde-vivo); color: #fff; padding-top: 150px; }
.guirnalda { position: absolute; left: 0; top: 0; width: 100%; height: 160px; overflow: visible; }
.guirnalda__hilo { fill: none; stroke: var(--amarillo); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); }
.guirnalda__banderas .bandera { transform-box: fill-box; transform-origin: 50% 0; will-change: transform; }
.eventos__in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.eventos__media { position: relative; padding-bottom: 12%; }
.eventos__media > img:first-child { width: 100%; aspect-ratio: 4 / 3; max-height: 62vh; object-fit: cover; object-position: 50% 72%; border-radius: 20px; border: 6px solid var(--blanco); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.eventos__fiesta { position: absolute; right: -6%; bottom: -16%; width: 60%; border-radius: 18px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); border: 6px solid var(--blanco); rotate: 4deg; }
.eventos__texto { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.eventos__texto .titulo { margin-bottom: 10px; }
.eventos .eyebrow { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; overflow: visible; }
.eventos .eyebrow::after, .kids__texto .eyebrow::after { display: none; }
.eventos .titulo { color: #fff; text-align: left; }
.eventos .sub { color: var(--amarillo); margin: 0 0 16px; font-family: var(--serif); font-style: italic; }
.lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.lista li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.lista .i { color: var(--verde-neg); width: 26px; height: 26px; padding: 4px; background: var(--amarillo); border-radius: 50%; stroke-width: 3; }
.eventos__texto > p { color: rgba(255, 255, 255, .85); }

/* ---------- área infantil: pantalla fija con dos sucursales ---------- */
.kids { position: relative; height: 240vh; background: var(--verde-neg); }
.kids__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.kids__slide { position: absolute; inset: 0; margin: 0; }
.kids__slide > img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.kids__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 37, 25, .78) 0%, rgba(7, 37, 25, .35) 55%, rgba(7, 37, 25, .1) 100%); }
.kids__slide--2 { opacity: 0; }
.kids__texto { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; width: min(1200px, 100% - 48px); margin-inline: auto; z-index: 2; color: #fff; max-width: 560px; margin-left: max(24px, calc((100% - 1200px) / 2)); }
.kids__texto .eyebrow { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; overflow: visible; }
.kids__texto .titulo { color: #fff; font-size: clamp(40px, 6vw, 72px); }
.kids__texto .titulo .linea { display: block; overflow: hidden; padding: 0 .06em; margin: 0 -.06em; }
.kids__texto .titulo .linea > span { display: block; }
.kids__texto > p { font-size: 18px; color: rgba(255, 255, 255, .9); max-width: 520px; }
.m .kids__texto > * { opacity: 0; translate: 0 20px; }
.m .kids__texto .titulo .linea > span { translate: 0 110%; }
.m .kids__slide.activa .kids__texto > * { opacity: 1; translate: 0 0; transition: opacity .8s, translate .8s cubic-bezier(.22, 1, .36, 1); }
.m .kids__slide.activa .kids__texto .titulo { transition: opacity .1s; }
.m .kids__slide.activa .kids__texto .titulo .linea > span { translate: 0 0; transition: translate .9s cubic-bezier(.22, 1, .36, 1) .15s; }
.m .kids__slide.activa .kids__texto .titulo .linea:nth-child(2) > span { transition-delay: .28s; }
.m .kids__slide.activa .kids__texto > p:last-child { transition-delay: .45s; }
.kids__puntos { position: absolute; right: 28px; top: 50%; translate: 0 -50%; display: grid; gap: 10px; z-index: 3; }
.kids__puntos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background .3s, scale .3s; }
.kids__puntos i.on { background: var(--amarillo); scale: 1.3; }
.kids__guia { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff; opacity: .7; }
.kids__guia i { width: 2px; height: 36px; background: linear-gradient(var(--amarillo), transparent); border-radius: 2px; overflow: hidden; position: relative; }
.kids__guia i::after { content: ''; position: absolute; inset: 0; background: #fff; animation: guia 1.8s ease-in-out infinite; }
.bola { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; margin-left: .3em; background: radial-gradient(circle at 32% 30%, #fff 0 8%, var(--rosa) 10% 55%, var(--rosa-osc) 100%); box-shadow: 0 8px 16px -6px rgba(168, 14, 96, .6); }
.bola--slot { opacity: 0; }
.bola--slot.llego { opacity: 1; animation: rebote .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rebote { 0% { translate: 0 -40px; scale: .6; } 60% { translate: 0 6px; scale: 1.1 .9; } 100% { translate: 0 0; scale: 1; } }

/* ---------- mapas (amarillo) ---------- */
.mapas { background: var(--amarillo-2); padding-bottom: 150px; }
.mapas .eyebrow { background: var(--verde-osc); color: #fff; border-color: transparent; }
.mapas .eyebrow .i { color: var(--amarillo); }
.mapas__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; perspective: 1400px; }
.mapa-card { background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45); transform-style: preserve-3d; }
.mapa { aspect-ratio: 16 / 9; background: var(--papel-2); }
.mapa iframe { width: 100%; height: 100%; border: 0; }
.mapa-card__info { display: flex; align-items: center; gap: 16px; padding: 20px 22px; flex-wrap: wrap; }
.mapa-card__info > div { flex: 1; min-width: 200px; }
.mapa-card h3 { font-size: 24px; color: var(--verde-osc); margin: 0 0 2px; }
.mapa-card p { margin: 0; color: var(--tinta-2); font-size: 14.5px; }
.mapa-card .btn { padding: 12px 18px; font-size: 14px; }

/* ---------- reseñas (crema, tarjetas de colores) ---------- */
.resenas { background: var(--papel); padding-bottom: 100px; }
.resenas__sellos { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 44px; }
.sello { display: flex; align-items: center; gap: 16px; padding: 16px 24px 16px 18px; border-radius: 18px; background: var(--blanco); border: 1px solid rgba(29, 26, 22, .08); box-shadow: var(--sombra-s); min-width: 280px; }
.sello__g { width: 52px; height: 52px; border-radius: 14px; background: #fff; color: #4285F4; font-weight: 800; font-size: 30px; display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .3); }
.sello__num { font-size: 28px; font-weight: 800; line-height: 1; display: block; color: var(--verde-osc); }
.estrellas { display: inline-flex; gap: 2px; margin: 4px 0; }
.estrellas .i { width: 18px; height: 18px; color: var(--amarillo-2); stroke: none; }
.sello small { display: block; font-size: 13px; color: var(--tinta-2); }
.sello--ta { transition: box-shadow var(--trans); }
.sello--ta:hover { box-shadow: var(--sombra); }
.sello--ta strong { font-size: 20px; display: block; color: var(--verde-osc); }
.sello--ta small { display: inline-flex; align-items: center; gap: .4em; }
.sello__ta { width: 52px; height: 52px; border-radius: 50%; background: #34E0A1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sello__ta i { width: 14px; height: 14px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 3px #34E0A1, inset 0 0 0 6px #000; }
.marquesina { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: 16px 0; }
.marquesina__pista { display: flex; gap: 22px; width: max-content; padding: 10px 0; animation: marquesina 60s linear infinite; }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
@keyframes marquesina { to { translate: -50% 0; } }
.resena { width: 340px; flex: none; border-radius: 20px; padding: 24px 26px; color: var(--tinta); box-shadow: var(--sombra-s); rotate: -1.5deg; }
.resena:nth-child(even) { rotate: 1.5deg; translate: 0 10px; }
.resena.t1 { background: var(--rosa-cl); }
.resena.t2 { background: var(--amarillo-cl); }
.resena.t3 { background: #CDEBD6; }
.resena.t4 { background: #FFD5C0; }
.resena__estrellas { color: var(--naranja-osc); letter-spacing: .1em; font-size: 15px; }
.resena p { margin: 10px 0 16px; font-size: 15.5px; line-height: 1.55; font-family: var(--serif); font-style: italic; }
.resena footer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
.resena footer span { opacity: .65; }

/* ---------- galería (rosa) ---------- */
.galeria { background: var(--rosa); color: #fff; }
.galeria .eyebrow { background: #fff; color: var(--rosa-osc); }
.grid-galeria { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; perspective: 1400px; }
.celda { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); position: relative; transform-style: preserve-3d; background: var(--rosa-osc); }
.celda img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--trans); }
.celda:hover img { scale: 1.08; }
.celda::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(7, 37, 25, .35)); opacity: 0; transition: opacity var(--trans); }
.celda:hover::after { opacity: 1; }

/* ---------- footer: banda de reserva + verde profundo ---------- */
.footer { position: relative; background: #FFF7CC; color: var(--tinta-2); overflow: hidden; }
.footer__banda { background: linear-gradient(120deg, var(--naranja) 0%, var(--rosa) 60%, var(--morado) 130%); color: #fff; padding: 80px 0; }
.footer__cta { display: grid; grid-template-columns: 200px 1fr auto; gap: 40px; align-items: center; }
.footer__logo-blanco { width: 200px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .25)); }
.footer__cta .titulo { color: #fff; font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 10px; }
.footer__cta p { margin: 0; color: rgba(255, 255, 255, .9); max-width: 520px; }
.footer__botones { display: grid; gap: 12px; }
.footer__marca-agua { position: absolute; right: -40px; bottom: 40px; width: 420px; opacity: .1; pointer-events: none; }
.footer__in { position: relative; display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 40px; padding: 64px 0 40px; }
.footer__marca img { width: 130px; }
.footer__nombre { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--naranja-osc); margin: 14px 0 6px; }
.footer__marca p { margin: 0 0 14px; max-width: 360px; font-size: 15.5px; }
.redes { display: flex; gap: 10px; }
.redes a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(214, 77, 18, .25); color: var(--naranja-osc); transition: background var(--trans), border-color var(--trans); }
.redes a:hover { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.footer__t { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--naranja-osc); margin: 0 0 14px; }
.footer__nav { display: grid; align-content: start; gap: 6px; }
.footer__nav a { font-size: 15.5px; width: fit-content; transition: color var(--trans); }
.footer__nav a:hover { color: var(--naranja-osc); }
.footer__reserva p { margin: 0 0 12px; display: grid; }
.footer__reserva small { font-size: 12.5px; opacity: .65; }
.footer__reserva a { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: var(--verde-osc); font-size: 17px; }
.footer__reserva a .i { color: var(--naranja); }
.footer__barra { border-top: 1px solid rgba(214, 77, 18, .18); padding: 16px 0; font-size: 13.5px; position: relative; }
.footer__barra .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__barra a { color: var(--naranja-osc); font-weight: 700; }
.m .footer [data-f] { opacity: 0; translate: 0 18px; filter: blur(6px); }
.m .footer.on [data-f] { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .8s, translate .8s cubic-bezier(.22, 1, .36, 1), filter .8s; transition-delay: calc(.2s + var(--i, 0) * .11s); }

/* ---------- WhatsApp flotante ---------- */
.flotante { position: fixed; right: 18px; bottom: 18px; z-index: 35; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--wa); color: #073b1f; font-weight: 800; box-shadow: 0 16px 34px -12px rgba(18, 140, 126, .7); opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .4s, translate .4s cubic-bezier(.22, 1, .36, 1); }
.flotante .i { width: 26px; height: 26px; fill: #073b1f; stroke: none; }
.flotante.visible { opacity: 1; translate: 0 0; pointer-events: auto; }

/* ---------- modal de reserva ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__fondo { position: absolute; inset: 0; background: rgba(7, 37, 25, .6); backdrop-filter: blur(6px); animation: aparecer .3s; }
.modal__caja { position: relative; width: min(560px, 100%); background: var(--blanco); border-radius: 26px; padding: 30px 30px 26px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); animation: subir .45s cubic-bezier(.22, 1, .36, 1); }
.modal__x { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--papel-2); }
.modal h3 { font-size: 30px; color: var(--verde-osc); margin: 4px 0 20px; }
.modal__opciones { display: grid; gap: 12px; }
.opcion { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 16px; padding: 10px; border-radius: 18px; border: 1.5px solid rgba(29, 26, 22, .1); transition: border-color var(--trans), background var(--trans), translate var(--trans); }
.opcion:hover { border-color: var(--wa); background: rgba(37, 211, 102, .08); translate: 2px 0; }
.opcion img { width: 84px; height: 64px; object-fit: cover; border-radius: 12px; }
.opcion strong { display: block; font-size: 18px; color: var(--verde-osc); }
.opcion small { color: var(--tinta-2); }
.opcion .i { width: 30px; height: 30px; fill: var(--wa-osc); stroke: none; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; translate: 0 24px; scale: .97; } }

/* ---------- visor de galería ---------- */
.visor { position: fixed; inset: 0; z-index: 70; background: rgba(7, 37, 25, .94); display: grid; place-items: center; padding: 60px 70px; animation: aparecer .25s; }
.visor[hidden] { display: none; }
.visor figure { margin: 0; max-width: 100%; max-height: 100%; display: grid; justify-items: center; gap: 10px; }
.visor img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); object-fit: contain; }
.visor figcaption { color: rgba(255, 255, 255, .8); font-size: 14px; }
.visor__x, .visor__nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; transition: background var(--trans); }
.visor__x:hover, .visor__nav:hover { background: var(--rosa); }
.visor__x { right: 18px; top: 18px; }
.visor__nav { top: 50%; translate: 0 -50%; }
.visor__nav--prev { left: 14px; rotate: 180deg; }
.visor__nav--next { right: 14px; }

/* ---------- viajeros ---------- */
.viajero { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; will-change: translate, scale; visibility: hidden; margin: 0; }
.viajero img { width: 100%; height: auto; filter: drop-shadow(0 30px 28px rgba(60, 30, 10, .35)); }
.viajero--chip { display: grid; place-items: center; }
.viajero--chip .precio { transform-style: preserve-3d; }
.viajero--bola { border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 8%, var(--rosa) 10% 55%, var(--rosa-osc) 100%); box-shadow: 0 14px 24px -8px rgba(168, 14, 96, .6); }

/* ---------- barra de avance ---------- */
.progreso { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--rosa), var(--naranja), var(--amarillo)); transform-origin: left; scale: 0 1; z-index: 50; pointer-events: none; }

/* ---------- estados iniciales de la coreografía ---------- */
.m [data-m="up"], .m [data-m="fade"], .m [data-m="pop"], .m [data-m="tarjeta"], .m [data-m="celda"], .m [data-m="encender"], .m [data-m="abrir"], .m [data-m="caer"] { opacity: 0; }
html:not(.m) .guirnalda__hilo { stroke-dashoffset: 0; }
html:not(.m) .bola--slot { opacity: 1; }
html:not(.m) .kids__slide--2 { opacity: 1; }
html:not(.m) .kids { height: auto; }
html:not(.m) .kids__stage { position: relative; height: auto; display: grid; }
html:not(.m) .kids__slide { position: relative; height: 70vh; min-height: 480px; }

/* =========================================================================
   Responsivo
   ========================================================================= */
@media (max-width: 1100px) {
  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eventos__in { grid-template-columns: 1fr; }
  .eventos__texto { grid-template-columns: 1.1fr .9fr; gap: 40px; }
  .eventos__media > img:first-child { aspect-ratio: 16 / 9; max-height: none; }
  .menu > a { white-space: nowrap; padding: 10px 8px; font-size: 13.5px; }
  .menu__cta { padding: 11px 16px; font-size: 13.5px; }
  .mesa, .turnos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turno--b, .turno--c { margin-top: 0; }
  .grid-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__in { grid-template-columns: 1fr 1fr; }
  .footer__cta { grid-template-columns: 160px 1fr; }
  .footer__botones { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --nav-h: 74px; --cinta-h: 36px; }
  .menu { position: fixed; inset: 0; background: var(--papel); flex-direction: column; justify-content: center; gap: 4px; padding: 90px 24px 40px; opacity: 0; pointer-events: none; translate: 0 -10px; transition: opacity .3s, translate .4s cubic-bezier(.22, 1, .36, 1); z-index: -1; }
  .menu > a { font-size: 23px; font-family: var(--serif); font-style: italic; font-weight: 600; padding: 8px 18px; }
  .menu__cta { margin: 16px 0 0; font-size: 16px; padding: 16px 26px; }
  .nav.abierto .menu { opacity: 1; pointer-events: auto; translate: 0 0; }
  .nav.abierto { background: var(--papel); }
  .nav__boton { display: grid; }
  .eventos__texto { grid-template-columns: 1fr; gap: 24px; }
  .eventos__fiesta { right: 0; bottom: -8%; width: 64%; }
  .eventos__media { padding-bottom: 16%; }
  .sucursales__grid, .mapas__grid { grid-template-columns: 1fr; }
  .kids__texto { max-width: none; margin-left: 24px; margin-right: 24px; width: auto; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { width: min(1200px, 100% - 32px); }
  .seccion { padding: 76px 0; }
  .cabecera { margin-bottom: 32px; }
  .cinta--div { height: 36px; } .cinta--nav { height: 28px; } .cinta--footer { height: 36px; }
  .hero { height: 900vh; }
  .hero__texto { left: 20px; width: calc(100% - 40px); top: 50%; translate: 0 -50%; text-align: center; }
  .hero__sombra { background: linear-gradient(180deg, rgba(14, 8, 2, .1) 0%, rgba(14, 8, 2, .62) 24%, rgba(14, 8, 2, .66) 50%, rgba(14, 8, 2, .55) 76%, rgba(14, 8, 2, .15) 100%); }
  .hero__titulo { font-size: clamp(40px, 12vw, 58px); }
  .titulo { font-size: clamp(40px, 10.5vw, 48px); }
  .hero__p { font-size: 15px; margin: 0 auto 18px; }
  .hero__botones { display: flex; justify-content: center; }
  .hero__botones .btn { padding: 13px 18px; font-size: 14px; }
  .plato { width: 110vw; top: 52%; }
  .hero__nombre { font-size: 20px; bottom: 9vh; bottom: calc(100lvh - 100svh + 9vh); }
  .mesa, .turnos, .promo-grid { grid-template-columns: 1fr; gap: 20px; }
  .promo--cumple .promo__foto { aspect-ratio: 4 / 3; }
  .platillo__foto { aspect-ratio: 5 / 4; }
  .sucursal { padding: 28px 22px 24px; }
  .horario { width: 100%; padding: 18px 22px; border-radius: 24px; justify-content: space-between; gap: 14px 20px; }
  .horario .btn { width: 100%; }
  .eventos { padding-top: 110px; }
  .guirnalda { height: 110px; }
  .kids { height: 200vh; }
  .kids__texto .titulo { font-size: clamp(36px, 10vw, 48px); }
  .kids__puntos { right: 14px; }
  .petalos img { width: 40px; }
  .sello { min-width: 0; width: 100%; }
  .resena { width: 290px; }
  .grid-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .footer__banda { padding: 60px 0; }
  .footer__cta { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .footer__logo-blanco { width: 150px; margin: 0 auto; }
  .footer__botones { grid-template-columns: 1fr; }
  .footer__botones .btn { width: 100%; }
  .footer__in { grid-template-columns: 1fr; gap: 32px; padding: 50px 0 30px; }
  .footer__marca-agua { width: 260px; }
  .flotante span { display: none; }
  .flotante { padding: 14px; }
  .visor { padding: 60px 12px; }
  .visor__nav { display: none; }
  .modal__caja { padding: 24px 18px 18px; }
  .modal h3 { font-size: 25px; }
  .opcion { grid-template-columns: 64px 1fr auto; gap: 12px; }
  .opcion img { width: 64px; height: 52px; }
}
@media (hover: none) { .plato figcaption { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .plato img, .hero__guia i::after, .kids__guia i::after, .marquesina__pista { animation: none !important; }
  .marquesina { -webkit-mask: none; mask: none; }
  .marquesina__pista { flex-wrap: wrap; width: auto; justify-content: center; }
  .celda img, .promo__foto img, .turno__foto img { transition: none; }
}