/* Tipografía autoalojada — subset latín + puntuación (ver especificaciones 5.2). */

@font-face {
  font-family: "Antonio Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 600;
  src: url("../fonts/antonio-variable-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 500;
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Martian Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  src: url("../fonts/martian-mono-variable-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 5.1 Color */
  --negro: #0b0b0b; /* fondo, siempre */
  --blanco: #f2f0ec; /* texto principal y hover */
  --gris: #8c8c88; /* texto en reposo, metadatos */
  --gris-linea: #232322; /* separadores */
  --rojo-marca: #c1121f; /* cicatriz, líneas de corte, gráficos — nunca en texto */
  --rojo-texto: #e5484d; /* SOLO texto rojo: nav activo, enlaces */

  /* 5.2 Tipografía — Antonio (titulares/nav/nombre/anterior-siguiente,
     condensada, NUNCA en párrafos ni descripciones), Archivo (texto
     corrido), Martian Mono (datos y metadatos) */
  --fuente-display: "Antonio Variable", system-ui, sans-serif;
  --fuente-texto: "Archivo Variable", system-ui, sans-serif;
  --fuente-dato: "Martian Mono Variable", ui-monospace, monospace;

  /* 5.3 Escala tipográfica */
  --t-hero: clamp(3.5rem, 13vw, 11rem);
  --t-titulo: clamp(2.25rem, 6vw, 4rem);
  --t-seccion: 1.25rem;
  --t-nav: 0.9375rem;
  --t-cuerpo: 1rem;
  --t-dato: 0.6875rem;

  /* Corte de texto (6.3, .corte-texto en base.css): el centro visual de
     las mayúsculas de Antonio Variable (medido en píxel sobre el render,
     no estimado) cae al 55.66% de la caja de línea de .corte-texto
     (line-height 1.2), no al 50% — su ascent/descent no es simétrico.
     En vez de mover la frontera del corte con cálculos que dependen del
     contexto (frágil: ver historial de este archivo), se desplaza el
     propio texto hacia arriba esa diferencia — (0.5566 − 0.5) × 1.2 ≈
     0.068em — para que su centro caiga en el 50% de la caja tal cual.
     Con el texto ya centrado, mitad-sup, mitad-inf y la línea de .corte
     quedan en valores fijos (50%), sin var() ni calc(): ver .base,
     .mitad-sup, .mitad-inf y .corte en base.css. */
  --corte-ajuste-mayusculas: -0.068em;

  /* 5.4 Espaciado (escala de 4px) */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;
  --e-8: 32px;
  --e-12: 48px;
  --e-16: 64px;
  --e-24: 96px;
  --e-32: 128px;

  --ancho-max: 1280px;
  --margen-lateral: clamp(1.25rem, 5vw, 5rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* 2.6 Radio de bordes: 0 en todo el sitio. Nada redondeado. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* 11. Foco de teclado visible, nunca se elimina el outline */
:focus-visible {
  outline: 1.5px solid var(--rojo-marca);
  outline-offset: 2px;
}

.salto-al-contenido {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  background: var(--negro);
  color: var(--blanco);
  padding: var(--e-2) var(--e-4);
  border: 1.5px solid var(--rojo-marca);
  z-index: 100;
  transition: top var(--dur-nukitsuke, 200ms) var(--ease-nukitsuke, ease);
}

.salto-al-contenido:focus {
  top: var(--e-4);
}

.envoltorio {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

/* 5.2 Tipografía — Antonio, condensada por diseño (sin necesidad de
   font-stretch sintético). El letter-spacing varía por tamaño: cada
   consumidor (hero-nombre, ficha-titulo, nav-enlace, etc.) fija el suyo. */
.texto-display {
  font-family: var(--fuente-display);
  font-weight: 600;
  text-transform: uppercase;
}

/* 5.2 Tipografía — datos en mono condensado, ficha técnica/años/roles */
.texto-dato {
  font-family: var(--fuente-dato);
  font-stretch: 75%;
  font-size: var(--t-dato);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gris);
}

/* sitio.posicionamiento (hero + sobre-mí): mismo mono que texto-dato,
   un pelín mayor — se define en un solo sitio para no desincronizarlo. */
.posicionamiento {
  font-size: 0.75rem;
}