/* ===========================================================================
   Estilos base de la Fábrica. Un solo archivo: cambiar «ese azul más oscuro»
   es cambiar una línea (patrones/mantenimiento.md).

   1. Colores: el PATRÓN DE TRES TONOS (patrones/color.md). El de marca, tal
      cual, SOLO para decorar; el oscurecido para todo el texto de color.
      Mide cada uno contra su fondo y apunta el contraste al lado.
   2. Escala tipográfica y de espacios (patrones/diseno.md): 7 tamaños, no 30.
   3. Tres puntos de ruptura para todas las webs: 560 · 900.
   =========================================================================== */
/* Ullate: el verde de su logo (#5e7953) en decoración; su versión oscurecida
   para el texto. Medido el 24/9/2026 (branding.json → colores_nota). */
@font-face { font-family: "Raleway"; src: url("assets/fuentes/raleway.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fuentes/cormorant-garamond.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
:root {
  --marca: #5e7953;        /* el verde del logo: 4,84 sobre blanco, 4,33 sobre crema → decoración y texto grande */
  --marca-texto: #4d6644;  /* texto y enlaces: 6,36 sobre blanco, 5,69 sobre crema */
  --marca-honda: #2f3f2a;  /* botones, pie y foco: 11,26 sobre blanco */
  --fondo: #FFFFFF;
  --fondo-alt: #F5F2EB;    /* crema, como el papel de su carta de vinos */
  --tinta: #313131;        /* el gris oscuro de su tema: 13,01 sobre blanco */
  --tinta-suave: #5A5A55;  /* 6,93 sobre blanco, 6,20 sobre crema */
  --borde: #DCD6C8;
  --serif: "Cormorant Garamond", Georgia, serif;

  --p0: .875rem; --p1: 1.125rem; /* 18 px de cuerpo (auditor de diseño, vuelta 1) */ --p2: 1.25rem; --p3: 1.6rem; --p4: 2rem; --p5: 2.5rem; --p6: 3.2rem;
  --h1: clamp(var(--p4), 6vw, var(--p6));
  --h2: clamp(var(--p3), 4vw, var(--p5));
  --e1: .5rem; --e2: 1rem; --e3: 1.6rem; --e4: 2.5rem; --e5: 4rem;

  --barra: 64px;           /* el alto de la barra fija, en UN sitio */
  --radio: 10px;
  --letra: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* alojada en assets/: cero peticiones de fuera */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.4rem); } /* el freno de las anclas */
body { margin: 0; font: var(--p1)/1.65 var(--letra); color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 1.7em 0; } /* el margin:1em 40px de fábrica descuadra las fotos */
[hidden] { display: none !important; } /* cualquier display tuyo le gana a hidden */
a { color: var(--marca-texto); }
/* --marca-texto da 4,51 sobre BLANCO y 4,16 sobre el gris de las secciones
   alternas (medido con contraste.py en Casa Emilia): un tono cumple sobre los
   fondos con los que se calibro, no sobre todos. Ahi los enlaces van en el hondo. */
.seccion--alt a:not(.boton), .hero a:not(.boton) { color: var(--marca-honda); }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--marca-honda); outline-offset: 2px; }
:where(p, li, td) a:not(.boton):where([href^="tel:"], [href^="mailto:"], [href^="https://wa.me/"]) { display: inline-block; padding: .65rem 0; margin: -.65rem 0; line-height: 1.65; } /* se pulsan con el dedo: 44 px de zona táctil con relleno, y el margen negativo evita que abra huecos entre líneas */
h1, h2, h3 { line-height: 1.15; text-wrap: balance; font-family: var(--serif); font-weight: 600; color: var(--marca-honda); }
h1 { font-size: var(--h1); margin: 0 0 var(--e2); }
h2 { font-size: var(--h2); margin: var(--e4) 0 var(--e2); }
h3 { font-size: var(--p2); margin: var(--e3) 0 var(--e1); }

