@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/* Javi Besnier Psicologia — paleta «Bosque · Teja», leida del panel de marca de
   la clienta el 2026-09-17. Contrastes en marca/PALETA.md.
   Se redefinen las variables del tema (quark2 sobre Pico) en vez de forzar
   con !important, para que el tema siga funcionando por dentro.
   Regla dura: el texto corrido NUNCA va sobre verde oliva (3,15, no cumple AA). */

:root, html[data-theme="light"], html[data-theme="dark"] {
  --jb-verde-oscuro: #34433a;
  --jb-verde-oliva:  #92946b;
  --jb-verde-claro:  #bfc28c;
  --jb-beige:        #f7f3f1;
  --jb-teja:         #a35b38;

  --q2-bg:            var(--jb-beige);
  --q2-bg-elev:       #ffffff;
  --q2-bg-muted:      #efe9e5;
  --q2-bg-inverse:    var(--jb-verde-oscuro);
  --q2-text:          var(--jb-verde-oscuro);
  --q2-text-strong:   var(--jb-verde-oscuro);
  --q2-text-muted:    #5c6b60;
  --q2-text-inverse:  #ffffff;
  --q2-accent:        var(--jb-teja);
  --q2-accent-contrast: #ffffff;
  --q2-link:          var(--jb-teja);
  --q2-divider:       var(--jb-verde-claro);
  --q2-border-strong: var(--jb-verde-oliva);
  --q2-focus-ring:    var(--jb-teja);
  --q2-nav-bg:        var(--jb-verde-oscuro);
  --q2-nav-border:    var(--jb-verde-oliva);
}

body { font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.7; }
h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.25; color: var(--jb-verde-oscuro); }
h1 { font-size: 2.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.9rem; margin-top: 2.6rem; }
h3 { font-size: 1.3rem; margin-top: 2rem; }

main p, main li { max-width: 68ch; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--jb-teja); outline-offset: 3px; }

hr { border: 0; border-top: 3px solid var(--jb-verde-oliva); margin: 3rem 0; }

blockquote { border-left: 4px solid var(--jb-verde-oliva); background: #ffffff;
  padding: 1rem 1.4rem; margin: 2rem 0; font-style: normal; }

@media (max-width: 640px) {
  h1 { font-size: 1.9rem; } h2 { font-size: 1.5rem; }
}