/* ==========================================================================
   Menús de clientes – una sola plantilla para todos.
   Colores, fuentes y tamaños de cada cliente llegan como variables desde su
   archivo data/menus/<menú>.json (sección "tema"). Primero celular: en
   pantallas grandes el menú queda en una columna centrada.
   ========================================================================== */

:root {
  --m-fondo: #fff;
  --m-texto: #111;
  --m-categoria: var(--m-texto);
  --m-platillo: var(--m-texto);
  --m-subtitulos: var(--m-categoria);
  --m-fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --m-fuente-categoria: var(--m-fuente-texto);
  --m-fuente-platillo: var(--m-fuente-texto);
  --m-peso-categoria: 900;
  --m-peso-platillo: 700;
  --m-peso-texto: 500;
  --m-tam-categoria: 26px;
  --m-tam-platillo: 20px;
  --m-tam-texto: 15px;
  --m-tam-nota: 10px;
  --m-mayus-categoria: none;
  --m-mayus-platillo: none;
  --m-ancho: 40rem;
  --m-alinear: left;
  --m-fuente-nota: var(--m-fuente-texto);
  --m-margen: 1.5rem;
}

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

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

body {
  margin: 0;
  font-family: var(--m-fuente-texto);
  font-size: var(--m-tam-texto);
  font-weight: var(--m-peso-texto);
  line-height: var(--m-interlineado, 1.2);
  color: var(--m-texto);
  background: var(--m-fondo);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Portada: foto de fondo con el logo encima --------------------------- */
.m-portada {
  position: relative;
  height: var(--m-alto-portada, 90vh);
  min-height: 20rem;
  overflow: hidden;
}

.m-portada .m-portada__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logo sobre la foto: 75% del ancho, a 12.5% del borde y 7% de la altura
   de la pantalla desde arriba (como el original); cambia con portada.logo_* */
.m-portada__logo {
  position: relative;
  width: var(--m-logo-ancho, 75%);
  margin-left: var(--m-logo-izquierda, 12.5%);
  padding-top: var(--m-logo-arriba, 7vh);
}

/* --- Columna del menú ---------------------------------------------------- */
.m-contenido {
  text-align: var(--m-alinear);
  margin-inline: auto;
}

.m-imagen { margin: 0; }
.m-imagen img { width: 100%; }

.m-imagen { position: relative; }
.m-imagen > img { position: relative; }

/* Imágenes angostas (logos): centradas, al ancho que tenían en el original */
.m-imagen--angosta { padding-block: var(--m-relleno, 1rem); }
.m-imagen--angosta > img,
.m-imagen--angosta > a > img { width: var(--m-ancho-imagen); margin-inline: auto; }
.m-imagen > a { display: block; }
@media (min-width: 981px) {
  .m-imagen--angosta > img,
  .m-imagen--angosta > a > img { width: var(--m-ancho-imagen-esc, var(--m-ancho-imagen)); }
}

/* Tamaños de pantalla, igual que el sitio anterior (Divi):
   celular ≤767px, tableta 768–980px, computadora ≥981px */
@media (max-width: 767px) { .m-oculto-celular { display: none !important; } }
@media (min-width: 768px) and (max-width: 980px) { .m-oculto-tableta { display: none !important; } }
@media (min-width: 981px) { .m-oculto-escritorio { display: none !important; } }

/* Filas y columnas. En celular y tableta las columnas se apilan en orden;
   en computadora van lado a lado con los anchos del original. */
.m-fila {
  --m-margen: var(--m-margen-cel, 1.5rem);
  position: relative;
  padding-block: var(--m-relleno-fila-cel, var(--m-relleno-fila, 0));
  width: var(--m-fila-ancho-cel, 100%);
  margin-inline: auto;
  background: var(--m-fila-fondo, transparent);
}

.m-columna { position: relative; min-width: 0; }
@media (max-width: 980px) {
  .m-fila--columnas > .m-columna + .m-columna { margin-top: var(--m-fila-sep-cel, 0); }
}

@media (min-width: 981px) {
  .m-fila {
    --m-margen: var(--m-margen-esc, var(--m-margen-cel, 1.5rem));
    padding-block: var(--m-relleno-fila, 0);
    width: var(--m-fila-ancho-esc, 100%);
  }
  .m-fila--columnas {
    display: grid;
    grid-template-columns: var(--m-fila-columnas);
    column-gap: var(--m-fila-sep, 0);
    align-items: start;
  }
  .m-fila--centrada { align-items: center; }
}

/* Sección (categoría) */
/* Espacios iguales a los del sitio anterior (Divi): cada bloque de texto
   deja 5% de la altura de la pantalla arriba y abajo; los títulos dejan
   10px debajo y los párrafos 15px. */
.m-seccion {
  padding-block: var(--m-relleno, 5vh);
  padding-inline: var(--m-margen);
}

/* Dos secciones seguidas (sin foto en medio) van tan juntas como en el
   original, donde compartían un mismo bloque de texto: 44px entre el último
   platillo y el siguiente título. */
/* (no aplica a las secciones con "relleno" propio en los datos) */
.m-seccion:not(.m-seccion--relleno):has(+ .m-seccion) { padding-bottom: 0; }
.m-seccion + .m-seccion:not(.m-seccion--relleno) { padding-top: 50px; }

/* En celular las columnas quedan una debajo de otra. Si el original junta la
   primera sección de una columna con la última de la anterior, el menú la
   marca con "junta_en_celular". */
@media (max-width: 980px) {
  .m-columna:has(+ .m-columna > .m-seccion--junta-cel:first-child) > .m-seccion:last-child { padding-bottom: 0; }
  .m-columna > .m-seccion--junta-cel:first-child { padding-top: 50px; }
}

.m-seccion__titulo {
  padding-bottom: 10px;
  font-family: var(--m-fuente-categoria);
  font-size: var(--m-tam-categoria);
  font-weight: var(--m-peso-categoria);
  line-height: 1;
  color: var(--m-categoria);
  text-transform: var(--m-mayus-categoria);
}

/* Los platillos van juntos; {"espacio": true} en los datos los separa */
.m-platillo { margin-top: var(--m-separacion, 0); }
.m-platillo__nombre { padding-bottom: 10px; }
.m-platillo > p:last-child { padding-bottom: 1em; }  /* como Divi: 1em bajo cada párrafo */
/* …salvo al final de la sección: ahí el original no deja ese espacio */
.m-bloque__contenido > .m-platillo:last-child > p:last-child { padding-bottom: 0; }
/* Un párrafo suelto de la sección («texto») deja el mismo espacio */
.m-bloque__contenido > .m-platillo__desc:not(:last-child) { padding-bottom: 1em; }

/* Con tema.categoria_fondo, la categoría se muestra como «pastilla» */
.m-seccion__titulo {
  display: inline-block;
  /* el ancho de la pastilla es una proporción de la columna completa, como en Divi */
  width: var(--m-pastilla-ancho-real, auto);
  margin-bottom: var(--m-pastilla-abajo, 0);
  padding: var(--m-categoria-relleno, 0 0 10px);
  border-radius: 999px;
  background: var(--m-categoria-fondo, transparent);
  font-weight: var(--m-pastilla-peso, var(--m-peso-categoria));
  line-height: var(--m-pastilla-alto, var(--m-titulo-interlineado, 1));
  letter-spacing: var(--m-pastilla-espaciado, var(--m-titulo-espaciado, normal));
  text-shadow: var(--m-titulo-sombra, none);
}
.m-espacio { height: 10px; }
.m-espacio--parrafo { height: calc(var(--m-renglon, 1.2em) + 15px); }

.m-platillo__nombre,
.m-subtitulo {
  font-family: var(--m-fuente-platillo);
  font-size: var(--m-tam-platillo);
  font-weight: var(--m-peso-platillo);
  line-height: var(--m-nombre-interlineado, 1);
  color: var(--m-platillo);
  text-transform: var(--m-mayus-platillo);
}

.m-subtitulo {
  margin-top: var(--m-subtitulo-arriba, 1.6rem);
  padding-bottom: var(--m-subtitulo-abajo, 0);
  font-size: var(--m-subtitulo-tamano, var(--m-tam-platillo));
  font-weight: var(--m-subtitulo-peso, var(--m-peso-platillo));
  color: var(--m-subtitulos);
}

.m-platillo__desc,
.m-opcion {
  margin-top: 0;
}

.m-opcion { font-weight: 700; }

.m-precio--aparte {
  margin-top: 0.3rem;
  font-weight: var(--m-peso-platillo);
}

.m-etiquetas { margin-top: 0; }

/* Listas con viñetas, con las medidas de las listas del original (Divi) */
.m-incluye {
  margin: 0;
  padding: 0 0 15px 15px;
  line-height: 26px;
}

.m-enlace { padding: 1rem var(--m-margen); font-weight: 700; }

.m-etiqueta {
  margin-right: 0.6em;
  font-weight: 800;
}

.m-nota {
  margin-top: 0;
  padding-bottom: var(--m-nota-abajo, 10px);
  line-height: var(--m-nota-interlineado);
  font-family: var(--m-fuente-nota);
  font-size: var(--m-tam-nota);
}

/* Secciones y textos con fondo de color o foto propios */
.m-seccion,
.m-texto { position: relative; color: var(--m-texto); }
.m-seccion { font-size: var(--m-tam-texto); }
/* como Divi: las negritas siempre a 700 (con texto de peso 300, «bolder» daría 400) */
.menu-cliente strong { font-weight: 700; }
/* como Divi: una palabra más ancha que la columna se corta */
.m-seccion,
.m-texto { overflow-wrap: break-word; }

.m-con-color { background: var(--m-fondo-bloque, transparent); }

.m-foto-fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.m-foto-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-bloque__contenido { position: relative; }

.m-seccion__precio {
  margin-top: 0.2rem;
  font-family: var(--m-fuente-platillo);
  font-size: var(--m-tam-platillo);
  font-weight: var(--m-peso-platillo);
  color: var(--m-platillo);
}

.m-opcion__desc { font-size: 0.9em; opacity: 0.9; }

/* Bloques del final */
.m-texto {
  font-size: var(--m-tam-texto);
  padding-block: var(--m-relleno, 1.5rem);
  padding-inline: var(--m-margen);
}

.m-texto p + p { margin-top: 0.9em; }
.m-texto a { color: inherit; text-decoration: none; }

.m-aviso {
  margin: 2rem var(--m-margen);
  padding-block: 1rem;
  border-block: 1px solid var(--m-categoria);
  font-size: var(--m-tam-nota);
  text-align: center;
}

.m-sucursales {
  display: grid;
  gap: 1.75rem;
  padding-block: var(--m-relleno, 1rem);
  padding-inline: var(--m-margen);
}

.m-sucursal__nombre {
  margin-bottom: 0.6rem;
  font-family: var(--m-fuente-platillo);
  font-size: var(--m-tam-platillo);
  font-weight: var(--m-peso-platillo);
}

.m-sucursal .m-nota + .m-sucursal__dato { margin-top: 0.2rem; }

.m-sucursal__dato {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--m-fuente-platillo);
  font-size: var(--m-tam-platillo);
  font-weight: var(--m-peso-platillo);
  text-decoration: none;
}

