body{
    background-image: url('../img/infraestructure/Background2.093b8a8d.webp');
    /* background-image: url('../img/infraestructure/s7s_h\ wallapaper.jpeg'); */
    /* background-image: url('../img/infraestructure/fondodepantalla4k.jpg'); */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    min-height: 100vh;      /* Ocupa toda la altura de la ventana */
    margin: 0;               /* Quita márgenes por defecto */
    background-size: cover;       /* La imagen cubre todo el contenedor, recortándose si es necesario */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    background-attachment: fixed;
    /* height: 100vh; */
    flex-direction: column;
    z-index: -2;

}

.fondo-container{ 
    display:none;

    position:fixed;
    inset:0;
    /* overflow:hidden; */

    width:100vw;
    height:100vh;
}

@media (min-width: 1000px){

    body{
        background-image:none;
    }

    .fondo-container{
        display:block;
    }

}

.fondo,
.elemento{
    position:absolute;
}
.fondo{
    position:fixed;
}

.elemento{
    position:fixed;
} 

.fondo{
    position:absolute;   /* <-- esto faltaba */
    /* top:0; */
    /* left:0; */
    width:100vw;
    height:100vh;
    pointer-events: none;
}

.fondo img{
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events: none;
}

.fondo-0 { z-index:0; }
.fondo-1 { z-index:31; }
.fondo-2 { z-index:200; } /* LLAMAS */
.fondo-3 { z-index:201; }
.fondo-4 { z-index:4; }
.fondo-5 { z-index:30; }
.fondo-6 { z-index:32; }
.fondo-7 { z-index:2; } /* ARBOL */
.fondo-8 { z-index:33; }
.fondo-9 { z-index:8; }
.fondo-10 { z-index:9; }
.fondo-11 { z-index:3; } /* LLUVIA */
.fondo-12 { z-index:10; } /* Ballena */
.fondo-13 { z-index:11; } /* a */
.fondo-14 { z-index:12; } /* a */
.fondo-15 { z-index:13; } /* a */
.fondo-16 { z-index:14; } /* a */
.fondo-17 { z-index:15; } /* a */
.fondo-18 { z-index:21; } /* a */
.fondo-19 { z-index:16; } /* a */
.fondo-20 { z-index:17; } /* a */
.fondo-21 { z-index:18; } /* a */
.fondo-22 { z-index:5; } /* a */
.fondo-23 { z-index:19; } /* a */
.fondo-24 { z-index:20; } /* a */


.fondo-4,
.fondo-5,
.fondo-6,
.fondo-7,
.fondo-8,
.fondo-9,
.fondo-10,
.fondo-11,
.fondo-12,
.fondo-13,
.fondo-14,
.fondo-15,
.fondo-16,
.fondo-17,
.fondo-18,
.fondo-19,
.fondo-20,
.fondo-21,
.fondo-22,
.fondo-23,
.fondo-24{
    position:absolute; 
}

.fondo-4 img,
.fondo-5 img,
.fondo-6 img,
.fondo-7 img,
.fondo-8 img,
.fondo-9 img,
.fondo-10 img,
.fondo-11 img,
.fondo-12 img,
.fondo-13 img,
.fondo-14 img,
.fondo-15 img,
.fondo-16 img,
.fondo-17 img,
.fondo-18 img,
.fondo-19 img,
.fondo-20 img,
.fondo-21 img,
.fondo-22 img,
.fondo-23 img,
.fondo-24 img{
    width: 100%;
    height: auto;
}

.fondo-5{
    width:40%;
    left: 47%;
}

.fondo-4{
    width:37%;
    margin-top: 34%;
    left: -7%;
}


.fondo-6{
    width:28%;
    margin-top: 30%;
    left: 75%;
}

.fondo-7{
    width:55%;
    left: 22.7%;
    margin-top:18%;
}

.fondo-8{
    width:42%;
    margin-top:52%;
    left: 58%;
}

.fondo-9{
    width:10%;
    margin-top:35%;
    left: 23%;
}


.fondo-10{
    width:4.5%;
    margin-top:26%;
    left: 26.5%;
}

.fondo-11{
    width:10%;
    margin-top:21%;
    left: 26.5%;
}

.fondo-12{
    width:8%;
    margin-top:19%;
    left: 31%;
}

.fondo-13{
    width:8%;
    margin-top:21%;
    left: 39%;
}

.fondo-14{
    width:11%;
    margin-top:40%;
    left: 35%;
}

.fondo-15{
    width:11%;
    margin-top:40%;
    left: 25%;
}


