/* ============================================================
   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,
.lista_alergenos,
.nomenclaturas,
.reviews__cont-logos,
.index__buttons-btn {
  isolation: isolate;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- O CRISTAL, O DEGRADADO: PERO EN TODAS LAS SUPERFICIES IGUAL ---
   Convención de Manu (7 ago 2026), y es OPT-IN: apagada salvo que la app la
   encienda.

   EL PROBLEMA QUE RESUELVE: el degradado de marca solo lo llevaban CUATRO
   superficies —botones del index, títulos de familia, banner de alérgenos y
   aside— mientras las otras SEIS se quedaban en cristal puro. O sea, apps a
   medias, con la marca en unos contenedores y no en otros, y no porque nadie
   lo hubiera decidido: era simplemente dónde estaba escrita la regla.

   CÓMO SE ENCIENDE, en el `styles.css` de la app:
       --degradado-en-cristal: var(--color-degradado2);
   Y para volver al reparto de siempre, se quita esa línea.

   ⚠️ POR QUÉ NO VA ENCENDIDO PARA TODOS. Se midió antes de decidirlo: **36 de
   las 39 apps declaran degradado**, así que encenderlo en la base les cambiaría
   el aspecto a las 36 el día que se sincronicen —y una de las seis superficies
   es `.cont-platos`, el bloque que contiene TODOS los platos de cada familia—.
   Eso contradice la regla hermana de este mismo día: el degradado es decisión
   de diseño del cliente y se PREGUNTA, no se hereda. Cada app lo enciende
   cuando Manu la abre y lo ve.

   ⚠️ El `none` va DENTRO del var() a propósito: sin ese respaldo, una app que
   no declare el token descartaría la declaración EN SILENCIO.

   ⚠️ Va en `background-image`, no en `background`: el atajo resetearía el
   `background-color: transparent` de arriba y se comería el cristal.

   ⚠️ AQUÍ SOLO ESTÁN LAS SEIS QUE NO LO TENÍAN. Las otras cuatro —`.aside`,
   `.platos__familia`, `.baner__alergenos` y `.index__buttons-btn`— siguen
   sacándolo de donde siempre (estructura-base, cartas e index). Y no es por
   orden: este archivo carga el ÚLTIMO, así que si las incluyera, el respaldo
   `none` les borraría el degradado a las 36 apps que hoy lo tienen. Un opt-in
   que apaga lo que venía encendido no es un opt-in, es una regresión. */
.cont-platos,
.allergens__info,
.contenido,
.lista_alergenos,
.nomenclaturas,
.reviews__cont-logos {
  background-image: var(--degradado-en-cristal, 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,
.lista_alergenos,
.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,
.lista_alergenos,
.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,
.lista_alergenos::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,
.lista_alergenos::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 > *,
.lista_alergenos > *,
.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. */