/* ═══════════════════════════════════════════════════════════════
   BASE — Tokens de marca, reset y utilidades transversales
   Manual de identidad: Montserrat + paleta verde Agrodimensiones
   ═══════════════════════════════════════════════════════════════ */
:root{
  --verde-oscuro:#0C2B19;
  --verde-agricola:#4D954A;
  /* El verde de la marca, un punto más oscuro, para rótulos pequeños sobre
     claro: el de arriba da 3.1:1 sobre el gris de las secciones y 3.7:1 sobre
     blanco, por debajo del mínimo. Este da 5:1 y 6:1. En los titulares grandes
     se queda el de marca: a ese tamaño el mínimo exigido es 3:1 y lo cumple. */
  --verde-texto:#357034;
  --verde-claro:#98AF99;
  --gris-tecnico:#6D6E71;
  /* El mismo gris del manual, bastante más oscuro, y solo para leer: el
     original daba 4.28:1 sobre el gris claro de las secciones —por debajo del
     mínimo legible— y los párrafos se veían desvaídos. Este da 7.4:1 ahí y
     8.9:1 sobre blanco. El de arriba sigue intacto para trazos y gráficos. */
  --gris-texto:#4A4B4E;
  --gris-claro:#E9ECE8;
  --blanco:#FFFFFF;
  --ink:#0C2B19;
  --muted:#6D6E71;
  --line:rgba(12,43,25,.12);

  /* ═══ RELIEVE ═══
     Las curvas de nivel del mapa, una por altura y de menor a mayor. Es el
     bistre de los mapas topográficos impresos, no un color del manual: tiene
     que leerse igual sobre el gris de los departamentos que sobre el verde de
     los marcados, y el verde de la marca desaparecería sobre estos últimos.
     La escala va de tierra clara a tierra quemada: cuanto más oscura y más
     gruesa la línea, más alto el terreno.

     Se probó un color distinto por altura —violeta, azul, turquesa, ámbar,
     naranja, rojo— y el mapa quedaba chillón: seis colores compitiendo entre
     sí y con el verde de la marca. Una sola gama funciona mejor. */
  --relieve-1:#CDAE7A;
  --relieve-2:#C39758;
  --relieve-3:#B8863F;
  --relieve-4:#A06B28;
  --relieve-5:#85501A;
  --relieve-6:#6B3A0F;

  /* ═══ ESPACIADO FLUIDO ═══
     Un único margen lateral para todo el sitio, que crece con la pantalla en
     vez de saltar en un punto concreto. Así el contenido respira igual en un
     móvil de 320 px que en un monitor ancho, y nunca queda pegado al borde. */
  --margen-lateral:clamp(20px, 5vw, 72px);
  --ancho-contenido:1200px;
  --ritmo-seccion:clamp(56px, 8vw, 100px);
}
*{box-sizing:border-box;margin:0;padding:0}
/* ═══ EL TAMAÑO DE LA LETRA DE TODO EL SITIO ═══
   Esta es **la única palanca**: todos los tamaños de letra del sitio están
   en `rem`, o sea, en múltiplos de este número. Subirlo agranda el texto
   entero —titulares, párrafos, botones, menú, pie— manteniendo las
   proporciones; bajarlo lo encoge. Las cajas, los márgenes y los iconos van
   en píxeles y no se mueven.

   Y no es un número fijo, sino uno que **crece con la pantalla**: 17 px en un
   móvil estrecho, unos 19 en una tableta, 21 en un portátil y 23 en un
   monitor grande. El navegador interpola solo; no hay saltos en ningún
   ancho, porque no son puntos de ruptura sino una recta.

   Los límites no son de adorno: sin el 17 de abajo, un móvil de 320 px
   partiría los titulares en sílabas; sin el 23 de arriba, un televisor
   dejaría el texto en tamaño de cartel.

   El navegador trae 16 px de fábrica, así que el sitio va entre un 6 % y un
   44 % más grande según la pantalla. Se pidió «un centímetro más»: un
   centímetro son 38 px y el cuerpo de texto pasaría de 16 a 54, ilegible.

   Quien tenga el navegador configurado con letra grande por accesibilidad
   seguía viendo el sitio en 16 px mientras los tamaños estaban en píxeles;
   con `rem` también eso empieza a respetarse. */
html{
  font-size:clamp(17px, 0.385vw + 15.6px, 23px);
  scroll-behavior:smooth;
}
body{
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--ink);background:var(--blanco);
  /* Dos pesos por encima del normal. Montserrat en 400 se ve deslavada en
     pantalla; se probó el 500 y seguía viéndose clara, así que el cuerpo de
     texto va en 600. Los títulos y rótulos, que ya iban de 700 a 900, siguen
     por encima: la jerarquía se mantiene. */
  font-weight:600;
  line-height:1.6;overflow-x:hidden;
}
::selection{background:var(--verde-agricola);color:#fff}
img{max-width:100%;display:block}

/* ═══ FRANJAS DIAGONALES (motivo del manual) ═══ */
.franja-diagonal{
  position:absolute;
  pointer-events:none;
  z-index:1;
}


/* ═══ ENLACES ═══
   Toda la navegación son <a> reales (indexables, compartibles, clic
   central). El estilo visual lo aporta cada clase de componente. */
a{color:inherit;text-decoration:none}

/* ═══ ACCESIBILIDAD ═══ */
:focus-visible{
  outline:3px solid var(--verde-agricola);
  outline-offset:3px;
  border-radius:4px;
}

/* Destinos de foco no interactivos.
   PageManager lleva el foco al encabezado de cada vista para que un lector de
   pantalla anuncie el cambio. Ese elemento no se alcanza con el tabulador, así
   que el recuadro de foco no aporta nada y sí se ve fuera de lugar. */
[tabindex="-1"]:focus{outline:none}

/* Enlace para saltar al contenido (visible solo con teclado) */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--verde-oscuro);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 0;
  font-size:0.875rem;font-weight:700;
}
.skip-link:focus{left:0}

/* Texto solo para lectores de pantalla */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ═══ MOVIMIENTO REDUCIDO ═══
   Respeta la preferencia del sistema: sin animaciones ni scroll suave. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}