/* ============================================================
   BIBLIOTECA DE SOLUCIONES (lista-soluciones)
   MAPEO local: selectores reales de esta guía → vidrio claro.
   Se carga DESPUÉS del <style> inline del index y de glass.css.
   glass.css NO se toca: es canónico (md5 idéntico en el movimiento).

   Un solo tema desde el 4/9/2026: nada va scopeado. El diseño
   propio de la guía (Newsreader, su verde --brand, los cuatro
   niveles, radios 18/12, la voz) sigue siendo la base; esta capa
   cambia el MATERIAL de las superficies, no la marca.

   Decisiones de esta propiedad:
   · Láminas con blur solo en las pocas y grandes. Los acordeones
     (.item, decenas por paso) y las portadas de resultado (.bres,
     hasta ~80 por búsqueda) son láminas SIN backdrop-filter: el
     paisaje ya viene desenfocado y no hay nada detrás que refractar,
     así que el blur no se ve y sí se paga en el scroll del celular.
   · Una sola lámina brillante por vista: Inicio → .inicio__main
     (la protagonista de «Por dónde empezar»), Guía → .cta-wa__card,
     Buscar → .buscador__box, Muro → .muro__card. Membresía y cierre
     son capítulos oscuros: venden desde el vidrio oscuro.
   · Los tintes --brand-tint pasan a láminas con tinte verde (menta
     translúcida) en vez de crema: conservan la identidad de la guía.
   · Los fijos y sticky (topbar, appnav, to-top, cheer, pwa-aviso,
     quiz WhatsApp) van sólidos y sin blur (regla §6).
   ============================================================ */

/* ---- 0 · RE-TINTA DE TOKENS --------------------------------
   --bg lo pinta glass.css en html; --surface era blanco puro
   oklch(1 0 0) y --surface-2 casi blanco: pasan al sólido sage
   de la capa (chips, botones, fijos, cajas anidadas). Las
   superficies reales se convierten abajo, selector por selector. */
:root {
  --bg: transparent;
  --surface: var(--g-solid-bright);
  --surface-2: var(--g-solid);
  --brand-tint: rgba(190, 226, 201, 0.50);
  --line: rgba(61, 91, 71, 0.20);
  --line-soft: rgba(61, 91, 71, 0.12);

  /* lámina con tinte verde: la versión menta de --g-fill */
  --g-fill-mint: linear-gradient(150deg, rgba(190, 226, 201, 0.62), rgba(190, 226, 201, 0.30) 46%, rgba(221, 170, 60, 0.08));
  --g-fill-mint-bright: linear-gradient(150deg, rgba(200, 232, 208, 0.80), rgba(200, 232, 208, 0.46) 46%, rgba(221, 170, 60, 0.12));
  --g-edge-mint: rgba(190, 226, 201, 0.85);
  --g-solid-mint: #D3E3D0;
}

::selection { background: rgba(221, 170, 60, 0.35); }

/* --brand (#007846) como texto chico da 3.8:1 sobre el píxel más
   oscuro del paisaje: el hover de los links queda en --brand-deep
   (5.8:1) y avisa con el grosor del subrayado. Como display
   (.step__num, .inicio__num) --brand pasa el 3:1 y se queda. */
a:hover { color: var(--brand-deep); text-decoration-thickness: 2.5px; }

/* ---- 1 · EL PAISAJE MANDA ----------------------------------
   El glow ambiente fijo duplicaba al paisaje de glass.css. Los
   degradés de fondo de Biblioteca, Clases, Inicio y el muro se
   apagan: se ve el paisaje.                                    */
.ambient { display: none !important; }
.buscador, .clases, .inicio, .muro { background: transparent; }
.buscador { border-bottom-color: var(--line-soft); }

/* ---- 2 · LÁMINAS CON BLUR (pocas y grandes) ----------------- */
.note,
.level-key,
.inicio__card,
.inicio__cierre,
.mem-soon__card,
.blogin,
.ccomp,
.bclip__btn,
.bprod > div {
  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;
  overflow: hidden;
}

/* ---- 3 · LÁMINAS SIN BLUR (las que se repiten por decenas) -- */
.item,
.bres {
  background: var(--g-fill);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-lift);
  position: relative;
  overflow: hidden;
}

/* ---- 4 · LA LÁMINA BRILLANTE — una por vista ---------------- */
.inicio__main,
.buscador__box,
.muro__card {
  background: var(--g-fill-bright);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge-bright);
  box-shadow: var(--g-lift);
  position: relative;
  overflow: hidden;
}
/* La tarjeta del muro no tenía material: era texto sobre el fondo. */
.muro__card { border-radius: var(--radius); padding: clamp(1.5rem, 3.2vw, 2.3rem); }

