/* ==========================================================================
   BOCETO — ESTILOS
   Estilo "app": todo redondeado, letras gorditas (Fredoka) para títulos y
   una sans limpia (Plus Jakarta Sans) para textos. Fondos con profundidad:
   brillos suaves en amarillo/rojo y una textura de grano muy sutil.
   ========================================================================== */

/* ---------- Tipografías (alojadas en el proyecto) ---------- */
@font-face {
  font-family: "Fredoka";
  src: url("../assets/fonts/fredoka-latin-wdth.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}
@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 */
  --negro: #0b0b0b;
  --grafito: #151515;
  --grafito-2: #1f1f1f;
  --grafito-3: #2b2b2b;
  --amarillo: #ffc61a;
  --amarillo-claro: #ffd95c;
  --amarillo-2: #f2b705;
  --rojo: #e2262c;
  --blanco: #ffffff;
  --tinta-suave: #c4c4c4;
  --verde-wa: #1fa855;
  --vidrio: rgba(255, 255, 255, 0.07);
  --vidrio-2: rgba(255, 255, 255, 0.12);

  /* Tipografía */
  --fuente-titulos: "Fredoka", "Arial Rounded MT Bold", 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.25rem, 1.1rem + 0.6vw, 1.5rem);      /* 20–24px */
  --paso-titulo: clamp(2.75rem, 1.5rem + 5vw, 5.75rem);     /* 44–92px */

  /* Formas: radios de "app" */
  --radio-xl: clamp(24px, 3vw, 36px);
  --radio-l: 24px;
  --radio-m: 18px;
  --radio-s: 14px;
  --pastilla: 999px;

  /* Espacios */
  --margen: clamp(16px, 3vw, 32px);
  --ancho-max: 1280px;
  --entre-secciones: clamp(80px, 10vw, 160px);
  --alto-cabecera: 68px;

  /* Sombras suaves (solo en elementos que flotan) */
  --sombra-flotante: 0 18px 40px rgba(0, 0, 0, 0.45);

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

/* ---------- 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(--negro);
}
body {
  position: relative;
  margin: 0;
  color: var(--blanco);
  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;
}
/* Fondo general: brillos cálidos + grano sutil, fijo detrás de todo */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(60vw 60vw at 100% 0%, rgba(255, 198, 26, 0.10), transparent 60%),
    radial-gradient(50vw 50vw at 0% 100%, rgba(226, 38, 44, 0.08), transparent 60%),
    var(--negro);
}
body.con-barra { padding-bottom: 92px; }
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(--amarillo); color: var(--negro); }
:focus-visible { outline: 3px solid var(--amarillo); 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(--amarillo); color: var(--negro); padding: 12px 18px;
  font-weight: 700; border-radius: var(--pastilla);
}
.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: 700;
  font-stretch: 110%;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--amarillo);
}

/* ---------- Intro (2 segundos) ----------
   Caen pocas hamburguesas y papas, aparece el logo y todo se desvanece.
   --intro es lo que esperan las animaciones del inicio para arrancar. */
:root { --intro: 1.7s; }
.intro {
  position: fixed; inset: 0; z-index: 300;
  overflow: hidden;
  display: grid; place-items: center;
  /* El mismo fondo de la web: negro, brillos cálidos y grano */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(60vw 60vw at 100% 0%, rgba(255, 198, 26, 0.12), transparent 60%), /* taste-skill-ignore: fondo de la web */
    radial-gradient(50vw 50vw at 0% 100%, rgba(226, 38, 44, 0.1), transparent 60%), /* taste-skill-ignore */
    var(--negro);
  cursor: pointer;
  animation: intro-salir 400ms ease 1.6s forwards;
}
.intro.saltando { animation: intro-salir 220ms ease forwards; }
@keyframes intro-salir { to { opacity: 0; visibility: hidden; } }
.intro__simbolos { position: absolute; }

.intro__logo {
  position: relative; z-index: 1;
  width: min(42vw, 190px); height: auto; border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 198, 26, 0.9), 0 0 80px rgba(255, 198, 26, 0.35); /* taste-skill-ignore: halo del logo */
  animation: intro-logo 650ms var(--rebote) both 150ms;
}
@keyframes intro-logo { from { opacity: 0; transform: scale(0.6) rotate(-10deg); } }

.intro__cae {
  position: absolute; top: 0; left: var(--x);
  width: var(--tam);
  opacity: 0.9;
  transform: translateY(-30vh) rotate(var(--giro-desde));
  animation: intro-caer var(--dur) cubic-bezier(0.45, 0, 0.75, 1) var(--retraso) both;
}
.intro__cae svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 960px) { .intro__cae { width: calc(var(--tam) * 1.45); } }
@keyframes intro-caer {
  from { transform: translateY(-30vh) rotate(var(--giro-desde)); }
  to { transform: translateY(115vh) rotate(var(--giro-hasta)); }
}
/* Pocas piezas, repartidas a lo ancho, con tamaños y tiempos distintos */
.intro__cae--1 { --x: 6%;  --tam: 78px; --dur: 1.55s; --retraso: 0s;    --giro-desde: -18deg; --giro-hasta: 22deg; }
.intro__cae--2 { --x: 22%; --tam: 52px; --dur: 1.45s; --retraso: 0.25s; --giro-desde: 12deg;  --giro-hasta: -20deg; }
.intro__cae--3 { --x: 40%; --tam: 64px; --dur: 1.6s;  --retraso: 0.45s; --giro-desde: 8deg;   --giro-hasta: -26deg; }
.intro__cae--4 { --x: 58%; --tam: 58px; --dur: 1.5s;  --retraso: 0.1s;  --giro-desde: -10deg; --giro-hasta: 18deg; }
.intro__cae--5 { --x: 74%; --tam: 86px; --dur: 1.6s;  --retraso: 0.3s;  --giro-desde: 15deg;  --giro-hasta: -15deg; }
.intro__cae--6 { --x: 88%; --tam: 48px; --dur: 1.4s;  --retraso: 0.05s; --giro-desde: -14deg; --giro-hasta: 24deg; }
.intro__cae--7 { --x: 32%; --tam: 56px; --dur: 1.4s;  --retraso: 0.55s; --giro-desde: -6deg;  --giro-hasta: 30deg; }
@media (max-width: 559px) {
  .intro__cae { --tam: 50px !important; }
  .intro__cae--1, .intro__cae--5 { --tam: 62px !important; }
}

