/* ============================================================
   EDUKA · base
   Variables, reset, tipografía global y utilidades compartidas.
   Se carga siempre primero: el resto de los archivos lo pisan.
   ============================================================ */

:root{
  /* ---------- paleta: cuero, verde campo, fuego de atardecer, crema ---------- */
  --cuero:#6B4A32;
  --verde:#3E4A34;
  --verde-hondo:#2C3527;
  --fuego:#C6673D;
  --crema:#EDE3D2;
  --crema-alta:#F5EEE2;
  --tinta:#2A241D;

  /* ---------- líneas y cremas translúcidas ---------- */
  --linea:rgba(107,74,50,.22);
  --linea-clara:rgba(237,227,210,.14);
  --crema-tenue:rgba(237,227,210,.7);

  /* ---------- tipografía ---------- */
  --serif:'Cormorant',Georgia,serif;
  --sans:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;

  /* ---------- espaciado ---------- */
  --pad:clamp(20px,5vw,80px);
  --seccion-y:clamp(80px,12vw,170px);

  /* ---------- formas y curvas ---------- */
  --pildora:999px;
  --ease-suave:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;
  overflow-x:hidden;text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
img{display:block;max-width:100%}

/* ---------- tipografía global ---------- */
a{color:var(--cuero);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--fuego)}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
em{font-style:italic}
p{margin:0}
::selection{background:var(--fuego);color:var(--crema-alta)}

/* ============================================================
   UTILIDADES COMPARTIDAS
   Las usa más de una sección; por eso viven acá y no en un
   archivo de sección.
   ============================================================ */

/* ---------- etiquetita mono que encabeza cada sección ---------- */
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cuero);opacity:.75;margin:0 0 18px;
}
.tag.light{color:var(--crema-tenue)}

/* ---------- número gigante de fondo (01 · 03 · 05) ---------- */
.watermark{
  position:absolute;font-family:var(--serif);font-size:clamp(180px,30vw,420px);line-height:.7;
  color:var(--cuero);opacity:.07;pointer-events:none;user-select:none;top:-.06em;right:2vw;
}

/* ---------- aparición al hacer scroll · la clase .in la pone js/reveals.js ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.2s ease,transform 1.3s var(--ease-suave)}
.reveal.in{opacity:1;transform:none}

/* ---------- botones ---------- */
.btn{
  display:inline-block;background:var(--cuero);color:var(--crema-alta);border:0;border-radius:var(--pildora);
  padding:15px 30px;font-family:var(--sans);font-size:14px;letter-spacing:.06em;cursor:pointer;
  transition:background .4s ease,transform .4s var(--ease-suave);
}
.btn:hover{background:var(--fuego);color:var(--crema-alta);transform:translateY(-2px)}
.btn-quiet{
  font-size:14px;letter-spacing:.04em;color:var(--tinta);border-bottom:1px solid var(--linea);padding-bottom:3px;
}
.btn-quiet:hover{border-color:var(--fuego)}

/* ---------- cinta infinita · la comparten el marquee y el pie ---------- */
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   RESPONSIVE GLOBAL
   ============================================================ */
@media (max-width:900px){
  body{font-size:16px}
}

@media print{
  #splash,.cursor,.glow,.grain,.nav,.side-fixed{display:none!important}
  body{background:#fff}
}