/* Fondo negro */
        body {
            background-color: #000;
            color: #fff; /* Texto en color blanco */
        }
               
        /* Estilos para la portada con la imagen de fondo */
        .portada {
            background-color: #f8f9fa; /* Cambia el color de fondo de la portada si es necesario */
            background-image: url('../imgs/portada.jpg'); /* Reemplaza con la URL de tu imagen de fondo */
            background-size: cover;
            background-position: center;
            height: 400px; /* Altura inicial de la portada */
        }

        /* Estilos para el navbar */
        .navbar {
            transition: background-color 0.3s ease; /* Transición suave del color de fondo */
        }

        /* Estilos para el contenido principal debajo del navbar */
        .contenido {
            margin-top: 400px; /* Margen superior para dejar espacio para la portada */
            background-color: #000; /* Cambia el color de fondo del contenido principal si es necesario */
        }
        #scrollToTopContainer {
            position: fixed;
            bottom: 20px;
            right: -60px; /* Esto mueve el elemento fuera de la pantalla hacia la derecha */
            transition: right 0.3s ease; /* Agrega una transición suave para animar el desplazamiento */
            width: 50px; /* Ancho del contenedor */
            height: 50px; /* Altura del contenedor */
            border-radius: 50%; /* Hace que el contenedor sea un círculo */
            background-color: #007bff; /* Color de fondo */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #FFFFFF;
            font-size: 24px;
            font-weight: bold;
            z-index: 2;
        }

        .modal-title,
        .modal-body {
            color: #000000;
        }
        .navbar-light .navbar-nav .nav-link:hover {
            /*background-color: #df3071; /* Cambio de color al pasar el mouse */
            /*border-color: #196eb7;  Cambio de color al pasar el mouse */
        }

        /* Color terciario #00a67d */
        .card-title {
            color: #000000;
        }
        .btn-secondary{
            background-color: #00a67d;
            border-color: #00a67d;
        }
       
        /* Color de fondo para la barra de navegación */
        .navbar {
            background-color: #df3079;
        }
        /* Aplica estilos para que los elementos comiencen con mayúscula */
        .nav-link {
            text-transform: capitalize;
        }
        /* Color de fondo para la barra de navegación al pasar el mouse */
        .navbar:hover {
            background-color: #00a67d; /* Cambio de color al pasar el mouse */
        }

        /* Aplica estilos al elemento cuando está activo */
        .nav-item:active,
        .nav-item:hover {
            font-size: 130%; /* Aumenta el tamaño de fuente al 130% cuando se activa o se coloca el puntero sobre él */
            font-weight: bold; /* Aplica negritas */
        }

        /* Color de fondo para el menú desplegable del navbar */
        .dropdown-menu {
            background-color: #df3079;
        }

        /* Color de fondo para el menú desplegable del navbar al pasar el mouse */
        .dropdown-menu:hover {
            background-color: #00a67d; /* Cambio de color al pasar el mouse */
        }
        .hidden {
            display: none;
        }
        .separador {
            border-right: 1px solid #ccc; /* Establece un borde derecho de 1 píxel y color tenue */
            margin-right: 10px; /* Agrega un espacio a la derecha del separador */
            padding-right: 10px; /* Agrega espacio adicional a la derecha del separador para el efecto visual */
        }

/* PRESENTACION */
.header-bg {
            background: linear-gradient(45deg, #f50999, #0a0008);
            color: white;
            padding: 80px 0;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .header-text {
            font-size: 36px;
            font-weight: bold;
            animation: fadeInUp 1.5s ease-in-out;
        }
        .header-description {
            font-size: 24px;
            animation: fadeInUp 1.5s ease-in-out 0.5s;
        }
        .header-button {
            display: inline-block;
            margin-top: 30px;
            font-size: 20px;
            font-weight: bold;
            text-decoration: none;
            background-color: #0a0008;
            color: white;
            padding: 15px 30px;
            border-radius: 5px;
            transition: background-color 0.3s ease-in-out;
            animation: fadeInUp 1.5s ease-in-out 1s;
        }
        .header-button:hover {
            background-color: #f8f9fa;
            color: #0a0008;
        }
        .header-image {
            margin-top: 40px;
            opacity: 0;
            animation: fadeInUpOpacity 1.5s ease-in-out 1.5s forwards;
        }
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes fadeInUpOpacity {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }