/* CSS Document */



/* Fondo del carrusel */


/* Ajuste de imagen para formato panorámico */
.carousel-inner .carousel-item img {
    width: 100%; /* Ocupa el ancho completo */
    height: auto; /* Mantiene la proporción */
    max-height: 800px; /* Limita la altura para un efecto panorámico */
    object-fit: cover; /* Corta la imagen para adaptarla a la altura sin distorsionarla */
}
/* Barra de navegación fija en la parte superior */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* Asegura que quede encima de otros elementos */
}

/* Ajuste de margen para el contenido para que no quede oculto detrás de la barra */
body {
    padding-top: 80px; /* Ajusta este valor según la altura de tu barra de navegación */
}
/* Estilo para que el menú móvil deje de ser transparente cuando esté desplegado */
.navbar.navbar-light {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo ligeramente transparente */
    transition: background-color 0.3s ease; /* Animación suave */
}

/* Cambia el fondo cuando el menú está expandido en dispositivos móviles */
.navbar-collapse[aria-expanded="true"] {
    background-color: #ffffff; /* Fondo sólido */
}

/* También ajusta el color de fondo del botón hamburguesa cuando está activo */
.navbar-toggler[aria-expanded="true"] {
    background-color: rgba(0, 0, 0, 0.1); /* Ajusta el color si deseas */
}


.carousel-inner {
    position:inherit;
    z-index: 2;
}

.img-reducida {
    max-height: 400px;
    width: auto;
    margin: 0 auto;
}
.text-gold {
    color: #FFCC28;
}
/* Transiciones generales */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Animación de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animaciones específicas */
.jumbotron {
    animation: fadeIn 1.5s ease-in-out;
}

.carousel-inner .carousel-item img {
    animation: fadeIn 1.5s ease-in-out;
}

/* Encabezados de sección */
section h2 {
    animation: fadeIn 1.2s ease-in-out;
}

/* Tarjetas de servicio */
#servicios .col-md-4 {
    animation: fadeIn 1s ease-in-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#servicios .col-md-4:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Elementos del carrusel */
.carousel-caption {
    animation: fadeIn 1.5s ease-in-out;
}

/* Navegación */
.navbar {
    animation: fadeIn 1s ease-in-out;
}
.project {
    position: relative;
    text-align: center;
}

.project img {
    transition: transform 0.3s ease;
}

.project img:hover {
    transform: scale(1.1); /* Efecto de zoom en la imagen */
}

.project .description {
    display: none; /* Oculta el texto por defecto */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro con opacidad */
    color: #fff; /* Texto blanco */
    padding: 10px;
    border-radius: 8px;
    width: 90%;
}

.project:hover .description {
    display: block; /* Muestra el texto cuando el mouse pasa por encima */
}