/* FONDO CON TRAMA SUAVE */
body {
	margin:0;
	background:#efefef;
	font-family: 'Inter', sans-serif;
}

.gx-intro {
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	animation: fadeIn 1s ease;
}

.gx-logo {
	width:280px;
	opacity:0;
	transform: translateY(20px);
	animation: logoIn 1s ease forwards;
}

.gx-title {
	margin-top:20px;
	font-size:28px;
	font-weight:600;
	letter-spacing:1px;
	color:#111;
	opacity:0;
	animation: fadeIn 1.5s ease forwards;
	animation-delay:0.5s;
}

.gx-sub {
	font-size:14px;
	color:#666;
	margin-top:5px;
	opacity:0;
	animation: fadeIn 2s ease forwards;
	animation-delay:0.8s;
}

@keyframes fadeIn {
	to { opacity:1; }
}

@keyframes logoIn {
	to {
		opacity:1;
		transform: translateY(0);
	}
}



/* CONTENEDOR CARDS */
.gx-cards {
	margin-top:40px;
	display:flex;
	gap:20px;
	flex-wrap:wrap;
	justify-content:center;
	opacity:0;
	animation: fadeIn 2s ease forwards;
	animation-delay:1s;
}

/* CARD */
.gx-card {
	width:200px;
	padding:20px;
	border:1px solid #e5e5e5;
	border-radius:10px;
	text-align:center;
	background:#fff;
	cursor:pointer;
	transition: all 0.2s ease;
}

.gx-card:hover {
	transform: translateY(-6px);
	box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

/* ICONO */
.gx-icon {
	font-size:28px;
	margin-bottom:10px;
}

/* TITULO CARD */
.gx-card-title {
	font-size:15px;
	font-weight:600;
	color:#111;
}

/* COLORES POR VERTICAL */
.salud { color:#16a34a; }
.estudios { color:#2563eb; }
.produccion { color:#ea580c; }





/* CONTENEDOR LÍNEAS */
.gx-lines {
	margin-top:50px;
	display:flex;
	align-items:center;
	gap:30px;
	opacity:0;
	animation: fadeIn 2s ease forwards;
	animation-delay:1s;
}

/* LÍNEA */
.gx-line {
	width:60px;
	height:1px;
	background:#ddd;
}

/* ITEM */
.gx-item {
	font-size:14px;
	color:#444;
	letter-spacing:1px;
	position:relative;
	cursor:default;
	transition:all 0.2s ease;
}

/* HOVER SUTIL */
.gx-item:hover {
	color:#000;
	transform:translateY(-2px);
}

/* COLORES POR RUBRO */
.gx-item.salud:hover { color:#16a34a; }
.gx-item.estudios:hover { color:#2563eb; }
.gx-item.produccion:hover { color:#ea580c; }