/* Estilos específicos para la sección de Nuestros Servicios */

/* Ajuste al layout de servicios para evitar que el texto se corte */
.services-carousel {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.5rem !important;
    overflow: visible !important;
    padding: 1rem 0 !important;
    margin: 0 !important;
}

.service-card {
    min-height: 500px !important; /* Altura mínima para que quepa todo el contenido */
    height: auto !important; /* Permite crecer si es necesario */
    width: 100% !important; /* Asegura que use todo el ancho disponible */
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: visible !important; /* Permite que el contenido sobresalga si es necesario */
}

.service-card h3 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

.service-card p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
    flex-grow: 1 !important; /* Permite que el párrafo ocupe el espacio disponible */
}

/* Estilo especial para el cuadro de Soluciones Label */
.service-card:nth-child(5) {
    min-height: 520px !important; /* Un poco más alto para el que necesita más espacio */
}

.service-card .cta-button {
    align-self: flex-start !important;
    margin-top: auto !important; /* Empuja el botón al final de la tarjeta */
    position: relative !important;
    bottom: 0 !important;
}

/* Estilo para la sección general de servicios */
#services-overview {
    padding-bottom: 5rem !important;
}

#services-overview h2 {
    margin-bottom: 1rem !important;
}

#services-overview > p {
    margin-bottom: 3rem !important;
}

/* Estilos para los iconos de servicios */
.service-icon {
    margin-bottom: 1.5rem !important;
}

/* Mejoras responsive */
@media (max-width: 1600px) {
    .services-carousel {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 1200px) {
    .services-carousel {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .services-carousel {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }
    
    .service-card {
        max-width: 450px !important;
    }
}