/* ============================================================
 * base.css — Reset, primitivas tipográficas y layout base.
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 300;               /* Space Grotesk Light para cuerpo */
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;               /* Clash Display Semibold para títulos */
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.u-display { font-family: var(--font-display); }
.u-upper { text-transform: uppercase; }
.u-meta {
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.u-accent { color: var(--accent); }

/* Contenedor con márgenes base del documento */
.shell { padding-inline: var(--margin); }

/* Placeholder elegante para assets faltantes */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,0.03) 14px 15px),
    var(--soft);
  display: grid; place-items: center;
  color: var(--muted);
  overflow: hidden;
}
[data-bg='dark'] .ph { background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px),
    var(--near-black); color: rgba(255,255,255,0.55); }
.ph::after {
  content: attr(data-label);
  font-size: var(--t-meta); letter-spacing: 0.08em; text-transform: uppercase;
}

/* Accesibilidad: foco visible */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Util de carga de imagen (fade-in suave) */
.media { opacity: 0; transition: opacity var(--dur) var(--ease-soft); }
.media.is-loaded { opacity: 1; }