/* ==========================================================================
   Kalamarata — sistema de diseño
   Paleta tomada del logo del cliente: naranja, verde, negro sobre blanco.
   Escena de uso: un celular en la calle de Barranquilla a mediodía con sol,
   y el mismo celular en un sofá a las 8 de la noche. De ahí salen los dos
   esquemas: claro por defecto, oscuro cuando el sistema lo pide.
   ========================================================================== */

:root {
  /* Marca */
  --naranja:        #E8720C;
  --naranja-vivo:   #F5821F;
  --naranja-hondo:  #B8550A;
  --naranja-texto:  #B8550A;
  --naranja-prensa: #9E4907;
  --sobre-marca:    #FFFFFF;

  /* El pie es oscuro en ambos esquemas: sus tokens no se voltean. */
  --pie-texto:      #E9E2D9;
  --pie-rotulo:     #A79C90;
  --pie-linea:      rgba(255, 255, 255, .14);
  --pie-pend-tinta: #F5A894;
  --pie-pend-filo:  #F0836A;
  --pie-pend-fondo: rgba(240, 131, 106, .16);
  --verde:          #2C8B2B;
  --verde-hondo:    #1E6B1D;
  --verde-claro:    #E8F4E7;
  --sobre-verde:    #E9F0E7;   /* texto secundario dentro del campo verde */
  --sobre-verde-2:  #DCE8D9;   /* terciario en el mismo campo */
  --enlace:         #1E6B1D;
  --verde-prensa:   #175616;
  --naranja-accion: #F5821F;   /* relleno de acción sobre campo verde */
  --sobre-accion:   #1A1512;   /* texto encima: blanco sobre ese naranja da 2.6:1 */

  /* Superficies */
  --papel:          #FFFFFF;   /* tarjetas y superficies elevadas */
  --fondo:          #FFFFFF;   /* el suelo de la página: blanco, sin tostar */
  --fondo-hondo:    #F1F4F0;   /* el escalón: gris de matiz verde, no beige */
  --control:        #F1F4F0;   /* relleno en reposo de campos y chips */
  --control-hover:  #E7EBE5;
  --tinta:          #1A1512;
  --tinta-suave:    #5C534B;
  --tinta-tenue:    #6E645B;
  --linea:          #E4E7E2;
  --linea-fuerte:   #C7CDC4;

  /* Estados */
  --alerta:         #A8341A;
  --alerta-fondo:   #FBEDE9;

  /* Tipografía */
  --texto: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --titular: "Archivo Black", "Archivo", ui-sans-serif, system-ui, sans-serif;

  /* Ritmo */
  --r1: .25rem;  --r2: .5rem;   --r3: .75rem;  --r4: 1rem;
  --r5: 1.5rem;  --r6: 2rem;    --r7: 3rem;    --r8: 4.5rem;

  --radio:      10px;
  --radio-chico: 6px;
  --ancho:      1180px;
  --cab-alto:   84px;

  --sombra-alta: 0 2px 4px rgba(26, 21, 18, .08), 0 12px 28px rgba(26, 21, 18, .12);

  /* Solo claro: es una página web de restaurante, no una app, y el blanco
     es la decisión del cliente. Sin esto el navegador puede repintar los
     controles nativos en oscuro. */
  color-scheme: only light;
  accent-color: var(--naranja);
}

@media (max-width: 52rem) { :root { --cab-alto: 72px; } }

