/**
 * BASE — reset, tipografía base, utilidades y accesibilidad
 */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* necesario por .bleed (ver abajo), que usa 100vw */
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
a, button, [role="button"], summary{ cursor:pointer; }
a:disabled, button:disabled{ cursor:not-allowed; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500; /* Gazzetta Medium — es el único peso "fuerte" disponible */
  letter-spacing:.005em;
  margin:0;
  line-height:1.05;
}
/* Antes forzábamos mayúsculas por CSS (font condensada tipo Big
   Shoulders). Gazzetta es una slab serif pensada para leerse en caja
   alta/baja — se respeta el texto tal cual está escrito en el HTML
   ("Bien pensado. Así de simple.", no "BIEN PENSADO..."). */

/* Respeta la preferencia del sistema operativo: sin esto, alguien que
   desactivó el movimiento en su SO igual vería todas las animaciones. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- Accesibilidad ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--color-brand); color:var(--color-bg);
  padding:14px 20px; font-weight:700; font-size:14px;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--color-amber); outline-offset:2px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

section{ padding:110px 0; }
@media (max-width:900px){ section{ padding:76px 0; } }

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(38px,5.4vw,68px); margin-top:14px; }
.section-head p:not(.eyebrow){ margin-top:18px; font-size:16.5px; color:var(--color-stone-dark); max-width:520px; }

.divider{ height:1px; background:var(--color-line); border:none; margin:0; }

/* ---------- Utilidades de composición ----------
   Pequeño set de modificadores para no repetir estilos inline en los
   componentes HTML. Antes de crear una utilidad nueva, revisa si una
   de estas ya resuelve el caso. */
.alt-bg{ background:var(--color-bg-alt); }
/* Full-bleed: rompe el contenedor .wrap para que una imagen ocupe todo
   el ancho del viewport ("a sangre"). Funciona sin importar dónde esté
   anidado el elemento, porque se calcula desde el viewport, no desde
   el padre. Requiere overflow-x:hidden en <body> (ya está arriba). */
.bleed{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.h2-md{ font-size:clamp(42px,6vw,76px); margin-top:14px; } /* "El proyecto" — el h1 real está oculto (SEO), este es el titular visual más importante de la página */
.no-bottom-pad{ padding-bottom:0; }
.tight-top{ padding-bottom:110px; }
@media (max-width:900px){ .tight-top{ padding-bottom:76px; } }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:12px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-brand);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0; /* .eyebrow es un <p> — sin este reset hereda el margen por defecto del navegador y el espacio al heading queda a merced del margin-collapse de cada contexto */
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--color-brand); display:inline-block; }

/* ---------- Reveal-on-scroll ----------
   Progressive enhancement: el contenido es visible por defecto y solo
   se oculta-luego-anima si confirmamos que el JS realmente corrió
   (clase .js en <html>, ver assets/js/reveal.js). Así, si el JS falla
   o el usuario lo tiene desactivado, el contenido NUNCA queda oculto. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--dur-slow) ease, transform var(--dur-slow) ease; }
.js .reveal.in{ opacity:1; transform:translateY(0); }