/* ==========================================================================
   Volora · web de entrada · estilos de la plantilla.
   Colores, tipografías, textura y logo llegan como variables desde data.js
   (bloque <style id="pt-tokens">). Aquí no hay nada propio del bar.
   Móvil primero (390 px) → tablet (768) → escritorio (1024+).
   ========================================================================== */

@property --fondo { syntax: '<color>'; inherits: true; initial-value: #F2ECE1; }
@property --tinta { syntax: '<color>'; inherits: true; initial-value: #1F2A6B; }
@property --acento { syntax: '<color>'; inherits: true; initial-value: #7E4520; }

:root {
  --cabecera-h: 56px;
  --cinta-h: 0px;
  --margen: 20px;
  --ancho: 1200px;
  --lado: max(var(--margen), calc((100vw - var(--ancho)) / 2));
  --linea: color-mix(in srgb, var(--tinta) 24%, transparent);
}
.con-cinta { --cinta-h: 44px; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cabecera-h) + var(--cinta-h) + 12px);
}
html.con-movimiento { scroll-behavior: smooth; }
html.con-movimiento.tonos-vivos { transition: --fondo .7s ease, --tinta .7s ease, --acento .7s ease; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--tinta);
  background-color: var(--fondo);
  background-blend-mode: soft-light;
  background-size: 400px 400px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.con-cinta body { padding-top: var(--cinta-h); }

/* Bloques con su propio fondo (sin JS, o fijos como la comanda). */
html:not(.tonos-vivos) [data-tono],
.con-textura {
  background-color: var(--fondo);
  color: var(--tinta);
  background-blend-mode: soft-light;
  background-size: 400px 400px;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
h1, h2, h3, h4 { text-wrap: balance; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; z-index: 70; left: 12px; top: -80px;
  padding: 10px 16px; border-radius: 8px;
  background: var(--tinta); color: var(--fondo); font-weight: 700; text-decoration: none;
}
.saltar:focus { top: calc(var(--cinta-h) + 10px); }

/* ---------- ilustraciones y piezas ---------- */
.ilus {
  display: block; fill: none; stroke: currentColor;
  stroke-width: var(--trazo, 3); stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.ilus path.vapor { transform-box: fill-box; transform-origin: 50% 100%; }
.con-movimiento .dibujo-scroll path { stroke-dasharray: 1 1.01; }

.icono {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.logo {
  display: inline-block; vertical-align: middle; height: 34px;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: .7em 1.45em;
  border: 2px solid var(--tinta); border-radius: 999px;
  background: transparent; color: var(--tinta);
  font: inherit; font-weight: 700; font-size: 1.04rem; line-height: 1.1;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.boton--principal { background: var(--tinta); color: var(--fondo); }
.boton .icono { width: 1.35em; height: 1.35em; }
.boton--secundario:hover { background-color: color-mix(in srgb, var(--tinta) 9%, transparent); }
@media (hover: hover) {
  .con-movimiento .boton:hover { transform: translateY(-2px) rotate(-1deg); }
}

.guino {
  font-family: var(--f-mano); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--acento);
}
/* En la portada: al lado de "Reservar mesa" con la flecha apuntándole. */
.portada__botones .guino {
  flex: 1 1 120px; display: flex; align-items: center; gap: 2px; margin: 0;
  transform: rotate(-4deg);
}
.portada__botones .guino span { text-wrap: balance; }
.guino__flecha { flex: none; width: 40px; height: 30px; --trazo: 3.4; transform: rotate(72deg) scaleX(-1); }
@media (min-width: 600px) {
  .portada__botones .guino { order: 3; flex-basis: 100%; align-items: flex-start; margin: 0 0 0 22px; transform: rotate(-2deg); }
  .portada__botones .guino span { padding-top: 16px; }
  .guino__flecha { width: 46px; height: 33px; transform: scale(-1, -1) translateY(6px); }
}

/* ---------- cinta de demo (?demo=1) ---------- */
.cinta {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--cinta-h);
  display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: var(--c-principalProfundo); color: var(--c-claro);
  font-size: .85rem; line-height: 1;
}
.cinta__rotulo {
  flex: none; padding: 5px 8px; border-radius: 4px;
  background: var(--c-suave); color: var(--c-principalProfundo);
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.cinta__ops { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.cinta__ops::-webkit-scrollbar { display: none; }
.cinta__ops button {
  flex: none; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--c-claro) 50%, transparent);
  background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
}
.cinta__ops button[aria-pressed="true"] { background: var(--c-claro); color: var(--c-principalProfundo); border-color: var(--c-claro); }
.cinta__reloj { display: none; flex: none; font-variant-numeric: tabular-nums; }

/* ---------- cabecera + barra de pan ---------- */
.cabecera {
  position: sticky; top: var(--cinta-h); z-index: 30;
  display: flex; align-items: center; gap: 16px;
  height: var(--cabecera-h); padding: 0 var(--margen);
  border-bottom: 1.5px solid var(--linea);
}
.cabecera__marca { display: block; line-height: 0; color: var(--tinta); }
.cabecera__nav { display: none; }
.cabecera__pan { margin-left: auto; line-height: 0; }
.pan { display: block; width: 92px; height: 31px; overflow: visible; }
.pan__miga { fill: url(#pan-tueste); stroke: var(--tinta); stroke-width: 2.2; stroke-linejoin: round; }
.pan__brillo { fill: none; stroke: #fff; stroke-opacity: .45; stroke-width: 1.6; stroke-linecap: round; }
.pan__corte { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 1.01; stroke-dashoffset: 1.001; }
html:not(.js) .pan__corte { stroke-dashoffset: 0; }

/* ---------- 1 · portada ---------- */
.portada {
  position: relative; overflow-x: clip;
  display: grid; align-content: center;
  min-height: calc(100svh - var(--cabecera-h) - var(--cinta-h));
  padding: 22px var(--margen) 48px;
}
.portada__texto { display: contents; }
.estado { order: 1; }
.nombre { order: 2; }
.portada__lema { order: 3; }
.portada__ilus { order: 4; }
.momentos { order: 5; }
.portada__botones { order: 6; }

.estado {
  justify-self: start; display: inline-flex; align-items: center; gap: .55em;
  margin: 0 0 16px; padding: .42em .95em .46em;
  border: 1.5px solid currentColor; border-radius: 999px;
  font-size: .875rem; font-weight: 600; line-height: 1.2;
}
.js .estado:not(.listo) { visibility: hidden; }
html:not(.js) .estado { display: none; }
.estado__punto { flex: none; width: .62em; height: .62em; border-radius: 50%; border: 2px solid currentColor; }
.estado--abierto .estado__punto { background: currentColor; }
.con-movimiento .estado--abierto .estado__punto { animation: latido 2.4s ease-in-out infinite; }

.nombre {
  margin: 0; display: flex; flex-direction: column; align-items: flex-start;
  font-weight: 800; line-height: .82; letter-spacing: .005em;
}
.nombre__mano {
  font-family: var(--f-mano); font-weight: 700; letter-spacing: 0;
  font-size: clamp(3.2rem, 14vw, 6.4rem); line-height: .95;
  margin: 0 0 -.14em .06em; transform: rotate(-7deg); transform-origin: left bottom;
}
/* El nombre en mayúsculas ocupa el ancho disponible según cuántas letras tenga. */
.portada { container-type: inline-size; }
.nombre__caps {
  white-space: nowrap;
  font-size: clamp(3rem, 21.5vw, 10.4rem);
  font-size: min(10.4rem, calc(100cqw / (var(--letras, 6) * .68)));
}
.portada__lema {
  margin: 14px 0 0; font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}

.portada__ilus { justify-self: end; width: min(44vw, 260px); margin: -6px 0 -30px; line-height: 0; }
.portada__dibujo { --trazo: 2.9; width: 100%; height: auto; }

.momentos { position: relative; z-index: 1; }
.momento__titular {
  margin: 0; max-width: 15ch;
  font-size: clamp(1.85rem, 7.6vw, 3.3rem); font-weight: 700; line-height: 1.04; letter-spacing: -.015em;
}
.momento__sub { margin: .55em 0 0; max-width: 34ch; font-size: clamp(1.02rem, 3.9vw, 1.22rem); line-height: 1.45; }
.portada__botones { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }

/* Variantes por momento: solo se ve la que toca (data-momento lo pone app.js). */
.portada [data-m] { display: none; }
html:not([data-momento]) .portada [data-m~="generico"],
html[data-momento="manana"] .portada [data-m~="manana"],
html[data-momento="aperitivo"] .portada [data-m~="aperitivo"],
html[data-momento="tarde"] .portada [data-m~="tarde"],
html[data-momento="noche"] .portada [data-m~="noche"],
html[data-momento="cerrado"] .portada .momento[data-m~="cerrado"],
html[data-momento="cerrado"] .portada .boton [data-m~="cerrado"],
html[data-momento="cerrado"]:not([data-noche]) .portada [data-m~="cerrado-dia"],
html[data-momento="cerrado"][data-noche] .portada [data-m~="cerrado-noche"] { display: revert; }

/* Entrada de la portada (solo con movimiento). */
.con-movimiento .portada__dibujo path {
  stroke-dasharray: 1 1.01; stroke-dashoffset: 1.001;
  animation: trazo 1.5s cubic-bezier(.65, .05, .35, 1) forwards;
  animation-delay: calc(.3s + var(--i) * .13s);
}
.con-movimiento .portada__dibujo path.vapor {
  animation: trazo 1.5s cubic-bezier(.65, .05, .35, 1) forwards, humo 3.2s ease-in-out infinite;
  animation-delay: calc(.3s + var(--i) * .13s), calc(2s + var(--i) * .35s);
}
.con-movimiento .nombre__caps { animation: subir .9s cubic-bezier(.2, .8, .2, 1) both; }
.con-movimiento .nombre__mano { animation: escribir 1.1s cubic-bezier(.6, .1, .3, 1) .35s both; }
.con-movimiento .momento { animation: subir .8s cubic-bezier(.2, .8, .2, 1) .15s both; }
.con-movimiento .portada__botones { animation: aparecer .7s ease .5s both; }
.con-movimiento .portada .guino { animation: aparecer .7s ease 1.4s both; }

@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes humo { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-6px); opacity: .45; } }
@keyframes subir { from { transform: translateY(.3em); } }
@keyframes escribir {
  from { clip-path: inset(-30% 100% -30% -10%); }
  to { clip-path: inset(-30% -10% -30% -10%); }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }
@keyframes latido { 50% { opacity: .35; } }

/* ---------- azulejo ---------- */
.azulejo { position: relative; height: 44px; background: var(--c-blanco); border-block: 3px solid var(--c-principal); }
.azulejo::after {
  content: ""; position: absolute; inset: 0; background: var(--c-principal);
  -webkit-mask-size: 44px 44px; mask-size: 44px 44px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: center; mask-position: center;
}

/* ---------- 3 · manifiesto ---------- */
.manifiesto {
  overflow-x: clip; display: grid; justify-items: center; text-align: center;
  padding: clamp(72px, 16vw, 150px) var(--margen);
}
.antetitulo { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.manifiesto__ilus { width: min(64vw, 300px); margin: 6px 0 22px; --trazo: 2.6; }
.manifiesto__texto { margin: 0; max-width: 920px; }
.manifiesto__linea {
  margin: 0 0 .32em;
  font-size: clamp(1.65rem, 6.6vw, 3.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.015em;
  text-wrap: balance;
}
.manifiesto em {
  font-family: var(--f-mano); font-style: normal; font-weight: 700;
  font-size: 1.22em; line-height: .8; color: var(--acento); padding: 0 .04em;
}
.manifiesto__firma { margin-top: 1em; font-family: var(--f-mano); font-weight: 700; font-size: 1.7rem; color: var(--acento); }

/* ---------- 4 · un día ---------- */
.dia { overflow-x: clip; }
.dia__cabeza { padding: clamp(72px, 14vw, 130px) var(--margen) clamp(16px, 4vw, 40px); text-align: center; }
.dia__cabeza h2 {
  margin: 0 auto; max-width: 13ch;
  font-size: clamp(2.3rem, 10vw, 5.4rem); line-height: .98; font-weight: 800; letter-spacing: -.02em;
}
.dia__entradilla { margin: .5em 0 0; font-family: var(--f-mano); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.2rem); color: var(--acento); }

.panel {
  position: relative; display: grid; gap: 44px; align-items: center; align-content: center;
  min-height: 92svh; padding: clamp(72px, 12vw, 120px) var(--margen);
}
.panel__texto { max-width: 540px; }
.panel__hora {
  margin: 0; font-family: var(--f-mano); font-weight: 700;
  font-size: clamp(4.4rem, 21vw, 9.5rem); line-height: .78; color: var(--acento);
}
.panel__nombre { margin: .65em 0 0; font-size: .85rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.panel__frase {
  margin: .45em 0 0; font-size: clamp(1.7rem, 7vw, 3rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -.015em; text-wrap: balance;
}
.panel__cosas { list-style: none; margin: 1.3em 0 0; padding: 0; display: grid; gap: .5em; font-size: 1.08rem; }
.panel__cosas li { display: flex; gap: .65em; align-items: baseline; }
.panel__cosas li::before {
  content: ""; flex: none; width: 1.1em; height: 2.5px; border-radius: 2px;
  background: currentColor; transform: translateY(-.32em) rotate(-8deg);
}
.panel--aperitivo { padding-top: calc(61px + clamp(56px, 10vw, 100px)); }
.toldo {
  position: absolute; top: 0; left: 0; right: 0; height: 46px;
  background: repeating-linear-gradient(90deg, var(--c-suave) 0 30px, var(--c-vivo) 30px 60px);
}
.toldo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 15px;
  background:
    radial-gradient(circle at 15px 0, var(--c-suave) 14.5px, transparent 15px) 0 0 / 60px 15px repeat-x,
    radial-gradient(circle at 45px 0, var(--c-vivo) 14.5px, transparent 15px) 0 0 / 60px 15px repeat-x;
}

/* Foto en marco kraft con cinta (o hueco "foto pendiente"). */
.foto {
  position: relative; margin: 0 auto; width: min(80vw, 440px);
  padding: 12px 12px 0; transform: rotate(var(--giro, 0deg));
  background-color: var(--c-kraft);
  background-image: repeating-linear-gradient(115deg, rgb(0 0 0 / .03) 0 2px, transparent 2px 7px);
}
.foto::before {
  content: ""; position: absolute; z-index: 2; top: -14px; left: 50%;
  width: 108px; height: 30px; margin-left: -54px; transform: rotate(-4deg);
  background: color-mix(in srgb, var(--c-blanco) 72%, transparent);
}
.foto__marco { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-principal); }
.foto__marco img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: screen; }
.foto__marco::after { content: ""; position: absolute; inset: 0; background: var(--c-claro); mix-blend-mode: multiply; pointer-events: none; }
.foto:not(.foto--pendiente) { padding-bottom: 12px; }
.foto__dibujo { position: absolute; right: -10%; bottom: -8%; width: 44%; color: var(--tinta); --trazo: 3; }
.foto--pendiente .foto__marco {
  display: grid; place-items: center; color: var(--c-principal);
  background: color-mix(in srgb, var(--c-claro) 62%, var(--c-kraft));
}
.foto--pendiente .foto__marco::after { display: none; }
.foto--pendiente .ilus { width: 64%; --trazo: 2.6; }
.foto figcaption {
  padding: 8px 4px 12px; text-align: center;
  font-family: var(--f-mano); font-weight: 700; font-size: 1.35rem; line-height: 1.1; color: var(--c-principal);
}

/* ---------- 5 · carta ---------- */
.carta { overflow-x: clip; padding: clamp(72px, 14vw, 130px) var(--margen); }
.carta__cabeza { display: grid; justify-items: center; text-align: center; }
.carta__barra { width: min(44vw, 190px); margin-bottom: 4px; --trazo: 3; }
.carta h2, .reservar h2 {
  margin: 0; font-size: clamp(2.6rem, 12vw, 5.6rem); line-height: .94; font-weight: 800; letter-spacing: -.02em;
}
.carta__intro { margin: .45em 0 0; font-family: var(--f-mano); font-weight: 700; font-size: 1.65rem; color: var(--acento); }
.pestanas {
  display: flex; gap: 4px; width: max-content; max-width: 100%;
  margin: 28px auto 34px; padding: 5px;
  border: 2px solid var(--tinta); border-radius: 999px;
}
html:not(.js) .pestanas { display: none; }
.pestana {
  appearance: none; border: 0; border-radius: 999px; cursor: pointer;
  min-height: 46px; padding: 0 1.1em;
  background: transparent; color: var(--tinta); font: inherit; font-weight: 700; font-size: 1rem;
}
.pestana[aria-selected="true"] { background: var(--tinta); color: var(--fondo); }
.carta__panel { position: relative; max-width: 720px; margin: 0 auto; }
html:not(.js) .carta__panel + .carta__panel { margin-top: 64px; }
.js .carta__momento { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.carta__momento { margin: 0 0 10px; font-size: 1.8rem; }
.sello {
  display: inline-block; margin: 0 0 6px; padding: .15em .7em .25em;
  border: 2px dashed var(--acento); border-radius: 6px; transform: rotate(-2deg);
  font-family: var(--f-mano); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--acento);
}
.carta__seccion h4 {
  margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--tinta);
  font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.platos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plato { position: relative; }
.plato__linea { display: flex; align-items: flex-end; gap: 8px; font-size: 1.06rem; line-height: 1.3; }
.plato__nombre { font-weight: 600; }
.plato__guia { flex: 1 1 24px; min-width: 24px; margin-bottom: .32em; border-bottom: 2px dotted color-mix(in srgb, var(--tinta) 50%, transparent); }
.plato__precio { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.plato__precio small { margin-left: .12em; font-size: .78em; font-weight: 500; }
.plato__precio--varios { display: grid; justify-items: end; gap: 2px; line-height: 1.2; }
.plato__desc { margin: 2px 0 0; font-size: .95rem; }
.etiqueta { font-family: var(--f-mano); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--acento); white-space: nowrap; }
.plato__nota {
  display: flex; align-items: center; gap: 2px; margin: 2px 0 0;
  font-family: var(--f-mano); font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--acento);
}
.plato__flecha { flex: none; width: 40px; height: 29px; --trazo: 3.4; transform: scale(-1, -1) rotate(-10deg) translateY(6px); }
.con-movimiento .plato__flecha path { stroke-dasharray: 1 1.01; stroke-dashoffset: 1.001; }
.con-movimiento .carta.visto .carta__panel:not([hidden]) .plato__flecha path { animation: trazo .8s ease forwards; animation-delay: calc(.25s + var(--i) * .5s); }
.carta__nota { max-width: 720px; margin: 36px auto 0; text-align: center; font-size: .92rem; }

/* ---------- 6 · reservar ---------- */
.reservar { overflow-x: clip; display: grid; gap: 34px; padding: clamp(72px, 14vw, 130px) var(--margen); }
.reservar__cabeza { max-width: 560px; }
.guino--reservar { margin: 0 0 10px; display: block; font-size: 1.8rem; transform: rotate(-3deg); }
.reservar__texto { margin: .8em 0 0; max-width: 32ch; font-size: 1.15rem; }
.reservar__sinjs { display: none; margin: .6em 0 0; font-weight: 600; }
html:not(.js) .reservar__sinjs { display: block; }
html:not(.js) .comanda__campos, html:not(.js) .comanda__titulo { display: none; }

.comanda {
  position: relative; width: 100%; max-width: 470px; justify-self: center;
  padding: 36px 22px 24px; transform: rotate(.8deg);
  -webkit-mask: radial-gradient(circle at 10px 0, transparent 6.5px, #000 7px) 0 0 / 20px 100% repeat-x;
  mask: radial-gradient(circle at 10px 0, transparent 6.5px, #000 7px) 0 0 / 20px 100% repeat-x;
}
.comanda__titulo { margin: 0 0 14px; font-family: var(--f-mano); font-weight: 700; font-size: 2.2rem; line-height: 1; }
.comanda__campos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px;
  grid-template-areas: "personas hora" "dia dia" "nombre nombre";
}
.campo--personas { grid-area: personas; }
.campo--hora { grid-area: hora; }
.campo--dia { grid-area: dia; }
.campo--nombre { grid-area: nombre; }
.campo { display: grid; gap: 2px; min-width: 0; }
.campo > span { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.campo small { font-size: 1em; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.campo select, .campo input {
  width: 100%; min-height: 48px; padding: 8px 30px 8px 2px;
  border: 0; border-bottom: 2px solid currentColor; border-radius: 0;
  background-color: transparent; color: inherit;
  font: inherit; font-size: 1.125rem; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.campo input { padding-right: 2px; }
.campo select {
  cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 8px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.campo select option, .campo select optgroup { color: #1a1a1a; background: #fff; }
.campo select:focus-visible, .campo input:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.boton--whatsapp { width: 100%; min-height: 56px; margin-top: 24px; }
.comanda__llamar { margin: 14px 0 0; text-align: center; }
.comanda__llamar a { font-weight: 700; }
.comanda__nota { margin: 4px 0 0; text-align: center; font-family: var(--f-mano); font-weight: 700; font-size: 1.4rem; color: var(--acento); }

/* ---------- 7 · horario y cómo llegar ---------- */
.horario { overflow-x: clip; display: grid; gap: 48px; padding: clamp(72px, 14vw, 130px) var(--margen); }
.horario h2 { margin: 0 0 16px; font-size: clamp(2.2rem, 9vw, 4.4rem); line-height: .98; font-weight: 800; letter-spacing: -.02em; }
.horario .estado { display: inline-flex; }
html:not(.js) .horario .estado { display: none; }
.tabla-horario { width: 100%; margin-top: 6px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla-horario tr { border-bottom: 1.5px dashed color-mix(in srgb, var(--tinta) 38%, transparent); }
.tabla-horario th { padding: 12px 8px 12px 0; text-align: left; font-weight: 600; white-space: nowrap; }
.tabla-horario td { padding: 12px 0; text-align: right; line-height: 1.35; }
.tabla-horario td span { display: inline-block; white-space: nowrap; margin-left: .7em; }
.tabla-horario tr.hoy th, .tabla-horario tr.hoy td { font-weight: 800; }
.hoy__marca { margin-left: 2px; font-family: var(--f-mano); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--acento); }
.cenas {
  display: inline-block; margin-left: 6px; padding: .1em .5em; vertical-align: .12em;
  border: 1.5px solid currentColor; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}
.horario__festivos { margin: 14px 0 0; font-family: var(--f-mano); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--acento); }
.llegar { display: grid; gap: 20px; align-content: start; }
.llegar__direccion { display: flex; gap: 10px; align-items: flex-start; font-style: normal; font-size: 1.2rem; line-height: 1.4; font-weight: 600; }
.llegar__direccion .icono { width: 1.5em; height: 1.5em; margin-top: .05em; }
.llegar__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.nota-google { margin: 0; font-weight: 600; }
.llegar .foto { margin-top: 26px; }

/* ---------- 8 · pie ---------- */
.pie { display: grid; justify-items: center; gap: 14px; padding: 64px var(--margen) 120px; text-align: center; }
.logo--pie { height: 78px; }
.pie__lema { margin: 4px 0 0; font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pie__hashtag { margin: 0; font-family: var(--f-mano); font-weight: 700; font-size: 1.55rem; color: var(--acento); }
.pie__contacto { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.pie__contacto a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pie__legal { margin: 8px 0 0; font-size: .92rem; }
.pie__legal a { display: inline-block; padding: 8px 2px; }
.pie__propuesta {
  margin: 4px 0 0; padding: .4em .9em; border: 1.5px dashed currentColor; border-radius: 6px;
  font-size: .82rem; letter-spacing: .02em;
}

/* ---------- 9 · botón fijo ---------- */
.fijo {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background-color: var(--fondo); color: var(--tinta);
  border-top: 1.5px solid var(--linea);
  transition: transform .35s ease, opacity .35s ease;
}
.fijo.oculto, .js .fijo:not([data-listo]) { transform: translateY(120%); opacity: 0; pointer-events: none; }
.js .fijo:not([data-listo]) { transition: none; }
.fijo__reservar { flex: 1; }
.fijo__llamar {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border: 2px solid currentColor; border-radius: 50%; color: inherit; background-color: var(--fondo);
}
.fijo__llamar .icono { width: 24px; height: 24px; }

/* ---------- aviso legal ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 40px var(--margen) 80px; }
.legal h1 { margin: .4em 0 .3em; font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1; font-weight: 800; }
.legal h2 { margin: 1.8em 0 .4em; font-size: 1.2rem; }
.legal ul { padding-left: 1.2em; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 768px) {
  :root { --margen: 32px; --cabecera-h: 64px; }
  .logo { height: 40px; }
  .pan { width: 108px; height: 36px; }
  .cabecera__nav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-weight: 600; font-size: .95rem; }
  .cabecera__nav a { text-decoration: none; }
  .cabecera__nav a:hover { text-decoration: underline; }
  .cabecera__reservar { padding: .45em 1.1em; border: 2px solid currentColor; border-radius: 999px; }
  .cabecera__pan { margin-left: 8px; }
  .cinta__reloj { display: block; }
  .portada__ilus { width: min(34vw, 300px); margin-top: -40px; }
  .fijo { left: auto; right: 24px; bottom: 24px; padding: 0; gap: 8px; background: none; border: 0; }
  .fijo__reservar { flex: none; box-shadow: 0 0 0 3px var(--fondo); }
  .fijo__llamar { box-shadow: 0 0 0 3px var(--fondo); }
  .comanda { padding: 40px 34px 28px; }
  .pie { padding-bottom: 72px; }
}

/* ==========================================================================
   Escritorio
   ========================================================================== */
@media (min-width: 1024px) {
  .portada {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3vw; align-items: center;
    padding: 40px var(--lado) 72px;
  }
  .portada__texto { display: block; }
  .nombre__caps { font-size: min(10.4rem, calc(56cqw / (var(--letras, 6) * .68))); }
  .portada__texto .estado { display: inline-flex; }
  html:not(.js) .portada__texto .estado { display: none; }
  .portada__ilus { width: 100%; max-width: 470px; justify-self: center; margin: 0; }
  .portada__dibujo { --trazo: 1.9; }
  .portada__lema { margin-top: 18px; }
  .momentos { margin-top: 34px; }

  .panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw;
    padding-inline: var(--lado);
  }
  .panel--invertido .panel__texto { order: 2; }
  .panel--aperitivo { padding-top: calc(61px + 110px); }
  .panel__texto { max-width: 600px; justify-self: center; }
  .panel__frase { font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
  .panel__cosas { font-size: 1.25rem; }
  .panel__nombre { font-size: .95rem; }
  .reservar__cabeza { max-width: 640px; }
  .reservar h2 { font-size: clamp(3.6rem, 5.4vw, 5.2rem); }
  .reservar__texto { font-size: 1.3rem; }

  .reservar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw; align-items: center; padding-inline: var(--lado); }
  .comanda { justify-self: end; }
  .horario { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 7vw; padding-inline: var(--lado); }
  .llegar { padding-top: 12px; }
}
/* Anotaciones de la carta en el margen, como escritas a boli (solo si hay sitio). */
@media (min-width: 1360px) {
  .plato__nota {
    position: absolute; top: -8px; left: calc(100% + 24px); margin: 0;
    white-space: nowrap; transform: rotate(-3deg);
  }
  .plato__flecha { transform: rotate(168deg) translateY(4px); }
}

/* ==========================================================================
   Sin movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}