/* ============================================================
   HEALTHY RESONANCE — VIDRIO CLARO
   Capa aditiva. Se carga DESPUÉS de tokens.css y styles.css
   (y después de cualquier <style> inline, o el inline gana).
   Fuente de verdad: Vault Obsidian/NV/Marca/Direcciones alternativas §2
   + Sistema de Marca §3.1 (as-built 2026-09-04).

   Desde el 4/9/2026 el movimiento tiene UN solo tema: el claro
   de vidrio. No hay [data-theme], no hay switcher, no hay gate.
   Esta capa aplica siempre. El nocturno se retiró.

   Canónico — idéntico byte a byte en las 6 propiedades (md5).
   No se edita por propiedad: lo local vive en glass-map.css.
   ============================================================ */

:root {
  /* fondo */
  --g-sage: #E5EBD9;
  --g-forest: #1F3528;
  --g-night: #131F18;
  --g-moss: #3D5B47;

  /* tinta sobre vidrio claro */
  --g-ink: #1F3528;          /* texto principal sobre claro */
  --g-ink-soft: #3D5B47;     /* texto secundario sobre claro (4.7:1 sobre el foco más cálido) */
  --g-gold: #DDAA3C;         /* acentos, barras, fondos */
  --g-gold-ink: #755215;     /* ÚNICO dorado para texto chico sobre claro */
  --g-gold-display: #9A7020; /* dorado display ≥18.7px sobre claro */

  /* tinta sobre el capítulo oscuro de vidrio */
  --g-crema: #E8E4D8;        /* nunca #FFF */
  --g-crema-soft: #D8D4C6;
  --g-gold-readable: #EBC470;/* dorado texto chico sobre oscuro */
  --g-gold-drama: #D4B896;   /* em de Cormorant sobre oscuro */

  /* la lámina: los brillos son crema, nunca blanco puro */
  --g-fill: linear-gradient(150deg, rgba(232,228,216,.58), rgba(232,228,216,.26) 46%, rgba(221,170,60,.10));
  --g-fill-bright: linear-gradient(150deg, rgba(232,228,216,.76), rgba(232,228,216,.44) 46%, rgba(221,170,60,.16));
  --g-fill-dark: linear-gradient(150deg, rgba(31,53,40,.86), rgba(19,31,24,.93));
  --g-blur: blur(26px) saturate(155%);
  --g-edge: rgba(232,228,216,.62);
  --g-edge-bright: rgba(232,228,216,.82);
  --g-edge-dark: rgba(232,228,216,.22);
  --g-lift:
    0 1px 0 rgba(232,228,216,.75) inset,
    0 -1px 0 rgba(45,74,62,.10) inset,
    0 18px 40px -18px rgba(19,31,24,.42),
    0 2px 8px -4px rgba(19,31,24,.24);
  --g-lift-dark:
    0 1px 0 rgba(232,228,216,.20) inset,
    0 -1px 0 rgba(8,16,11,.45) inset;

  --g-radius: 30px;
  --g-radius-sm: 18px;

  /* fallback opaco donde no hay backdrop-filter */
  --g-solid: #DDE2D0;
  --g-solid-bright: #EAEDE1;
  --g-solid-dark: #1F3528;
}

/* ---- 1 · EL PAISAJE ----------------------------------------
   Sage vivo con siete focos dorados (la red de Nodos, la misma
   idea que en el nocturno) y dos halos verdes, en deriva lenta.
   Es el único fondo del documento: lo que las láminas refractan.

   ATENCIÓN — la trampa #1 de esta capa: body::before vive en
   z-index:-1 del contexto raíz, así que CUALQUIER background
   opaco en body se pinta ENCIMA y tapa el paisaje.
   Por eso el fondo lo pinta html y body va transparente.
   Si una propiedad repinta body en su styles.css (o dentro de
   un media query), hay que neutralizarlo en su glass-map.css.

   Contraste (medido sobre píxeles con shot.mjs --hide y
   contraste-paisaje.py, 4/9): las opacidades están calibradas
   para que el píxel más oscuro del paisaje deje pasar los CUATRO
   tokens de tinta del sistema sin tocar la paleta — ink 1F3528,
   moss 3D5B47 (≥4.5), dorado tinta 755215 (≥4.5) y dorado display
   9A7020 (≥3.0). Subir un foco o un halo rompe eso: medir antes.
   Verdes más claros que moss NO pasan AA sobre el paisaje: van
   dentro de una lámina o se oscurecen.                          */
