/* Base — reset mínimo y tipografía. Sin decisiones de diseño propias:
   todo valor sale de tokens.css. */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--f-familia);
  font-weight: var(--f-peso-normal);
  color: var(--texto-noche);
  background: var(--c-noche-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* Accesible pero invisible: para etiquetas que solo lee un lector de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

[hidden] { display: none !important; }

/* Entradas escalonadas */
.entra   { animation: entra var(--t-entrada) var(--curva-suave) both; }
.entra-2 { animation: entra var(--t-entrada) var(--curva-suave) var(--t-retardo-2) both; }
.entra-3 { animation: entra var(--t-entrada) var(--curva-suave) var(--t-retardo-3) both; }

@keyframes entra {
  from { opacity: 0; transform: translateY(var(--e-4)); }
  to   { opacity: 1; transform: none; }
}

/* token-libre: anular animaciones no es una decisión de diseño */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;   /* token-libre */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;  /* token-libre */
  }
}