body {
    font-family: 'grel-n', sans-serif;
    background: linear-gradient(360deg, var(--primary-color), var(--secondary-color)); /* variable 1 y variable 2 */
    margin-top: 70px; 
}
#activacionForm {
    margin-top: 30px;
}

.section-container {
    margin-top: 30px;
}

.navbar-nav .nav-link:hover {
    color: var(--hover-color);  /* variable 3 */
}

.navbar-nav .nav-link:hover i {
    color: var(--hover-color);  /* variable 3 */
}

.navbar-nav .nav-item.active .nav-link {
    color: var(--hover-color);  /* variable 3 */
}
.navbar-nav .nav-item.active .nav-link i {
    color: var(--hover-color);  /* variable 3 */
}

.navbar-nav .dropdown-item {
    color: var(--text-color);
    transition: color 0.3s, background-color 0.3s;
}

.navbar-brand span {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--secondary-color); 
    font-family: 'grel', sans-serif; /* variable 2 */
}

.navbar-nav .nav-link i {
    margin-right: 5px;
    color: var(--secondary-color); /* variable 2 */
}
.navbar-nav .nav-link {
    color: var(--secondary-color); /* variable 2 */
    transition: color 0.3s;
}

.section-card {
    background-color: var(--secondary-color); 
    color: var(--text-color); /* variable 4 */
    padding: 20px;
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.navbar {
    background: linear-gradient(360deg, var(--primary-color), var(--navbar-gradient-end)); /* variable 1 y variable 5 */
    top: 0px; 
    position: fixed;
    width: 100%;
    z-index: 1020;
    transition: top 0.3s;
    font-family: 'grel-n', sans-serif; 
}

.navbar-nav .dropdown-menu {
    background-color: var(--primary-color);  /* variable 1 */
}

.top-bar {
    background-color: var(--secondary-color);  /* variable 2 */
    color: #012b50;
    font-size: 0.9em;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1010; /* Cambiar a un valor menor que el de .navbar */
    transition: top 0.3s;
}

.navbar-nav .dropdown-item:hover {
    color: #012b50; 
    background-color: var(--secondary-color); /* variable 2 */
}

h2 {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--primary-color) 20px, var(--primary-color) calc(100% - 20px), rgba(255, 255, 255, 0) 100%); /* Degradado con desenfoque de 20px */
    color: var(--secondary-color); /* Color del texto */
    padding: 10px 20px; /* Relleno para el texto */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center; /* Alineación del texto al centro */
    font-size: 2em; /* Tamaño del texto */
    font-weight: bold; /* Peso del texto */
    margin: 20px 0; /* Márgenes para separar el título de otros elementos */
    position: relative; /* Posicionamiento relativo */
    text-transform: uppercase; /* Transformación de texto a mayúsculas */
}


.white-title {
    color: var(--secondary-color);
}











.banner-section {
    position: relative;
    width: 100%;
    height: 300px; /* Aumenté un poco la altura para darle más presencia al banner */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; /* Ajusté la transparencia para mejorar la legibilidad del contenido */
    z-index: 1; /* Colocación detrás del contenido */
    transition: transform 0.7s ease-in-out; /* Hice que la animación sea un poco más suave */
}

.banner-content {
    position: relative;
    z-index: 2; /* Colocación delante de la imagen de fondo */
    background: var(--navbar-gradient-end); /* Fondo celeste con un poco más de opacidad para destacar más el texto */
    padding: 50px 50px; /* Aumenté el padding para dar más espacio al contenido */
    width: 100%; /* Ajusté el ancho al 90% para mejorar la presentación */
    max-width: 100%; /* Máximo ancho del contenido para evitar que se expanda demasiado en pantallas grandes */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Añadí una sombra para darle un efecto de elevación */
}

.banner-section:hover .banner-background {
    transform: scale(1.1); /* Efecto de zoom en la imagen de fondo */
}

.banner-section i {
    margin-bottom: 15px; /* Aumenté el espacio entre el icono y el texto */
}

.banner-section h3 {
    font-size: 2em; /* Aumenté el tamaño del título para hacerlo más llamativo */
    margin-bottom: 15px;
}

.banner-section p {
    margin-bottom: 25px; /* Más espacio debajo del párrafo */
    font-size: 1.2em; /* Aumenté el tamaño del texto para mejorar la legibilidad */
}




.carousel-caption {
    background: linear-gradient(90deg, rgba(0, 139, 195, 0) 0%, var(--navbar-gradient-end) 0%, var(--primary-color) 20%, rgba(0, 139, 195, 0) 100%);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px); /* Efecto de desenfoque para el fondo */
    color: white;
}

.carousel-caption h5 {
    font-size: 1.75em;
    font-weight: bold;
}

.carousel-caption p {
    font-size: 1.2em;
    margin-top: 10px;
}


.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


@media (max-width: 768px) {
    .carousel-item img {
        height: auto; /* Deja que la altura se ajuste automáticamente en móviles */
        object-fit: contain; /* Asegura que toda la imagen sea visible sin recorte */
    }

    .carousel-caption {
        background: linear-gradient(90deg, rgba(0, 139, 195, 0) 0%, var(--navbar-gradient-end) 0%, var(--primary-color) 20%, rgba(0, 139, 195, 0) 100%);
        padding: 10px; /* Reduce el padding para un mejor ajuste en pantallas pequeñas */
        border-radius: 5px; /* Reduce el borde redondeado para móviles */
        font-size: 0.9em; /* Disminuye el tamaño de fuente para mejor legibilidad */
    }

    .carousel-caption h5 {
        font-size: 1.3em; /* Ajusta el tamaño del título en móviles */
    }

    .carousel-caption p {
        font-size: 1em; /* Ajusta el tamaño del texto en móviles */
    }
}



.card-title {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--navbar-gradient-end); /* Azul */
}

.btn-primary {
    background-color: var(--navbar-gradient-end); /* Azul */
    border-color: var(--navbar-gradient-end); /* Azul */
}

.btn-primary:hover {
    background-color: var(--navbar-gradient-end); /* Azul más oscuro */
    border-color: var(--navbar-gradient-end); /* Azul más oscuro */
}

.pagination .page-item.active .page-link {
    background-color: var(--navbar-gradient-end);
    border-color: var(--navbar-gradient-end);
}

.pagination .page-link {
    color: var(--primary-color);
}

.pagination .page-link:hover {
    color: var(--navbar-gradient-end);
}


.pagination {
    margin-top: 20px;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--navbar-gradient-end);
}

.pagination .page-link {
    color: var(--navbar-gradient-end);
}

.pagination .page-link:hover {
    color: var(--navbar-gradient-end);
}




/* Subtítulo de la sección */
.section-subtitle {
    font-size: 1.5em;
    color: var(--primary-color); /* Color azul */
    margin-bottom: 30px;
}



/* Ajusta el espaciado entre las fotos */
.card {
    margin-bottom: 30px;
}

/* Estilos exclusivos para las categorías */


.section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.section-card h3 {
    color: var(--navbar-gradient-end); /* Asegurar que los encabezados también sean azul marino */
}