/* ==========================================================================
   BASE — tipografía, superficies del navegador, utilidades de texto
   ========================================================================== */

body {
  background-color: var(--lienzo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: var(--leading-texto);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'ss01' 1;
  transition: background-color var(--d-medio) var(--ease-out);
}

/* --------------------------------------------------------------- DISPLAY */

.display-portada,
.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: var(--fuente-display);
  color: var(--texto);
  text-wrap: balance;
  /* Un titular no se parte por la mitad de una palabra: antes de eso,
     que baje de tamaño o que gane ancho de caja. */
  overflow-wrap: normal;
  hyphens: none;
}

.display-portada {
  font-size: var(--t-portada);
  font-weight: 800;
  font-stretch: var(--ancho-portada);
  line-height: var(--leading-portada);
  letter-spacing: var(--track-portada);
  text-transform: uppercase;
}

.display-1 {
  font-size: var(--t-h1);
  font-weight: 790;
  font-stretch: var(--ancho-display);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.display-2 {
  font-size: var(--t-h2);
  font-weight: 740;
  font-stretch: var(--ancho-titulo);
  line-height: var(--leading-display);
  letter-spacing: var(--track-titulo);
  text-transform: uppercase;
}

.display-3 {
  font-size: var(--t-h3);
  font-weight: 640;
  font-stretch: 100%;
  line-height: var(--leading-titulo);
  letter-spacing: var(--track-sub);
}

.display-4 {
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: var(--leading-titulo);
  letter-spacing: var(--track-sub);
}

/* El tono que distingue una frase dentro de un titular. El énfasis sale
   del color y del peso, nunca de un degradado. */
.enfasis { color: var(--acento-texto); }

.guia {
  font-size: var(--t-guia);
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--texto-suave);
  max-width: var(--medida-guia);
  text-wrap: pretty;
}

.texto     { max-width: var(--medida); }
.texto + .texto { margin-top: var(--e-4); }
.texto-corto { max-width: var(--medida-corta); }

.suave { color: var(--texto-suave); }

/* ------------------------------------------------------------------ COTA
   La anotación de cota es el único lugar donde entra la monoespaciada:
   lleva medidas, cantidades y códigos reales, no decoración «técnica». */

.cota {
  font-family: var(--fuente-cota);
  font-size: var(--t-cota);
  font-weight: 500;
  letter-spacing: var(--track-cota);
  text-transform: uppercase;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.etiqueta {
  font-family: var(--fuente-display);
  font-size: var(--t-micro);
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------- ENLACES */

a { text-decoration: none; }

.enlace {
  color: var(--acento-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--d-rapido) var(--ease-out),
              color var(--d-rapido) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .enlace:hover { text-decoration-color: currentColor; }
}

/* ------------------------------------------- SUPERFICIES DEL NAVEGADOR
   Selección, cursor, scrollbar y anillo de foco vienen con valores por
   defecto que no pertenecen a ningún sistema. Se tematizan desde la paleta. */

::selection {
  background-color: var(--naranja-500);
  color: var(--gris-900);
  text-shadow: none;
}

html {
  scrollbar-color: var(--gris-500) var(--gris-900);
  scrollbar-width: thin;
}

.tema-claro ::selection {
  background-color: var(--naranja-600);
  color: var(--gris-50);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--gris-950); }
::-webkit-scrollbar-thumb {
  background: var(--gris-500);
  border: 3px solid var(--gris-950);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--naranja-600); }
::-webkit-scrollbar-corner { background: var(--gris-950); }

:root {
  accent-color: var(--naranja-600);
  caret-color: var(--naranja-500);
}

:focus-visible {
  outline: var(--anillo-foco) solid var(--naranja-500);
  outline-offset: var(--anillo-sep);
  border-radius: 2px;
}

.tema-claro :focus-visible { outline-color: var(--naranja-700); }

/* Salto al contenido: visible en cuanto recibe foco de teclado */
.saltar {
  position: fixed;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--naranja-500);
  color: var(--gris-900);
  font-family: var(--fuente-display);
  font-size: var(--t-pie);
  font-weight: 700;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--d-medio) var(--ease-out);
}
.saltar:focus-visible { transform: translateY(0); }

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