.contenedor { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.estrecho { max-width: 44rem; }
.seccion { padding: var(--e4) 0; }
.seccion--alt { background: var(--fondo-alt); }
/* Con la barra delante: .boton (display:inline-flex) va despues y ganaba,
   y el boton de escritorio aparecia en la cabecera del movil (visto en la
   revision visual de Casa Emilia). En el movil llama la barra de abajo. */
.barra .solo-escritorio { display: none; }

/* --- barra fija --- */
.salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--fondo); }
.salto:focus { left: 1rem; }
.barra { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.barra__in { display: flex; align-items: center; gap: var(--e2); min-height: var(--barra); }
.barra__marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-right: auto; color: var(--tinta); font-weight: 700; text-decoration: none; }
.barra__logo { height: 44px; width: auto; display: block; }
.nav-escritorio { display: none; gap: .25rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; color: var(--tinta); text-decoration: none; border-radius: 6px; }
.nav-escritorio a[aria-current="page"] { color: var(--marca-honda); font-weight: 700; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 6px; cursor: pointer; list-style: none; }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil nav { position: absolute; left: 0; right: 0; top: var(--barra); display: grid; background: var(--fondo); border-bottom: 1px solid var(--borde); padding: var(--e1) 1rem var(--e2); }
.nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--fondo-alt); }

/* --- botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.2rem; border-radius: var(--radio); background: var(--marca-honda); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--marca-honda); }
.boton--sec { background: transparent; color: var(--marca-honda); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e1); }

/* --- bloques --- */
.hero { padding: var(--e4) 0 var(--e5); background: var(--fondo-alt); }
.antetitulo { margin: 0 0 var(--e1); color: var(--tinta-suave); font-weight: 700; letter-spacing: .02em; }
.entradilla { font-size: var(--p2); color: var(--tinta-suave); max-width: 40rem; }
.rejilla { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } /* min(100%,…): con 300px fijos desborda el móvil */
.tarjeta { display: block; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); color: var(--tinta); text-decoration: none; }
.tarjeta h3 { margin-top: 0; color: var(--marca-honda); }
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pasos li { counter-increment: paso; padding-left: 3rem; position: relative; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--marca-honda); color: #fff; font-weight: 700; }
.preguntas details { border-bottom: 1px solid var(--borde); padding: var(--e1) 0; }
.preguntas summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--e1); cursor: pointer; font-weight: 700; }
/* display:flex le quita al summary su triángulo: sin una señal, las preguntas
   parecían titulares y nadie las abría (auditor de diseño, vuelta 3). */