/* 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 ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border: 0; border-radius: var(--pastilla);
  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), background-color var(--rapido), color var(--rapido), box-shadow var(--rapido);
  touch-action: manipulation;
  user-select: none;
}
.boton:active { transform: scale(0.96); }
.boton--grande { min-height: 56px; padding: 16px 30px; }
.boton--ancho { width: 100%; }
.boton--amarillo { background: var(--amarillo); color: var(--negro); }
.boton--negro { background: var(--negro); color: var(--blanco); }
.boton--suave { background: var(--vidrio-2); color: var(--blanco); }
.boton--whatsapp { background: var(--verde-wa); color: var(--blanco); }
@media (hover: hover) {
  .boton--amarillo:hover { background: var(--amarillo-claro); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 198, 26, 0.25); }
  .boton--negro:hover { background: var(--grafito-3); transform: translateY(-2px); }
  .boton--suave:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
  .boton--whatsapp:hover { background: #17924a; transform: translateY(-2px); }
}

/* ---------- Encabezado ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 11, 11, 0.96);
}
.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; align-items: center; gap: 12px;
  text-decoration: none;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em;
}
.cabecera__marca img { width: 46px; height: 46px; border-radius: 50%; }
.cabecera__nav { display: flex; align-items: center; gap: 6px; }
.cabecera__nav a {
  text-decoration: none; font-weight: 700;
  padding: 10px 16px; border-radius: var(--pastilla);
  transition: background-color var(--rapido), color var(--rapido);
}
.cabecera__nav a:hover { background: var(--vidrio); color: var(--amarillo); }
.cabecera__pedir { margin-left: 10px; min-height: 46px; padding: 10px 20px; }
.cabecera__acciones { display: flex; align-items: center; gap: 8px; }

.boton-carrito, .boton-menu {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grafito-2); border: 0; color: var(--blanco);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva);
}
.boton-carrito:active, .boton-menu:active { transform: scale(0.92); }
@media (hover: hover) { .boton-carrito:hover, .boton-menu:hover { background: var(--grafito-3); } }
.boton-carrito__cuenta {
  position: absolute; top: -4px; right: -4px;
  min-width: 24px; height: 24px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--rojo); color: var(--blanco);
  font-size: 0.8125rem; font-weight: 800; border-radius: var(--pastilla);
  box-shadow: 0 0 0 3px var(--negro);
}
.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: 2.5px; 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: 859px) {
  .cabecera__marca span { display: none; }
  .boton-menu { display: grid; }
  .cabecera__nav {
    position: absolute; top: calc(var(--alto-cabecera) - 4px); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px;
    background: var(--grafito-2);
    border-radius: var(--radio-l);
    box-shadow: var(--sombra-flotante); /* taste-skill-ignore: menú desplegable flotante */
    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); border-radius: var(--radio-m); }
  .cabecera__pedir { margin: 8px 0 0; min-height: 56px; }
}

/* ---------- Hero ---------- */
.hero { padding: 8px 12px 0; max-width: 1600px; margin-inline: auto; }
.hero__panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radio-xl);
  background: var(--grafito);
}
/* FONDO DEL HERO: patrón de dibujos a lápiz (hamburguesas, papas, lápiz).
   Para poner una foto del local, reemplazá esta línea por
   url("../assets/images/local/TU-FOTO.jpg") center / cover no-repeat. */
