/* Dos Bocas · sitio y carta digital. Mismo sistema que la carta impresa v7:
   papel crema, tinta azul marino, sello rojo, Bevan + Bitter + Caveat + Courier Prime. */
:root {
  --papel: #f4efe3;
  --papel-hondo: #ebe3d1;
  --navy: #1f2d4d;
  --navy-suave: #5b6478;
  --rojo: #a8321d;
  --rojo-hondo: #85240f;
  --mostaza: #e2a72e;
  --linea: rgba(31, 45, 77, 0.16);

  --f-titulo: "Bevan", Georgia, serif;
  --f-texto: "Bitter", Georgia, serif;
  --f-mano: "Caveat", cursive;
  --f-maquina: "Courier Prime", ui-monospace, monospace;

  --gutter: 16px;
  --ancho: 640px;
  --radio: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--papel);
  background-image: url("/img/grano.webp");
  background-size: 160px;
  color: var(--navy);
  font: 400 1rem/1.45 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 3px; border-radius: 6px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Encabezado ---------- */
.cabeza { text-align: center; padding: 28px var(--gutter) 8px; position: relative; overflow: hidden; }
.cabeza .sello { width: 132px; height: 132px; margin: 0 auto; animation: sello-entra 0.9s var(--ease) both; }
.cabeza .lema { font-family: var(--f-mano); font-size: 1.6rem; color: var(--rojo); margin: 6px 0 0; line-height: 1; }
.cabeza .direccion { font-family: var(--f-maquina); font-size: 0.78rem; color: var(--navy-suave); margin: 6px 0 0; }
@keyframes sello-entra { from { transform: rotate(-12deg) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Navegación por secciones ---------- */
.nav-secciones {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 239, 227, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.nav-secciones ul {
  list-style: none; margin: 0 auto; padding: 10px var(--gutter);
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: var(--ancho);
  scroll-snap-type: x proximity;
}
.nav-secciones ul::-webkit-scrollbar { display: none; }
.nav-secciones a {
  display: block; white-space: nowrap; text-decoration: none; scroll-snap-align: start;
  font: 700 0.86rem var(--f-texto); padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--navy); color: var(--navy);
  transition: background-color 0.2s, color 0.2s;
}
.nav-secciones a[aria-current="true"] { background: var(--navy); color: var(--papel); }
.nav-secciones a.bebidas { border-color: var(--rojo); color: var(--rojo); }
.nav-secciones a.bebidas[aria-current="true"] { background: var(--rojo); color: var(--papel); }

/* ---------- Hoy: promo del día ---------- */
.hoy {
  margin: 20px 0 8px; padding: 18px 18px 16px; border-radius: var(--radio);
  background: var(--navy); color: var(--papel); position: relative; overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(31, 45, 77, 0.8);
}
.hoy .etiqueta { font-family: var(--f-maquina); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mostaza); }
.hoy h2 { font: 400 1.5rem/1.1 var(--f-titulo); margin: 6px 0 4px; }
.hoy p { margin: 0 0 10px; font-size: 0.95rem; opacity: 0.92; }
.hoy .precio-grande { font: 400 1.25rem var(--f-titulo); color: var(--mostaza); }
.hoy .mas { border-top: 1px dashed rgba(244, 239, 227, 0.3); margin-top: 12px; padding-top: 10px; }
.hoy .mas li { margin: 4px 0; font-size: 0.9rem; }
.hoy .mas ul { margin: 0; padding-left: 18px; }
.hoy .letra { font-family: var(--f-maquina); font-size: 0.7rem; opacity: 0.7; margin: 10px 0 0; }
.hoy::after {
  content: ""; position: absolute; right: -26px; top: -26px; width: 110px; height: 110px;
  background: url("/img/sello.svg") center / contain no-repeat; opacity: 0.16; transform: rotate(14deg);
}

/* ---------- Invitación a la ruleta ---------- */
.invita-ruleta {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 14px 16px;
  border-radius: var(--radio); background: var(--rojo); color: var(--papel); text-decoration: none;
  box-shadow: 0 10px 22px -14px rgba(133, 36, 15, 0.9);
  transition: transform 0.2s var(--ease), background-color 0.2s;
}
.invita-ruleta:hover { background: var(--rojo-hondo); }
.invita-ruleta:active { transform: scale(0.98); }
.invita-ruleta b { display: block; font: 400 1.15rem var(--f-titulo); margin-bottom: 2px; }
.invita-ruleta span:nth-child(2) { flex: 1; font-size: 0.88rem; line-height: 1.3; }
.invita-ruleta .flecha { font-size: 1.4rem; }
.rueda-mini {
  width: 46px; height: 46px; flex: none; border-radius: 50%; border: 3px solid var(--papel);
  background: conic-gradient(var(--mostaza) 0 72deg, var(--navy) 0 144deg, var(--papel-hondo) 0 216deg, var(--mostaza) 0 288deg, var(--navy) 0);
  animation: gira-mini 6s linear infinite;
}
@keyframes gira-mini { to { transform: rotate(360deg); } }

/* ---------- Tarjetas de consejo ---------- */
.consejo {
  margin: 18px 0; padding: 14px 16px; border: 2px solid var(--rojo); border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.35); position: relative;
}
.consejo b.mano { display: block; font: 700 1.45rem/1 var(--f-mano); color: var(--rojo); margin-bottom: 4px; }
.consejo p { margin: 0; font-size: 0.95rem; }

