/* =============================================================
   OPSFET Flujo · Responsive overrides + accesibilidad
   Media queries que cruzan capas (header + opciones + servicio +
   footer + resumen) y el respeto a prefers-reduced-motion.
   Cargar al FINAL para que sus reglas ganen al resto.
   ============================================================= */

@media (max-width: 720px) {
    .opsfet-flujo-header {
        padding: 14px 22px !important;
        gap: 14px !important;
    }
    .opsfet-flujo-logo {
        font-size: 16px !important;
    }
    .opsfet-flujo-body {
        padding: 36px 22px 60px !important;
    }
    .opsfet-flujo-subtitulo {
        margin-bottom: 32px !important;
    }
    .opsfet-flujo-opcion {
        padding: 18px 56px 18px 22px !important;
        min-height: 80px !important;
    }
    /* En móvil, las cards de servicio se compactan y alinean a la izquierda
       (como las opciones normales) para no dejar espacio en blanco vertical. */
    .opsfet-flujo-servicio {
        padding: 16px 56px 16px 22px !important;
        min-height: auto !important;
        text-align: left !important;
        align-items: flex-start !important;
    }
    .opsfet-flujo-servicio .opsfet-flujo-opcion-titulo {
        margin-top: 6px !important;
        font-size: 17px !important;
    }
    .opsfet-flujo-servicio .opsfet-flujo-opcion-desc {
        text-align: left !important;
        margin-top: 2px !important;
    }
    .opsfet-flujo-servicio-tag {
        align-self: flex-start !important;
        margin-bottom: 4px !important;
    }
    /* Check redondeado en el medio derecho, igual que las otras opciones. */
    .opsfet-flujo-servicio::before,
    .opsfet-flujo-servicio::after {
        top: 50% !important;
        right: 18px !important;
        transform: translateY(-50%);
    }
    .opsfet-flujo-servicio::after {
        transform: translateY(-50%) scale(0);
    }
    .opsfet-flujo-servicio.is-selected::after {
        transform: translateY(-50%) scale(1);
    }
    .opsfet-flujo-cta {
        width: 100% !important;
        max-width: 360px !important;
    }
    .opsfet-flujo-footer {
        padding: 14px 22px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .opsfet-flujo-legal {
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 11px !important;
    }
    .opsfet-flujo-resumen {
        padding: 22px 24px !important;
    }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .opsfet-flujo,
    .opsfet-flujo *,
    .opsfet-flujo *::before,
    .opsfet-flujo *::after {
        animation: none !important;
        transition: none !important;
    }
}