/* ============================================================
   HEALTHY RESONANCE — ANÁLISIS DE RESONANCIA
   servicio.healthyresonance.net · service.healthyresonance.net
   · landing-resonancia-saludable-de.vercel.app
   MAPEO local: selectores reales de este sitio → vidrio claro.
   Se carga DESPUÉS de tokens.css, styles.css y glass.css.
   glass.css es canónico e intocable: todo lo específico del
   sitio vive acá. Archivo ÚNICO para las tres landings (ES/EN/DE,
   md5 idéntico): si una hermana necesita un selector propio se
   agrega acá y vale para las tres.

   Un solo tema desde el 4/9/2026: nada va scopeado. styles.css
   sigue siendo dark-first (crema sobre verde bosque) y NO se
   reescribe: esta capa invierte la polaridad re-apuntando tokens
   en :root (§0) y corrige por selector lo que estaba hardcodeado.

   Jerarquía de capítulos:
   · OSCUROS: hero (conserva su propio fondo), manifiesto, sección
     CTA (Calendly) y footer — vidrio oscuro, tinta crema, dorado
     chico #EBC470. El footer queda oscuro porque el lockup de
     Healthy Resonance es crema: sobre sage desaparece.
   · FIJOS: marquee, navbar, hamburguesa, drawer — sólidos,
     oscuros, sin backdrop-filter (§6 del Sistema de Marca).
   · TODO LO DEMÁS: claro. Secciones transparentes sobre el
     paisaje; cards → lámina; UNA sola lámina brillante por
     página: el paso 3 del proceso, el que cierra la venta.
   ============================================================ */

/* ---- 0 · RE-TINTA DE TOKENS --------------------------------
   tokens.css es dark-first. Sobre claro la tinta es ink/moss y
   el dorado de texto chico es #755215 (§2 Sistema de Marca).
   --text-muted (#8FA88A) no pasa AA sobre el paisaje: va a moss.
   --accent (#DDAA3C) NO se toca: es fondo de botones, puntos y
   subrayados; sus usos como texto se corrigen en §7.
   Medido sobre el paisaje renderizado (peor píxel #C6CEBD):
   ink 8.1:1 · moss 4.65:1 · #755215 4.36:1 (4.5+ dentro de una
   lámina) · #9A7020 2.75:1 (por eso acá no hay dorado display). */
:root {
  --background: transparent;
  --background-warm: transparent;
  --text-primary: var(--g-ink);
  --text-secondary: var(--g-ink-soft);
  --text-muted: var(--g-ink-soft);
  --accent-readable: var(--g-gold-ink);
  --electric: var(--g-gold-ink);
  --border-on-dark: rgba(45, 74, 62, 0.18);
}

/* Los capítulos oscuros y las barras fijas recuperan los tokens
   del nocturno: adentro de ellos todo var(--text-primary),
   var(--accent-readable), var(--electric)… vuelve a resolver en
   crema / dorado claro sin reescribir cada regla de styles.css.
   (.typewriter-feed es un pozo oscuro dentro de una lámina clara
   y main.js le pinta las líneas con var(--electric).)          */
.hero,
.navbar,
.nav-toggle,
.nav-drawer,
.marquee-bar,
.manifiesto,
.cta-section,
.footer,
.typewriter-feed {
  --text-primary: var(--g-crema);
  --text-secondary: var(--g-crema-soft);
  --text-muted: var(--g-crema-soft);
  --accent-readable: var(--g-gold-readable);
  --electric: #e4b858;
  --border-on-dark: rgba(232, 228, 216, 0.12);
}

/* ---- 1 · EL PAISAJE MANDA ----------------------------------
   Trampa #1 del vidrio: body::before vive en z-index:-1, así que
   cualquier fondo opaco en body lo tapa. styles.css pinta body
   con var(--background) y el <style> inline del head con #1f3528
   (hoy carga antes que esta hoja; el !important es la red por si
   alguien lo mueve).                                          */
body {
  background: transparent !important;
}

/* Ninguna sección clara lleva fondo propio: el body::before de
   glass.css es el único fondo del documento. */
.split,
.features,
.checklist,
.proceso,
.testimonials,
.practicante,
.disclaimer,
.disclaimer--prominent {
  background: transparent !important;
}

