/* ══════════════════════════════════════════════════════════════════
   Parada 14 · comida de carretera
   ------------------------------------------------------------------
   Ejemplo de web CON PAGOS para meglio.

   La idea de la casa: lo que eliges no desaparece en un carrito que no
   ves. Se queda arriba a la derecha, en una bandeja que se va llenando
   de verdad, con el mismo dibujo que acabas de tocar. Pedir tiene que
   dar gusto, no dar trabajo.

   Y personalizar un plato se hace ahí mismo, en un panel que se abre
   debajo de su fila. Sin cambiar de pagina y sin perder de vista la
   carta, que es donde se cae la mitad de los pedidos.

   Los tres ejemplos van en registros distintos a proposito, y este
   ademas no se recorre bajando: son vistas separadas, cada una la suya.

     meglio      azul noche y ambar
     Almacigo    papel claro, verde y magenta
     Contrapelo  caoba y laton, una hoja de libro
     Parada 14   mantel de cuadros, rojo y crema, ilustracion

   Todas las animaciones van de estado visible a estado visible. Nunca
   se usa animation-fill-mode con retardo: si una animacion no llegara a
   ejecutarse, el elemento se quedaria invisible para siempre.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ────────────────────────────────────────────────────── */
:root {
  --rojo:   #C42A24;   /* el rojo del mantel y del toldo */
  --rojo2:  #9E1E1A;   /* el mismo, mas oscuro, para pulsado */
  --crema:  #FBF4E4;   /* el papel de estraza */
  --crema2: #F3E7CE;
  --tinta:  #3A2318;   /* marron muy oscuro: todo el contorno */
  --humo:   rgba(58, 35, 24, .66);
  --tenue:  rgba(58, 35, 24, .44);
  --linea:  rgba(58, 35, 24, .18);
  --amar:   #F7C93B;   /* el amarillo de la mostaza, para destacar */
  --verde:  #2F7D4F;   /* abierto */

  --disp:   'Alfa Slab One', Georgia, serif;
  --mano:   'Yellowtail', cursive;
  --txt:    'Rubik', 'Segoe UI', system-ui, sans-serif;

  --e1: 8px;  --e2: 16px; --e3: 24px;
  --e4: 40px; --e5: 64px; --e6: 88px;

  --borde: 3px solid var(--tinta);
  --sombra: 0 4px 0 var(--tinta);

  /* Curvas de Emil Kowalski. Las de serie no tienen gracia. */
  --curva: cubic-bezier(.23, 1, .32, 1);
  --suave: cubic-bezier(.32, .72, 0, 1);
  --bote:  cubic-bezier(.34, 1.56, .64, 1);
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Una clase con display gana al [hidden] del navegador. Sin esto,
   cualquier elemento oculto que tenga display en CSS sigue viendose. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* El mantel de cuadros. Dos tramas de rojo translucido cruzadas dan los
   tres tonos de un vichy de verdad: blanco, rojo claro y rojo fuerte. */
body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--txt);
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--crema);
  background-image:
    repeating-linear-gradient(0deg, rgba(196, 42, 36, .5) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(90deg, rgba(196, 42, 36, .5) 0 26px, transparent 26px 52px);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--disp); font-weight: 400; line-height: 1.02; margin: 0; }
p { margin: 0 0 var(--e2); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--tinta); }
table { border-collapse: collapse; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.salto { position: absolute; left: -9999px; padding: 12px 18px; background: var(--tinta); color: var(--crema); }
.salto:focus { left: var(--e2); top: var(--e2); z-index: 99; }

.h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); margin-bottom: var(--e2); }
.ojo {
  font-family: var(--mano);
  font-size: 1.35rem;
  color: var(--rojo);
  margin-bottom: 2px;
}
.nota { color: var(--humo); font-size: .93rem; }

/* ─── Aviso de ejemplo ──────────────────────────────────────────── */
.demo {
  position: relative;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px var(--e2);
  padding: 8px var(--e3);
  background: var(--tinta);
  color: var(--crema);
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}
@media (min-width: 640px) { .demo { font-size: .86rem; } }
.demo p { margin: 0; }
.demo strong { color: var(--amar); }
.demo a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ─── Botones ───────────────────────────────────────────────────────
   Con reborde y sombra dura: son botones de pulsar, y se hunden al
   pulsarlos. Un sitio de comida no pide sutileza, pide ganas. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 24px;
  border: var(--borde);
  border-radius: 14px;
  background: var(--rojo);
  color: var(--crema);
  font-family: var(--txt);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: transform .12s var(--curva), box-shadow .12s var(--curva),
              background-color .2s var(--curva);
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--tinta); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--rojo2); } }
.btn--gr { min-height: 58px; padding: 14px 30px; font-size: 1.1rem; }
.btn--linea { background: var(--crema); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .btn--linea:hover { background: var(--crema2); } }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: var(--sombra); }

