/* ============================================================
   LIBERACIÓN SOMÁTICA DEL ALMA — MAPA LOCAL → VIDRIO CLARO
   Se carga DESPUÉS de tokens.css, styles.css y glass.css.
   glass.css es canónico e intocable: acá se traducen sus
   utilidades a los selectores REALES de esta propiedad.

   Un solo tema desde el 4/9/2026: nada va scopeado. Esta landing
   NACIÓ nocturna (styles.css pinta verde noche/bosque y escribe
   en crema), así que este mapa hace lo contrario que el del hub:
   invierte la polaridad. La conversión vive en dos gestos:

   §0  Re-tinta de tokens en :root (crema → ink, fondos → nada).
       tokens.css y styles.css quedan intactos: el texto cambia
       de color porque cambian los tokens que lo pintan.
   §1  Los CAPÍTULOS OSCUROS devuelven los tokens originales en
       su propio scope: adentro de .hero, #sesion y .cta-final
       + .footer todo lo que styles.css escribió en crema sigue
       siendo válido, sin reescribir un selector.

   Jerarquía de capítulos (de arriba a abajo):
     hero ........... OSCURO (halo + video; la puerta de entrada)
     es para vos .... claro · 2 láminas
     qué es ......... claro
     testimonio ..... claro
     cómo ........... claro · callout lámina
     sesión ......... OSCURO — el ritual Llegada/Liberación/Integración
     beneficios ..... claro · 9 láminas
     inversión ...... claro · LÁMINA BRILLANTE (única de la página)
     disclaimer ..... claro · callout lámina
     reserva ........ claro · formulario en lámina
     santiago ....... claro · foto enmarcada
     faq ............ claro
     cierre+footer .. OSCURO — el cierre y el pie con el lockup

   Voz yo, ritual con nombres propios, copy y precio: intactos.
   ============================================================ */

/* ---- 0 · RE-TINTA DE TOKENS -------------------------------
   Sobre el paisaje el foco dorado más cálido deja el fondo en
   ≈#E2D19A y el halo verde en ≈#C0CBB9 (medido sobre captura).
   ink 1F3528 ≥ 7.8:1 · moss 3D5B47 ≥ 4.5:1 · muted 465548 ≥ 4.7:1.
   Verdes más claros que moss no pasan fuera de una lámina, por
   eso --text-muted no puede ser el salvia #8FA88A de tokens.css:
   pasa a un verde-gris apenas más oscuro que moss, que lee como
   secundario por saturación, no por luz.                       */
:root {
  --text-primary: #1F3528;
  --text-secondary: #3D5B47;
  --text-muted: #465548;
  --accent-readable: #755215; /* dorado chico sobre claro */
  --accent-hover: #755215;    /* hover de links sobre claro (el #E4B858 no pasa) */
  --gold-sand: #9A7020;       /* dorado display (Cormorant ≥ 24px) sobre claro */
  --border-on-dark: rgba(45, 74, 62, 0.18);
  /* tokens propios del mapa: se redefinen en los capítulos oscuros */
  --g-focus: #755215;
  --g-underline: rgba(117, 82, 21, 0.45);
  --g-underline-muted: rgba(70, 85, 72, 0.45);
  --g-hairline: rgba(45, 74, 62, 0.14);
}

/* ---- 1 · CAPÍTULOS OSCUROS Y CHROME FIJO -------------------
   Devuelven los tokens de tokens.css: adentro, styles.css vale
   tal cual (crema, dorado legible #EBC470, drama #D4B896).
   El chrome fijo (navbar, drawer, hamburguesa, marquee) sigue
   oscuro y SÓLIDO: es lo que flota sobre el paisaje.          */
.hero,
#sesion,
.cta-final,
.footer,
.navbar,
.nav-drawer,
.nav-toggle,
.marquee-bar {
  --text-primary: #E8E4D8;
  --text-secondary: #D8D4C6;
  --text-muted: #B6C9B1;
  --accent-readable: #EBC470;
  --accent-hover: #E4B858;
  --gold-sand: #D4B896;
  --border-on-dark: rgba(232, 228, 216, 0.12);
  --g-focus: #EBC470;
  --g-underline: rgba(220, 188, 133, 0.5);
  --g-underline-muted: rgba(182, 201, 177, 0.5);
  --g-hairline: rgba(232, 228, 216, 0.1);
  color: var(--text-primary);
}

