/* base.css — reinicio mínimo y maquetación de la ventana de NORA. Sin estilos en línea (la CSP los prohíbe). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nora-fondo); color: var(--nora-texto);
  font: var(--nora-t-md)/var(--nora-interlineado) var(--nora-fuente);
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--nora-e3); font-weight: 650; font-family: var(--nora-fuente-titulo); }
h1 { font-size: var(--nora-t-xl); }
h2 { font-size: var(--nora-t-lg); }
h3 { font-size: var(--nora-t-md); }
p { margin: 0 0 var(--nora-e3); }
a { color: var(--nora-naranja-texto); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
small, .suave { color: var(--nora-texto-suave); }
small { font-size: var(--nora-t-sm); }
ol, ul { margin: 0 0 var(--nora-e3); padding-left: 1.4em; }
li { margin-bottom: var(--nora-e1); }
code { font: 0.9em ui-monospace, Consolas, monospace; background: var(--nora-info-fondo); padding: 1px 5px; border-radius: 4px; }

/* foco visible en TODO lo interactivo (anillo oscuro + separación blanca) */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--nora-foco); outline-offset: 2px; box-shadow: 0 0 0 5px var(--nora-superficie); border-radius: 4px; }
main:focus { outline: none; }

.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salto { position: absolute; left: var(--nora-e3); top: -100px; z-index: 10; background: var(--nora-superficie); color: var(--nora-texto); padding: var(--nora-e3) var(--nora-e4); border-radius: var(--nora-radio-sm); border: 2px solid var(--nora-foco); }
.salto:focus { top: var(--nora-e3); }
[hidden] { display: none !important; }

/* estructura de la ventana (la cabecera de marca y el banner viven en shell.css) */
main { max-width: var(--nora-ancho); margin: 0 auto; padding: var(--nora-e5) var(--nora-e4) var(--nora-e7); }
.pie { max-width: var(--nora-ancho); margin: 0 auto; padding: 0 var(--nora-e4) var(--nora-e6); color: var(--nora-texto-suave); font-size: var(--nora-t-sm); }
.cuadricula { display: grid; gap: var(--nora-e4); }
@media (min-width: 720px) { .cuadricula.dos { grid-template-columns: 1fr 1fr; } }
.fila { display: flex; flex-wrap: wrap; gap: var(--nora-e3); align-items: center; }
.pila > * + * { margin-top: var(--nora-e4); }
.centrado { text-align: center; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }