/* ============================================================================
   BASE.CSS  —  Reset, tipografía y esqueleto de página
   Depende de: tokens.css
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

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

body {
  min-height: 100vh;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-prosa);
  font-size: var(--t-base);
  line-height: var(--lh-prosa);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--v-medio) var(--curva),
              color var(--v-medio) var(--curva);
}

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

/* -- Titulares ------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--f-prosa);
  line-height: var(--lh-apretado);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl);  margin-block: var(--e-7) var(--e-3); }
h3 { font-size: var(--t-lg);  margin-block: var(--e-6) var(--e-2); }
h4 { font-size: var(--t-md);  margin-block: var(--e-5) var(--e-2); }

/* Numeración automática de secciones dentro de una lección.
   Añade class="numerar" al <article> para activarla.                        */
.numerar { counter-reset: seccion; }
.numerar h2 { counter-increment: seccion; counter-reset: subseccion; }
.numerar h2::before {
  content: counter(seccion) ".";
  color: var(--c-texto-tenue);
  font-variant-numeric: tabular-nums;
  margin-right: 0.5ch;
  font-weight: 400;
}

p  { margin-block: var(--e-4); }
p + p { margin-top: var(--e-3); }

strong { font-weight: 650; }
em     { font-style: italic; }

small { font-size: var(--t-sm); color: var(--c-texto-tenue); }

a {
  color: var(--c-marca);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--v-rapido) var(--curva);
}
a:hover { color: var(--c-texto); }

code, kbd {
  font-family: var(--f-mono);
  font-size: 0.9em;
}

kbd {
  background: var(--c-superficie-2);
  border: 1px solid var(--c-borde);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 0.1em 0.45em;
  font-size: 0.8em;
  color: var(--c-texto-suave);
  white-space: nowrap;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-borde);
  margin-block: var(--e-7);
}

::selection { background: var(--c-marca-suave); color: var(--c-texto); }

:focus-visible {
  outline: 2px solid var(--c-marca);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* -- Esqueleto ------------------------------------------------------------ */

.pagina {
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.prosa      { max-width: var(--ancho-prosa); margin-inline: auto; }
.prosa--ancho { max-width: var(--ancho-ancho); }

/* Una figura que se ensancha más allá de la columna de texto */
.desborde {
  width: min(var(--ancho-ancho), calc(100vw - 2 * var(--e-5)));
  margin-inline: calc(50% - min(var(--ancho-ancho), calc(100vw - 2 * var(--e-5))) / 2);
}

.centrado { text-align: center; }

.salto { display: block; height: var(--e-7); }

/* -- Utilidad de accesibilidad -------------------------------------------- */

.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar-al-contenido {
  position: absolute;
  left: var(--e-4); top: -4rem;
  z-index: 100;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--e-2) var(--e-4);
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  transition: top var(--v-medio) var(--curva);
}
.saltar-al-contenido:focus { top: var(--e-4); }