/* ==========================================================================
   BURGER KAYAK — ESTILOS
   Hamburguesería retro: cuadros naranja y crema, bordes azules gruesos,
   sombras "duras" (sin desenfoque, como un sticker) y personajes de comida.
   Títulos en Bowlby One (gruesa, de cartel) y textos en Plus Jakarta Sans.
   ========================================================================== */

/* ---------- Tipografías ---------- */
/* Bowlby One se carga desde Google Fonts (ver <head> de index.html) */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Colores de marca */
  --naranja: #ff7518;
  --naranja-2: #ff8c3f;          /* hover del naranja */
  --azul: #008fe8;
  --azul-texto: #006aad;         /* azul más oscuro para textos chicos (se lee mejor) */
  --resalte: #d6ecfb;            /* celeste suave para hover y avisos */
  --crema: #f8f5e8;
  --crema-2: #efe8d1;            /* superficies sobre crema */
  --negro: #171717;
  --blanco: #ffffff;
  --verde-wa: #1fa855;
  --rojo: #d3322b;

  /* Texto */
  --tinta: var(--negro);
  --tinta-suave: #575047;        /* gris cálido para textos secundarios */

  /* Cuadros naranja y crema */
  --cuadros: repeating-conic-gradient(var(--naranja) 0 25%, var(--crema) 0 50%);

  /* Bordes azules gruesos y sombras duras */
  --linea: 3px;
  --borde: var(--linea) solid var(--azul);
  --sombra: 5px 5px 0 var(--azul);
  --sombra-chica: 3px 3px 0 var(--azul);
  --sombra-grande: 8px 8px 0 var(--azul);

  /* Tipografía */
  --fuente-titulos: "Bowlby One", "Arial Black", Impact, system-ui, sans-serif;
  --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --paso-chico: 0.9375rem;                                  /* 15px */
  --paso-texto: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);   /* 17–18px */
  --paso-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);/* 19–23px */
  --paso-titulo: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);    /* 40–84px */

  /* Formas */
  --radio-xl: clamp(22px, 2.6vw, 32px);
  --radio-l: 20px;
  --radio-m: 14px;
  --radio-s: 10px;
  --pastilla: 999px;

  /* Espacios */
  --margen: clamp(16px, 3vw, 32px);
  --ancho-max: 1240px;
  --entre-secciones: clamp(72px, 9vw, 140px);
  --alto-cabecera: 72px;

  /* Movimiento */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rapido: 160ms;
  --medio: 360ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 72px);
  background: var(--crema);
}
body {
  margin: 0;
  color: var(--tinta);
  background: var(--crema);
  font-family: var(--fuente);
  font-size: var(--paso-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
/* "clip" (y no "hidden") recorta lo que sobresale, como la cinta inclinada,
   sin romper las barras pegajosas (sticky) del menú */
main { overflow-x: clip; }
body.con-barra { padding-bottom: 96px; }
body.carrito-abierto { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, figure, dl, dd, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--resalte); color: var(--negro); }
:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; }
[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--resalte); color: var(--negro); padding: 12px 18px;
  font-weight: 800; border: var(--borde); border-radius: var(--radio-m);
}
.saltar:focus { top: 12px; }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-max) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.titulo-seccion {
  font-family: var(--fuente-titulos);
  font-size: var(--paso-titulo);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--negro);
}

/* ---------- Intro (unos 2,5 segundos) ----------
   El personaje entra caminando hasta el centro (la caminata de piernas y
   brazo está dentro de personaje-kayak.svg), da un saltito, aparece el
   nombre y todo se desvanece. --intro es lo que esperan las animaciones
   del inicio para arrancar. */
:root { --intro: 2.2s; }
.intro {
  position: fixed; inset: 0; z-index: 300;
  overflow: hidden;
  display: grid; place-items: center; align-content: center; gap: 14px;
  background: var(--naranja);
  cursor: pointer;
  animation: intro-salir 400ms ease 2.1s forwards;
}
/* Franja de cuadros arriba y abajo */
.intro::before, .intro::after {
  content: ""; position: absolute; left: 0; right: 0; height: 48px;
  background: var(--cuadros) 0 0 / 48px 48px;
}
.intro::before { top: 0; border-bottom: var(--borde); }
.intro::after { bottom: 0; border-top: var(--borde); }
.intro.saltando { animation: intro-salir 220ms ease forwards; }
@keyframes intro-salir { to { opacity: 0; visibility: hidden; } }

/* El personaje y su sombra viajan juntos desde la izquierda */
.intro__escena {
  position: relative;
  width: min(36vw, 150px);
  animation: intro-caminar 1.1s cubic-bezier(0.3, 0, 0.4, 1) both;
}
.intro__personaje {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  filter: drop-shadow(4px 4px 0 var(--azul));
  animation: intro-salto 420ms var(--curva) 1.1s both;
}
.intro__sombra {
  position: absolute; left: 12%; right: 12%; bottom: -4px; height: 14px;
  border-radius: 50%; background: rgba(23, 23, 23, 0.22);
}
@keyframes intro-caminar { from { transform: translateX(calc(-50vw - 100%)); } }
@keyframes intro-salto { 45% { transform: translateY(-18px) rotate(4deg); } }

.intro__marca {
  font-family: var(--fuente-titulos); font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  line-height: 1; text-transform: uppercase; color: var(--crema);
  -webkit-text-stroke: 2px var(--negro); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--azul);
  animation: intro-nombre 500ms var(--rebote) 1.05s both;
}
.intro__marca span { color: var(--negro); -webkit-text-stroke: 0; }
@keyframes intro-nombre { from { opacity: 0; transform: translateY(14px) scale(0.85); } }

/* Quien pide menos movimiento no ve la intro y el inicio aparece enseguida */
@media (prefers-reduced-motion: reduce) {
  :root { --intro: 0s; }
  .intro { display: none; }
}

/* ---------- Botones ----------
   Estilo sticker: borde negro y sombra dura que "se hunde" al tocar. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 11px 22px;
  border: var(--borde); border-radius: var(--radio-m);
  box-shadow: var(--sombra-chica);
  font-family: var(--fuente); font-weight: 800; font-size: var(--paso-texto); line-height: 1.1;
  text-decoration: none; text-align: center;
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background-color var(--rapido), color var(--rapido);
  touch-action: manipulation;
  user-select: none;
}
.boton:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--negro); }
.boton--grande { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.boton--ancho { width: 100%; }
.boton--naranja { background: var(--naranja); color: var(--negro); }
.boton--negro { background: var(--negro); color: var(--crema); }
.boton--crema { background: var(--crema); color: var(--negro); }
.boton--blanco { background: var(--blanco); color: var(--negro); }
.boton--whatsapp { background: var(--verde-wa); color: var(--blanco); }
@media (hover: hover) {
  .boton:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra); }
  .boton--naranja:hover { background: var(--naranja-2); }
  .boton--crema:hover, .boton--blanco:hover { background: var(--resalte); }
  .boton--negro:hover { background: #2a2a2a; }
  .boton--whatsapp:hover { background: #22b65d; }
  .boton:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--negro); }
}

/* ---------- Encabezado ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--crema);
  border-bottom: var(--borde);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--alto-cabecera);
  max-width: calc(var(--ancho-max) + var(--margen) * 2);
  margin-inline: auto; padding-inline: var(--margen);
}
.cabecera__marca {
  display: flex; flex: none; align-items: center; gap: 12px; white-space: nowrap;
  text-decoration: none;
  font-family: var(--fuente-titulos); font-size: 1.375rem; line-height: 1;
  text-transform: uppercase;
}
.cabecera__logo { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--azul); transition: transform var(--medio) var(--rebote); }
/* El personaje caminando al lado del nombre */
.cabecera__personaje { width: 34px; height: auto; margin-left: -4px; }
@media (hover: hover) { .cabecera__marca:hover .cabecera__logo { transform: rotate(-8deg) scale(1.06); } }
.cabecera__nav { display: flex; align-items: center; gap: 4px; }
.cabecera__nav a {
  text-decoration: none; font-weight: 800;
  padding: 10px 16px; border-radius: var(--radio-m);
  transition: background-color var(--rapido), color var(--rapido);
}
.cabecera__nav a:hover { background: var(--resalte); }
.cabecera__pedir { margin-left: 10px; min-height: 46px; padding: 9px 18px; }
.cabecera__nav a, .cabecera__pedir { white-space: nowrap; }
/* Pantallas medianas: menos aire entre enlaces para que entre todo en una fila */
@media (min-width: 960px) and (max-width: 1139px) {
  .cabecera__marca { font-size: 1.125rem; gap: 10px; }
  .cabecera__nav a { padding: 10px 9px; }
  .cabecera__pedir { margin-left: 4px; padding: 9px 14px; }
}
.cabecera__acciones { display: flex; align-items: center; gap: 10px; }

.boton-carrito, .boton-menu {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radio-m);
  background: var(--blanco); border: var(--borde); color: var(--negro);
  box-shadow: var(--sombra-chica);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.boton-carrito:active, .boton-menu:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--negro); }
@media (hover: hover) { .boton-carrito:hover, .boton-menu:hover { background: var(--resalte); } }
.boton-carrito__cuenta {
  position: absolute; top: -10px; right: -10px;
  min-width: 26px; height: 26px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--naranja); color: var(--negro);
  border: 2.5px solid var(--azul);
  font-size: 0.8125rem; font-weight: 800; border-radius: var(--pastilla);
}
.boton-carrito__cuenta.salta { animation: saltar 460ms var(--rebote); }
@keyframes saltar {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.boton-menu { display: none; }
.boton-menu__barras, .boton-menu__barras::before, .boton-menu__barras::after {
  display: block; width: 20px; height: 3px; border-radius: 2px; background: currentColor;
  transition: transform var(--medio) var(--curva), opacity var(--rapido);
}
.boton-menu__barras { position: relative; }
.boton-menu__barras::before, .boton-menu__barras::after { content: ""; position: absolute; left: 0; }
.boton-menu__barras::before { top: -7px; }
.boton-menu__barras::after { top: 7px; }
.boton-menu[aria-expanded="true"] .boton-menu__barras { background: transparent; }
.boton-menu[aria-expanded="true"] .boton-menu__barras::before { transform: translateY(7px) rotate(45deg); }
.boton-menu[aria-expanded="true"] .boton-menu__barras::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 959px) {
  .cabecera__marca { font-size: 1.125rem; }
  @media (max-width: 479px) {
    .cabecera__marca { gap: 8px; font-size: 1rem; }
    .cabecera__logo { width: 44px; height: 44px; }
    .cabecera__personaje { width: 29px; }
  }
  .boton-menu { display: grid; }
  .cabecera__nav {
    position: absolute; top: calc(var(--alto-cabecera) + 6px); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px;
    background: var(--crema);
    border: var(--borde); border-radius: var(--radio-l);
    box-shadow: var(--sombra);
    transform: translateY(-10px) scale(0.98); transform-origin: top right;
    opacity: 0; visibility: hidden;
    transition: transform var(--medio) var(--curva), opacity var(--medio), visibility 0s linear var(--medio);
  }
  .cabecera__nav.abierto {
    transform: none; opacity: 1; visibility: visible;
    transition: transform var(--medio) var(--curva), opacity var(--medio);
  }
  .cabecera__nav a { padding: 14px 18px; font-size: var(--paso-lead); }
  .cabecera__pedir { margin: 8px 0 0; min-height: 56px; }
}
@media (max-width: 339px) { .cabecera__marca span { display: none; } }

/* ---------- Portada ---------- */
.hero { padding: 14px 14px 0; max-width: 1600px; margin-inline: auto; }
.hero__panel {
  position: relative; overflow: hidden; isolation: isolate;
  border: var(--borde); border-radius: var(--radio-xl);
  background: var(--naranja);
  box-shadow: var(--sombra-grande);
}
/* Franja de cuadros en el borde inferior del panel */
.hero__panel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; z-index: -1;
  background: var(--cuadros) 0 0 / 36px 36px;
  border-top: var(--borde);
}
/* Rayos suaves detrás del sello: le dan profundidad sin usar fotos */
.hero__panel::before {
  content: ""; position: absolute; z-index: -1;
  width: 1400px; height: 1400px; right: -480px; top: 50%; translate: 0 -50%;
  background: repeating-conic-gradient(rgba(255, 249, 233, 0.14) 0 9deg, transparent 0 18deg); /* taste-skill-ignore: rayos retro */
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 75%);
          mask: radial-gradient(closest-side, #000 30%, transparent 75%);
  animation: girar 120s linear infinite;
}
.hero__grilla {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center; gap: clamp(24px, 4vw, 64px);
  min-height: min(calc(100svh - var(--alto-cabecera) - 48px), 820px);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 72px) calc(36px + clamp(32px, 5vw, 64px));
}
.estado {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: var(--radio-m);
  background: var(--crema); border: var(--borde);
  font-weight: 800; font-size: var(--paso-chico); line-height: 1.35;
}
.estado:empty { display: none; }
.estado::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none;
}
.estado--neutro::before { background: var(--naranja); box-shadow: 0 0 0 2px var(--negro); }
.estado--abierto::before { background: #2bb35e; box-shadow: 0 0 0 2px var(--negro); animation: latido 2.4s ease-in-out infinite; }
.estado--cerrado::before { background: var(--rojo); box-shadow: 0 0 0 2px var(--negro); }
@keyframes latido { 50% { opacity: 0.35; } }

.hero__titulo {
  margin-top: 22px;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.75rem, 1.2rem + 6vw, 6.25rem);
  font-weight: 400;
  line-height: 0.92; letter-spacing: -0.005em;
  text-transform: uppercase;
  max-width: 12ch;
  text-wrap: balance;
  color: var(--negro);
}
/* "te hace volver." en crema con contorno y sombra negra, como un cartel */
.hero__titulo span {
  display: inline;
  color: var(--crema);
  -webkit-text-stroke: 2px var(--negro);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--azul);
}
.hero__bajada {
  margin-top: 22px;
  max-width: 38ch;
  font-size: var(--paso-lead); line-height: 1.45; font-weight: 700;
  color: var(--negro);
}
.hero__acciones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__datos {
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-width: 640px;
}
.hero__datos li {
  display: grid; gap: 2px; align-content: start;
  padding: 12px 14px; border-radius: var(--radio-m);
  background: var(--crema); border: var(--borde);
}
.hero__datos strong { font-size: var(--paso-chico); line-height: 1.3; font-weight: 800; }
.hero__datos > li > span { font-size: 0.875rem; color: var(--tinta-suave); line-height: 1.35; font-weight: 600; }

/* Sello con el logo y texto que gira alrededor */
.hero__visual { position: relative; display: grid; place-items: center; padding: 6%; }
.sello {
  position: relative;
  width: min(100%, 470px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.sello::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--azul);
  border: var(--linea) solid var(--negro);
  box-shadow: var(--sombra-grande);
}
.sello__anillo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: girar 40s linear infinite;
}
.sello__anillo text {
  font-family: var(--fuente-titulos); font-size: 19px; letter-spacing: 0.06em;
  fill: var(--crema);
}
.sello__logo {
  position: relative;
  width: 70%; height: auto;
  filter: drop-shadow(5px 5px 0 var(--negro));
  animation: aparecer-sello 900ms var(--rebote) both calc(var(--intro) + 120ms);
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes aparecer-sello { from { opacity: 0; transform: scale(0.8) rotate(-12deg); } }


.etiqueta {
  position: absolute;
  padding: 8px 16px; border-radius: var(--radio-m);
  background: var(--crema); color: var(--negro);
  border: var(--borde); box-shadow: var(--sombra-chica);
  font-family: var(--fuente-titulos); font-size: 1rem; text-transform: uppercase; white-space: nowrap;
  animation: flotar 6s ease-in-out infinite;
}
.etiqueta--1 { top: 8%; left: 0; rotate: -6deg; }
.etiqueta--2 { bottom: 9%; right: 0; rotate: 5deg; background: var(--azul); color: var(--crema); animation-delay: -3s; }
@keyframes flotar { 50% { transform: translateY(-10px); } }

/* Entrada de la portada, escalonada. Arranca cuando termina la intro (--intro) */
.hero__texto > * { animation: subir 760ms var(--curva) both var(--intro); }
.hero__texto > :nth-child(2) { animation-delay: calc(var(--intro) + 80ms); }
.hero__texto > :nth-child(3) { animation-delay: calc(var(--intro) + 160ms); }
.hero__texto > :nth-child(4) { animation-delay: calc(var(--intro) + 240ms); }
.hero__texto > :nth-child(5) { animation-delay: calc(var(--intro) + 320ms); }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } }

@media (max-width: 959px) {
  .hero__grilla { grid-template-columns: 1fr; min-height: 0; gap: 8px; padding: 22px 20px 72px; }
  .hero__panel::before { right: 50%; translate: 50% -50%; top: 24%; }
  .hero__visual { order: -1; justify-self: center; width: min(100%, 380px); padding: 4% 2%; }
  .sello { width: min(100%, 300px); }
  .hero__foto { width: min(100%, 360px); }
  .etiqueta { font-size: 0.875rem; padding: 6px 12px; }
  .etiqueta--1 { left: 0; top: 4%; }
  .etiqueta--2 { right: 0; bottom: 4%; }
  .hero__titulo { margin-top: 16px; }
  .hero__bajada { margin-top: 14px; }
  .hero__acciones { margin-top: 22px; }
  .hero__datos { margin-top: 22px; grid-template-columns: 1fr 1fr; }
  .hero__datos li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .hero { padding: 10px 10px 0; }
  .hero__panel { box-shadow: var(--sombra); }
  .sello { width: min(100%, 240px); }
  .hero__titulo span { -webkit-text-stroke-width: 1.5px; text-shadow: 3px 3px 0 var(--azul); }
  .hero__acciones .boton { flex: 1 1 auto; }
}