.fondo-16{
    width:10%;
    margin-top:50%;
    left: 38%;
}

.fondo-17{
    width:10%;
    margin-top:55%;
    left: 38%;
}


.fondo-18{
    width:4.5%;
    margin-top:50%;
    left: 21%;
}
.fondo-19{
    width:10%;
    margin-top:48%;
    left: 24%;
}
.fondo-20{
    width:3%;
    margin-top:55%;
    left: 35%;
}

.fondo-21{
    width:5%;
    margin-top:60%;
    left: 34%;
}

.fondo-22{
    width:14%;
    margin-top:57%;
    left: 22%;
}

.fondo-23{
    width:18%;
    margin-top:58%;
    left: 7%;
}
.fondo-24{
    width:18%;
    margin-top:66%;
    left: 26%;
}



@media (min-width: 1150px){
    
    .fondo-4{
        width:37%;
        margin-top: 24%;
        left: -7%;
    }
    .fondo-5{
        width:42%;
        left: 38%;
    }
    .fondo-6{
        width:32%;
        margin-top: 24.5%;
    }
    .fondo-7{
        width:55%;
        left: 22.7%;
        margin-top:11%;
    }
    .fondo-8{
        width:42%;
        margin-top:40%;
        left: 58%;
    }
    .fondo-9{
        width:10%;
        margin-top:33%;
        left: 23%;
    }
    .fondo-10{
        width:4.5%;
        margin-top:26.5%;
        left: 26.5%;
    }

    .fondo-11{
        width:12%;
        margin-top:24%;
        left: 29%;
    }

    .fondo-12{
        width:8%;
        margin-top:31%;
        left: 33%;
    }

    .fondo-13{
        width:9%;
        margin-top:32%;
        left: 41%;
    }
    
    

}
@media (min-width: 1300px){
    .fondo-4{
        width:30%;
        margin-top: 26%;
        left: -2%;
    }
    .fondo-5{
        width:34%;
        left: 44%;
    }
    .fondo-6{
        width:32%;
        margin-top: 17.5%;
    }
    .fondo-7{
        width:44%;
        left: 27.5%;
        margin-top:13%;
    }
    .fondo-8{
        width:42%;
        margin-top:32%;
        left: 58%;
    }    
    .fondo-9{
        width:10%;
        margin-top:33%;
        left: 23%;
    }
    .fondo-10{
        width:4.5%;
        margin-top:26.5%;
        left: 26.5%;
    }

    .fondo-11{
        width:11%;
        margin-top:23%;
        left: 29%;
    }

    .fondo-12{
        width:8%;
        margin-top:23%;
        left: 33%;
    }

    .fondo-13{
        width:9%;
        margin-top:27%;
        left: 40%;
    }
    
    .fondo-14{
        width:11%;
        margin-top:33%;
        left: 33%;
    }
    .fondo-15{
        width:11%;
        margin-top:40%;
        left: 30%;
    }

    .fondo-16{
        width:10%;
        margin-top:45%;
        left: 40%;
    }

    
    .fondo-17{
        width:10%;
        margin-top:50%;
        left: 39%;
    }

    .fondo-18{
        width:4%;
        margin-top:48%;
        left: 22%;
    }
    .fondo-19{
        width:10%;
        margin-top:44%;
        left: 24%;
    }
    .fondo-20{
        width:2.5%;
        margin-top:51.5%;
        left: 31%;
    }
    .fondo-21{
        width:4.5%;
        margin-top:57%;
        left: 30%;
    }
    .fondo-22{
        width:14%;
        margin-top:49%;
        left: 16%;
    }

    .fondo-23{
        width:17%;
        margin-top:52%;
        left: 6%;
    }

    .fondo-24{
        width:18%;
        margin-top:59%;
        left: 26%;
    }

    

}
@media (min-width: 1400px){
    .fondo-4{
        width:30%;
        margin-top: 21%;
        left: -2%;
    }
    .fondo-5{
        width:34%;
        left: 44%;
    }
    .fondo-6{
        width:28%;
        margin-top: 19%;
    }
    .fondo-7{
        width:44%;
        left: 27.5%;
        margin-top:10%;
    }
    .fondo-9{
        width:10%;
        margin-top:29%;
        left: 23%;
    }
    .fondo-10{
        margin-top:22%;
    }
    .fondo-11{
        width:10%;
        margin-top:21%;
        left: 27.5%;
    }
    .fondo-12{
        width:8%;
        margin-top:19%;
        left: 31%;
    }

    .fondo-13{
        width:9%;
        margin-top:21%;
        left: 39%;
    }
        
    .fondo-14{
        width:11%;
        margin-top:27%;
        left: 33%;
    }
    .fondo-15{
        width:11%;
        margin-top:35%;
        left: 30%;
    }
    
    .fondo-16{
        width:10%;
        margin-top:41%;
        left: 40%;
    }

        
    .fondo-17{
        width:10%;
        margin-top:46%;
        left: 39%;
    }
    .fondo-18{
        width:4%;
        margin-top:44%;
        left: 22%;
    }
    .fondo-19{
        width:10%;
        margin-top:38%;
        left: 24%;
    }
    .fondo-20{
        width:2.5%;
        margin-top:45.5%;
        left: 31%;
    }
    .fondo-21{
        width:4.5%;
        margin-top:51%;
        left: 30%;
    }
    .fondo-22{
        width:14%;
        margin-top:44%;
        left: 15%;
    }
    
    .fondo-23{
        width:16%;
        margin-top:47%;
        left: 6%;
    }
    .fondo-24{
        width:18%;
        margin-top:54%;
        left: 26%;
    }

    
}
@media (min-width: 1500px){
.fondo-4{
        width:30%;
        margin-top: 20%;
        left: -2%;
    }
    .fondo-5{
        width:32%;
        left: 46%;
        margin-bottom: 150px;
        top: -10px;
    }
    .fondo-6{
        width:28%;
        margin-top: 17%;
    }
    .fondo-7{
        width:44%;
        left: 27.5%;
        margin-top:7%;
    }
    .fondo-8{
        width:42%;
        margin-top:25%;
        left: 58%;
    }
    .fondo-10{
        margin-top:22%;
        left: 25%;
    }
    .fondo-11{
        width:10%;
        margin-top:19%;
        left: 27.5%;
    }
    .fondo-16{
        width:10%;
        margin-top:39%;
        left: 40%;
    }
    .fondo-17{
        width:10%;
        margin-top:43.5%;
        left: 39%;
    }
}
@media (min-width: 1600px){

    .fondo-4{
        width:30%;
        margin-top: 16%;
        left: -2%;
    }
    .fondo-5{
        width:35%;
        left: 44%;
        margin-bottom: 150px;
        top: -80px;
    }
    .fondo-6{
        width:30%;
        margin-top: 14%;

    }
    .fondo-7{
        width:44%;
        left: 27.5%;
        margin-top:5%;
    }
    .fondo-9{
        width:10%;
        margin-top:23%;
        left: 21.5%;
    }
    .fondo-10{
        margin-top:17%;
    }
    .fondo-11{
        width:12%;
        margin-top:6%;
        left: 27.5%;
    }
    .fondo-12{
        width:8%;
        margin-top:13%;
        left: 30%;
    }

    .fondo-13{
        width:8%;
        margin-top:16%;
        left: 38%;
    }   
    .fondo-14{
        width:11%;
        margin-top:22%;
        left: 33%;
    }
    .fondo-15{
        width:11%;
        margin-top:30%;
        left: 30%;
    }
    .fondo-16{
        width:10%;
        margin-top:36%;
        left: 40%;
    }

    .fondo-17{
        width:10%;
        margin-top:41%;
        left: 39%;
    }
    .fondo-18{
        width:4%;
        margin-top:38%;
        left: 22%;
    }
    .fondo-19{
        width:10%;
        margin-top:32.5%;
        left: 24%;
    }
    .fondo-20{
        width:2.5%;
        margin-top:40%;
        left: 31%;
    }
    .fondo-21{
        width:4.5%;
        margin-top:46%;
        left: 30%;
    }
    .fondo-22{
        width:14%;
        margin-top:39%;
        left: 16%;
    }

    .fondo-23{
        width:16%;
        margin-top:41%;
        left: 6%;
    }
    .fondo-24{
        width:20%;
        margin-top:50%;
        left: 26%;
    }

}
@media (min-width: 1700px){
    .fondo-4{
        width:26%;
        margin-top: 13%;
    }
    .fondo-5{
        width:32%;
        left: 45%;
        margin-bottom: 150px;
        top: -80px;
    }
    .fondo-6{
        width:28%;
        margin-top: 13%;
    }
    .fondo-7{
        width:44%;
        left: 27.5%;
        margin-top:3%;
    }
    .fondo-9{
        width:9%;
        margin-top:21%;
        left: 19.5%;
    }
    .fondo-10{
        margin-top:14%;
        left: 21.5%;
    }    
    .fondo-11{
        width:11%;
        margin-top:12%;
        left: 26.5%;
    }
    .fondo-12{
        width:7%;
        margin-top:13%;
        left: 26.5%;
    }

    .fondo-13{
        width:8%;
        margin-top:13%;
        left: 35.5%;
    }
    .fondo-14{
        width:10%;
        margin-top:19.5%;
        left: 30.5%;
    }
    .fondo-15{
        width:11%;
        margin-top:26%;
        left: 26%;
    }
    .fondo-16{
        width:10%;
        margin-top:30%;
        left: 36%;
    }
    .fondo-17{
        width:10%;
        margin-top:35%;
        left: 36%;
    }
    .fondo-18{
        width:3.5%;
        margin-top:33%;
        left: 19%;
    }
    .fondo-19{
        width:10%;
        margin-top:29%;
        left: 20.5%;
    }
    .fondo-20{
        width:2.5%;
        margin-top:36.5%;
        left: 27%;
    }
    .fondo-21{
        width:4.5%;
        margin-top:42%;
        left: 26.5%;
    }
    .fondo-22{
        width:14%;
        margin-top:34%;
        left: 14%;
    }

    .fondo-23{
        width:14%;
        margin-top:37%;
        left: 6%;
    }
    .fondo-24{
        width:20%;
        margin-top:43%;
        left: 26%;
    }


}