.hero__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../assets/images/marca/patron-boceto.svg") 0 0 / 260px repeat;
}
/* Capa oscura (más fuerte del lado del texto) + brillo amarillo detrás del sello */
.hero__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(34vw 34vw at 76% 55%, rgba(255, 198, 26, 0.24), transparent 62%), /* taste-skill-ignore: brillo pedido por el cliente */
    linear-gradient(90deg, rgba(11, 11, 11, 0.9) 0%, rgba(11, 11, 11, 0.62) 50%, rgba(11, 11, 11, 0.38) 100%); /* taste-skill-ignore: velo sobre la foto */
}
.hero__grilla {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: clamp(24px, 4vw, 64px);
  min-height: min(calc(100svh - var(--alto-cabecera) - 40px), 860px);
  padding: clamp(32px, 5vw, 72px);
}
.estado {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 20px; /* 20px y no pastilla: el texto puede ocupar dos renglones */
  background: var(--vidrio-2);
  font-weight: 700; 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--abierto::before { background: #2bd46b; box-shadow: 0 0 0 4px rgba(43, 212, 107, 0.2); animation: latido 2.4s ease-in-out infinite; }
.estado--cerrado::before { background: var(--rojo); box-shadow: 0 0 0 4px rgba(226, 38, 44, 0.2); }
@keyframes latido { 50% { opacity: 0.4; } }

.hero__titulo {
  margin-top: 22px;
  font-family: var(--fuente-titulos);
  font-size: var(--paso-titulo);
  font-weight: 700; font-stretch: 112%;
  line-height: 0.98; letter-spacing: -0.015em;
  max-width: 11ch;
  text-wrap: balance;
}
.hero__titulo span { color: var(--amarillo); }
.hero__bajada {
  margin-top: 22px;
  max-width: 40ch;
  font-size: var(--paso-lead); line-height: 1.45; font-weight: 500;
  color: #e6e6e6;
}
.hero__acciones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__datos {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-width: 620px;
}
.hero__datos li {
  display: grid; gap: 2px;
  padding: 14px 16px; border-radius: var(--radio-m);
  background: var(--vidrio);
}
.hero__datos strong { font-size: var(--paso-chico); line-height: 1.3; }
.hero__datos span { font-size: 0.875rem; color: var(--tinta-suave); line-height: 1.35; }

/* Sello con el logo oficial y texto que gira alrededor */
.hero__sello { position: relative; display: grid; place-items: center; padding: 6%; }
.sello {
  position: relative;
  width: min(100%, 460px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.sello::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--amarillo);
  box-shadow: 0 0 0 14px rgba(255, 198, 26, 0.12), 0 0 120px rgba(255, 198, 26, 0.35); /* taste-skill-ignore: halo del sello */
}
.sello__anillo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: girar 36s linear infinite;
}
.sello__anillo text {
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 22px; letter-spacing: 0.04em;
  fill: var(--negro);
}
.sello__logo {
  position: relative;
  width: 68%; height: auto; border-radius: 50%;
  box-shadow: 0 0 0 8px 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: 10px 18px; border-radius: var(--pastilla);
  background: var(--amarillo); color: var(--negro);
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.0625rem; white-space: nowrap;
  /* Borde negro para que se despegue del anillo amarillo */
  box-shadow: 0 0 0 3px var(--negro), var(--sombra-flotante); /* taste-skill-ignore: etiquetas flotantes */
  animation: flotar 6s ease-in-out infinite;
}
.etiqueta--1 { top: 10%; left: 0; }
.etiqueta--2 { bottom: 10%; right: 0; animation-delay: -3s; }
@keyframes flotar { 50% { transform: translateY(-10px); } }

/* Entrada del hero, escalonada */
/* Arrancan 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: 20px 20px 28px; }
  /* En vertical: la foto se ve arriba (detrás del sello) y se oscurece abajo, donde va el texto */
  .hero__panel::after {
    background:
      radial-gradient(60vw 60vw at 50% 22%, rgba(255, 198, 26, 0.22), transparent 62%), /* taste-skill-ignore */
      linear-gradient(180deg, rgba(11, 11, 11, 0.15) 0%, rgba(11, 11, 11, 0.45) 38%, rgba(11, 11, 11, 0.94) 60%); /* taste-skill-ignore */
  }
  .hero__panel::before { background-position: center top; }
  .hero__sello { order: -1; justify-self: center; width: min(100%, 380px); padding: 4% 0; }
  .sello { width: min(100%, 300px); }
  /* En pantallas chicas las etiquetas van a las esquinas para no tapar el logo */
  .etiqueta { font-size: 0.9375rem; padding: 8px 14px; }
  .etiqueta--1 { left: 0; top: 2%; }
  .etiqueta--2 { right: 0; bottom: 2%; }
  .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) {
  .sello { width: min(100%, 250px); }
  .sello__anillo text { font-size: 23px; }
  .hero__acciones .boton { flex: 1 1 auto; }
}

/* ---------- 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; color: #e6e6e6; }
@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: rgba(11, 11, 11, 0.96);
  margin-top: 36px;
}
.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: 10px;
  min-height: 46px; padding: 10px 20px; border-radius: var(--pastilla);
  background: var(--grafito-2);
  font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: background-color var(--rapido), color var(--rapido), transform var(--rapido) var(--curva);
}
.categorias a:active { transform: scale(0.96); }
.categorias a span {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: var(--pastilla); background: var(--vidrio-2); font-size: 0.8125rem;
}
.categorias a[aria-current="true"] { background: var(--amarillo); color: var(--negro); }
.categorias a[aria-current="true"] span { background: rgba(0, 0, 0, 0.12); }
@media (hover: hover) { .categorias a:not([aria-current="true"]):hover { background: var(--grafito-3); } }
@media (max-width: 559px) {
  .categorias__fila { gap: 5px; }
  /* 4 categorías tienen que entrar en una fila en el celular */
  .categorias a { flex: 1 1 auto; justify-content: center; padding: 9px 6px; font-size: 0.875rem; }
  .categorias a span { display: none; }
}

.categoria { padding-top: clamp(40px, 6vw, 80px); scroll-margin-top: calc(var(--alto-cabecera) + 72px); }
.categoria__cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 28px;
}
.categoria__titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 700; font-stretch: 110%; line-height: 1;
}
.categoria__cuenta {
  flex: none; white-space: nowrap;
  padding: 6px 14px; border-radius: var(--pastilla); background: var(--vidrio);
  font-size: var(--paso-chico); font-weight: 700; color: var(--tinta-suave);
}

/* Hamburguesas: tarjetas redondeadas tipo app */
.platos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.plato {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px;
  align-items: start;
  padding: 14px;
  border-radius: var(--radio-l);
  background: linear-gradient(160deg, #1d1d1d, #141414); /* taste-skill-ignore: profundidad pedida por el cliente */
  transition: translate var(--medio) var(--curva), background-color var(--medio);
}
/* "translate" (y no "transform") para no pisar la animación de aparición */
@media (hover: hover) { .plato:hover { translate: 0 -4px; } }
.plato__foto {
  position: relative;
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radio-m);
  background: var(--negro);
}
.plato__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--medio) var(--curva); }
/* PLACEHOLDER: se muestra mientras el producto no tenga foto (foto: null en data.js) */
.plato__foto--placeholder img { object-fit: contain; padding: 12%; opacity: 0.6; }
@media (hover: hover) { .plato:hover .plato__foto img { transform: scale(1.06) rotate(-3deg); } }

.plato__info { padding-top: 4px; }
.plato__linea { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plato__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--paso-lead); font-weight: 600; font-stretch: 105%;
  line-height: 1.15;
}
.precio {
  flex: none;
  padding: 4px 12px; border-radius: var(--pastilla);
  background: var(--blanco); color: var(--negro);
  font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: var(--paso-chico); line-height: 1.5;
}
.plato__ingredientes { margin-top: 6px; color: var(--tinta-suave); font-size: var(--paso-chico); line-height: 1.5; max-width: 44ch; }
.plato__nota {
  display: inline-block; margin-top: 8px;
  padding: 3px 10px; border-radius: var(--pastilla);
  background: rgba(255, 198, 26, 0.14); color: var(--amarillo);
  font-weight: 700; font-size: 0.8125rem;
}
.plato__accion { margin-top: 12px; }

@media (max-width: 959px) {
  .platos { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .plato { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .plato__nombre { font-size: 1.1875rem; }
}

/* Control "Agregar" / cantidad (se reutiliza en todo el sitio) */
.agregar::before { content: "+"; font-size: 1.25em; line-height: 0.8; margin-right: -2px; }
.agregar { min-height: 46px; padding: 10px 20px; animation: entrar-control 280ms var(--rebote); }
.cantidad {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--pastilla);
  background: var(--amarillo); color: var(--negro);
  animation: entrar-control 280ms var(--rebote);
}
.cantidad button {
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  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 output {
  min-width: 30px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cantidad output.cambia { animation: tic 320ms var(--rebote); }
@keyframes tic { 40% { transform: translateY(-4px) scale(1.3); } }
@keyframes entrar-control { from { opacity: 0; transform: scale(0.85); } }

/* Papas: panel oscuro cálido con papas que caen de fondo */
.categoria--papas .papas {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 32px;
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radio-xl);
  color: var(--blanco);
  background:
    radial-gradient(42vw 32vw at 92% 0%, rgba(255, 198, 26, 0.22), transparent 65%), /* taste-skill-ignore: brillo cálido */
    radial-gradient(30vw 30vw at 0% 100%, rgba(226, 38, 44, 0.12), transparent 65%), /* taste-skill-ignore */
    #18120a;
}
.papas__texto .categoria__titulo { color: var(--amarillo); }
.papas__texto p { margin-top: 14px; max-width: 32ch; font-weight: 500; color: #ece3d2; }

/* Lluvia de papas: tenue y lenta, detrás del contenido */
.papas__lluvia {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  container-type: size; /* permite que las papas caigan exactamente el alto del panel */
}
.papa-cae {
  position: absolute; top: 0; left: var(--x);
  color: var(--amarillo); opacity: 0.17;
  transform: translateY(-90px) rotate(var(--giro)) scale(var(--escala));
  animation: papa-caer var(--duracion) linear var(--retraso) infinite;
  will-change: transform;
}
.papa-cae svg { display: block; }
@keyframes papa-caer {
  from { transform: translateY(-90px) rotate(var(--giro)) scale(var(--escala)); }
  to { transform: translateY(calc(100cqh + 20px)) rotate(calc(var(--giro) + 50deg)) scale(var(--escala)); }
}
/* Navegadores sin esa medida, o con "menos movimiento": papas quietas repartidas */
@supports not (height: 1cqh) { .papa-cae { animation: none; top: var(--y); transform: rotate(var(--giro)) scale(var(--escala)); } }
@media (prefers-reduced-motion: reduce) { .papa-cae { animation: none !important; top: var(--y); transform: rotate(var(--giro)) scale(var(--escala)); } }

.papas__grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.caja {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 16px; border-radius: var(--radio-l);
  background: rgba(36, 28, 16, 0.86);
  transition: translate var(--medio) var(--curva), background-color var(--medio);
}
.caja--tocable { cursor: pointer; }
.caja--tocable:active { scale: 0.985; }
/* "translate" (y no "transform") para no pisar la animación de aparición */
@media (hover: hover) { .caja:hover { translate: 0 -4px; background: rgba(48, 37, 20, 0.92); } }
.caja__dibujo {
  height: 118px; border-radius: var(--radio-m);
  background: radial-gradient(circle at 50% 60%, rgba(255, 198, 26, 0.22), transparent 70%); /* taste-skill-ignore */
  padding: 8px;
}
.caja__dibujo svg { display: block; width: 100%; height: 100%; }
.caja__info { display: grid; gap: 2px; }
.caja__tamano { font-family: var(--fuente-titulos); font-size: var(--paso-lead); font-weight: 700; line-height: 1.1; }
.caja__tipo { font-weight: 700; color: var(--amarillo); }
.caja__detalle { font-size: var(--paso-chico); color: #cfc6b5; }
.caja__pie { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.caja__pie .agregar { margin-left: auto; }
@media (max-width: 859px) {
  .categoria--papas .papas { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 559px) {
  .papas__grilla { gap: 10px; }
  .caja { padding: 10px 12px 12px; }
  .caja__dibujo { height: 96px; }
  .caja__tamano { font-size: 1.125rem; }
  .caja__pie { flex-direction: column; align-items: stretch; }
  .caja__pie .precio { align-self: flex-start; }
  .caja__pie .agregar { margin-left: 0; width: 100%; }
  .caja__pie .plato__en-pedido { align-self: flex-start; }
}

/* Bebidas: panel grafito con un brillo rojo */
.bebidas {
  padding: clamp(22px, 4vw, 44px);
  border-radius: var(--radio-xl);
  background:
    radial-gradient(40vw 30vw at 0% 0%, rgba(226, 38, 44, 0.16), transparent 65%), /* taste-skill-ignore */
    var(--grafito);
}
.bebidas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bebida {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: var(--radio-l);
  background: var(--grafito-2);
  transition: translate var(--medio) var(--curva);
}
@media (hover: hover) { .bebida:hover { translate: 0 -3px; } }
.bebida__botella { flex: none; width: 40px; height: auto; }
.bebida__info { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.bebida__nombre { font-family: var(--fuente-titulos); font-size: var(--paso-lead); font-weight: 600; line-height: 1.15; }
.bebida__control { flex: none; }
@media (max-width: 759px) { .bebidas__lista { grid-template-columns: 1fr; } }
/* En el celular el contador va abajo, así el nombre entra en un renglón */
@media (max-width: 559px) {
  .bebida { flex-wrap: wrap; row-gap: 12px; }
  .bebida__nombre { font-size: 1.1875rem; white-space: nowrap; }
  .bebida__control { flex: 1 1 100%; display: flex; }
  .bebida__control .boton, .bebida__control .cantidad { width: 100%; justify-content: space-between; }
  .bebida__control .agregar { justify-content: center; }
}

/* Adicionales: panel grafito */
.adicionales {
  padding: clamp(22px, 4vw, 44px);
  border-radius: var(--radio-xl);
  background:
    radial-gradient(40vw 30vw at 100% 100%, rgba(226, 38, 44, 0.14), transparent 65%), /* taste-skill-ignore */
    var(--grafito);
}
.adicionales__ayuda { margin-bottom: 24px; color: var(--tinta-suave); max-width: 60ch; }
.adicionales__ayuda a { color: var(--amarillo); font-weight: 700; }
.adicionales__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.adicional {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border-radius: var(--radio-m);
  background: var(--grafito-2);
}
.adicional__nombre { font-weight: 700; line-height: 1.3; }
.adicional__detalle { font-size: var(--paso-chico); color: var(--tinta-suave); }
.adicional__pie { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adicionales__ir { margin-top: 20px; }
.adicionales__grupo {
  margin: 22px 0 10px; font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 600; color: var(--amarillo);
}
.adicionales__ayuda + .adicionales__grupo { margin-top: 0; }
@media (max-width: 959px) { .adicionales__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .adicionales__lista { grid-template-columns: 1fr; } }

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

/* ---------- Opiniones: carrusel ---------- */
.opiniones { padding-top: var(--entre-secciones); }
.opiniones__panel {
  padding: clamp(24px, 4.5vw, 56px);
  border-radius: var(--radio-xl);
  background:
    radial-gradient(40vw 30vw at 0% 0%, rgba(255, 198, 26, 0.16), transparent 65%), /* taste-skill-ignore */
    var(--grafito);
  overflow: hidden;
}
.opiniones__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Las reseñas usan el estilo de las tarjetas de Google: fondo blanco,
   letra Roboto/Arial, grises de Google y estrellas en su amarillo. */
.nota-resumen {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 18px; border-radius: 16px;
  background: #fff; color: #202124;
  font-family: Roboto, Arial, sans-serif;
}
.nota-resumen__numero { font-size: 2.75rem; font-weight: 400; line-height: 1; color: #202124; }
.nota-resumen p { margin-top: 4px; font-size: 0.875rem; color: #70757a; }
/* Estrellas con relleno parcial según la nota (--nota se carga desde data.js) */
.estrellas {
  --nota: 4.5;
  display: inline-block; font-size: 1.25rem; letter-spacing: 1px; line-height: 1;
  background: linear-gradient(90deg, #fbbc04 calc(var(--nota) / 5 * 100%), #dadce0 0); /* taste-skill-ignore: relleno parcial de estrellas */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.carrusel { margin-top: 36px; }
.carrusel__pista {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px 2px 8px;
  margin-inline: -2px;
}
.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: 16px;
  background: #fff; color: #202124;
  font-family: Roboto, Arial, sans-serif;
}
.resena__cabeza { display: flex; align-items: center; gap: 12px; }
.resena__avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 1.125rem; font-weight: 500;
}
.resena__nombre { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: #202124; }
.resena__fuente { display: block; font-size: 0.8125rem; line-height: 1.3; color: #70757a; }
.resena__linea { display: flex; align-items: center; gap: 8px; }
.resena__estrellas { font-size: 0.9375rem; letter-spacing: 1px; color: #fbbc04; }
.resena__estrellas-vacias { color: #dadce0; }
.resena__fecha { font-size: 0.8125rem; color: #70757a; }
.resena__texto { font-size: 0.9375rem; line-height: 1.55; color: #3c4043; }

/* Enlace a Google: chico y discreto */
.opiniones__google {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: max-content; min-height: 40px; margin: 4px auto 0;
  font-size: 0.8125rem; font-weight: 600; color: var(--tinta-suave);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color var(--rapido), text-decoration-color var(--rapido);
}
.opiniones__google:hover { color: var(--amarillo); text-decoration-color: currentColor; }

.carrusel__controles { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.carrusel__flecha {
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vidrio-2); color: var(--blanco);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva), opacity var(--rapido);
}
.carrusel__flecha:active { transform: scale(0.9); }
.carrusel__flecha:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .carrusel__flecha:not(:disabled):hover { background: var(--amarillo); color: var(--negro); } }
.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: #555;
  transition: width var(--medio) var(--curva), background-color var(--medio);
}
.carrusel__puntos button[aria-current="true"]::before { width: 26px; background: var(--amarillo); }

.opiniones__aclaracion { margin-top: 22px; text-align: center; font-size: var(--paso-chico); color: var(--tinta-suave); }

@media (max-width: 559px) {
  .opiniones__cabeza { align-items: flex-start; }
  .resena { padding: 16px 18px 18px; }
}

/* ---------- Ubicación: el ticket ---------- */
.ubicacion { padding-top: var(--entre-secciones); }
.ticket {
  --muesca: 30px;
  position: relative;
  margin-top: 36px;
  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 */
}
.ticket__datos { padding: clamp(26px, 4vw, 52px); }
.ticket__direccion {
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 700; font-stretch: 110%;
  line-height: 1;
}
.ticket__localidad { display: inline-block; margin-top: 10px; font-family: var(--fuente); font-size: var(--paso-lead); font-weight: 600; }
.ticket__lista { margin-top: 28px; display: grid; gap: 10px; }
.ticket__lista div {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px;
  padding: 12px 16px; border-radius: var(--radio-m); background: #f2f2f2;
}
.ticket__lista dt { font-weight: 800; }
.ticket__lista a { font-weight: 700; 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);
}
.ticket .boton--suave { background: #ececec; color: var(--negro); }
@media (hover: hover) {
  .ticket .boton--amarillo:hover { box-shadow: none; }
  .ticket .boton--suave:hover { background: #dedede; }
}

@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: 12px;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px;
}
.ubicacion__mapa { overflow: hidden; border-radius: var(--radio-xl); background: var(--grafito); min-height: 380px; }
.ubicacion__mapa iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
.ubicacion__local { overflow: hidden; border-radius: var(--radio-xl); background: var(--grafito); }
.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: var(--entre-secciones) 12px 12px;
  overflow: hidden;
  border-radius: var(--radio-xl);
  background:
    radial-gradient(50vw 30vw at 50% 0%, rgba(255, 198, 26, 0.14), transparent 65%), /* taste-skill-ignore */
    var(--grafito);
}
.pie__nombre {
  padding-top: clamp(32px, 5vw, 64px);
  font-family: var(--fuente-titulos);
  font-size: clamp(3rem, 12.5vw, 12.5rem);
  font-weight: 700; font-stretch: 105%;
  line-height: 0.9; letter-spacing: -0.02em;
  color: var(--amarillo);
  white-space: nowrap; text-align: center;
}
.pie__grilla {
  margin-top: 48px;
  display: grid; grid-template-columns: 1.1fr 0.7fr 1.1fr 1fr; gap: 32px;
  align-items: start;
}
.pie__marca { display: flex; align-items: center; gap: 16px; }
.pie__marca img { width: 76px; height: 76px; border-radius: 50%; }
.pie__titulo { font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 600; color: var(--amarillo); }
.pie__lista { margin-top: 10px; display: grid; gap: 2px; }
.pie__lista a {
  display: inline-flex; align-items: center; min-height: 40px;
  text-decoration: none; font-weight: 600; color: #e6e6e6;
  transition: color var(--rapido);
}
.pie__lista a:hover { color: var(--amarillo); }
.pie__lista .pie__dato { margin-left: 6px; color: var(--tinta-suave); font-weight: 500; }
.pie__texto { margin-top: 10px; color: #e6e6e6; }
.pie__boton { margin-top: 16px; }

/* 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: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore: separador sutil del pie */
}
.pie__legal { font-size: var(--paso-chico); color: var(--tinta-suave); }
.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: 600; color: var(--tinta-suave);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color var(--rapido), text-decoration-color var(--rapido);
}
.pie__politica:hover { color: var(--amarillo); text-decoration-color: currentColor; }

@media (max-width: 959px) {
  .pie__grilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 559px) {
  .pie { margin-inline: 8px; }
  .pie__grilla { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .pie__marca, .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: 0;
  border-radius: var(--radio-xl);
  background: var(--grafito); color: var(--blanco);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); /* taste-skill-ignore: diálogo */
  overflow: hidden;
}
.legal[open] { display: flex; flex-direction: column; animation: legal-entrar 380ms var(--rebote); }
.legal::backdrop { background: rgba(0, 0, 0, 0.72); }
.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: 22px 20px 14px 26px;
}
.legal__cabeza h2 { font-family: var(--fuente-titulos); font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); font-weight: 700; line-height: 1.05; color: var(--amarillo); }
.legal__cerrar {
  flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--grafito-2); color: var(--blanco);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva);
}
.legal__cerrar:active { transform: scale(0.9); }
@media (hover: hover) { .legal__cerrar:hover { background: var(--grafito-3); } }

.legal__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 26px 24px; }
.legal__cuerpo h3 { margin-top: 24px; font-family: var(--fuente-titulos); font-size: 1.1875rem; font-weight: 600; }
.legal__cuerpo p, .legal__cuerpo li { font-size: 1rem; line-height: 1.6; color: #e2e2e2; }
.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(--amarillo); }
.legal__cuerpo .legal__datos { padding: 14px 16px; list-style: none; border-radius: var(--radio-m); background: var(--grafito-2); }
.legal__fecha { font-size: var(--paso-chico) !important; color: var(--tinta-suave) !important; }
.legal__accion { margin-top: 14px; display: grid; gap: 8px; justify-items: start; }
.legal__estado { font-size: var(--paso-chico) !important; color: #7fe0a2 !important; margin-top: 0 !important; }
.legal__estado:empty { display: none; }

/* Dato todavía no confirmado por el negocio */
.pendiente {
  display: inline-block; padding: 1px 10px; border-radius: var(--pastilla);
  background: rgba(255, 198, 26, 0.14); color: var(--amarillo);
  font-size: 0.875rem; font-weight: 700; line-height: 1.6;
}

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

/* 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-radius: var(--radio-xl) var(--radio-xl) 0 0;
  }
  .legal[open] { animation: legal-subir 420ms var(--curva); }
  .legal.cerrando { animation: legal-bajar 220ms ease forwards; }
  .legal__cabeza { padding: 18px 14px 12px 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: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 22px; border: 0; border-radius: var(--pastilla);
  background: var(--amarillo); color: var(--negro);
  font-weight: 800; font-size: var(--paso-texto);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); /* taste-skill-ignore: barra flotante */
  transition: transform var(--rapido) var(--curva);
}
.barra-pedido__boton:active { transform: scale(0.98); }
.barra-pedido__boton strong { padding: 10px 16px; border-radius: var(--pastilla); background: var(--negro); color: var(--amarillo); }
.barra-pedido__cuenta {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 8px; padding: 0 7px;
  background: rgba(0, 0, 0, 0.14); 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(0, 0, 0, 0.62);
  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(460px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--radio-xl);
  background: var(--grafito); color: var(--blanco);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5); /* taste-skill-ignore: panel del carrito (diálogo) */
  transform: translateX(calc(100% + 24px));
  transition: transform 480ms var(--curva);
}
.carrito.visible { transform: none; }
.carrito__cabeza {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 8px;
}
.carrito__cabeza h2 { font-family: var(--fuente-titulos); font-size: 2rem; font-weight: 700; color: var(--amarillo); line-height: 1; }
.carrito__cerrar {
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--grafito-2);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva);
}
.carrito__cerrar:active { transform: scale(0.9); }
@media (hover: hover) { .carrito__cerrar:hover { background: var(--grafito-3); } }
.carrito__cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 24px; }
.carrito__vacio { padding: 32px 0; display: grid; gap: 16px; justify-items: start; color: var(--tinta-suave); }

.carrito__items { display: grid; gap: 10px; }
.linea {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px;
  padding: 14px; border-radius: var(--radio-m);
  background: var(--grafito-2);
  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: 2px; font-size: var(--paso-chico); font-weight: 600; color: var(--amarillo); line-height: 1.35; }
.plato__en-pedido.cambia { animation: tic 320ms var(--rebote); }
.linea__unitario { font-size: var(--paso-chico); 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: 0; border-radius: var(--pastilla);
  background: var(--vidrio); color: var(--tinta-suave);
  font-size: var(--paso-chico); font-weight: 700;
  transition: background-color var(--rapido), color var(--rapido);
}
.linea__quitar:hover { background: rgba(226, 38, 44, 0.18); color: #ff7a7e; }

.checkout legend { font-family: var(--fuente-titulos); font-size: var(--paso-lead); font-weight: 600; }

/* Adicionales dentro de la hoja de la hamburguesa */
.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(--grafito-3);
  transition: background-color var(--medio);
}
.adicional-detalle.elegido { background: rgba(255, 198, 26, 0.16); }
.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); }
.adicional-detalle .cantidad { flex: none; }
.adicional-detalle--bebida { padding-left: 12px; }
.adicional-detalle--bebida .bebida__botella { flex: none; width: 22px; height: auto; margin-right: -2px; }
.adicional-detalle--bebida .adicional-detalle__texto { flex: 1; }
.adicional-detalle .cantidad button { width: 40px; height: 40px; }
.adicional-detalle .cantidad output { min-width: 22px; }

