/*
 # ########*###########################
 Autor: José Luis Rodriguez
 Mail: jrodriguez@bincodex.com
 Web: https://bincodex.com
 Fecha: 2026-06-25 08:49:16
 Archivo: inicio.css
 Codificación: UTF-8
 Editado en: Kate 25.04.3
 ####################################
 */




* {
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family:'Segoe UI',sans-serif;
}

html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
/* 	font-size: 12px; */
/* 	font-family: var(--fuente-principal); */
}

body{
	background:#f7f7f7;
	color:#333;
}

.jf {
	text-align: justify;
}

/* NAVBAR */
.navbar{
	height:90px;
	background:#fff;
	box-shadow:0 2px 20px rgba(0,0,0,.05);
	padding:0 8%;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

#logo_corto {
	display: none;
}

.lnk {
	cursor: pointer;
}

.logo {
	height: 70px;
	cursor: pointer;
}

.logo img{
	height: 70px;
}

.menu{
	list-style:none;
	display:flex;
	gap:40px;
}

.menu a{
	text-decoration:none;
	color:#555;
	font-weight:500;
}

.menu a:hover{
	color:#55aaff;
}

.btn-login{
	background:#55aaff;
	color:#fff;
	text-decoration:none;
	padding:14px 28px;
	border-radius:30px;
}








/* HERO */
.hero{
	height:80vh;
	background: linear-gradient( rgba(255,255,255,.1), rgba(255,255,255,.1)), url('../../img/wallpaper.jpg?v=2');
	background-size:cover;
	background-position:center;
	display:flex;
	align-items:center;
	padding:0 10%;
	color: #fff;
}

.hero-content{
	max-width:650px;
}

.hero h1{
	font-size:4rem;
	margin-bottom:20px;
}

.hero p{
	font-size:1.2rem;
	color:#666;
	margin-bottom:40px;
}

.hero-buttons{
	display:flex;
	gap:20px;
}

.btn-primary,
.btn-secondary{
	text-decoration:none;
	padding:16px 35px;
	border-radius:40px;
}

.btn-primary{
	background:#00aaff;
	color:#fff;
}

.btn-secondary{
	border:2px solid #55aaff;
	color:#55aaff;
}









/* SERVICIOS */
.services{
	padding:100px 8%;
}

.services h2{
	text-align:center;
	margin-bottom:60px;
	font-size:2rem;
}

.cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
	gap:30px;
}

.card{
	background:#fff;
	border-radius:20px;
	padding:40px;
	text-align:center;
	box-shadow:0 5px 25px rgba(0,0,0,.05);
}

.card i{
	font-size:3rem;
	color:#55aaff;
	margin-bottom:25px;
}

.card h3{
	margin-bottom:15px;
}








/* BENEFICIOS */
.benefits{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	padding:100px 8%;
	align-items:center;
}

.benefit-image{
	height:450px;
	border-radius:30px;
	background:	url('../../img/web/beneficios.jpg') center/cover;
}

.benefit-content h2{
	margin-bottom:30px;
	font-size:2.5rem;
}

.benefit-content li{
	list-style:none;
	margin:20px 0;
	font-size:1.1rem;
}







/* NOTICIAS */
.news{
	padding:100px 8%;
}

.news h2{
	text-align:center;
	margin-bottom:60px;
}

.news-grid{
	display:grid;
	grid-template-columns:repeat( auto-fit, minmax(300px, 1fr ) );
	gap:30px;
}

.news article{
	background:#fff;
	border-radius:20px;
	overflow:hidden;
	box-shadow:0 5px 25px rgba(0,0,0,.05);
}

.news img{
	width:100%;
	display:block;
}

.news h3,
.news p{
	padding:20px;
}







/* CTA */
.cta{
	padding:100px 8%;
	text-align:center;
	background:
	linear-gradient(135deg,#55aaff,#0055ff);
	color:#fff;
}

.cta h2{
	font-size:3rem;
	margin-bottom:20px;
}

.cta p{
	margin-bottom:40px;
}

.cta a{
	text-decoration:none;
	background:#fff;
	color:#55aaff;
	padding:18px 40px;
	border-radius:40px;
	font-weight:bold;
}








/* FOOTER */
footer{
	background:#222;
	color:#fff;
	padding:60px 8%;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:40px;
}

.social{
	display:flex;
	gap:20px;
	font-size:1.5rem;
	margin-top:15px;
}










/*USER log*/
.header-usuario {
    display: flex;
    align-items: center;
    gap: 16px;
}

.usuario-info {
    text-align: right;
}

.usuario-rol {
    font-size: 0.9rem;
    font-weight: 600;
}

.usuario-contexto {
    font-size: 0.75rem;
    color: var(--texto-mutated);
}

.usuario-avatar {
    width: 40px;
    height: 40px;
    background-color: #ecfdf5;
    color: #047857;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu-user{
	border: 1px solid #0000ff;
	padding: 7px;
	border-radius: 20px;
}

#menu-user div {
	padding: 7px;
	user-select: none;
	cursor: pointer;
}









@media(max-width:900px){

	.menu{
		display:none;
	}

	.hero h1{
		font-size:2.7rem;
	}

	.benefits{
		grid-template-columns:1fr;
	}

	footer{
		flex-direction:column;
	}
}




@media( max-width:590px ){

	#logo_corto {
		display: initial;
	}

	#logo_largo {
		display: none;
	}

	.cards {
		gap: 10px;
	}

	.acciones {
		flex-direction: column;
	}
	.vacante-header {
		flex-direction: column;
	}

	.cards{
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
		gap:30px;
	}

}