/* ---------- Cinta de categorías (se desliza sola) ---------- */
.cinta {
  margin-top: clamp(36px, 5vw, 56px);
  overflow: hidden;
  background: var(--azul); color: var(--crema);
  border-block: var(--linea) solid var(--negro);
  rotate: -1.5deg;
  margin-inline: -20px;
}
.cinta__pista {
  display: flex; width: max-content;
  animation: deslizar 28s linear infinite;
}
.cinta__pista span {
  padding: 14px 0;
  font-family: var(--fuente-titulos); font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
  text-transform: uppercase; white-space: nowrap;
}
.cinta__pista span::after { content: "★"; margin: 0 28px; color: var(--naranja); }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* ---------- Menú ---------- */
.menu { padding-top: var(--entre-secciones); }
.menu__encabezado {
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 20px 64px;
}
.menu__intro { max-width: 46ch; justify-self: end; font-size: var(--paso-lead); line-height: 1.45; font-weight: 600; color: var(--tinta-suave); }
@media (max-width: 859px) {
  .menu__encabezado { grid-template-columns: 1fr; }
  .menu__intro { justify-self: start; font-size: var(--paso-texto); }
}

.categorias {
  position: sticky; top: var(--alto-cabecera); z-index: 30;
  background: var(--crema);
  border-bottom: var(--borde);
  margin-top: 32px;
}
.categorias__fila {
  display: flex; gap: 8px; padding-block: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.categorias__fila::-webkit-scrollbar { display: none; }
.categorias a {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 9px 18px; border-radius: var(--radio-m);
  background: var(--blanco); border: var(--borde);
  font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: background-color var(--rapido), transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.categorias a:active { transform: translate(2px, 2px); }
.categorias a span {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--pastilla); background: var(--crema-2); font-size: 0.8125rem;
}
.categorias a[aria-current="true"] { background: var(--naranja); box-shadow: var(--sombra-chica); }
.categorias a[aria-current="true"] span { background: var(--crema); }
@media (hover: hover) { .categorias a:not([aria-current="true"]):hover { background: var(--resalte); } }
/* En el celular las categorías se deslizan de costado */
@media (max-width: 559px) {
  .categorias__fila { gap: 6px; padding-block: 10px; }
  .categorias a { padding: 8px 14px; font-size: 0.9375rem; min-height: 44px; }
}

.categoria { padding-top: clamp(44px, 6vw, 84px); scroll-margin-top: calc(var(--alto-cabecera) + 72px); }
.categoria__cabeza {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 26px;
}
.categoria__titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  font-weight: 400; line-height: 1;
  text-transform: uppercase;
}
/* Subrayado grueso, como marcador */
.categoria__titulo::after {
  content: ""; display: block; width: 72px; height: 8px; margin-top: 10px;
  background: var(--naranja); border: 2.5px solid var(--azul); border-radius: var(--pastilla);
}
.categoria--destacada .categoria__titulo { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); }
.categoria__descripcion { margin-top: 12px; max-width: 52ch; color: var(--tinta-suave); font-weight: 600; }
.categoria__cuenta {
  flex: none; white-space: nowrap;
  padding: 6px 14px; border-radius: var(--pastilla);
  background: var(--resalte); border: 2.5px solid var(--azul);
  font-size: var(--paso-chico); font-weight: 800;
}
@media (max-width: 559px) {
  .categoria__cabeza { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Categoría sin productos cargados todavía */
.categoria__vacia {
  display: grid; gap: 12px; justify-items: start;
  padding: clamp(22px, 4vw, 40px);
  border: var(--borde); border-radius: var(--radio-l);
  background:
    linear-gradient(var(--crema-2), var(--crema-2)) padding-box,
    var(--cuadros) 0 0 / 24px 24px border-box; /* taste-skill-ignore: borde a cuadros */
  border: 10px solid transparent;
  outline: var(--linea) solid var(--negro); outline-offset: -1px;
}
.categoria__vacia p { max-width: 52ch; color: var(--tinta-suave); font-weight: 600; }
.categoria__vacia .categoria__vacia-titulo {
  font-family: var(--fuente-titulos); font-size: var(--paso-lead); text-transform: uppercase;
  color: var(--negro);
}
.categoria__vacia .boton { margin-top: 6px; }

/* Tarjetas de producto */
.platos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.plato {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: var(--borde); border-radius: var(--radio-l);
  background: var(--blanco);
  box-shadow: var(--sombra);
  transition: translate var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
/* "translate" (y no "transform") para no pisar la animación de aparición */
@media (hover: hover) { .plato:hover { translate: -3px -3px; box-shadow: var(--sombra-grande); } }
.plato--tocable { cursor: pointer; }
.plato--tocable:active { translate: 2px 2px; box-shadow: var(--sombra-chica); }

.plato__foto {
  position: relative;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-bottom: var(--borde);
  background: var(--crema-2);
}
.plato__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--curva); }
@media (hover: hover) { .plato:hover .plato__foto img { transform: scale(1.06); } }
/* PLACEHOLDER: se muestra mientras el producto no tenga foto (foto: null en data.js) */
.plato__foto--placeholder {
  display: grid; place-items: center; align-content: center; gap: 10px;
  background: var(--cuadros) 0 0 / 40px 40px;
}
.plato__foto--placeholder img {
  width: 42%; height: auto; object-fit: contain;
  filter: drop-shadow(4px 4px 0 var(--negro));
}
.plato__foto--placeholder span {
  padding: 4px 10px; border-radius: var(--pastilla);
  background: var(--crema); border: 2px solid var(--azul);
  font-size: 0.8125rem; font-weight: 800;
}
@media (hover: hover) { .plato:hover .plato__foto--placeholder img { transform: rotate(-6deg) scale(1.06); } }

.plato__info { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 18px; }
.plato__etiqueta {
  align-self: flex-start; margin-bottom: 8px;
  padding: 2px 10px; border-radius: var(--pastilla);
  background: var(--negro); color: var(--crema);
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.plato__linea { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plato__nombre {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 400;
  line-height: 1.08; text-transform: uppercase;
}
/* Precio: sticker naranja */
.precio {
  flex: none;
  padding: 3px 11px; border-radius: var(--radio-s);
  background: var(--naranja); color: var(--negro);
  border: 2.5px solid var(--azul);
  font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: var(--paso-chico); line-height: 1.5;
  rotate: 2deg;
}
.plato__descripcion { margin-top: 8px; font-size: var(--paso-chico); line-height: 1.5; font-weight: 500; }
.plato__ingredientes { margin-top: 6px; color: var(--tinta-suave); font-size: 0.875rem; line-height: 1.5; }
.plato__ingredientes span { font-weight: 800; color: var(--negro); }
.plato__nota {
  align-self: flex-start; display: inline-block; margin-top: 10px;
  padding: 3px 10px; border-radius: var(--pastilla);
  background: var(--crema-2); border: 2px solid var(--azul-texto); color: var(--azul-texto);
  font-weight: 800; font-size: 0.8125rem;
}
.plato__accion { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plato__control { display: inline-flex; }
.plato__en-pedido {
  padding: 4px 12px; border-radius: var(--pastilla);
  background: var(--crema-2); border: 2px solid var(--azul);
  font-size: 0.8125rem; font-weight: 800;
  animation: entrar-control 280ms var(--rebote);
}
.plato__en-pedido.cambia { animation: tic 320ms var(--rebote); }

@media (max-width: 1023px) { .platos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En celular: hamburguesas grandes (una por fila) y el resto en fila horizontal */
@media (max-width: 639px) {
  .platos { grid-template-columns: 1fr; gap: 16px; }
  .platos:not(.platos--destacados) .plato { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
  .platos:not(.platos--destacados) .plato__foto { aspect-ratio: auto; height: 100%; min-height: 136px; border-bottom: 0; border-right: var(--borde); }
  .platos:not(.platos--destacados) .plato__foto--placeholder span { display: none; }
  .platos:not(.platos--destacados) .plato__foto--placeholder img { width: 62%; }
  .platos:not(.platos--destacados) .plato__info { padding: 12px 14px 14px; }
  .platos:not(.platos--destacados) .plato__linea { flex-direction: column; gap: 6px; }
  .platos:not(.platos--destacados) .plato__descripcion { font-size: 0.875rem; }
  .plato__nombre { font-size: 1.1875rem; }
}

/* Control "Agregar" / cantidad (se reutiliza en todo el sitio) */
.agregar { min-height: 46px; padding: 9px 18px; animation: entrar-control 280ms var(--rebote); }
.agregar[data-sumar]::before { content: "+"; font-size: 1.25em; line-height: 0.8; margin-right: -2px; }
.cantidad {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: var(--radio-m);
  background: var(--naranja); color: var(--negro);
  border: var(--borde); box-shadow: var(--sombra-chica);
  animation: entrar-control 280ms var(--rebote);
}
.cantidad button {
  width: 42px; height: 42px; border: 0; border-radius: var(--radio-s);
  background: transparent; color: inherit;
  display: grid; place-items: center;
  font-size: 1.375rem; font-weight: 800; line-height: 1;
  transition: background-color var(--rapido), transform var(--rapido) var(--curva);
  touch-action: manipulation;
}
.cantidad button:active { transform: scale(0.85); }
@media (hover: hover) { .cantidad button:hover { background: rgba(0, 0, 0, 0.1); } }
.cantidad button:disabled { opacity: 0.35; cursor: default; }
.cantidad output {
  min-width: 30px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cantidad output.cambia { animation: tic 320ms var(--rebote); }
.cantidad--suave { background: var(--blanco); box-shadow: none; }
@media (hover: hover) { .cantidad--suave button:hover { background: var(--resalte); } }
@keyframes tic { 40% { transform: translateY(-4px) scale(1.3); } }
@keyframes entrar-control { from { opacity: 0; transform: scale(0.85); } }

.aviso-noscript { padding: 24px; border: var(--borde); border-radius: var(--radio-l); background: var(--blanco); }

/* ---------- Opiniones ---------- */
.opiniones { padding-top: var(--entre-secciones); }
.opiniones__panel {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(26px, 4.5vw, 56px) clamp(22px, 4.5vw, 56px) calc(32px + clamp(26px, 4vw, 48px));
  border: var(--linea) solid var(--negro); border-radius: var(--radio-xl);
  background: var(--azul);
  box-shadow: var(--sombra-grande);
}
.opiniones__panel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; z-index: -1;
  background: var(--cuadros) 0 0 / 32px 32px;
  border-top: var(--linea) solid var(--negro);
}
.opiniones__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.opiniones__bajada { margin-top: 12px; font-size: var(--paso-lead); font-weight: 700; max-width: 30ch; }
.nota-resumen {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px 16px 20px; border-radius: var(--radio-l);
  background: var(--crema); border: var(--borde); box-shadow: var(--sombra);
  rotate: -2deg;
}
.nota-resumen__numero { font-family: var(--fuente-titulos); font-size: 3.25rem; line-height: 1; }
.nota-resumen p { margin-top: 4px; font-size: 0.9375rem; font-weight: 700; color: var(--tinta-suave); }
/* Estrellas con relleno parcial según la nota (--nota se carga desde data.js) */
.estrellas {
  --nota: 4.8;
  display: inline-block; font-size: 1.5rem; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(90deg, var(--naranja) calc(var(--nota) / 5 * 100%), #d9cdb0 0); /* taste-skill-ignore: relleno parcial de estrellas */
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px var(--negro);
}

.carrusel { margin-top: 36px; }
.carrusel__pista {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px 8px 12px 4px;
  margin-inline: -4px;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline-offset: 6px; border-radius: var(--radio-l); }
.resena {
  flex: 0 0 min(84%, 340px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px 20px;
  border-radius: var(--radio-l);
  background: var(--crema); border: var(--borde); box-shadow: var(--sombra-chica);
}
.resena__cabeza { display: flex; align-items: center; gap: 12px; }
.resena__avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2.5px solid var(--azul);
  color: var(--crema); font-weight: 800;
}
.resena__nombre { display: block; font-size: 0.9375rem; font-weight: 800; line-height: 1.3; }
.resena__fuente { display: block; font-size: 0.8125rem; line-height: 1.3; color: var(--tinta-suave); }
.resena__linea { display: flex; align-items: center; gap: 8px; }
.resena__estrellas { font-size: 1rem; letter-spacing: 1px; color: var(--naranja); }
.resena__estrellas-vacias { color: #d9cdb0; }
.resena__fecha { font-size: 0.8125rem; color: var(--tinta-suave); }
.resena__texto { font-size: 0.9375rem; line-height: 1.55; }

.carrusel__controles { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.carrusel__flecha {
  width: 52px; height: 52px; border-radius: var(--radio-m);
  display: grid; place-items: center;
  background: var(--crema); color: var(--negro);
  border: var(--borde); box-shadow: var(--sombra-chica);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva), opacity var(--rapido);
}
.carrusel__flecha:active { transform: translate(3px, 3px); box-shadow: none; }
.carrusel__flecha:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) { .carrusel__flecha:not(:disabled):hover { background: var(--resalte); } }
.carrusel__puntos { display: flex; align-items: center; gap: 4px; }
.carrusel__puntos button {
  width: 28px; height: 28px; border: 0; padding: 0; background: transparent;
  display: grid; place-items: center;
}
.carrusel__puntos button::before {
  content: ""; display: block; width: 10px; height: 10px; border-radius: var(--pastilla);
  background: var(--crema); border: 2px solid var(--azul);
  transition: width var(--medio) var(--curva), background-color var(--medio);
}
.carrusel__puntos button[aria-current="true"]::before { width: 26px; background: var(--negro); }

.opiniones__google { margin-top: 30px; }

@media (max-width: 559px) {
  .opiniones__cabeza { align-items: flex-start; }
  .nota-resumen { rotate: 0deg; }
  .opiniones__google { width: 100%; }
}

/* ---------- Ubicación: el ticket ---------- */
.ubicacion { padding-top: var(--entre-secciones); }
.ticket {
  --muesca: 30px;
  position: relative;
  margin-top: 32px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) 24px minmax(0, 1fr);
  border-radius: var(--radio-xl);
  background: var(--blanco); color: var(--negro);
  /* Muescas semicirculares arriba y abajo, a la altura del perforado */
  -webkit-mask:
    radial-gradient(circle at 56% 0, transparent calc(var(--muesca) / 2), #000 calc(var(--muesca) / 2 + 0.5px)) top / 100% 51% no-repeat, /* taste-skill-ignore: máscara de las muescas */
    radial-gradient(circle at 56% 100%, transparent calc(var(--muesca) / 2), #000 calc(var(--muesca) / 2 + 0.5px)) bottom / 100% 51% no-repeat; /* taste-skill-ignore */
          mask:
    radial-gradient(circle at 56% 0, transparent calc(var(--muesca) / 2), #000 calc(var(--muesca) / 2 + 0.5px)) top / 100% 51% no-repeat, /* taste-skill-ignore */
    radial-gradient(circle at 56% 100%, transparent calc(var(--muesca) / 2), #000 calc(var(--muesca) / 2 + 0.5px)) bottom / 100% 51% no-repeat; /* taste-skill-ignore */
}
/* Franja a cuadros arriba del ticket */
.ticket::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--cuadros) 0 0 / 14px 14px;
}
.ticket__datos { padding: clamp(36px, 4vw, 56px) clamp(24px, 4vw, 52px) clamp(26px, 4vw, 52px); }
.ticket__direccion {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); font-weight: 400;
  line-height: 1; text-transform: uppercase;
}
.ticket__localidad { display: inline-block; margin-top: 12px; font-family: var(--fuente); font-size: var(--paso-lead); font-weight: 700; text-transform: none; color: var(--tinta-suave); }
.ticket__lista { margin-top: 28px; display: grid; gap: 8px; }
.ticket__lista div {
  display: grid; grid-template-columns: 120px 1fr; gap: 12px;
  padding: 11px 16px; border-radius: var(--radio-m); background: var(--crema);
  border: 2px solid var(--azul);
}
.ticket__lista dt { font-weight: 800; }
.ticket__lista dd { font-weight: 600; }
.ticket__lista small { font-size: 0.8125rem; color: var(--tinta-suave); }
.ticket__lista a { font-weight: 800; text-underline-offset: 4px; }
.ticket__perforado {
  width: 0; justify-self: center; margin-block: 30px;
  border-left: 6px dotted var(--negro);
}
.ticket__acciones {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: clamp(26px, 4vw, 52px);
}

@media (max-width: 859px) {
  .ticket {
    grid-template-columns: 1fr; grid-template-rows: auto 24px auto;
    -webkit-mask:
      radial-gradient(circle at 0 var(--corte, 60%), transparent calc(var(--muesca) / 2), #000 calc(var(--muesca) / 2 + 0.5px)) left / 51% 100% no-repeat, /* taste-skill-ignore */
      radial-gradient(circle at 100% var(--corte, 60%), transparent calc(var(--muesca) / 2), #000 calc(var(--muesca) / 2 + 0.5px)) right / 51% 100% no-repeat; /* taste-skill-ignore */
            mask:
      radial-gradient(circle at 0 var(--corte, 60%), transparent calc(var(--muesca) / 2), #000 calc(var(--muesca) / 2 + 0.5px)) left / 51% 100% no-repeat, /* taste-skill-ignore */
      radial-gradient(circle at 100% var(--corte, 60%), transparent calc(var(--muesca) / 2), #000 calc(var(--muesca) / 2 + 0.5px)) right / 51% 100% no-repeat; /* taste-skill-ignore */
  }
  .ticket__perforado { width: auto; height: 0; align-self: center; margin: 0 26px; border-left: 0; border-top: 6px dotted var(--negro); }
  .ticket__lista div { grid-template-columns: 1fr; gap: 2px; }
}

.ubicacion__medios {
  margin-top: 16px;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px;
}
.ubicacion__mapa, .ubicacion__local {
  overflow: hidden; border: var(--borde); border-radius: var(--radio-xl);
  background: var(--crema-2); box-shadow: var(--sombra);
}
.ubicacion__mapa { min-height: 380px; }
.ubicacion__mapa iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
.ubicacion__local img, .ubicacion__local svg { width: 100%; height: 100%; object-fit: cover; }
.ubicacion__local svg { display: block; }
@media (max-width: 859px) {
  .ubicacion__medios { grid-template-columns: 1fr; }
  .ubicacion__mapa, .ubicacion__mapa iframe { min-height: 300px; }
  .ubicacion__local img, .ubicacion__local svg { aspect-ratio: 408 / 362; }
}

/* ---------- Pie ---------- */
.pie {
  margin-top: var(--entre-secciones);
  overflow: hidden;
  background: var(--negro); color: var(--crema);
}
.pie__cuadros { height: 36px; background: var(--cuadros) 0 0 / 36px 36px; border-bottom: var(--borde); }
.pie__nombre {
  padding-top: clamp(32px, 5vw, 64px);
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 10vw, 10rem);
  line-height: 0.9; text-transform: uppercase;
  color: var(--naranja);
  white-space: nowrap; text-align: center;
}
.pie__grilla {
  margin-top: 48px;
  display: grid; grid-template-columns: 1.2fr 0.7fr 1.2fr 1fr; gap: 32px;
  align-items: start;
}
.pie__marca { display: flex; align-items: center; gap: 16px; }
.pie__marca img { width: 80px; height: 80px; border-radius: 50%; box-shadow: 0 0 0 3px var(--azul); }
.pie__marca p { color: #e9e0cb; }
.pie__marca strong { color: var(--crema); }
.pie__titulo { font-family: var(--fuente-titulos); font-size: 1.0625rem; font-weight: 400; text-transform: uppercase; color: var(--azul); }
.pie__lista { margin-top: 10px; display: grid; gap: 2px; }
.pie__lista a {
  display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 40px;
  text-decoration: none; font-weight: 700; color: var(--crema);
  transition: color var(--rapido);
}
.pie__lista a:hover { color: var(--naranja); }
.pie__lista .pie__dato { color: #c9bea6; font-weight: 500; }
.pie__texto { margin-top: 10px; color: #e9e0cb; }
.pie__boton { margin-top: 16px; box-shadow: 3px 3px 0 var(--crema); }
.pie .boton:active { box-shadow: none; }
@media (hover: hover) { .pie .boton:hover { box-shadow: 5px 5px 0 var(--crema); } }

/* Fila inferior: copyright y políticas, discreta */
.pie__inferior {
  margin-top: 48px; padding-block: 18px 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  border-top: 2px solid #3a3a3a;
}
.pie__legal { font-size: var(--paso-chico); color: #c9bea6; }
.pie__politicas { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pie__politica {
  min-height: 44px; padding: 0; border: 0; background: none;
  font-size: var(--paso-chico); font-weight: 700; color: #c9bea6;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--rapido);
}
.pie__politica:hover { color: var(--naranja); }

@media (max-width: 959px) { .pie__grilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) {
  .pie__grilla { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .pie__marca, .pie__columna:nth-child(3), .pie__columna:last-child { grid-column: 1 / -1; }
  .pie__boton { width: 100%; }
  .pie__inferior { flex-direction: column-reverse; align-items: flex-start; }
}

/* ---------- Ventanas legales (privacidad y términos) ---------- */
.legal {
  width: min(720px, calc(100vw - 32px)); max-height: min(86dvh, 860px);
  margin: auto; padding: 0;
  border: var(--borde); border-radius: var(--radio-xl);
  background: var(--crema); color: var(--negro);
  box-shadow: var(--sombra-grande);
  overflow: hidden;
}
.legal[open] { display: flex; flex-direction: column; animation: legal-entrar 380ms var(--rebote); }
.legal::backdrop { background: rgba(23, 23, 23, 0.7); }
.legal[open]::backdrop { animation: aparecer 300ms ease; }
.legal.cerrando { animation: legal-salir 200ms ease forwards; }
.legal.cerrando::backdrop { opacity: 0; transition: opacity 200ms ease; }
@keyframes legal-entrar { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes legal-salir { to { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes aparecer { from { opacity: 0; } }

.legal__cabeza {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 18px 16px 26px;
  background: var(--naranja); border-bottom: var(--borde);
}
.legal__cabeza h2 { font-family: var(--fuente-titulos); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 400; line-height: 1.05; text-transform: uppercase; }
.legal__cerrar, .carrito__cerrar, .detalle__cerrar {
  flex: none; width: 46px; height: 46px; border-radius: var(--radio-m);
  display: grid; place-items: center;
  background: var(--crema); color: var(--negro);
  border: var(--borde); box-shadow: var(--sombra-chica);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva), box-shadow var(--rapido);
}
.legal__cerrar:active, .carrito__cerrar:active, .detalle__cerrar:active { transform: translate(3px, 3px); box-shadow: none; }
@media (hover: hover) { .legal__cerrar:hover, .carrito__cerrar:hover, .detalle__cerrar:hover { background: var(--resalte); } }

.legal__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 26px 24px; }
.legal__cuerpo h3 { margin-top: 24px; font-family: var(--fuente-titulos); font-size: 1.0625rem; font-weight: 400; text-transform: uppercase; }
.legal__cuerpo p, .legal__cuerpo li { font-size: 1rem; line-height: 1.6; }
.legal__cuerpo p { margin-top: 8px; }
.legal__cuerpo ul { margin-top: 8px; padding-left: 20px; list-style: disc; display: grid; gap: 6px; }
.legal__cuerpo li::marker { color: var(--naranja); }
.legal__cuerpo .legal__datos { padding: 14px 16px; list-style: none; border-radius: var(--radio-m); background: var(--blanco); border: 2px solid var(--azul); }
.legal__fecha { margin-top: 18px !important; font-size: var(--paso-chico) !important; color: var(--tinta-suave); }
.legal__accion { margin-top: 14px; display: grid; gap: 8px; justify-items: start; }
.legal__estado { font-size: var(--paso-chico) !important; color: #17793d; font-weight: 700; margin-top: 0 !important; }
.legal__estado:empty { display: none; }

/* Dato todavía no confirmado por el negocio */
.pendiente {
  display: inline-block; padding: 0 10px; border-radius: var(--pastilla);
  background: var(--resalte); border: 2px solid var(--azul); color: var(--negro);
  font-size: 0.8125rem; font-weight: 800; line-height: 1.6;
}

.legal__pie { flex: none; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: var(--borde); background: var(--crema-2); }

/* En celular: hoja que sube desde abajo */
@media (max-width: 559px) {
  .legal {
    width: 100%; max-width: 100%; max-height: 92dvh;
    margin: auto 0 0;
    border-width: var(--linea) 0 0;
    border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    box-shadow: none;
  }
  .legal[open] { animation: legal-subir 420ms var(--curva); }
  .legal.cerrando { animation: legal-bajar 220ms ease forwards; }
  .legal__cabeza { padding: 16px 14px 14px 20px; }
  .legal__cuerpo { padding: 0 20px 22px; }
  @keyframes legal-subir { from { transform: translateY(100%); } }
  @keyframes legal-bajar { to { transform: translateY(100%); } }
}

/* ---------- Barra flotante de pedido (celular y tablet) ---------- */
.barra-pedido {
  position: fixed; left: 12px; right: 12px; z-index: 45;
  bottom: calc(12px + env(safe-area-inset-bottom));
  animation: subir 380ms var(--rebote);
}
.barra-pedido__boton {
  width: 100%; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 20px;
  border: var(--borde); border-radius: var(--radio-l);
  background: var(--naranja); color: var(--negro);
  box-shadow: var(--sombra);
  font-weight: 800; font-size: var(--paso-texto);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido);
}
.barra-pedido__boton:active { transform: translate(3px, 3px); box-shadow: var(--sombra-chica); }
.barra-pedido__boton strong {
  padding: 9px 14px; border-radius: var(--radio-m);
  background: var(--negro); color: var(--crema); font-variant-numeric: tabular-nums;
}
.barra-pedido__cuenta {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 8px; padding: 0 7px;
  background: var(--crema); border: 2px solid var(--azul); border-radius: var(--pastilla); font-size: 0.875rem;
}
@media (min-width: 960px) { .barra-pedido { display: none !important; } body.con-barra { padding-bottom: 0; } }

/* ---------- Carrito ---------- */
.carrito-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(23, 23, 23, 0.6);
  opacity: 0; transition: opacity var(--medio) ease;
}
.carrito-fondo.visible { opacity: 1; }
.carrito {
  position: fixed; z-index: 70; top: 12px; right: 12px; bottom: 12px;
  width: min(470px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  overflow: hidden;
  border: var(--borde); border-radius: var(--radio-xl);
  background: var(--crema); color: var(--negro);
  box-shadow: var(--sombra-grande);
  transform: translateX(calc(100% + 32px));
  transition: transform 480ms var(--curva);
}
.carrito.visible { transform: none; }
.carrito__cabeza {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 14px 20px;
  background: var(--naranja); border-bottom: var(--borde);
}
.carrito__cabeza h2 { font-family: var(--fuente-titulos); font-size: 1.75rem; font-weight: 400; line-height: 1; text-transform: uppercase; }
.carrito__cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 24px; }
.carrito__vacio { padding: 24px 0; display: grid; gap: 16px; justify-items: start; font-weight: 600; color: var(--tinta-suave); }

.carrito__items { display: grid; gap: 12px; }
.linea {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px;
  padding: 14px; border-radius: var(--radio-m);
  background: var(--blanco); border: var(--borde);
  animation: entrar-linea 360ms var(--curva);
}
.linea.saliendo { animation: salir-linea 240ms ease forwards; }
@keyframes entrar-linea { from { opacity: 0; transform: translateX(24px); } }
@keyframes salir-linea { to { opacity: 0; transform: translateX(-24px) scale(0.96); } }
.linea__nombre { font-weight: 800; line-height: 1.25; }
.linea__detalle { margin-top: 3px; font-size: var(--paso-chico); font-weight: 700; color: var(--azul-texto); line-height: 1.35; }
.linea__unitario { margin-top: 2px; font-size: 0.875rem; color: var(--tinta-suave); }
.linea__subtotal { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.linea__controles { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.linea__quitar {
  min-height: 42px; padding: 8px 14px; border: 2px solid transparent; border-radius: var(--radio-m);
  background: none; color: var(--tinta-suave);
  font-size: var(--paso-chico); font-weight: 800;
  text-decoration: underline; text-underline-offset: 3px;
  transition: background-color var(--rapido), color var(--rapido), border-color var(--rapido);
}
.linea__quitar:hover { color: var(--rojo); border-color: var(--rojo); text-decoration: none; }

.checkout { margin-top: 30px; display: grid; gap: 24px; }
.checkout fieldset { margin: 0; padding: 0; border: 0; }
.checkout legend, .grupo-opciones legend {
  margin-bottom: 12px; padding: 0;
  font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 400; text-transform: uppercase;
}
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: grid; place-items: center; align-content: center; text-align: center;
  min-height: 56px; padding: 10px; border-radius: var(--radio-m);
  background: var(--blanco); border: var(--borde);
  font-weight: 800; line-height: 1.2;
  transition: background-color var(--rapido), transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.opcion span small { margin-top: 2px; font-size: 0.8125rem; font-weight: 700; color: var(--tinta-suave); }
.opcion input:checked + span { background: var(--naranja); box-shadow: var(--sombra-chica); transform: translate(-2px, -2px); }
.opcion input:checked + span small { color: var(--negro); }
.opcion input:focus-visible + span { outline: 3px solid var(--negro); outline-offset: 3px; }
.opcion input:active + span { transform: translate(1px, 1px); box-shadow: none; }
@media (hover: hover) { .opcion input:not(:checked):hover + span { background: var(--resalte); } }
.campo { display: grid; gap: 8px; }
.campo > span { font-weight: 800; }
.campo em { font-style: normal; font-weight: 500; color: var(--tinta-suave); }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--blanco); color: var(--negro);
  border: var(--borde); border-radius: var(--radio-m);
  font-size: 1rem; /* 16px: evita el zoom automático en iPhone */
  transition: box-shadow var(--rapido);
}
.campo textarea { resize: vertical; min-height: 84px; }
.campo input::placeholder, .campo textarea::placeholder { color: #9a8670; }
.campo input:focus, .campo textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--resalte); }
.campo input[aria-invalid="true"] { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(211, 50, 43, 0.2); }
.checkout__direccion { display: grid; gap: 16px; animation: subir 300ms var(--curva); }
.error { margin-top: 8px; color: var(--rojo); font-weight: 800; font-size: var(--paso-chico); }

.carrito__pie {
  flex: none;
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
  background: var(--crema-2);
  border-top: var(--borde);
}
.carrito__subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 800; }
.carrito__subtotal strong { font-family: var(--fuente-titulos); font-size: 1.75rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.carrito__subtotal strong.cambia { animation: tic 320ms var(--rebote); }
.carrito__envio { margin-top: 2px; font-size: var(--paso-chico); font-weight: 600; color: var(--tinta-suave); }
.carrito__pie .boton { margin-top: 14px; }
/* Aviso de local cerrado (o WhatsApp sin configurar) y botón de enviar bloqueado */
.carrito__cerrado {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radio-m);
  background: var(--resalte); border: 2px solid var(--azul);
  font-size: var(--paso-chico); font-weight: 700; line-height: 1.45;
}
.boton--whatsapp:disabled {
  background: #d9cdb0; color: #6b5e4a;
  cursor: not-allowed; transform: none; box-shadow: none;
}
.boton--whatsapp:disabled svg { opacity: 0.5; }
.carrito__legal { margin-top: 10px; font-size: 0.8125rem; color: var(--tinta-suave); line-height: 1.45; }

/* En celular el carrito es una hoja que sube desde abajo, con manija */
@media (max-width: 559px) {
  .carrito {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    height: 94vh; height: 94dvh; /* taste-skill-ignore: respaldo sin dvh */
    border-width: var(--linea) 0 0;
    border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    box-shadow: none;
    transform: translateY(100%);
  }
  .carrito::before {
    content: ""; position: absolute; top: 7px; left: 50%; translate: -50% 0;
    width: 44px; height: 5px; border-radius: var(--pastilla);
    background: var(--negro); opacity: 0.5;
  }
  .carrito__cabeza { padding: 18px 14px 12px 16px; }
  .carrito__cuerpo { padding-inline: 16px; }
  .carrito__pie { padding-inline: 16px; }
}

/* ---------- Hoja de detalle (ver y personalizar) ---------- */
body.detalle-abierto { overflow: hidden; }
.detalle-fondo {
  position: fixed; inset: 0; z-index: 64;
  background: rgba(23, 23, 23, 0.68);
  opacity: 0; transition: opacity 400ms ease;
}
.detalle-fondo.visible { opacity: 1; }
.detalle {
  position: fixed; z-index: 66; left: 50%; top: 50%; translate: -50% -50%;
  width: min(1000px, calc(100vw - 48px)); height: min(720px, calc(100dvh - 48px));
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: var(--borde); border-radius: var(--radio-xl);
  background: var(--crema); color: var(--negro);
  box-shadow: var(--sombra-grande);
}
.detalle__cerrar { position: absolute; z-index: 3; top: 14px; right: 14px; }

.detalle__desplazable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.detalle__visual {
  position: relative; min-height: 0;
  overflow: hidden; /* la foto nunca se sale de su lugar ni tapa el texto */
  background: var(--cuadros) 0 0 / 48px 48px;
  border-right: var(--borde);
}
.detalle__lienzo { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; }
/* Anclada a los cuatro bordes: llena el espacio y recorta lo que sobra */
.detalle__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detalle__lienzo--placeholder img, .detalle__logo { width: min(52%, 260px); height: auto; filter: drop-shadow(6px 6px 0 var(--negro)); }
.detalle__lienzo span {
  padding: 5px 12px; border-radius: var(--pastilla);
  background: var(--crema); border: 2px solid var(--azul);
  font-size: 0.875rem; font-weight: 800;
}

.detalle__info { overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 28px; }
.detalle__etiqueta {
  display: inline-block; margin-bottom: 12px;
  padding: 2px 10px; border-radius: var(--pastilla);
  background: var(--negro); color: var(--crema);
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.detalle__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-right: 48px; }
.detalle__nombre { font-family: var(--fuente-titulos); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
.detalle__cabeza .precio { margin-top: 4px; font-size: var(--paso-texto); }
.detalle__descripcion { margin-top: 14px; font-weight: 600; }
.detalle__ingredientes { margin-top: 8px; color: var(--tinta-suave); font-size: var(--paso-chico); }

.opcion-bloque {
  margin-top: 16px; padding: 16px 16px 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: var(--radio-l); background: var(--blanco); border: var(--borde);
}
.opcion-bloque h3 { font-family: var(--fuente-titulos); font-size: 1.0625rem; font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.opcion-bloque p { font-size: var(--paso-chico); color: var(--tinta-suave); }
.opcion-bloque--columna { flex-direction: column; align-items: stretch; }
.grupo-opciones { margin: 0; padding: 0; border: 0; }
.grupo-opciones + .grupo-opciones { margin-top: 18px; }
.opciones--detalle { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* Adicionales dentro de la hoja */
.adicionales-detalle { display: grid; gap: 8px; }
.adicional-detalle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 14px; border-radius: var(--radio-m);
  background: var(--crema); border: 2px solid var(--azul);
  transition: background-color var(--medio);
}
.adicional-detalle.elegido { background: var(--resalte); }
.adicional-detalle__texto { min-width: 0; line-height: 1.3; }
.adicional-detalle__texto strong { display: block; font-size: 0.9375rem; }
.adicional-detalle__texto span { font-size: 0.8125rem; color: var(--tinta-suave); font-weight: 600; }
.adicional-detalle .cantidad { flex: none; }
.adicional-detalle .cantidad button { width: 40px; height: 40px; }
.adicional-detalle .cantidad output { min-width: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 14px 6px 6px; border-radius: var(--pastilla);
  background: var(--crema); border: 2px solid var(--azul); color: var(--negro);
  font-weight: 800; font-size: var(--paso-chico);
  transition: background-color var(--medio) var(--curva), color var(--medio), transform var(--rapido) var(--rebote);
}
.chip:active { transform: scale(0.94); }
.chip__icono {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--naranja); border: 2px solid var(--azul); color: var(--negro);
  transition: background-color var(--medio), transform var(--medio) var(--rebote);
}
.chip__icono svg { width: 14px; height: 14px; }
.chip__icono .icono-quitar { display: none; }
.chip[aria-pressed="true"] { background: #f3e3dc; color: var(--rojo); border-color: var(--rojo); }
.chip[aria-pressed="true"] .chip__texto { text-decoration: line-through; text-decoration-thickness: 2px; }
.chip[aria-pressed="true"] .chip__icono { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); transform: rotate(180deg); }
.chip[aria-pressed="true"] .icono-ok { display: none; }
.chip[aria-pressed="true"] .icono-quitar { display: block; }

.detalle__pie {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--crema-2); border-top: var(--borde);
}
.detalle__agregar { flex: 1; justify-content: space-between; }
.detalle__agregar span { font-variant-numeric: tabular-nums; }

/* Entrada escalonada del contenido al abrir */
.detalle.entrando .detalle__info > * { animation: subir 520ms var(--curva) both; }
.detalle.entrando .detalle__info > :nth-child(2) { animation-delay: 50ms; }
.detalle.entrando .detalle__info > :nth-child(3) { animation-delay: 100ms; }
.detalle.entrando .detalle__info > :nth-child(4) { animation-delay: 150ms; }
.detalle.entrando .detalle__info > :nth-child(n+5) { animation-delay: 200ms; }
.detalle.entrando .detalle__lienzo > * { animation: aparecer-sello 700ms var(--rebote) both 80ms; }

/* En celular: hoja que sube desde abajo, con la foto arriba */
@media (max-width: 759px) {
  .detalle {
    left: 0; right: 0; top: auto; bottom: 0; translate: none;
    width: 100%; height: 94vh; height: 94dvh; /* taste-skill-ignore: respaldo sin dvh */
    border-width: var(--linea) 0 0;
    border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    box-shadow: none;
  }
  .detalle__desplazable { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .detalle__visual { height: 38vh; height: 38svh; border-right: 0; border-bottom: var(--borde); }
  .detalle__info { overflow: visible; padding: 20px 16px 24px; }
}

/* ---------- Aviso flotante ("Agregado") ---------- */
.aviso-flotante {
  position: fixed; z-index: 80; left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px) scale(0.95);
  max-width: calc(100vw - 32px); width: max-content; text-align: center;
  padding: 12px 20px; border-radius: var(--radio-m);
  background: var(--negro); color: var(--crema);
  border: var(--borde); box-shadow: 4px 4px 0 var(--naranja);
  font-weight: 800;
  opacity: 0; pointer-events: none;
  transition: opacity var(--rapido), transform var(--medio) var(--rebote);
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }
body.con-barra .aviso-flotante { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- Aparición al hacer scroll ---------- */
.js .revelar:not(.sin-hijos) > *, .js .revelar.sin-hijos {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms var(--curva), transform 700ms var(--curva);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .revelar.visto:not(.sin-hijos) > *, .js .revelar.sin-hijos.visto { opacity: 1; transform: none; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carrusel__pista { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .js .revelar:not(.sin-hijos) > *, .js .revelar.sin-hijos { transform: none; }
  .cinta__pista { animation: none !important; }
}

/* ==========================================================================
   PIEZAS NUEVAS (rediseño naranja, azul y crema)
   ========================================================================== */

.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Portada con fotos: collage de hamburguesa, pizza y milanesa ----------
   La hamburguesa va grande a la izquierda; la pizza arriba a la derecha y la
   milanesa abajo, encimadas como fotos pegadas en una pared. */
.hero--con-foto .hero__visual { width: min(100%, 540px); justify-self: center; padding: 2% 0 4%; }
.portada { position: relative; width: 100%; aspect-ratio: 1 / 1.02; }
.portada__foto {
  position: absolute; margin: 0; overflow: hidden;
  border: 4px solid var(--azul); border-radius: var(--radio-l);
  background: var(--crema-2);
  box-shadow: 7px 7px 0 var(--negro);
  animation: aparecer-sello 800ms var(--rebote) both calc(var(--intro) + 120ms);
  transition: translate var(--medio) var(--curva);
}
.portada__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portada__foto--1 { left: 0; top: 5%; width: 61%; aspect-ratio: 4 / 5; rotate: -3deg; z-index: 2; }
.portada__foto--2 { right: 0; top: 0; width: 47%; aspect-ratio: 1; rotate: 5deg; z-index: 1; animation-delay: calc(var(--intro) + 240ms); }
.portada__foto--3 { right: 2%; bottom: 0; width: 49%; aspect-ratio: 1; rotate: -4deg; z-index: 3; animation-delay: calc(var(--intro) + 360ms); }
@media (hover: hover) { .portada__foto:hover { translate: 0 -6px; z-index: 4; } }
/* Cartelito con la categoría de cada foto */
.portada__etiqueta {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 11px; border-radius: var(--radio-s);
  background: var(--crema); border: 2.5px solid var(--azul);
  font-family: var(--fuente-titulos); font-size: clamp(0.75rem, 0.65rem + 0.4vw, 0.9375rem); text-transform: uppercase; line-height: 1.1;
}
/* Cada cartel va en la esquina que no tapan las otras fotos ni el logo */
.portada__foto--1 .portada__etiqueta { left: auto; right: 10px; bottom: auto; top: 10px; }
.portada__foto--2 .portada__etiqueta { left: auto; right: 10px; bottom: auto; top: 10px; background: var(--naranja); }
.portada__foto--3 .portada__etiqueta { left: auto; right: 10px; background: var(--azul); color: var(--crema); border-color: var(--negro); }
/* Los carteles sueltos del sello no hacen falta: cada foto tiene el suyo */
.hero--con-foto .etiqueta { display: none; }

/* Con fotos, el logo queda como sello pegado abajo a la izquierda */
.hero--con-foto .sello {
  position: absolute; left: 3%; bottom: 0; z-index: 4;
  width: clamp(92px, 27%, 150px);
  rotate: -8deg;
}
.hero--con-foto .sello::before, .hero--con-foto .sello__anillo { display: none; }
.hero--con-foto .sello__logo { width: 100%; border-radius: 50%; box-shadow: 0 0 0 5px var(--azul); filter: drop-shadow(5px 5px 0 var(--negro)); }
.hero__personaje {
  position: absolute; top: -3%; left: -2%; z-index: 5;
  width: clamp(58px, 9vw, 96px); height: auto; overflow: visible;
  rotate: -10deg;
  filter: drop-shadow(3px 3px 0 var(--negro));
  animation: flotar 5s ease-in-out infinite;
}
.hero:not(.hero--con-foto) .hero__personaje { display: none; }
@media (max-width: 959px) {
  .hero--con-foto .hero__visual { width: min(100%, 420px); padding: 4% 0 4%; }
}
@media (max-width: 479px) {
  .portada__foto { border-width: 3px; box-shadow: 5px 5px 0 var(--negro); }
  .portada__etiqueta { left: 6px; bottom: 6px; padding: 3px 7px; border-width: 2px; }
  .portada__foto--1 .portada__etiqueta, .portada__foto--2 .portada__etiqueta { top: 6px; right: 6px; }
  .portada__foto--3 .portada__etiqueta { right: 6px; }
}

/* ---------- Opiniones sobre azul ---------- */
.opiniones__panel { box-shadow: 8px 8px 0 var(--negro); }
.opiniones .titulo-seccion { color: var(--crema); text-shadow: 4px 4px 0 var(--negro); }
.opiniones__bajada { color: var(--negro); }
.nota-resumen { border-color: var(--negro); box-shadow: 5px 5px 0 var(--negro); }
.destacados {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.destacado {
  display: grid; gap: 6px; align-content: start;
  padding: 18px; border-radius: var(--radio-l);
  background: var(--crema); border: var(--linea) solid var(--negro);
  box-shadow: 4px 4px 0 var(--negro);
  transition: translate var(--medio) var(--curva);
}
@media (hover: hover) { .destacado:hover { translate: 0 -4px; } }
.destacado__icono { width: 44px; height: 44px; margin-bottom: 4px; }
.destacado__titulo { font-family: var(--fuente-titulos); font-size: 1.0625rem; font-weight: 400; text-transform: uppercase; line-height: 1.15; }
.destacado__texto { font-size: var(--paso-chico); line-height: 1.5; color: var(--tinta-suave); font-weight: 600; }
.opiniones__aclaracion { margin-top: 16px; font-size: 0.875rem; font-weight: 700; color: var(--negro); }
.opiniones .resena, .opiniones .carrusel__flecha { border-color: var(--negro); box-shadow: 3px 3px 0 var(--negro); }
.opiniones__google { border-color: var(--negro); box-shadow: 3px 3px 0 var(--negro); }
@media (hover: hover) { .opiniones__google:hover { box-shadow: 5px 5px 0 var(--negro); } }
@media (max-width: 959px) { .destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En celular: una por renglón, con el ícono al costado */
@media (max-width: 559px) {
  .destacados { grid-template-columns: 1fr; gap: 10px; }
  .destacado { grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; padding: 14px; }
  .destacado__icono { grid-row: 1 / span 2; margin: 0; align-self: center; }
  .destacado__titulo { font-size: 0.9375rem; }
}

/* ---------- Tamaños de las hamburguesas ---------- */
.tamanos {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.tamano {
  display: grid; gap: 1px; justify-items: center;
  min-height: 52px; padding: 7px 2px;
  border: 2px solid var(--azul); border-radius: var(--radio-s);
  background: var(--crema); color: var(--negro);
  line-height: 1.15;
  transition: background-color var(--rapido), transform var(--rapido) var(--curva);
}
.tamano__nombre { font-size: 0.75rem; font-weight: 700; color: var(--tinta-suave); }
.tamano__precio { font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tamano:active { transform: scale(0.95); }
@media (hover: hover) { .tamano:hover { background: var(--resalte); transform: translateY(-2px); } }

/* ---------- Botón de WhatsApp de cada producto ---------- */
.boton-wa {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radio-m);
  background: var(--verde-wa); color: var(--blanco);
  border: var(--borde); box-shadow: var(--sombra-chica);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background-color var(--rapido);
}
.boton-wa:active { transform: translate(3px, 3px); box-shadow: none; }
@media (hover: hover) { .boton-wa:hover { background: #22b65d; transform: translate(-2px, -2px); box-shadow: var(--sombra); } }
/* Junto al contador (no a la derecha, donde está el botón flotante de WhatsApp) */
.plato__accion .boton-wa { flex: none; }

/* Hoja de detalle: el botón de WhatsApp va en su propio renglón */
.detalle__pie { flex-wrap: wrap; }
.detalle__agregar { padding-inline: 18px; }
.detalle__wa { flex: 1 1 100%; min-height: 48px; font-size: var(--paso-chico); }
@media (max-width: 559px) { .detalle__pie { padding-inline: 16px; gap: 10px; } }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante {
  position: fixed; z-index: 44; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde-wa); color: var(--blanco);
  border: var(--borde); box-shadow: var(--sombra);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), bottom var(--medio) var(--curva);
  animation: aparecer-sello 600ms var(--rebote) both calc(var(--intro) + 600ms);
}
.wa-flotante:active { transform: translate(3px, 3px); box-shadow: none; }
@media (hover: hover) { .wa-flotante:hover { transform: translate(-2px, -2px) scale(1.04); box-shadow: var(--sombra-grande); } }
/* En celular, cuando aparece la barra del pedido, el botón sube */
@media (max-width: 959px) { body.con-barra .wa-flotante { bottom: calc(92px + env(safe-area-inset-bottom)); } }
body.carrito-abierto .wa-flotante, body.detalle-abierto .wa-flotante { visibility: hidden; }

/* ---------- El local (sobre fondo a cuadros) ---------- */
.local {
  margin-top: var(--entre-secciones);
  padding-block: clamp(40px, 7vw, 96px);
  background: var(--cuadros) 0 0 / 56px 56px;
  border-block: var(--linea) solid var(--azul);
}
.local__panel {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  padding: clamp(24px, 4vw, 48px);
  border: var(--borde); border-radius: var(--radio-xl);
  background: var(--crema); box-shadow: var(--sombra-grande);
}
.local__bajada { margin-top: 14px; font-size: var(--paso-lead); font-weight: 700; max-width: 30ch; }
.local__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.caracteristica {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 12px;
  padding: 12px 14px; border-radius: var(--radio-m);
  background: var(--blanco); border: 2px solid var(--azul);
}
.caracteristica svg { grid-row: 1 / span 2; width: 44px; height: 44px; }
.caracteristica strong { font-weight: 800; line-height: 1.3; align-self: end; }
/* Sin aclaración abajo, el texto queda centrado al lado del ícono */
.caracteristica strong:last-child { grid-row: 1 / span 2; align-self: center; }
.caracteristica small { font-size: 0.8125rem; color: var(--tinta-suave); font-weight: 600; align-self: start; }
.caracteristica:last-child { grid-column: 1 / -1; }
@media (max-width: 859px) { .local__panel { grid-template-columns: 1fr; } }
@media (max-width: 479px) {
  .caracteristica { grid-template-columns: 34px 1fr; column-gap: 8px; padding: 10px; }
  .caracteristica svg { width: 34px; height: 34px; }
  .caracteristica strong { font-size: 0.9375rem; }
}
@media (max-width: 339px) { .local__lista { grid-template-columns: 1fr; } }

/* La sección de opiniones viene después de la franja a cuadros */
.local + .opiniones { padding-top: clamp(56px, 7vw, 100px); }

/* ---------- Contacto ---------- */
.contacto { padding-top: var(--entre-secciones); }
.contacto__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; justify-items: center; text-align: center; gap: 14px;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px);
  border: var(--borde); border-radius: var(--radio-xl);
  background: var(--naranja); box-shadow: var(--sombra-grande);
}
/* Rayos de fondo, como en la portada */
.contacto__panel::before {
  content: ""; position: absolute; z-index: -1; inset: -50%;
  background: repeating-conic-gradient(rgba(248, 245, 232, 0.16) 0 9deg, transparent 0 18deg); /* taste-skill-ignore: rayos retro */
}
.contacto__titulo {
  font-family: var(--fuente-titulos); font-size: clamp(2.25rem, 1.3rem + 4vw, 4.5rem); font-weight: 400;
  line-height: 0.95; text-transform: uppercase;
  color: var(--crema); -webkit-text-stroke: 2px var(--negro); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--azul);
}
.contacto__texto { max-width: 36ch; font-size: var(--paso-lead); font-weight: 700; }
.contacto__acciones { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.contacto__personaje {
  position: absolute; height: auto; overflow: visible;
  filter: drop-shadow(4px 4px 0 var(--azul));
  animation: flotar 6s ease-in-out infinite;
}
.contacto__personaje--burger { width: clamp(80px, 12vw, 150px); left: 4%; bottom: 10%; rotate: -10deg; }
.contacto__personaje--papas { width: clamp(56px, 8vw, 104px); right: 5%; top: 12%; rotate: 12deg; animation-delay: -3s; }
@media (max-width: 639px) {
  .contacto__panel { padding-top: 104px; }
  .contacto__personaje--burger { width: 66px; left: 10%; top: 14px; bottom: auto; }
  .contacto__personaje--papas { width: 56px; right: 12%; top: 16px; }
  .contacto__acciones .boton { flex: 1 1 100%; }
}