/* Fade de entrada: primer bloque de "¿Por qué elegir...?" y tarjetas de "¿Dónde podrás participar?" */
#qf-why-wrapper .qf-section-label,
#qf-why-wrapper .qf-panel:first-child .qf-item-wrap>*,
#donde-participar .dp-title,
#donde-participar .dp-item {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1), transform 900ms cubic-bezier(.22, 1, .36, 1);
}

#qf-why-wrapper .qf-panel:first-child .qf-img-half {
  opacity: 0;
  transition: opacity 1100ms ease 300ms;
}

#qf-why-wrapper.qf-in .qf-section-label,
#qf-why-wrapper.qf-in .qf-panel:first-child .qf-item-wrap>*,
#donde-participar .mf-in {
  opacity: 1;
  transform: none;
}

#qf-why-wrapper.qf-in .qf-panel:first-child .qf-img-half {
  opacity: 1;
}

#qf-why-wrapper.qf-in .qf-panel:first-child .qf-item-wrap>*:nth-child(1) {
  transition-delay: 200ms;
}

#qf-why-wrapper.qf-in .qf-panel:first-child .qf-item-wrap>*:nth-child(2) {
  transition-delay: 330ms;
}

#qf-why-wrapper.qf-in .qf-panel:first-child .qf-item-wrap>*:nth-child(3) {
  transition-delay: 460ms;
}

@media (prefers-reduced-motion: reduce) {

  #qf-why-wrapper .qf-section-label,
  #qf-why-wrapper .qf-panel:first-child .qf-item-wrap>*,
  #qf-why-wrapper .qf-panel:first-child .qf-img-half,
  #donde-participar .dp-title,
  #donde-participar .dp-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* "¿Dónde podrás participar?": entrada más rápida (desktop y móvil) */
#donde-participar .dp-title,
#donde-participar .dp-item {
  transform: translateY(18px);
  transition: opacity 450ms cubic-bezier(.22, 1, .36, 1), transform 450ms cubic-bezier(.22, 1, .36, 1);
}

#donde-participar .mf-in {
  transform: none;
}

/* Opt in only when the mobile observer is ready; without JS the cards stay visible. */
@media (max-width: 779px) and (prefers-reduced-motion: no-preference) {
  #donde-participar.dp-reveal-ready .dp-item {
    opacity: 0 !important;
    transform: translateY(18px) !important;
    transition: opacity 480ms cubic-bezier(.22, 1, .36, 1), transform 480ms cubic-bezier(.22, 1, .36, 1) !important;
    transition-delay: 0ms !important;
  }

  #donde-participar.dp-reveal-ready .dp-item.mf-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #donde-participar .dp-title,
  #donde-participar .dp-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}