/* ============================================================
   EQUIPO HEALTHY RESONANCE — MAPA VIDRIO CLARO (lafam-ecommerce)
   Se carga DESPUÉS de tokens.css, styles.css, product-page.css
   y de los <style> inline de cada página (va al final del <head>).

   glass.css es canónico e intocable: pinta el paisaje y define
   los tokens --g-*. Este archivo traduce los selectores REALES
   de esta propiedad a ese material. Nada es canónico acá.

   Un solo tema desde el 4/9/2026: nada va scopeado. El diseño
   original (sage claro) sigue siendo la base; esta capa cambia
   el MATERIAL de las superficies, no la paleta:
     · secciones claras   → transparentes, el paisaje se ve entero
     · cards y fichas     → lámina de vidrio (una brillante por página)
     · capítulos oscuros  → vidrio oscuro (sin blur), tinta crema —
       solo los que tienen foto/video propio; las landings de
       color entero se abren al paisaje
     · CTA píldora        → gota dorada con brillo arriba
     · fijos y scrollers  → sólidos, jamás backdrop-filter
   ============================================================ */

/* ---- 0 · RE-TINTA DE TOKENS --------------------------------
   Medido contra los peores píxeles del paisaje: bajo el foco
   dorado más cálido el fondo queda en ≈#E2D19A y bajo el halo
   verde en ≈#C0CBB9.
   · --text-muted #4F6A4D daba 3.95:1 sobre el foco. Pasa a moss
     (#3D5B47: 4.96 / 4.48), el secundario canónico sobre claro.
   · --accent-ink #755215 se conserva canónico: el paisaje de
     glass.css v3 (4/9) está calibrado para que pase AA sobre su
     píxel más oscuro (4.85:1 medido). No oscurecerlo acá.
   · --accent-yellow-text #8A6E3A (tags) daba 3.16. Va al dorado
     tinta canónico.                                            */
:root {
  --text-muted: #3D5B47;
  --accent-ink: #755215;
  --accent-yellow-text: #755215;
}

/* ---- 1 · EL PAISAJE MANDA ----------------------------------
   styles.css usa body::before para el grano (opacity .06 +
   mix-blend-mode multiply, z-index 999). glass.css reusa ese
   mismo pseudo para el paisaje pero no resetea opacity ni
   blend: sin esto el paisaje queda al 6% multiplicado.       */
body::before {
  opacity: 1;
  mix-blend-mode: normal;
}

/* Trampa documentada (Sistema de Marca §3.1): styles.css:622
   apaga body::before en ≤768px y repinta html+body con
   --bg-canvas !important. body::before vive en z-index:-1 del
   contexto raíz: cualquier fondo opaco en body se pinta ENCIMA
   y el paisaje desaparece en mobile. Misma especificidad, mismo
   media query, mismo !important. El fondo lo pinta html.     */
@media (max-width: 768px) {
  body::before { display: block !important; }
  html { background: var(--g-sage) !important; }
  body { background: transparent !important; }
}

/* El ambient blob y los orbs del hero duplicaban al paisaje:
   siete focos ya son los Nodos, veinte leen como ruido.      */
.ambient,
.hero-orbs { display: none !important; }

/* ---- 2 · SECCIONES CLARAS SIN FONDO PROPIO -----------------
   Ninguna sección clara pinta color plano: el paisaje se ve
   entero. (Las oscuras van en §4.)                           */
#productos,
.ideas-section,
.faq-section,
.rs-section,
.mi-stack,
.ways,
.carousel-section,
.testimonials,
.pp-main,
.gr-main,
.footer { background: transparent !important; }

/* La grilla bento pintaba sus separadores con un color plano
   (--border-subtle de fondo + gap 1px). Sobre el paisaje se
   convierte en gap real; overflow visible para que la card en
   hover no se recorte.                                       */
.products__grid {
  background: transparent;
  border-color: transparent;
  gap: var(--space-2);
  overflow: visible;
}

/* ---- 3 · CURVAS ENTRE SECCIONES: RETIRADAS -----------------
   Eran la firma de esta propiedad, pero exigen empalmar EXACTO
   con el color plano de la sección siguiente, y con el paisaje
   detrás no hay color que empalmar: cualquier arco sólido
   flota como una mancha. Decisión definitiva (misma que se
   tomó para el nocturno). En este styles.css las clases nunca
   sumaron padding-bottom propio (las secciones usan
   --section-py-curve directo), así que no hay padding que
   devolver: se anula el pseudo y queda el padding normal.
   El divisor que sobrevive es la hairline dorada + punto
   (.x + section::before/::after): es gradiente, funciona
   sobre cualquier fondo.                                     */