.enlace {
  font: inherit;
  color: var(--rojo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── La barra ──────────────────────────────────────────────────── */
.barra {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 12px clamp(var(--e2), 4vw, var(--e4));
  background: var(--tinta);
  color: var(--crema);
}
.marca { display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none; color: var(--crema); }
.marca__n { font-family: var(--disp); font-size: 1.3rem; letter-spacing: .01em; }
.marca__num {
  font-family: var(--disp);
  font-size: 1.1rem;
  background: var(--amar);
  color: var(--tinta);
  padding: 1px 8px;
  border-radius: 6px;
}
.barra__nav { display: none; margin-left: auto; gap: var(--e2); }
.barra__nav button {
  padding: 7px 12px;
  border-radius: 9px;
  font-size: .94rem;
  font-weight: 500;
  color: rgba(251, 244, 228, .78);
  transition: background-color .2s var(--curva), color .2s var(--curva);
}
.barra__nav button:hover { background: rgba(251, 244, 228, .12); color: var(--crema); }
.barra__nav button[aria-current="true"] { background: var(--rojo); color: var(--crema); }
@media (min-width: 760px) { .barra__nav { display: flex; } }
/* En el movil la barra se parte en dos alturas y las tres caras quedan
   a un dedo. Sin esto solo se llega a la carta y el resto de la web no
   existe para quien entra desde el telefono, que es casi todo el mundo. */
@media (max-width: 759px) {
  .barra { flex-wrap: wrap; gap: 10px var(--e3); }
  .barra__nav { display: flex; width: 100%; margin-left: 0; gap: 6px; }
  .barra__nav button {
    flex: 1;
    padding: 10px 4px;
    font-size: .84rem;
    white-space: nowrap;
    background: rgba(251, 244, 228, .1);
  }
  .barra__nav button[aria-current="true"] { background: var(--rojo); }
}

/* ═══════════════════════ LA BANDEJA ═══════════════════════════════
   Arriba a la derecha y siempre a la vista. No es un carrito con un
   numerito: es una bandeja donde se ve la comida que llevas, con el
   mismo dibujo que acabas de tocar.
   ══════════════════════════════════════════════════════════════════ */
.bandeja {
  position: fixed;
  top: 82px;
  right: clamp(10px, 3vw, 26px);
  z-index: 60;
  width: clamp(148px, 22vw, 208px);
  padding: 10px;
  border: var(--borde);
  border-radius: 16px;
  background: var(--rojo);
  color: var(--crema);
  text-align: left;
  box-shadow: 0 6px 0 var(--tinta), 0 18px 30px -18px rgba(58, 35, 24, .7);
  transition: transform .2s var(--bote);
}
/* Se retira sola donde estorba. */
body[data-cara="pedido"] .bandeja,
body[data-cara="pagar"] .bandeja,
body[data-cara="cocina"] .bandeja { display: none; }
.bandeja:active { transform: translateY(3px); }
/* Cuando cae algo dentro, la bandeja acusa el golpe. */
.bandeja.is-golpe { animation: golpe .4s var(--bote); }
@keyframes golpe {
  0%   { transform: none; }
  35%  { transform: translateY(5px) scale(.97); }
  100% { transform: none; }
}

.bandeja__cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bandeja__t { font-family: var(--disp); font-size: .92rem; }
.bandeja__n {
  min-width: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--amar);
  color: var(--tinta);
  font-weight: 700;
  font-size: .82rem;
  text-align: center;
}

/* El interior: papel de estraza, como el que forran las bandejas. */
.bandeja__caja {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  min-height: 74px;
  margin: 8px 0;
  padding: 6px;
  border-radius: 9px;
  background: var(--crema);
  background-image:
    repeating-linear-gradient(0deg, rgba(196, 42, 36, .28) 0 9px, transparent 9px 18px),
    repeating-linear-gradient(90deg, rgba(196, 42, 36, .28) 0 9px, transparent 9px 18px);
}
.bandeja__vacia {
  width: 100%;
  align-self: center;
  text-align: center;
  font-family: var(--mano);
  font-size: 1.1rem;
  color: var(--tenue);
}
/* Lo que ya no cabe dibujado se cuenta, y se cuenta legible: con la
   letra del «Vacia» a media tinta no se leia. */
.bandeja__mas {
  width: 100%;
  align-self: center;
  padding-top: 3px;
  text-align: center;
  font-family: var(--disp);
  font-size: .76rem;
  color: var(--tinta);
}

/* Cada cosa cae en la bandeja con su propia inclinacion: amontonadas a
   escuadra parecen un inventario, no una bandeja. */
.bandeja__caja svg {
  width: 34px;
  height: 34px;
  display: block;
  transform: rotate(var(--giro, 0deg));
  animation: cae .38s var(--bote);
}
@keyframes cae {
  0%   { transform: rotate(var(--giro, 0deg)) scale(.2); opacity: 0; }
  100% { transform: rotate(var(--giro, 0deg)) scale(1); opacity: 1; }
}

.bandeja__pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .84rem; }
.bandeja__pie span:first-child { font-weight: 700; }
.bandeja__ver { text-decoration: underline; text-underline-offset: 3px; opacity: .85; }

