/* ===== Página de la carta ===== */

.carta-hero { padding: 130px 0 40px; }
.carta-hero h1 { font-size: clamp(3.2rem, 14vw, 8rem); margin-bottom: 22px; }
.carta-hero h1 em { font-style: normal; color: var(--oro); text-shadow: 0 0 30px rgba(217,162,59,.45); }
.carta-hero h1 .linea { display: block; overflow: hidden; padding-bottom: .04em; }
.carta-hero h1 .linea > span { display: inline-block; }
.js .carta-hero h1 .linea > span { animation: subeLinea 1s cubic-bezier(.2,.8,.2,1) .15s both; }
.js .carta-hero h1 .linea + .linea > span { animation-delay: .3s; }
.carta-intro { font-size: 1.1rem; max-width: 56ch; }
.carta-nota { color: var(--hueso-2); font-size: .9rem; }

/* Navegación de categorías: chips que se quedan arriba */
.carta-nav {
  position: sticky; top: 64px; z-index: 30;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 12px var(--gutter); background: rgba(20,16,13,.94); border-block: 1px solid var(--laton);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.carta-nav::-webkit-scrollbar { display: none; }
.carta-nav a {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--laton);
  color: var(--hueso); text-decoration: none; font: 700 13px var(--texto); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.carta-nav a[aria-current="true"] { background: var(--oro); color: var(--noche); border-color: var(--oro); }
.pag-carta .barra { background: rgba(20,16,13,.96); }

/* Categoría */
.cat { padding: clamp(56px, 10vw, 110px) 0; border-bottom: 1px solid var(--laton); scroll-margin-top: 120px; }
.cat:nth-of-type(even) { background: var(--piedra); }
.cat-grid { display: grid; gap: 34px; }
.cat-anim { display: grid; gap: 10px; align-content: start; }
.armado {
  width: min(100%, 420px); margin: 0 auto; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(217,162,59,.16), rgba(217,162,59,0) 62%);
  display: grid; place-items: center;
}
.armado svg { width: 92%; height: auto; overflow: visible; }
.armado-pie { text-align: center; color: var(--hueso-2); font-size: .92rem; margin: 0; }
.armado-pie strong { color: var(--hueso); }
.otra-vez {
  margin-left: 6px; background: none; border: 1px solid var(--laton); color: var(--oro-claro);
  border-radius: 999px; padding: 4px 10px; font: 700 12px var(--texto); cursor: pointer; min-height: 32px;
}
.otra-vez:hover { border-color: var(--oro); }
.cat-lista h2 { font-size: clamp(2.6rem, 9vw, 4.6rem); margin-bottom: 8px; }
.cat-sub { color: var(--neon); font: 700 13px var(--texto); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.cat-foto { margin: 26px 0 0; border-radius: var(--radio); overflow: hidden; }
.cat-foto img { width: 100%; max-height: 420px; object-fit: cover; }
.cat-anim-foto .cat-foto { margin: 0; }

/* Platillos */
.items { list-style: none; padding: 0; margin: 0; display: grid; }
.item { padding: 14px 0; border-bottom: 1px dashed var(--laton); }
.item-cab { display: flex; align-items: baseline; gap: 10px; }
.item h3 { font-size: clamp(1.35rem, 5vw, 1.65rem); letter-spacing: .02em; }
.puntos { flex: 1; border-bottom: 2px dotted rgba(184,153,90,.45); transform: translateY(-5px); min-width: 16px; }
.item-precio { font: 800 1.25rem var(--titulos); color: var(--oro); white-space: nowrap; }
.item p { margin: 5px 0 0; color: var(--hueso-2); font-size: .95rem; line-height: 1.5; }
.items-2 { column-gap: 32px; }

/* Entrada de cada platillo al bajar */
.js .item { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--n, 0) * 45ms); }
.js .item.is-visible { opacity: 1; transform: none; }

.carta-corte {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px;
  padding: 34px var(--gutter); background: var(--oro); color: var(--noche);
  font: 800 clamp(1.6rem, 6vw, 3rem)/1 var(--titulos); text-transform: uppercase;
}
.carta-corte i { font-style: normal; font-size: 1.1rem; color: var(--vino); }

.carta-final { padding: clamp(80px, 14vw, 150px) 0; text-align: center; }
.carta-final h2 { font-size: clamp(2.8rem, 11vw, 6rem); margin-bottom: 16px; }
.carta-final .hero-acciones { justify-content: center; }

@media (min-width: 640px) {
  .items-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .carta-nav { justify-content: center; flex-wrap: wrap; top: 72px; }
  .cat-grid { grid-template-columns: minmax(320px, 1fr) 1.2fr; gap: 72px; align-items: start; }
  .cat-anim { position: sticky; top: 190px; }
  .cat:nth-of-type(even) .cat-anim { order: 2; }
}

