/* ==========================================================================
   Pagina /carta con el diseno de la carta en PDF del restaurante (Canva):
   papel amarillo con dibujos, banderines, titulos en brocha roja, Noto Serif
   para los platos, Ribeye y Open Sans en las promociones.
   ========================================================================== */
:root {
  --papel: #f7d37b;
  --brocha: #ff1616;
  --rojo: #d7040c;
  --rojo-texto: #c8070d;   /* rojo de la carta, un poco mas oscuro para que se lea sobre el papel */
  --negro: #100f0d;
  --tinta: #1d1d1b;
  --tinta-2: #3a2c22;
  --amarillo: #ffc60b;
  --amarillo-luz: #ffd34d;
  --serif: "Noto Serif", Georgia, serif;
  --open: "Open Sans", Arial, sans-serif;
  --ribeye: "Ribeye", Georgia, serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--serif); color: var(--tinta); background: var(--papel); overflow-x: clip; }
img { max-width: 100%; }
a { color: inherit; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* papel de fondo fijo (en iOS background-attachment: fixed no funciona; un elemento fijo si) */
.papel { position: fixed; inset: 0; z-index: -1; background: var(--papel) url("../assets/carta/fondo.webp") center top / cover no-repeat; }

/* ---------- cabecera ---------- */
.cp-banderines { height: 40px; background: url("../assets/carta/banderines.webp") center top / auto 100% repeat-x; }
.cp-cab__in { max-width: 760px; margin: 0 auto; padding: 4px 16px 6px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.cp-titulo { margin: 0; line-height: 0; }
.cp-titulo img { width: 100%; max-width: 430px; height: auto; }
.cp-logo { display: block; line-height: 0; border-radius: 50%; }
.cp-logo img { width: clamp(76px, 22vw, 128px); height: auto; border-radius: 50%; }

/* ---------- menu de secciones ---------- */
.cp-nav { position: sticky; top: 0; z-index: 20; background: rgba(247, 211, 123, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 2px solid rgba(16, 15, 13, .12); border-bottom: 3px solid var(--brocha); box-shadow: 0 8px 18px -10px rgba(90, 50, 0, .45); }
.cp-nav__in { max-width: 760px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 9px 16px; scrollbar-width: none; }
.cp-nav__in::-webkit-scrollbar { display: none; }
.cp-nav a { flex: none; min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 2px solid var(--negro); background: #fff8e6;
  font-family: var(--cond); font-size: 1rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--negro); }
.cp-nav a.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* ---------- hoja ---------- */
.cp-hoja { max-width: 760px; margin: 0 auto; padding: 22px 16px 120px; }
.cp-portada { margin: 0 auto 44px; max-width: 560px; }
.cp-portada img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 22px 44px -16px rgba(90, 50, 0, .55); }

.cp-cat { margin: 0 0 54px; text-align: center; scroll-margin-top: 72px; }
.cp-cat__titulo { margin: 0 0 12px; line-height: 0; }
.cp-cat__titulo + .cp-cat__cuerpo { margin-top: 22px; }
.cp-cat__titulo img { width: min(80%, 360px); height: auto; filter: drop-shadow(0 6px 8px rgba(120, 30, 0, .22)); }
.cp-bajada { max-width: 34em; margin: 0 auto 22px; font-size: 15.5px; font-style: italic; font-weight: 700; line-height: 1.4; color: var(--rojo-texto); }
.cp-fotos { display: flex; justify-content: center; gap: 16px; margin: 0 0 22px; }
.cp-foto { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 24px -10px rgba(90, 50, 0, .55); }
.cp-platos { list-style: none; margin: 0; padding: 0; }
.cp-plato { margin: 0 0 18px; }
.cp-plato h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.cp-precio { white-space: nowrap; }
.cp-plato p { margin: 3px auto 0; max-width: 36em; font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.cp-sub { margin: 26px 0 14px; }
.cp-sub:first-child { margin-top: 0; }
.cp-sub h3 { display: inline-block; margin: 0; padding-bottom: 3px; border-bottom: 2px solid var(--rojo-texto); font-size: 17px; font-style: italic; font-weight: 700; color: var(--rojo-texto); }
.cp-sub p { margin: 5px 0 0; font-size: 13.5px; font-style: italic; color: var(--tinta-2); }
.cp-nota { margin: 18px 0 0; font-family: var(--open); font-size: 16px; font-weight: 800; color: var(--tinta); }

/* ---------- promocion parrillera (pagina 13 de la carta) ---------- */
.cp-promo { margin: 64px 0 56px; text-align: center; scroll-margin-top: 72px; }
.cp-promo__banda { margin: 0 6px 20px; padding: 12px 10px 14px; background: var(--brocha); color: #fff; border: 4px solid #fff; outline: 5px solid var(--brocha); box-shadow: 0 18px 34px -14px rgba(120, 0, 0, .55); }
.cp-promo__chico { margin: 0; font-family: var(--ribeye); font-size: clamp(2.3rem, 11vw, 3.6rem); line-height: 1; text-transform: uppercase; }
.cp-promo__titulo { margin: 6px 0 0; font-family: var(--ribeye); font-weight: 400; font-size: clamp(1.35rem, 6.6vw, 2.3rem); line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere; }
.cp-promo__foto { display: block; width: 100%; height: auto; margin: 0 0 30px; border-radius: 4px; box-shadow: 0 18px 34px -16px rgba(60, 25, 0, .6); }
.cp-parrillas { display: grid; gap: 30px; text-align: left; }
.cp-parrilla__precio { position: relative; padding: 10px 14px 9px; border-radius: 16px; background: var(--brocha); color: #fff; text-align: center; box-shadow: 0 10px 20px -12px rgba(120, 0, 0, .7); }
.cp-parrilla__precio::before { content: ""; position: absolute; right: 18px; top: -13px; border: 14px solid transparent; border-top: 0; border-bottom-color: var(--brocha); }
.cp-parrilla__precio span { display: block; font-family: var(--ribeye); font-size: 17px; line-height: 1.2; }
.cp-parrilla__precio b { display: block; font-family: var(--open); font-size: 40px; font-weight: 800; line-height: 1.05; }
.cp-parrilla__para { margin: 12px 0 6px; font-family: var(--open); font-size: 20px; font-weight: 700; color: var(--rojo-texto); text-transform: uppercase; }
.cp-parrilla ul { list-style: none; margin: 0; padding: 0; font-family: var(--open); font-size: 14.5px; font-weight: 700; line-height: 1.55; text-transform: uppercase; }

/* ---------- menu extra (pagina 12 de la carta) ---------- */
.cp-menu { margin: 64px 0 56px; text-align: center; scroll-margin-top: 72px; }
.cp-menu__banda { display: inline-flex; flex-direction: column; align-items: center; }
.cp-menu__chico { margin: 0; padding: 5px 18px 3px; border-radius: 10px 10px 0 0; background: var(--rojo); color: #fff; font-family: var(--open); font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cp-menu__titulo { margin: 0; padding: 10px 26px 12px; background: var(--brocha); color: #fff; border: 3px solid #fff; outline: 4px solid var(--brocha); font-family: var(--open); font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 800; line-height: 1; text-transform: uppercase; }
.cp-menu__arma { display: block; width: min(62%, 270px); height: auto; margin: 22px auto 12px; }
.cp-menu__grupos { display: grid; gap: 20px; }
.cp-menu__grupo h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cp-menu__grupo ul { list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.55; }
.cp-menu__precio { display: inline-block; margin: 26px 0 10px; padding: 12px 26px 10px; border-radius: 16px; background: var(--brocha); color: #fff; font-family: var(--open); font-size: clamp(2.2rem, 10vw, 2.8rem); font-weight: 800; line-height: 1; box-shadow: 0 12px 24px -12px rgba(120, 0, 0, .7); }
.cp-menu__nota { margin: 0; font-size: 16px; font-weight: 700; color: var(--rojo-texto); }

/* ---------- eventos y pie ---------- */
.cp-eventos { margin: 64px 0 0; text-align: center; scroll-margin-top: 72px; }
.cp-eventos img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 22px; border-radius: 6px; box-shadow: 0 22px 44px -16px rgba(90, 50, 0, .55); }
.cp-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 12px; border: 3px solid var(--negro); box-shadow: 0 5px 0 var(--negro);
  font-family: var(--cond); font-size: 1.18rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; text-align: center; }
.cp-boton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--negro); }
.cp-boton--rojo { background: var(--rojo); color: #fff; }
.cp-boton--negro { background: var(--negro); color: var(--amarillo-luz); }
.cp-boton--linea { background: rgba(255, 248, 230, .7); color: var(--negro); }
.cp-pie { margin: 60px 0 0; text-align: center; }
.cp-pie__reservas { display: block; width: min(48%, 210px); height: auto; margin: 0 auto 8px; }
.cp-pie__redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.cp-pie__redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 700; text-decoration: none; }
.cp-pie__redes svg { flex: none; }
.cp-pie__lugar { margin: 6px 0 2px; font-size: 15px; font-weight: 700; }
.cp-pie__dir { margin: 0; font-size: 14px; color: var(--tinta-2); }
.cp-pie__botones { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 26px 0 18px; }
.cp-pie__nota { margin: 0; font-size: 13px; color: var(--tinta-2); }

/* ---------- barra de acciones abajo (celular) ---------- */
.cp-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--negro); border-top: 3px solid var(--amarillo); }
.cp-barra a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border-radius: 10px;
  color: #fff6df; font-family: var(--cond); font-size: .92rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
.cp-barra a.cp-barra__principal { background: #1f8f45; color: #fff; }

@media (min-width: 760px) {
  .cp-cat--fotos .cp-cat__cuerpo { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: start; }
  .cp-cat--fotos .cp-fotos { flex-direction: column; align-items: center; gap: 30px; margin: 6px 0 0; }
  .cp-foto { width: 170px; height: 170px; }
  .cp-parrillas { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cp-parrilla__precio b { font-size: 34px; }
  .cp-parrilla ul { font-size: 13.5px; }
  .cp-menu__grupos { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .cp-pie__botones { flex-direction: row; justify-content: center; }
}
@media (min-width: 900px) {
  .cp-barra { display: none; }
  .cp-hoja { padding-bottom: 70px; }
}
@media (max-width: 360px) {
  .cp-foto { width: 108px; height: 108px; }
  .cp-plato h3 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }