/* ===== Movimiento de Jazzatlán (se carga después de estilos.css) =====
   .js    → el navegador corre JavaScript
   .mueve → hay JavaScript y la persona NO pidió "reducir movimiento":
            solo entonces se activan los efectos ligados al scroll (--p de 0 a 1). */

@keyframes subeLinea { from { transform: translateY(105%); } to { transform: none; } }
@keyframes cinta { to { transform: translateX(-50%); } }
@keyframes rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes parpadeoLogo {
  0%, 10%, 22%, 38% { opacity: .1; }
  6%, 16%, 30%, 100% { opacity: 1; }
}

/* Recorta lo que se sale a lo ancho (cinta inclinada) sin romper las secciones fijas */
main { overflow-x: clip; }

/* ---------- Telón de entrada ---------- */
.telon { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; pointer-events: none; }
html:not(.js) .telon { display: none; }
html.con-telon { overflow: hidden; }
.telon-hoja {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 18%, transparent 82%, rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg, #5A1E1B 0 16px, #7A2E2A 16px 30px, #682521 30px 46px);
  transition: transform 1.15s cubic-bezier(.75,0,.2,1);
}
.telon-hoja.izq { left: 0; box-shadow: inset -30px 0 40px rgba(0,0,0,.45); }
.telon-hoja.der { right: 0; box-shadow: inset 30px 0 40px rgba(0,0,0,.45); }
.telon.abre .izq { transform: translateX(-101%); }
.telon.abre .der { transform: translateX(101%); }
.telon-logo { position: relative; width: min(64vw, 440px); animation: parpadeoLogo .9s steps(1, end) both; filter: drop-shadow(0 0 20px rgba(235,189,98,.6)); transition: opacity .35s; }
.telon.abre .telon-logo { opacity: 0; }

/* ---------- Portada ---------- */
.hero-marco { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-marco .hero-foto { z-index: 0; }
.hero-marco .hero-velo { z-index: 1; }
.hero h1 .linea { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .linea > span { display: inline-block; }
.js .hero h1 .linea > span { animation: subeLinea 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: .2s; }
.js .hero h1 .linea + .linea > span { animation-delay: .34s; }
.js.con-telon .hero h1 .linea > span { animation-delay: 1.35s; }
.js.con-telon .hero h1 .linea + .linea > span { animation-delay: 1.5s; }
.hero-marca, .hero-baja { display: none; }

.mueve .hero-pin { height: 185vh; position: relative; }
.mueve .hero { position: sticky; top: 0; min-height: 0; height: 100svh; }
.mueve .hero-marco {
  clip-path: inset(calc(var(--p, 0) * 15svh) calc(var(--p, 0) * 6vw) calc(var(--p, 0) * 24svh) calc(var(--p, 0) * 6vw) round calc(var(--p, 0) * 30px));
  will-change: clip-path;
}
.mueve .hero-marco .hero-foto { animation: none; transform: scale(calc(1.12 - var(--p, 0) * .12)); }
.mueve .hero-texto { opacity: calc(1 - var(--p, 0) * 2.6); transform: translateY(calc(var(--p, 0) * -70px)); }
.mueve .hero-marca {
  display: block; position: absolute; left: 50%; bottom: 3svh; z-index: 2;
  width: min(90vw, 1100px); pointer-events: none;
  opacity: clamp(0, calc((var(--p, 0) - .28) * 2.6), 1);
  transform: translate(-50%, calc((1 - var(--p, 0)) * 60px)) scale(calc(.82 + var(--p, 0) * .18));
  filter: drop-shadow(0 0 24px rgba(235,189,98,.45));
}
.mueve .hero-baja {
  display: block; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; margin: 0;
  font: 700 12px var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--hueso-2);
  opacity: calc(1 - var(--p, 0) * 6);
}
.hero-baja span { display: inline-block; animation: rebote 1.6s ease-in-out infinite; }

/* ---------- Cinta de géneros ---------- */
.cinta {
  overflow: hidden; background: var(--oro); color: var(--noche);
  padding: 12px 0; transform: rotate(-2deg) scale(1.05); margin: 18px 0 8px; position: relative; z-index: 3;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.cinta-pista { display: flex; align-items: center; gap: 26px; width: max-content; animation: cinta 28s linear infinite; padding-left: 26px; }
.cinta-pista span { font: 800 clamp(1.7rem, 6vw, 3rem)/1 var(--titulos); text-transform: uppercase; white-space: nowrap; }
.cinta-pista i { font-style: normal; font-size: 1.2rem; color: var(--vino); }

/* ---------- Manifiesto con fotos flotantes ---------- */
.manifiesto { position: relative; padding: 90px 0; }
.manifiesto-pin { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 70svh; }
.manifiesto-texto {
  position: relative; z-index: 2; max-width: 980px; margin: 0; padding: 0 var(--gutter); text-align: center;
  font: 800 clamp(2rem, 7.6vw, 4.6rem)/1.02 var(--titulos); text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(20,16,13,.9);
}
.manifiesto-texto span { transition: color .35s ease, text-shadow .35s ease; }
.mueve .manifiesto-texto span { color: rgba(242,232,216,.13); }
.mueve .manifiesto-texto span.on { color: var(--hueso); text-shadow: 0 0 18px rgba(235,189,98,.25), 0 2px 24px rgba(20,16,13,.9); }
.flota { position: absolute; margin: 0; z-index: 1; width: clamp(108px, 30vw, 290px); padding: 7px 7px 22px; background: var(--hueso); border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.6); transform: rotate(var(--r)); opacity: .85; }
.flota img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.f1 { top: 4%;  left: 3%; }
.f2 { top: 9%;  right: 4%; }
.f3 { top: 64%; left: 5%; }
.f4 { top: 58%; right: 3%; }
.f5 { top: 84%; left: 38%; }
.f6 { top: -6%; left: 36%; }
.mueve .manifiesto { height: 260vh; padding: 0; }
.mueve .manifiesto-pin { position: sticky; top: 0; height: 100svh; min-height: 0; }
.mueve .flota { transform: translate3d(0, calc((.5 - var(--p, 0)) * var(--v) * 95svh), 0) rotate(var(--r)); will-change: transform; }

/* ---------- Títulos palabra por palabra ---------- */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pal > span { display: inline-block; transform: translateY(105%); transition: transform .85s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 70ms + 120ms); }
.is-visible .pal > span { transform: none; }