/* ---- 5 · LÁMINAS MENTA (los tintes verdes de la guía) -------- */
.bhola,
.hero__free,
.reassure,
.cta-wa__card,
.hero-wa {
  background: var(--g-fill-mint);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge-mint);
  box-shadow: var(--g-lift);
  position: relative;
  overflow: hidden;
}
.cta-wa__card { background: var(--g-fill-mint-bright); }
/* anidada dentro de una lámina: tinte sin blur */
.inicio__bonif { background: var(--g-fill-mint); border-color: var(--g-edge-mint); }

/* ---- 6 · CANTO ESPECULAR + CONTENIDO ENCIMA -----------------
   .level-key conserva su ::after (el número marca de agua) y
   .inicio__main su ::before (la barra verde de protagonista).   */
.note::after,
.inicio__card::after,
.inicio__cierre::after,
.mem-soon__card::after,
.blogin::after,
.ccomp::after,
.bclip__btn::after,
.bprod > div::after,
.item::after,
.bres::after,
.inicio__main::after,
.buscador__box::after,
.muro__card::after,
.bhola::after,
.hero__free::after,
.reassure::after,
.cta-wa__card::after,
.hero-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(232, 228, 216, 0.48), transparent 34%);
}
.note > *,
.inicio__card > *,
.inicio__cierre > *,
.mem-soon__card > *,
.blogin > *,
.ccomp > *,
.bclip__btn > *,
.bprod > div > *,
.item > *,
.bres > *,
.inicio__main > *,
.buscador__box > *,
.muro__card > *,
.bhola > *,
.hero__free > *,
.reassure > *,
.cta-wa__card > *,
.hero-wa > * { position: relative; z-index: 1; }

/* hover: mismo canto de siempre (el verde de la guía), sombra del vidrio */
.item:hover,
.bres:hover,
.inicio__card:hover,
.level-key:hover,
.ccomp:hover,
.bclip__btn:hover {
  box-shadow: var(--g-lift), 0 24px 48px -20px rgba(19, 31, 24, 0.30);
}

/* brillos internos que eran blanco puro → crema */
.inicio__buy { box-shadow: inset 0 1px 0 rgba(232, 228, 216, 0.75); }
.brand-mark .seed { box-shadow: inset 0 0 0 3px rgba(232, 228, 216, 0.45); }
.hero__photo::after {
  box-shadow: inset 0 0 0 1px rgba(232, 228, 216, 0.45), inset 0 -70px 90px -55px rgba(31, 53, 40, 0.38);
}
.hero .eyebrow::after { background: linear-gradient(100deg, transparent, rgba(232, 228, 216, 0.7), transparent); }
.btn--wa::after { background: linear-gradient(100deg, transparent, rgba(232, 228, 216, 0.5), transparent); }
/* La sombra del marco caía justo debajo del pie del video y dejaba el
   paisaje en #BEC7B5: --ink-soft daba 4.4:1 ahí. Sombra más corta y el
   pie en moss (≥4.9:1 medido). */
.video__marco { box-shadow: 0 14px 40px -16px rgba(31, 53, 40, 0.36); }
.video__pie { color: var(--g-moss); }
.video__ic { background: rgba(232, 228, 216, 0.94); }
.video__play:hover .video__ic,
.video__play:focus-visible .video__ic { background: #F0EDE0; }
.evsl__play { background: rgba(232, 228, 216, 0.94); }
.evsl, .ccomp__img { background: var(--g-night); }

/* ---- 7 · CAPÍTULOS OSCUROS: vidrio oscuro -------------------
   El cartel, el panel del muro, la membresía y el cierre eran
   verde opaco. Pasan a vidrio oscuro que deja pasar el paisaje.
   Sin blur (regla §6: una banda ancha con blur es cara).        */
.evento,
.muro__brand,
.membresia__card,
.close__card {
  background: var(--g-fill-dark);
  box-shadow: var(--g-lift-dark);
}
.muro__brand::before { opacity: 0.035; }
.membresia__card {
  border-color: var(--g-edge-dark);
  box-shadow: var(--g-lift-dark), 0 22px 54px rgba(19, 31, 24, 0.28);
}
.close__card { box-shadow: var(--g-lift-dark), var(--shadow-lift); }
.close__card::before {
  background:
    radial-gradient(120% 85% at 12% -10%, rgba(80, 140, 100, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(232, 228, 216, 0.06) 0 18%, transparent 38%);
}
/* tinta sobre oscuro: crema, nunca #fff */
.close__card h2,
.close__card a:not(.btn) { color: var(--g-crema); }
.close__contact .btn--primary { background: var(--g-crema); color: var(--g-forest); }
.close__contact .btn--primary:hover { background: var(--g-crema-soft); color: var(--g-forest); }
.close__contact .btn--ghost { border-color: rgba(232, 228, 216, 0.4); color: var(--g-crema); }
.close__contact .btn--ghost:hover { background: rgba(232, 228, 216, 0.12); border-color: var(--g-crema); color: var(--g-crema); }
.wa-float__tip, .bres__parte { color: var(--g-crema); }
.bres__thumb .play svg { fill: var(--g-crema); }

/* ---- 8 · CTA -----------------------------------------------
   El botón del muro es dorado con breathe: gana el brillo y la
   sombra propia de .g-cta, pero la sombra la sigue mandando el
   keyframe (por eso acá no se le pone). Los verdes de la guía
   siguen verdes: su texto pasa de #fff a crema; donde la letra
   es chica el fondo baja a --brand-deep para que el crema pase AA. */
.muro button[type="submit"] {
  background: linear-gradient(150deg, rgba(221, 170, 60, 0.98), rgba(221, 170, 60, 0.80));
  border: 1px solid rgba(232, 228, 216, 0.6);
  color: var(--g-forest);
}
.muro button[type="submit"]:hover {
  background: linear-gradient(150deg, rgba(228, 184, 88, 1), rgba(221, 170, 60, 0.92));
}
.btn--gold, .btn--gold:hover { border: 1px solid rgba(232, 228, 216, 0.6); }
@keyframes memBreathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.85), 0 0 0 0 rgba(221, 170, 60, 0.45), 0 10px 26px -8px rgba(221, 170, 60, 0.5); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.85), 0 0 0 10px rgba(221, 170, 60, 0), 0 12px 30px -8px rgba(221, 170, 60, 0.6); }
}
.btn--primary,
.btn--primary:hover,
.buscador__box button,
.blogin button,
.pwa-aviso__btn,
.howto__pasos .num,
.skip { color: var(--g-crema); }
.buscador__chips button:hover,
.buscador__chips button.on,
.bmom a:hover,
.lang-switch__b.on,
.step__bridge:hover,
.bprod a {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: var(--g-crema);
}
.bprod a:hover { background: var(--g-forest); }
/* WhatsApp se queda como está */
.bprod .bprod__wa { background: #25d366; color: #0a3b2e; }
.bprod .bprod__wa:hover { background: #22c15e; color: #062a20; }

/* campos: crema cálido, nunca blanco */
.muro input,
.blogin input { background: #F0EDE0; border-color: rgba(61, 91, 71, 0.22); }
.bhola__next svg { color: var(--g-gold-ink); }

/* ---- 9 · FIJOS Y STICKY: SIN BACKDROP-FILTER, SÓLIDOS --------
   Regla §6. La barra superior y la de pestañas tenían blur(10px). */
.topbar,
.appnav,
.to-top,
.cheer,
.pwa-aviso,
.waq__bg,
.waq__box,
.waq__sendwrap {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar { background: rgba(229, 235, 217, 0.97); border-bottom-color: rgba(61, 91, 71, 0.16); }
@media (min-width: 721px) {
  .appnav { background: rgba(229, 235, 217, 0.97); border-bottom-color: rgba(61, 91, 71, 0.16); }
}
@media (max-width: 720px) {
  .appnav { background: rgba(229, 235, 217, 0.98); border-top-color: rgba(61, 91, 71, 0.16); }
}
.waq__bg { background: rgba(19, 31, 24, 0.55); }
.waq__box,
.waq__sendwrap,
.pwa-aviso,
.cheer,
.to-top { background: var(--g-solid-bright); }

/* ---- 10 · FALLBACK ------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .note, .level-key, .inicio__card, .inicio__cierre, .mem-soon__card, .blogin, .ccomp, .bclip__btn, .bprod > div,
  .item, .bres { background: var(--g-solid); }
  .inicio__main, .buscador__box, .muro__card { background: var(--g-solid-bright); }
  .bhola, .hero__free, .reassure, .cta-wa__card, .hero-wa, .inicio__bonif { background: var(--g-solid-mint); }
}