/* base.css — el piso técnico de todos los sitios. Sin estética: ni colores, ni fuentes, ni
   layout de marca (eso va en sitio.css, desde el contrato de la fase 1). Lo que está acá es lo
   que tiene que cumplirse igual en todos: accesibilidad WCAG 2.2 AA, movimiento reducido,
   transiciones entre páginas, menú funcional con y sin JS. No se edita por sitio. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* WCAG 2.4.11: un ancla nunca queda tapada por la cabecera fija. */
  scroll-padding-top: calc(var(--alto-cabecera, 4.5rem) + 1rem);
}

body { margin: 0; min-height: 100vh; min-height: 100dvh; }

img, picture, video, svg, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* El atributo hidden gana siempre, aunque una regla de display diga otra cosa. */
[hidden] { display: none !important; }

/* Foco: siempre visible con teclado, nunca suprimido. */
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

/* Saltar al contenido: primer elemento enfocable de cada página. */
.saltar {
  position: absolute; left: 1rem; top: -100vh; z-index: 1000;
  padding: .75rem 1rem; background: Canvas; color: CanvasText;
}
.saltar:focus { top: 1rem; }

/* Objetivos táctiles: 44×44 en controles (WCAG 2.5.8 pide 24; 44 es el de él). */
button, .boton, .menu a, .pie nav a, input[type="checkbox"] + label, input[type="radio"] + label {
  min-height: 44px;
}
button, .boton { min-width: 44px; }
.menu a, .pie nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }

/* Menú: sin JS se ve la lista entera (el botón queda hidden). Con JS, el botón lo abre:
   hoja a pantalla completa en móvil, panel lateral desde 768 px. La forma visual la pone
   sitio.css; acá solo el comportamiento. */
.js .menu { display: none; }
.js .menu.abierto {
  display: block; position: fixed; inset: 0; z-index: 900; overflow-y: auto;
  overscroll-behavior: contain; background: Canvas; color: CanvasText;
}
@media (min-width: 768px) {
  .js .menu.abierto { left: auto; width: min(26rem, 100%); }
}
.js.menu-abierto { overflow: hidden; }
/* El botón queda por encima del panel abierto: es el que lo cierra. */
.js.menu-abierto .menu-boton { position: relative; z-index: 901; }

/* Movimiento: todo lo que se mueve vive dentro de no-preference. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contenido que se revela al scrollear: visible por defecto (sin JS o con movimiento reducido
   se ve todo). sitio.js pone .sd (scroll-driven en CSS) o .io (IntersectionObserver). */
@media (prefers-reduced-motion: no-preference) {
  .io [data-revela]:not(.visible) { opacity: 0; }
}

@media print {
  [data-revela] { opacity: 1 !important; translate: none !important; animation: none !important; }
  .cabecera, .menu-boton, .saltar { position: static; }
}

/* Modo de alto contraste de Windows: que los controles no pierdan su borde. */
@media (forced-colors: active) {
  button, .boton { border: 1px solid ButtonText; }
}