/* --------------------------------------------------------------------------
   Base y superficies del navegador. Lo que no dibujamos igual lleva la marca.
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--naranja); color: #fff; }
:where(input, textarea) { caret-color: var(--naranja); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--linea-fuerte) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border-radius: 99px;
  border: 3px solid var(--fondo);
}
::-webkit-scrollbar-thumb:hover { background: var(--tinta-tenue); }

a { color: var(--enlace); text-underline-offset: .18em; text-decoration-thickness: from-font; }

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

h1, h2, h3 { font-family: var(--titular); line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }
h3 { font-size: 1.06rem; letter-spacing: -.01em; }
p  { margin: 0 0 var(--r4); max-width: 68ch; }

.env { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
@media (max-width: 30rem) { .env { width: calc(100% - 2rem); } }

.saltar {
  position: absolute; left: var(--r4); top: -4rem; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: var(--r3) var(--r4);
  border-radius: var(--radio); font-weight: 700; transition: top .18s cubic-bezier(.2,.8,.2,1);
}
.saltar:focus { top: var(--r4); }

.vo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cab {
  position: sticky; top: 0; z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cab__fila {
  display: flex; align-items: center; gap: var(--r4);
  min-height: var(--cab-alto); padding-block: var(--r2);
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; }
.marca__texto { display: block; }
.marca__nombre {
  font-family: var(--titular); font-size: 1.5rem; line-height: 1;
  letter-spacing: -.035em; color: var(--verde);
}
.marca__nombre b { color: var(--naranja); font-weight: inherit; }
.marca__bajada {
  display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave); margin-top: .18rem; font-weight: 600;
}
/* El lockup del cliente es horizontal y lleva la bajada incrustada: se usa
   entero y la bajada viaja en el alt, que sí leen buscadores y lectores. */
.marca__logo { height: 68px; width: auto; }
@media (max-width: 52rem) { .marca__logo { height: 56px; } }

.nav { display: flex; gap: var(--r5); margin-left: auto; }
.nav a {
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .94rem;
  padding-block: var(--r2); border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--naranja-hondo); border-bottom-color: var(--naranja); }
.nav a[aria-current="page"] { color: var(--naranja-hondo); border-bottom-color: var(--naranja); }

@media (max-width: 52rem) { .nav { display: none; } }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; line-height: 1;
  padding: .8rem 1.25rem; border-radius: var(--radio);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .16s cubic-bezier(.2,.8,.2,1), border-color .16s, color .16s, transform .16s;
}
.btn:active { transform: translateY(1px); }
.btn--wa    { background: var(--verde-hondo); color: var(--sobre-marca); }
.btn--wa:hover { background: var(--verde-prensa); }
.btn--ped   { background: var(--naranja-hondo); color: var(--sobre-marca); }
.btn--ped:hover { background: var(--naranja-prensa); }
.btn--linea { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); }
.btn--linea:hover { border-color: var(--tinta); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--control); color: var(--tinta-tenue);
  border-color: var(--linea); cursor: not-allowed; transform: none;
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */

.portada { background: var(--papel); border-bottom: 1px solid var(--linea); }
.portada__caja { padding-block: var(--r8) var(--r7); display: grid; gap: var(--r6); }
@media (min-width: 60rem) {
  .portada__caja { grid-template-columns: 1.15fr .85fr; align-items: start; gap: var(--r8); }
}
.portada h1 { margin-bottom: var(--r4); }
.portada h1 em { font-style: normal; color: var(--naranja-texto); }
.portada__entrada { font-size: 1.16rem; color: var(--tinta-suave); max-width: 46ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r5); }

.horario { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--control); overflow: hidden; }
.horario__fila { display: flex; justify-content: space-between; gap: var(--r4); padding: var(--r3) var(--r4); border-bottom: 1px solid var(--linea); }
.horario__fila:last-child { border-bottom: 0; }
.horario__fila dt { font-weight: 700; margin: 0; }
.horario__fila dd { margin: 0; color: var(--tinta-suave); text-align: right; font-variant-numeric: tabular-nums; }
.horario__aviso { background: var(--verde-claro); padding: var(--r3) var(--r4); font-size: .9rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Comentarios del pedido — «sin cebolla» es parte del pedido, no un extra
   -------------------------------------------------------------------------- */

.notas { margin-bottom: var(--r4); }
.notas__et {
  display: block; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: var(--r2);
}
.notas__et span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tinta-tenue); }
.notas__campo {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 3.4rem;
  font: inherit; font-size: .94rem; color: var(--tinta);
  background: var(--control); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); padding: .6rem .75rem;
}
.notas__campo::placeholder { color: var(--tinta-tenue); }
.notas__campo:focus-visible { outline: 2px solid var(--verde-hondo); outline-offset: 1px; border-color: var(--verde-hondo); }
.notas__cuenta {
  margin: .3rem 0 0; text-align: right;
  font-size: .78rem; color: var(--tinta-tenue); font-variant-numeric: tabular-nums;
}