@media (max-height: 800px){

    .fondo-4{
        width:29%;
        margin-top: 12%;
        left: -4%;
    }
    .fondo-5{
        width:32%;
        left: 45%;
        margin-bottom: 150px;
        top: -30px;
    }
    .fondo-6{
        width:28%;
        margin-top: 15%;
    }
    .fondo-7{
        width:44%;
        left: 27.5%;
        margin-top:7%;
    }
    .fondo-8{
        width:42%;
        margin-top:30%;
        left: 58%;
    } 
    .fondo-9{
        width:9%;
        margin-top:26%;
        left: 19.5%;
    }
    .fondo-10{
        margin-top:18%;
        left: 21.5%;
    }    
    .fondo-11{
        width:11%;
        margin-top:17%;
        left: 26.5%;
    }
    .fondo-12{
        width:7%;
        margin-top:17%;
        left: 26.5%;
    }

    .fondo-13{
        width:8%;
        margin-top:17%;
        left: 35.5%;
    }
    .fondo-14{
        width:10%;
        margin-top:23.5%;
        left: 30.5%;
    }
    .fondo-15{
        width:11%;
        margin-top:30%;
        left: 26%;
    }
    .fondo-16{
        width:10%;
        margin-top:34%;
        left: 36%;
    }
    .fondo-17{
        width:10%;
        margin-top:39%;
        left: 36%;
    }
    .fondo-18{
        width:3.5%;
        margin-top:37%;
        left: 19%;
    }
    .fondo-19{
        width:10%;
        margin-top:33%;
        left: 20.5%;
    }
    .fondo-20{
        width:2.5%;
        margin-top:40%;
        left: 27%;
    }
    .fondo-21{
        width:4.5%;
        margin-top:45%;
        left: 26.5%;
    }
    .fondo-22{
        width:14%;
        margin-top:39%;
        left: 14%;
    }

    .fondo-23{
        width:14%;
        margin-top:41%;
        left: 5%;
    }
    .fondo-24{
        width:20%;
        margin-top:48%;
        left: 26%;
    }


}





























