/* ---------- Marca ---------- */
:root {
  /* Colores del logo (medidos de logo.png) */
  --fondo: #001d43;
  --fondo-alto: #002452;
  --azul: #0565e2;
  --azul-claro: #5b9cff;      /* azul para texto pequeño sobre el fondo oscuro */
  --azul-profundo: #02235e;
  --blanco: #ffffff;

  --texto: var(--blanco);
  --texto-suave: rgb(255 255 255 / 0.72);
  --texto-tenue: rgb(255 255 255 / 0.5);
  --linea: rgb(255 255 255 / 0.16);
  --linea-fuerte: rgb(255 255 255 / 0.4);

  /* Tipografías */
  --f-titulo: "Michroma", "Eurostile", sans-serif;
  --f-texto: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Espacios */
  --margen: 1rem; /* 16 px en celular */
  --capa: 4px; /* alto de una "capa" en la textura de fondo */
  /* Textura de capas: líneas horizontales muy suaves, como una pieza FDM */
  --textura: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.022) 0 1px,
    transparent 1px var(--capa)
  );

  /* Colores que usa el SVG del logo */
  --logo-blanco: var(--blanco);
  --logo-azul: var(--azul);
  --logo-sombra: var(--azul-profundo);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--fondo);
  background-image: var(--textura);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

a { color: inherit; }

button { font: inherit; color: inherit; }

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

/* Las secciones reciben el foco al ir a ellas por un enlace; no hace falta marcarlas */
section[tabindex="-1"]:focus { outline: none; }

.saltar {
  position: absolute;
  left: var(--margen);
  top: -3rem;
  padding: 0.5rem 0.75rem;
  background: var(--blanco);
  color: var(--fondo);
  z-index: 10;
}
.saltar:focus { top: 0.5rem; }

/* ---------- Piezas comunes ---------- */
.lectura,
.rotulo {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-claro);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 1px solid var(--azul);
  font-family: var(--f-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}

.boton--principal {
  background: var(--azul);
  color: var(--blanco);
}

.boton--principal:active { background: #0457c4; }

.pendiente {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--texto-tenue);
}

/* Borde escalonado entre secciones (como el contorno de capas apiladas) */
.escalon {
  --paso: 10px;
  background-color: var(--fondo-alto);
  background-image: var(--textura);
  clip-path: polygon(
    0 calc(var(--paso) * 3), 22% calc(var(--paso) * 3),
    22% calc(var(--paso) * 2), 51% calc(var(--paso) * 2),
    51% var(--paso), 78% var(--paso),
    78% 0, 100% 0,
    100% 100%, 0 100%
  );
}

.escalon--invertido {
  clip-path: polygon(
    0 0, 30% 0,
    30% var(--paso), 64% var(--paso),
    64% calc(var(--paso) * 2), 88% calc(var(--paso) * 2),
    88% calc(var(--paso) * 3), 100% calc(var(--paso) * 3),
    100% 100%, 0 100%
  );
}