body {
    margin: 0;
    padding: 0; 
    background-color: black;
}

*{
    box-sizing: border-box;
    /* transition: 0.6s; */
    overflow: hidden;
}
img {
    max-width: 100%;
}

/****************************************************/
/****************************************************/
/*******************  CLASES  ***********************/
/****************************************************/
/****************************************************/


/*******************  MAIN    ***********************/
.main{
    width: 100%;
    height: 100vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/****************************************************/

.ventana_app{
    width: 100%; 
    height: auto; 
    
    background: rgb(255, 255, 255);
    background: linear-gradient(37deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.10) 100%);
    border-radius: 1.2vh;
    box-shadow: 0 4px 3.2vh rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
}


/*****************************************************/

 
    .bloques{
        width: 85%;
        height: auto;
        display: flex;
        justify-content: space-between; 
        margin: 0 auto;   
        margin-top: -6%;
    }
    .bloq_line{ 
        width: 100%;
        height: auto;
    }
    .l1{
        width: 22%;
        height: 80vh; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .l2{
        width: 52%;
        height: 80vh;  
        display: flex;
        flex-direction: column;
        justify-content: space-around; 
    }
   
    .bloq_line .img{
        width: 100%;
        height: 100%; 
        background-position: center;
        background-repeat: repeat;
        background-size: cover;
        opacity: 1;
        transition: 6.6s; 
    } 

    .bloq01{
        width: 100%;
        height: 15%; 
    }
    .bloq02{
        width: 100%;
        height: 75%; 
    }
    .bloq03{
        width: 100%;
        height: 10%; 
    }
    .bloq04{
        width: 100%;
        height: 18%; 
    }
    .bloq05{
        width: 100%;
        height: 85%; 
    }
    .bloq06{
        width: 100%;
        height: 75%; 
    }
    .bloq07{
        width: 100%;
        height: 15%; 
    }

/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 

.bloq01 .img{
    width: 100%;
    height: 100%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6%; 
}
.bloq01 img{
    width: 65%;
    height: auto;  
}
.puntos{
    width: 3vh;
    height: 2.6vh;
    border: 0 !important;
    border-radius: 0.8vh; 
    display: flex;
    justify-content: center;
    cursor: pointer; 
} 
.menu .ico{
    width: 4.8vh;
    height: 4.8vh;
    margin-right: 2%; 
}
.menu .list{
    width: 60%;
    display: flex;
    align-items: center;
    margin: 3% 6%;   
    cursor: pointer;  
}
.menu .list p{
    color: #fff;    
    font-family: texto_020;
    font-size: 1.8vh;
    padding-top: 2%; 
}
.profile{
    width: 3.2vh !important;
    height: 3.2vh !important;
    margin-left: 6%;
    margin-right: 6% !important; 
}
 
.bloq03 .img{
    width: 4.8vh;
    height: 4.8vh;
    margin-left: 6%; 
    cursor: pointer; 
}

.menu .img_profile{
    filter: grayscale(100%);  
    transition: 3.0s; 
}
.menu .img_profile:hover{
    filter: grayscale(0);  
    transition: 0.2s; 
}
 
 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
.bloq04{
    margin-top: 1%;
}
.user_story{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    margin: auto;
    padding-top: 2%;
}
.story_list{
    width: 10%;
    height: auto; 
}
.user_photo{
    background-image: url("../img/story_brd.svg"); 
    background-repeat: no-repeat;
    background-position: center;
    padding: 0.6vh;
    cursor: pointer;  
}
.story_list p{ 
    text-align: center;
    color: #fff;    
    font-family: texto_019; 
    font-size: 1.4vh;
    padding-top: 10%; 
}
.desatura {
    filter: grayscale(100%);  
    transition: 3.0s; 
}
.desatura:hover {
    filter: grayscale(0);  
    transition: 0.2s;  
}
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
 
.bloq05 .scrolling{
    padding: 0 6%;
}
.scrolling{
    width: 100%;
    max-height: 64.3vh; 
    overflow-y: auto; /* Habilita el desplazamiento vertical si es necesario */
    overflow-x: hidden; /* Oculta el desplazamiento horizontal */
    /* scroll-snap-type: y mandatory;  
    scroll-behavior: smooth; */  
    /* cursor: grab; */
}
/* .scrolling > * {  
    scroll-snap-align: start;  
}
 */
.publi{
    width: 100%; 
    padding: 3% 4%;
    margin: 2% auto;
    cursor: pointer;  
}
.publi_user{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between; 
}
.publi_user div{
    display: flex;
    align-items: center;
}
.publi_user img{
    width: 10%;
    height: auto;  
    margin-right: 2%;
}
.publi_user h3{
    color: #fff;    
    font-family: texto_021;
    font-size: 2.6vh;
    padding: 1%; 
}
.publi_user span{
    color: #898989;   
    font-family: texto_019;
    font-size: 1.8vh; 
    margin-left: 1%;
    padding-top: 0.5vh;
}
.publi_user .puntos{
    width: 3.9vh;
    height: 3vh;
}
.publi_user .puntos img{
    width: 2.6vh;
    height: 2.6vh;
}
.publi_copy{ 
    color: #fff;    
    font-family: texto_019;
    font-size: 1.8vh;
    margin: 3% auto; 
    line-height: 1.4;  
}
.publi_copy span{ 
    color: #898989; 
}
.publi_post{
    border-radius: 1.6vh;
}
.space_completar{
    width: 100%;
    height: 8.5vh;
}

/*****************************************************/ 
/*****************************************************/ 
.bloq06{
    padding: 6%; 
}

.max_switch{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}
.max_user{
    width: 75%;
    height: 5.3vh;
    display: flex; 
    align-items: center; 
}
    .max_user img{
        width: 4.2vh;
        height: 4.2vh;
    }
.max_text{ 
    color: #fff;    
    font-family: texto_019;  
    line-height: 1.2;  
    margin-left: 4%;
}
.max_text h3{  
    font-size: 1.8vh;    
}
.max_text p{  
    color: #898989; 
    font-size: 1.3vh;    
}
.max_switch h4{
    color: #fff;    
    font-family: texto_019; 
    font-size: 1.6vh;  
}

/*****************************************************/ 
.max_titular {
    display: flex;
    justify-content: space-between;   
}
.max_titular h2{ 
    padding: 5% 0 2% 0;
    color: #898989; 
    font-family: texto_020; 
    font-size: 1.4vh; 
}
.max_titular h3{
    padding: 5% 0 2% 0;
    color: #fff;    
    font-size: 1.4vh;   
    font-family: texto_019;  
}
/*****************************************************/ 
.lista_follow {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    color: #fff;    
    font-family: texto_019;  
    font-size: 0.6vh; 
}
.lista_follow ul{
    width: 100%;
    height: auto; 
}
.follow{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin: 6% 0; 
    font-family: texto_019;   
}
.caja_user_follow{
    width: auto;
    height: auto;
    display: flex; 
    align-items: center; 
}
.caja_user_follow img{
    width: 3.7vh;
    height: 3.7vh; 
}
.user_follow{ 
    margin-left: 5%; 
}
.user_follow h3{ 
    font-size: 1.6vh;  
    color: #fff;   
}
.user_follow p{ 
    font-size: 1.4vh; 
    color: #898989; 
}
.follow h4{  
    font-size: 1.1vh;  
}
/*****************************************************/ 

.bloq07{
    color: #fff;    
    font-family: texto_019;  
    font-size: 1.2vh; 
    padding: 6%;
}
.bloq07 .img{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bloq07 h3{  
    font-family: texto_021;  
}







/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 





.boton_animado {  
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    user-select: none; /* Evita que el texto se seleccione al hacer doble clic */
}

.boton_animado:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el cursor por encima */ 
}

.boton_animado:active {
    transform: scale(0.95); /* Efecto de pulsación al hacer clic */
}



/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
        
    .menu_bar{
        width: 40vh; 
        height: 8vh;
        display: flex;
        position: fixed;
        bottom: 5%;
        margin-left: -20vh; 
    }
    .menu_bar ul{
        width: 95%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;  
        margin: auto;
    }
    .menu_link{
        width: 5.2vh;
        height: 5.2vh; 
        border-radius: 1.2vh; 
    }
    .menu_link .link{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    } 
    .menu_link .ico{
        width: 3.5vh;
        height: 3.5vh; 
    }

    .link:hover{
        background-color: #46BA00;
    } 

    .ico_act{
        fill: #46BA00 !important; 
    }
    .ico_act:hover{
        filter: brightness(0) saturate(100%) hue-rotate(90deg) sepia(100%) saturate(300%) brightness(90%);
    }


/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
 
.bg {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200vh;
    background: transparent url("../img/noise-transparent.png") repeat 0 0;
    background-repeat: repeat;
    animation: bg-animation .2s infinite;
    opacity: .9;
    visibility: visible;
    z-index: 100;
    pointer-events: none;
  }
  
  @keyframes bg-animation {
      0% { transform: translate(0,0) }
      10% { transform: translate(-5%,-5%) }
      20% { transform: translate(-10%,5%) }
      30% { transform: translate(5%,-10%) }
      40% { transform: translate(-5%,15%) }
      50% { transform: translate(-10%,5%) }
      60% { transform: translate(15%,0) }
      70% { transform: translate(0,10%) }
      80% { transform: translate(-15%,0) }
      90% { transform: translate(10%,5%) }
      100% { transform: translate(5%,0) }
  }


  
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 



    

/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*******************  MAIN    ***********************/ 
/*****************************************************/
 

.drag-region {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    height: 400px;
    z-index: 2; 
    -webkit-app-region: drag;
    cursor: move; /* Opcional: Cambia el cursor al estilo "mover" */ 
}


/*****************************************************/ 
.app_herramientas{
    position: fixed; 
    z-index: -1; 
    mix-blend-mode: color-dodge; 
}

body::-webkit-scrollbar,div::-webkit-scrollbar,html::-webkit-scrollbar {
    display:none;
}

html:not(.use-native-scroll) {
    overflow:hidden;
}
html:not(.use-native-scroll) body {
    position:fixed;
    width:100%;
}
.page {
    position:relative;
    z-index:1;
}
html:not(.use-native-scroll) .page {
    height:calc(var(--vh)*100);
}
.app {
    position:relative;
    z-index:1;
    overflow:hidden;
}
html:not(.use-native-scroll) .app {
    height:calc(var(--vh)*100);
}
.canvas-outer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}
.canvas-outer.beneath {
    z-index:-3;
}
.canvas-outer canvas {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
splash-bg {
    display:block;
}
splash-bg,splash-bg canvas {
    height:100%;
    position:absolute;
    bottom:auto;
    left:0;
    right:auto;
    top:0;
    width:100%;
}



/*****************************************************/ 
/*****************************************************/  
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/******************  RESPONSIVE    *******************/ 
/*****************************************************/


    /* Estilos por defecto para dispositivos móviles */
    @media only screen and (max-width: 700px) {
        /* Estilos para dispositivos móviles (teléfonos) aquí */
		.bloq02, .bloq03, .bloq07, .max_titular, .lista_follow{
            display: none; 
        }
        .bloq06{
            padding: 0 2%;
            height: 100%; 
            display: flex;
            align-items: center;
        }
        .bloques{
            width: 100%;
            flex-direction: column; 
            margin: 0;
            padding: 1% 2%;
        }
        .l1, .l2{
            width: 100%;
            padding:1% 2%;
        }
        .l1{ 
            height: 10vh;
        } 
        .l2{ 
            margin: 2% 0;
        } 
        .menu_bar{ 
            bottom: 15%; 
        }
        .bloq01{
            width: auto;
            height: 98%;
        }
        .bloq01 .img{
            padding: 0;
        }
        .bloq01 img{
            width: auto;
            height: 100%;
        } 
        .bloq_line .bloq03 .img, .user_story, .story_list, .bloq04 {
            height: auto;
        }
        .bloq04 {
            margin-bottom: 2%;
        }
        .max_user{
            width: 80%;
            height: 100%;
        }
        .max_user img {
            width: 7vh;
            height: 100%;
        }
        .max_text h3{
            font-size: 3.3vh;
        }
        .max_text p{
            font-size: 2.4vh;
        }
        .max_switch  h4{
            font-size: 3.0vh;
        }



    }

    /* Estilos para tabletas */
    @media only screen and (min-width: 701px) and (max-width: 1024px) {
        /* Estilos para tabletas aquí */
        .bloques{
            width: 98%;
        }
        .l1, .l2{
            height: 85vh;
        }
        .menu_bar{
            bottom: 2%;
        }
         
        
    }

    /* Estilos para pantallas más grandes (opcional) */
    @media only screen and (min-width: 1025px) {
        /* Estilos para pantallas de escritorio y más grandes aquí */
 
    }