/* Estilos personalizados */

/* Ajustes para el contenedor del navbar */
.container-principal {
    max-width: 1200px; /* Ancho máximo del contenedor (ajustar si es necesario) */
    margin: 0 auto; /* Centra el contenedor en la página */
}

/* Estilos para el footer */
.footer {
    padding: 20px 0;
}

/* Barra de navegación */
.navbar-custom {
    /*background-color: #004a80; /* Color de fondo */
    background-color: #4b8cc8; /* Color de fondo */
    /*padding: 0.5rem 1rem; /* Ajusta el padding superior e inferior si es necesario */
}

/* Centra los ítems dentro del contenedor del navbar */
.navbar-custom .navbar-collapse {
    /*display: flex;*/
    /*justify-content: center;*/
    width: 100%;
}

/* Estilos para los ítems de la barra de navegación */
.navbar-custom .navbar-nav {
    display: flex;
    /*justify-content: center; /* Centra el contenido horizontalmente */
    flex-wrap: nowrap; /* Evita que los ítems se envuelvan en múltiples líneas */
    width: 100%; /* Asegura que el contenedor de navegación ocupe todo el ancho disponible */
}

/* Estilos para los ítems de navegación */
.navbar-custom .navbar-nav .nav-item {
    /*margin: 0 5px; /* Espacio entre los ítems de navegación */
    display: flex; /* Habilita el modelo de caja flexible para los ítems */
    align-items: center; /* Centra verticalmente el contenido de los ítems */
}

/* Estilos para los enlaces en la barra de navegación */
.navbar-custom .navbar-nav .nav-link {
    color: #ffffff; /* Color de la fuente */
    /*font-family: 'Arial', sans-serif; /* Tipo de fuente */
    font-weight: bold; /* Estilo de fuente: negrita */
}

/* Estilo para el enlace activo */
.navbar-custom .navbar-nav .nav-link.active {
    color: #ffcc00; /* Color para el enlace activo */
}

/* Estilo para el enlace al pasar el ratón */
.navbar-custom .navbar-nav .nav-link:hover {
    color: #ffcc00; /* Color para el enlace al pasar el ratón */
}

/* Estilo para el logo en la barra de navegación */
.navbar-brand img {
    width: 150px; /* Ajusta el ancho del logo */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Estilo para el separador HTML */
.nav-separator {
    display: inline-block;
    width: 1px; /* Ancho del separador */
    height: 2rem; /* Altura del separador (ajustado a 2rem para mejor visibilidad) */
    background-color: #ffffff; /* Color del separador */
    margin: 0 1rem; /* Espacio a los lados del separador */
}

/* Estilos personalizados para el dropdown */
.navbar-custom .dropdown-menu {
    background-color: #004a80; /* Color de fondo del dropdown */
    border: none; /* Elimina el borde por defecto */
}

.navbar-custom .dropdown-item {
    color: #ffffff; /* Color del texto del ítem del dropdown */
    font-family: 'Arial', sans-serif; /* Tipo de fuente */
}

.navbar-custom .dropdown-item:hover {
    background-color: #003366; /* Color de fondo al pasar el ratón */
    color: #ffcc00; /* Color del texto al pasar el ratón */
}

.navbar-custom .nav-link.dropdown-toggle:hover {
    color: #ffcc00; /* Color del texto del ítem dropdown al pasar el ratón */
}

/* Ajustes para la visualización en dispositivos móviles */
@media (max-width: 767.98px) {
    .navbar-custom .navbar-nav {
        flex-direction: column; /* Coloca los ítems en una columna en dispositivos móviles */
        align-items: center; /* Centra los ítems horizontalmente */
    }

    .navbar-custom .navbar-nav .nav-item {
        margin: 0.5rem 0; /* Espacio entre los ítems de navegación en dispositivos móviles */
    }
}

/* Personalización del carrusel */
.carousel-item {
    height: 400px; /* Altura del carrusel */
}

.carousel-item img {
    object-fit: cover; /* Ajustar la imagen para que cubra todo el espacio */
    height: 100%; /* Asegurar que la imagen ocupe todo el alto */
}

/* Estilos para los textos del carrusel */
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro con transparencia */
    padding: 15px; /* Espaciado alrededor del texto */
    border-radius: 5px; /* Bordes redondeados */
}

/*.carousel-caption h5 {*/
    /*font-size: 24px; /* Tamaño de la fuente del título */
    /*color: #ffffff; /* Color del texto del título */
    /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Sombra del texto */
/*}*/

.carousel-caption p {
    font-size: 16px; /* Tamaño de la fuente de la descripción */
    color: #ffffff; /* Color del texto de la descripción */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Sombra del texto */
}




.full-width { width: 100%; padding: 0; }

.fondo_div {
    background: url('recursos/img/cta.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    color: white;
    padding: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Añade una sombra al texto para mejorar la legibilidad */
        }

/* Estilo para el primer iframe */
.facebook-iframe {
    width: 100%;
    height: 500px; /* Ajusta la altura según sea necesario */
}