/* Estilos de respaldo del menú de cocina. Si el tema trae los suyos, manda
   el tema: estos usan las mismas variables para no desentonar con ningún
   diseño (misma convención que el blog). */

.menu-contenedor{max-width:1100px;margin:0 auto;padding:0 20px}
.menu-encabezado{padding:32px 0 8px}
.menu-bajada{color:var(--color-texto-suave,#5a6472);max-width:60ch;margin:8px 0 0}

.menu-migas{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;margin:0 0 20px;color:var(--color-texto-suave,#5a6472)}
.menu-migas a{color:inherit;text-decoration:none}
.menu-migas a:hover{text-decoration:underline}
.menu-migas .actual{color:var(--color-texto,#222);font-weight:600}

.menu-categorias-lista{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 30px}
.menu-categorias-lista a{padding:7px 15px;border:1px solid var(--color-borde,#e2e6eb);border-radius:999px;
  font-size:14px;font-weight:600;color:var(--color-texto,#222);text-decoration:none}
.menu-categorias-lista a:hover,.menu-categorias-lista a.activa{border-color:var(--color-principal,#1b3a5c);color:var(--color-principal,#1b3a5c)}

.menu-carta{margin:26px 0;display:flex;flex-direction:column;gap:40px}

.menu-categoria-titulo{margin:0 0 6px;font-size:clamp(22px,3vw,30px);line-height:1.2}
.menu-categoria-desc{margin:0 0 18px;color:var(--color-texto-suave,#5a6472);max-width:60ch}

.menu-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.menu-carta-col1 .menu-rejilla{grid-template-columns:minmax(0,1fr)}
.menu-carta-col2 .menu-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-carta-col3 .menu-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}
.menu-carta-col4 .menu-rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .menu-carta-col3 .menu-rejilla,.menu-carta-col4 .menu-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .menu-rejilla{grid-template-columns:minmax(0,1fr) !important}
}

.menu-platillo{display:flex;flex-direction:column;border:1px solid var(--color-borde,#e2e6eb);
  border-radius:var(--radio,10px);overflow:hidden;background:var(--color-fondo,#fff)}
/* Proporción de la foto del platillo. 16/9 es la de casi toda foto de cámara o
   celular en horizontal, así que se ve completa. Un tema que quiera otra
   (3/2, 4/3, 1/1) solo define --menu-imagen-proporcion; con una foto de otra
   proporción, object-fit:cover la recorta en vez de deformarla. */
.menu-platillo-imagen{display:block;aspect-ratio:var(--menu-imagen-proporcion,16/9);background:var(--color-fondo-suave,#f6f7f9);overflow:hidden}
.menu-platillo-imagen img{width:100%;height:100%;object-fit:cover;display:block}
.menu-platillo-cuerpo{padding:16px 18px;display:flex;flex-direction:column;gap:8px}

.menu-platillo-encabezado{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.menu-platillo-nombre{margin:0;font-size:17px;line-height:1.3}
.menu-platillo-precio{white-space:nowrap;font-weight:700;color:var(--color-principal,#1b3a5c)}
.menu-platillo-desc{margin:0;font-size:14px;color:var(--color-texto-suave,#5a6472)}

.menu-platillo-etiquetas{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.menu-etq{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 9px;
  border-radius:999px;background:var(--color-fondo-suave,#f6f7f9);color:var(--color-texto-suave,#5a6472)}
.menu-etq-destacado{background:var(--color-acento,#e8a33d);color:#fff}
.menu-etq-veg{background:#e6f4ea;color:#2e7d43}
.menu-etq-agotado{background:#fdeaea;color:#a33}
.menu-etq-picante{background:transparent;padding-left:0;font-size:13px}

.menu-agotado{opacity:.55}
.menu-agotado .menu-platillo-imagen img{filter:grayscale(.4)}

.menu-aviso{border:1px dashed #c66;background:#fff6f6;color:#a33;padding:10px 14px;border-radius:8px;font-size:14px}

/* Varios precios por platillo (por carne, por peso, por especialidad):
   lista tipo carta con puntos guía entre el título y el precio. */
.menu-precios{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.menu-precio{display:flex;align-items:baseline;gap:8px;font-size:15px}
.menu-precio-titulo{font-weight:600;display:flex;flex-direction:column;min-width:0}
.menu-precio-detalle{font-weight:400;font-size:12.5px;color:var(--color-texto-suave,#5a6472);line-height:1.35}
.menu-precio-puntos{flex:1;min-width:16px;border-bottom:1px dotted var(--color-borde,#cfd5dc);transform:translateY(-4px)}
.menu-precio-valor{white-space:nowrap;font-weight:700;color:var(--color-principal,#1b3a5c)}
.menu-precio-agotado{opacity:.5}
.menu-precio-agotado .menu-precio-valor{color:#a33;font-weight:600;font-size:13px}