/* ==========================================================================
   NANO — Base
   Reset, elementos nativos, primitivas tipográficas y animaciones.
   Depende de: tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

/* `hidden` debe ganar a cualquier display de componente (p. ej. .form-success). */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote {
  margin: 0;
}

img {
  max-width: 100%;
}

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

button {
  cursor: pointer;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

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

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

/* Salto al contenido — visible sólo con teclado */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  transform: translateY(-200%);
  transition: transform var(--t-fast);
}

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

/* Oculto visualmente, disponible para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Primitivas tipográficas
   Clases de propósito único que se combinan en el marcado.
   -------------------------------------------------------------------------- */

/* Display — Gothiks (ver --font-display en tokens.css) */
.display {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.display--bold   { font-weight: var(--w-bold); }
.display--light  { font-weight: var(--w-light); }

/* Titulares por nivel */
.h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-page);
  line-height: 0.88;
  letter-spacing: -0.02em;
}

.h1--index { margin: 24px 0 clamp(28px, 4vw, 44px); }

.h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Mono — etiquetas y metadatos.
   El sufijo indica el tracking; el modificador --sm baja a 9.5px. */
.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mono--sm   { font-size: 9.5px; }
.mono--md   { font-size: 10.5px; }
.mono--lg   { font-size: 11px; }

.mono--t10  { letter-spacing: 0.10em; }
.mono--t12  { letter-spacing: 0.12em; }
.mono--t16  { letter-spacing: 0.16em; }
.mono--t18  { letter-spacing: 0.18em; }
.mono--t20  { letter-spacing: 0.20em; }
.mono--t22  { letter-spacing: 0.22em; }
.mono--t24  { letter-spacing: 0.24em; }

.mono--plain { text-transform: none; }

/* Eyebrow — rótulo numerado que abre cada sección ("01 — Criterio") */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Párrafos */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-body);
  text-wrap: pretty;
}

.body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

.body--md { font-size: 15.5px; }

/* Colores de texto utilitarios */
.t-accent { color: var(--accent); }
.t-ci     { color: var(--accent-ci); }
.t-dg     { color: var(--accent-dg); }
.t-strong { color: var(--text-strong); }
.t-body   { color: var(--text-body); }
.t-muted  { color: var(--text-muted); }
.t-dim    { color: var(--text-dim); }
.t-faint  { color: var(--text-faint); }
.t-ghost  { color: var(--text-ghost); }

/* --------------------------------------------------------------------------
   Utilidades de espaciado y alineación
   Sólo para valores que se repiten igual en varios componentes.
   -------------------------------------------------------------------------- */

.mb-9  { margin-block-end: 9px; }
.mb-14 { margin-block-end: 14px; }
.mb-16 { margin-block-end: 16px; }
.mb-26 { margin-block-end: 26px; }
.mt-8  { margin-block-start: 8px; }

.ta-right { text-align: right; }
.lh-19    { line-height: 1.9; }

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */

@keyframes nano-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes nano-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Vaivén de la flecha del hero: baja 10px y vuelve.
   Va en `translate` y no en `transform` porque la flecha usa transform para su
   propia forma (rotate + skew); animar ahí la borraría. El -50% es el centrado
   horizontal, que vive en esta misma propiedad. */
@keyframes nano-arrow-nudge {
  0%, 100% { translate: -50% 0; }
  50%      { translate: -50% 10px; }
}

@keyframes nano-blink {
  0%, 60%   { opacity: 1; }
  61%, 100% { opacity: 0.15; }
}

@keyframes nano-hero-in {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes nano-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nano-reveal-x {
  from { opacity: 0; transform: translateX(-200px); }
  to   { opacity: 1; transform: none; }
}

@keyframes nano-stat-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Entrada por scroll
   La animación va atada a la posición del elemento en la ventana, no al
   tiempo: `animation-timeline: view()` la hace avanzar mientras el elemento
   entra en pantalla y retroceder al subir. Se rebobina sola, sin JavaScript.

   Todo va dentro de @supports a propósito. Un navegador sin animaciones de
   scroll no recibe ninguna regla, así que el elemento se ve normal en lugar de
   quedarse escondido esperando una animación que nunca va a correr.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  .reveal-x {
    animation: nano-reveal-x linear both;
    animation-timeline: view();

    /* El rango se mide sobre `cover` por lo mismo que en las cifras de abajo:
       `entry` dura lo que mide el elemento, así que la entrada se agotaba en
       poco más de 100px de scroll y pasaba desapercibida. Con `cover 35%` el
       titular tarda unos 450px en colocarse y el movimiento se lee. */
    animation-range: cover 0% cover 35%;

    will-change: opacity, transform;
  }

  /* Anima el bloque entero de cada dato, no solo la cifra, para que el número
     y su descripción entren juntos.

     El rango se mide sobre `cover` y no sobre `entry` a propósito. `entry` dura
     lo que mide el elemento: en una cifra de ~40px de alto la animación entera
     cabría en 40px de scroll y se vería como un salto. `cover` va desde que la
     cifra asoma hasta que sale por arriba, así que un 35% son unos 300px de
     recorrido y el movimiento se lee.

     Las cifras comparten fila, así que su línea de tiempo es idéntica y
     entrarían a la vez. El escalonado se consigue corriendo el arranque de
     cada una: todas duran lo mismo y la siguiente empieza un poco más tarde. */
  .stats > * {
    animation: nano-stat-in linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 35%;
    will-change: opacity, transform;
  }

  .stats > *:nth-child(2) { animation-range: cover 15% cover 50%; }
  .stats > *:nth-child(3) { animation-range: cover 30% cover 65%; }
  .stats > *:nth-child(4) { animation-range: cover 45% cover 80%; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   Respeta la preferencia del sistema: anula animación y scroll suave.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 2s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 2s !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* Sin entrada por scroll: el elemento se ve ya colocado. Se anula el nombre
     y no la duración, porque una animación atada al scroll no se mide en
     tiempo y la regla de arriba no la alcanzaría. */
  .reveal-x,
  .stats > * {
    animation-name: none;
  }
}