* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
body {
  font-family: var(--fuente);
  font-size: var(--texto-md);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.6;
  min-height: 100vh;
}
h1 { font-size: var(--texto-xl); } h2 { font-size: var(--texto-lg); }
h1:focus, h2:focus { outline: none; }
a { color: var(--color-primario); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; }
img, svg { max-width: 100%; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

#main { max-width: 720px; margin: 0 auto; padding: var(--esp-4) var(--esp-4) 96px; }
@media (min-width: 900px) { #main { max-width: calc(1040px + 240px); padding-left: 240px; padding-bottom: var(--esp-6); } }

/* Contenido de respaldo sin JavaScript. Se estiliza igual que el resto para que
   quien caiga aquí lea algo digno y no un volcado de texto sin formato. */
.sin-script { max-width: 720px; margin: 0 auto; padding: var(--esp-6) var(--esp-4); }
.sin-script h1 { font-size: var(--texto-2xl); margin-bottom: var(--esp-4); text-wrap: balance; }
.sin-script h2 { font-size: var(--texto-xl); margin: var(--esp-6) 0 var(--esp-3); }
.sin-script p { margin-bottom: var(--esp-4); color: var(--color-texto-secundario); text-wrap: pretty; }
.sin-script ul { padding-left: var(--esp-5); }
.sin-script li { margin-bottom: var(--esp-2); }

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

@media print {
  body { background: #fff; color: #000; }
  .no-imprimir, nav { display: none !important; }
  #main { max-width: none; padding: 0; }
  .tarjeta { box-shadow: none; border: 1px solid #000; break-inside: avoid; }
  .grid-2col { display: block; }
}