/* ---------- Sedes: en computadora se apilan al bajar ---------- */
.sedes-pila { display: grid; gap: 26px; }
.sede-foto { overflow: hidden; }
.sede-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.sede:hover .sede-foto img { transform: scale(1.05); }
@media (min-width: 960px) {
  .sede { display: grid; grid-template-columns: 1.15fr 1fr; min-height: min(76vh, 620px); box-shadow: 0 -20px 60px rgba(0,0,0,.55); }
  .sede-foto img { height: 100%; aspect-ratio: auto; }
  .sede-cuerpo { padding: 40px 38px; justify-content: center; }
  .sede h3 { font-size: 4.4rem; }
  .mueve .sede { position: sticky; top: calc(84px + var(--i) * 20px); }
  .sedes-pila { gap: 60px; padding-bottom: 40px; }
}

/* ---------- Cocina: galería horizontal ---------- */
.galeria { position: relative; background: var(--noche); }
.galeria-pin { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 90px 0; overflow-x: auto; }
.galeria-cabeza h2 { font-size: clamp(2.6rem, 8vw, 5rem); max-width: 14ch; margin: 0; }
.galeria-cabeza .kicker { margin-bottom: 12px; }
.galeria-pista { display: flex; gap: 18px; padding: 0 var(--gutter); width: max-content; }
.plato { flex: 0 0 auto; position: relative; width: min(76vw, 340px); aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: var(--tarjeta); border: 1px solid var(--laton); }
.plato img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.plato:hover img { transform: scale(1); }
.plato-txt { position: absolute; inset: auto 0 0 0; padding: 80px 18px 20px; background: linear-gradient(transparent, rgba(20,16,13,.94) 55%); }
.plato h3 { font-size: 1.9rem; margin-bottom: 6px; }
.plato p { font-size: .9rem; color: var(--hueso-2); margin: 0; line-height: 1.45; }
.plato-precio { display: inline-block; background: var(--oro); color: var(--noche); font: 800 12px var(--texto); letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; margin-bottom: 10px; }
.plato-cta { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 26px; background: var(--oro); color: var(--noche); text-decoration: none; border-color: var(--oro); }
.plato-cta:hover { color: var(--noche); background: var(--oro-claro); }
.plato-cta-k { font: 800 clamp(2.6rem, 9vw, 3.6rem)/.9 var(--titulos); text-transform: uppercase; }
.plato-cta-t { font: 700 15px var(--texto); letter-spacing: .04em; }
.galeria-barra { display: none; }
.mueve .galeria-pin { position: sticky; top: 0; height: 100svh; padding: 70px 0 40px; overflow: hidden; }
.mueve .galeria-pista { transform: translate3d(calc(var(--p, 0) * var(--dist, 0px) * -1), 0, 0); will-change: transform; }
.mueve .galeria-barra { display: block; width: 180px; height: 3px; background: var(--laton); margin-left: var(--gutter); border-radius: 3px; overflow: hidden; }
.mueve .galeria-barra span { display: block; height: 100%; background: var(--oro); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (min-width: 960px) {
  .plato { width: 30vw; max-width: 400px; }
  .galeria-cabeza { margin-left: 0; }
}

/* ---------- Big Band: parallax ---------- */
.mueve .bigband-foto { transform: translate3d(0, calc((var(--p, .5) - .5) * -18%), 0) scale(1.22); will-change: transform; }

/* ---------- Historia: foto que se descubre y línea que se dibuja ---------- */
.cortina img { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1) .15s; }
.cortina.is-visible img { clip-path: inset(0 0 0 0); }
html:not(.js) .cortina img { clip-path: none; }
.mueve .linea-tiempo { border-left-color: rgba(217,162,59,.18); position: relative; }
.mueve .linea-tiempo::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--oro);
  transform-origin: top; transform: scaleY(clamp(0, calc(var(--p, 0) * 2.2 - .5), 1));
}

