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 30px 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: 80%;
        height: auto;
        display: flex;
        justify-content: space-between; 
        margin: 0 auto; 
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 2%; 
        margin-top: -5%;
    }
    .bloq_line{
        width: 32%;
        height: 70vh;  
        display: flex;
        flex-direction: column;
        justify-content: space-between; 
    }
    .l1{
        width: 100%;
        height: 25vh;  
    }
    .l2{
        width: 100%;
        height: 43vh;  
    }
    .l3{
        width: 100%;
        height: 13vh;  
    }
    .bloq04{
        width: 100%;
        height: 58%;
    }


    .bloq_line .img{
        width: 100%;
        height: 100%; 
        background-position: center;
        background-repeat: repeat;
        background-size: cover;
        opacity: 1;
        transition: 6.6s; 
        position: absolute;
    }
    .bloq01 .img{
        background-image: url("../img/max/max_01.png"); 
    }
    .bloq02 .img{
        background-image: url("../img/max/max_02.png"); 
    }
    .bloq04 .img{
        background-image: url("../img/max/max_000.png"); 
    }
    /* .bloq05 .img{
        background-image: url("../img/max/max_05.png"); 
    } */
    .bloq06 .img{
        background-image: url("../img/max/max_03.png"); 
    }
    .bloq07 .img{
        background-image: url("../img/max/max_04.png"); 
        background-position: center -3vw !important; 
    }

    .bloq_line .img:hover{
		opacity: 0;
		transition: 0.6s;  
	} 
    .bloq03 .img:hover, .bloq04 .img:hover{
		opacity: 0.7;
		transition: 0.6s;  
	}
     
    .bloq03 .img a{  
        width: 100%;
		height: 13vh;  
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none; 
		text-align: center; 
		color: #fff;  
    }
    .bloq03 a h1{
        font-family: texto_010;
        text-transform: uppercase;
        font-size: 3.5vw; 
    }
    .bloq03 h3{ 
        font-family: texto_018;
        font-size: 2.2vw; 
        letter-spacing: 0.4rem;
        margin-right: -8px;
    }
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 

    .text_portada{
        width: 100%;
        height: 100%;
        position: relative; 
		color: #fff; 
        display: flex;
        flex-direction: column;
        justify-content: end;  
        pointer-events: none;
        opacity: 0;
        padding: 2%; 
        transition: 3s; 
    }
    /* .text_portada h1,h2,p{backdrop-filter: blur(10px); opacity: 1;} */
    .ventana_app:hover .text_portada{
        opacity: 1;
        transition: 0.8s; 
    }
    .bloq_line h1{ 
        padding-right: 0.1vw;
        display: inline-block; 
        font-family: texto_012;
        letter-spacing: -2px;
        font-size: 3.8vw;  
    }
    .bloq_line h2{ 
        display: inline-block; 
        font-family: texto_021; 
        font-size: 1.8vw;  
    }
    .bloq_line p{ 
        display: inline-block; 
        font-family: texto_019; 
        font-size: 1.4vw; 
    }


/*****************************************************/ 
/*****************************************************/     
/*****************************************************/ 
    
    .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%);
    }

    
/*****************************************************/ 
/*****************************************************/ 
    .music{
        width: 100px;
        height: 100px;
        border: solid red 2px;
    } 
    .music {
        display: inline-block;
        cursor: pointer;
        background-color: #4CAF50; /* Color de fondo del botón */
        color: white; /* Color del texto o íconos dentro del botón */
        border-radius: 5px; /* Bordes redondeados para un aspecto suave */
        padding: 10px 20px; /* Espaciado interno para hacer el botón más grande */
        margin: 5px; /* Margen alrededor del botón */
        transition: background-color 0.3s ease; /* Transición suave para el cambio de color */
    } 
    .music:hover {
        background-color: #66BB6A; /* Cambio de color al pasar el ratón por encima */
    } 
    .music:active {
        background-color: #388E3C; /* Cambio de color al hacer clic en el botón */
    }
    
    #background-music{
        position: fixed;
        opacity: 1;
    }

/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
    
    .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) }
    }


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




/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
 
    .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 */
    } 

    

/*****************************************************/ 
/*****************************************************/  
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*******************  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í */

        .text_portada{  
            opacity: 1;
            padding: 2%;  
        }  
        .bloques{
            width: 98%; 
            display: flex;
            flex-direction: column;
            margin-top: 1%;
        }
        .bloq_line{
            width: 100%;
            height: 30vh; 
        }
        .ventana_app{
            margin: 1% 0;
        }
        .bloq03 .img a{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center; 
        }
        .bloq03 a h1{ 
            font-size: 4.4vh;  
        }
        .bloq03 h3{  
            font-size: 2vh;  
        }
        .bloq_line h1 { 
            font-size: 4vh;
        }
        .bloq_line h2 { 
            font-size: 2.2vh;
        }
        .bloq_line p { 
            font-size: 2.2vh;
        } 
        .bloq01 .img{
            background-position: center -32vw !important;
            opacity: 0.3;
        }
        .bloq02 .img{
            background-position: center -12vw !important;
            opacity: 0.3;
        }
        .bloq04 .img{
            background-position: center -41vw !important; 
        }
        .bloq06 .img, .bloq07 .img{
            background-position: center -22vw !important;
            opacity: 0.3;
        }
        .menu_bar{
            width: 90vw; 
            height: 14vw;
            position: relative;
            margin-top: 3%;
        }
        .menu_link{
            width: 10.3vw;
            height: 10.3vw; 
            border-radius: 1.2vw; 
        }
        .menu_link .ico{
            width: 8.2vw;
            height: 8.2vw; 
        }
     

    }

    /* Estilos para tabletas */
    @media only screen and (min-width: 701px) and (max-width: 1024px) {
        /* Estilos para tabletas aquí */
 
        
    }

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