.hero-section {
    /* Define un alto mínimo para que el fondo sea visible */
    min-height: 500px;
    /* Ajusta según lo necesites */
    width: 100%;
    /* Opcional, suele ser por defecto */
    display: flex;
    /* Para centrar el contenido (introduccion) si lo deseas */
    /* align-items: center; /* Centra verticalmente */
    justify-content: center;
    /* Centra horizontalmente */

    /* La magia del degradado y la imagen */
    background:
        /* 1. Degradado blanco a transparente */
        linear-gradient(to top, white 2%, rgba(255, 255, 255, .8) 3%, rgba(255, 255, 255, .5) 4%, rgba(255, 255, 255, 0) 6%),
        /* 2. La imagen de fondo */
        url('../images/proyectos/paneles.avif') no-repeat center top;

    /* Ajusta el tamaño de la imagen */
    background-size: cover;
    /* Cubre todo el espacio, cortando si es necesario */

}

.encabezado .logo_completo {
    /* Aplica la animación */
    animation: fadeInSlideUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    /* 'forwards' mantiene el estado final */
}

/* Ajustes a tu .introduccion para que se vea bien sobre el nuevo fondo */
.encabezado {
    text-align: center;
    /* margin-top: 70px;  Ya no es necesario si usas flexbox para centrar */
    margin-top: 80px;
    color: var(--mdc-theme-on-primary);
    /* background-color: rgba(255, 255, 255, 0.8); Fondo semi-transparente para el texto */
    border-radius: 8px;
    /* Bordes redondeados */
    max-width: 800px;
    /* Limita el ancho del contenido de introducción */
}

.logo_completo {
    height: 180px;
    /* Ajusta la altura del logo según necesites */
    width: auto;
    margin-top: 100px;
    /* Espacio entre el logo y el texto */
}

.centrado {
    display: flex;
    text-align: center;
    justify-content: center;
}

.titulo {
    /* margin-top: 70px;  Ya no es necesario si usas flexbox para centrar */
    /* background-color: rgba(255, 255, 255, 0.8); Fondo semi-transparente para el texto */
    color: var(--mdc-theme-primary);

    width: 55%;
    /* Bordes redondeados */
    /* Limita el ancho del contenido de introducción */
}

.textoCenter {
    text-align: center;
    /* margin-top: 70px;  Ya no es necesario si usas flexbox para centrar */
    /* background-color: rgba(255, 255, 255, 0.8); Fondo semi-transparente para el texto */
    color: var(--mdc-theme-primary);
    width: 55%;
    /* Limita el ancho del contenido de introducción */
}

.anima_interconectado {
    /*background-color: black;*/
    margin-top: 100px;
    position: relative;
    padding-top: 300px;
    /* Espacio para el sol y nubes */
}

.img-base {
    width: 50%;
    display: block;
}

/* Posicionando el Sol */
.img-sol {
    position: absolute;
    width: 12%;
    top: 0;
    left: 15%;
    z-index: 1;
    animation: pulso 2s infinite alternate ease-in-out;
}

/* Posicionando las Nubes */
.img-nube {
    position: absolute;
    z-index: 2;
    opacity: 0.8;
}

.nube-1 {
    top: 6%;
    width: 8%;
    left: 23%;
}

.nube-2 {
    top: 19%;
    left: 14%;
    width: 6%;
}

.nube-3 {
    top: 8%;
    right: 40%;
    width: 5%;
}

.nube-4 {
    top: 10%;
    right: 20%;
    width: 14%;
}

.flecha-flujo {
    position: absolute;
    width: 1%;
    animation: flujo-luz 2s infinite;
}

.abajo {
    transform: scaleY(-1);
}

.derecha {
    transform: rotate(90deg);
}

.rayo-0 {
    top: 44%;
    left: 46%;
}

.flachaA-2 {
    top: 51%;
    left: 46%;
}

.flachaD-1 {
    top: 56%;
    left: 51%;
}

.flachaD-2 {
    top: 56%;
    left: 55%;
}

/* Animación de los Rayos de Energía */
.rayo-animado {
    position: absolute;
    width: 1%;
    animation: flujo-luz 2s infinite;
}

.rayo-fijo {
    position: absolute;
    width: 1%;
}

.rayo-1 {
    top: 56%;
    left: 49%;
}

.rayo-2 {
    top: 56%;
    left: 53%;
}

.rayo-3 {
    top: 56%;
    left: 57%;
}

.rayo-4 {
    top: 50%;
    left: 60%;
}

.flachaA-3 {
    top: 57%;
    left: 60%;
}

@keyframes pulso {
    from {
        transform: scale(1);
        filter: drop-shadow(0 0 2px #f9d71c);
    }

    to {
        transform: scale(1.05);
        filter: drop-shadow(0 0 20px #f9d71c);
    }
}

@keyframes flujo-luz {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}