body {
		margin: 0;
		padding: 0;
		/* background-color: transparent; */
		background-color: black;
	}
	
	*{
		box-sizing: border-box;
		transition: 0.6s;
		overflow: hidden;
	}
	img {
		max-width: 100%;
	}
  
  /****************************************************/
  /****************************************************/
  /*******************  CLASES  ***********************/
  /****************************************************/
  /****************************************************/
  
  
  /*******************  MAIN    ***********************/
	.main{
		width: 100%;
		height: auto;  
	}

	/****************************************************/
 
	.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: 16px;
		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);
		
	}


	/*****************************************************/
	.logo{
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -15vw; 
		margin-top: -2vw;
	} 
	.logo img{
		width: 30vw;   
	}
	.bloques{
		width: 100%;
		height: 100vh;  
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}
	.bloq_line{
		width: 100%;
		height: 33vh;
		display: flex;
		justify-content: space-between;
		align-items: center;  
	}
	.l1 .ventana_app, .l3 .ventana_app{
		width: 24%;
	}
	.l2 .ventana_app{
		width: 33%;
	}
	.bloq_line .ventana_app{
		height: 90%; 
	}
	.bloq_line .img{
		width: 100%;
		height: 100%; 
		background-position: center;
		background-repeat: repeat;
		background-size: cover;
		opacity: 0;
		transition: 6.6s; 
	}
 
	.bloq01 .img{
		background-image: url("../img/banner/banner_01.png"); 
		background-position: center -2vw !important; 
	}
	.bloq02 .img{
		background-image: url("../img/banner/banner_02.png"); 
	}
	.bloq03 .img{
		background-image: url("../img/banner/banner_03.png"); 
	}
	.bloq04 .img{
		background-image: url("../img/banner/banner_04.png"); 
	}
	.bloq05 .img{
		background-image: url("../img/banner/banner_05.png"); 
		background-position: center -4vw !important; 
	}
	.bloq06 .img{
		background-image: url("../img/banner/banner_06.png"); 
		background-position: center -4vw !important; 
	}
	.bloq07 .img{
		background-image: url("../img/banner/banner_07.png"); 
		background-position: center -1vw !important; 
	}
	.bloq08 .img{
		background-image: url("../img/banner/banner_08.png"); 
		background-position: center -3vw !important; 
	}
	.bloq09 .img{
		background-image: url("../img/banner/banner_09.png"); 
	}
	.bloq10 .img{
		background-image: url("../img/banner/banner_10.png"); 
	}

	.bloq_line .img:hover{
		opacity: 1;
		transition: 0.6s; /* Duración más larga al finalizar el hover */
	}

	.l1 .ventana_app{
		margin-top: -40px;
	}
	.l1 .ventana_app:hover{
		margin-top: -10px;
		transition: margin-top 0.6s linear; /* Transición lineal */
	}

	.l3 .ventana_app{
		margin-bottom: -40px;
	}
	.l3 .ventana_app:hover{
		margin-bottom: -10px;
		transition: margin-bottom 0.6s linear; /* Transición lineal */
	}



 
	.bloq05{ 
		margin-left: -20px;
	}
	.bloq05:hover{
		margin-left: -10px;
		transition: margin-left 0.3s linear;  
	}
	.bloq06{ 
		margin-right: -20px;
	}
	.bloq06:hover{
		margin-right: -10px;
		transition: margin-right 0.3s linear;  
	}



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





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



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



/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
/*****************************************************/ 
 
.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: 600px) {
        /* Estilos para dispositivos móviles (teléfonos) aquí */
		.l1,.l2,.l3{
			width: 98% !important;
			flex-direction: column;
		}
		.ventana_app{
			width: 98% !important;
			margin: 0;
			padding: 0;
		} 
		.l1 .img, .l3 .img, .bloq05 .img, .bloq06 .img{
			opacity: 0.4 !important;
		} 
		.logo{
			position: relative;
			z-index: 2;
			top: 0;
			left: 17%;
			padding: 15% 0; 
			width: 100vw !important;
		}
		.logo img{ 
			width: 80% !important;
		}

		.bloq01 .img{
            background-position: center -14vw !important; 
        }
		.bloq02 .img{
            background-position: center -20vw !important; 
        }
		.bloq03 .img{
            background-position: center -20vw !important; 
        }
		.bloq05 .img{
            background-position: center -30vw !important; 
        }
		.bloq06 .img{
            background-position: center -24vw !important; 
        }
		.bloq07 .img{
            background-position: center -10vw !important; 
        }
		.bloq08 .img{
            background-position: center -16vw !important; 
        }
		.bloq09 .img{
            background-position: center -15vw !important; 
        }
		.bloq10 .img{
            background-position: center -20vw !important; 
        }

    }

    /* Estilos para tabletas */
    @media only screen and (min-width: 601px) 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í */
 
    }