/* ============================================================
   LIQUID GLASS — efecto cristal estilo Apple Vision Pro
   (snippet de la biblioteca de Manu: ~/.claude/templates/liquid-glass)

   ÚNICA fuente del efecto para toda la app. Antes estaba duplicado en
   cartas.css, allergens.css, reviews.css e index.css; ahora vive aquí y
   se carga EL ÚLTIMO en cada HTML, así que gana en la cascada sobre el
   glass plano (background-color glass-bg + backdrop-filter) que esos
   selectores aún declaran como base.

   Estructura:
   ::before = desenfoque del fondo (backdrop-filter) + tinte
   ::after  = brillo especular interno
   > *      = el contenido real, por encima de las capas

   Variables --lg-* definidas en styles.css.
   (Se retiró la distorsión de lente SVG por rendimiento; ver nota en ::before.)
   ============================================================ */

/* --- Superficies de cristal: neutralizan el glass plano y crean contexto --- */
.aside,
.cont-platos,
.platos__familia,
.baner__alergenos,
.allergens__info,
.contenido,
.nomenclaturas,
.reviews__cont-logos,
.index__buttons-btn {
  isolation: isolate;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* position:relative SOLO para las superficies estáticas (contexto de las capas).
   .aside (fixed) y .nomenclaturas (sticky) ya sirven de contexto: NO se tocan. */
.cont-platos,
.platos__familia,
.baner__alergenos,
.allergens__info,
.contenido,
.reviews__cont-logos,
.index__buttons-btn {
  position: relative;
}

/* Recorte a esquinas redondeadas. El .aside NO lleva overflow:hidden para no
   cortar el glow de sus iconos (sus capas van con inset:0, no se salen del box). */
.cont-platos,
.platos__familia,
.baner__alergenos,
.allergens__info,
.contenido,
.nomenclaturas,
.reviews__cont-logos,
.index__buttons-btn {
  overflow: hidden;
}

/* Capa de fondo: desenfoque + tinte.
   NOTA: se retiró la distorsión de lente SVG (filter: url(#lensFilter)) porque
   feGaussianBlur+feDisplacementMap es caro en GPU y, aplicado a muchas
   superficies a la vez, causaba tirones de scroll en móviles de gama media.
   El blur + tinte + brillo especular mantienen el look "cristal" sin el coste. */
.aside::before,
.cont-platos::before,
.platos__familia::before,
.baner__alergenos::before,
.allergens__info::before,
.contenido::before,
.nomenclaturas::before,
.reviews__cont-logos::before,
.index__buttons-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--lg-bg-color);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(120%) brightness(var(--lg-brightness, 1.15));
  backdrop-filter: blur(var(--lg-blur)) saturate(120%) brightness(var(--lg-brightness, 1.15));
}

/* Capa superior: brillo especular interno (bordes de cristal) */
.aside::after,
.cont-platos::after,
.platos__familia::after,
.baner__alergenos::after,
.allergens__info::after,
.contenido::after,
.nomenclaturas::after,
.reviews__cont-logos::after,
.index__buttons-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 1px 1px 0 var(--lg-highlight),
    inset 0 0 0.3125rem var(--lg-highlight);
}

/* El contenido real por encima de las capas de cristal */
.aside > *,
.cont-platos > *,
.platos__familia > *,
.baner__alergenos > *,
.allergens__info > *,
.contenido > *,
.nomenclaturas > *,
.reviews__cont-logos > *,
.index__buttons-btn > * {
  position: relative;
  z-index: 2;
}

/* --- LOGOS (img) SIEMPRE LIMPIOS (regla de flota, jul 2026) ---
   Todos los LOGOS van transparentes: el hero-logo (.hero-img--logo) Y los logos de
   reseñas (.reviews__cont-logos-img). El glass se queda SOLO en la TARJETA
   contenedora (.reviews__cont-logos), no en cada <img> — en tema claro el tinte
   pintaba una caja blanca detrás del logo transparente. */