.pend {
  display: inline-block; background: var(--alerta-fondo); color: var(--alerta);
  border: 1px dashed var(--alerta); border-radius: var(--radio-chico);
  padding: .1rem .45rem; font-size: .82rem; font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */

.seccion { padding-block: var(--r7); }
.seccion--papel { background: var(--papel); border-block: 1px solid var(--linea); }
.seccion__tit { margin-bottom: var(--r5); }
.seccion__tit p { color: var(--tinta-suave); margin: var(--r2) 0 0; }

.tarjetas { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dato {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: var(--r4);
}
.dato h3 { margin-bottom: var(--r2); }
.dato[data-hoy] { border-color: var(--verde-hondo); border-width: 2px; background: var(--verde-claro); }
.dato__hoy {
  display: inline-block; margin-bottom: var(--r2);
  background: var(--verde-hondo); color: var(--sobre-marca);
  font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: var(--radio-chico);
}
.hoy-cartel { background: var(--verde-claro); border: 2px solid var(--verde-hondo); border-radius: var(--radio); padding: var(--r4); margin-bottom: var(--r4); }
.hoy-cartel__dia { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--verde-hondo); margin: 0 0 var(--r1); }
.hoy-cartel__plato { font-family: var(--titular); font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 var(--r1); }
.hoy-cartel__precio { font-family: var(--titular); font-size: 1.75rem; font-variant-numeric: tabular-nums; color: var(--naranja-texto); margin: 0; }
.hoy-cartel__nota { font-size: .9rem; color: var(--tinta-suave); margin: var(--r2) 0 0; }
.dato p { margin: 0; color: var(--tinta-suave); font-size: .94rem; }
.dato__cifra { font-family: var(--titular); font-size: 1.5rem; color: var(--naranja-texto); display: block; }

/* --------------------------------------------------------------------------
   Carta: barra de categorías, buscador, tarjetas de plato
   -------------------------------------------------------------------------- */

.barra {
  position: sticky; top: var(--cab-alto); z-index: 30;
  background: var(--papel); border-bottom: 1px solid var(--linea);
}
.barra__caja { display: flex; align-items: center; gap: var(--r3); padding-block: var(--r3); }

.buscar { position: relative; flex: 1 1 auto; max-width: 420px; }
.buscar input {
  width: 100%; font: inherit; color: var(--tinta);
  padding: .7rem .9rem .7rem 2.4rem;
  background: var(--control); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
}
.buscar input::placeholder { color: var(--tinta-tenue); }
.buscar svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); }

.cats-caja { position: relative; }
/* La barra de scroll se oculta, asi que el corte tiene que verse de otra
   forma: sin esto, 20 de 22 categorias son invisibles y nadie sabe que hay
   mas a la derecha. Ahora tambien a la izquierda: desde que el riel se
   desplaza solo para seguirte, puede quedar carta escondida a ese lado. */
.cats-caja::before,
.cats-caja::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3.5rem;
  pointer-events: none; opacity: 0; transition: opacity .16s;
}
.cats-caja::before {
  left: 0; background: linear-gradient(to left, transparent, var(--papel) 78%);
}
.cats-caja::after {
  right: 0; background: linear-gradient(to right, transparent, var(--papel) 78%);
}
/* Las clases las pone pintarBordes() en carta.js. Si el script no corre no
   aparece --medida, y el respaldo deja el degradado derecho puesto, que es el
   comportamiento que habia antes. Con el JS en marcha mandan las medidas: con
   solo dos chips no hay nada escondido y no debe verse ningun degradado. */
.cats-caja--izq::before, .cats-caja--der::after { opacity: 1; }
.cats-caja:not(.cats-caja--medida)::after { opacity: 1; }
/* El padding/margen de 3px a la izquierda es load-bearing: el chip activo
   lleva un anillo de 2px POR FUERA de su caja, y con el riel en overflow-x
   y el chip pegado al borde, ese anillo salia cortado en plano. El margen
   negativo devuelve los chips a su sitio, alineados con el buscador. */
