/* ===================================================
   ESTILOS DE INTERACCIÓN Y TARJETAS DE SERVICIOS - DICA
   =================================================== */

/* Animación suave al pasar el cursor sobre la tarjeta */
.card-servicio-interactive {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.card-servicio-interactive:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(11, 26, 45, 0.15) !important;
    border-color: #0056b3 !important;
}

/* Animación en el contenedor del ícono */
.card-servicio-interactive:hover .icon-box-side {
    transform: scale(1.1) rotate(-3deg);
    transition: transform 0.3s ease;
}

/* Efecto hover suave en los checks de la lista */
.card-servicio-interactive ul li {
    transition: color 0.2s ease;
}

.card-servicio-interactive ul li:hover {
    color: #000 !important;
}

/* Capa azul marino sólido uniforme sobre la imagen de la tarjeta */
.card-servicio-interactive .overlay-azul-dica {
    background-color: rgba(11, 26, 45, 0.75) !important; /* Azul marino sólido DICA con 75% opacidad */
    transition: background-color 0.3s ease;
}

/* Efecto opcional: al pasar el cursor, la foto se aclara un poco suavemente */
.card-servicio-interactive:hover .overlay-azul-dica {
    background-color: rgba(11, 26, 45, 0.60) !important;
}