.curve-to-canvas::after,
.curve-to-dark::after,
.curve-to-surface::after {
  content: none;
  display: none;
}

/* ---- 4 · CAPÍTULOS OSCUROS → VIDRIO OSCURO -----------------
   Solo los que tienen foto, video u overlay propio: el hero de
   la home (VSL + halo), Santiago (retrato), cómo funciona y
   Hunter (foto). Verde al 86–93% que deja pasar el paisaje, SIN
   backdrop-filter (el paisaje ya viene desenfocado y una banda
   a todo lo ancho con blur es cara en el scroll).
   Tinta crema; dorado chico #EBC470.
   Piso más claro medido de un capítulo (hero mobile sobre un
   foco): #46523C → crema 6.5:1, crema-soft 5.6, #EBC470 5.0,
   #DDAA3C 3.9 (por eso el dorado chico cambia).
   Los heroes de /nodos, /membresia, /programas y /diagnostico
   eran solo color: van claros (§4b).                        */
.hero,
.about-santi,
.how-it-works,
.hunter-section,
.vsl-section {
  background: var(--g-fill-dark) !important;
  color: var(--g-crema);
  box-shadow: var(--g-lift-dark);
}

/* El scrim del hero se aclara: el vidrio oscuro ya pone el piso.
   Queda solo el halo dorado arriba.                          */
.hero::before {
  background: radial-gradient(ellipse 140% 70% at 50% 0%, rgba(221,170,60,.10), transparent 70%);
}

/* Dorado chico sobre oscuro: #EBC470, nunca #DDAA3C */
.about-santi__role,
.about-santi__link,
.how-step__num,
.hunter-card__eyebrow,
.hunter-card__subtitle,
.vsl-copy__eyebrow,
.hero__cta-microcopy { color: var(--g-gold-readable); }
.how-step__num,
.hero__cta-microcopy { opacity: 1; }

/* Eyebrow y kicker del hero son Cormorant de 17–27px, no display:
   el dorado drama #D4B896 medía 4.4:1 sobre el piso mobile. Van
   al dorado chico (5.0). El drama queda para el em del h1.   */
.hero__eyebrow,
.hero__kicker { color: var(--g-gold-readable); }

/* Cremas al 50–75% que no pasaban sobre el piso más claro del
   vidrio oscuro: crema secundaria plena.                     */
.how-step p,
.hunter-card__desc,
.hunter-card__disclaimer,
.about-santi__bio,
.vsl-copy__lead,
.vsl-copy__bullets li { color: var(--g-crema-soft); opacity: 1; }
.hunter-card__disclaimer strong { color: var(--g-crema); }

/* Blanco puro que había en los capítulos oscuros */
.idea-card__play { color: var(--g-crema); }
.hero__vsl-link {
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(232,228,216,.08);
}

/* ---- 4b · LAS LANDINGS OSCURAS SE ABREN AL CLARO -----------
   /nodos y /membresia (.mem), /programas (.prog-hero + dos .ways)
   y /diagnostico (.quiz) eran verde entero «estilo Servicios».
   Sus heroes son solo color (título, lead, CTA): sin foto ni
   video propio no hay motivo para un capítulo oscuro. Todo pasa
   a transparente sobre el paisaje con tinta ink/moss y dorado
   chico #755215; los recuadros son láminas claras (§5b).
   El halo dorado del hero de programas duplicaba un foco: fuera.
   Las .ways de programas ya caen en la regla de §2.          */
.mem,
.prog-hero,
.quiz {
  background: transparent !important;
  color: var(--g-ink);
  box-shadow: none;
}
.prog-hero::before { display: none; }

/* tinta principal */
.mem-title,
.mem-h2,
.mem-card h3,
.mem-list li,
.lead-form label,
.lead-form__check,
.prog-hero h1,
.ways .section-header h2,
.ways__grid .way-card h3,
.ways__grid .way-card__price strong,
.quiz__title,
.quiz__q,
.quiz__lead-title,
.quiz__paths-title { color: var(--g-ink); opacity: 1; }