/* El dibujo que vuela del boton a la bandeja. */
.vuela {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  width: 64px;
  height: 64px;
  transition: transform .62s var(--suave), opacity .62s var(--curva);
}

/* ─── Vistas ────────────────────────────────────────────────────────
   Esto no es una pagina larga que se recorre bajando: cada apartado es
   su propia cara y se entra por su boton, con su URL. */
main { position: relative; }
/* La bandeja esta fija arriba a la derecha, asi que se le reserva un
   carril y ningun cartel acaba por debajo de ella. Donde la bandeja no
   sale, el carril se cierra y la cara vuelve a ocupar todo. */
.vista {
  --carril: 0px;
  padding: var(--e4) clamp(var(--e2), 4vw, var(--e5)) var(--e6);
  padding-right: max(clamp(var(--e2), 4vw, var(--e5)), var(--carril));
  max-width: 1180px;
  margin: 0 auto;
  animation: entra .4s var(--curva);
}
@media (min-width: 700px) { .vista { --carril: clamp(172px, 25vw, 248px); } }
body[data-cara="pedido"] .vista,
body[data-cara="pagar"] .vista,
body[data-cara="cocina"] .vista { --carril: 0px; }
@keyframes entra {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}
.carta__cab { max-width: 44ch; margin-bottom: var(--e3); }
.carta__p { color: var(--humo); }

/* ═══════════════════════ PORTADA ══════════════════════════════════ */
.cartel {
  position: relative;
  max-width: 620px;
  margin: 0 auto var(--e4);
  padding: var(--e3) var(--e4) var(--e4);
  border: 5px solid var(--tinta);
  border-radius: 22px;
  background: var(--crema);
  box-shadow: 0 8px 0 var(--tinta);
  text-align: center;
}
.cartel__desde {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 4px;
}
.cartel__h { display: grid; gap: 2px; }
.cartel__l1 {
  font-family: var(--disp);
  font-size: clamp(2.8rem, 1rem + 9vw, 5.4rem);
  color: var(--rojo);
  text-shadow: 4px 4px 0 var(--tinta);
  letter-spacing: .01em;
}
.cartel__l2 {
  font-family: var(--disp);
  font-size: clamp(2.2rem, .8rem + 7vw, 4.2rem);
  color: var(--amar);
  text-shadow: 4px 4px 0 var(--tinta);
}
.cartel__sub { font-family: var(--mano); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); margin: 6px 0 0; }

/* Las bombillas del rotulo. Se encienden por turnos, como las de
   verdad, y el desfase lo lleva cada una en su retardo. */
.cartel__luces {
  position: absolute;
  left: 14px; right: 14px; top: -11px;
  display: flex;
  justify-content: space-between;
}
.cartel__luces::before, .cartel__luces::after { content: none; }
.bombilla {
  width: 15px; height: 15px;
  border: var(--borde);
  border-radius: 50%;
  background: var(--amar);
  animation: parpadea 1.8s var(--curva) infinite;
}
@keyframes parpadea {
  0%, 45%  { background: var(--amar); }
  55%, 100% { background: var(--crema2); }
}