a.m-sucursal__dato { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.m-sucursales--sin-subrayado a.m-sucursal__dato { text-decoration: none; }

/* "grupo": sección con fondo propio y un recuadro alrededor de sus filas.
   --m-modulo es el espacio de Divi bajo cada módulo de una columna de 1/4
   (los datos lo usan como "relleno": "0 var(--m-modulo)"). */
.m-grupo {
  --m-modulo: var(--m-modulo-esc, 25px);
  padding: var(--m-grupo-relleno-esc, 0);
  background: var(--m-grupo-mascara, none) 0 0 / 100% 100% no-repeat,
    var(--m-grupo-color, #fff) var(--m-grupo-fondo-esc, none) center / cover no-repeat;
}
.m-grupo__caja {
  padding: var(--m-grupo-interior-esc, 0);
  border: var(--m-grupo-borde-esc, 0) solid var(--m-grupo-color-borde, currentColor);
}
@media (max-width: 980px) { .m-grupo { --m-modulo: var(--m-modulo-cel, 30px); } }
@media (max-width: 767px) {
  .m-grupo {
    padding: var(--m-grupo-relleno-cel, var(--m-grupo-relleno-esc, 0));
    background: var(--m-grupo-mascara, none) 0 0 / 100% 100% no-repeat,
      var(--m-grupo-color, #fff) var(--m-grupo-fondo-cel, var(--m-grupo-fondo-esc, none)) center top / contain repeat-y;
  }
  .m-grupo__caja {
    padding: var(--m-grupo-interior-cel, var(--m-grupo-interior-esc, 0));
    border-width: var(--m-grupo-borde-cel, var(--m-grupo-borde-esc, 0));
  }
}

/* Texto en caja de color con ancho propio ("caja") */
.m-texto--caja {
  width: var(--m-caja-ancho, auto);
  margin-inline: auto;
  padding-inline: 0;
  border-radius: var(--m-caja-radio, 0);
}
@media (max-width: 767px) { .m-texto--caja { width: var(--m-caja-ancho-celular, var(--m-caja-ancho, auto)); } }

/* Texto en recuadro (un aviso en letra chica) */
.m-texto--recuadro { border: 2px solid currentColor; padding-inline: 1vh; }

/* Título sobre una franja de color («TRANSFERENCIA») y línea corta */
.m-franja {
  margin: 3vh var(--m-margen) 0;
  padding: 1vh 0 10px;
  background: var(--m-categoria);
  color: #fff;
  font-family: var(--m-fuente-platillo);
  font-size: var(--m-tam-platillo);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-align: center;
}

.m-franja a { color: inherit; text-decoration: none; }
.m-franja--barra {
  margin: 0;
  padding: 0;
  font-family: var(--m-fuente-texto);
  font-size: var(--m-tam-texto);
  font-weight: var(--m-peso-texto);
  line-height: 30px;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.m-franja--barra a { display: block; }
.m-sucursal__dato a { color: inherit; text-decoration: none; }

.m-linea {
  width: 25%;
  margin: 3vh auto 2vh;
  border: 0;
  border-top: 2px solid var(--m-categoria);
}

/* "alinear": "centro" en un bloque */
.m-centrado { text-align: center; }
.m-centrado .m-redes,
.m-centrado .m-botones { justify-content: center; }

.m-botones {
  display: flex;
  flex-wrap: wrap;
  color: var(--m-texto);
  gap: 0.75rem;
  padding-block: var(--m-relleno, 1rem);
  padding-inline: var(--m-margen);
}

.m-boton {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6em 1.4em;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.m-botones { font-size: var(--m-tam-texto); }
@media (max-width: 767px) { .m-botones { font-size: var(--m-tam-texto-cel, var(--m-tam-texto)); } }
.m-botones--apilados { flex-direction: column; align-items: center; }
.m-botones--apilados-cel { gap: 0.5em 34px; }
@media (max-width: 767px) { .m-botones--apilados-cel { flex-direction: column; align-items: center; } }

/* Flecha para regresar al inicio del menú */
.m-arriba { padding-block: 30px; text-align: center; }
.m-arriba a { display: inline-grid; color: var(--m-categoria); }
.m-arriba svg { width: 30px; height: 30px; }

/* Botón grande sin borde (un teléfono al pie del menú) */
.m-botones--grande .m-boton {
  gap: 0.35em;
  min-height: 0;
  padding: 0.3em 0;
  border: 0;
  font-family: var(--m-fuente-platillo);
  font-size: 30px;
  color: var(--m-platillo);
}
.m-boton svg { width: 0.95em; height: 0.95em; fill: currentColor; }
.m-botones--simple .m-boton { gap: 0.4em; min-height: 0; padding: 0.3em 0; border: 0; font-weight: inherit; }
.m-botones--negritas .m-boton { font-weight: 700; }

.m-redes {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding-block: var(--m-relleno, 0.5rem);
  padding-inline: calc(var(--m-margen) - 0.6rem);
  list-style: none;
}

.m-redes a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
}

.m-redes svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* "estilo": "circulo": íconos en círculos de color (como Divi) */
.m-redes--circulo { gap: var(--m-red-separacion, 8px); }
.m-redes--circulo li { margin-bottom: 8px; }
.m-redes--circulo a {
  width: var(--m-red-tamano, 40px);
  height: var(--m-red-tamano, 40px);
  border-radius: 50%;
  background: var(--m-circulo, currentColor);
  color: var(--m-icono, #fff);
}
.m-redes--circulo svg { width: var(--m-red-icono-tamano, 20px); height: var(--m-red-icono-tamano, 20px); }
.m-redes--grande a { width: 50px; height: 50px; color: var(--m-icono, currentColor); }
.m-redes--grande svg { width: 25px; height: 25px; }
@media (max-width: 767px) {
  .m-redes--circulo a { width: var(--m-red-tamano, 50px); height: var(--m-red-tamano, 50px); }
  .m-redes--circulo svg { width: var(--m-red-icono-tamano, 25px); height: var(--m-red-icono-tamano, 25px); }
  /* tamaños propios en celular ("tamanos_celular") */
  .m-seccion { font-size: var(--m-tam-texto-cel, var(--m-tam-texto)); }
  .m-seccion__titulo { font-size: var(--m-tam-categoria-cel, var(--m-tam-categoria)); }
  .m-platillo__nombre { font-size: var(--m-tam-platillo-cel, var(--m-tam-platillo)); }
  .m-texto { font-size: var(--m-tam-texto-cel, var(--m-tam-texto)); }
}

/* Carrusel de fotos: se desliza con el dedo, sin JavaScript */
/* Carrusel "pase": una foto a la vez, del ancho de la columna; menus.js
   lo hace avanzar (sin JavaScript se ve la primera foto) */
.m-pase {
  overflow: hidden;
  padding-block: var(--m-relleno, 0);
}
.m-pase__lista {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-pase--movimiento .m-pase__lista { transition: transform 2s ease; }
.m-pase__lista li { flex: 0 0 100%; }
.m-pase__lista img { display: block; width: 100%; }

/* Carrusel "cinta": logos en movimiento continuo (12 a la vista en
   computadora, 5 en tableta y 3 en celular, con 30px entre ellos) */
.m-cinta {
  --m-cinta-n: 12;
  overflow: hidden;
  padding-block: var(--m-relleno, 0);
}
@media (max-width: 980px) { .m-cinta { --m-cinta-n: 5; } }
@media (max-width: 767px) { .m-cinta { --m-cinta-n: 3; } }
.m-cinta__pista { display: flex; width: max-content; }
.m-cinta__lista {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0 30px 0 0;
  list-style: none;
}
.m-cinta__lista li { flex: 0 0 calc((100vw - (var(--m-cinta-n) - 1) * 30px) / var(--m-cinta-n)); }
.m-cinta__lista img { display: block; width: 100%; }
.m-cinta--movimiento .m-cinta__pista { animation: m-cinta 30s linear infinite; }
@keyframes m-cinta { to { transform: translateX(-50%); } }

.m-platillo__foto { margin-bottom: 0.6rem; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }