/* ==========================================================================
   MINI UNIVERSO — BASE
   Reset, accesibilidad, tipografía y utilidades de layout.
   El color y la escala viven en `tokens.css`. Este archivo no inventa valores.
   ========================================================================== */

/* ==========================================================================
   TIPOGRAFÍA DE MARCA
   Satoshi, la familia real de Mini Universo, alojada aquí y no en un CDN.
   `tokens.css` ya la declaraba en `--font-display` y `--font-body` esperando
   estos archivos; hasta ahora caía siempre a la pila del sistema, que es la
   razón principal de que el sitio se leyera genérico.

   Cuatro pesos, 98 KB en total. `swap` para no bloquear el primer render.
   ========================================================================== */
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  background-color: var(--mu-bg);
  color: var(--mu-slate);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

svg { flex: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a { color: inherit; }

::selection {
  background-color: var(--mu-accent);
  color: var(--mu-white);
}

/* `main` y `footer` por encima del campo de estrellas. */
main, .site-footer {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */

/* Un único tratamiento de foco para todo el sitio. Antes el Home tenía anillo
   propio y las otras siete páginas no tenían ninguno. */
:focus-visible {
  outline: 2px solid var(--mu-accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  left: var(--space-4);
  top: var(--space-3);
  z-index: 200;
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background-color: var(--mu-accent);
  color: var(--mu-white);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  /* El motor también se apaga: `app.js` no arranca el requestAnimationFrame. */
  #constellation-canvas { display: none !important; }
}

/* ==========================================================================
   TIPOGRAFÍA — una escala, aplicada igual en las 8 páginas
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--mu-ivory);
  text-wrap: balance;
}

.u-hero,
.u-h1,
.u-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--mu-ivory);
}

.u-hero { font-size: var(--text-hero); line-height: 1.05; }
.u-h1   { font-size: var(--text-h1); }
.u-h2   { font-size: var(--text-h2); }

.u-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--mu-white);
}

.u-lede,
.u-body,
.u-sm {
  line-height: var(--leading-body);
  color: var(--mu-slate);
  text-wrap: pretty;
}

.u-lede { font-size: var(--text-lede); max-width: var(--measure); }
.u-body { font-size: var(--text-body); max-width: var(--measure); }
.u-sm   { font-size: var(--text-sm); }

.u-meta {
  font-size: var(--text-meta);
  line-height: 1.5;
  color: var(--mu-slate-dim);
}

/* Un solo eyebrow y un solo color. `.eyebrow-label` existía en el CSS anterior
   y ninguna página lo usaba: cada sección repetía las clases a mano, con dos
   colores distintos para el mismo rol, uno de ellos por debajo de AA. */
.u-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--mu-accent-soft);
}

.u-accent { color: var(--mu-accent-soft); }
.u-strong { color: var(--mu-white); font-weight: 500; }

.link-accent {
  color: var(--mu-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}

.link-accent:hover { color: var(--mu-white); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* El padding responsive vive aquí y solo aquí. Antes cada `.container` del HTML
   volvía a añadir `px-4 sm:px-6 lg:px-8` y el padding se sumaba dos veces. */
.container,
.container-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container        { max-width: 1200px; }
.container-narrow { max-width: 780px; }

@media (min-width: 640px) {
  .container, .container-narrow { padding-inline: var(--space-6); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--space-8); }
}

/* Tres ritmos de sección. */
.section        { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--hero  { padding-block: var(--section-y-hero); }

.section-divider { border-top: 1px solid var(--mu-hairline); }
.bg-wash         { background-color: var(--mu-bg-elevated); }

/* Cabecera de sección: eyebrow + h2 + lede con un único ritmo interno. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}

/* Aire bajo el header fijo, un solo valor (antes: pt-20 en Home y pt-28 en
   las otras siete). */
.main-offset { padding-top: var(--header-h); }

/* ── Utilidades de composición ─────────────────────────────────────────── */
.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }
.stack-10 { gap: var(--space-10); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.cluster-6 { gap: var(--space-6); }
.cluster--center { justify-content: center; }

.center         { text-align: center; }
.list-none      { list-style: none; }
.list-bullet    { padding-left: var(--space-5); }
.measure        { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

/* Centra el bloque y la medida de lectura a la vez. Solo para TEXTO: `ch` se
   resuelve contra el font-size del propio elemento. Aplicarlo a un contenedor
   con un titular grande dentro lo estrangula. */
.measure-center {
  max-width: var(--measure);
  margin-inline: auto;
}

/* Centrado de bloque para contenedores (hero, cierres de sección). En `rem`,
   así que no depende del font-size de sus hijos. */
.block-center {
  max-width: 46rem;
  margin-inline: auto;
}

.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.push  { margin-top: auto; }

/* ── Rejillas ──────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.grid-10 { gap: var(--space-10); }
.grid-12 { gap: var(--space-12); }

@media (min-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Dos columnas de peso igual a partir de tablet. */
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
}

/* Columna de título estrecha + contenido ancho, a partir de desktop. */
@media (min-width: 1024px) {
  .split-aside { grid-template-columns: 5fr 7fr; }
}