/* ---------- Reseñas: cinta que corre sola ---------- */
.resenas .calif { margin-bottom: 34px; }
.resenas-cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.resenas-pista { display: flex; gap: 18px; width: max-content; animation: cinta 38s linear infinite; padding: 6px 0; }
.resenas-cinta:hover .resenas-pista { animation-play-state: paused; }
.resenas-pista blockquote { flex: 0 0 auto; width: min(80vw, 420px); margin: 0; padding: 26px 24px; border: 1px solid var(--laton); border-radius: var(--radio); background: var(--tarjeta); }
.resenas-pista p { font: 700 clamp(1.5rem, 5vw, 1.9rem)/1.1 var(--titulos); text-transform: uppercase; }
.resenas-pista cite { font-style: normal; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--neon); }

/* ---------- Pie con el nombre gigante ---------- */
.pie-marca { width: min(94vw, 1300px); margin: 48px auto 0; }
.pie-marca.is-visible { animation: parpadeoLogo 1.6s steps(1, end) both; filter: drop-shadow(0 0 24px rgba(235,189,98,.4)); }
@media (min-width: 960px) { .pie-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Datos animados (js/datos.js) ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Odómetro: cada dígito es una tira 0-9 que rueda hasta su valor */
.odo { font-variant-numeric: tabular-nums; }
.odo .num { white-space: nowrap; }
.odo { -webkit-user-select: none; user-select: none; }
.dig { position: relative; display: inline-block; line-height: 1.1; clip-path: inset(0 -0.08em); }
.dig .ph { visibility: hidden; }
.dig .tira { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; text-align: center;
  transition: transform 1.5s cubic-bezier(.15,.85,.25,1); transition-delay: calc(var(--k) * 70ms); }
.dig .tira > span { display: block; height: 1.1em; line-height: 1.1; }
.rueda .dig .tira { transform: translateY(calc((var(--d) + 10) * -1.1em)); }

/* Etiquetas que se decodifican */
.decodifica { font-variant-numeric: tabular-nums; }

/* Párrafos palabra por palabra */
.w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(5px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2,.8,.2,1), filter .55s ease;
  transition-delay: calc(var(--w) * 22ms); }
.leido .w { opacity: 1; transform: none; filter: none; }
/* Las palabras importantes se subrayan en dorado después */
[data-pals] strong, [data-pals] em {
  background: linear-gradient(var(--oro), var(--oro)) no-repeat left 92% / 0% 2px;
  transition: background-size .9s cubic-bezier(.2,.8,.2,1) .8s;
}
.leido strong, .leido em { background-size: 100% 2px; }

/* Estrellas una a una */
.estrella { display: inline-block; opacity: .15; transform: scale(.4); }
.brilla .estrella { animation: estrella .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--s) * 130ms + .2s); }
@keyframes estrella { from { opacity: .15; transform: scale(.4) rotate(-40deg); } to { opacity: 1; transform: none; text-shadow: 0 0 12px rgba(217,162,59,.7); } }

/* Barra dorada que crece bajo cada cifra */
.cifras div { position: relative; }
.cifras div::after { content: ""; position: absolute; left: var(--gutter); bottom: 14px; width: 42px; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1) .5s; }
.cifras div.is-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .w, .estrella { opacity: 1; transform: none; filter: none; }
  .cinta-pista, .resenas-pista { animation: none; }
  .resenas-cinta { overflow-x: auto; }
  .pal > span, .cortina img { transform: none; clip-path: none; }
}