/* ===== Animaciones de armado =====
   Cada pieza (.pz) tiene un tipo de movimiento (a-*) y un retraso (--t).
   Se disparan cuando el contenedor recibe la clase .armar (al llegar a la sección). */
.armado .pz { transform-box: fill-box; transform-origin: center; }
.js .armado:not(.armar) .pz { opacity: 0; }
.a-dibuja { stroke-dasharray: 1; stroke-dashoffset: 0; }
.a-chorro { transform-origin: top; }
.a-crece-y { transform-origin: bottom; }

.armar .a-cae      { animation: cae .75s cubic-bezier(.3,.7,.3,1) var(--t, 0s) both; }
.armar .a-crece    { animation: crece .55s cubic-bezier(.3,1.5,.5,1) var(--t, 0s) both; }
.armar .a-crece-y  { animation: creceY .6s cubic-bezier(.3,1.3,.5,1) var(--t, 0s) both; }
.armar .a-esparce  { animation: esparce .8s cubic-bezier(.2,.8,.2,1) var(--t, 0s) both; }
.armar .a-dibuja   { animation: dibuja .9s ease-in-out var(--t, 0s) both; }
.armar .a-dibuja.lento { animation-duration: 1.3s; }
.armar .a-sube     { animation: sube 1.25s cubic-bezier(.3,.6,.3,1) var(--t, 0s) both; }
.armar .a-sube.largo { animation-duration: 1.5s; }
.armar .a-chorro   { animation: chorro 1.3s ease-in-out var(--t, 0s) both; }
.armar .a-chorro.largo { animation-duration: 1.6s; }
.armar .a-alza     { animation: alza .7s cubic-bezier(.2,.8,.2,1) var(--t, 0s) both; }
.armar .a-desliza  { animation: desliza .7s cubic-bezier(.2,.8,.2,1) var(--t, 0s) both; }
.armar .a-aparece  { animation: aparece .5s ease var(--t, 0s) both; }
.armar .a-burbuja  { animation: burbuja 2.4s linear var(--t, 0s) infinite both; }

@keyframes cae {
  0%   { opacity: 0; transform: translateY(-150px); }
  55%  { opacity: 1; transform: translateY(7px); }
  75%  { transform: translateY(-3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes crece { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes creceY { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes esparce { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: none; } }
@keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes chorro {
  0%   { opacity: 1; transform: scaleY(0); }
  30%  { opacity: 1; transform: scaleY(1); }
  80%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
@keyframes alza { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes desliza { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes burbuja {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120px); }
}

/* ===== Armado con capas de la foto real =====
   Todas las capas son la misma foto; cada una muestra solo una pieza (máscara --m)
   y entra por su cuenta. Al final la foto completa se funde encima y queda nítida. */
.armado.foto-armado {
  display: block; position: relative; aspect-ratio: var(--ar); width: min(100%, 480px);
  border-radius: 24px; overflow: hidden; background: var(--noche);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 62%, transparent 100%);
}
.foto-armado .capa {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: var(--m); mask-image: var(--m);
}
.foto-armado .capa.pz { transform-origin: var(--o, 50% 50%); }
.foto-armado .capa-base { filter: blur(16px) brightness(.42) saturate(.8); transform: scale(1.15); }
.foto-armado .final { -webkit-mask-image: none; mask-image: none; }
.foto-armado .resta { -webkit-mask-composite: source-out, source-over; mask-composite: subtract, add; }
.foto-armado .a-tabla { filter: brightness(.38) sepia(.5); }
.foto-armado .a-fantasma { filter: grayscale(1) brightness(.85) contrast(1.4); }
.foto-real { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--neon); color: var(--neon); font: 700 10.5px var(--texto); letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; }

.armar .a-llena    { animation: llena 1.4s cubic-bezier(.3,.6,.3,1) var(--t, 0s) both; }
.armar .a-escarcha { animation: escarcha .9s cubic-bezier(.4,0,.2,1) var(--t, 0s) both; }
.armar .a-rebana   { animation: rebana .85s cubic-bezier(.2,.9,.25,1) var(--t, 0s) both; }
.armar .a-fantasma { animation: fantasma .6s ease var(--t, 0s) both; }
.armar .a-tabla    { animation: aparece .5s ease var(--t, 0s) both; }
.armar .final      { animation-duration: .8s; }

@keyframes llena { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(var(--hasta, 0%) 0 0 0); } }
@keyframes escarcha { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rebana {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes fantasma { from { opacity: 0; } to { opacity: .22; } }

@media (prefers-reduced-motion: reduce) {
  .armado .pz { animation: none !important; opacity: 1 !important; }
  .armado .a-chorro, .armado .a-burbuja { display: none; }
  .js .item { opacity: 1; transform: none; }
  .otra-vez { display: none; }
}