/* ============================================================
   LA MANADA — Tokens de diseño
   Paleta: ciudad + parque. Verdes de parque y azul cielo como
   dominante, azul noche / verde forestal oscuro para fondos,
   crema en vez de blanco, naranja quemado SOLO para logros.
   Tipografía: Fredoka (display, cálida y redonda) + Plus Jakarta
   Sans (texto, neutra y muy legible).
   ============================================================ */

:root {
  /* --- color: dominante parque/ciudad --- */
  --color-parque-900: #1b3a2e;   /* verde bosque oscuro */
  --color-parque-700: #2f6b4f;
  --color-parque-500: #4d9b6f;
  --color-parque-300: #8fcaa4;
  --color-cielo-600: #2f7fd1;
  --color-cielo-400: #6fb3ee;
  --color-cielo-200: #bfe0f7;

  /* --- fondos de sección --- */
  --color-noche: #12213a;        /* azul noche, fondo oscuro */
  --color-noche-alt: #16311f;    /* verde forestal oscuro alterno */
  --color-crema: #f6efdf;        /* nunca blanco puro */
  --color-crema-alt: #efe6d0;

  /* --- acento eléctrico: SOLO momentos de logro --- */
  --color-logro: #e35d1f;        /* naranja quemado */
  --color-logro-alt: #e8b400;    /* dorado, insignias */

  /* --- neutros de texto --- */
  --color-texto: #1c2116;
  --color-texto-sobre-oscuro: var(--color-crema);
  --color-texto-tenue: #5b6358;

  /* --- feedback / utilidad --- */
  --color-rojo-sello: #c1121f;

  /* --- tipografía --- */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-texto: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* --- espaciado (grid de 8px) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* --- radios --- */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-full: 999px;

  /* --- sombras: duras y cortas, sin degradado --- */
  --shadow-dura: 6px 6px 0 rgba(18, 33, 58, 0.9);
  --shadow-dura-chica: 4px 4px 0 rgba(18, 33, 58, 0.9);

  /* --- movimiento --- */
  --ease-rebote: cubic-bezier(.34, 1.56, .64, 1);
  --ease-entrada: cubic-bezier(.16, 1, .3, 1); /* easing de entradas fade-up/fade-down del nav y hero */
  --dur-rapido: 140ms;
  --dur-medio: 260ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-texto);
  color: var(--color-texto);
  background: var(--color-crema);
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  transition: transform var(--dur-rapido) var(--ease-rebote);
}
.btn:active { transform: scale(0.96); }

.btn--primario {
  background: var(--color-logro);
  color: var(--color-crema);
  box-shadow: var(--shadow-dura);
}
.btn--primario:hover { transform: translateY(-2px); }

.btn--secundario {
  background: transparent;
  color: var(--color-noche);
  border: 2px solid var(--color-noche);
}