/* ---- 2 · FIJOS: SÓLIDOS, OSCUROS, SIN BLUR -----------------
   Regla §6: nada de backdrop-filter en position:fixed. La
   hermana DE todavía trae blur en .nav-toggle y .nav-drawer en
   su styles.css: se anula acá para las tres. Cantos y brillos
   en crema con alpha (styles.css los tenía en rgba(255,255,255)). */
.navbar,
.navbar.scrolled,
.nav-toggle,
.nav-drawer,
.marquee-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar,
.navbar.scrolled {
  background: rgba(31, 53, 40, 0.97);
  border: 1px solid var(--g-edge-dark);
  box-shadow:
    0 1px 0 rgba(232, 228, 216, 0.18) inset,
    0 -1px 0 rgba(8, 16, 11, 0.55) inset,
    0 18px 44px -20px rgba(19, 31, 24, 0.6);
}
.navbar.scrolled {
  background: rgba(31, 53, 40, 0.985);
}
.nav-toggle {
  background: rgba(31, 53, 40, 0.97);
  border-color: var(--g-edge-dark);
}
.nav-drawer {
  background: rgba(31, 53, 40, 0.985);
  border-bottom-color: var(--g-edge-dark);
}
.marquee-bar {
  background: rgba(31, 53, 40, 0.97);
}
.marquee-bar::before {
  background: linear-gradient(90deg, rgba(31, 53, 40, 0.97), transparent);
}
.marquee-bar::after {
  background: linear-gradient(-90deg, rgba(31, 53, 40, 0.97), transparent);
}

/* ---- 3 · HERO: CAPÍTULO OSCURO CON SU PROPIO FONDO ---------
   Conserva .hero__bg-media y el velo de .hero__bg::after tal
   cual: la tinta ya era crema. Solo se alinean los brillos de la
   píldora de confianza y del botón secundario a la crema de
   marca (#E8E4D8 con alpha; nunca #FFF ni el crema viejo).    */
.hero__trust {
  background: rgba(232, 228, 216, 0.08);
  border-color: var(--g-edge-dark);
}
.hero__trust-item {
  color: var(--g-crema-soft);
}
.hero__trust-divider {
  background: rgba(232, 228, 216, 0.28);
}
.hero .btn--secondary {
  background: rgba(232, 228, 216, 0.1);
  border-color: rgba(232, 228, 216, 0.32);
  color: var(--g-crema);
}
.hero .btn--secondary:hover {
  background: rgba(232, 228, 216, 0.2);
  border-color: rgba(232, 228, 216, 0.8);
  color: var(--g-crema);
}

/* ---- 4 · LÁMINAS -------------------------------------------
   Toda superficie que era una card opaca pasa a vidrio claro.
   Ninguna es fija ni scrollea (salvo el checklist mobile de ES,
   que cae al sólido más abajo). Los datos duros del practicante
   (precio, dónde) van en lámina para que sus labels dorados no
   queden sueltos sobre el paisaje.                            */
.feature-card,
.proceso__card,
.checklist__item,
.disclaimer__inner,
.practicante__datos {
  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;
}

/* Geometría del MOVIMIENTO: radios generosos. */
.feature-card,
.proceso__card {
  border-radius: var(--g-radius);
}
.checklist__item,
.disclaimer__inner,
.practicante__datos {
  border-radius: var(--g-radius-sm);
}
.practicante__datos {
  padding: var(--space-2) var(--space-3);
}

/* Canto especular: la luz entra arriba a la izquierda.
   .feature-card::before es el spotlight que sigue al cursor — no
   se toca; se usa su ::after (era el aro interno blanco). */
.feature-card::after,
.proceso__card::after,
.disclaimer__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow: none;
  background: linear-gradient(158deg, rgba(232, 228, 216, 0.48), transparent 34%);
}
.feature-card > *,
.proceso__card > *,
.disclaimer__inner > * {
  position: relative;
  z-index: 1;
}

.feature-card:hover,
.proceso__card:hover {
  border-color: rgba(221, 170, 60, 0.55);
  box-shadow:
    var(--g-lift),
    0 18px 40px -18px rgba(221, 170, 60, 0.35);
}

