@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*html{scroll-behavior: smooth;}*/

body{margin: 0; background-color: ghostwhite; font-family: "Quicksand", sans-serif;}
body::-webkit-scrollbar{display: none;}

a{text-decoration: none;}

.header{
	display: flex;
	position: fixed;
	top: 0;
	z-index: 10;

	background-color: rgb(106, 90, 205);
	/*background-color: skyblue;*/
	width: 100%;
	height: 60px;
	
	align-items: center;
	justify-content: space-between;
}

.enter-logo{
	margin-left: 18px;
	display: flex;
}

.nav-solucion{
	margin-right: 16px;
	/*background-color: green;*/
}

.nav-lista{
	display: flex;
	padding: 0;
	list-style: none;
	flex-direction: row;
	column-gap: 8px;
}

.nav-item{display: flex; align-items: center; justify-content: center;}

.form-login{
	display: flex;
	align-items: center;
	justify-content: center;
}

input{
	font-family: "Quicksand", sans-serif;
	font-size: 14px; border: none; padding: 6px;
	border-radius: 4px; text-align: center;
}
.input-item-usr{
	max-width: 150px;
} .input-item-pss{
	max-width: 150px;
} .input-item-usr, .input-item-pss{
	outline: 3px solid transparent;
	transition: 0.3s;
} .input-item-usr:focus, .input-item-pss:focus{
	outline: 3px solid rgb(255, 135, 0);
}

.input-item-sbm{
	background-color: rgb(255, 135, 0);
	color: white;
	outline: none;
	font-family: "Quicksand", sans-serif;
	font-size: 14px; border: none; padding: 6px;
	border-radius: 4px;
	transition: 0.3s;
} .input-item-sbm:hover{cursor: pointer; background-color: rgb(255, 105, 0);}

.body-content{
	display: flex;
	flex-direction: column;
	/*margin-top: 60px;*/
	width: 100%;
	/*height: calc(100vh - 60px);*/
	height: 100vh;
	background-color: transparent;

	align-items: center;
	justify-content: center;
	background-image: url("../img/banner.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
} .banner-footer{
	position: absolute;
	bottom: 50px;
	color: white;
	font-size: 20px;
	width: 20px;
	height: 20px;
	animation: animFooterArrow 0.8s ease-in-out infinite;
	background-color: transparent;
	background-image: url("../icons/angle-down.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: none;
} .banner-footer:hover{cursor: pointer;}
@keyframes animFooterArrow{
	0% {transform: translateY(4px);}
    50% {transform: translateY(-4px);}
    100% {transform: translateY(4px);}
}

.body-content2{
	display: flex;
	position: absolute;
	margin-top: 0px;
	width: 100%;
	/*height: calc(100vh - 60px);*/
	height: 100vh;
	background-color: transparent;

	align-items: center;
	justify-content: center;
	background-image: url("../img/banner-info.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

.text-info{
	color: ghostwhite;
	opacity: 0.8;
	font-size: 28px;
	text-align: center;

	margin-left: 100px;
	margin-right: 100px;
}

.img-info{
	position: absolute;
	bottom: 80px;
}

.banner{display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding-left: 16px;
	padding-right: 16px;
}
.tb{
	text-align: center;
	color: white;
	opacity: 0;
	animation: aparecer 3s forwards, moverTexto 3s ease-in-out infinite;
}
@keyframes aparecer{
	to {opacity: 1;}
} @keyframes moverTexto {
    0% {transform: translateY(4px);}
    50% {transform: translateY(-4px);}
    100% {transform: translateY(4px);}
}

.banner-title{font-size: 62px;}
.banner-sub{font-size: 22px;}













/* BETA MODAL */
/* Estilos para el modal */
        .modal {
            display: none; /* Oculto por defecto */
            position: fixed;
            z-index: 1;
            width: 100%;
            /*height: calc(100vh - 60px);*/
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro transparente */
        }

        .modal-content {
            background-color: #fff;
            margin: 85px auto; /* Centra vertical y horizontalmente */
            padding: 20px;
            border-radius: 10px;
            width: 60%;
            height: 180px;
            text-align: center;
        }

        .log-lista{
        	display: flex;
        	flex-direction: column;
        	row-gap: 10px;
			list-style: none;
			padding: 0;
		}

        /* Botón para cerrar el modal */
        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            float: right; /* Flotar a la derecha */
            margin-top: -20px;
            transition: 0.5s;
        }

        h3{color: grey;}

        .close:hover, .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
/* BETA MODAL */











/* MEDIA QUERIES */
@media screen and (max-width: 712px){
	input{
		font-size: 12px;
	}
	.banner-title{font-size: 52px;}
	.banner-sub{font-size: 18px;}

	.text-info{
		font-size: 18px;
		margin-left: 14px;
		margin-right: 14px;
	}
} 

@media screen and (max-width: 554px){
	.banner-title{font-size: 42px;}
	.banner-sub{font-size: 14px;}
} 

@media screen and (max-width: 442px){
	.banner-title{font-size: 32px;}
	.banner-sub{font-size: 10px;}
	.modal-content{width: 80%;}

}

@media screen and (max-height: 420px){
	.img-info{bottom: 30px;}
}

@media screen and (max-height: 330px){
	.modal-content{height: 140px;}
	.log-lista{row-gap: 5px;}
}

@media screen and (max-height: 315px){
	.banner-footer{bottom: 10px;}
	.text-info{font-size: 12px;}
	.img-info img{width: 70px;}
	.banner-title{font-size: 32px;}
	.banner-sub{font-size: 10px;}
}