.cats {
  display: flex; gap: var(--r2); overflow-x: auto;
  padding-block: var(--r3); padding-left: 3px; padding-right: 3rem;
  margin-left: -3px;
  scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cats a {
  /* Son enlaces de salto, no texto corrido: sin subrayado. */
  text-decoration: none;
  flex: 0 0 auto; font: inherit; font-weight: 700; font-size: .9rem;
  padding: .5rem .9rem; border-radius: 99px; cursor: pointer;
  background: var(--control); color: var(--tinta-suave);
  border: 1px solid var(--linea-fuerte);
  transition: background-color .16s cubic-bezier(.2,.8,.2,1), color .16s, border-color .16s;
  white-space: nowrap;
}
.cats a:hover { border-color: var(--tinta-tenue); color: var(--tinta); }
/* «Dónde estoy» va en tinta, no en verde: el verde ya está ocupado por los
   chips de servicio, que son permanentes. Con los dos en verde, «Almuerzo»
   parecía la categoría actual aunque estuvieras leyendo comidas rápidas. */
.cats a[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-marca); }

/* --desplazamiento lo mide el JS: ver ajustarDesplazamiento() en carta.js.
   El calc es el respaldo si el script no corre. */
.grupo { padding-block: var(--r6) var(--r2); scroll-margin-top: var(--desplazamiento, calc(var(--cab-alto) + 9rem)); }
.grupo__tit { display: flex; align-items: baseline; gap: var(--r3); flex-wrap: wrap; }
.grupo__nota { color: var(--tinta-suave); font-size: .9rem; margin: var(--r2) 0 0; }

/* align-items: start es load-bearing: por defecto la rejilla estira todas las
   tarjetas de una fila a la altura de la más alta, así que una tarjeta con
   foto dejaba a sus tres vecinas sin foto con un hueco vacío enorme. */
.platos {
  display: grid; gap: var(--r4); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); margin-top: var(--r4);
}

.plato {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden;
  transition: border-color .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s;
}
.plato:hover { border-color: var(--tinta-tenue); }
/* [hidden] del navegador pierde contra display:flex de arriba: hay que repetirlo */
.plato[hidden], .grupo[hidden] { display: none; }

.plato__lienzo { position: relative; aspect-ratio: 4 / 3; background: var(--fondo-hondo); overflow: hidden; }
.plato__lienzo img { width: 100%; height: 100%; object-fit: cover; }
/* Sin foto: el hueco queda preparado y se llena con tipografía, no con un icono genérico */
.plato__sinfoto {
  width: 100%; height: 100%; display: grid; place-items: center; padding: var(--r4);
  background: var(--verde-claro);
  text-align: center;
}
.plato__sinfoto span {
  font-family: var(--titular); font-size: 1.06rem; line-height: 1.15;
  color: var(--verde-hondo); letter-spacing: -.02em;
}

.plato__ref {
  position: absolute; left: var(--r2); bottom: var(--r2);
  background: rgba(26,21,18,.82); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .45rem; border-radius: var(--radio-chico);
}

.plato__cuerpo { padding: var(--r4); display: flex; flex-direction: column; gap: var(--r2); flex: 1; }
.plato__nombre { font-family: var(--titular); font-size: 1rem; letter-spacing: -.015em; }
.plato__desc { font-size: .9rem; color: var(--tinta-suave); margin: 0; }
.plato__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); margin-top: auto; padding-top: var(--r2); }
.plato__precio { font-family: var(--titular); font-size: 1.12rem; font-variant-numeric: tabular-nums; }

.mas {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 99px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--naranja-hondo); color: var(--sobre-marca); border: 0;
  transition: background-color .16s cubic-bezier(.2,.8,.2,1), transform .16s;
}
.mas:hover { background: var(--naranja-prensa); }
.mas:active { transform: scale(.92); }

.tallas { display: flex; flex-wrap: wrap; gap: var(--r1); }
.tallas button {
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  padding: .32rem .55rem; border-radius: var(--radio-chico);
  background: var(--control); border: 1px solid var(--linea-fuerte); color: var(--tinta-suave);
  transition: background-color .16s, color .16s, border-color .16s;
}
.tallas button:hover { border-color: var(--tinta-tenue); color: var(--tinta); }
.tallas button[aria-pressed="true"] { background: var(--verde-hondo); border-color: var(--verde-hondo); color: var(--sobre-marca); }

.vacio { padding: var(--r7) var(--r4); text-align: center; color: var(--tinta-suave); }
.vacio strong { display: block; font-family: var(--titular); font-size: 1.16rem; color: var(--tinta); margin-bottom: var(--r2); }

/* --------------------------------------------------------------------------
   Pedido
   -------------------------------------------------------------------------- */

.pedido-btn { position: relative; margin-left: auto; }
.pedido-btn .cuenta {
  position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px;
  display: grid; place-items: center; padding: 0 5px;
  background: var(--verde-hondo); color: var(--sobre-marca); border: 2px solid var(--papel);
  border-radius: 99px; font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

.panel {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); z-index: 60;
  background: var(--papel); border-left: 1px solid var(--linea);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.16,1,.3,1);
  box-shadow: var(--sombra-alta);
}
.panel[open], .panel.abierto { transform: translateX(0); }
.panel__cab { display: flex; align-items: center; gap: var(--r3); padding: var(--r4); border-bottom: 1px solid var(--linea); }
.panel__cab h2 { font-size: 1.16rem; }
.panel__cerrar { margin-left: auto; background: transparent; border: 0; cursor: pointer; color: var(--tinta-suave); padding: var(--r2); border-radius: var(--radio-chico); }
.panel__cerrar:hover { background: var(--control); color: var(--tinta); }
.panel__lista { flex: 1; overflow-y: auto; padding: var(--r4); margin: 0; list-style: none; }
.panel__pie { border-top: 1px solid var(--linea); padding: var(--r4); background: var(--control); }

.linea { display: grid; grid-template-columns: 1fr auto; gap: var(--r2) var(--r3); padding: var(--r3) 0; border-bottom: 1px solid var(--linea); }
.linea__n { font-weight: 700; font-size: .94rem; }
.linea__d { font-size: .82rem; color: var(--tinta-tenue); }
.linea__p { font-variant-numeric: tabular-nums; font-weight: 700; }
.cant { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); overflow: hidden; }
.cant button {
  width: 30px; height: 30px; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--control); border: 0; color: var(--tinta);
}
.cant button:hover { background: var(--control-hover); }
.cant span { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--r3); }
.total dt { font-family: var(--titular); font-size: 1.06rem; }
.total dd { margin: 0; font-family: var(--titular); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.total__nota { font-size: .82rem; color: var(--tinta-suave); margin: 0 0 var(--r3); }

.velo {
  position: fixed; inset: 0; z-index: 50; background: rgba(26,21,18,.5);
  opacity: 0; pointer-events: none; transition: opacity .26s cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(2px);
}
.velo.abierto { opacity: 1; pointer-events: auto; }

.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: var(--r3) var(--r4) calc(var(--r3) + env(safe-area-inset-bottom));
  background: var(--papel); border-top: 1px solid var(--linea);
  display: none;
}
@media (max-width: 52rem) {
  .barra-movil { display: block; }
  body.con-barra { padding-bottom: 5.5rem; }
}
.barra-movil .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Contenido legal
   -------------------------------------------------------------------------- */

.doc { background: var(--papel); padding-block: var(--r7); }
.doc__caja { width: min(100% - 2rem, 70ch); margin-inline: auto; }
.doc h2 { margin-top: var(--r6); margin-bottom: var(--r3); }
.doc h3 { margin-top: var(--r5); margin-bottom: var(--r2); }
.doc ul, .doc ol { padding-left: 1.2rem; margin: 0 0 var(--r4); }
.doc li { margin-bottom: var(--r2); max-width: 68ch; }
.doc__fecha { color: var(--tinta-tenue); font-size: .9rem; }

/* --------------------------------------------------------------------------
   Pie — el bloque legal va en TODAS las páginas, aunque quede feo
   -------------------------------------------------------------------------- */

.pie { background: var(--tinta); color: var(--pie-texto); padding-block: var(--r4); }
.pie a { color: #fff; }
.pie__rejilla { display: grid; gap: var(--r4) var(--r5); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* En ancho, cinco columnas exactas. Con `auto-fit` a 1440 salian SEIS pistas
   —una vacia— y las otras mas estrechas partian los nombres largos, que es lo
   que estiraba el pie. */
@media (min-width: 62rem) { .pie__rejilla { grid-template-columns: repeat(5, 1fr); } }
.pie__rejilla { border-bottom: 1px solid var(--pie-linea); padding-bottom: var(--r4); }
.pie h2 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pie-rotulo); margin-bottom: var(--r2); font-family: var(--texto); font-weight: 800; }
.pie p, .pie address { font-style: normal; margin: 0 0 var(--r1); font-size: .9rem; line-height: 1.45; }
.pie__legal { margin: var(--r3) 0 0; font-size: .85rem; line-height: 1.5; color: var(--pie-rotulo); }
.pie__legal a { color: var(--pie-texto); }
.pie__legal a { color: var(--pie-texto); }
.pie .pend { background: var(--pie-pend-fondo); border-color: var(--pie-pend-filo); color: var(--pie-pend-tinta); }