/* ---- 2 · EL PAISAJE MANDA ----------------------------------
   body transparente SIEMPRE (trampa #1 de glass.css: body::before
   vive en z-index:-1 y cualquier fondo opaco en body lo tapa).
   El <style> inline del head y styles.css pintan body y .hero
   en verde noche; el room-light shift de gsap-animations.js
   (que tweeneaba body.backgroundColor) se retiró en el JS.    */
body {
  background: transparent !important;
}
.bg-deep,
.bg-forest,
.testimonio,
.inversion,
.reserva {
  background: transparent;
}

/* Vidrio oscuro (receta .g-dark de glass.css): verde al 86–93%
   que deja pasar el paisaje, sin backdrop-filter. */
.hero,
#sesion,
.cta-final {
  background: var(--g-fill-dark);
  box-shadow: var(--g-lift-dark);
}
/* El pie continúa el cierre; su hairline superior explica el corte. */
.footer {
  background: rgba(19, 31, 24, 0.94);
  border-top-color: rgba(232, 228, 216, 0.1);
}
/* El halo del hero convive con los focos que pasan por el vidrio. */
.hero__halo {
  opacity: 0.8;
}

/* Grano: solo en capítulo oscuro (§5.9). Sobre claro dejaba un
   rectángulo sucio: se apaga. En el cierre se desvanece en los
   extremos para no marcar el canto. */
.testimonio.grain::before,
.reserva.grain::before {
  display: none;
}
.cta-final.grain::before {
  opacity: 0.04;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---- 3 · LAS LÁMINAS ---------------------------------------
   Toda superficie que era una card opaca o un velo crema al 3%
   pasa a vidrio. Receta idéntica a .g-pane (glass.css intacto). */
.criteria-card,
.bene-card,
.callout,
.form-card,
.price-card {
  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);
  box-shadow: var(--g-lift);
  position: relative;
  overflow: hidden;
}
/* Canto especular: la luz entra arriba a la izquierda */
.criteria-card::after,
.bene-card::after,
.callout::after,
.form-card::after,
.price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(232, 228, 216, 0.48), transparent 34%);
}
.criteria-card > *,
.bene-card > *,
.callout > *,
.form-card > *,
.price-card > * {
  position: relative;
  z-index: 1;
}

/* La lámina destacada — una sola por página: el precio. */
.price-card {
  background: var(--g-fill-bright);
  border-color: var(--g-edge-bright);
  border-radius: calc(var(--g-radius) + 8px);
}
.price-card::after {
  background: linear-gradient(158deg, rgba(232, 228, 216, 0.5), transparent 34%);
}

/* «Sí, es para vos» conserva su tinte dorado dentro del vidrio */
.criteria-card--si {
  border-color: rgba(221, 170, 60, 0.42);
}
.criteria-card--si::after {
  background:
    linear-gradient(158deg, rgba(232, 228, 216, 0.48), transparent 34%),
    linear-gradient(152deg, rgba(221, 170, 60, 0.08), transparent 60%);
}

/* Callout (§5.7): sigue dorado, ahora sobre vidrio */
.callout {
  border-color: rgba(221, 170, 60, 0.36);
}
.callout__icon,
.callout__title {
  color: var(--accent-readable);
}

/* Hover de las cards de beneficios: el canto se dora */
@media (hover: hover) {
  .bene-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);
  }
}

/* ---- 3b · REGLA §6 EN LOS CARRUSELES -----------------------
   .bene__grid es un scroller horizontal en mobile: backdrop-
   filter adentro repinta por frame. Ahí las láminas van sólidas.
   (.pasos__grid también scrollea, pero vive en el capítulo
   oscuro y sus cards no llevan blur.)                          */
@media (max-width: 639px) {
  .bene-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--g-solid);
  }
  /* Fades del carrusel: eran del verde de sección, ahora sage */
  .bene-wrap::before {
    background: linear-gradient(90deg, rgba(229, 235, 217, 0.85), transparent);
  }
  .bene-wrap::after {
    background: linear-gradient(-90deg, rgba(229, 235, 217, 0.85), transparent);
  }
}

/* Fallback sin backdrop-filter — la página se ve igual de buena */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .criteria-card,
  .bene-card,
  .callout,
  .form-card {
    background: var(--g-solid);
  }
  .price-card {
    background: var(--g-solid-bright);
  }
}