/* Cáscara doble-bisel de las features: halo crema, no caja. */
.feature-card-shell {
  background: rgba(232, 228, 216, 0.14);
  border: 1px solid rgba(232, 228, 216, 0.42);
  border-radius: calc(var(--g-radius) + 6px);
}
.feature-card-shell > .feature-card {
  border-radius: calc(var(--g-radius) - 4px);
}

/* Marco de la máquina (styles.css le pedía un --radius que no
   existe en tokens.css). */
.machine-media {
  background: rgba(232, 228, 216, 0.24);
  border: 1px dashed rgba(45, 74, 62, 0.3);
  border-radius: var(--g-radius-sm);
}

/* Chips del shuffler: crema con alpha dentro de la lámina. */
.shuffler-item {
  background: rgba(232, 228, 216, 0.72);
  border-color: var(--g-edge);
}
.shuffler-item.active {
  background: rgba(240, 237, 224, 0.96);
}
.shuffler-wrap {
  border-top-color: rgba(45, 74, 62, 0.16);
}

/* Puntos de los labels: siguen dorados (son gráfico, no texto;
   --electric ahora resuelve en dorado-tinta). */
.feature-card__label::before,
.feature-card__label--blue::before,
.shuffler-meta__label::before {
  background: var(--g-gold);
  box-shadow: 0 0 6px rgba(221, 170, 60, 0.6);
}

/* Feed typewriter: pozo oscuro dentro de la lámina. */
.typewriter-feed {
  background: rgba(19, 31, 24, 0.92);
  border-color: rgba(221, 170, 60, 0.32);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-lift-dark);
}

/* La lámina destacada — una sola por página: el paso 3 del
   proceso. Era una card verde con tinta crema: pasa a brillante
   con tinta ink/moss y dorado-tinta. */
.proceso__card:nth-child(3) {
  background: var(--g-fill-bright);
  border-color: var(--g-edge-bright);
  color: var(--g-ink);
}
.proceso__card:nth-child(3) h3 {
  color: var(--g-ink);
}
.proceso__card:nth-child(3) p {
  color: var(--g-ink-soft);
}
.proceso__card:nth-child(3) .proceso__num {
  color: var(--g-gold-ink);
  text-shadow: 0 0 16px rgba(221, 170, 60, 0.45);
}
.proceso__card:nth-child(3) .proceso__timing {
  color: var(--g-gold-ink);
  background: rgba(221, 170, 60, 0.16);
  border-color: rgba(122, 98, 52, 0.32);
}

/* Chips de timing: el tinte dorado baja de .14/.18 a .10/.12 — medido,
   el dorado-tinta sobre el tinte viejo quedaba en 4.7:1 típico y 3.8
   contra el borde del chip; con menos tinte el texto gana margen. */
.proceso__timing {
  background: rgba(221, 170, 60, 0.1);
}
.proceso__card:nth-child(3) .proceso__timing {
  background: rgba(221, 170, 60, 0.12);
}

/* El disclaimer es un aviso: canto dorado, no crema. */
.disclaimer__inner {
  border-color: rgba(221, 170, 60, 0.38);
}

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

/* ---- 5 · TESTIMONIOS: EL CARRUSEL ES UN SCROLLER ------------
   Slides sin backdrop-filter (§6): fallback sólido con canto.
   Las máscaras degradan contra el sage del paisaje, no contra
   el verde medio que ya no existe.                            */
.testimonial-slide {
  background: var(--g-solid);
  border: 1px solid var(--g-edge);
  border-radius: var(--g-radius);
  box-shadow: 0 24px 50px -24px rgba(19, 31, 24, 0.45);
}
.testimonial-carousel-wrap::before {
  background: linear-gradient(90deg, rgba(229, 235, 217, 0.92), transparent);
}
.testimonial-carousel-wrap::after {
  background: linear-gradient(-90deg, rgba(229, 235, 217, 0.92), transparent);
}
.testimonials .eyebrow {
  color: var(--g-gold-ink);
}

/* ---- 6 · CAPÍTULOS OSCUROS: VIDRIO OSCURO -------------------
   Manifiesto, CTA y footer eran verde noche opaco con grano.
   Pasan a vidrio oscuro que deja pasar el paisaje, sin blur
   (una sección a todo lo ancho con blur es cara en el scroll).
   El grano se queda, más tenue. Crema ≥ 75% (la crema al 55-60%
   de styles.css no llega a AA sobre el foco dorado más cálido). */
