/* ==========================================
   FOGATA.CSS - estética de la landing
   Pergamino, verde bosque y naranja fuego. La usan
   home.css y activities.css; la idea es ir llevándola
   al resto del sitio desde acá.

   Va en su propio <link> (con ?v= del build) y no en
   variables.css: lo que entra por @import en main.css
   queda en la caché del navegador con la versión vieja
   y, si una variable no existe, el navegador descarta
   el fondo completo de la cabecera.
   ========================================= */

:root {
  --fogata-paper: #f3ecdb;
  --fogata-paper-dark: #e2d3b1;
  --fogata-card: #faf5e8;
  --fogata-forest: #23402a;
  --fogata-fire: #e8732c;
  --fogata-fire-dark: #c75a1a;
  --fogata-ink: #2b2a22;
  --fogata-muted: #5c5640;
  --fogata-display: 'Rubik Dirt', var(--font-family-base);
  --fogata-slab: 'Roboto Slab', Georgia, serif;
}


/* ---------- Íconos scout de fondo ----------
   Ver components/scout-deco.njk. La capa ocupa todo el
   body y queda debajo de main/footer: los íconos asoman
   en los huecos y quedan tapados por las cards. */

body { position: relative; }

.scout-deco-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.scout-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: #7d6b4a;
}

body > main,
body > footer {
  position: relative;
  z-index: 1;
}

.scout-deco-icon {
  position: absolute;
  translate: -50% 0;
  rotate: var(--r);
  opacity: var(--o);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  animation: scout-deco-sway var(--d) ease-in-out infinite alternate;
}

@keyframes scout-deco-sway {
  from { rotate: calc(var(--r) - 4deg); }
  to   { rotate: calc(var(--r) + 4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scout-deco-icon { animation: none; }
}

@media print {
  .scout-deco { display: none; }
}