@font-face {
    font-family: peaeleanor;
    src: url("../font/LouisGeorgeCafeBold.ttf");
}
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
    
}


/*telefono portrait*/
@media only screen and (max-width: 600px){
    .antiscroll{
        width: 100vw;
        height: 100vh;
        
        position: fixed;
        z-index: 99999;
    }

    .antiscrollDN{
        display: none;
    }
    .antiscrollDB{
        display: block;
    }

    body{
        overflow: hidden;
    }
    body::-webkit-scrollbar{
        display: none;
    }
    
    /*-scroll personalizado visible*-/*/
    body::-webkit-scrollbar{
        position: fixed;
        z-index: 99999;
        width: 2px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0);
    }
    body::-webkit-scrollbar-thumb{
        background-color: rgb(0, 0, 0);
        border-radius: 5px;
    }
    
    body::-webkit-scrollbar-corner{
        background-color: rgb(224, 0, 0);
        border-radius: 5px;
    }
    
    .inicioDisplayM{
        display: block;
    }
    .inicioDisplayE{
        display: none;
    }
    .all {
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        position: absolute;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .contContenedorRecorrido{
        width: auto;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        background-image: url("../images/foto-larga.png");
        background-position: left bottom;
        background-size: cover;
    }



    
    
    .recorrido{
        width: 100vw;
        height: 100vh;
        
        
    }

    .recorridoFooter{
        width: 100vw;
        height: 100vh;
        
        
    }



    .recorridoprueba{
        width: 100vw;
        height: 100vh;
        background-color: aqua;
    }




    
    .titulo{
        width: 100%;
        height: 30vh;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .titulo div{
        color: white;
        font-size: 2.5vh;
        filter: drop-shadow(0px 0px 10px #fff);
        
    }
    .titulo div h1{
        font-family: peaeleanor;
        animation: levitateAnimation 2.6s infinite;
    }
    
    /*--------------------*/
    
    .piedras{
        width: 100%;
        height: 65vh;
        
        padding-bottom: 40px;
        display: flex;
        justify-content: space-around;
        transition: all 1s ease-in-out;
    }
    
    .piedra{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    .piedraB{
        width: 45vh;
        height: 100%;
        display: none;
        position: relative;
        
    }

    .piedraN{
        width: 45vh;
        height: 100%;
        display: none;
        position: relative;
        
    }
    
    .piedra3{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    
    .transicionesGenerales{
        transition: all 0.3;
    }
     /*-----Posicion de piedras independientes-------*/
     .imagenPierda {       
        margin: 0 auto;
        text-align: center;    
        position: relative;
        
    }
    /*-P1-*/
    .imgP11{
        width: 100%;
        top: 14vh;
        left: 2vh;
    }
    .imgP11R{
        width: 100%;
        top: 17vh;
        left: 1vh;
    }
    /*---*/

    .imgP12{
        width: 130%;
        top: 34vh;
        left: -4vh;
    }


    /*-P3-*/
    .imgP13{
        width: 122%;
        top: 15vh;
        left: -4vh;
    }
    .imgP13R{
        width: 100%;
        top: 23vh;
        left: -1vh;
    }
    /*---*/
    .imgP21{
        width: 100%;
        top: 16vh;
        left: 1vh;
    }

    .imgP22{
        width: 150%;
        top: 33vh;
        left: -7vh;

    }

    .imgP23{
        width: 119%;
        top: 21vh;
        left: -4vh;
    }

    .imgP31{
        width: 100%;
        top: 29vh;
        left: -2px;
    }

    .imgP32{
        width: 130%;
        top: 42vh;
        left: -14px;
    }

    .imgP33{
        width: 114%;
        top: 48vh;
        left: -3vh;
    }

    .imgP41{
        width: 100%;
        top: 31vh;
        left: -1vh;
    }

    .imgP42{
        width: 94%;
        top: 24vh;
        left: 2px;
    }
    /*---circulos e info indicadores independientes---*/
    .circuloIndicador {
        width: 4vh;
        height: 4vh;
        background-color: rgba(255, 255, 255, 0.582);
        border-radius: 50%;
        filter: drop-shadow(0px 0px 10px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s ease-in-out;
        animation: pulseAnimation 2.5s infinite;
    }

   
    .circuloIndicador:hover {
        width: 4vh;
        height: 4vh;
        background-color: white;
        border-radius: 50%;
        filter: drop-shadow(0px 0px 20px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s;
        
    }

    .infoIndicador {
        width: 30vh;
        height: 8vh;
        font-size: 20pt;
        color: #fff;
        font-family: peaeleanor;
        filter: drop-shadow(0px 0px 20px #fff);
        position: absolute;
        transition: all 2s ease-in-out;
        z-index: 99;
        display: none;
    }

    
    .infoIndicador{
        display: none;
        
    }

    .circuloI11{
        right: -11vh;
        top: 4vh;
    }
    .circuloI12{
        right: -15vh;
        top: 6vh;
    }
    .circuloI13{
        right: -11vh;
        top: 4vh;
    }


    .circuloI21{
        right: -11vh;
        top: 8vh;
    }
    .circuloI22{
        right: -16vh;
        top: 6vh;
    }
    .circuloI23{
        right: -12vh;
        top: 10vh;
    }


    .circuloI31{
        right: -9vh;
        top: 7vh;
    }
    .circuloI32{
        right: -14vh;
        top: 5vh;
    }
    .circuloI33{
        right: -6vh;
        top: 9vh;
    }


    .circuloI41{
        right: -14vh;
        top: 5vh;
    }
    .circuloI42{
        right: -11vh;
        top: 8vh;
    }


    /*--PIEDRA 11-----------------------------*/
   
    
    .imagenPierda11 img{
        transform: rotate(-5deg);
        transition: all 0.3s;
        transition-timing-function: ease;
    }
    .imagenPierda11 img:hover{
        transform: rotate(-5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        
        
    }
   
    
    /*--PIEDRA 12-----------------------------*/
    
    .imagenPierda12 img{
        transform: rotate(5deg);
        transition: all 0.3s;
    }
    
    .imagenPierda12 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    
    /*--PIEDRA 13-----------------------------*/
    
    
    .opacidadPiedra{
        opacity: 0;
        visibility: visible;
        transition: opacity 1s ease-in-out;
    }
    
    .visible{
        opacity: 1;
          visibility: visible;
          transition: all 1s ease-in-out;
    }
    
    .imagenPierda13 img{
        transform: rotate(5deg);
        
        transition: all 0.3s;
    }
    .imagenPierda13 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    /*----------------------------------------*/
    #fade-in-image {
        
        left: 50%;
        bottom: 0;
        
        opacity: 0;
        animation: fadeIn 2s forwards; /* Duración de la animación: 2 segundos */
      }
}

/*telefono landscape*/
@media only screen and (min-width: 600px){
    .antiscroll{
        width: 100vw;
        height: 100vh;
        
        position: fixed;
        z-index: 99999;
    }

    .antiscrollDN{
        display: none;
    }
    .antiscrollDB{
        display: block;
    }

    body{
        overflow: hidden;
    }
    body::-webkit-scrollbar{
        display: none;
    }
    
    /*-scroll personalizado visible*-/*/
    body::-webkit-scrollbar{
        position: fixed;
        z-index: 99999;
        width: 2px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0);
    }
    body::-webkit-scrollbar-thumb{
        background-color: rgb(0, 0, 0);
        border-radius: 5px;
    }
    
    body::-webkit-scrollbar-corner{
        background-color: rgb(224, 0, 0);
        border-radius: 5px;
    }
    
    .inicioDisplayM{
        display: block;
    }
    .inicioDisplayE{
        display: none;
    }
    .all {
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        position: absolute;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .contContenedorRecorrido{
        width: auto;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        background-image: url("../images/foto-larga.png");
        background-position: left bottom;
        background-size: cover;
    }

    
    
    .recorrido{
        width: 100vw;
        height: 100vh;
        
        
    }

    .recorridoFooter{
        width: 100vw;
        height: 100vh;
        
        
    }



    .recorridoprueba{
        width: 100vw;
        height: 100vh;
        background-color: aqua;
    }




    
    .titulo{
        width: 100%;
        height: 30vh;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .titulo div{
        color: white;
        font-size: 5.5vh;
        filter: drop-shadow(0px 0px 10px #fff);
        
    }
    .titulo div h1{
        font-family: peaeleanor;
        animation: levitateAnimation 2.6s infinite;
    }
    
    /*--------------------*/
    
    .piedras{
        width: 100%;
        height: 65vh;
        
        padding-bottom: 40px;
        display: flex;
        justify-content: space-around;
        transition: all 1s ease-in-out;
    }
    
    .piedra{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    .piedraB{
        width: 45vh;
        height: 100%;
        display: block;
        position: relative;
        
    }

    .piedraN{
        width: 45vh;
        height: 100%;
        display: none;
        position: relative;
        
    }
    
    .piedra3{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    
    .transicionesGenerales{
        transition: all 0.3;
    }
    /*-----Posicion de piedras independientes-------*/
    .imagenPierda {       
        margin: 0 auto;
        text-align: center;    
        position: relative;
        
    }
    /*-P1-*/
    .imgP11{
        width: 78%;
        top: 14vh;
        left: 0vh;
    }
    .imgP11R{
        width: 78%;
        top: 23vh;
        left: 19vh;
    }
    /*---*/

    .imgP12{
        width: 100%;
        top: 29vh;
        left: -1vh;
    }


    /*-P3-*/
    .imgP13{
        width: 100%;
        top: 10vh;
        left: 1vh;
    }
    .imgP13R{
        width: 100%;
        top: 18vh;
        left: -18vh;
    }
    /*---*/
    .imgP21{
        width: 89%;
        top: 13vh;
        left: 1vh;
    }

    .imgP22{
        width: 100%;
        top: 25vh;
        left: -1vh;
    }

    .imgP23{
        width: 100%;
        top: 16vh;
        left: 2vh;
    }

    .imgP31{
        width: 86%;
        top: 3vh;
        left: 12px;
    }

    .imgP32{
        width: 96%;
        top: 31vh;
        left: 0px;
    }

    .imgP33{
        width: 100%;
        top: -5vh;
        left: -1vh;
    }

    .imgP41{
        width: 100%;
        top: 5vh;
        left: 2vh;
    }

    .imgP42{
        width: 84%;
        top: 10vh;
        left: 18px;
    }
    /*---circulos indicadores independientes---*/
    .circuloIndicador {
        width: 5vh;
        height: 5vh;
        background-color: rgba(255, 255, 255, 0.582);
        border-radius: 50%;
        filter: drop-shadow(0px 0px 10px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s ease-in-out;
        animation: pulseAnimation 2.5s infinite;
    }

 
   
    .circuloIndicador:hover {
        width: 5vh;
        height: 5vh;
        background-color: white;
        border-radius: 50%;
        filter: drop-shadow(0px 0px 20px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s;
        
    }

    .infoIndicador {
        width: 30vh;
        height: 8vh;
        font-size: 20pt;
        color: #fff;
        font-family: peaeleanor;
        filter: drop-shadow(0px 0px 20px #fff);
        position: absolute;
        transition: all 2s ease-in-out;
        z-index: 99;
        display: none;
    }

    
    .infoIndicador{
        display: none;
        
    }

    .circuloI11{
        right: -20vh;
        top: 7vh;
    }
    .circuloI12{
        right: -21vh;
        top: 8vh;
    }
    .circuloI13{
        right: -18vh;
        top: 6vh;
    }


    .circuloI21{
        right: -9vh;
        top: 8vh;
    }
    .circuloI22{
        right: -18vh;
        top: 6vh;
    }
    .circuloI23{
        right: -20vh;
        top: 14vh;
    }


    .circuloI31{
        right: -13vh;
        top: 12vh;
    }
    .circuloI32{
        right: -24vh;
        top: 7vh;
    }
    .circuloI33{
        right: -15vh;
        top: 17vh;
    }


    .circuloI41{
        right: -18vh;
        top: 5vh;
    }
    .circuloI42{
        right: -27vh;
        top: 17vh;
    }
    /*--PIEDRA 11-----------------------------*/
    
    
    .imagenPierda11 img{
        transform: rotate(-5deg);
        transition: all 0.3s;
        transition-timing-function: ease;
    }
    .imagenPierda11 img:hover{
        transform: rotate(-5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        
        
    }
    
    
    /*--PIEDRA 12-----------------------------*/
    
    
    .imagenPierda12 img{
        transform: rotate(5deg);
        transition: all 0.3s;
    }
    
    .imagenPierda12 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    /*--PIEDRA 13-----------------------------*/
    
    
    .opacidadPiedra{
        opacity: 0;
        visibility: visible;
        transition: opacity 1s ease-in-out;
    }
    
    .visible{
        opacity: 1;
          visibility: visible;
          transition: all 1s ease-in-out;
    }
    
    .imagenPierda13 img{
        transform: rotate(5deg);
        
        transition: all 0.3s;
    }
    .imagenPierda13 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    /*----------------------------------------*/
    #fade-in-image {
        
        left: 50%;
        bottom: 0;
        
        opacity: 0;
        animation: fadeIn 2s forwards; /* Duración de la animación: 2 segundos */
      }
}

/*tablet portrait*/
@media only screen and (min-width: 768px){
    .antiscroll{
        width: 100vw;
        height: 100vh;
        
        position: fixed;
        z-index: 99999;
    }

    .antiscrollDN{
        display: none;
    }
    .antiscrollDB{
        display: block;
    }

    body{
        overflow: hidden;
    }
    body::-webkit-scrollbar{
        display: none;
    }
    
    /*-scroll personalizado visible*-/*/
    body::-webkit-scrollbar{
        position: fixed;
        z-index: 99999;
        width: 2px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0);
    }
    body::-webkit-scrollbar-thumb{
        background-color: rgb(0, 0, 0);
        border-radius: 5px;
    }
    
    body::-webkit-scrollbar-corner{
        background-color: rgb(224, 0, 0);
        border-radius: 5px;
    }
    
    .inicioDisplayM{
        display: block;
    }
    .inicioDisplayE{
        display: none;
    }
    .all {
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .contContenedorRecorrido{
        width: auto;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        background-image: url("../images/foto-larga.png");
        background-position: left bottom;
        background-size: cover;
    }

    
    
    .recorrido{
        width: 100vw;
        height: 100vh;
        
        
    }

    .recorridoFooter{
        width: 100vw;
        height: 100vh;
        
        
    }
    .recorridoprueba{
        width: 100vw;
        height: 100vh;
        background-color: aqua;
    }




    
    .titulo{
        width: 100%;
        height: 30vh;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .titulo div{
        color: white;
        font-size: 2.5vh;
        filter: drop-shadow(0px 0px 10px #fff);
        
    }
    .titulo div h1{
        font-family: peaeleanor;
        animation: levitateAnimation 2.6s infinite;
    }
    
    /*--------------------*/
    
    .piedras{
        width: 100%;
        height: 65vh;
        
        padding-bottom: 40px;
        display: flex;
        justify-content: space-around;
        transition: all 1s ease-in-out;
    }
    
    .piedra{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    .piedraB{
        width: 45vh;
        height: 100%;
        display: none;
        position: relative;
        
    }

    .piedraN{
        width: 45vh;
        height: 100%;
        display: none;
        position: relative;
        
    }
    
    .piedra3{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    
    .transicionesGenerales{
        transition: all 0.3;
    }
    /*-----Posicion de piedras independientes-------*/
    .imagenPierda {       
        margin: 0 auto;
        text-align: center;    
        position: relative;
        
    }
    /*-P1-*/
    .imgP11{
        width: 78%;
        top: 22vh;
        left: 0vh;
    }
    .imgP11R{
        width: 78%;
        top: 23vh;
        left: 0vh;
    }
    /*---*/

    .imgP12{
        width: 100%;
        top: 29vh;
        left: -1vh;
    }


    /*-P3-*/
    .imgP13{
        width: 100%;
        top: 18vh;
        left: 1vh;
    }
    .imgP13R{
        width: 100%;
        top: 28vh;
        left: 1vh;
    }
    /*---*/
    .imgP21{
        width: 89%;
        top: 22vh;
        left: 1vh;
    }

    .imgP22{
        width: 100%;
        top: 29vh;
        left: -1vh;
    }

    .imgP23{
        width: 100%;
        top: 27vh;
        left: 2vh;
    }

    .imgP31{
        width: 86%;
        top: 19vh;
        left: 0;
    }

    .imgP32{
        width: 96%;
        top: 30vh;
        left: -2px;
    }

    .imgP33{
        width: 100%;
        top: 42vh;
        left: 1vh;
    }

    .imgP41{
        width: 100%;
        top: 17vh;
        left: 2vh;
    }

    .imgP42{
        width: 84%;
        top: 17vh;
        left: 9px;
    }
    /*---circulos indicadores independientes---*/
    .circuloIndicador {
        width: 4vh;
        height: 4vh;
        background-color: rgba(255, 255, 255, 0.582);
        border-radius: 50%;
        filter: drop-shadow(0px 0px 10px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s ease-in-out;
        animation: pulseAnimation 2.5s infinite;
    }
   
    .circuloIndicador:hover {
        width: 4vh;
        height: 4vh;
        background-color: white;
        border-radius: 50%;
        filter: drop-shadow(0px 0px 20px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s;
        
    }
    .infoIndicador {
        width: 30vh;
        height: 8vh;
        font-size: 20pt;
        color: #fff;
        font-family: peaeleanor;
        filter: drop-shadow(0px 0px 20px #fff);
        position: absolute;
        transition: all 2s ease-in-out;
        z-index: 99;
        display: none;
    }

    
    .infoIndicador{
        display: none;
        
    }

    .circuloI11{
        right: -12vh;
        top: 4vh;
    }
    .circuloI12{
        right: -15vh;
        top: 6vh;
    }
    .circuloI13{
        right: -12vh;
        top: 5vh;
    }


    .circuloI21{
        right: -6vh;
        top: 4vh;
    }
    .circuloI22{
        right: -14vh;
        top: 5vh;
    }
    .circuloI23{
        right: -12vh;
        top: 11vh;
    }


    .circuloI31{
        right: -13vh;
        top: 8vh;
    }
    .circuloI32{
        right: -13vh;
        top: 5vh;
    }
    .circuloI33{
        right: -7vh;
        top: 10vh;
    }


    .circuloI41{
        right: -18vh;
        top: 5vh;
    }
    .circuloI42{
        right: -21vh;
        top: 17vh;
    }
    
    /*--PIEDRA 11-----------------------------*/
    
    .imagenPierda11 img{
        transform: rotate(-5deg);
        transition: all 0.3s;
        transition-timing-function: ease;
    }
    .imagenPierda11 img:hover{
        transform: rotate(-5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        
        
    }
    
    
    /*--PIEDRA 12-----------------------------*/
    
    .imagenPierda12Recorrido {
       
        width: 51%;
        margin: 0 auto;
        text-align: center;
        position: relative;
        top: 32vh;
        left: inherit;
    }
    
    .imagenPierda12 img{
        transform: rotate(5deg);
        transition: all 0.3s;
    }
    
    .imagenPierda12 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    /*--PIEDRA 13-----------------------------*/
   
    .opacidadPiedra{
        opacity: 0;
        visibility: visible;
        transition: opacity 1s ease-in-out;
    }
    
    .visible{
        opacity: 1;
          visibility: visible;
          transition: all 1s ease-in-out;
    }
    
    .imagenPierda13 img{
        transform: rotate(5deg);
        
        transition: all 0.3s;
    }
    .imagenPierda13 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    /*-------------------------------------------------------*/
    #fade-in-image {
        
        left: 50%;
        bottom: 0;
        
        opacity: 0;
        animation: fadeIn 2s forwards; /* Duración de la animación: 2 segundos */
      }
}

/*tablet landscape*/
@media only screen and (min-width: 992px){
    .antiscroll{
        width: 100vw;
        height: 100vh;
        
        position: fixed;
        z-index: 99999;
    }

    .antiscrollDN{
        display: none;
    }
    .antiscrollDB{
        display: block;
    }

    body{
        overflow: hidden;
    }
    body::-webkit-scrollbar{
        display: none;
    }
    
    /*-scroll personalizado visible*-/*/
    body::-webkit-scrollbar{
        position: fixed;
        z-index: 99999;
        width: 2px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0);
    }
    body::-webkit-scrollbar-thumb{
        background-color: rgb(0, 0, 0);
        border-radius: 5px;
    }
    
    body::-webkit-scrollbar-corner{
        background-color: rgb(224, 0, 0);
        border-radius: 5px;
    }
    
    .inicioDisplayM{
        display: block;
    }
    .inicioDisplayE{
        display: none;
    }
    .all {
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .contContenedorRecorrido{
        width: auto;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        background-image: url("../images/foto-larga.png");
        background-position: left bottom;
        background-size: cover;
    }

    
    
    .recorrido{
        width: 100vw;
        height: 100vh;
        
        
    }

    .recorridoFooter{
        width: 100vw;
        height: 100vh;
        
        
    }
    .recorridoprueba{
        width: 100vw;
        height: 100vh;
        background-color: aqua;
    }




    
    .titulo{
        width: 100%;
        height: 30vh;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .titulo div{
        color: white;
        font-size: 2.5vh;
        filter: drop-shadow(0px 0px 10px #fff);
        
    }
    .titulo div h1{
        font-family: peaeleanor;
        animation: levitateAnimation 2.6s infinite;
    }
    
    /*--------------------*/
    
    .piedras{
        width: 100%;
        height: 65vh;
        
        padding-bottom: 40px;
        display: flex;
        justify-content: space-around;
        transition: all 1s ease-in-out;
    }
    
    .piedra{
        width: 45vh;
        height: 100%;
        display: block;
        position: relative;
        
    }

    .piedraB{
        width: 45vh;
        height: 100%;
        display: block;
        position: relative;
        
    }

    .piedraN{
        width: 45vh;
        height: 100%;
        display: none;
        position: relative;
        
    }
    
    .piedra3{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    
    .transicionesGenerales{
        transition: all 0.3;
    }
    /*-----Posicion de piedras independientes-------*/
    .imagenPierda {       
        margin: 0 auto;
        text-align: center;    
        position: relative;
        
    }
    /*-P1-*/
    .imgP11{
        width: 78%;
        top: 19vh;
        left: 3vh;
    }
    .imgP11R{
        width: 78%;
        top: 26vh;
        left: 13vh;
    }
    /*---*/

    .imgP12{
        width: 90%;
        top: 29vh;
        left: 0vh;
    }


    /*-P3-*/
    .imgP13{
        width: 89%;
        top: 18vh;
        left: 3vh;
    }
    .imgP13R{
        width: 100%;
        top: 22vh;
        left: -11vh;
    }
    /*---*/
    .imgP21{
        width: 89%;
        top: 13vh;
        left: 5vh;
    }

    .imgP22{
        width: 99%;
        top: 1vh;
        left: 0vh;
    }

    .imgP23{
        width: 85%;
        top: 10vh;
        left: 4vh;
    }

    .imgP31{
        width: 86%;
        top: 6vh;
        left: 0;
    }

    .imgP32{
        width: 96%;
        top: 26vh;
        left: 0;
    }

    .imgP33{
        width: 100%;
        top: 4vh;
        left: 7vh;
    }

    .imgP41{
        width: 100%;
        top: 21vh;
        left: 2vh;
    }

    .imgP42{
        width: 100%;
        top: 3vh;
        left: 55px;
    }
    /*---circulos indicadores independientes---*/
    .circuloIndicador {
        width: 5vh;
        height: 5vh;
        background-color: rgba(255, 255, 255, 0.582);
        border-radius: 50%;
        filter: drop-shadow(0px 0px 10px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s ease-in-out;
        animation: pulseAnimation 2.5s infinite;
    }

   
    .circuloIndicador:hover {
        width: 5vh;
        height: 5vh;
        background-color: white;
        border-radius: 50%;
        filter: drop-shadow(0px 0px 20px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s;
        
    }

    .infoIndicador {
        width: 30vh;
        height: 8vh;
        font-size: 20pt;
        color: #fff;
        font-family: peaeleanor;
        filter: drop-shadow(0px 0px 20px #fff);
        position: absolute;
        transition: all 2s ease-in-out;
        z-index: 99;
        display: none;
    }

    
    .infoIndicador{
        display: none;
        
    }

    .circuloI11{
        right: -15vh;
        top: 6vh;
    }
    .circuloI12{
        right: -21vh;
        top: 8vh;
    }
    .circuloI13{
        right: -18vh;
        top: 6vh;
    }


    .circuloI21{
        right: -9vh;
        top: 8vh;
    }
    .circuloI22{
        right: -18vh;
        top: 6vh;
    }
    .circuloI23{
        right: -20vh;
        top: 14vh;
    }


    .circuloI31{
        right: -13vh;
        top: 12vh;
    }
    .circuloI32{
        right: -24vh;
        top: 7vh;
    }
    .circuloI33{
        right: -15vh;
        top: 17vh;
    }


    .circuloI41{
        right: -18vh;
        top: 5vh;
    }
    .circuloI42{
        right: -27vh;
        top: 17vh;
    }
    /*--PIEDRA 11-----------------------------*/
    
    .imagenPierda11 img{
        transform: rotate(-5deg);
        transition: all 0.3s;
        transition-timing-function: ease;
    }
    .imagenPierda11 img:hover{
        transform: rotate(-5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        
        
    }
   
    
    /*--PIEDRA 12-----------------------------*/
    
    
    
    .imagenPierda12 img{
        transform: rotate(5deg);
        transition: all 0.3s;
    }
    
    .imagenPierda12 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    
    /*--PIEDRA 13-----------------------------*/
    
    
    .opacidadPiedra{
        opacity: 0;
        visibility: visible;
        transition: opacity 1s ease-in-out;
    }
    
    .visible{
        opacity: 1;
          visibility: visible;
          transition: all 1s ease-in-out;
    }
    
    .imagenPierda13 img{
        transform: rotate(5deg);
        
        transition: all 0.3s;
    }
    .imagenPierda13 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    /*--------------------------------------------------*/
    #fade-in-image {
        
        left: 50%;
        bottom: 0;
        
        opacity: 0;
        animation: fadeIn 2s forwards; /* Duración de la animación: 2 segundos */
      }
}

/*escritorio grande*/
@media only screen and (min-width: 1400px){
    body{
        overflow: hidden;
    }
    body::-webkit-scrollbar{
        display: none;
    }
    
    /*-scroll personalizado visible*-/*/
    body::-webkit-scrollbar{
        position: fixed;
        z-index: 99999;
        width: 2px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0);
    }
    body::-webkit-scrollbar-thumb{
        background-color: rgb(0, 0, 0);
        border-radius: 5px;
    }
    
    body::-webkit-scrollbar-corner{
        background-color: rgb(224, 0, 0);
        border-radius: 5px;
    }
    
    .inicioDisplayM{
        display: none;
    }
    .inicioDisplayE{
        display: block;
    }

    .all {
        width: auto;
        min-width: 1920px;
        height: 100vh;
        
        
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        position: absolute;
        scroll-snap-type: x mandatory;
        overflow-y: hidden;
    }
    

    
    .recorrido{
        width: 100vw;
        height: 100vh;
        scroll-snap-align: start;
        
    }
    .recorridoFooter{
        width: 30vw;
        height: 100vh;
        scroll-snap-align: start;
        
    }
    
    .titulo{
        width: 100%;
        height: 35vh;
        
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .titulo div{
        color: white;
        font-size: 4.5vh;
        filter: drop-shadow(0px 0px 10px #fff);
        
    }
    .titulo div h1{
        font-family: peaeleanor;
        transition-timing-function: ease-in-out;
        animation: levitateAnimation 2.6s infinite;
    }
    
    /*--------------------*/
    
    .piedras{
        width: 100%;
        height: 65vh;
        
        padding-bottom: 40px;
        display: flex;
        justify-content: space-around;
        transition: all 1s ease-in-out;
    }
    
    .piedra{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    
    .piedra3{
        width: 45vh;
        height: 100%;
       
        position: relative;
        
    }
    
    .transicionesGenerales{
        transition: all 0.3;
    }
    
   /*-----Posicion de piedras independientes-------*/
    .imagenPierda {       
        margin: 0 auto;
        text-align: center;    
        position: relative;
        transition: all 1s;
    }

    .imagenPierda:hover {       
        margin: 0 auto;
        text-align: center;    
        position: relative;
        
        filter: drop-shadow(0px -10px 10px #fff);
    }
    
    /*-P1-*/
    .imgP11{
        width: 72%;
        top: 12vh;
        left: 0;
    }
    .imgP11R{
        width: 72%;
        top: 12vh;
        left: 0;
    }
    /*---*/

    .imgP12{
        width: 90%;
        top: 27vh;
        left: 0;
    }


    /*-P3-*/
    .imgP13{
        width: 89%;
        top: 5vh;
        left: 0;
    }
    .imgP13R{
        width: 89%;
        top: 5vh;
        left: 0;
    }
    /*---*/
    .imgP21{
        width: 89%;
        top: 6vh;
        left: 0px;
    
    }

    .imgP22{
        width: 99%;
        top: 15vh;
        left: 2vh;
    }

    .imgP23{
        width: 85%;
        top: 1vh;
        left: 0;
    }

    .imgP31{
        width: 86%;
        top: 9vh;
        left: 0;

    }

    .imgP32{
        width: 96%;
        top: 18vh;
        left: 0;
    }

    .imgP33{
        width: 100%;
        top: 16vh;
        left: 0;
    }

    .imgP41{
        width: 100%;
        top: 4vh;
        left: 0;
    }

    .imgP42{
        width: 100%;
        top: 3vh;
        left: 0;
    }
    /*---circulos indicadores independientes---*/
    .circuloIndicador {
        width: 5vh;
        height: 5vh;
        background-color: rgba(255, 255, 255, 0.582);
        border-radius: 50%;
        filter: drop-shadow(0px 0px 10px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s ease-in-out;
        animation: pulseAnimation 2.5s infinite;
    }
    .infoIndicador {
        width: 30vh;
        height: 8vh;
        font-size: 20pt;
        color: #fff;
        font-family: peaeleanor;
        filter: drop-shadow(0px 0px 20px #fff);
        position: absolute;
        transition: all 2s ease-in-out;
        z-index: 99;
        display: none;
    }

    .circuloIndicador:hover + .infoIndicador{
        display: block;
        
    }
    .imagenPierda:hover + .infoIndicador{
        display: block;
        
    }
   
    .circuloIndicador:hover {
        width: 5vh;
        height: 5vh;
        background-color: white;
        border-radius: 50%;
        filter: drop-shadow(3px 3px 10px #fff);
        position: relative;
        z-index: 99;
        transition: all 0.3s;
        animation-play-state: paused;
        border-bottom: 1px solid white;
    }

    .circuloI11{
        right: -20vh;
        top: 7vh;
    }
    .circuloI12{
        right: -21vh;
        top: 8vh;
    }
    .circuloI13{
        right: -18vh;
        top: 6vh;
    }


    .circuloI21{
        right: -9vh;
        top: 8vh;
    }
    .circuloI22{
        right: -18vh;
        top: 6vh;
    }
    .circuloI23{
        right: -20vh;
        top: 14vh;
    }


    .circuloI31{
        right: -13vh;
        top: 12vh;
    }
    .circuloI32{
        right: -24vh;
        top: 7vh;
    }
    .circuloI33{
        right: -15vh;
        top: 17vh;
    }


    .circuloI41{
        right: -18vh;
        top: 5vh;
    }
    .circuloI42{
        right: -27vh;
        top: 17vh;
    }

    .infoI11{
        right: -5vh;
        top: -3vh;
        animation: fadeIn 0.7s;
    }




    /*--PIEDRA 11-----------------------------*/
    .imagenPierda11Recorrido {
        width: 55%;
        margin: 0 auto;
        text-align: center;
        
        position: relative;
        top: 16vh;
    }
    .imagenPierda11 img{
        transform: rotate(-5deg);
        transition: all 0.3s;
        transition-timing-function: ease;
    }
    .imagenPierda11 img:hover{
        transform: rotate(-5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        
        
    }
    
    
    /*--PIEDRA 12-----------------------------*/
    
    .imagenPierda12Recorrido {
        width: 45%;
        margin: 0 auto;
        text-align: center;
        
        position: relative;
        top: 26vh;
    }
    
    .imagenPierda12 img{
        transform: rotate(5deg);
        transition: all 0.3s;
    }
    
    .imagenPierda12 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    
    /*--PIEDRA 13-----------------------------*/
    
    
    .opacidadPiedra{
        opacity: 0;
        visibility: visible;
        transition: opacity 1s ease-in-out;
    }
    
    .visible{
        opacity: 1;
          visibility: visible;
          transition: all 1s ease-in-out;
    }
    
    .imagenPierda13 img{
        transform: rotate(5deg);
        
        transition: all 0.3s;
    }
    .imagenPierda13 img:hover{
        transform: rotate(5deg);
        filter: drop-shadow(0px 0px 34px #fff);
        transition: all 0.3s;
    }
    
    
    

    /*-----------------------------------------------------------------*/
    #fade-in-image {
        
        left: 50%;
        bottom: 0;
        
        opacity: 0;
        animation: fadeIn 2s forwards; /* Duración de la animación: 2 segundos */
      }
      
      
      

}

@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }


  @keyframes pulseAnimation {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.7;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes levitateAnimation {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(10px); /* Ajusta la distancia de levitación según tus preferencias */
    }
  }