/* --------------------------------------------------------------------------
   Héroe: el color se compromete a escala de página, no en acentos sueltos.
   Un campo verde entero es lo que separa esto de una plantilla con botones
   de colores.
   -------------------------------------------------------------------------- */

.hero {
  background: var(--verde-hondo) url('../img/muro-italia-movil.webp') center / cover no-repeat;
  color: #fff;
  padding-block: var(--r8);
  text-align: center;
  /* El campo ocupa la primera pantalla entera por debajo de la cabecera.
     `svh` y no `vh`: en el móvil `vh` cuenta la barra del navegador que luego
     se retrae, y el héroe quedaba cortado por abajo al abrir.
     La cabecera mide --cab-alto + 1px de su borde inferior. */
  min-height: calc(100svh - var(--cab-alto) - 1px);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; isolation: isolate;
}
/* El archivo grande solo donde se nota: a 390 px de ancho, mandar 1600 px es
   pagar 149 KB para enseñar 820. */
@media (min-width: 46rem) {
  .hero { background-image: url('../img/muro-italia.webp'); }
}
/* Velo sobrio sobre el muro. No es para «oscurecer y ya»: sin él, el borde
   del panel se pierde contra la franja blanca del ladrillo. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,32,14,.40), rgba(10,32,14,.62));
}
/* El texto NO va suelto sobre la bandera: sobre la franja blanca del muro el
   blanco desaparece. Va en un panel opaco del verde de marca, que es lo que
   deja el titular legible sin tener que apagar la imagen entera. */
.hero__panel {
  background: rgba(13,77,32,.93);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radio);
  padding: var(--r7) var(--r5);
  max-width: 52rem; margin-inline: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
}
@media (min-width: 46rem) { .hero__panel { padding: var(--r8) var(--r7); } }
.hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem);
  max-width: 16ch; margin-inline: auto; color: #fff;
}
.hero__entrada {
  font-size: 1.16rem; color: var(--sobre-verde); max-width: 44ch;
  margin: var(--r4) auto 0;
}

/* Los dos botones grandes de la portada, en la pauta de la categoría:
   icono, acción en grande, y debajo qué pasa al pulsar. */
.hero__acciones {
  display: grid; gap: var(--r4); margin-top: var(--r7);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .hero__acciones { grid-template-columns: 1fr 1fr; } }

.accion {
  display: flex; align-items: center; gap: var(--r4);
  padding: var(--r5); border-radius: var(--radio);
  text-decoration: none; text-align: left;
  border: 2px solid transparent;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), background-color .16s, border-color .16s;
}
.accion:hover { transform: translateY(-2px); }
.accion svg { flex: 0 0 auto; }
.accion__tit { display: block; font-family: var(--titular); font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
.accion__sub { display: block; font-size: .94rem; margin-top: .2rem; opacity: .85; }

.accion--pedir { background: var(--naranja-accion); color: var(--sobre-accion); }
.accion--pedir:hover { background: #FF9433; }
.accion--wa { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.accion--wa:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* --------------------------------------------------------------------------
   Banda de sección. Es el recurso de la carta impresa de Kalamarata: rótulo
   blanco sobre campo verde. No es un adorno inventado, es su propio sistema.
   -------------------------------------------------------------------------- */

.banda {
  background: var(--verde-hondo); color: #fff;
  padding: var(--r4) 0;
  margin-block: var(--r7) 0;
  scroll-margin-top: var(--desplazamiento, 12rem);
}
.banda__caja { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--r2) var(--r4); }
.banda h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem); }
.banda__horario { font-size: .94rem; color: var(--sobre-verde); font-weight: 600; }
.banda__nota { flex-basis: 100%; font-size: .9rem; color: var(--sobre-verde-2); margin: 0; }