.portada__p { max-width: 46ch; margin: 0 auto var(--e3); text-align: center; font-size: 1.06rem; }
.portada__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: var(--e3); }
.portada__estado {
  text-align: center;
  font-weight: 500;
  margin: 0 auto var(--e4);
  max-width: 44ch;
}
.portada__estado b { font-weight: 700; }
.portada__estado .abierto { color: var(--verde); }
.portada__estado .cerrado { color: var(--rojo); }

.tira { display: flex; justify-content: center; gap: clamp(6px, 2vw, 22px); flex-wrap: wrap; }
.tira svg { width: clamp(54px, 11vw, 90px); height: auto; }

/* ═══════════════════════ LA CARTA ═════════════════════════════════ */
.secciones {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: var(--e3);
  scrollbar-width: thin;
}
.seccion {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: var(--borde);
  border-radius: 999px;
  background: var(--crema);
  font-weight: 700;
  font-size: .96rem;
  white-space: nowrap;
  transition: background-color .22s var(--curva), color .22s var(--curva),
              transform .14s var(--curva);
}
.seccion:active { transform: translateY(2px); }
.seccion svg { width: 24px; height: 24px; }
.seccion[aria-selected="true"] { background: var(--tinta); color: var(--crema); }

/* Las fichas de los platos. La rejilla es la de siempre, pero el panel
   para personalizar se cuela como una fila entera justo debajo, para
   que no se pierda de vista lo demas. */
.platos { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
@media (min-width: 720px) { .platos { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); } }

.plato {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: var(--e2) 10px 12px;
  border: var(--borde);
  border-radius: 18px;
  background: var(--crema);
  text-align: center;
  box-shadow: var(--sombra);
  transition: transform .16s var(--curva), box-shadow .16s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .plato:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--tinta); }
  .plato:hover svg { transform: rotate(-4deg) scale(1.06); }
}
.plato:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.plato.is-abierto { background: var(--amar); }
.plato svg { width: 84px; height: 84px; transition: transform .25s var(--bote); }
.plato__n { font-family: var(--disp); font-size: 1.02rem; line-height: 1.15; }
.plato__p { font-weight: 700; font-size: .95rem; color: var(--rojo); }

/* El panel de personalizar: ocupa la fila entera, debajo del plato. */
.panel {
  grid-column: 1 / -1;
  border: var(--borde);
  border-radius: 18px;
  background: var(--crema);
  box-shadow: var(--sombra);
  overflow: hidden;
  animation: abre .32s var(--curva);
}
@keyframes abre {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: none; }
}
/* Una vez abierto, el panel se queda quieto para siempre. Mover un
   elemento de sitio le reinicia la animación, y al girar el móvil el
   panel volvía a aparecer con fundido como si se abriera otra vez. */
.panel.is-quieto { animation: none; }
.panel__cab {
  display: flex;
  /* Arriba, no al medio: cuando la descripcion ocupa tres lineas el
     dibujo se quedaba flotando en mitad y el titulo colgado encima. */
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e2);
  background: var(--amar);
  border-bottom: var(--borde);
}
.panel__cab svg { width: 66px; height: 66px; flex: none; }
.panel__t { font-family: var(--disp); font-size: 1.3rem; }
.panel__d { font-size: .92rem; color: var(--humo); margin: 0; }
.panel__x { margin-left: auto; font-size: 1.6rem; line-height: 1; padding: 6px 10px; }

.panel__cuerpo { padding: var(--e2); display: grid; gap: var(--e2); }
.grupo__t { font-family: var(--disp); font-size: .96rem; margin-bottom: 8px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cada ingrediente es un boton que se pulsa: puesto o quitado. Nada de
   casillas diminutas, que esto se usa con el dedo y con prisa. */
.ing {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: var(--borde);
  border-radius: 999px;
  background: var(--crema);
  font-size: .92rem;
  font-weight: 500;
  transition: background-color .2s var(--curva), color .2s var(--curva),
              transform .12s var(--curva);
}
.ing:active { transform: translateY(2px); }
.ing__x { font-weight: 700; }
.ing[aria-pressed="true"] { background: var(--tinta); color: var(--crema); }
.ing[aria-pressed="true"] .ing__x::before { content: "✓ "; }
/* Tachar solo vale para lo que quitas de lo que ya venia. Un extra que
   aun no has puesto lleva un mas delante: invita, no niega. */
.ing[data-serie][aria-pressed="false"] .ing__x { text-decoration: line-through; opacity: .6; }
.ing:not([data-serie])[aria-pressed="false"] .ing__x::before { content: "+ "; color: var(--rojo); }
.ing__mas { font-size: .8rem; opacity: .75; }

.panel__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2);
  border-top: var(--borde);
  background: var(--crema2);
}
.cantidad { display: inline-flex; align-items: center; gap: 4px; }
.cantidad button {
  width: 42px; height: 42px;
  border: var(--borde);
  border-radius: 12px;
  background: var(--crema);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}