html { background: #E5EBD9; }

body {
  background: transparent;
  color: var(--g-ink);
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(24% 28% at 14% 18%, rgba(221,170,60,.28), transparent 66%),
    radial-gradient(20% 24% at 42% 8%,  rgba(221,170,60,.18), transparent 68%),
    radial-gradient(26% 30% at 78% 26%, rgba(221,170,60,.25), transparent 66%),
    radial-gradient(18% 22% at 62% 54%, rgba(221,170,60,.15), transparent 70%),
    radial-gradient(24% 28% at 24% 72%, rgba(221,170,60,.21), transparent 68%),
    radial-gradient(20% 24% at 88% 82%, rgba(221,170,60,.17), transparent 70%),
    radial-gradient(18% 22% at 50% 94%, rgba(221,170,60,.14), transparent 70%),
    radial-gradient(48% 46% at 30% 40%, rgba(61,91,71,.12), transparent 72%),
    radial-gradient(54% 50% at 80% 66%, rgba(31,53,40,.10), transparent 74%),
    #E5EBD9;
  filter: blur(18px);
  animation: g-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes g-drift {
  from { transform: translate3d(-1.2%, -.8%, 0) scale(1.04); }
  to   { transform: translate3d(1.4%, 1%, 0) scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ---- 2 · LA LÁMINA ---------------------------------------- */
.g-pane {
  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 */
.g-pane::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(232,228,216,.48), transparent 34%);
}
.g-pane > * { position: relative; z-index: 1; }

/* la lámina destacada — una por página como máximo */
.g-pane--bright {
  background: var(--g-fill-bright);
  border-color: var(--g-edge-bright);
}

/* ---- 3 · EL CAPÍTULO OSCURO ---------------------------------
   Vidrio oscuro: verde al 86–93% que deja pasar el paisaje.
   Sin backdrop-filter: el paisaje ya viene desenfocado y una
   sección a todo lo ancho con blur es cara en el scroll.
   La tinta acá es crema; el dorado chico, #EBC470.             */
.g-dark {
  background: var(--g-fill-dark);
  color: var(--g-crema);
  box-shadow: var(--g-lift-dark);
  position: relative;
}
.g-dark .g-gold-text { color: var(--g-gold-readable); }
.g-dark .g-drama { color: var(--g-gold-drama); }

/* ---- 4 · SEGURIDAD -----------------------------------------
   Sin backdrop-filter la página debe verse igual de buena,
   solo menos profunda. Nunca es un requisito.               */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g-pane { background: var(--g-solid); }
  .g-pane--bright { background: var(--g-solid-bright); }
}

/* PROHIBIDO (regla §6 del Sistema de Marca): backdrop-filter en
   elementos fijos o que scrollean. El navbar es sólido, siempre. */
.g-nav-solid {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(31,53,40,.97) !important;
}

/* ---- 5 · TINTA SOBRE CLARO ---------------------------------
   El dorado #DDAA3C como texto sobre claro no pasa AA.
   Texto chico dorado = #755215; display grande = #9A7020.    */
.g-gold-text { color: var(--g-gold-ink); }
.g-drama { color: var(--g-gold-display); }

/* ---- 6 · CTA -----------------------------------------------
   La píldora deja de ser plana: brillo arriba y sombra propia
   abajo, como una gota sobre el vidrio. Lo más brillante de la
   pantalla. Texto verde bosque.                              */
.g-cta {
  background: linear-gradient(150deg, rgba(221,170,60,.98), rgba(221,170,60,.80));
  color: var(--g-forest);
  border: 1px solid 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);
}
.g-cta:hover {
  background: linear-gradient(150deg, rgba(228,184,88,1), rgba(221,170,60,.92));
  color: var(--g-forest);
}

/* ---- 7 · SUPERFICIES QUE DEJAN DE SER OPACAS --------------- */
.g-section-clear { background: transparent !important; }