/* display dorado: solo lo que es grande de verdad */
.mem-title em,
.prog-hero h1 em,
.mem-price { color: var(--g-gold-display); }

/* secundario: moss pleno (nada de cremas al 60–85%) */
.mem-lead,
.mem-cta-sub,
.mem-scroll-hint,
.nodo-carousel-cap,
.mem-price-sub,
.mem-card__what,
.nodo-equipo__desc,
.mem-form-sub,
.lead-form__hint,
.lead-form__note,
.prog-hero__sub,
.prog-hero__meta,
.ways .ways__lead,
.ways__grid .way-card__desc,
.ways__grid .way-card__list li,
.ways__grid .way-card__price span,
.quiz__sub,
.quiz__result-desc,
.quiz__paths-note,
.quiz__back { color: var(--g-ink-soft); opacity: 1; }

/* dorado chico sobre claro: #755215 */
.mem-video-cap,
.mem-card__for,
.mem-list li::before,
.checkout__back,
.prog-hero__kicker,
.ways .section-header__eyebrow,
.ways__grid .way-card__list li::before,
.quiz__eyebrow,
.quiz__step,
.quiz__reset,
.quiz__paths-list a { color: var(--g-gold-ink); opacity: 1; }
.quiz__paths-list a:hover,
.quiz__back:hover { color: var(--g-ink); opacity: 1; }

/* píldoras de etiqueta: dorado tenue con tinta dorada. En
   /membresia el .mem-eyebrow es un <p> sin padding ni radio (en
   /nodos sí es píldora): se le da la misma geometría, o el borde
   se dibuja a todo el ancho del contenedor.                  */
.mem-eyebrow,
.ways__grid .way-card__tag,
.quiz__result-tag {
  background: rgba(221,170,60,.14);
  border: 1px solid rgba(221,170,60,.42);
  color: var(--g-gold-ink);
  box-shadow: inset 0 1px 0 rgba(232,228,216,.5);
}
.mem-eyebrow {
  display: inline-block;
  padding: .42rem .9rem;
  border-radius: var(--radius-pill);
}

/* ghost sobre lámina clara: como el .btn--ghost de las way-cards
   claras de styles.css (tinta bosque, hover bosque lleno)    */
.ways__grid .way-card .btn--ghost,
.quiz__btn--ghost {
  color: var(--g-ink);
  border-color: rgba(31,53,40,.45);
  background: rgba(31,53,40,.05);
}
.ways__grid .way-card:hover .btn--ghost,
.ways__grid .way-card .btn--ghost:hover,
.quiz__btn--ghost:hover {
  background: var(--g-forest);
  border-color: var(--g-forest);
  color: var(--g-crema);
  box-shadow: none;
}

/* formularios sobre claro: fondo crema #F0EDE0, borde verde .30,
   texto ink, foco dorado. Las opciones del quiz son botones:
   mismo tratamiento, hover dorado tenue.                     */
.lead-form input,
.lead-form textarea,
.quiz__lead input,
.quiz__opt {
  background: #F0EDE0;
  border: 1px solid rgba(45,74,62,.30);
  color: var(--g-ink);
}
.lead-form input:focus,
.lead-form textarea:focus,
.quiz__lead input:focus,
.quiz__opt:focus-visible {
  background: #F0EDE0;
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.quiz__opt:hover {
  background: rgba(221,170,60,.16);
  border-color: var(--accent);
  color: var(--g-ink);
}
.lead-form input::placeholder,
.lead-form textarea::placeholder,
.quiz__lead input::placeholder { color: rgba(61,91,71,.70); }
.quiz__progress { background: rgba(45,74,62,.14); }
.quiz__lead,
.quiz__paths { border-top-color: rgba(45,74,62,.18); }

/* ---- 5 · LÁMINAS -------------------------------------------
   Todo lo que era card sage/crema opaca pasa a vidrio. Cada
   una conserva su radio original (píldoras y radios generosos
   intactos). El canto especular va en ::before y no en ::after
   porque .product-card::after es el spotlight dorado del cursor
   (§5.4) y conviene un solo pseudo para todas.
   Sin overflow:hidden: ninguna lo necesita para el canto
   (border-radius: inherit) y varias tienen hijos que asoman. */
.product-card,
.stack-item,
.rs-principle,
.docs-section,
.choose-help,
.empty-state,
.gr-card,
.pp-media,
.pp-info {
  background: var(--g-fill);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-lift);
  position: relative;
}
.product-card::before,
.stack-item::before,
.rs-principle::before,
.docs-section::before,
.choose-help::before,
.empty-state::before,
.gr-card::before,
.pp-media::before,
.pp-info::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(232,228,216,.48), transparent 34%);
}
.product-card > *,
.stack-item > *,
.rs-principle > *,
.docs-section > *,
.choose-help > *,
.empty-state > *,
.gr-card > *,
.pp-media > *,
.pp-info > * { position: relative; z-index: 1; }