.cantidad button:active { transform: translateY(2px); }
.cantidad span { min-width: 34px; text-align: center; font-weight: 700; font-size: 1.1rem; }
.panel__total { margin-left: auto; font-family: var(--disp); font-size: 1.35rem; }

/* ═══════════════════════ EL PEDIDO ════════════════════════════════ */
.lineas { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: 10px; }
.linea {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: var(--e2);
  padding: 12px;
  border: var(--borde);
  border-radius: 16px;
  background: var(--crema);
}
.linea svg { width: 58px; height: 58px; }
.linea__n { font-family: var(--disp); font-size: 1.06rem; }
.linea__d { font-size: .88rem; color: var(--humo); }
.linea__lado { display: grid; justify-items: end; gap: 6px; }
.linea__p { font-weight: 700; }
.linea__quitar { font-size: .84rem; color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }

.cuenta {
  max-width: 420px;
  margin-left: auto;          /* pegada a la columna de los precios */
  padding: var(--e3);
  border: var(--borde);
  border-radius: 18px;
  background: var(--crema);
  box-shadow: var(--sombra);
  display: grid;
  gap: 6px;
}
.cuenta__f { display: flex; justify-content: space-between; gap: var(--e2); }
.cuenta__f--total {
  font-family: var(--disp);
  font-size: 1.4rem;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 2px dashed var(--linea);
}
.cuenta__hora { font-size: .9rem; color: var(--humo); margin: 6px 0 var(--e2); }
.cuenta .btn { width: 100%; margin-top: 4px; }
.vacio { font-family: var(--mano); font-size: 1.5rem; color: var(--humo); }

/* ═══════════════════════ EL PAGO ══════════════════════════════════ */
.pago { max-width: 520px; margin: 0 auto; text-align: center; }
.tique {
  padding: var(--e4) var(--e3);
  border: var(--borde);
  border-radius: 18px;
  background: var(--crema);
  box-shadow: var(--sombra);
}
.tique svg { width: 92px; height: 92px; }
.tique__t { font-family: var(--disp); font-size: 1.9rem; margin: var(--e2) 0 6px; }
.tique__n { color: var(--humo); }
.tique__cod {
  display: inline-block;
  margin: var(--e2) 0;
  padding: 10px 20px;
  border: 3px dashed var(--tinta);
  border-radius: 12px;
  font-family: var(--disp);
  font-size: 1.7rem;
  letter-spacing: .08em;
}
.tique__aviso {
  margin-top: var(--e3);
  padding-top: var(--e2);
  border-top: 2px dashed var(--linea);
  font-size: .88rem;
  color: var(--humo);
}

/* ═══════════════════════ EL LOCAL ═════════════════════════════════ */
/* Las dos mitades van sobre carton, como todo lo demas: escritas
   directamente sobre el mantel se leen mal y la cara parece a medio
   hacer. Son dos carteles colgados de la pared. */
.local { display: grid; gap: var(--e3); align-items: start; }
@media (min-width: 820px) { .local { grid-template-columns: 1fr 1fr; gap: var(--e3); } }
.local > div {
  padding: var(--e3);
  border: var(--borde);
  border-radius: 18px;
  background: var(--crema);
  box-shadow: var(--sombra);
}
.dir { font-family: var(--disp); font-size: 1.7rem; line-height: 1.15; }
.local__donde .nota { margin: var(--e2) 0; }
.local__horas h3 { font-size: 1.3rem; margin-bottom: var(--e2); }
.horas { width: 100%; margin-bottom: var(--e2); border-collapse: collapse; }
/* Puntitos del dia a la hora, como en los carteles de los bares. La
   fila se vuelve flexible y los puntos son lo que sobra entre medias;
   si el navegador no la hace flexible queda una tabla normal. */
