/* Fuentes de Google Fonts alojadas en la web (juego latino). Generado por fuentes.mjs */
@font-face { font-family: "Bowlby One"; src: url("assets/fuentes/bowlby-one-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Shrikhand"; src: url("assets/fuentes/shrikhand-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fuentes/dm-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fuentes/dm-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fuentes/dm-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Planchazo (local de ejemplo). Sistema: carbón de plancha, naranja fuego, cheddar y papel de bolsa.
   Títulos en Bowlby One (pesada, redonda, de comida rápida con humor), una palabra en Shrikhand y texto en DM Sans.
   Todo lo que se repite está en /styleguide. */
:root {
  --tinta: #15110E;
  --papel: #F4EBDC;
  --acento: #FF5A1F;
  --suave: #E8DCC6;
  --queso: #FFB81C;
  --ketchup: #D7261E;
  --pepino: #9DBF4B;
  --blanco: #FFFDF8;
  --titulos: "Bowlby One", "Arial Black", Impact, sans-serif;
  --script: "Shrikhand", Georgia, serif;
  --texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 22px;
  --borde: 2.5px solid var(--tinta);
  --sombra-dura: 6px 6px 0 var(--tinta);
  --nav: 64px;
}
html { background: var(--tinta); }
body { background: var(--papel); }
h1, h2, h3 { font-family: var(--titulos); letter-spacing: -.01em; text-transform: uppercase; line-height: .95; }
::selection { background: var(--queso); color: var(--tinta); }

/* ---------- Aviso de demo ---------- */
.aviso-demo { background: var(--tinta); color: var(--papel); opacity: 1; font: 500 .74rem/1.35 var(--texto); padding: .55rem 1rem; border-bottom: 1px solid #ffffff1a; }

/* ---------- Carga: las letras caen y se aplastan ---------- */
.carga { background: var(--tinta); }
.carga__marca { display: flex; gap: .02em; font: 400 clamp(2.4rem, 11vw, 7.5rem)/1 var(--titulos); color: var(--acento); }
.carga__marca span { display: inline-block; transform-origin: 50% 100%; opacity: 0; animation: cae .42s cubic-bezier(.3, 0, .4, 1) forwards; }
.carga__marca span:nth-child(1) { animation-delay: .00s; } .carga__marca span:nth-child(2) { animation-delay: .05s; }
.carga__marca span:nth-child(3) { animation-delay: .10s; } .carga__marca span:nth-child(4) { animation-delay: .15s; }
.carga__marca span:nth-child(5) { animation-delay: .20s; } .carga__marca span:nth-child(6) { animation-delay: .25s; }
.carga__marca span:nth-child(7) { animation-delay: .30s; } .carga__marca span:nth-child(8) { animation-delay: .35s; }
.carga__marca span:nth-child(9) { animation-delay: .40s; }
@keyframes cae {
  0% { opacity: 0; transform: translateY(-120%) scale(1, 1.15); }
  60% { opacity: 1; transform: translateY(0) scale(1, 1); }
  72% { transform: translateY(0) scale(1.18, .62); }
  88% { transform: translateY(0) scale(.96, 1.06); }
  100% { opacity: 1; transform: none; }
}
.carga__plancha { position: absolute; left: 50%; top: calc(50% + clamp(1.3rem, 6vw, 4rem)); width: min(80vw, 760px); height: 6px; translate: -50% 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--acento), transparent); box-shadow: 0 0 40px 6px #ff5a1f88; animation: calienta .9s ease-out forwards; transform: scaleX(0); }
@keyframes calienta { to { transform: scaleX(1); } }
.carga.carga--fuera { transform: translateY(-100%); }

/* ---------- Navegación en pastilla ---------- */
.nav { position: sticky; top: 12px; z-index: 40; display: flex; align-items: center; gap: 1rem; width: min(1120px, 100% - 24px); height: var(--nav); margin: 12px auto 0; padding: 0 .45rem 0 1.3rem; border-radius: 999px; background: #15110Ebf; color: var(--papel); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 40px #0004, inset 0 0 0 1px #ffffff14; }
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.nav__logo img { width: 150px; height: auto; }
.nav__links { display: flex; gap: .3rem; }
.nav__links a { position: relative; padding: .55rem .9rem; border-radius: 999px; font: 500 .92rem var(--texto); text-decoration: none; transition: background .25s, color .25s; }
.nav__links a:hover { background: #ffffff14; color: var(--queso); }
.nav__pedir { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; background: var(--acento); color: var(--tinta); font: 400 .95rem var(--titulos); text-decoration: none; text-transform: uppercase; }
.nav__pedir:hover { background: var(--queso); }
@media (max-width: 760px) { .nav__links { display: none; } .nav { padding-left: 1.1rem; } .nav__logo img { width: 128px; } }

/* ---------- Botones ---------- */
.boton { font: 400 1rem var(--titulos); text-transform: uppercase; letter-spacing: .01em; min-height: 54px; padding: .85em 1.6em; }
.boton--fuego { background: var(--acento); color: var(--tinta); box-shadow: 0 0 0 0 #ff5a1f66; }
.boton--fuego:hover { background: var(--queso); box-shadow: 0 12px 30px -8px #ffb81c99; }
.boton--linea { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 2px var(--papel); }
.boton--linea:hover { background: var(--papel); color: var(--tinta); }
.boton--linea-oscura { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2.5px var(--tinta); }
.boton--linea-oscura:hover { background: var(--tinta); color: var(--papel); }

/* ---------- Portada ---------- */
.portada { position: relative; isolation: isolate; display: grid; min-height: max(100svh, 640px); margin-top: calc(-1 * (var(--nav) + 12px)); padding: calc(var(--nav) + 40px) 0 2rem; overflow: hidden; background: var(--tinta); color: var(--papel); }
.portada > * { width: auto; margin-inline: 0; }
.portada__calor { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 45% at 50% 78%, #ff5a1f59, transparent 70%),
  radial-gradient(40% 30% at 50% 70%, #ffb81c2e, transparent 70%),
  repeating-linear-gradient(0deg, #ffffff05 0 2px, transparent 2px 7px); }
.portada__titulo { position: absolute; left: 0; right: 0; top: clamp(5.5rem, 15vh, 9rem); z-index: 1; margin: 0; text-align: center; }
.portada__smash { display: block; font: 400 22.6vw/.8 var(--titulos); letter-spacing: -.02em; color: var(--papel); }
.portada__script { position: absolute; z-index: 3; right: 4vw; top: calc(clamp(5.5rem, 15vh, 9rem) + 19vw); margin: 0; font: 400 clamp(2.6rem, 9vw, 8.5rem)/1 var(--script); color: var(--acento); rotate: -8deg; text-shadow: 0 6px 0 var(--tinta); }
.portada__burger { position: absolute; z-index: 2; left: 50%; top: calc(clamp(5.5rem, 15vh, 9rem) + 7vw); width: min(36vw, 62vh, 600px); translate: -50% 0; }
.portada__flota { position: relative; z-index: 1; }
.portada__flota img, .portada__flota svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 30px #0009) drop-shadow(0 0 60px #ff5a1f33); }
.portada__sombra { width: 70%; height: 26px; margin: -14px auto 0; border-radius: 50%; background: #000; filter: blur(14px); opacity: .55; animation: sombra 5s ease-in-out infinite; }
@keyframes sombra { 50% { transform: scaleX(.86); opacity: .35; } }
.portada__sueltos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.suelto { position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r); }
.suelto > div { animation: flota var(--t, 6s) ease-in-out infinite; animation-delay: var(--d, 0s); }
.suelto img, .suelto svg { width: 100%; height: auto; filter: drop-shadow(0 14px 14px #0008); }
.portada__pie { position: relative; z-index: 4; align-self: end; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.2rem 2rem; width: min(1180px, 100% - 2.5rem) !important; margin: 0 auto; }
.portada__bajada { max-width: 34ch; margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #f4ebdccc; }
.portada__bajada b { color: var(--queso); font-weight: 700; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.portada__sello { position: absolute; z-index: 3; left: 9vw; top: calc(clamp(5.5rem, 15vh, 9rem) + 22vw); width: clamp(84px, 9vw, 130px); aspect-ratio: 1; display: grid; place-items: center; }
.portada__sello svg { position: absolute; inset: 0; animation: gira 16s linear infinite; }
.portada__sello text { font: 400 12.5px var(--titulos); fill: var(--queso); letter-spacing: .12em; }
.portada__sello span { font-size: clamp(1.4rem, 2.4vw, 2rem); }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .portada { min-height: max(100svh, 700px); }
  .portada__titulo { top: 6.4rem; }
  .portada__burger { width: 76vw; top: calc(6.4rem + 11vw); }
  .portada__script { top: calc(6.4rem + 66vw); right: 5vw; font-size: 15vw; }
  .portada__sello { left: 6vw; right: auto; top: calc(6.4rem + 86vw); width: 74px; }
  .portada__pie { flex-direction: column; align-items: stretch; }
  .portada__acciones .boton { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Menú ---------- */
.carta { padding-top: clamp(3.5rem, 8vw, 6rem); background: var(--papel); }
.carta__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 2rem; }
.carta__cabeza h2 { margin: 0; font-size: clamp(3.4rem, 11vw, 9rem); line-height: .82; }
.carta__fuente { max-width: 30ch; margin: 0 0 .6rem; font-size: .92rem; opacity: .8; }
.carta__herramientas { position: sticky; top: calc(var(--nav) + 18px); z-index: 10; margin-block: 1.6rem 2rem; padding: .5rem 0; background: var(--papel); }
.carta__filtros { gap: .5rem; padding: .3rem .1rem; }
.carta__filtros button { min-height: 46px; padding: .4em 1.3em; border: var(--borde); background: var(--blanco); font: 400 .95rem var(--titulos); text-transform: uppercase; transition: background .25s, color .25s, transform .3s var(--resorte), box-shadow .25s; }
.carta__filtros button:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--tinta); }
.carta__filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--queso); }
.carta__lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2.2rem 1.6rem; }
.carta-grupo { display: contents; }
.carta-grupo > h3 { grid-column: 1 / -1; margin: 1rem 0 -.6rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.carta-grupo:only-child > h3 { display: none; }
.plato { position: relative; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: .8rem; padding: 1rem 1rem 1.1rem; border: var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra-dura); transition: transform .35s var(--resorte), box-shadow .35s var(--resorte); }
.plato:hover, .plato.tocado { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--tinta); }
.plato:hover .plato__abrir, .plato.tocado .plato__abrir { transform: none; }
.plato__abrir { gap: .35rem; }
.plato--foto .plato__foto-caja { aspect-ratio: 5 / 4; margin: 0 0 .5rem; border-radius: 16px; border: var(--borde); }
.plato__foto-caja > * { width: 84%; filter: drop-shadow(0 16px 12px #15110e55); transform: translateY(-10%); }
.plato:hover .plato__foto-caja > *, .plato.tocado .plato__foto-caja > * { transform: translateY(-17%) rotate(-4deg) scale(1.06); }
.plato__arriba { align-items: baseline; }
.plato__nombre { font: 400 1.3rem/1 var(--titulos); text-transform: uppercase; }
.plato__precio { font: 700 1.1rem var(--texto); color: var(--tinta); background: var(--queso); padding: .1em .5em; border-radius: 8px; border: 2px solid var(--tinta); }
.plato__desc { font-size: .92rem; opacity: .78; }
.plato__etiquetas { justify-self: start; padding: .2em .6em; border-radius: 999px; background: var(--tinta); color: var(--queso); font: 700 .7rem var(--texto); }
.plato__paso { grid-column: 1 / -1; justify-content: flex-end; }
.plato__paso button { min-height: 46px; border-width: 2.5px; font: 400 1rem var(--titulos); }
.plato__paso .plato__mas--solo, .plato__paso .plato__elegir { flex: 1; background: var(--acento); border-color: var(--tinta); text-transform: uppercase; }
.plato__paso .plato__mas--solo:hover, .plato__paso .plato__elegir:hover { background: var(--queso); color: var(--tinta); }
.plato__paso b { font: 400 1.3rem var(--titulos); }
@media (max-width: 560px) {
  .carta__lista { gap: 1.2rem; }
  .plato { padding: .8rem; gap: .6rem; }
  .plato__abrir { grid-template-columns: 108px 1fr; column-gap: .9rem; align-items: center; }
  .plato--foto .plato__foto-caja { grid-row: 1 / span 3; aspect-ratio: 1; margin: 0; align-self: start; }
  .plato__foto-caja > * { width: 92%; transform: none; }
  .plato__arriba { flex-direction: column; align-items: start; gap: .35rem; }
  .plato__nombre { font-size: 1.1rem; }
  .plato__desc { font-size: .85rem; grid-column: 2; }
  .plato__etiquetas { grid-column: 2; }
}

/* ---------- Cintas de precaución ---------- */
.cintas { position: relative; height: clamp(180px, 22vw, 280px); overflow: hidden; background: var(--tinta); display: grid; align-content: center; }
.cinta { position: absolute; left: -5%; right: -5%; padding: 1rem 0; font-size: clamp(1.5rem, 4.4vw, 3.4rem); border-block: 10px solid transparent; }
.cinta--a { top: 22%; rotate: -4deg; background: var(--queso); color: var(--tinta); border-image: repeating-linear-gradient(45deg, var(--tinta) 0 12px, var(--queso) 12px 24px) 10; z-index: 2; }
.cinta--b { top: 38%; rotate: 3.5deg; background: var(--acento); color: var(--tinta); border-image: repeating-linear-gradient(-45deg, var(--tinta) 0 12px, var(--acento) 12px 24px) 10; }
.cinta--b .marquesina__pista { animation-direction: reverse; }
.cinta span { display: inline-block; }

/* ---------- La plancha (idea wow) ---------- */
.plancha { position: relative; height: 420vh; padding: 0 !important; background: var(--tinta); color: var(--papel); }
.plancha__fija { position: sticky; top: 0; height: 100svh; overflow: hidden; width: 100% !important; }
.plancha__superficie { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background:
  linear-gradient(180deg, #4a403a 0, #2a2420 3px, #1f1a17 30%, #151110 100%); }
.plancha__superficie::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #ffffff06 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, #00000022 0 1px, transparent 1px 22px); }
.plancha__brillo { position: absolute; left: 50%; bottom: 8%; width: 90vw; height: 50%; translate: -50% 0; background: radial-gradient(50% 50% at 50% 60%, #ff5a1f, transparent 70%); opacity: var(--calor, .25); filter: blur(30px); }
.plancha__escenario { position: absolute; left: 50%; bottom: 14%; width: min(96vw, 1080px, 150vh); aspect-ratio: 820 / 520; translate: -50% 0; }
.plancha__escenario svg { width: 100%; height: 100%; overflow: visible; }
.plancha__golpe { position: absolute; left: 56%; top: 12%; z-index: 3; margin: 0; translate: -50% 0; font: 400 clamp(3.4rem, 10vw, 9rem)/.82 var(--titulos); text-align: center; color: var(--queso); -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; text-shadow: 8px 8px 0 var(--acento); opacity: 0; transform: scale(2.4) rotate(-8deg); pointer-events: none; }
.plancha__pasos { position: absolute; left: max(1.25rem, (100% - 1180px) / 2); top: calc(var(--nav) + 40px); z-index: 4; display: grid; gap: .5rem; max-width: 30ch; margin: 0; padding: 0; list-style: none; }
.plancha__pasos li { padding: .7rem 1rem; border-radius: 14px; background: #ffffff0a; font-size: .98rem; color: #f4ebdc80; transition: background .35s, color .35s, transform .45s var(--resorte); }
.plancha__pasos li b { margin-right: .4rem; font: 400 .9rem var(--titulos); color: var(--acento); }
.plancha__pasos li.activo { background: var(--papel); color: var(--tinta); transform: translateX(10px); }
.plancha__sonido { position: absolute; right: max(1.25rem, (100% - 1180px) / 2); top: calc(var(--nav) + 40px); z-index: 4; min-height: 44px; padding: .5rem 1rem; border: 1.5px solid #f4ebdc55; border-radius: 999px; background: #15110e99; color: var(--papel); font: 500 .85rem var(--texto); cursor: pointer; }
.plancha__sonido[aria-pressed="true"] { background: var(--queso); color: var(--tinta); border-color: var(--queso); }
.plancha__pedir { position: absolute; left: 50%; bottom: 5%; z-index: 4; translate: -50% 0; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .4s, transform .5s var(--resorte); }
.plancha__pedir.visible { opacity: 1; transform: none; pointer-events: auto; }
.sacudon { animation: sacudon .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes sacudon { 10%, 90% { translate: -1px 2px; } 20%, 80% { translate: 3px -3px; } 30%, 50%, 70% { translate: -6px 5px; } 40%, 60% { translate: 6px -4px; } }
@media (max-width: 760px) {
  .plancha__pasos { left: 1rem; right: 1rem; max-width: none; top: calc(var(--nav) + 30px); }
  .plancha__pasos li { display: none; font-size: .95rem; }
  .plancha__pasos li.activo { display: block; transform: none; }
  .plancha__sonido { top: auto; bottom: calc(5% + 64px); right: 1rem; }
  .plancha__golpe { top: 30%; left: 50%; }
  .plancha__escenario { bottom: 21%; width: 150vw; }
}

/* ---------- La regla ---------- */
.regla { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 2rem; width: min(1180px, 100% - 2.5rem); margin: 0 auto; }
main > section.regla > .regla__texto, main > section.regla > .regla__dibujo { width: auto; margin: 0; }
.regla__chico { font: 700 .8rem var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.regla h2 { font-size: clamp(3rem, 8vw, 6.5rem); line-height: .86; }
.regla h2 em { display: inline-block; font: 400 1.05em/1 var(--script); text-transform: none; color: var(--acento); rotate: -5deg; }
.regla__columnas { columns: 2 260px; column-gap: 2rem; font-size: 1.05rem; }
.regla__dibujo img, .regla__dibujo svg { width: 100%; height: auto; filter: drop-shadow(0 30px 24px #15110e55); rotate: 6deg; }
@media (max-width: 760px) { .regla { grid-template-columns: 1fr; } .regla__dibujo { width: 78%; margin: 0 auto; } }

/* ---------- Cómo pedir ---------- */
.como { background: var(--queso); }
.como h2 { font-size: clamp(2.6rem, 7vw, 5.5rem); max-width: 12ch; }
.como__pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.4rem; margin-top: 2rem; padding: 0; list-style: none; }
.como__pasos li { padding: 1.6rem; border: var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra-dura); transition: transform .35s var(--resorte), box-shadow .35s var(--resorte); }
.como__pasos li:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 9px 9px 0 var(--tinta); }
.como__pasos li:nth-child(2) { transition-delay: .06s; } .como__pasos li:nth-child(3) { transition-delay: .12s; }
.como__num { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1rem; border-radius: 50%; background: var(--acento); border: var(--borde); font: 400 1.8rem var(--titulos); }
.como__pasos h3 { font-size: 1.5rem; }
.como__pasos p { margin: 0; }

/* ---------- Dónde ---------- */
.donde { position: relative; display: grid; grid-template-columns: 1.9fr 1fr; grid-template-areas: "cabeza cabeza" "mapa info"; align-items: center; gap: 1.5rem 2rem; width: min(1180px, 100% - 2.5rem); margin: 0 auto; }
main > section.donde > .donde__cabeza, main > section.donde > .mapa, main > section.donde > .donde__info { width: auto; margin: 0; }
.donde__cabeza { grid-area: cabeza; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.donde h2 { margin: 0; font-size: clamp(2.6rem, 7vw, 5.5rem); }
.donde__dir { margin: 0; font-size: 1.15rem; font-weight: 700; }
.donde__ejemplo { font-weight: 400; font-size: .9rem; opacity: .65; }
.mapa { grid-area: mapa; position: relative; }
.mapa__lienzo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-dura); background: #efe3cf; }
.mapa__escala > * { position: absolute; }
.mapa__escala { position: absolute; left: 0; top: 0; width: 1800px; height: 1000px; transform-origin: 0 0; }
.mapa__img { position: absolute; left: 0; top: 0; width: 1800px; max-width: none; height: 1000px; }
.mapa__ruta { left: 0; top: 0; width: 1800px; height: 1000px; overflow: visible; }
.mapa__ruta path { stroke: var(--acento); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 22; opacity: .9; }
.mapa__pin { width: 64px; translate: -50% -100%; scale: calc(var(--inv, 1) * .85); z-index: 4; transform-origin: 50% 100%; }
.mapa__pin svg { width: 100%; filter: drop-shadow(0 6px 4px #0005); }
.mapa__globo { position: absolute; left: calc(100% + 6px); bottom: 55%; translate: 0 0; white-space: nowrap; padding: .5rem 1rem; border: var(--borde); border-radius: 999px; background: var(--queso); font: 400 1.5rem var(--titulos); text-transform: uppercase; opacity: 0; transform: scale(.4); transform-origin: 0 100%; }
.mapa__burger { left: 0; top: 0; width: 150px; translate: -50% -88%; scale: var(--inv, 1); transform-origin: 50% 88%; z-index: 3; pointer-events: none; }
.mapa__burger img { width: 100%; height: auto; filter: drop-shadow(0 14px 8px #15110e66); }
.mapa__burger.caminando .mapa__paso { animation: paso .36s ease-in-out infinite alternate; }
.mapa__burger.izquierda img { transform: scaleX(-1); }
@keyframes paso { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-14px) rotate(6deg); } }
.mapa__otra { position: absolute; right: 14px; bottom: 14px; z-index: 4; min-height: 44px; padding: .45rem 1rem; border: var(--borde); border-radius: 999px; background: var(--blanco); font: 600 .85rem var(--texto); cursor: pointer; box-shadow: 3px 3px 0 var(--tinta); }
.mapa__credito { margin: .5rem 0 0; font-size: .72rem; opacity: .6; }
.mapa__credito a { display: inline-block; min-height: 0; padding: 12px 4px; margin: -12px 0; }
.donde__info { grid-area: info; padding: 1.3rem 1.4rem; border: var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra-dura); }
.donde__info .boton { width: 100%; justify-content: center; }
.donde__estado { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; background: var(--tinta); color: var(--papel); font-weight: 700; font-size: .92rem; }
.donde__estado[data-abierto="true"]::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #3ddc7a; box-shadow: 0 0 0 4px #3ddc7a33; }
.donde__horarios { padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.donde__horarios li { padding: .35rem 0; border-bottom: 1px dashed #15110e33; }
.donde__acciones { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 860px) { .donde { grid-template-columns: 1fr; grid-template-areas: "cabeza" "mapa" "info"; } .mapa__lienzo { aspect-ratio: 4 / 5; } .mapa__burger { width: 110px; } }

/* ---------- Pie ---------- */
.pie { padding: clamp(3rem, 8vw, 6rem) max(1.25rem, (100% - 1280px) / 2) 2rem; background: var(--tinta); color: var(--papel); text-align: left; }
.pie__logo { width: 100%; max-width: none; margin: 0 0 2rem; filter: none; }
.pie__demo { max-width: 60ch; font-size: .9rem; opacity: .7; }
.pie__firma { font-size: .85rem; opacity: .6; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--acento); }

/* ---------- Flotantes ---------- */
.bolsa-boton { background: var(--acento); color: var(--tinta); border: var(--borde); box-shadow: 4px 4px 0 var(--tinta); font: 400 1rem var(--titulos); text-transform: uppercase; }
.bolsa-boton b { font-weight: 400; }
.wa-flota { opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .3s, translate .4s var(--resorte), transform .35s var(--resorte); }
.paso-portada .wa-flota { opacity: 1; translate: 0 0; pointer-events: auto; }
.wa-flota { position: fixed; z-index: 30; left: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; border: var(--borde); box-shadow: 4px 4px 0 var(--tinta); transition: transform .35s var(--resorte); }
.wa-flota:hover { transform: scale(1.08) rotate(-6deg); }
.wa-flota svg { width: 30px; height: 30px; }

/* ---------- Cuadros (producto y pedido) ---------- */
dialog { border: var(--borde); box-shadow: 8px 8px 0 var(--tinta); background: var(--papel); }
dialog h3 { font-size: 1.7rem; }
dialog input[type=radio] { accent-color: var(--acento); width: 20px; height: 20px; }
.cerrar { background: var(--tinta); color: var(--papel); }
.producto__foto { margin-top: .4rem; }
.producto__foto > * { width: min(64%, 240px); }
.producto__cant button, .b__cant button { border-width: 2.5px; }
.prueba-wa pre { border: 2px solid var(--tinta); }

/* Entrada de lo que aparece al bajar: un poco más de recorrido y resorte */
[data-reveal] { transform: translateY(36px); }
.plancha__pasos li.activo b { color: #A8320B; }

/* Escena del planchazo con fotos (escenario fijo de 820 x 520 escalado) */
.escena { position: absolute; left: 0; top: 0; width: 820px; height: 520px; transform-origin: 0 0; }
.escena > * { position: absolute; }
.escena__fondo, .escena__frente { left: 0; top: 0; width: 820px; height: 520px; overflow: visible; }
.pz-capa { height: auto; max-width: none; filter: drop-shadow(0 10px 8px #0007); will-change: transform, opacity; }
#pz-espatula { filter: drop-shadow(0 18px 14px #000a); }
#pz-crudo, #pz-cocido, #pz-derretido { transform-origin: 50% 100%; scale: 1 .66; }
@media (max-width: 860px) { .mapa__globo { font-size: 1.05rem; padding: .4rem .8rem; } }

/* Fotos altas (botella, lata, vaso) o anchas (burgers): siempre entran en la caja, sin pasarse */
.plato--foto .plato__foto-caja { position: relative; }
.plato__foto-caja > img { position: absolute; inset: 7% 8% 5%; width: 84%; height: 88%; max-width: none; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 560px) { .plato__foto-caja > img { inset: 6%; width: 88%; height: 88%; object-position: 50% 50%; } }

/* Pestañas del menú en el celular: entran todas a la vista (dos renglones) y se notan más */
@media (max-width: 560px) {
  .carta__filtros { flex-wrap: wrap; overflow: visible; gap: .4rem; }
  .carta__filtros button { min-height: 44px; padding: .35em 1em; font-size: .88rem; box-shadow: 3px 3px 0 var(--tinta); }
  .carta__filtros button[aria-pressed="true"] { background: var(--acento); color: var(--tinta); }
}