.manifiesto,
.cta-section,
.footer {
  background: var(--g-fill-dark);
  color: var(--g-crema);
  box-shadow: var(--g-lift-dark);
}
.manifiesto__bg {
  opacity: 0.035;
}
.cta-section::before {
  opacity: 0.03;
}
.manifiesto__contrast,
.cta-section p,
.cta-section__mobile p {
  color: var(--g-crema-soft);
}
.cta-section .eyebrow {
  color: var(--g-gold-readable);
}

/* Calendly vive en un iframe blanco de terceros: lámina de
   contención sin blur (el widget scrollea adentro). */
.cta-section__calendly {
  background: var(--g-solid-bright);
  border: 1px solid var(--g-edge-bright);
  border-radius: var(--g-radius);
  box-shadow: 0 30px 70px -24px rgba(19, 31, 24, 0.65);
}

.footer__brand p,
.footer__links a,
.footer__status,
.footer__bottom,
.footer__legal a,
.footer__lang {
  color: var(--g-crema-soft);
}
.footer__bottom {
  border-top-color: rgba(232, 228, 216, 0.14);
}
.footer a:hover,
.footer__lang:hover {
  color: var(--g-gold-readable);
}

/* ---- 7 · TINTA SOBRE CLARO ---------------------------------
   El dorado #DDAA3C como texto sobre claro no pasa AA: todo
   dorado de texto chico es #755215. Divisorias al verde con
   alpha. Brillos de botón en crema, nunca #FFF.               */
.eyebrow {
  color: var(--g-gold-ink);
}
a:hover {
  color: var(--g-gold-ink);
}
.btn--ghost {
  color: var(--g-gold-ink);
}
.split__bullets li {
  border-bottom-color: rgba(45, 74, 62, 0.18);
}
.split__bullets li::before {
  color: var(--g-gold-ink);
}

.btn--secondary {
  color: var(--g-ink);
  border-color: rgba(45, 74, 62, 0.35);
}
.btn--secondary:hover {
  background: rgba(232, 228, 216, 0.5);
  border-color: var(--g-gold);
  color: var(--g-gold-ink);
}

/* «Reservar mi sesión»: la píldora deja de ser plana — brillo
   arriba, sombra propia abajo (mismos valores que .g-cta).
   Geometría intacta: radius full, borde de 2px, min-height.
   El breathe del hero y del CTA es dueño del box-shadow ahí:
   la sombra de abajo vale para el navbar, el drawer y los
   CTAs de sección. */
.btn--primary {
  background: linear-gradient(150deg, rgba(221, 170, 60, 0.98), rgba(221, 170, 60, 0.8));
  color: var(--g-forest);
  border-color: rgba(232, 228, 216, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 240, 205, 0.85) inset,
    0 -2px 6px rgba(122, 86, 16, 0.22) inset,
    0 12px 26px -12px rgba(221, 170, 60, 0.75);
}
.btn--primary:hover {
  background: linear-gradient(150deg, rgba(228, 184, 88, 1), rgba(221, 170, 60, 0.92));
  color: var(--g-forest);
  box-shadow:
    0 1px 0 rgba(255, 240, 205, 0.9) inset,
    0 -2px 6px rgba(122, 86, 16, 0.22) inset,
    0 18px 36px -12px rgba(221, 170, 60, 0.85);
}
.btn::before {
  background: linear-gradient(90deg, transparent, rgba(232, 228, 216, 0.22), transparent);
}
.btn .ripple {
  background: rgba(232, 228, 216, 0.3);
}

/* Fotos: sombra profunda sobre el paisaje, no el gris lavado. */
.split__media img,
.checklist__media img {
  box-shadow: 0 24px 50px -24px rgba(19, 31, 24, 0.45);
}
.practicante__media img {
  box-shadow: 0 24px 50px -24px rgba(19, 31, 24, 0.55);
}

/* ---- 8 · RED DE SEGURIDAD ----------------------------------
   Sin backdrop-filter la página sigue siendo buena, solo menos
   profunda. Nunca es un requisito.                            */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .feature-card,
  .proceso__card,
  .checklist__item,
  .disclaimer__inner,
  .practicante__datos {
    background: var(--g-solid);
  }
  .proceso__card:nth-child(3) {
    background: var(--g-solid-bright);
  }
}