/* ============================================
   DIVERSA FUNDACIÓN — Fundamentos de diseño
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   NIVEL 1 — COLORES OFICIALES DE MARCA
   Tomados directamente del logotipo de Diversa Fundación.
   Para un rebranding futuro basta con cambiar estos cuatro
   valores: ningún componente los conoce directamente.
   ============================================================ */
:root {
  --marca-azul:     #004AAB;
  --marca-naranja:  #F58612;
  --marca-rojo:     #FF3131;
  --marca-amarillo: #F5CD16;
}

/* ============================================================
   NIVEL 2 — COLORES DERIVADOS
   NO son colores oficiales de marca. Existen únicamente por
   requisitos de contraste y de interfaz. No deben usarse en
   materiales impresos ni en la identidad institucional.
   ============================================================ */
:root {
  --derivado-azul-oscuro:   #003C8A;  /* hover y estado activo */
  --derivado-azul-tinte:    #EAF0F9;  /* fondos suaves          */
  --derivado-naranja-texto: #B45D00;  /* 4.7:1 — texto en claro */
  --derivado-naranja-tinte: #FDF1E2;
  --derivado-rojo-texto:    #C81E1E;  /* 5.7:1 — errores        */
  --derivado-rojo-tinte:    #FCECEC;
  --derivado-verde-exito:   #1E7A4D;  /* 5.3:1 — confirmaciones
                                         funcional, ajeno a la marca */
  --derivado-verde-tinte:   #E8F3ED;
}

/* ============================================================
   NIVEL 3 — NEUTROS
   Cálidos pero desaturados. Impiden que el azul institucional
   derive hacia una estética bancaria o gubernamental.
   ============================================================ */
:root {
  --neutro-000: #FFFFFF;
  --neutro-050: #FAF9F6;
  --neutro-100: #F1EFE9;
  --neutro-200: #E2DFD7;
  --neutro-300: #CFCBC1;
  --neutro-400: #8C877D;
  --neutro-600: #55514A;
  --neutro-900: #1C1B19;
}

/* ============================================================
   NIVEL 4 — TOKENS DE INTERFAZ
   Lo único que consumen los componentes. Apuntan por función,
   nunca por color literal.
   ============================================================ */
:root {
  --color-bg:          var(--neutro-050);
  --color-bg-alt:      var(--neutro-100);
  --color-surface:     var(--neutro-000);
  --color-border:      var(--neutro-200);
  --color-border-soft: var(--neutro-100);

  --color-ink:       var(--neutro-900);
  --color-ink-soft:  var(--neutro-600);
  --color-ink-faint: var(--neutro-400);

  --color-primary:      var(--marca-azul);
  --color-primary-dark: var(--derivado-azul-oscuro);
  --color-primary-tint: var(--derivado-azul-tinte);

  --color-accent:      var(--marca-naranja);
  --color-accent-text: var(--derivado-naranja-texto);
  --color-accent-tint: var(--derivado-naranja-tinte);

  --color-error:      var(--derivado-rojo-texto);
  --color-error-tint: var(--derivado-rojo-tinte);
  --color-exito:      var(--derivado-verde-exito);
  --color-exito-tint: var(--derivado-verde-tinte);

  --color-foco: var(--marca-azul);

  /* ---- Tipografía ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h1: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h2: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --fs-h3: clamp(1.15rem, 1vw + 1rem, 1.5rem);
  --fs-body-lg: clamp(1.05rem, 0.5vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* ---- Espaciado ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --max-width: 1240px;
  --transition-base: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  color: var(--color-ink);
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================================
   FILETE DE MARCA
   Los cuatro colores del logotipo en su orden de rotación.
   Aparece únicamente en el borde superior de la página y del
   footer. Es el único lugar donde los cuatro conviven.
   ============================================================ */
.filete-marca {
  height: 4px;
  width: 100%;
  display: flex;
}

.filete-marca span { flex: 1; }
.filete-marca span:nth-child(1) { background: var(--marca-azul); }
.filete-marca span:nth-child(2) { background: var(--marca-naranja); }
.filete-marca span:nth-child(3) { background: var(--marca-amarillo); }
.filete-marca span:nth-child(4) { background: var(--marca-rojo); }

/* ---- Utilidades de texto ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.section-title {
  font-size: var(--fs-h1);
  max-width: 44ch;
}

.section-lede {
  font-size: var(--fs-body-lg);
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin-top: var(--space-sm);
}

/* ---- Accesibilidad ---- */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Placeholder de imagen ---- */
.placeholder-media {
  position: relative;
  background: repeating-linear-gradient(
    135deg,
    var(--neutro-100),
    var(--neutro-100) 10px,
    var(--neutro-200) 10px,
    var(--neutro-200) 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-faint);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
  border: 1px dashed var(--color-border);
}