/* El anclaje del servicio tiene que descontar la cabecera pegajosa, igual
   que el de los grupos: lo usan los dos chips del riel y la apertura
   automatica segun la hora. */
.servicio { padding-bottom: var(--r8); scroll-margin-top: var(--desplazamiento, 12rem); }
/* Los dos servicios son dos cartas distintas. La diferencia tiene que verse
   al pasar de una a otra, no adivinarse. */
.servicio--rapidas { background: var(--fondo-hondo); border-top: 3px solid var(--verde-hondo); }

/* Aviso de disponibilidad: va dentro de la banda para que viaje con ella. */
.banda__aviso {
  flex-basis: 100%; margin: var(--r3) 0 0;
  background: rgba(0,0,0,.22); border-radius: var(--radio-chico);
  padding: var(--r2) var(--r3); font-size: .9rem; font-weight: 600; color: #fff;
}
.banda__cerrado {
  flex-basis: 100%; margin: var(--r2) 0 0;
  background: var(--naranja-accion); color: var(--sobre-accion);
  border-radius: var(--radio-chico); padding: var(--r2) var(--r3);
  font-size: .9rem; font-weight: 800;
}

/* El riel son estos dos y nada mas: las dos cartas. Van en verde de marca
   porque son la division real del menu, no un filtro. */
.cats a.cats__serv {
  background: var(--verde-hondo); border-color: var(--verde-hondo);
  color: var(--sobre-marca); font-family: var(--titular); letter-spacing: -.01em;
}
.cats a.cats__serv:hover { background: var(--verde-prensa); border-color: var(--verde-prensa); color: var(--sobre-marca); }
/* El observador solo mira los .grupo, así que un chip de servicio nunca es
   aria-current. Esta regla existe por si algún día lo es: que siga leyéndose
   como servicio, con el anillo de tinta encima para decir «estás aquí». */
.cats a.cats__serv[aria-current="true"] {
  background: var(--verde-hondo); border-color: var(--tinta);
  box-shadow: 0 0 0 2px var(--tinta);
}

/* Dentro de un servicio los títulos de categoría son h3, no h2: el h2 es la
   banda del servicio. El tamaño sigue la rampa. */
.grupo__tit h3 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); letter-spacing: -.02em; }

.plato--hoy { border-color: var(--verde-hondo); border-width: 2px; }
.plato--hoy .dato__hoy { align-self: flex-start; }

/* Servicio cerrado ahora mismo: se atenúa lo justo para que se note que no es
   lo que se está sirviendo, sin volverlo ilegible ni impedir el pedido. */
.servicio--cerrado .platos { opacity: .72; }
.servicio--cerrado .plato:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Aviso de «añadido al pedido»
   Antes, añadir un plato solo subía un número en la cabecera: en el móvil ese
   número queda fuera del pulgar y del ojo, así que no se veía que hubiera
   pasado nada. Este aviso lo dice donde se está mirando, sin tapar la carta y
   sin sacar a nadie de la lista: quien quiera seguir comprando, sigue.
   -------------------------------------------------------------------------- */

