/* Menú Pollito Loko: libro web que reproduce el diseño de Canva.
   Unidad base --u = 1 punto del PDF original (la página mide 595.5 × 842 pt). */

@font-face {
  font-family: "Noot Menu";
  src: url("assets/noot.woff2") format("woff2");
  font-display: swap;
}

:root {
  --tinta: #1e2122;
  --amarillo: #e7b42d;
  --amarillo-suave: #f0d27c;
  --rojo: #ff0000;
  --rojo-nota: #ff3131;
  --papel: #e6d7c5;
  --mesa: #1d130d;
  --crema: #fff6e3;
  --titulo: "Noot Menu", "Noto Sans", system-ui, sans-serif;
  --texto: "Poppins", system-ui, sans-serif;
  --u: 1px;
  --k: 1;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--mesa);
  color: var(--tinta);
  font-family: var(--texto);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Mesa (fondo de la escena) ---------- */
.mesa {
  position: fixed; inset: -60px;
  background: url("assets/portada.webp") center 60% / cover no-repeat;
  filter: blur(34px) saturate(1.15) brightness(.42);
  transform: scale(1.08);
}
.mesa::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(10, 6, 3, .75) 100%);
}

.escena {
  position: fixed; inset: 0 0 76px 0;
  display: grid; place-items: center;
}
.libro-marco { position: relative; will-change: transform; }
.libro { position: relative; }
.libro-marco::before { /* sombra del libro sobre la mesa */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -2.5%; height: 8%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(10px);
}

