/* =============================================================================
   12 · LA CARTA, EN CLARO — tarjetas de producto de verdad
   -----------------------------------------------------------------------------
   La carta era una losa teal oscura con las fotos flotando sin caja. Andrés:
   «la parte de las fichas no me gusta nada y el tono de verde tampoco, busca
   fichas decentes en 21st.dev». La referencia elegida allí (Menu Item Card,
   el patrón Swiggy/Zomato) dice: fondo CLARO, tarjeta blanca con canto fino,
   foto a sangre arriba, el precio protagonista y los metadatos en voz baja.

   Esta capa carga DESPUÉS de cfg-01 (la de la losa oscura) y gana por orden
   con los mismos selectores: la base no se toca, como el resto de capas.
   El teal queda para acentos —filtro activo, precio no— y deja de ser fondo.
   ========================================================================== */

/* --- la losa oscura, fuera ----------------------------------------------- */
.catalogo {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--texto);
  padding-inline: 0;
  --cfg-anillo: var(--teal);
}
.catalogo::before { content: none; }

.catalogo h2 { color: var(--titulo); }
.catalogo h2::before { color: var(--verde-osc); }
.catalogo__ayuda { color: var(--texto); }

/* --- filtros: píldoras claras, activo en teal ----------------------------- */
.catalogo .filtros button {
  border: 1px solid var(--linea);
  background: #fff;
  color: var(--texto);
}
.catalogo .filtros button:hover { border-color: var(--teal); color: var(--teal); }
.catalogo .filtros button[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-weight: 700;
}

/* --- la tarjeta ----------------------------------------------------------- */
.catalogo .plato {
  background: #fff;
  border: 1px solid #ece5d9;
  border-radius: 14px;
  overflow: hidden;                 /* la foto sangra hasta el canto */
  box-shadow: 0 1px 2px rgb(22 25 21 / .04), 0 12px 26px -20px rgb(22 25 21 / .28);
  transition: transform .18s var(--curva, ease), box-shadow .18s var(--curva, ease);
}
.catalogo .plato:hover,
.catalogo .plato:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgb(22 25 21 / .05), 0 20px 36px -20px rgb(22 25 21 / .35);
}
/* la viñeta interior era para fundir la foto con la losa oscura: ya no hay losa */
.catalogo .plato::before { content: none; }

.catalogo .plato__foto,
.catalogo .plato__sinfoto {
  border-radius: 0;
  filter: none;
  box-shadow: none;
}

.catalogo .plato__cuerpo { padding: 12px 14px 14px; gap: 5px; }
.catalogo .plato__nombre { color: var(--titulo); }
.catalogo .plato__desc { color: var(--texto); }

/* el precio manda, como en la referencia: tinta casi negra, grande */
.catalogo .plato__precio { color: var(--titulo); }
.catalogo .plato__precio .cfg-eur { color: var(--texto); }

.catalogo .etiqueta { background: #eef2f0; color: var(--teal); }
.catalogo .etiqueta--vacia { background: #f4f0e9; color: var(--texto); }

.catalogo .plato__alerg { color: var(--texto); }
.catalogo .plato__alerg--limpio { color: var(--texto); opacity: .8; }
.catalogo .plato__alerg--duda { color: var(--amarillo); }

/* el hueco rayado de "foto pendiente", en claro */
.catalogo .plato__sinfoto {
  background: repeating-linear-gradient(-45deg, #f4f0e9 0 10px, #ece7dd 10px 20px);
  color: var(--texto);
}