.aviso {
  position: fixed; z-index: 46;
  left: 50%; transform: translateX(-50%) translateY(1rem);
  bottom: calc(var(--r5) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--r3);
  max-width: min(30rem, calc(100vw - 2rem));
  padding: var(--r3) var(--r3) var(--r3) var(--r4);
  background: var(--tinta); color: #fff;
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
/* Por encima de la barra del móvil, que vive abajo del todo. */
@media (max-width: 52rem) {
  .aviso { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
.aviso.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* `display: flex` de arriba le gana al `[hidden] { display: none }` del
   navegador, así que sin esta línea el atributo `hidden` no oculta nada: el
   aviso seguía en el árbol, anunciable por un lector de pantalla, desde que
   cargaba la página y sin que nadie hubiera añadido nada. */
.aviso[hidden] { display: none; }

.aviso__ok {
  flex: 0 0 auto; color: #7BD88F;
  /* El trazo se dibuja solo al aparecer: confirma sin necesitar leer. */
  stroke-dasharray: 26; stroke-dashoffset: 26;
}
.aviso.visible .aviso__ok { animation: aviso-check .32s .06s ease forwards; }
@keyframes aviso-check { to { stroke-dashoffset: 0; } }

.aviso__txt {
  flex: 1 1 auto; font-size: .94rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aviso__ver {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: var(--naranja-accion); color: var(--sobre-accion);
  font-family: var(--texto); font-weight: 800; font-size: .88rem;
  padding: .45rem .85rem; border-radius: 999px;
}
.aviso__ver:hover { background: #FF9433; }

/* El botón que acabas de pulsar confirma en el sitio, para que el ojo no
   tenga que viajar hasta el aviso. */
.mas.hecho { animation: mas-late .34s cubic-bezier(.2,.8,.2,1); }
@keyframes mas-late {
  40% { transform: scale(1.22); }
  to  { transform: scale(1); }
}

/* La cuenta del pedido late al cambiar, que es lo que el usuario echaba en
   falta cuando solo «salía un número más». */
.cuenta.late { animation: cuenta-late .42s cubic-bezier(.2,.8,.2,1); }
@keyframes cuenta-late {
  30% { transform: scale(1.45); }
  to  { transform: scale(1); }
}

/* Quien pide menos movimiento recibe el aviso igual, pero sin brincos. */
@media (prefers-reduced-motion: reduce) {
  .aviso { transition: opacity .18s ease; transform: translateX(-50%); }
  .aviso.visible { transform: translateX(-50%); }
  .aviso.visible .aviso__ok { animation: none; stroke-dashoffset: 0; }
  .mas.hecho, .cuenta.late { animation: none; }
}

/* --------------------------------------------------------------------------
   Mapa de «Dónde estamos»
   -------------------------------------------------------------------------- */

.mapa {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--linea); background: var(--fondo-hondo);
}
/* Más alto en el teléfono: a 16/9 sobre 390 px el mapa queda en una tira de
   220 px, donde no se distingue una manzana de la siguiente. */
@media (max-width: 52rem) { .mapa { aspect-ratio: 4 / 5; } }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapa__pie { margin-top: var(--r3); font-size: .88rem; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   Quitar una línea entera del pedido, y especiales de otro día
   -------------------------------------------------------------------------- */

/* El botón de quitar va FUERA de `.cant`: esa caja tiene borde propio y
   `overflow: hidden`, así que dentro se leería como un tercer paso del
   selector de cantidad en vez de como otra acción. */
.linea__mandos { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }

.linea__borrar {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer; padding: .25rem .1rem;
  font: inherit; font-size: .82rem; color: var(--tinta-suave);
  text-decoration: underline; text-underline-offset: 3px;
}
.linea__borrar:hover { color: var(--alerta); }
.linea__borrar svg { flex: 0 0 auto; }

/* Un especial guardado de otro día: se marca, no se borra solo. */
.linea--caduca .linea__n { color: var(--tinta-suave); }
.linea__aviso {
  font-size: .8rem; font-weight: 700; color: var(--alerta);
  margin-top: .15rem;
}

/* En la carta, el especial que hoy no se sirve. No se esconde —sirve para
   saber qué toca mañana— pero se ve que no está disponible y no se puede
   añadir. */
.plato--otro-dia .plato__lienzo img { filter: saturate(.55); opacity: .75; }
.dato__otro-dia {
  display: inline-block; align-self: flex-start; margin-bottom: var(--r2);
  background: var(--control); color: var(--tinta-suave);
  border: 1px solid var(--linea-fuerte);
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: var(--radio-chico);
}
.plato--otro-dia .plato__nombre { color: var(--tinta-suave); }
.plato--otro-dia .mas[disabled] {
  background: var(--control); color: var(--tinta-tenue);
  border: 1px solid var(--linea-fuerte);
  cursor: not-allowed;
}
.plato--otro-dia .mas[disabled]:hover { background: var(--control); }

/* Fondo lleno y sin filete lateral, como el resto de los avisos del sitio
   (.horario__aviso, .banda__aviso, .banda__cerrado). El filete de acento en un
   solo lado no se usa en ninguna otra parte de esta hoja. */
.grupo__aviso {
  margin: var(--r3) 0 0;
  padding: var(--r3) var(--r4);
  background: var(--alerta-fondo); color: var(--alerta);
  border-radius: var(--radio-chico);
  font-size: .9rem; font-weight: 700;
}