/* ===========================================================================
   Base: reset ligero, tipografía y estructura de página.
   ========================================================================= */

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--acento);
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

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

/* Objetivos táctiles de al menos 24 px (WCAG 2.5.8): los deslizadores nativos
   medían 16 px de alto y las casillas 13. Con :where, cualquier regla propia
   de un módulo sigue mandando. */
:where(input[type="range"]) { min-height: 24px; cursor: pointer; }
:where(input[type="checkbox"], input[type="radio"]) { width: 18px; height: 18px; accent-color: var(--acento); }

/* El atributo hidden lo aplica el navegador con display:none, pero cualquier
   regla propia que fije un display lo pisa sin avisar — pasó con la nota de
   «viene del Módulo 1», que se veía siempre. Esta regla lo deja zanjado para
   todo el sitio. */
[hidden] { display: none !important; }

/* --- Estructura --- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.cabecera-sitio {
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Logo y menú en UNA sola línea (4 de octubre de 2026): antes el menú bajaba a
   una segunda fila y la cabecera fija ocupaba 87 px en vez de 60. Si no cabe
   (portátil pequeño, tableta, móvil), el menú se desliza en horizontal. */
.cabecera-sitio__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  flex-wrap: nowrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}

/* En el móvil, del logo solo queda el átomo (el nombre sigue ahí para los lectores
   de pantalla): así el menú tiene casi todo el ancho de la línea. */
@media (max-width: 560px) {
  .marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.marca__glifo {
  width: 26px;
  height: 26px;
  flex: none;
}

.nav-modulos {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-inline-start: auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.nav-modulos::-webkit-scrollbar { display: none; }

.nav-modulos a {
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-m);
  color: var(--texto-2);
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
}
/* Cuando el menú no cabe y se desliza, un degradado en el borde avisa de que hay
   más enlaces (antes no había ninguna pista). El último tramo, el del botón del
   tema, nunca se difumina. tema.js pone las clases según el desplazamiento. */
.nav-modulos {
  --fade-izq: 0px; --fade-der: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-izq), #000 calc(100% - 44px - var(--fade-der)), transparent calc(100% - 44px), #000 calc(100% - 44px));
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-izq), #000 calc(100% - 44px - var(--fade-der)), transparent calc(100% - 44px), #000 calc(100% - 44px));
}
.nav-modulos--mas-izq { --fade-izq: 28px; }
.nav-modulos--mas-der { --fade-der: 40px; }
/* Alto y ancho reservados: el botón llega vacío en el HTML y el icono lo pone el JavaScript. */
#interruptor-tema { min-width: 36px; min-height: 34px; }
/* «Saltar al contenido»: invisible hasta que se llega con el tabulador. */
.saltar {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 100;
  padding: 0.5rem 0.9rem; border-radius: var(--r-m);
  background: var(--acento); color: #fff; font-weight: 600; text-decoration: none;
  transition: top 0.15s;
}
.saltar:focus { top: 0.5rem; }
main:focus { outline: none; }
/* El botón del tema se queda siempre a la vista, al final, aunque el menú se deslice. */
.nav-modulos #interruptor-tema {
  position: sticky;
  right: 0;
  flex: none;
  background: var(--superficie);
  box-shadow: -14px 0 12px var(--superficie);
}
.nav-modulos a:hover { background: var(--superficie-hover); color: var(--texto); }
.nav-modulos a[aria-current="page"] { background: var(--acento-suave); color: var(--acento-texto, var(--acento)); font-weight: 600; }

main { padding-block: clamp(1.5rem, 4vw, 3rem); }

.pie-sitio {
  border-top: 1px solid var(--borde);
  margin-top: 4rem;
  padding-block: 2rem 3rem;
  background: var(--superficie);
  font-size: 0.875rem;
  color: var(--texto-2);
}

/* h2 en Acerca, que no tiene otros encabezados: saltar de h1 a h3 rompía el esquema. */
.pie-sitio :is(h2, h3) {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-3);
}

.pie-sitio ul { margin: 0; padding-inline-start: 1.1rem; }
.pie-derechos { margin-top: 0.6rem; color: var(--texto-3); }
.pie-sitio li { margin-bottom: 0.35rem; }

.pie-columnas {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* --- Utilidades --- */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.numero { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }
.sin-corte { white-space: nowrap; }
.silencio { color: var(--texto-3); }

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