.preguntas summary::after { content: "+"; content: "+" / ""; flex: none; font: 400 var(--p3)/1 var(--serif); color: var(--marca-texto); } /* «/ ""»: el lector de pantalla no lee el signo */
.preguntas details[open] summary::after { content: "–"; content: "–" / ""; }
.dato { font-size: var(--p4); font-weight: 800; color: var(--marca-honda); }
table { width: 100%; border-collapse: collapse; margin: var(--e2) 0; }
th, td { padding: .7rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
th { font-size: var(--p0); color: var(--tinta-suave); }
.precio { text-align: right; white-space: nowrap; }
blockquote { margin: var(--e3) 0; padding-left: var(--e2); border-left: 4px solid var(--marca); }
blockquote p { margin: 0; font-size: var(--p2); }
.firma { margin-top: var(--e1); color: var(--tinta-suave); }
.oscuro { background: var(--marca-honda); color: #fff; }
.oscuro a, .oscuro strong { color: inherit; } /* sobre fondo oscuro, la negrita no puede ir en tinta */

/* --- pie --- */
.pie { padding: var(--e4) 0 calc(var(--e4) + 64px); background: var(--marca-honda); color: #E9E4D6; font-size: var(--p0); } /* 8,86 */
.pie a { color: #fff; }
.pie__rej { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pie__enlaces a { display: flex; align-items: center; min-height: 44px; }
.pie__demo { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid #4D6644; color: #C9D4BF; } /* 7,32 */

/* --- botón fijo de llamada, solo en el móvil --- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--marca-honda); box-shadow: 0 -2px 10px rgb(0 0 0 / .15); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; color: #fff; font-weight: 700; text-decoration: none; }
.barra-movil a + a { border-left: 1px solid rgb(255 255 255 / .3); }
/* Mientras el cartel de cookies (cookies-kit) está abierto, la barra le quedaría debajo. */
.cookies-abierto .barra-movil { display: none; }

@media (min-width: 900px) {
  .nav-escritorio { display: flex; }
  .nav-movil, .barra-movil { display: none; }
  .barra .solo-escritorio { display: inline-flex; }
  .seccion { padding: var(--e5) 0; }
  .pie { padding-bottom: var(--e4); }
}
/* Paso suave de una página a otra donde el navegador lo sabe hacer (encargo de Juan);
   la cabecera y la barra fija no «parpadean» porque son la misma pieza en las dos. */
@view-transition { navigation: auto; }
.barra { view-transition-name: cabecera; }
.barra-movil { view-transition-name: barra-movil; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .barra, .barra-movil, .nav-movil, .salto { display: none !important; }
  * { animation: none !important; opacity: 1 !important; }
}

/* ===========================================================================
   Lo propio de Ullate (portada, carta, galería). Mismas variables de arriba.
   =========================================================================== */
.hero { padding: var(--e3) 0 var(--e4); }
.hero__rej { display: grid; gap: var(--e3); align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); margin-bottom: var(--e1); }
.hero .antetitulo { color: var(--marca-texto); text-transform: uppercase; letter-spacing: .12em; font-size: var(--p0); }
.hero .entradilla { margin: 0 0 var(--e3); color: var(--tinta); }
.hero__foto { margin: 0; }
.hero__foto img { display: block; width: 100%; border-radius: var(--radio); aspect-ratio: 3 / 2; object-fit: cover; }
.hero__foto figcaption, .galeria figcaption { font-size: var(--p0); color: var(--tinta-suave); margin-top: .4rem; }
.dato-linea { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 var(--e3); padding: 0; list-style: none; color: var(--tinta-suave); font-size: var(--p0); }
.dato-linea a { color: var(--marca-texto); }
.boton--claro { background: #fff; color: var(--marca-honda); border-color: #fff; }

/* anticipo de la carta en la portada */
.anticipo { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); padding: 0; list-style: none; }
.anticipo li { padding: var(--e2) var(--e2) var(--e2) 0; border-top: 2px solid var(--marca); }
.anticipo b { display: block; font-family: var(--serif); font-size: var(--p2); color: var(--marca-honda); }
.anticipo span { color: var(--tinta-suave); }

/* galería de platos: fotos de la casa, sin nombre porque la casa no lo dice */
.galeria { display: grid; gap: var(--e2); grid-template-columns: repeat(2, 1fr); margin: var(--e3) 0 0; }
.galeria figure { margin: 0; }
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio); }

/* la carta */
.carta-nav { position: sticky; top: var(--barra); z-index: 40; display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0; margin-bottom: var(--e3); background: var(--fondo); border-bottom: 1px solid var(--borde); scrollbar-width: none; }
.carta-nav::-webkit-scrollbar { display: none; }
/* Sin barra de desplazamiento, un «Esp» cortado en el borde parecía un error
   (auditor de diseño, vuelta 2): un velo pegado a la derecha avisa de que sigue.
   Es el último hijo de la franja, así que al llegar al final queda detrás del
   último apartado y no lo tapa. */
.carta-nav::after { content: ""; flex: none; position: sticky; right: 0; width: 2.5rem; margin-left: -.4rem; background: linear-gradient(to right, rgb(255 255 255 / 0), var(--fondo) 70%); pointer-events: none; }
.carta-nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 999px; color: var(--marca-honda); text-decoration: none; font-weight: 600; }
.carta-nav a[aria-current] { background: var(--marca-honda); border-color: var(--marca-honda); color: #fff; } /* el apartado que se lee (web.js) */
.carta-grupo { scroll-margin-top: 64px; /* + el scroll-padding de html: deja el título bajo el menú de apartados */ margin-bottom: var(--e4); }
.carta-grupo h2 { margin-top: 0; border-bottom: 2px solid var(--marca); padding-bottom: .3rem; }
.platos { list-style: none; margin: 0; padding: 0; }
.plato { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--borde); }
.plato:last-child { border-bottom: 0; }
.plato__nombre { font-family: var(--serif); font-weight: 600; font-size: var(--p2); color: var(--tinta); }
.plato__precio { font-family: var(--serif); font-weight: 700; font-size: var(--p2); color: var(--marca-texto); white-space: nowrap; text-align: right; }
.plato__desc { grid-column: 1 / -1; margin: 0; color: var(--tinta-suave); }
/* Tintos del Campo de Borja: su D.O., en un sello con el verde de la casa (11,26 sobre blanco) */
.plato--borja .plato__nombre { font-weight: 700; }
.sello { display: inline-block; padding: .05rem .55rem; border-radius: 999px; background: var(--marca-honda); color: #fff; font-size: var(--p0); font-weight: 600; }
/* Pestillos: alérgenos por plato y «¿abierto hoy?» (solo salen con el dato del dueño) */
.plato__alergenos { grid-column: 1 / -1; margin: .2rem 0 0; font-size: var(--p0); color: var(--tinta-suave); }
.abierto-hoy b { color: var(--marca-texto); }
.aviso { padding: var(--e2); border-left: 4px solid var(--marca); background: var(--fondo-alt); }
.aviso p { margin: 0 0 .5rem; } .aviso p:last-child { margin: 0; }

@media (min-width: 900px) {
  .hero { padding: var(--e4) 0 var(--e5); }
  .hero__rej { grid-template-columns: 1fr 1.1fr; gap: var(--e4); }
  .galeria { grid-template-columns: repeat(4, 1fr); }
}
.seccion--pegada { padding-top: 0; }
/* Una línea de lectura de 45-75 letras: el contenedor estrecho mide 44 rem, y
   con letra de cuerpo salían 88-90 por línea en escritorio. */
.estrecho > p:not(.acciones), .contenedor > .estrecho > p:not(.acciones) { max-width: 38em; }

/* --- Su carta impresa en la web ---
   Las líneas topográficas finas de su carta de 2026, como adorno en la portada y
   en la cabecera de la carta (assets/topo.svg, 1 KB, sin nada de fuera). */
.hero, .con-topo { position: relative; overflow: hidden; isolation: isolate; }
.hero::after, .con-topo::after { content: ""; position: absolute; z-index: -1; width: 30rem; height: 30rem; right: -9rem; top: -11rem; background: #cfc58a; -webkit-mask: url("assets/topo.svg") center / contain no-repeat; mask: url("assets/topo.svg") center / contain no-repeat; opacity: .8; pointer-events: none; } /* máscara y no fondo: un fondo cuenta como «lo más grande» de la pantalla (LCP) y se esperaba a él; la máscara no (Lighthouse, 24/9/2026) */
.con-topo::after { right: -12rem; top: -14rem; }
/* Los apartados de la carta, rotulados como en su PDF: en mayúsculas espaciadas
   y, en pantallas anchas, en vertical junto a los platos, leyéndose de abajo arriba. */
.carta-grupo h2 { text-transform: uppercase; letter-spacing: .1em; font-size: var(--p3); font-weight: 700; color: var(--marca-texto); }
@media (min-width: 900px) {
  .carta-grupo { display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--e3); align-items: start; }
  /* El rótulo se estira a todo el alto del apartado para que el filete acompañe a la
     lista entera (con los 14 tintos se quedaba en una décima parte: QA, vuelta 3);
     text-align:end lo deja arriba, porque girado 180° el final de la línea está arriba. */
  .carta-grupo h2 { align-self: stretch; text-align: end; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; padding: .9rem 0 0; border: 0; border-left: 2px solid var(--marca); padding-left: .5rem; white-space: nowrap; line-height: 1; }
  .carta-grupo .platos { border-top: 1px solid var(--borde); }
}

/* Redes en el pie (el auditor de diseño: en su web actual se ven arriba del todo) */
.pie__redes { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin: 0; padding: 0; list-style: none; }
.pie__redes a { display: inline-flex; align-items: center; min-height: 44px; }
.titulo-discreto { font-size: var(--p3); margin: 0 0 .2rem; }
.titulo-discreto + .nota { margin: 0; }
.nota { font-size: var(--p0); color: var(--tinta-suave); }

/* Encargo 29/9/2026: lo que sale con los pestillos del dueño (temporada, menú) */
.aviso-temporada { margin-top: 1rem; padding: .75rem 1rem; border-left: 3px solid var(--marca-texto); background: rgba(94,121,83,.08); }
.menu-dia { margin-top: 2rem; }

/* ===========================================================================
   Encargo «marcar la diferencia» (29/9/2026): más apetito en la portada, pedir
   mesa sin idas y venidas, «Tu mesa» en la carta y el aviso de la casa.
   =========================================================================== */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Aviso de la casa (pestillo): franja bajo la cabecera, en todas las páginas */
.aviso-casa { background: var(--marca-honda); color: #fff; font-size: var(--p0); padding: .7rem 0; } /* 11,26 */

/* Portada: la foto del comedor manda más, y el titular respira */
@media (min-width: 900px) {
  .hero__rej { grid-template-columns: 1fr 1.25fr; }
  .hero__foto img { aspect-ratio: 4 / 3; box-shadow: 0 1.5rem 3rem -1.5rem rgb(47 63 42 / .45); }
}

/* En la mesa de Ullate: banda oscura con sus platos a lo grande */
.mesa { background: var(--marca-honda); color: #E9E4D6; padding: var(--e4) 0; } /* 8,86 */
.mesa h2 { color: #fff; margin: 0 0 var(--e1); }
.mesa__cab p { margin: 0 0 var(--e3); max-width: 38em; }
.mesa__nota { margin: var(--e2) 0 0; font-size: var(--p0); color: #C9D4BF; } /* 7,32 */
.mosaico { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--e2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
.mosaico::-webkit-scrollbar { display: none; }
.mosaico figure { margin: 0; scroll-snap-align: center; }
.mosaico img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio); }
@media (min-width: 900px) {
  .mesa { padding: var(--e5) 0; }
  .mosaico { grid-auto-flow: row; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; overflow: visible; margin: 0; padding: 0; }
  .mosaico__grande { grid-row: 1 / 3; }
  .mosaico__grande img { aspect-ratio: auto; }
  .mosaico figure:last-child { grid-column: 2 / 4; }
  .mosaico figure:last-child img { aspect-ratio: 2 / 1; }
}

/* Reservar: el teléfono en grande y, al lado, el formulario que escribe el WhatsApp */
.reserva { display: grid; gap: var(--e4); align-items: start; }
.reserva h2 { margin-top: 0; }
.reserva__tel { margin: var(--e1) 0 var(--e2); }
.reserva__tel a { font: 700 clamp(2.2rem, 8vw, 3.2rem)/1.1 var(--serif); color: var(--marca-honda); text-decoration: none; display: inline-block; min-height: 48px; }
.reserva__tel a:hover { text-decoration: underline; }
.pedir-mesa { display: grid; gap: var(--e2); padding: var(--e3); background: var(--fondo-alt); border-radius: var(--radio); border-top: 3px solid var(--marca); }
.pedir-mesa h3 { margin: 0; font-size: var(--p3); }
.pedir-mesa label { display: grid; gap: .3rem; font-weight: 700; font-size: var(--p0); color: var(--marca-honda); }
.pedir-mesa input, .pedir-mesa select { font: inherit; font-weight: 400; font-size: 1rem; color: var(--tinta); min-height: 48px; padding: .5rem .7rem; border: 1px solid #8C877A; border-radius: 8px; background: #fff; width: 100%; } /* borde 3,6 sobre blanco: se ve el campo */
.pedir-mesa input::placeholder { color: #6E6E68; } /* 5,1 sobre blanco */
.pedir-mesa__fila { display: grid; gap: var(--e1); grid-template-columns: 1fr 1fr; }
.pedir-mesa__fila label:last-child { grid-column: 1 / -1; }
.pedir-mesa .boton { justify-self: start; font-size: var(--p1); }
.pedir-mesa .nota { margin: 0; }
@media (min-width: 560px) { .pedir-mesa__fila { grid-template-columns: 1.3fr 1fr 1fr; } .pedir-mesa__fila label:last-child { grid-column: auto; } }
@media (min-width: 900px) { .reserva { grid-template-columns: 1fr 1.2fr; } }

/* «Tu mesa»: marcar platos en la carta (solo con JavaScript) */
.con-js .plato { grid-template-columns: 1fr auto auto; align-items: center; }
.plato__anadir { grid-row: 1; grid-column: 3; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--marca-honda); background: #fff; color: var(--marca-honda); font: 600 1.7rem/1 var(--letra); cursor: pointer; display: grid; place-items: center; }
.plato__anadir[aria-pressed="true"] { background: var(--marca-honda); color: #fff; }
.tu-mesa__pista { padding: .8rem 1rem; background: #fff; border: 1px dashed var(--marca); border-radius: var(--radio); }
.tu-mesa { position: fixed; left: 0; right: 0; bottom: 56px; z-index: 55; background: var(--marca-honda); color: #fff; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; box-shadow: 0 -4px 14px rgb(0 0 0 / .2); border-bottom: 1px solid rgb(255 255 255 / .25); }
.tu-mesa[hidden] { display: none; }
.tu-mesa__resumen { margin: 0; font-weight: 700; }
.tu-mesa__acciones { display: flex; gap: .4rem; align-items: center; }
.tu-mesa .boton { min-height: 44px; padding: 0 1rem; }
.tu-mesa__vaciar { min-height: 44px; padding: 0 .6rem; background: none; border: 0; color: #fff; font: inherit; text-decoration: underline; cursor: pointer; }
.con-tu-mesa .pie { padding-bottom: calc(var(--e4) + 64px + 120px); }
@media (min-width: 900px) {
  .tu-mesa { bottom: 0; padding-inline: max(1rem, calc((100% - 72rem) / 2)); }
  .con-tu-mesa .pie { padding-bottom: calc(var(--e4) + 80px); }
}
.sello--casa { margin-left: .4rem; vertical-align: middle; font-family: var(--letra); }

/* ===========================================================================
   Panel del dueño en MODO MUESTRA (5/10/2026, como el del Bar Nicholson): lo
   que se prueba en /panel/ sale solo en el navegador de quien lo prueba, con
   estas marcas amarillas para que nadie lo confunda con la web de verdad.
   =========================================================================== */
.muestra-franja { margin: 0; padding: .5rem 1rem; background: #FFE89A; color: #313131; font-size: var(--p0); text-align: center; } /* 10,69 */
.muestra-marca { display: inline-block; margin: .3rem 0; padding: .1rem .5rem; border-radius: 4px; background: #FFE89A; color: #313131; font: 600 .8rem/1.5 var(--letra); }
.jornadas__lista { list-style: none; margin: 0 0 var(--e2); padding: 0; display: grid; gap: var(--e2); }
.jornadas__lista li { border-left: 3px solid var(--marca); padding-left: var(--e2); }
.jornadas__lista h3 { margin: .1rem 0 .3rem; }
.jornadas__lista p { margin: 0; }
.jornadas__cuando { font-weight: 700; color: var(--marca-texto); font-size: var(--p0); }