.elemento img{
    transition: filter .25s ease, transform .25s ease;
}

.elemento:hover img{
    transform: scale(1.025);
    filter:
        drop-shadow(0 0 3px rgba(255,255,255,.5))
        drop-shadow(0 0 8px rgba(255,255,255,.3));
}












.modal{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.6);

    z-index:99999999999999 !important;
    

}

.modal.activo{

    display:flex;

}

.libro{

    position:relative;

    width:900px;
    height:600px;

    background:url(../img/infraestructure/libro.png);
    background-size:100% 100%;

    display:flex;
}
.pagina{

    width:50%;
    height:100%;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    padding:40px;
    box-sizing:border-box;

}

.pagina img{

    max-width:80%;
    max-height:80%;

}

.cerrar{

    position:absolute;

    top:20px;
    right:20px;

    font-size:30px;

    cursor:pointer;

}



.boton-flotante{
    position:fixed;

    top:20px;
    left:20px;

    z-index:10000;

    padding:12px 20px;

    background:#111;
    color:#fff;

    text-decoration:none;
    font-family:Arial, sans-serif;
    font-size:16px;
    font-weight:bold;

    border-radius:8px;

    transition:all .2s ease;
}

.boton-flotante:hover{
    background:#333;
    transform:translateY(-2px);
}