/* ---- 4 · EL RITUAL — capítulo oscuro ----------------------
   Llegada / Liberación / Integración sobre vidrio oscuro. Las
   tres cards son vidrio dentro del vidrio: crema al 6%, canto
   crema al 22%, sin blur (el capítulo ya no lo lleva y en
   mobile el grid scrollea).                                    */
.pasos__card {
  background: rgba(232, 228, 216, 0.06);
  border: 1px solid var(--g-edge-dark);
  border-radius: var(--g-radius);
  box-shadow: var(--g-lift-dark);
  position: relative;
  overflow: hidden;
}
.pasos__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(232, 228, 216, 0.1), transparent 34%);
}
.pasos__card > * {
  position: relative;
  z-index: 1;
}
@media (hover: hover) {
  .pasos__card:hover {
    border-color: rgba(221, 170, 60, 0.38);
    box-shadow:
      var(--g-lift-dark),
      0 18px 40px -18px rgba(5, 12, 8, 0.7);
  }
}
/* El hilo dorado que une los tres pasos: un pelo más de luz sobre vidrio */
.ritual-line {
  background: linear-gradient(90deg, var(--g-gold-readable), rgba(221, 170, 60, 0.22));
}
.pasos__timing {
  background: rgba(221, 170, 60, 0.16);
  border-color: rgba(221, 170, 60, 0.36);
}
/* El callout del ritual no lleva blur: es un tinte sobre el oscuro */
#sesion .callout {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(221, 170, 60, 0.08);
  border-color: rgba(221, 170, 60, 0.3);
  box-shadow: var(--g-lift-dark);
}
#sesion .callout::after {
  background: linear-gradient(158deg, rgba(232, 228, 216, 0.1), transparent 34%);
}

/* ---- 5 · TINTA SOBRE CLARO ---------------------------------
   Lo que styles.css pintaba con --accent (#DDAA3C) como TEXTO
   no pasa AA sobre claro. Chico → --accent-readable (#755215 en
   claro, #EBC470 en oscuro); display Cormorant → --gold-sand
   (#9A7020 en claro, #D4B896 en oscuro). Los tokens ya resuelven
   por capítulo: acá solo se cambia QUÉ token usa cada selector. */
.eyebrow,
.criteria-card--si li::before,
.pasos-reserva li span,
.faq__list summary::after {
  color: var(--accent-readable);
}
.testimonio__quote::before,
.testimonio__quote::after {
  color: var(--gold-sand);
}
/* El precio: display grande sobre la lámina brillante */
.price-card__price {
  color: var(--g-gold-display);
}
/* .pasos__num vive en el capítulo oscuro: el #DDAA3C se queda. */

/* Links de texto */
.text-link {
  text-decoration-color: var(--g-underline);
}
.text-link:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}
.wa-consulta .text-link {
  text-decoration-color: var(--g-underline-muted);
}
.wa-consulta .text-link:hover,
.calendly-back:hover,
.faq__list summary:hover,
.footer__links a:hover,
.footer__lang:hover {
  color: var(--accent-hover);
}

/* Separadores internos: verde con alpha sobre claro, crema en oscuro */
.criteria-card li,
.pasos-reserva li,
.faq__list details {
  border-bottom-color: var(--g-hairline);
}
.faq__list details {
  border-bottom-color: rgba(45, 74, 62, 0.18);
}

/* Estado de la verificación de pago: styles.css lo escribía con
   var(--crema) —token inexistente— y caía a crema fija. */
.pay-status {
  color: var(--text-secondary);
  opacity: 1;
}

/* Foco: el anillo dorado plano no se ve sobre el paisaje */
:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
.radio-pill input:focus-visible + span {
  outline-color: var(--g-focus);
}
:focus-visible {
  box-shadow: 0 0 0 4px rgba(221, 170, 60, 0.28);
}

/* Skip link: fondo arena fijo (no depende del token de display) */
.skip-link {
  background: #d4b896;
  color: #1f3528;
}

/* ---- 6 · BRILLOS EN CREMA, NUNCA #FFF ---------------------- */
.btn::before {
  background: linear-gradient(90deg, transparent, rgba(232, 228, 216, 0.16), transparent);
}
.btn .ripple {
  background: rgba(232, 228, 216, 0.28);
}

/* ---- 7 · CTA — la píldora más brillante de la pantalla ------
   Receta .g-cta. Donde hay btn-breathe (hero, reserva, cierre)
   el keyframe es dueño del box-shadow y pisa el de acá.       */
