/* Navegador */
.nav-link:hover {
    color: #0d6efd !important;
    /* Color azul al pasar el mouse */
}


/* Estilos personalizados para los iconos */
.social-icon {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: #0d6efd !important;
    /* Color azul al pasar el mouse */
}

/* Opcional: Asegura que el footer no tape contenido en pantallas muy pequeñas */
footer {
    margin-top: auto;
    /* Empuja el footer al fondo si usas flexbox en el body */
}

/* Proyectos */
.nav-pills .nav-link.active {
    background-color: #0d2642;
}


/*Proyectos*/
/* Personalización ligera para igualar el estilo */
.nav-pills .nav-link.active {
    background-color: #0d2642;
}

.nav-link {
    color: #555;
    font-weight: 500;
}

.project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.btn-outline-custom {
    color: #0d2642;
    border-color: #0d2642;
}

.btn-outline-custom:hover {
    background-color: #0d2642;
    color: white;
}

/* ESTILOS DEL FILTRO */
.filter-btn {
    border: 2px solid #0d2642;
    color: #0d2642;
    font-weight: 600;
    padding: 8px 20px;
    margin: 0 5px;
    border-radius: 50px;
    /* Bordes redondeados tipo "píldora" */
    background: transparent;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: #0d2642;
    color: #fff;
    /* Dorado */
    box-shadow: 0 4px 10px rgba(13, 38, 66, 0.3);
}

/* ANIMACIÓN AL FILTRAR */
.project-item {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ESTILOS PREVIOS (Modal y Tarjetas) */
.media-container {
    height: 500px;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-container img,
.media-container iframe,
.media-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card {
    transition: transform 0.3s;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-5px);
}

.btn-custom {
    background-color: #0d2642;
    color: white;
    border-radius: 0;
    transition: 0.3s;
}

.btn-custom:hover {
    background-color: #596dc5;
    color: #0d2642;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro tras la flecha */
    border-radius: 50%;
    padding: 20px;
    pointer-events: auto;
    cursor: pointer;
}

/* Desactivamos el clic en toda la barra lateral */
.carousel-control-prev,
.carousel-control-next {
    pointer-events: none;
    width: 10%;
    /* Espacio que ocupa la zona de la flecha */
}

/* Esto hará que el navegador respete los saltos de línea del texto */
/* Estilo para la lista dentro del modal */
#m-desc ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

#m-desc li {
    margin-bottom: 0.25rem;
}

/* Espaciado de los párrafos generados */
#m-desc p {
    margin-bottom: 1rem;
}


/* Estilos para el slider de logos */
.logo-slider {
    overflow: hidden;
    padding: 40px 0;
    background: #f8f9fa;
    white-space: nowrap;
    position: relative;
}

.logo-track {
    display: inline-flex;
    animation: scroll 25s linear infinite;
}

.logo-item {
    width: 200px;
    margin: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    max-width: 150px;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    opacity: 0.7;
}

.logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Animación del scroll */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Pausar al pasar el ratón */
.logo-slider:hover .logo-track {
    animation-play-state: paused;
}

.hero-section {
    position: relative;
    /* Reemplaza con tu ruta local */
    background-image: url('../img/FONDOS/FONDO 1.jpg');
    background-size: cover;
    /* La imagen cubre todo el espacio */
    background-position: center;
    /* La imagen se centra */
    background-repeat: no-repeat;
    padding: 100px 0;
    /* Espacio arriba y abajo */
    color: white;
    /* Cambiamos el texto a blanco por defecto */
}

/* Capa oscura para que el texto resalte (Opcional pero recomendado) */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Asegura que el contenido esté por encima de la capa oscura */
.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Ajuste de color para que contraste con el fondo oscuro */
.hero-section .text-dark {
    color: #f8f9fa !important;
}


#nosotros {
    position: relative;
    /* Reemplaza con tu ruta local */
    background-image: url('../img/FONDOS/FONDO 4.webp');
    background-size: cover;
    /* La imagen cubre todo el espacio */
    background-position: center;
    /* La imagen se centra */
    background-repeat: no-repeat;
    padding: 100px 0;
    /* Espacio arriba y abajo */
    color: white;
    /* Cambiamos el texto a blanco por defecto */
}


/* Asegura que el contenido esté por encima de la capa de fondo */
#nosotros .container {
    position: relative;
    z-index: 1;
}

#nosotros::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
    z-index: 1;
}

/* Estilo para el efecto hover que tienes en tus clases */
.hover-shadow {
    transition: all 0.3s ease;
    background-color: white;
    /* Para que las cajas resalten sobre el fondo */
}


#link-noticias:hover {
    color: #000000 !important;
    /* Cambia aquí al color que desees, por ejemplo, amarillo */
}

.btn-oferta-animado {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.btn-oferta-animado:hover {
    transform: translateY(-3px); /* Se eleva un poquito */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    filter: brightness(1.1);
}