#principal {
    color: rgba(255, 255, 255, 0.219);
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Fondo negro */
    font-family: 'Poppins', sans-serif;

}



#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* Detrás del logo */
}

.logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000000;
    color: #ffffff;
    flex-direction: column;
    position: relative; /* Añadido para gestionar el posicionamiento */
}

.logo-section img {
    width: 100%;
    max-width: 500px; /* Ajusta el tamaño máximo del logo */
    height: auto;
    margin-bottom: 20px; /* Espaciado inferior entre las imágenes */
}

#logoimg {
    width: 100%;
    max-width: 700px; /* LOGO DE INNOVAVION -Ajusta el tamaño máximo del logo */
    height: auto;
    margin-bottom: 20px; /* Espaciado inferior entre las imágenes */
}

.logo {
    width: 500px; /* Ajusta este valor según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
    pointer-events: auto; /* Permite hacer clic en el logo */
    
}

.innovacion {
    width: 600px;
    height: 100px;
}

.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #000000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2; /* Frente a las partículas */
}

.main-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.main-header .brand img {
    max-height: 51px;
}

.nav {
    display: flex;
    align-items: center;
}

.nav .btn {
    margin-left: 10px;
}

/* Estilos para la sección */
section {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Color de fondo opcional */
    padding: 20px; /* Añadir padding para asegurarse de que el contenido no toque los bordes */
}

/* Estilos para el contenedor */
.container {
    background-color: #fff; /* Fondo blanco para el contenedor */
    padding: 80px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    max-width: 1200px; /* Ancho máximo */
    text-align: left; /* Texto centrado */
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho total del contenedor */

}

.container img {
    width: 100%;
    height: auto;
    max-width: 100%; /* Ajusta el ancho máximo según sea necesario */
    margin-bottom: 20px; /* Espaciado inferior entre las imágenes */
}

/* Estilos para el contenido */
.about-content h2 {
    font-size: 3em;
    margin-bottom: 20px;
    color: #000000; /* Color del texto */
}

.about-content p {
    font-size: 1.25em;
    color: #000000; /* Color del texto */
    margin-bottom: 15px;
    line-height: 1.5; /* Espaciado entre líneas */
}

.ghosted {
    position: relative;
}

.ghosted-light::after {
    content: attr(data-animate-function);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.2);
    z-index: -1;
}
/* Media Queries para tamaños de pantalla más grandes */
@media (min-width: 768px) {
    .container {
        padding: 60px; /* Incrementar padding en pantallas más grandes */
    }

    .about-content h2 {
        font-size: 2.5em; /* Incrementar tamaño de fuente */
    }

    .about-content p {
        font-size: 1.25em; /* Incrementar tamaño de fuente */
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 80px; /* Incrementar padding en pantallas más grandes */
    }

    .about-content h2 {
        font-size: 3em; /* Incrementar tamaño de fuente */
    }

    .about-content p {
        font-size: 1.5em; /* Incrementar tamaño de fuente */
    }
}