html {
    scroll-behavior: smooth;
}

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

/* Animación para el botón flotante de WhatsApp */
@keyframes whatsapp-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    50% {
        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    }
}

#whatsapp-float {
    animation: whatsapp-pulse 2s ease-in-out infinite !important;
}

/* Alineación de tarjetas de problemas en móvil */
@media (max-width: 500px) {
    #problemas article h3 {
        min-height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}



@media (max-width: 950px) {
    .btn-responsive {
        font-size: 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        letter-spacing: 0.05em !important;
    }
}

@media (max-width: 400px) {
    .btn-responsive {
        font-size: 11px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        letter-spacing: 0.05em !important;
    }
}


@media (max-width: 380px) {
    .btn-responsive {
        font-size: 10px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        letter-spacing: 0.05em !important;
    }
}

/* Degradado del banner principal */
.banner-overlay {
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.5) 0%, 
        rgba(0, 0, 0, 0.3) 80%, 
        transparent 100%);
}