/* ===========================================================================
   LA CARTA EN COLECCIÓN — buscador, filtros y fichas juntas (2026-10-06)
   Hoja COMPARTIDA: /menu (claro, layout limpio) y /carta (la noche del sitio,
   .mm--web). Todas las fichas miden igual: la foto o, sin foto, un platillo
   gris en el mismo cuadro. Pesos ≤600; un solo acento.
   =========================================================================== */
:root{ --cc-dur:200ms; --cc-curva:cubic-bezier(.2,.8,.2,1) }

.cc{ max-width:1240px; margin:0 auto; padding:0 16px }
.cc__oculto{ position:absolute; width:0; height:0; overflow:hidden }

/* ── barra: buscador + filtros (se queda arriba al bajar) ── */
.cc__barra{ position:sticky; top:var(--cc-arriba,0px); z-index:5; padding:16px 0 12px;
  background:var(--sb-niebla) }
.cc__buscar{ position:relative; max-width:560px; margin:0 auto 12px }
.cc__lupa{ position:absolute; left:18px; top:50%; width:20px; height:20px; transform:translateY(-50%);
  color:var(--sb-gris); pointer-events:none }
.cc__buscar input{ width:100%; height:50px; padding:0 18px 0 48px; border-radius:999px;
  border:1px solid var(--hsv-borde); background:#fff; color:var(--hsv-tinta);
  font:inherit; font-size:15.5px; outline:0; box-shadow:0 10px 30px -18px rgba(17,18,20,.25);
  transition:border-color var(--cc-dur) var(--cc-curva) }
.cc__buscar input::placeholder{ color:var(--sb-gris) }
.cc__buscar input:focus{ outline:0; background:#fff; box-shadow:0 10px 30px -18px rgba(17,18,20,.25);
  border-color:var(--hsv-acento) }
.cc__buscar input::-webkit-search-cancel-button{ cursor:pointer }

.cc__filtros{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px;
  scrollbar-width:none; scroll-snap-type:x proximity; overscroll-behavior-x:contain }
.cc__filtros::-webkit-scrollbar{ display:none }
.cc__filtros a{ flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 8px 0 15px; border-radius:999px; border:1px solid var(--hsv-borde);
  background:#fff; color:var(--hsv-tinta); text-decoration:none; font-size:14px; font-weight:500;
  white-space:nowrap; transition:background var(--cc-dur) var(--cc-curva),border-color var(--cc-dur) var(--cc-curva),color var(--cc-dur) var(--cc-curva) }
.cc__filtros a i{ font-style:normal; font-size:12px; font-weight:500; min-width:24px; text-align:center;
  padding:2px 7px; border-radius:999px; background:var(--hsv-superficie-alt); color:var(--sb-gris);
  font-variant-numeric:tabular-nums }
