/* ═══════════════════════════════════════════
   BASE — Variables, reset, utilidades globales
   TFAR Web · tfarafaela.ar
═══════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg-0:        #F2F0EC;
  --bg-1:        #E8E5DF;
  --bg-2:        #DEDAD2;
  --bg-3:        #D0CAC0;
  --azul:        #1A2E4A;
  --azul-m:      #243F68;
  --azul-claro:  #2C5282;
  --oro-armas:   #C8A84B;
  --oro-armas-d: #8B6F2E;
  --oro-arq:     #E8C46A;
  --oro-arq-d:   #B8903A;
  --oro:         #C8A84B;
  --txt:         #2A2520;
  --txt-2:       #5C5449;
  --txt-3:       #9A9188;
  --ff:  'Barlow Condensed', sans-serif;
  --ffb: 'Barlow', sans-serif;
  --ffs: 'EB Garamond', serif;
  --max: 1200px;
  --pad: clamp(1.5rem, 5vw, 4rem);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* compensa nav fija */
  font-size: 17px;          /* base ligeramente más grande para mejor legibilidad */
}
body {
  font-family: var(--ffb);
  background: var(--bg-0);
  color: var(--txt);
  overflow-x: hidden;
  cursor: none;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

/* ── TEXTURA DE GRANO ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── CONTENEDOR ── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ── TIPOGRAFÍA UTILITARIA ── */
.eyebrow {
  font-family: var(--ff); font-size: .76rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--oro-armas-d);
}
.eyebrow-arq { color: var(--oro-arq-d); }

.rule { display: block; width: 2.5rem; height: 2px; background: var(--oro); margin: .7rem 0 1.25rem; }

/* ── REVEAL (animaciones de entrada por scroll) ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.reveal.on { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }