/* =========================================================
   01) VARIABLES TIPOGRÁFICAS
   ========================================================= */

/* Uso actual: todos los documentos. Centraliza tipografías, colores y anchura general. */
:root {
  --v4-font-text: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --v4-font-heading: "Inter", "Segoe UI", Arial, sans-serif;
  --v4-bg-deep: #0f0f0f;
  --v4-bg: #191919;
  --v4-bg-raised: #222220;
  --v4-petrol: #3f6673;
  --v4-petrol-link: #65848f;
  --v4-petrol-hover: #8ba3ab;
  --v4-petrol-shadow: #32515c;
  --v4-petrol-border: #2c4750;
  --v4-ochre: #73613f;
  --v4-ochre-muted: #635336;
  --v4-ochre-light: #846f48;
  --v4-text: #878681;
  --v4-text-heading: #b4b4b1;
  --v4-text-secondary: #8f8b84;
  --v4-text-tertiary: #74706a;
  --v4-title-dark: #375a66;
  --v4-title-light: #6fb4cc;
  --v4-shell: 74rem;
}

/* =========================================================
   02) RESET Y BASE GLOBAL
   ========================================================= */

/* Uso actual: 1 <html>. Activa el modelo border-box, evita desbordamiento lateral y conserva el tamaño de texto móvil. */
html {
  box-sizing: border-box;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Uso actual: 147 elementos; también alcanza ::before y ::after cuando existan. Todos heredan border-box. */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Uso actual: 1 <body>. Quita el margen del navegador y establece colores, fuente, tamaño y altura de línea generales. */
body {
  margin: 0;
  color: var(--v4-text);
  background-color: var(--v4-bg);
  font-family: var(--v4-font-text);
  font-size: 17px;
  line-height: 1.7;
}

/* Todas las imágenes se comportan como bloques y nunca desbordan su contenedor. */
img {
  display: block;
  max-width: 100%;
}

/* Contenedor horizontal común de las páginas generales. */
.shell {
  width: min(calc(100% - 3rem), var(--v4-shell));
  margin-inline: auto;
}

/* Enlace de accesibilidad común que aparece al recibir el foco. */
.skip-link {
  position: absolute;
  z-index: 110;
  top: 0;
  left: 1rem;
  padding: 0.7rem 1rem;
  color: var(--v4-text-heading);
  background: var(--v4-bg-deep);
  font-family: var(--v4-font-heading);
  transform: translateY(-130%);
}

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

/* =========================================================
   03) TIPOGRAFÍA DE TÍTULOS
   ========================================================= */

/* Uso actual: 1 h1, 4 h2 y 1 h3. Unifica margen, familia y peso de todos los títulos. */
h1,
h2,
h3 {
  margin: 10px 0;
  font-family: var(--v4-font-heading);
  font-weight: 700;
}

/* Uso actual: 1 h1. Crea el título principal fluido con degradado y una altura de línea compacta. */
h1 {
  color: var(--v4-title-light);
  background: linear-gradient(90deg, var(--v4-title-dark), var(--v4-title-light));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.7rem, 15vw, 4.3rem);
  line-height: 1.08;
}

/* Texto accesible que permanece disponible para lectores de pantalla. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}