body{margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#222222b6;font-family:consolas;user-select:none;touch-action:manipulation;}
.navbar{z-index:1;position:fixed;top:0;left:0;width:100%;height:80px;padding:0 0 0 100px;box-sizing:border-box;transition:0.5s;}
.navbar.hide{transform:translateY(-100%);transition:0.6s;}
.navbar .channel{position:relative;}
.navbar ul{margin:0;padding:0;display:flex;float:right;background:rgba(0,0,0,0.5);}
.navbar ul li{list-style:none;line-height:80px;text-align:center;}
.navbar ul li a{display:block;padding:0 30px;text-decoration:none;color:#fff;text-transform:uppercase;font-weight:bold;font-size:17px;}
.navbar ul li a.active,
.navbar ul li a:hover{background:#fd2928;color:#fff;}
.navbar .channel img{width:66px;height:66px;}

/*Formulario Login*/
.containerNeon{position:relative;width:450px;min-height:300px;background:rgba(255,255,255,0.05);box-shadow:0 5px 15px rgba(0,0,0,1);}
.containerNeon .user{position:absolute;width:99px;height:99px;border-radius:50%;overflow:hidden;top:calc(-100px/2);left:calc(50% - 49px);}
.containerNeon:before{content:'';position:absolute;top:0;left:0;width:50%;height:100%;background:rgba(255,255,255,0.1);pointer-events:none;}
.form{position:absolute;width:100%;height:100%;padding:40px;box-sizing:border-box;z-index:1;}
.form h2{margin:0;padding:0;color:#fff;font-size:24px;}
.form .inputBox{width:100%;margin-top:20px;}
.form .inputBox input{width:100%;background:transparent;border:none;border-bottom:2px solid #fff;outline:none;font-size:18px;color:#fff;padding:5px 0;font-family:consolas;font-weight:600;letter-spacing: 6px;}
::placeholder{color:#eee;}
.form .inputBox input[type="submit"],
.form .inputBox button{background:#fff;color:#000;border:none;font-weight:900;cursor:pointer;/*max-width:100px;*/}
/*Hasta aqui se ve Ok*/
.containerNeon:after{content:'';position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;background:linear-gradient(45deg,#ff0047,#6eff00);pointer-events:none;animation:animate1 10s linear infinite;}
.form p{color:#eee;}
.form p a{color:#fff;}
@keyframes animate1{
    0%{filter:blur(60px) hue-rotate(0deg);}
    100%{filter:blur(60px) hue-rotate(360deg);}
}

/*forma registro*/
section{width:100%;min-height:200vh;background:url('../../imagenes/bg_1.png');background-size:cover;}
.containerSU{position:absolute;top:66%;left:45%;transform:translate(-50%,-50%);width:700px;height:600px;background:rgba(104, 58, 183, 0.526);}
.containerSU .formContent,
.containerSU .logIn{position:relative;min-height:900px;height:100%;width:50%;float:left;box-sizing:border-box;}
.logIn .user{position:absolute;width:99px;height:99px;border-radius:50%;overflow:hidden;top:calc(-117px/2);left:calc(50% - 49px);}
.containerSU .formContent a{display:inline-block;padding:10px 20px;color:#fff;background:#ff0057;border-radius:25px;text-decoration:none;box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.containerSU .formContent{padding:40px 30px;color:#fff;}
.containerSU .logIn{background:#fff;min-height:900px;height:100%;top:-15px;box-shadow:-20px 0 15px rgba(0,0,0,0.2);padding:33px;}
.containerSU .logIn h5,
.containerSU .logIn h4{text-align:center;margin:17px 0 16px;padding:0;color:#262626;}
.containerSU .logIn input{display:block;width:100%;padding:9px;box-sizing:border-box;margin-bottom:16px;border:2px solid #ccc;border-radius:25px;outline:none;font-size:17px;}
.containerSU .logIn input:hover,
.containerSU .logIn input:valid{border:2px solid #673ab7;}
.containerSU .logIn input[type="submit"],
.containerSU .logIn button{display:block;width:100%;padding:9px;box-sizing:border-box;border:2px solid #ccc;border-radius:25px;outline:none;font-size:17px;color:#fff;background:#673ab7;margin:17px 0;font-size:16px;transition:0.5s;user-select:none;}
.containerSU .logIn input[type="submit"]:hover,
.containerSU .logIn button:hover{background:#ff0057;border:2px solid #ff0057;}
.containerSU .logIn form a{text-decoration:none;font-weight:bold;}

/*Recupera Password*/
@property --a{
syntax:'<angle>';
inherits:false;
initial-value:0deg;}
.dinamicBox{position:relative;width:400px;min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:repeating-conic-gradient(from var(--a),#01dbc2 0%, #01dbc2 10%, transparent 10%, transparent 50%);animation:animateDB 6s linear infinite;}
.dinamicBox .user{position:absolute;width:99px;z-index:1000;height:99px;border-radius:50%;overflow:hidden;top:calc(-117px/2);left:calc(50% - 49px);}
@keyframes animateDB{
    0%{--a: 0deg;}
    100%{--a: 360deg;}
}
.dinamicBox::before{content:'';position:absolute;width:100%;height:100%;background:repeating-conic-gradient(from var(--a),#01dbc2 0%, #01dbc2 10%, transparent 10%, transparent 50%);animation:animateDB 6s linear infinite;animation-delay:-1.5s;}
.dinamicBox::after{content:'';position:absolute;inset:2px;border:20px solid #222;background:#303030;}
.dinamicForm{position:relative;z-index:1000;}
.dinamicBox h3{color:#fff;font-weight:500;font-size:1.1em;margin-bottom:25px;padding-top:60px;width:100%;z-index:1000;text-align:center;letter-spacing:0.1em;text-transform:uppercase;}
.dinamicForm .inputBx{position:relative;margin-bottom:40px;width:240px;margin: 23px auto;}
.dinamicForm .inputBx span{position:absolute;inset:-2px;background:#f00;z-index:1;}
.dinamicForm .inputBx span::before{content:'';position:absolute;inset:-2px;background:repeating-conic-gradient(from var(--a),#01dbc2 0%, #01dbc2 10%, transparent 10%, transparent 50%);animation:animateDB 6s linear infinite;box-shadow:0 0 0 2px #000;}
.dinamicForm .inputBx:nth-child(2) span::before{animation-delay:-1.5s;}
.dinamicForm .inputBx span::after{content:'';position:absolute;inset:0;background:#292929;}
.dinamicForm .inputBx input{position:relative;z-index:100000;outline:none;border:none;width:100%;padding:8px 17px;background:transparent;color:#fff;text-transform:uppercase;letter-spacing:0.1em;}
.dinamicForm .inputBx input::placeholder{color:#fff;text-align:left;letter-spacing:2px;opacity:0.5;font-weight:300;}
.dinamicForm .inputBx input[type="submit"],
.dinamicForm .inputBx button{background:#01dbc2;cursor:pointer;box-shadow:0 0 0 4px #01dbc2;width:100%;font-weight:500;color:#292929;filter:drop-shadow(0 0 15px #01dbc2);}
.dinamicForm .group{position:relative;top:-10px;color:#e2dbef;padding-bottom:60px;display:flex;justify-content:space-between;}
.dinamicForm .group a{color:#fff;text-decoration:underline;text-transform:uppercase;letter-spacing:0.1em;font-size:1em;font-weight: 300;}
.dinamicForm .group a:hover,
.dinamicForm .group a:nth-child(2){color:#01dbc2;filter:drop-shadow(0 0 5px #01dbc2);}

/*Smartphone*/
.sp{position:relative;width:200px;height:333px;background:#121212;transform: rotate(-17deg);transition:.6s;box-shadow:inset 0 0 15px rgba(0,0,0,.2), 0 40px 99px rgba(0,0,0,.4);margin:0 17px 66px 0;}
.topPhone{position:absolute;top:-45px;width:100%;height:45px;background:#efefef;border-top-left-radius:33px;border-top-right-radius:33px;}
.topPhone:before{content:'';position:absolute;top:50%;left:35%;transform:translateY(-50%);width:4px;height:4px;background:#ccc;border:2px solid #aaa;border-radius:50%;box-shadow:0 0 0 1px #999;}
.topPhone:after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:3px;background:#333;border:2px solid #aaa;border-radius:3px;}
.bottomPhone{position:absolute;bottom:-45px;width:100%;height:45px;background:#efefef;border-bottom-left-radius:33px;border-bottom-right-radius:33px;}
.bottomPhone:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px;height:15px;border:2px solid #999;border-radius:50%;cursor:pointer;border-radius:6px;}
.bottomPhone:hover:before{border:1px solid #000;}
.sp .screen{position:absolute;top:0px;bottom:0px;right:0px;left:0px;background:#000;border-radius:0px;overflow:hidden;}
.sp .screen img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:1s;}
.sp .screen:hover img{opacity:1;}
.sp:hover{transform: rotate(0deg);}
.sp:hover .screenAct{position:relative;width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;}
.screenAct img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:10;transition:0.6s;}
.sp:hover .screenAct img{opacity:1;}
.screenAct:before{content:'';position:absolute;top:0;left:-50%;width:100%;height:100%;background:rgba(255,255,255,0.1);z-index:1;transform:skewX(-6deg);}
.screenAct h2{color:#fff;font-weight:200;font-size:2.3em;z-index:100;transform:translateY(50px);line-height:0.6em;transition:0.7s;text-shadow:0 1px 3px rgba(0,0,0,0.5);opacity:0;}
.screenAct h2 span{font-size:0.4em;}
.sp:hover .screenAct h2{opacity:1;transition-delay:0.6s;transform:translateY(0px);}
.sp .screen .screenAct ul{position:absolute;margin:0;opacity:0;padding:0;bottom:16px;display:flex;z-index:1000;justify-content:space-around;width:100%;flex-direction:row;align-items:space-between;}
.sp .screen:hover .screenAct ul{opacity:1;}
.sp .screen:hover .screenAct ul li{position:relative;list-style:none;color:#fff;font-size:1.5em;padding-bottom:33px;cursor:pointer;transition:0.5s;opacity:0;transform:translateY(20px);}
.sp .screen:hover .screenAct:hover ul li{opacity:1;z-index:100;transform:translateY(0px);transition-delay:0.5s;}
.sp .screen:hover .screenAct ul li:nth-child(2){transition-delay:0.7s;}
.sp .screen:hover .screenAct ul li:nth-child(3){transition-delay:0.9s;}
.sp .screen:hover .screenAct ul li:nth-child(4){transition-delay:1.1s;}
.sp .screen:hover .screenAct ul li img{width:20px;height:33px;}
.sp .screen:hover .screenAct ul li:hover img{transform:transateY(-10px);}

/*Mensaje redireccionado*/
.divEmergente{top:50%;left:50%;transform:translate(-50%,-50%);padding:66px;background:#000;}
.divEmergente p{color:#fff;font-size:1.1em;font-weight:300;letter-spacing:3px;}
.divEmergente p{color:#fff;font-size:1.1em;font-weight:500;letter-spacing:3px;}

/*Login React-Native*/
.logRN{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background: linear-gradient(90deg,#DEFCF3 0%,#DEFCF3 50%,#1F1B1B 50%,#1F1B1B 100%);background-attachment:fixed;background-repeat:no-repeat;background-size:100%;background-position:absolute;touch-action:none;}
@property --a{
syntax:'<angle>';
inherits:false;initial-value:0deg;
}
.leyenda{display:block;padding:33px 19px;border-radius:17px;width:90%;margin:0px 5% 33px;background:#01ffea90;}
.leyenda h4{font-weight:500;font-size:1.3em;letter-spacing:3px;text-align:center;}
.boxRN{display:flex;position:relative;justify-content:center;align-items:center;width:450px;height:200px;background:repeating-conic-gradient(from var(--a), #ff2770 0%, #ff2770 5%, transparent 5%, transparent 40%, #ff2770 50%);filter:drop-shadow(0 15px 50px #000);border-radius:20px;animation:rotating 6s linear infinite;transition:1s;touch-action:manipulation;}
.boxRN:hover{width:475px;height:500px;}
@keyframes rotating{
	0%{
		--a:0deg;
	}
	100%{
		--a:360deg;
	}
}
.boxRN::before{content:'';position:absolute;width:100%;height:100%;background:repeating-conic-gradient(from var(--a), #45f3ff 0%, #45f3ff 5%, transparent 5%, transparent 40%, #45f3ff 50%);filter:drop-shadow(0 15px 50px #000);border-radius:20px;animation:rotating 6s linear infinite;animation-delay:-1s;}
.boxRN::after{content:'';position:absolute;inset:4px;background:#2d2d39;border-radius:15px;border:8px saolid #25252b;}
.loginRN{position:absolute;inset:60px;display:flex;justify-content:center;align-items:center;flex-direction:column;border-radius:10px;background:rgba(0,0,0,0.5);z-index:1000;box-shadow:inset 0 10px 20px rgba(0,0,0,0.5);border-bottom:2px solid rgba(255,255,255,0.5);transition:1s;color:#fff;overflow:hidden;}
.boxRN:hover .loginRN{inset:40px;}
.loginBxRN{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;width:70%;transform:translateY(117px);transition:0.5s;}
.boxRN:hover .loginBxRN{transform:translateY(0px);}
.loginBxRN h2{text-transform:uppercase;font-weight:600;letter-spacing:0.2em;}
.loginBxRN h2 i{color:#ff2770;
	text-shadow:0 0 5px #ff2770,
		0 0 25px #ff2770;}
.loginBxRN input{width:100%;padding:10px 20px;outline:none;border:none;font-size:1em;color:#fff;background:rgba(0,0,0,0.1);border:2px solid #fff;border-radius:30px;}
.loginBxRN input::placeholder{color:#999;}
.loginBxRN input[type="submit"]{background:#45f3ff;border:none;font-weight:500;color:#111;cursor:pointer;transition:0.5s;}
.loginBxRN input[type="submit"]:hover{
	box-shadow: 0 0 10px #45f3ff,
		0 0 60px #45f3ff;}
.groupRN{width:100%;display:flex;justify-content:space-between;}
.groupRN a{color:#fff;text-decoration:none;}
.groupRN a:nth-child(2){color:#ff2770;font-weight:600;}
@media(max-width:850px){
    /*Smartphone*/
    .sp{position:relative;width:150px;height:250px;margin:0 auto 66px;}
    .topPhone{position:absolute;top:-40px;width:100%;height:40px;background:#efefef;border-top-left-radius:25px;border-top-right-radius:25px;}
    .topPhone:before{content:'';position:absolute;top:50%;left:35%;transform:translateY(-50%);width:4px;height:4px;background:#ccc;border:2px solid #aaa;border-radius:50%;box-shadow:0 0 0 1px #999;}
    .topPhone:after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:3px;background:#333;border:2px solid #aaa;border-radius:3px;}
    .bottomPhone{position:absolute;bottom:-40px;width:100%;height:40px;background:#efefef;border-bottom-left-radius:25px;border-bottom-right-radius:25px;}
    .bottomPhone:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px;height:15px;border:2px solid #999;border-radius:50%;cursor:pointer;border-radius:6px;}
    .bottomPhone:hover:before{border:1px solid #000;}
    .formContent h2{padding:6px;font-size:1.1em;font-weight:600;}
    .formContent p{padding:6px;font-size:1em;font-weight:200;}
    .formContent a{padding:6px 16px;border-radius:25px;}
    .containerSU{display:flex;flex-direction:column;left:50%;}
    .containerSU .formContent,
    .containerSU .logIn{position:relative;min-height:100%;width:100%;}
    .containerSU .logIn{min-height:999px;}
    .containerNeon{width:450px;min-height:350px;background:rgba(255,255,255,0.05);box-shadow:0 5px 15px rgb(0 0 0);}
    .dinamicBox{position:relative;width:333px;min-height:400px;}
    .dinamicForm .inputBx {width: 240px;margin: 23px auto;}
    .boxRN{width:300px;height:200px;}
    .boxRN:hover{width:333px;height:500px;}
}
@media(max-width:715px){
    .containerSU{position:absolute;top:66%;left:50%;transform:translate(-50%,-50%);width:333px;height:600px;}
    .containerNeon{width:450px;min-height:350px;background:rgba(255,255,255,0.05);box-shadow:0 5px 15px rgb(0 0 0);}
    .dinamicBox{position:relative;width:333px;min-height:400px;}
    .dinamicForm .inputBx {width: 240px;margin: 23px auto;}
    .boxRN{width:300px;height:200px;}
    .boxRN:hover{width:333px;height:500px;}
}