/* ---------- Secciones ---------- */
.seccion { padding: 34px 0 6px; position: relative; scroll-margin-top: 60px; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion header { position: relative; }
.seccion.con-masc header { min-height: 116px; padding-right: 108px; }
.seccion h2 { font: 400 clamp(1.7rem, 1.2rem + 2.4vw, 2.3rem)/1.02 var(--f-titulo); margin: 0; letter-spacing: -0.01em; }
.seccion .sub { font: 500 1.3rem/1.1 var(--f-mano); color: var(--rojo); margin: 6px 0 0; }
.seccion .masc {
  position: absolute; right: -10px; top: -10px; width: 108px; height: auto;
  opacity: 0.9; transform: rotate(6deg); pointer-events: none; mix-blend-mode: multiply;
}
.seccion.bebidas h2 { color: var(--rojo); }
.nota { font-family: var(--f-maquina); font-size: 0.8rem; color: var(--navy-suave); margin: 14px 0 0; }

/* ---------- Platillos ---------- */
.platos { list-style: none; margin: 18px 0 0; padding: 0; }
.plato { padding: 14px 0; border-bottom: 1px dashed var(--linea); }
.plato:last-child { border-bottom: 0; }
.plato .fila { display: flex; align-items: baseline; gap: 10px; }
.plato h3 { font: 700 1.12rem/1.2 var(--f-texto); margin: 0; flex: 1; }
.plato .precio { font: 400 1.12rem var(--f-titulo); color: var(--navy); white-space: nowrap; }
.plato .apodo { font: 500 1.15rem/1 var(--f-mano); color: var(--rojo); margin: 2px 0 0; }
.plato .desc { margin: 4px 0 0; font-size: 0.93rem; color: var(--navy-suave); }
.plato .iconos { display: inline-flex; gap: 2px; vertical-align: -2px; margin-left: 4px; }
.plato .iconos svg { width: 15px; height: 15px; }

.favorito { position: relative; padding-left: 12px; margin-left: -12px; border-left: 3px solid var(--rojo); }
.sello-fav {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font: 700 0.68rem var(--f-maquina); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--papel); background: var(--rojo); padding: 3px 9px 3px 6px; border-radius: 999px;
}
.sello-fav svg { width: 13px; height: 13px; }

.variantes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.variantes li {
  display: inline-flex; gap: 8px; align-items: baseline;
  border: 1.5px solid var(--linea); border-radius: 10px; padding: 6px 11px; background: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
}
.variantes li b { font: 400 0.98rem var(--f-titulo); }
.variantes.extra li { border-style: dashed; border-color: var(--rojo); color: var(--rojo-hondo); }

.va-con {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 5px 11px 5px 8px;
  border-radius: 999px; background: var(--papel-hondo); text-decoration: none;
  font-size: 0.84rem; color: var(--navy);
  transition: transform 0.2s var(--ease), background-color 0.2s;
}
.va-con:hover { background: #e2d7bf; }
.va-con:active { transform: scale(0.97); }
.va-con svg { width: 16px; height: 16px; flex: none; }
.va-con em { font-style: normal; font-weight: 700; color: var(--rojo); }

.plato.destello { animation: destello 1.6s var(--ease); }
@keyframes destello { 0%, 30% { background: rgba(226, 167, 46, 0.32); } 100% { background: transparent; } }

/* ---------- Pie ---------- */
.pie { margin-top: 40px; padding: 30px 0 46px; background: var(--navy); color: var(--papel); }
.pie h2 { font: 400 1.4rem var(--f-titulo); margin: 0 0 12px; }
.pie .horario { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.pie .horario td { padding: 5px 0; border-bottom: 1px dashed rgba(244, 239, 227, 0.22); }
.pie .horario td:last-child { text-align: right; font-family: var(--f-maquina); }
.botones { display: grid; gap: 10px; margin: 22px 0; }
.botones .botones { margin: 0; }
.boton {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px;
  border-radius: 12px; text-decoration: none; font: 700 1rem var(--f-texto);
  border: 2px solid var(--papel); color: var(--papel);
  transition: transform 0.15s var(--ease), background-color 0.2s, color 0.2s;
}
.boton:hover { background: var(--papel); color: var(--navy); }
.boton:active { transform: scale(0.98); }
.boton.principal { background: var(--rojo); border-color: var(--rojo); }
.boton.principal:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); color: var(--papel); }
.boton svg { width: 20px; height: 20px; }
.legal { font-family: var(--f-maquina); font-size: 0.72rem; opacity: 0.75; margin-top: 22px; }
.legal p { margin: 4px 0; }

.cargando, .error { text-align: center; padding: 40px var(--gutter); font-family: var(--f-maquina); color: var(--navy-suave); }

/* ---------- Portada (inicio) ---------- */
.portada { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px var(--gutter); position: relative; overflow: hidden; }
.portada .sello { width: min(62vw, 260px); animation: sello-entra 1s var(--ease) both; }
.portada .lema { font: 500 clamp(1.7rem, 1.2rem + 3vw, 2.4rem)/1 var(--f-mano); color: var(--rojo); margin: 14px 0 26px; }
.portada .botones { width: min(100%, 360px); }
.portada .boton { border-color: var(--navy); color: var(--navy); }
.portada .boton:hover { background: var(--navy); color: var(--papel); }
.portada .boton.principal { color: var(--papel); border-color: var(--rojo); font-size: 1.12rem; min-height: 58px; }
.portada .dato { font-family: var(--f-maquina); font-size: 0.8rem; color: var(--navy-suave); margin: 4px 0; }
.portada .masc-a, .portada .masc-b { position: absolute; width: min(44vw, 230px); opacity: 0.22; pointer-events: none; mix-blend-mode: multiply; }
.portada .masc-a { left: -40px; top: -20px; transform: rotate(-8deg); }
.portada .masc-b { right: -40px; bottom: -30px; transform: rotate(6deg); }

@media (min-width: 700px) {
  .seccion .masc { width: 150px; right: -40px; }
  .botones.fila2 { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}