/* ============================================================
   HEALTHY RESONANCE — HUB (landing-youtube-whatsapp)
   MAPEO local: selectores reales de este sitio → vidrio claro.
   Se carga DESPUÉS de glass.css. glass.css NO se toca.
   Nada de esto es canónico: cada propiedad escribe su propio map.

   Un solo tema desde el 4/9/2026: nada va scopeado. El diseño
   original (CSS inline del index) sigue siendo la base; esta
   capa cambia el MATERIAL de las superficies, no la paleta.
   ============================================================ */

/* ---- 0 · RE-TINTA DE TOKENS --------------------------------
   Sobre el paisaje, el foco dorado más cálido deja el fondo en
   ≈#E2D19A. --soft (#4f6b52) daba 3.9:1 ahí: pasa a moss.     */
:root {
  --soft: #3D5B47;
}

/* ---- 1 · EL PAISAJE MANDA ----------------------------------
   La aurora fija y los orbs del hero duplicaban al paisaje de
   glass.css (body::before). Se apagan.                        */
.aurora,
.hero-orbs { display: none !important; }

/* ---- 2 · LÁMINAS -------------------------------------------
   Las cards de principios eran sage opaco (#dde2d0): pasan a
   vidrio. Radio 18 como el original.                          */
.principle {
  background: var(--g-fill);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-lift);
  position: relative;
  overflow: hidden;
}
.principle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(232, 228, 216, 0.48), transparent 34%);
}
.principle > * { position: relative; z-index: 1; }
.principle:hover {
  border-color: rgba(221, 170, 60, 0.55);
  box-shadow: var(--g-lift), 0 18px 40px -18px rgba(221, 170, 60, 0.35);
}

/* El carrusel de principios en mobile ES un scroller horizontal:
   sus cards caen al sólido para no arrastrar el blur en el swipe. */
@media (max-width: 719px) {
  .principle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--g-solid);
  }
}

/* ---- 3 · LA LÁMINA BRILLANTE — una sola por página ---------
   El pull-quote es el momento Cormorant: se lleva el brillo.  */
.pull-quote {
  background: var(--g-fill-bright);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge-bright);
  border-radius: var(--g-radius);
  box-shadow: var(--g-lift);
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 46px) clamp(22px, 4vw, 44px);
}
.pull-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(232, 228, 216, 0.5), transparent 34%);
}
.pull-quote::before,
.pull-quote p { position: relative; z-index: 1; }

/* ---- 4 · QUIÉN CAMINA CON VOS: banda de vidrio -------------
   Era una banda crema opaca (--surface). Pasa a lámina a todo
   lo ancho, sin radio: canto arriba y abajo.                  */
.quien {
  background: var(--g-fill);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border-top: 1px solid var(--g-edge);
  border-bottom: 1px solid var(--g-edge);
  box-shadow:
    0 1px 0 rgba(232, 228, 216, 0.7) inset,
    0 18px 40px -18px rgba(19, 31, 24, 0.25);
}
.quien__photo img {
  border: 1px solid var(--g-edge);
  box-shadow: 0 18px 48px -18px rgba(31, 53, 40, 0.45);
}

/* ---- 5 · CAPÍTULOS OSCUROS: vidrio oscuro -------------------
   Misión y cierre eran verde opaco con grano. Pasan a vidrio
   oscuro que deja pasar el paisaje. El grano se queda, más
   tenue. El callout adentro conserva su tinte dorado.         */
.content-section--dark,
.final-cta {
  background: var(--g-fill-dark);
  box-shadow: var(--g-lift-dark);
}
.content-section--dark::before { opacity: 0.035; }
.final-cta::before { opacity: 0.03; }
.callout { border-color: rgba(232, 228, 216, 0.18); }

/* ---- 6 · CTA -----------------------------------------------
   La píldora deja de ser plana. Geometría intacta: 999px,
   min-height, breathe (que es dueño del box-shadow del .cta:
   por eso acá no se le pone sombra).                          */
.cta,
.topbar__wa {
  background: linear-gradient(150deg, rgba(221, 170, 60, 0.98), rgba(221, 170, 60, 0.8));
  border: 1px solid rgba(232, 228, 216, 0.6);
  color: var(--dark);
}
.cta:hover,
.topbar__wa:hover {
  background: linear-gradient(150deg, rgba(228, 184, 88, 1), rgba(221, 170, 60, 0.92));
  color: var(--dark);
}
.topbar__wa {
  box-shadow:
    0 1px 0 rgba(255, 240, 205, 0.85) inset,
    0 -2px 6px rgba(122, 86, 16, 0.22) inset;
}
.video-poster__btn {
  background: linear-gradient(150deg, rgba(221, 170, 60, 0.98), rgba(221, 170, 60, 0.82));
  border: 1px solid rgba(232, 228, 216, 0.6);
}

/* ---- 7 · MARCO DEL VIDEO: vive sobre el paisaje ------------ */
.video-frame { box-shadow: 0 24px 64px -12px rgba(31, 53, 40, 0.4); }

/* ---- 8 · FIJOS: SIN BACKDROP-FILTER, NUNCA ------------------
   Regla §6 del Sistema de Marca. El topbar, el back-to-top, el
   splash y la barra de progreso siguen sólidos.               */
.topbar,
.back-to-top,
.scroll-progress,
.splash {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- 9 · FALLBACK ------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .principle,
  .quien { background: var(--g-solid); }
  .pull-quote { background: var(--g-solid-bright); }
}