.btn--primary {
  background: linear-gradient(150deg, rgba(221, 170, 60, 0.98), rgba(221, 170, 60, 0.8));
  color: var(--g-forest);
  border: 1px solid rgba(232, 228, 216, 0.6);
  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 34px -12px rgba(221, 170, 60, 0.85);
}
.btn--ghost {
  background: rgba(31, 53, 40, 0.06);
  border-color: rgba(45, 74, 62, 0.35);
}
.btn--ghost:hover {
  background: rgba(31, 53, 40, 0.1);
  border-color: var(--accent);
}

/* ---- 8 · CHROME FIJO: SÓLIDO, SIN BLUR (regla §6) ---------- */
.navbar,
.nav-drawer,
.nav-toggle,
.marquee-bar,
.whatsapp-float {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar {
  background: rgba(31, 53, 40, 0.97) !important;
  border-color: rgba(232, 228, 216, 0.14);
  box-shadow:
    0 10px 40px -12px rgba(5, 12, 8, 0.5),
    inset 0 1px 0 rgba(232, 228, 216, 0.08);
}
.nav-drawer {
  background: rgba(19, 31, 24, 0.985);
}
.nav-toggle {
  background: rgba(19, 31, 24, 0.96);
}
.marquee-bar {
  background: rgba(19, 31, 24, 0.96);
}
.whatsapp-float {
  box-shadow:
    0 8px 24px -6px rgba(37, 211, 102, 0.45),
    0 2px 8px rgba(19, 31, 24, 0.18);
}

/* ---- 9 · FORMULARIO: campos legibles sobre claro ------------
   Fondo crema, borde verde, texto ink, foco dorado. Geometría
   del movimiento: inputs píldora, textarea radius 18.          */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  background: #f0ede0;
  border-color: rgba(45, 74, 62, 0.3);
  color: var(--text-primary);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  border-radius: var(--radius-pill);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.field textarea {
  border-radius: var(--g-radius-sm);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--g-gold-display);
  box-shadow: 0 0 0 3px rgba(221, 170, 60, 0.24);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #56705f; /* 4.6:1 sobre el campo */
}
.radio-pill span {
  background: #f0ede0;
  border-color: rgba(45, 74, 62, 0.3);
}
.radio-pill input:checked + span {
  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.6);
}
.calendly-embed {
  border: 1px solid var(--g-edge);
  box-shadow: 0 24px 60px -16px rgba(19, 31, 24, 0.35);
}

/* ---- 10 · MEDIA ---------------------------------------------
   La foto de Santiago vive sobre el paisaje: marco de vidrio,
   sin canto especular (taparía la cara). El photo-melt fundía
   la foto en el verde de sección; sobre claro queda una viñeta
   suave que le da peso sin apagarla.                           */
.santiago__media {
  border-radius: var(--g-radius);
  border: 1px solid var(--g-edge);
  box-shadow: 0 18px 48px -18px rgba(31, 53, 40, 0.45);
}
.santiago__media::after {
  background: linear-gradient(
    180deg,
    rgba(19, 31, 24, 0.12) 0%,
    transparent 22%,
    transparent 62%,
    rgba(19, 31, 24, 0.42) 100%
  );
}
/* El video vive en el hero (oscuro): sombras al verde noche, nunca negro */
.video-facade {
  border-color: var(--g-edge-dark);
  box-shadow: 0 12px 40px -12px rgba(5, 12, 8, 0.6);
}
.video-facade:hover {
  box-shadow: 0 18px 48px -12px rgba(5, 12, 8, 0.7);
}
.video-facade__play {
  box-shadow: 0 8px 30px -6px rgba(5, 12, 8, 0.6);
}

/* ---- 11 · EL PIE ---------------------------------------------
   Cremas al 55–60% caían por debajo de AA sobre el vidrio
   oscuro: suben a .80–.82 (≥ 8:1 sobre el 94% de noche).     */
.footer__brand p,
.footer__legal-block,
.footer__copy {
  color: rgba(232, 228, 216, 0.8);
}
.footer__legal-block {
  border-top-color: rgba(232, 228, 216, 0.1);
}
.footer__legal-block strong {
  color: rgba(232, 228, 216, 0.95);
}
.footer__links a,
.footer__lang {
  color: rgba(232, 228, 216, 0.82);
}