/* La ficha de producto no tenía superficie propia (texto suelto
   sobre sage): como lámina necesita aire adentro.            */
.pp-info {
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
/* Hover: el borde se dora y la sombra se calienta. No se pasa a
   --g-fill-bright (una sola brillante por página).           */
.product-card:hover {
  background: var(--g-fill);
  border-color: rgba(221,170,60,.55);
  box-shadow: var(--g-lift), 0 18px 40px -18px rgba(221,170,60,.35);
}
.stack-item:hover,
.rs-principle:hover { border-color: rgba(221,170,60,.55); }

/* El pozo de la imagen del producto: piso crema suave dentro de
   la lámina, en vez de un bloque sage opaco.                 */
.product-card__img { background: rgba(232,228,216,.45); }
.products__grid--showcase .product-card .product-card__img { background: transparent; }

/* Las doc-cards viven DENTRO de la lámina docs-section: vidrio
   sin blur (blur anidado cuesta y no suma) con canto propio.  */
.doc-card {
  background: rgba(232,228,216,.55);
  border: 1px solid var(--g-edge);
  box-shadow: 0 1px 0 rgba(232,228,216,.7) inset, 0 6px 18px -8px rgba(19,31,24,.28);
}
.doc-card:hover {
  border-color: rgba(221,170,60,.6);
  box-shadow: 0 1px 0 rgba(232,228,216,.7) inset, 0 16px 34px -14px rgba(19,31,24,.35);
}
.doc-card__icon { color: var(--accent-ink); }

/* Carruseles horizontales en mobile (regla §7.6): el stack de
   /quienes-somos scrollea de costado en ≤768. Las cards que
   scrollean no llevan blur: caen al sólido.                  */
@media (max-width: 768px) {
  .mi-stack__grid .stack-item {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--g-solid);
  }
  /* 17 cards con blur sobre un paisaje que deriva es demasiado
     compositing para un teléfono: en mobile la grilla de
     productos conserva el relleno translúcido, sin blur.     */
  .product-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---- 5b · LÁMINAS DE LAS LANDINGS ABIERTAS ------------------
   Los recuadros de /nodos y /membresia (.mem-card), las way-cards
   de /programas y la card del quiz pasan a vidrio claro. Su
   ::before es la línea dorada lateral (inline), así que acá el
   canto especular va en ::after. El badge de la way-card es
   position:absolute: queda fuera del > * relativo.           */
.mem-card,
.ways__grid .way-card,
.quiz__card {
  background: var(--g-fill);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-lift);
  position: relative;
}
.mem-card::after,
.ways__grid .way-card::after,
.quiz__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(232,228,216,.48), transparent 34%);
}
.mem-card > *,
.quiz__card > *,
.ways__grid .way-card > :not(.way-card__badge) { position: relative; z-index: 1; }
.mem-cards .mem-card:hover,
.ways__grid .way-card:hover {
  border-color: rgba(221,170,60,.55);
  box-shadow: var(--g-lift), 0 18px 40px -18px rgba(221,170,60,.35);
}
.ways__grid .way-card--featured:hover {
  box-shadow: var(--g-lift), 0 18px 40px -18px rgba(221,170,60,.35);
}
/* mobile: varios recuadros apilados con blur sobre un paisaje que
   deriva; conservan el relleno, sueltan el blur. La del quiz es
   una sola y lo conserva.                                    */
@media (max-width: 768px) {
  .mem-card,
  .ways__grid .way-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---- 6 · LA LÁMINA BRILLANTE — una sola por página ---------
   La que cierra la venta en cada plantilla:
   · index      → .choose-help («¿No sabés cuál elegir?» + CTA)
   · /producto/ → .pp-info (precio + Comprar ahora)
   · /gracias   → .gr-card (el resumen del pedido)
   · /nodos y /membresia → .mem-formcard (el formulario de aplicar
     / sumarse)
   · /programas → .way-card--featured (la card destacada)
   · /diagnostico → .quiz__card (el CTA del quiz vive adentro)
   · quienes-somos: ninguna (nada cierra venta).               */
.choose-help,
.pp-info,
.gr-card,
.mem-formcard,
.ways__grid .way-card--featured,
.quiz__card {
  background: var(--g-fill-bright);
  border-color: var(--g-edge-bright);
}
.choose-help::before,
.pp-info::before,
.gr-card::before,
.mem-formcard::after,
.ways__grid .way-card--featured::after,
.quiz__card::after {
  background: linear-gradient(158deg, rgba(232,228,216,.5), transparent 34%);
}

/* ---- 7 · DORADO DE TEXTO CHICO SOBRE CLARO -----------------
   #DDAA3C (1.4:1) y #C18A25 (2.0:1) como texto sobre el paisaje
   no pasan. Todo dorado chico sobre claro es --accent-ink.   */
.rs-principle__num,
.rs-back,
.gr-card h2,
.faq-item[open] .faq-item__q,
.faq-item__q::after,
.checkout-summary__total span:last-child,
.checkout-cuotas-notice strong,
.product-detail__section h4,
.product-detail__videolink,
.filter-chip:hover,
.cart-drawer__close:hover,
#checkout-close:hover,
.cart-item__qty button:hover,
.footer__social-link:hover,
.footer__lang-btn:hover { color: var(--accent-ink); }

/* «Consultá por cuotas» iba al 92% de opacidad: en el extremo
   bajo de la lámina bajo el halo verde (#C9D2B0) medía 4.4:1.
   Opacidad plena → 4.8.                                       */
.product-card__cuotas,
.product-detail__cuotas { opacity: 1; }

/* El aviso legal del footer lleva opacity:.65 inline (atributo
   style): moss al 65% sobre el paisaje da 2.9:1. Tinta bosque al
   80% → 5.1 sobre el foco más cálido. El !important es para el
   atributo style, no para otra hoja.                          */
.footer__disclaimer {
  color: var(--g-ink);
  opacity: .8 !important;
}

/* En ≤600 el chip de filtro lleva su etiqueta adentro a 9px:
   tinta al 78% sobre el dorado del chip activo daba 4.1:1.    */
@media (max-width: 600px) {
  .filter-chip__eyebrow { color: rgba(31,53,40,.92); }
  .filter-chip--active .filter-chip__eyebrow { color: rgba(31,53,40,.96); }
}

/* a:hover global era dorado pleno: sobre claro pasa a tinta y
   se restituye el dorado claro dentro de los capítulos oscuros
   y del navbar.                                              */
a:hover { color: var(--accent-ink); }
.hero a:hover,
.about-santi a:hover,
.how-it-works a:hover,
.hunter-section a:hover,
.vsl-section a:hover,
.header a:hover,
.mobile-nav a:hover { color: var(--g-gold-readable); }

/* ---- 8 · CTA: la gota dorada -------------------------------
   Geometría intacta (píldora, min-height, sin flechas). Brillo
   arriba en crema (nunca blanco), sombra propia abajo.
   Los botones con btn-breathe (hero, checkout, carrito) NO
   llevan sombra propia: el keyframe es dueño del box-shadow. */
.btn--primary,
.mem-cta,
.lead-form__submit,
.quiz__btn:not(.quiz__btn--ghost),
.hero__vsl-link a {
  background: linear-gradient(150deg, rgba(221,170,60,.98), rgba(221,170,60,.80));
  color: var(--g-forest);
  border-color: rgba(232,228,216,.60);
  box-shadow:
    0 1px 0 rgba(255,240,205,.85) inset,
    0 -2px 6px rgba(122,86,16,.22) inset,
    0 12px 26px -12px rgba(221,170,60,.75);
}
.btn--primary:hover,
.mem-cta:hover,
.lead-form__submit:hover,
.quiz__btn:not(.quiz__btn--ghost):hover,
.hero__vsl-link a:hover {
  background: linear-gradient(150deg, rgba(228,184,88,1), rgba(221,170,60,.92));
  color: var(--g-forest);
  border-color: rgba(232,228,216,.75);
  box-shadow:
    0 1px 0 rgba(255,240,205,.9) inset,
    0 -2px 6px rgba(122,86,16,.22) inset,
    0 16px 34px -12px rgba(221,170,60,.85);
}
.hero .btn--primary,
.checkout-form__submit,
.cart-drawer__checkout,
.hero .btn--primary:hover,
.checkout-form__submit:hover,
.cart-drawer__checkout:hover { box-shadow: 0 0 0 0 rgba(221,170,60,.45); }

/* Brillos en crema, nunca en blanco puro (§2 vale también para
   la luz): barridos del botón primario, del «Ver más» y de los
   chips de filtro.                                           */
.btn--primary::before {
  background: linear-gradient(100deg, transparent, rgba(232,228,216,.45), transparent);
}
.products-more__btn[data-action="show-more"]::after {
  background: linear-gradient(100deg, transparent, rgba(232,228,216,.55), transparent);
}
.filter-chip::after {
  background: linear-gradient(110deg, transparent 0, rgba(232,228,216,.6) 50%, transparent 100%);
}

/* ---- 9 · CHIPS DE FILTRO Y BUSCADOR ------------------------
   El chip era #FFFFFF sólido. Pasa a chip de vidrio crema sin
   blur (son muchos y chicos). El activo sigue dorado pleno.  */
.filter-chip {
  background: rgba(232,228,216,.72);
  border-color: var(--g-edge);
  box-shadow: 0 1px 0 rgba(232,228,216,.7) inset, 0 2px 8px -2px rgba(19,31,24,.18);
}
.filter-chip:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(232,228,216,.7) inset, 0 8px 18px -8px rgba(19,31,24,.3);
}
.filter-chip--active,
.filter-chip--active:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-dark);
}
.product-search {
  background-color: rgba(232,228,216,.55);
  border-color: var(--g-edge);
}
/* En ≤600 los filtros se apilan dentro de una tarjeta oscura:
   pasa a vidrio oscuro (los chips adentro ya son crema sólida). */
@media (max-width: 600px) {
  .filters {
    background: var(--g-fill-dark);
    box-shadow: var(--g-lift-dark), inset 0 0 0 1px rgba(221,170,60,.18);
  }
}

/* ---- 10 · FIJOS Y SCROLLERS: SÓLIDOS, SIN BLUR -------------
   Regla §6: nada de backdrop-filter en elementos fijos ni en
   nada que scrollee. styles.css ya anula el blur (sin scopear);
   acá se reafirma y se fija el color. El navbar es el mismo
   verde bosque .97 de las otras cinco propiedades (§5.5), en
   todos los anchos; el drawer del menú y los flotantes, forest
   sólido. Carrito, checkout y modal de producto conservan sus
   superficies crema opacas: son lo más crítico de un
   e-commerce y se leen mejor opacos.                         */
.header,
.mobile-nav,
.mobile-sticky-cta,
.trust-bar,
.toast,
.cart-overlay,
.checkout-overlay,
.lightbox,
.cart-drawer,
.checkout-modal,
.product-detail__overlay,
.product-detail__panel,
.social-dock__link,
.back-to-top,
.whatsapp-float,
.mi-stack__grid,
.ideas-reel,
.maquina-carousel,
.carousel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.header { background: rgba(31,53,40,.97); }
.mobile-nav { background: rgba(31,53,40,.98); }
.whatsapp-float,
.whatsapp-float:hover { color: var(--g-crema); }

/* Modal de producto (index): restos de blanco puro */
.product-detail__close { background: rgba(232,228,216,.85); }
.product-detail__close:hover { background: var(--g-crema); }
@media (max-width: 768px) {
  .product-detail__footer { background: var(--bg-surface); }
}

/* ---- 11 · FALLBACK ------------------------------------------
   Sin backdrop-filter la página se ve igual de buena, solo
   menos profunda. Nunca es un requisito.                     */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .product-card,
  .stack-item,
  .rs-principle,
  .docs-section,
  .empty-state,
  .pp-media,
  .mem-card,
  .ways__grid .way-card { background: var(--g-solid); }
  .choose-help,
  .pp-info,
  .gr-card,
  .mem-formcard,
  .ways__grid .way-card--featured,
  .quiz__card { background: var(--g-solid-bright); }
}
