/* ============================================================================
   BASE › ACCESIBILIDAD
   ----------------------------------------------------------------------------
   Todo lo que hace la página usable para quien navega con teclado, con lector
   de pantalla o con sensibilidad al movimiento.
   Está junto en un archivo a propósito: cuando sumes componentes nuevos, este
   es el archivo que consultás para no romper lo que ya funciona.
   ============================================================================ */

/* --- Foco visible ---------------------------------------------------------
   :focus-visible solo se dispara al navegar con Tab, no al hacer click con el
   mouse. Así el indicador está donde se necesita sin ensuciar el diseño. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- "Saltar al contenido" ------------------------------------------------
   Link invisible que aparece al presionar Tab por primera vez. Permite a un
   usuario de teclado saltear todo el menú y llegar directo al contenido. */
.saltar-al-contenido {
  position: absolute;
  left: -9999px;                                  /* fuera de pantalla */
  top: 0;
  background: var(--color-acento);
  color: var(--color-negro);
  padding: 10px 16px;
  font-weight: 800;
  z-index: 100;
}
.saltar-al-contenido:focus {
  left: 8px;
  top: 8px;                                       /* al recibir foco, entra en pantalla */
}

/* --- Texto solo para lectores de pantalla ---------------------------------
   Invisible a la vista pero leído en voz alta. Sirve para dar contexto extra
   sin alterar el diseño. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Movimiento reducido --------------------------------------------------
   Hay gente a la que las animaciones le producen mareo o migraña, y lo
   configura en su sistema operativo. Acá se respeta esa preferencia: el
   contenido aparece igual, pero sin movimiento.

   OJO al escalar: esta regla es global y usa !important a propósito, para
   cubrir también los componentes que agregues en el futuro sin tener que
   acordarte de nada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .animado { opacity: 1; }                        /* garantiza que se vea */
}