.checkout { margin-top: 32px; display: grid; gap: 24px; }
.checkout fieldset { margin: 0; padding: 0; border: 0; }
.checkout legend { margin-bottom: 12px; padding: 0; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: grid; place-items: center; text-align: center;
  min-height: 56px; padding: 10px; border-radius: var(--radio-m);
  background: var(--grafito-2);
  font-weight: 700; line-height: 1.2;
  transition: background-color var(--rapido), color var(--rapido), transform var(--rapido) var(--rebote);
}
.opcion input:checked + span { background: var(--amarillo); color: var(--negro); transform: scale(1.02); }
.opcion input:focus-visible + span { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.opcion input:active + span { transform: scale(0.97); }
.campo { display: grid; gap: 8px; }
.campo > span { font-weight: 700; }
.campo em { font-style: normal; font-weight: 400; color: var(--tinta-suave); }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--negro); color: var(--blanco);
  border: 2px solid var(--grafito-3); border-radius: var(--radio-s);
  font-size: 1rem; /* 16px: evita el zoom automático en iPhone */
  transition: border-color var(--rapido);
}
.campo textarea { resize: vertical; min-height: 80px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--amarillo); }
.campo input[aria-invalid="true"] { border-color: var(--rojo); }
.checkout__direccion { display: grid; gap: 16px; animation: subir 300ms var(--curva); }
.error { margin-top: 8px; color: #ff7a7e; font-weight: 700; font-size: var(--paso-chico); }

.carrito__pie {
  flex: none;
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
  background: var(--negro);
  border-radius: var(--radio-l) var(--radio-l) 0 0;
}
.carrito__subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; }
.carrito__subtotal strong { font-family: var(--fuente-titulos); font-size: 1.75rem; font-variant-numeric: tabular-nums; color: var(--amarillo); }
.carrito__subtotal strong.cambia { animation: tic 320ms var(--rebote); }
.carrito__envio { margin-top: 2px; font-size: var(--paso-chico); color: var(--tinta-suave); }
.carrito__pie .boton { margin-top: 14px; }
/* Aviso de local cerrado y botón de enviar bloqueado */
.carrito__cerrado {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radio-m);
  background: rgba(226, 38, 44, 0.14); color: #ffb3b5;
  font-size: var(--paso-chico); font-weight: 600; line-height: 1.45;
}
.boton--whatsapp:disabled {
  background: var(--grafito-3); color: var(--tinta-suave);
  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-radius: var(--radio-xl) var(--radio-xl) 0 0;
    transform: translateY(100%);
    box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.5); /* taste-skill-ignore: diálogo */
  }
  .carrito::before {
    content: ""; flex: none; align-self: center;
    width: 44px; height: 5px; margin-top: 10px; border-radius: var(--pastilla);
    background: var(--grafito-3);
  }
  .carrito__cabeza { padding: 10px 16px 6px; }
  .carrito__cuerpo { padding-inline: 16px; }
  .carrito__pie { padding-inline: 16px; }
}