.horas tr { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.horas td { padding: 0; font-size: .95rem; }
.horas td:first-child { flex: 1; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.horas td:first-child::after {
  content: "";
  flex: 1;
  border-bottom: 2px dotted var(--linea);
  transform: translateY(-4px);
}
.horas td:last-child { flex: none; color: var(--humo); }
.horas tr.hoy td { color: var(--rojo); font-weight: 700; }
.horas tr.hoy td:first-child::after { border-bottom-color: var(--rojo); }
.local .btn { margin-top: var(--e2); }

/* ═══════════════════ VISTA DEL LOCAL ══════════════════════════════ */
.cocina { display: grid; gap: var(--e4); align-items: start; }
@media (min-width: 860px) { .cocina { grid-template-columns: 320px 1fr; gap: var(--e5); } }

.movil {
  border: 5px solid var(--tinta);
  border-radius: 26px;
  overflow: hidden;
  background: #0F1720;
  box-shadow: 0 8px 0 var(--tinta);
}
.movil__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #17212B;
  color: #E7EEF5;
  font-size: .88rem;
  font-weight: 500;
}
.movil__pto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); }
.movil__chat { min-height: 320px; max-height: 60vh; overflow-y: auto; padding: 12px; display: grid; gap: 10px; align-content: start; }

.globo {
  max-width: 92%;
  padding: 10px 13px;
  border-radius: 14px 14px 14px 4px;
  background: #1F2C3A;
  color: #E7EEF5;
  font-size: .86rem;
  line-height: 1.5;
  animation: llega .34s var(--bote);
}
@keyframes llega {
  0%   { opacity: 0; transform: translateY(10px) scale(.96); }
  100% { opacity: 1; transform: none; }
}
.globo--mio { margin-left: auto; border-radius: 14px 14px 4px; background: #2B5278; }
.globo--sis { background: transparent; color: rgba(231, 238, 245, .5); font-size: .78rem; text-align: center; margin: 0 auto; }
.globo b { color: var(--amar); }
.globo__sub { opacity: .6; }
.globo__hora { display: block; margin-top: 4px; font-size: .68rem; opacity: .5; }
.globo__btns { display: flex; gap: 6px; margin-top: 9px; }
.globo__btns button {
  flex: 1;
  padding: 7px;
  border-radius: 8px;
  background: rgba(231, 238, 245, .1);
  color: #8FC0E8;
  font-size: .78rem;
  font-weight: 500;
}
.globo__btns button:hover { background: rgba(231, 238, 245, .18); }
.globo__btns button:disabled { opacity: .45; cursor: default; }

.cocina__mandos { display: grid; gap: var(--e3); }
.interruptor { padding: var(--e3); border: var(--borde); border-radius: 18px; background: var(--crema); }
.interruptor__t { font-family: var(--disp); font-size: 1.2rem; margin-bottom: 6px; }
.interruptor__p { font-size: .94rem; color: var(--humo); margin-bottom: var(--e2); }
code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--tinta);
  color: var(--amar);
  font-size: .88em;
}
.cocina__nota { font-size: .9rem; color: var(--humo); margin: 0; }

/* ─── Pie ───────────────────────────────────────────────────────── */
.pie {
  padding: var(--e4) clamp(var(--e2), 4vw, var(--e5));
  background: var(--tinta);
  color: rgba(251, 244, 228, .7);
  font-size: .9rem;
  display: grid;
  gap: 4px;
}
.pie p { margin: 0; }
.pie__marca { font-family: var(--disp); font-size: 1.6rem; color: var(--crema); }
.pie__meglio { margin-top: var(--e2); }
.pie__meglio a { color: var(--amar); font-weight: 700; }

/* ─── Móvil ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bandeja { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; display: grid;
             grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
  .bandeja__cab { flex-direction: column; gap: 2px; align-items: flex-start; }
  .bandeja__caja { min-height: 46px; margin: 0; }
  .bandeja__caja svg { width: 28px; height: 28px; }
  .bandeja__vacia { font-size: .95rem; }
  .bandeja__pie { flex-direction: column; align-items: flex-end; gap: 2px; }
  .vista { padding-bottom: 130px; }
  .plato svg { width: 68px; height: 68px; }
  .panel__cab svg { width: 52px; height: 52px; }
  .panel__t { font-size: 1.15rem; }
}

/* ─── Movimiento reducido ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}