/* Estilos compartidos de Yulök: paleta de bosque, tipografía argentina, barra y pie. */

  /* Una sola paleta: verdes de bosque y musgo, sin blancos */
  :root {
    color-scheme: dark;
    --suelo: #161d12; --tierra: #1d2618; --piedra: #26311f; --borde: #34422b;
    --texto: #e3e8d6; --suave: #a8b397; --tenue: #7f8a70;
    --liquen: #b9ca8c; --musgo: #7f9a4a; --helecho: #9fb56a;
    --titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --cuerpo: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--suelo); color: var(--texto); font: 19px/1.6 var(--cuerpo); }
  a { color: var(--liquen); }
  :focus-visible { outline: 3px solid var(--liquen); outline-offset: 3px; border-radius: 6px; }
  [hidden] { display: none !important; }
  .ancho { max-width: 1120px; margin: 0 auto; padding-inline: 22px; }
  h1, h2, h3 { font-family: var(--titulo); font-stretch: 112%; text-wrap: balance; margin: 0; }

  /* Barra */
  .barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--suelo) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
  .barra .ancho { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 14px; }
  .inicio { color: var(--texto); display: inline-flex; }
  .logotipo { height: 36px; width: auto; display: block; }
  .menu { display: flex; align-items: center; gap: 26px; font-size: 17px; }
  .menu a { color: var(--suave); text-decoration: none; }
  .menu a:hover { color: var(--texto); }
  .boton { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 24px; font: 700 17px var(--cuerpo); background: var(--liquen); color: #1a2213; text-decoration: none; cursor: pointer; }
  .menu .boton { color: #1a2213; padding: 9px 18px; font-size: 16px; }
  @media (max-width: 760px) { .menu a:not(.boton) { display: none; } }

  /* Pie */
  footer { border-top: 1px solid var(--borde); padding-block: 48px 64px; color: var(--tenue); font-size: 16px; }
  footer .ancho { display: grid; gap: 8px; }
  footer .logotipo { height: 30px; color: var(--suave); margin-bottom: 8px; }
  footer b { color: var(--suave); }