/*
 # ########*###########################
 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;
}

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

.jf {
	text-align: justify;
}

#wait {
	position: fixed;
	width: 100vw;
	height: 100vh;
	border: 0px solid red;
	background: rgba(255,255,255,0.6);
	z-index: 2;
	display: none;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 80px;
    height: 80px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #fa7d00;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 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:#f5823e;
}

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








/* HERO */
.hero{
	height:80vh;
	background:
	linear-gradient(rgba(255,255,255,.6),
					rgba(255,255,255,.6)),
					url('../img/wallpaper.jpg');

					background-size:cover;
					background-position:center;

					display:flex;
					align-items:center;
					padding:0 10%;
}

.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:#f5823e;
	color:#fff;
}

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









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

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

.cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,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:#f5823e;
	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,#ef7d63,#f6a14d);
	color:#fff;
}

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

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

.cta a{
	text-decoration:none;
	background:#fff;
	color:#f5823e;
	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 #aa5500;
	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;
	}

}