/* ---------- Barra de navegación ---------- */
.barra {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 999px;
  background: rgba(24, 15, 10, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 220, 150, .12);
}
.btn {
  appearance: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: transparent; color: var(--crema);
  font: 700 14px var(--texto);
  transition: background-color .2s, color .2s, transform .15s;
}
.btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { background: rgba(251, 200, 5, .16); color: #ffd84a; }
.btn:active { transform: scale(.94); }
.btn:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }
.btn[disabled] { opacity: .35; cursor: default; background: transparent; color: var(--crema); }
.btn-texto { width: auto; padding: 0 16px; background: #fbc805; color: var(--tinta); }
.btn-texto:hover { background: #ffd84a; color: var(--tinta); }
.contador {
  min-width: 64px; text-align: center; color: var(--crema);
  font: 600 13px var(--texto); font-variant-numeric: tabular-nums;
}

/* ---------- Páginas ---------- */
.page {
  position: relative; overflow: hidden;
  background: var(--papel) url("assets/papel.webp") center / cover;
}
.hoja { font-size: calc(12.2 * var(--u) * var(--k)); }
.page.\-\-left::after, .page.\-\-right::after { /* sombra del lomo */
  content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; z-index: 20;
}
.page.\-\-left::after { right: 0; background: linear-gradient(to left, rgba(60, 35, 10, .28), transparent); }
.page.\-\-right::after { left: 0; background: linear-gradient(to right, rgba(60, 35, 10, .28), transparent); }

.hoja { position: absolute; inset: 0; --k: 1; }
.abs { position: absolute; }
.mapa { position: absolute; right: -3.6%; bottom: -1.9%; width: 41.6%; pointer-events: none; }

/* Encabezado: quetzal, título, pollito (posiciones del PDF, en % de 595.5 × 200 pt) */
.cabeza { position: relative; width: 100%; aspect-ratio: 595.5 / 200; flex: none; pointer-events: none; }
.cabeza img { position: absolute; height: auto; }
.cabeza .quetzal { left: 0; top: 20%; width: 21%; }
.cabeza .titulo { left: 20.15%; top: 7.5%; width: 60.45%; }
.cabeza .pollito { left: 54.58%; top: 10%; width: 45.5%; transform-origin: 80% 70%; }
.cabeza .d-izq { left: 22.33%; top: 56%; width: 10.24%; }
.cabeza .d-der { left: 69.69%; top: 52%; width: 5.54%; }

/* Figura de cada plato: adornos vectoriales + sombra + foto, en % de su caja */
.fig { position: relative; margin: 0; aspect-ratio: var(--r); }
.fig > img { position: absolute; }
.fig .deco { inset: 0; width: 100%; height: 100%; }
.fig .foto { filter: drop-shadow(0 6px 10px rgba(60, 30, 5, .18)); }

/* Textos */
.titulo-plato {
  margin: 0; font: 400 calc(23.5 * var(--u) * var(--k)) / 1.4 var(--titulo);
  text-transform: uppercase; color: var(--tinta); letter-spacing: .01em;
}
.kicker { margin: 0; font: 400 calc(16.6 * var(--u) * var(--k)) / 1.25 var(--titulo); text-transform: uppercase; color: var(--rojo); }
.sub, .lista { font-weight: 600; line-height: 1.36; }
.sub { margin: 0; }
.nota { margin: 0 0 .2em; font-weight: 900; color: var(--rojo-nota); line-height: 1.36; }
.lista { margin: 0; padding-left: 1.55em; }
.lista li { margin: 0; }
.lista li::marker { font-size: .9em; }

/* ---------- Modo libro abierto (escritorio): todo en puntos del PDF ---------- */
.modo-doble .item .fig { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.modo-doble .item .txt { position: absolute; z-index: 2; }
.modo-doble .item.der .txt { left: calc(61 * var(--u)); top: calc(209 * var(--u)); width: calc(300 * var(--u)); }
.modo-doble .item.der .lista, .modo-doble .item.der .sub, .modo-doble .item.der .nota { max-width: calc(222 * var(--u)); }
.modo-doble .item.der .titulo-plato, .modo-doble .item.der .kicker { max-width: calc((var(--fx) - 66) * var(--u)); }
.modo-doble .item.izq .txt { left: calc(var(--tx) * var(--u)); top: calc(510 * var(--u)); width: calc((558 - var(--tx)) * var(--u)); }
.modo-doble .item.izq .lista, .modo-doble .item.izq .sub, .modo-doble .item.izq .nota { margin-left: calc(18 * var(--u)); }
.modo-doble .item.solo-titulo.izq .txt { top: calc(600 * var(--u)); }
.modo-doble .cabeza { position: absolute; top: 0; left: 0; }

/* Bebidas en escritorio: posiciones exactas de la página 11 */
.modo-doble .bebida .fig { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.modo-doble .bebida .titulo-plato { position: absolute; z-index: 2; }
.modo-doble .bebida.b1 .titulo-plato { left: calc(159 * var(--u)); top: calc(232 * var(--u)); width: calc(232 * var(--u)); }
.modo-doble .bebida.b2 .titulo-plato { left: calc(221 * var(--u)); top: calc(440 * var(--u)); width: calc(270 * var(--u)); }
.modo-doble .bebida.b3 .titulo-plato { left: calc(135 * var(--u)); top: calc(642 * var(--u)); width: calc(236 * var(--u)); }

/* ---------- Modo una página (celular / tableta vertical) ---------- */
.modo-simple .hoja { font-size: calc(13.4px * var(--k)); }
.modo-simple .hoja { display: flex; flex-direction: column; }
.modo-simple .titulo-plato { font-size: calc(22px * var(--k)); line-height: 1.32; }
.modo-simple .kicker { font-size: calc(15px * var(--k)); }
.modo-simple .cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding-bottom: 4%; }
.modo-simple .item .fig { flex: none; }
.modo-simple .item.der .fig { align-self: flex-end; }
.modo-simple .item.izq .fig { align-self: flex-start; }
.modo-simple .item .txt { position: relative; z-index: 2; padding: 0 8% 0 9%; margin-top: -2%; }
.modo-simple .item .txt > * + * { margin-top: .25em; }
.modo-simple .item .lista { margin-top: .45em; }
.modo-simple .item .kicker + .titulo-plato { margin-top: 0; }
.modo-simple .bebidas { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; padding-bottom: 6%; }
.modo-simple .bebida { display: flex; align-items: center; gap: 2%; padding: 0 7%; }
.modo-simple .bebida.izq { flex-direction: row-reverse; }
.modo-simple .bebida .fig { flex: none; }
.modo-simple .bebida .titulo-plato { font-size: calc(19px * var(--k)); }

/* ---------- Portada y contraportada ---------- */
.portada, .contra { background: #120b07; color: #fff; }
.portada .foto-portada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portada .logo { position: absolute; left: 22.2%; top: 3%; width: 55.9%; height: auto; transform-origin: 50% 80%; }
.portada .panel {
  position: absolute; left: 10.25%; width: 79.7%; bottom: 4.2%; aspect-ratio: 475 / 252;
  background: rgba(0, 0, 0, .82);
}
.portada .marco { position: absolute; inset: 9.9% 23.8% 9.5% 23.4%; }
.portada .marco i { position: absolute; background: #fff; }
.portada .marco .t, .portada .marco .b { left: 0; right: 0; height: 1px; }
.portada .marco .t { top: 0; } .portada .marco .b { bottom: 0; }
.portada .marco .l1, .portada .marco .r1, .portada .marco .l2, .portada .marco .r2 { width: 1px; height: 21.8%; }
.portada .marco .l1 { left: 0; top: 0; } .portada .marco .r1 { right: 0; top: 0; }
.portada .marco .l2 { left: 0; bottom: 0; } .portada .marco .r2 { right: 0; bottom: 0; }
.portada .menu-script { position: absolute; left: 20.6%; top: 11.9%; width: 57.9%; height: auto; }
.modo-simple .portada .logo { width: 74%; left: 13%; top: 5%; }
.modo-simple .portada .panel { left: 7%; width: 86%; bottom: 5%; }

.contra .hoja { display: grid; place-items: center; }
.contra .foto-portada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.35); transform: scale(1.1); }
.contra .centro { position: relative; text-align: center; width: 70%; }
.contra .logo { width: 100%; height: auto; }
.contra p { margin: 1.2em 0 0; font: 400 calc(20 * var(--u)) / 1.3 var(--titulo); color: #fbc805; letter-spacing: .06em; text-transform: uppercase; }
.modo-simple .contra p { font-size: 18px; }

/* ---------- Índice ---------- */
.indice .lista-indice { list-style: none; margin: 0; padding: 0 10% 0 10%; }
.modo-doble .indice .lista-indice { position: absolute; top: calc(250 * var(--u)); left: 0; right: 0; }
.modo-simple .indice .cuerpo { justify-content: flex-start; padding-top: 6%; }
.indice .lista-indice li + li { margin-top: calc(18 * var(--u)); }
.modo-simple .indice .lista-indice li + li { margin-top: 14px; }
.indice a {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px;
  color: inherit; text-decoration: none; border-radius: 6px; padding: 4px 6px;
  transition: background-color .2s;
}
.indice a:hover { background: rgba(231, 180, 45, .22); }
.indice a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.indice .nombre { font: 400 calc(23.5 * var(--u)) / 1.25 var(--titulo); text-transform: uppercase; }
.modo-simple .indice .nombre { font-size: 21px; }
.indice .en { display: block; font: 600 .95em / 1.3 var(--texto); text-transform: none; }
.indice .num {
  font: 400 calc(22 * var(--u)) / 1 var(--titulo);
  width: 2em; height: 2em; display: grid; place-items: center;
  background: var(--amarillo); border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
}
.modo-simple .indice .num { font-size: 18px; }
.indice .como {
  margin: 0; padding: 0 10%; font-weight: 600; text-align: center; opacity: .8;
}
.modo-doble .indice .como { position: absolute; left: 0; right: 0; bottom: calc(150 * var(--u)); }
.modo-simple .indice .como { margin-top: auto; padding-bottom: 8%; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}