/* =========================================================================
   Agonza Sports — Alumnos (hub de subpáginas)
   Usa las variables :root de header.css.
   ========================================================================= */

.ag-alumnos-page { font-family: var(--ag-font-body); color: var(--ag-green-dark); }

.ag-hub { padding: 72px 24px; }
.ag-hub__inner { max-width: var(--ag-maxw); margin: 0 auto; }
.ag-hub__head { max-width: 60ch; margin-bottom: 36px; }
.ag-hub__text { font-size: .98rem; line-height: 1.6; color: rgba(8,40,31,.72); margin: 12px 0 0; }

.ag-hub__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.ag-hub__card {
	display: flex; flex-direction: column;
	background: #fff;
	border-radius: 18px;
	padding: 30px 28px;
	text-decoration: none;
	color: var(--ag-green-dark);
	box-shadow: 0 10px 26px rgba(8,40,31,.06);
	position: relative;
	min-height: 210px;
	transition: transform .3s var(--ag-ease), box-shadow .3s var(--ag-ease);
}

/* Colores alternados + inclinación leve */
/* Colores muy alternados (claro/oscuro) + inclinación */
.ag-hub__card--1 { background: var(--ag-green);  transform: rotate(-1.5deg); }
.ag-hub__card--2 { background: var(--ag-lime);   transform: rotate(1.5deg); }
.ag-hub__card--3 { background: var(--ag-green-dark); transform: rotate(-1deg); }
.ag-hub__card--4 { background: var(--ag-sand);   transform: rotate(1deg); }

/* Texto claro en las tarjetas oscuras */
.ag-hub__card--1,
.ag-hub__card--3 { color: #fff; }
.ag-hub__card--1:hover,
.ag-hub__card--3:hover { color: #fff; }
.ag-hub__card--1 .ag-hub__card-text,
.ag-hub__card--3 .ag-hub__card-text { color: rgba(255,255,255,.85); }
.ag-hub__card--1 .ag-hub__card-icon,
.ag-hub__card--3 .ag-hub__card-icon { background: rgba(255,255,255,.16); color: #fff; }
.ag-hub__card--1 .ag-hub__card-arrow,
.ag-hub__card--3 .ag-hub__card-arrow { background: var(--ag-lime); color: var(--ag-green-dark); }

/* Al hover, se endereza y se eleva */
.ag-hub__card:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--ag-shadow); z-index: 2; }

.ag-hub__card-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 14px;
	background: rgba(8,40,31,.08); color: var(--ag-green);
	margin-bottom: 18px;
}
/* En las tarjetas de color, el recuadro del icono se ve mejor en blanco translúcido */
.ag-hub__card--2 .ag-hub__card-icon,
.ag-hub__card--3 .ag-hub__card-icon { background: rgba(255,255,255,.55); color: var(--ag-green-dark); }

.ag-hub__card-title {
	font-family: var(--ag-font-head); font-weight: 800;
	font-size: 1.7rem; line-height: 1.05; margin: 0 0 12px; max-width: 14ch;
}
.ag-hub__card-text { font-size: .9rem; line-height: 1.5; color: rgba(8,40,31,.72); margin: 0 0 auto; padding-right: 40px; }
.ag-hub__card-arrow {
	position: absolute; bottom: 28px; right: 28px;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--ag-green); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .3s var(--ag-ease), background .2s var(--ag-ease);
}
.ag-hub__card:hover .ag-hub__card-arrow { background: var(--ag-green-dark); color: #fff; transform: rotate(45deg); }

@media (max-width: 980px) {
	.ag-hub__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.ag-hub__grid { grid-template-columns: 1fr; }
}