/* ============================================================
   CSS VARIABLES — Official IPR Brand Colors (MANUAL DE IDENTIDAD)
============================================================ */
:root {
  /* Official palette — exact Pantone/HEX values from brand manual */
  --brown:      #332720;  /* Pantone 7554 C — logo text, borders */
  --red:        #AA282D;  /* Pantone 7621 C — eagle/red bird */
  --orange:     #D2642D;  /* Pantone 7578 C — orange section */
  --green:      #288046;  /* Pantone 3435 C — quetzal */
  --purple:     #78285F;  /* Pantone 222 C  — deer/purple bird */
  --dark-olive: #3E4328;  /* Pantone 448 C  — dark olive accent */
  --crimson:    #BE1E50;  /* Pantone 1925 C — hummingbird */
  --gray:       #585858;  /* Pantone Black 7 C — condor */
  --tan:        #C7C396;  /* Pantone 4515 C — eagle head / brand neutral */
  --blue:       #0056B8;  /* Pantone 2995 C — fish/water */
  --yellow:     #E6DE56;  /* Pantone 7402 C — accent */

  /* Site usage roles */
  --color-primary:    var(--blue);
  --color-secondary:  var(--green);
  --color-cta-help:   var(--red);
  --color-cta-donate: var(--crimson);
  --color-logo-text:  var(--brown);
  --color-text:       #1A1A1A;
  --color-muted:      #555555;
  --color-bg:         #FFFFFF;
  --color-bg-section: #F7F9FC;
  --color-divider:    #DDE3EA;

  /* Typography */
  --font-heading: 'Raleway', 'Segoe UI', sans-serif;
  --font-body:    'Lato', 'Segoe UI', Arial, sans-serif;
  --font-size:    17px;
  --line-height:  1.7;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
}

img { max-width: 100%; height: auto; display: block; }
ul  { list-style: none; }
a   { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-heading); }
h1 { font-size: 2.4rem;  line-height: 1.15; font-weight: 800; }
h2 { font-size: 1.75rem; line-height: 1.25; font-weight: 700; }
h3 { font-size: 1.2rem;  line-height: 1.3;  font-weight: 700; }
h4 { font-size: 1rem;    line-height: 1.3;  font-weight: 700; }

p              { margin-bottom: 1rem; }
p:last-child   { margin-bottom: 0; }

/* ============================================================
   LAYOUT
============================================================ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section      { padding: 4rem 0; }
.section--alt { background: var(--color-bg-section); }

/* Accessibility */
.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;
}

/* ============================================================
   RESPONSIVE BASE
============================================================ */
@media (max-width: 768px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  .section { padding: 2.75rem 0; }
}