/* ---------- Tarjeta de hamburguesa: se toca entera para ver el detalle ---------- */
.plato--tocable { cursor: pointer; }
.plato--tocable:active { scale: 0.985; }
.plato__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plato__en-pedido {
  padding: 5px 12px; border-radius: var(--pastilla);
  background: var(--vidrio-2); font-size: 0.8125rem; font-weight: 700;
  animation: entrar-control 280ms var(--rebote);
}

/* ---------- Detalle de hamburguesa ---------- */
body.detalle-abierto { overflow: hidden; }
.detalle-fondo {
  position: fixed; inset: 0; z-index: 64;
  background: rgba(0, 0, 0, 0.7);
  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(740px, calc(100dvh - 48px));
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: var(--radio-xl);
  background: var(--grafito); color: var(--blanco);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); /* taste-skill-ignore: diálogo */
}
.detalle__cerrar {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); color: var(--blanco);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva);
}
.detalle__cerrar:active { transform: scale(0.9); }
@media (hover: hover) { .detalle__cerrar:hover { background: rgba(0, 0, 0, 0.8); } }

.detalle__desplazable { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 0; }
.detalle__visual {
  position: relative; min-height: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 198, 26, 0.3), transparent 62%), /* taste-skill-ignore: brillo detrás del dibujo */
    #1c1c1c;
}
.detalle__lienzo { position: absolute; inset: 56px 18px 84px; }
.detalle__lienzo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.detalle__ilustracion {
  position: absolute; top: 18px; left: 18px;
  padding: 5px 12px; border-radius: var(--pastilla);
  background: rgba(0, 0, 0, 0.45); font-size: 0.8125rem; font-weight: 700; color: var(--tinta-suave);
}
.segmentado {
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0;
  display: flex; gap: 4px; padding: 4px; border-radius: var(--pastilla);
  background: rgba(0, 0, 0, 0.55);
}
.segmentado button {
  min-height: 42px; padding: 8px 20px; border: 0; border-radius: var(--pastilla);
  white-space: nowrap;
  background: transparent; color: var(--blanco); font-weight: 800;
  transition: background-color var(--medio) var(--curva), color var(--medio);
}
.segmentado button[aria-pressed="true"] { background: var(--amarillo); color: var(--negro); }

