/*
  base.css — reset, tipografía, foco, acabado. Se carga en las cinco páginas.
  Nada de aquí es específico de un bloque: eso vive en landing.css.
*/

/* ===== Fuente ===== */
@font-face {
  font-family: 'DM Sans';
  src: url('/fuentes/dm-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

/* scrollbar-gutter reserva el ancho de la scrollbar en los dos lados,
   no solo en el derecho. Sin esto, en Windows (scrollbar clásica, no
   superpuesta) todo lo centrado con margin-inline:auto se calcula
   sobre el ancho visible menos esa franja de la derecha, y el eje de
   centrado queda corrido unos px a la izquierda del centro real de la
   ventana — se nota en cualquier página con scroll vertical, que acá
   es todas. En Mac (scrollbar superpuesta) no hacía falta, pero no
   rompe nada tenerlo igual: si no hay scroll, no reserva nada extra. */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable both-edges;
}

body {
  min-height: 100svh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-weight: var(--peso-cuerpo);
  font-size: var(--t-m);
  line-height: var(--interlineado-cuerpo);
  letter-spacing: var(--tracking-cuerpo);
  /* Detalle #4: el texto oscuro sobre fondo claro se renderiza más pesado
     en macOS de lo que se dibujó. Con una geométrica a 18px se nota. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button, input {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

a {
  color: var(--acento-texto);
}

/* ===== Títulos =====
   text-wrap: balance reparte el texto parejo entre líneas en vez de dejar
   una última línea con una palabra suelta. Pesa más acá que en una página
   cualquiera: el título del hero son seis palabras y a 360px se parte en
   tres líneas. Dónde parta decide si "Somos muchos" queda entero. */
h1, h2, h3 {
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }

/* text-wrap: pretty evita la palabra huérfana al final del párrafo. */
p {
  max-width: var(--medida-texto);
  text-wrap: pretty;
}

/* Placeholder del isotipo: no hay archivo de logo todavía, pero el
   ALTO ya es definitivo (28px) — no un valor de relleno. Se fija ahora
   a propósito para que cuando entre el archivo real no mueva nada del
   layout de ninguna página: la imagen final tiene que entrar a 28px de
   alto (el ancho puede variar según el diseño real del isotipo, por
   eso ese lado queda con margen). Mismo lenguaje que los otros
   placeholders del sitio (borde punteado, sin relleno). Compartido
   entre las páginas de registro (paginas.css, centrado arriba) y la
   landing (landing.css, arriba a la izquierda) — una sola definición,
   dos posiciones distintas. */
.logo-placeholder {
  width: 120px;
  height: 28px;
  border: 1.5px dashed var(--contorno);
  border-radius: var(--radio-casillero);
}

/* Oculto visualmente, disponible para lectores de pantalla. Para el
   label del email del formulario: el placeholder no alcanza como
   etiqueta accesible por sí solo. */
.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;
}

/* Detalle #3: números de ancho fijo. El número del grupo cambia cada
   semana a mano; con tabulares, pasar de 118 a 121 no mueve la línea. */
.num-tab {
  font-variant-numeric: tabular-nums;
}

/* ===== Foco =====
   Mismo tratamiento en todo elemento interactivo, sobre crema y sobre lino. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ===== Movimiento =====
   Detalle #5: transiciones para interacción (se pueden cortar a mitad de
   camino), keyframes solo para secuencias que corren una sola vez.
   Todo pasa por --dur-micro y --ease-suave para poder apagarlo de raíz.

   entrada-pieza es el keyframe compartido de "objeto que entra, ya en su
   estado final": opacity + translateY(8px), sin blur (Detalle #6). Lo usan
   paginas.css (título y párrafos de las tres páginas de registro) y
   reticula.css (los siete casilleros y la tira de diez semanas). Vive acá,
   una sola vez, para que ninguna de las dos hojas lo redeclare distinto. */
@keyframes entrada-pieza {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modo oscuro: no existe. La marca es fondo crema y punto. */