/* Hace que el menú desplegable no aparezca de golpe, sino con un efecto suave */
.navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
}

.navbar .dropdown-item:hover {
    background-color: #f8f9fa;
}

.navbar .nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Animación elegante para las tarjetas de servicios */
.card-servicio {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.card-servicio:hover {
    transform: translateY(-5px); /* Flota ligeramente */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Alineación limpia para justificar textos en bloques de información */
.text-justify {
    text-align: justify;
}
/* Controla que todas las imágenes del carrusel midan exactamente lo mismo */
.carousel-img {
    height: 650px; /* Altura ideal para pantallas de escritorio */
}

/* Ajuste para que en celulares no se vea gigante y mantenga la proporción */
@media (max-width: 768px) {
    .carousel-img {
        height: 400px; 
    }
}
.footer-link {
    transition: color 0.3s ease;
}
.footer-link:hover {
    color: #ffc107 !important; /* Cambia a color amarillo de Bootstrap al hacer hover */
}
.hero-empresarial {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('images/slides/tu-imagen-corporativa.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 450px; /* Ajusta la altura para que el texto lead respire bien */
}
.hero-viajes-afuera {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('images/slides/tu-imagen-viajes.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 450px;
}