@font-face{
	font-family: 'monse';
	src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: 'coolvetica';
	src: url('../assets/fonts/Coolvetica.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: 'bebas';
	src: url('../assets/fonts/BebasNeue.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
body{
    background: white;
}
#main-header{
	background: #0B1F3A;
	width: 100%;
	font-family: 'monse', arial;
}
.nav-bar{
	background: #0B1F3A;
	width: 100%;
	font-family: 'monse', arial;

	display: flex;
	align-items: center;
	justify-content: space-around; /* separa menu y logo */
	position: relative;
	padding: 0.5em 1em;
}
/* 3 columnas iguales */
.left, .center, .right{
	flex: 1;
	display: flex;
	align-items: center;
}

/* izquierda */
.left{
	justify-content: flex-start;
}

/* centro (logo perfectamente centrado) */
.center{
	justify-content: center;
}
/* derecha */
.right{
	justify-content: flex-end;
}

/* menú */
.nav{
	display: flex;
	gap: 1em;
}
.nav-item{
	color: #E2E8F0;
	font-weight: bold;
	text-decoration: none;
	margin: 0.5em;
	border: 0.5em;
	
}
.loguito{
	height: 4em;
	width: 4em;
}
.logogeh{
	width: 6em;
	height: 3em;
	margin-left: 2em;
}
.erroricon{
	width: 5em;
	height: 5em;
}
.footer-nav{
	background: #0B1F3A;
	width: 100%;
	font-family: 'monse', arial;
	color: #E2E8F0;
	font-weight: bold;
	text-decoration: none;
}
.sociales{
	width: 2em;
	height: 2em;
}

.main-nav{
	width: 100%;
	text-decoration: none;
}
.imgprin{
	width: 25em;
	height: 25em;

}
.login-main{
	height: 100vh;
}
.carta-login{
	width: 100%;
	max-width: 400px;
	height: auto;
	max-height: 400px;
}


.titulo{
	font-family: 'bebas', arial;
	color: #1A1A1A;
	font-size: 2.7em;
}

.subtitulo{
	font-family: 'coolvetica', arial;
	color: #6B7280;
}

.btn_cta{
	background-color: #F59E0B;
	color: white;
	font-weight: bold;
	font-size: 1.2em;
}

.btn_cta:hover{
	background-color: #D97706;
	color: white;
}

 .liProblema{
 	font-family: 'coolvetica', arial;
 	color: #1A1A1A; 
 	font-size: 1.3em;
 }

.problemasImg{
	width: 10em;
	height: 10em;
}

.problemasImgen{
	width: 15em;
	height: 10em;
}

.carruselMarcas{
	margin-top: 10em;
}

.carrusel{
    margin: 100px auto;
    width: 90%;
    
    display: flex;
    overflow-x: auto;
}
.carrusel::-webkit-scrollbar{
    display: none;
}
.grupocarrusel{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    animation: girar 10s infinite linear;
    padding-right: 1em;
}
.carruselitem{
    flex: 0 0 5em;
    height: 5em;
    padding: 1em;
    
    font-size: 3rem;
    border-radius: .2em;
    text-align: center;
    align-content: center;
    
}

@keyframes girar{
    from {translate: 0;}
    to {translate: -100%;}
}