.detalle__info { overflow-y: auto; overscroll-behavior: contain; padding: 30px 28px 28px; }
.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(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 700; line-height: 1; }
.detalle__cabeza .precio { margin-top: 6px; font-size: var(--paso-texto); }
.detalle__ingredientes { margin-top: 12px; color: var(--tinta-suave); }

.opcion-bloque {
  margin-top: 16px; padding: 16px 16px 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: var(--radio-l); background: var(--grafito-2);
}
.opcion-bloque h3 { font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.opcion-bloque p { font-size: var(--paso-chico); color: var(--tinta-suave); }
.opcion-bloque--columna { flex-direction: column; align-items: stretch; }

.cantidad--oscura { background: var(--grafito-3); color: var(--blanco); }
@media (hover: hover) { .cantidad--oscura button:hover { background: rgba(255, 255, 255, 0.1); } }
.cantidad button:disabled { opacity: 0.35; cursor: default; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px 8px 8px; border: 0; border-radius: var(--pastilla);
  background: var(--grafito-3); color: var(--blanco);
  font-weight: 700; 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: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amarillo); 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: rgba(226, 38, 44, 0.16); color: #ffaeb1; }
.chip[aria-pressed="true"] .chip__texto { text-decoration: line-through; text-decoration-thickness: 2px; }
.chip[aria-pressed="true"] .chip__icono { background: 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(--negro);
}
.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: 60ms; }
.detalle.entrando .detalle__info > :nth-child(3) { animation-delay: 120ms; }
.detalle.entrando .detalle__info > :nth-child(4) { animation-delay: 180ms; }
.detalle.entrando .detalle__info > :nth-child(5) { animation-delay: 240ms; }
.detalle.entrando .detalle__lienzo { animation: aparecer-sello 700ms var(--rebote) both 80ms; }

