/* ==========================================================================
   UTILIDADES Y ANIMACIONES
   Solo clases genéricas que no pertenecen a un componente concreto —
   los componentes visuales (tarjetas, hero, hub de vídeo, etc.) viven en
   components.css para evitar que una utilidad cargada después pise sus
   valores en cascada.
   ========================================================================== */

/* Accesibilidad */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Animaciones */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Revelado al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Retardo escalonado para grids (asociaciones, vídeos, tarjetas) */
.assoc-card:nth-child(1), .video-card:nth-child(1), .card:nth-child(1) { transition-delay: 0.05s; }
.assoc-card:nth-child(2), .video-card:nth-child(2), .card:nth-child(2) { transition-delay: 0.1s; }
.assoc-card:nth-child(3), .video-card:nth-child(3), .card:nth-child(3) { transition-delay: 0.15s; }
.assoc-card:nth-child(4), .video-card:nth-child(4), .card:nth-child(4) { transition-delay: 0.2s; }
.assoc-card:nth-child(5), .video-card:nth-child(5), .card:nth-child(5) { transition-delay: 0.25s; }
.assoc-card:nth-child(6), .video-card:nth-child(6), .card:nth-child(6) { transition-delay: 0.3s; }

/* Ripple de botones (main.js añade el span en cada clic) */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: rgba(20, 16, 13, 0.28);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: btnRipple 0.6s ease-out forwards;
}

.btn--outline-light .btn-ripple,
.btn--secondary .btn-ripple {
  background: rgba(247, 242, 232, 0.35);
}

@keyframes btnRipple {
  to {
    transform: translate(-50%, -50%) scale(18);
    opacity: 0;
  }
}

/* Botones y layout */
.btn--sm { padding: 0.6rem 1.4rem !important; font-size: 0.75rem !important; }
.btn--full { width: 100% !important; }
.btn--full-mt4 { width: 100%; margin-top: var(--space-4); }
.btn--full-mt3 { width: 100%; margin-top: 1rem; }
.btn--full-mt6 { width: 100%; margin-top: 1.5rem; }
.flex-grow { flex-grow: 1; }

/* Formulario */
.form-checkbox-input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-secondary); }
.form-checkbox-label { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.5; }
.form-checkbox-group { display: flex; align-items: flex-start; gap: var(--space-3); }

/* Pie institucional */
.footer__copy { text-align: center; font-size: 0.75rem; color: var(--color-text-on-dark-muted); line-height: 1.6; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 0.5rem; }

/* Fichas de asociación (páginas de detalle) */
.detail-text-muted { font-family: var(--font-family-sans); font-size: 1.02rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.detail-tasks-title { font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); font-size: 1.25rem; margin-bottom: 1rem; color: var(--color-primary-dark); }

.max-w-800 { max-width: 800px; margin: 0 auto; }
.mt-16-mb-8 { margin-top: 4rem; margin-bottom: 2rem; }