/* =========================================================
   BASE.CSS — Reset, variables y tipografía
   EcoAnalítica
   ========================================================= */

/* ---------- Variables ---------- */
:root {
  /* Paleta corporativa */
  --color-bosque:  #324640;   /* fondo principal, navegación */
  --color-tierra:  #7A6856;   /* acentos secundarios, bordes */
  --color-arena:   #D8CCBB;   /* fondos claros, texto sobre oscuro */
  --color-salvia:  #9AAE93;   /* acentos primarios, botones, highlights */
  --color-blanco:  #FFFFFF;   /* texto sobre fondos oscuros */
  --color-texto:   #1a1a1a;   /* texto sobre fondos claros */

  /* Derivados de apoyo */
  --color-arena-claro: #f9f7f4;        /* sección herramientas */
  --color-salvia-osc:  #819775;        /* hover de botones salvia */
  --color-bosque-2:    #2a3a35;        /* degradado del hero */
  --sombra-suave: 0 6px 24px rgba(50, 70, 64, .10);
  --sombra-media: 0 14px 40px rgba(50, 70, 64, .18);

  /* Tipografía */
  --fuente-titulo: 'Playfair Display', serif;
  --fuente-cuerpo: 'Inter', sans-serif;

  /* Radios */
  --radio:    16px;
  --radio-sm: 10px;

  /* Layout */
  --max-ancho: 1180px;

  /* Breakpoints (referencia; usados en media queries de cada hoja) */
  --bp-movil:   640px;
  --bp-tablet:  1024px;
  --bp-desktop: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fuente-cuerpo);
  font-display: swap;
  color: var(--color-texto);
  background: var(--color-blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

::selection { background: var(--color-salvia); color: var(--color-bosque); }

/* ---------- Tipografía base ---------- */
h1, h2, h3, h4 { font-family: var(--fuente-titulo); line-height: 1.18; font-weight: 700; }

.section-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--color-bosque);
  font-weight: 700;
}
.section-title.light  { color: var(--color-blanco); }
.section-title.center { text-align: center; }

.section-sub {
  font-size: 1.05rem;
  color: var(--color-tierra);
  max-width: 620px;
}
.section-sub.center { margin-left: auto; margin-right: auto; text-align: center; }

.lead { font-size: 1.08rem; }