/* Los Naranjos · carta (web y base para impresión) */

/* Fuente, grosor y tamaño de cada parte se configuran en Admin › Ajustes › Tipografía.
   Las variables --f-*, --w-* y --s-* las genera includes/vista_carta.php. */

:root {
  --crema: #F2F1CB;
  --pizarra: #273941;
  --naranja: #E1562A;
  --f-titulo: "Oswald", "Arial Narrow", sans-serif;
  --f-texto: "Barlow", "Segoe UI", system-ui, sans-serif;
  --ancho: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 3.4rem; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--pizarra);
  font-family: var(--f-texto);
  font-weight: var(--w-texto, 400);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }

/* ---------- Portada ---------- */
.portada { max-width: var(--ancho); margin: 0 auto; }
.portada-foto { width: 100%; height: auto; }
.portada-lema { width: min(78%, 440px); margin: .2rem auto 1.4rem; }

/* ---------- Índice fijo ---------- */
.indice {
  position: sticky; top: 0; z-index: 10;
  background: var(--pizarra);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.indice-int {
  max-width: var(--ancho); margin: 0 auto;
  display: flex; gap: .3rem; overflow-x: auto;
  padding: .55rem .8rem;
  scrollbar-width: none;
}
.indice-int::-webkit-scrollbar { display: none; }
.indice a {
  flex: 0 0 auto;
  color: var(--crema); text-decoration: none;
  font-family: var(--f-indice, var(--f-titulo)); font-weight: var(--w-indice, 500);
  text-transform: uppercase; letter-spacing: .04em; font-size: calc(.92rem * var(--s-indice, 1));
  padding: .3rem .7rem; border-radius: 99px;
  border: 1px solid rgba(242,241,203,.25);
  white-space: nowrap;
}
.indice a.activo, .indice a:hover { background: var(--crema); color: var(--pizarra); }

/* ---------- Título MENÚ ---------- */
.titulo-menu { text-align: center; padding: 1.8rem 1rem .6rem; }
.titulo-menu h1 {
  margin: 0; font-family: var(--f-menu, var(--f-titulo)); font-weight: var(--w-menu, 600);
  text-transform: uppercase; font-size: calc(2.6rem * var(--s-menu, 1)); line-height: 1; letter-spacing: .02em;
}
.laurel { width: 96px; margin: .35rem auto 0; }

/* ---------- Secciones ---------- */
.seccion { padding: 1.8rem 0 2rem; }
.seccion-claro { background: var(--crema); color: var(--pizarra); }
.seccion-oscuro { background: var(--pizarra); color: var(--crema); }
.seccion-int { max-width: var(--ancho); margin: 0 auto; padding: 0 1.4rem; }

.seccion-titulo {
  margin: 0 0 .5rem;
  font-family: var(--f-seccion, var(--f-titulo)); font-weight: var(--w-seccion, 600);
  text-transform: uppercase; letter-spacing: .03em;
  font-size: calc(2rem * var(--s-seccion, 1)); line-height: 1.05;
}
.seccion-nota, .seccion-pie { font-family: var(--f-notas, inherit); font-weight: var(--w-notas, 400); }
.seccion-nota { margin: 0 0 .9rem; font-style: italic; opacity: .85; font-size: calc(.95rem * var(--s-notas, 1)); }
.seccion-pie {
  margin: 1rem 0 0; font-size: calc(.93rem * var(--s-notas, 1)); font-style: italic; opacity: .9;
  padding-top: .6rem; border-top: 1px solid currentColor; border-color: rgba(127,127,127,.35);
}

.platos { list-style: none; margin: 0; padding: 0; }
.plato { padding: .45rem 0; break-inside: avoid; page-break-inside: avoid; }
.seccion-claro { --fondo: var(--crema); }
.seccion-oscuro { --fondo: var(--pizarra); }

/* Nombre y precio alineados abajo; los puntos salen de la última línea del nombre */
.plato-linea {
  display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: .35em;
  font-size: 1.05rem;
}
.plato-nombre {
  position: relative;
  font-family: var(--f-nombre, inherit); font-weight: var(--w-nombre, 600);
  font-size: calc(1em * var(--s-nombre, 1));
}
.plato-nombre::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .36em;
  border-bottom: 2px dotted currentColor; opacity: .4;
}
.plato-nombre > span {
  position: relative; z-index: 1;
  background: var(--fondo, var(--crema)); padding-right: .35em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sin-precio { grid-template-columns: 1fr; }
.sin-precio .plato-nombre::after { display: none; }
.plato-precio {
  font-family: var(--f-precio, inherit); font-weight: var(--w-precio, 600);
  font-size: calc(1em * var(--s-precio, 1));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plato-desc {
  margin: .12rem 0 0; font-style: italic; opacity: .82; max-width: 36em;
  font-family: var(--f-desc, inherit); font-weight: var(--w-desc, 400);
  font-size: calc(.92rem * var(--s-desc, 1));
}

.subseccion { margin-top: 1.2rem; }
.subseccion-titulo {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .25rem;
  font-family: var(--f-sub, var(--f-titulo)); font-weight: var(--w-sub, 500);
  text-transform: uppercase; letter-spacing: .05em; font-size: calc(1.15rem * var(--s-sub, 1));
}
.subseccion-titulo::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35;
}

/* ---------- Pie ---------- */
.pie { text-align: center; padding: 2rem 1.2rem 3rem; max-width: var(--ancho); margin: 0 auto; }
.divisor { width: min(80%, 380px); margin: 0 auto 1.4rem; }
.pie-logo { width: min(70%, 300px); margin: 1.8rem auto 0; }
.pie-texto { font-size: .95rem; }

.presentacion { text-align: left; border: 1px solid rgba(39,57,65,.25); border-radius: 10px; padding: .2rem 1rem; }
.presentacion summary {
  cursor: pointer; padding: .6rem 0; text-align: center;
  font-family: var(--f-sub, var(--f-titulo)); font-weight: var(--w-sub, 500);
  text-transform: uppercase; letter-spacing: .05em; font-size: 1.1rem;
}
.presentacion-texto p { margin: 0 0 .7rem; font-size: calc(1rem * var(--s-texto, 1)); }
.frase { font-weight: 600; font-style: italic; }

@media (min-width: 760px) {
  .seccion { padding: 2.4rem 0 2.6rem; }
  .seccion-titulo { font-size: calc(2.3rem * var(--s-seccion, 1)); }
}

/* «MENÚ» como imagen del diseño original */
.titulo-menu-pdf h1 { margin: 0; line-height: 0; }
.titulo-menu-pdf img { width: calc(150px * var(--s-menu, 1)); margin: 0 auto; }