/* Dibujo SVG */
.dibujo .capa, .dibujo .rotulo { transition: transform 650ms var(--curva), opacity 350ms ease; }
.dibujo .capa.oculta { opacity: 0; }
.dibujo .rotulo { opacity: 0; }
.dibujo.desarmada .rotulo:not(.oculta) { opacity: 1; }
.dibujo text { dominant-baseline: middle; }
.rotulo__titulo { font-family: var(--fuente-titulos); font-size: 18px; font-weight: 600; fill: var(--blanco); }
.rotulo__sub { font-family: var(--fuente); font-size: 14px; font-weight: 600; fill: var(--tinta-suave); }

/* En celular: hoja que sube desde abajo, con el dibujo 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-radius: var(--radio-xl) var(--radio-xl) 0 0;
  }
  .detalle__desplazable { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .detalle__visual { height: 46vh; height: 46svh; transition: height 600ms var(--curva); }
  .detalle.vista-desarmada .detalle__visual { height: 66vh; height: 66svh; }
  .detalle__lienzo { inset: 52px 10px 76px; }
  .detalle__info { overflow: visible; padding: 22px 18px 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-l);
  background: var(--blanco); color: var(--negro);
  font-weight: 700; box-shadow: var(--sombra-flotante); /* taste-skill-ignore: aviso flotante */
  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(92px + 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; }
}