.cc__filtros a:hover{ border-color:var(--hsv-acento) }
.cc__filtros a.on{ background:var(--hsv-acento); border-color:var(--hsv-acento); color:#fff }
.cc__filtros a.on i{ background:color-mix(in srgb,#fff 22%,transparent); color:#fff }
.cc__filtros a:focus-visible,.cc__cuadro:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }

/* ── las fichas, juntas ── */
.cc__fichas{ display:grid; gap:18px 14px; padding:6px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
.cc__ficha,.mm--web .cc__ficha{ min-width:0; background:none; border:0; padding:0 }   /* sin restos del escenario (sitio.css) */
.cc__ficha[hidden]{ display:none }
.cc__cuadro{ display:block; color:inherit; text-decoration:none }
.cc__foto{ position:relative; display:grid; place-items:center; aspect-ratio:1/1; overflow:hidden;
  border-radius:16px; background:var(--hsv-superficie-alt);
  box-shadow:0 10px 24px -14px rgba(17,18,20,.22);
  transition:box-shadow var(--cc-dur) var(--cc-curva) }
.cc__foto img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--cc-dur) var(--cc-curva) }
a.cc__cuadro:hover .cc__foto{ box-shadow:0 16px 32px -14px rgba(17,18,20,.3) }
a.cc__cuadro:hover .cc__foto img{ transform:scale(1.03) }
.cc__platillo{ width:46%; height:46%; fill:currentColor;
  color:color-mix(in srgb,var(--sb-gris) 38%,transparent) }
.cc__hoy{ position:absolute; left:8px; top:8px; padding:3px 9px; border-radius:999px; font-style:normal;
  font-size:11.5px; font-weight:600; background:#fff; color:var(--hsv-acento) }
.esc__uno--sin .cc__foto img{ filter:grayscale(.7); opacity:.7 }

.cc__nombre{ margin:9px 2px 0; font-size:14.5px; font-weight:600; line-height:1.3; color:var(--hsv-tinta);
  overflow-wrap:anywhere }
.cc .esc__precio{ margin:3px 2px 0; font-size:14px; font-weight:600; color:var(--hsv-acento);
  font-variant-numeric:tabular-nums }
.cc .esc__precios{ list-style:none; margin:4px 2px 0; padding:0; display:grid; gap:2px; font-size:13px }
.cc .esc__precios li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px }
.cc .esc__pres{ color:var(--sb-gris); min-width:0 }
.cc .esc__precios b{ margin-left:auto; font-weight:600; color:var(--hsv-acento); font-variant-numeric:tabular-nums }
.cc .esc__pres--sin .esc__pres,.cc .esc__pres--sin b{ opacity:.55 }
.cc .ca-marca{ flex-basis:100%; font-style:normal; font-size:11.5px; color:var(--hsv-acento) }

.cc__nada{ margin:28px auto 8px; max-width:46ch; text-align:center; color:var(--sb-gris); font-size:15px }

@media (max-width:420px){
  .cc{ padding:0 12px }
  .cc__fichas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px }
  .cc__nombre{ font-size:14px }
}
@media (min-width:900px){
  .cc__filtros{ flex-wrap:wrap; justify-content:center; overflow:visible }
  .cc__fichas{ grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:22px 18px }
  .cc__nombre{ font-size:15px }
}
@media (min-width:1700px){
  .cc{ max-width:1480px }
  .cc__fichas{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) }
}

/* ── /carta: sobre la noche del sitio (su barra fija va encima) ── */
.mm--web .cc{ --cc-arriba:var(--sb-barra-alto,0px) }
.mm--web .cc__barra{ background:var(--sb-noche) }
.mm--web .cc__buscar input{ background:color-mix(in srgb,var(--sb-texto-noche) 7%,var(--sb-noche));
  border-color:var(--sb-linea-noche); color:var(--sb-texto-noche); box-shadow:none }
.mm--web .cc__buscar input:focus{ background:color-mix(in srgb,var(--sb-texto-noche) 7%,var(--sb-noche));
  border-color:var(--sb-turquesa); box-shadow:none }
.mm--web .cc__buscar input::placeholder,.mm--web .cc__lupa{ color:var(--sb-gris-noche) }
.mm--web .cc__filtros a{ background:color-mix(in srgb,var(--sb-texto-noche) 6%,transparent);
  border-color:var(--sb-linea-noche); color:var(--sb-texto-noche) }
.mm--web .cc__filtros a i{ background:color-mix(in srgb,var(--sb-texto-noche) 10%,transparent); color:var(--sb-gris-noche) }
.mm--web .cc__filtros a:hover{ border-color:var(--sb-turquesa) }
.mm--web .cc__filtros a.on{ background:var(--sb-turquesa); border-color:var(--sb-turquesa); color:var(--sb-noche) }
.mm--web .cc__filtros a.on i{ background:color-mix(in srgb,var(--sb-noche) 16%,transparent); color:var(--sb-noche) }
.mm--web .cc__filtros a:focus-visible,.mm--web .cc__cuadro:focus-visible{ outline-color:var(--sb-turquesa) }
.mm--web .cc__foto{ background:color-mix(in srgb,var(--sb-texto-noche) 6%,transparent); box-shadow:none }
.mm--web .cc__platillo{ color:color-mix(in srgb,var(--sb-texto-noche) 26%,transparent) }
.mm--web .cc__nombre{ color:var(--sb-texto-noche) }
.mm--web .cc__nada{ color:var(--sb-gris-noche) }

@media (prefers-reduced-motion:reduce){
  .cc__buscar input,.cc__filtros a,.cc__foto,.cc__foto img{ transition:none }
  a.cc__cuadro:hover .cc__foto img{ transform:none }
}