/* =========================================================================
   Agonza Sports — Nosotros
   Usa las variables :root de header.css.
   ========================================================================= */

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

/* =========================================================================
   ORIGEN
   ========================================================================= */
.ag-origen { padding: 72px 24px; }
.ag-origen__inner {
	max-width: var(--ag-maxw); margin: 0 auto;
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start;
}
.ag-origen__text { font-size: .95rem; line-height: 1.7; color: rgba(8,40,31,.78); }
.ag-origen__text p { margin: 0 0 14px; }
.ag-origen__text strong { color: var(--ag-green-dark); font-weight: 700; }
.ag-origen__media { border-radius: 18px; overflow: hidden; }
.ag-origen__media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }

/* =========================================================================
   TRAYECTORIA (timeline horizontal)
   ========================================================================= */
.ag-tray { padding: 24px 24px 72px; }
.ag-tray__inner { max-width: var(--ag-maxw); margin: 0 auto; }
.ag-tray__head { margin-bottom: 40px; }
.ag-tray__badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .82rem; font-weight: 600; color: var(--ag-green-dark);
	background: var(--ag-lime); padding: 8px 16px; border-radius: 999px;
	margin-bottom: 14px;
}
.ag-tray__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-green); }
.ag-tray__text { font-size: .98rem; color: rgba(8,40,31,.7); margin: 10px 0 0; }

.ag-tray__line {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 28px;
	position: relative;
	padding-top: 34px;
	overflow-x: auto;
	scrollbar-width: none;
}
.ag-tray__line::-webkit-scrollbar { display: none; }
/* Línea horizontal fina, alineada al centro de los puntos */
.ag-tray__line::before {
	content: ""; position: absolute; top: 11px; left: 9px; right: 9px;
	height: 2px; background: rgba(8,40,31,.12);
}
.ag-tray__item { position: relative; min-width: 150px; }
/* Punto: círculo hueco grande sobre la línea, halo del color del fondo */
.ag-tray__dot {
	position: absolute; top: -30px; left: 2px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--ag-lime);
	border: 3px solid var(--base-2);
	box-shadow: 0 0 0 1px var(--ag-lime);
}
.ag-tray__year {
	display: block; font-family: var(--ag-font-head); font-weight: 800;
	font-size: 1.7rem; line-height: 1; color: var(--ag-green-dark); margin-bottom: 8px;
}
.ag-tray__item-title { font-weight: 700; font-size: 1rem; line-height: 1.15; margin: 0 0 10px; color: var(--ag-green-dark); }
.ag-tray__item-text { font-size: .82rem; line-height: 1.5; color: rgba(8,40,31,.65); margin: 0; }

/* =========================================================================
   MÉTODO (3 pilares)
   ========================================================================= */
.ag-metodo { padding: 72px 24px; }
.ag-metodo__inner { max-width: var(--ag-maxw); margin: 0 auto; }
.ag-metodo__title { text-align: center; margin: 0 auto 40px; max-width: none; }
.ag-metodo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ag-metodo__card {
	background: #fff; border-radius: 18px; padding: 34px 30px;
	box-shadow: 0 10px 26px rgba(8,40,31,.06);
	position: relative; min-height: 230px;
}
.ag-metodo__card--featured { background: var(--ag-lime); box-shadow: none; }
.ag-metodo__icon {
	position: absolute; top: 30px; right: 30px;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--ag-black); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
}
.ag-metodo__card-title {
	font-family: var(--ag-font-head); font-weight: 700;
	font-size: 1.4rem; margin: 56px 0 12px; max-width: 18ch;
}
.ag-metodo__card-text { font-size: .9rem; line-height: 1.55; color: rgba(8,40,31,.72); margin: 0; }
.ag-metodo__card--featured .ag-metodo__card-text { color: rgba(8,40,31,.8); }

/* =========================================================================
   PROFESORADO (aside + carrusel con foto)
   ========================================================================= */
.ag-prof { padding: 72px 24px; }
.ag-prof__inner {
	max-width: var(--ag-maxw); margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.ag-prof__badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .82rem; font-weight: 600; color: var(--ag-green-dark);
	background: var(--ag-lime); padding: 8px 16px; border-radius: 999px;
	margin-bottom: 14px;
}
.ag-prof__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-green); }
.ag-prof__title { font-family: var(--ag-font-head); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; margin: 0 0 14px; max-width: 16ch; }
.ag-prof__text { font-size: .95rem; line-height: 1.6; color: rgba(8,40,31,.72); margin: 0 0 28px; }
.ag-prof__card-info {
	background: #fff; border-radius: 18px; padding: 28px;
	box-shadow: 0 12px 30px rgba(8,40,31,.07);
}
.ag-prof__card-info-title { font-family: var(--ag-font-head); font-weight: 700; font-size: 1.3rem; margin: 0 0 10px; }
.ag-prof__card-info-text { font-size: .88rem; line-height: 1.55; color: rgba(8,40,31,.72); margin: 0; }

.ag-prof__track {
	display: flex; gap: 20px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ag-prof__track::-webkit-scrollbar { display: none; }
.ag-prof__slide {
	flex: 0 0 100%; scroll-snap-align: start;
	position: relative; border-radius: 20px; overflow: hidden;
	min-height: 380px;
	background: var(--ag-green-dark);
	background-image: var(--ag-prof-img); background-size: cover; background-position: center;
	display: flex; align-items: flex-end;
	text-decoration: none; color: #fff;
}
.ag-prof__slide:hover { text-decoration: none; }
a.ag-prof__slide,
a.ag-prof__slide:hover,
a.ag-prof__slide * { text-decoration: none !important; }
.ag-prof__name, .ag-prof__role { text-decoration: none; }
.ag-prof__slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,40,31,.85) 0%, rgba(8,40,31,.1) 55%); }
.ag-prof__slide-body { position: relative; z-index: 2; padding: 28px; color: #fff; }
.ag-prof__name { display: block; font-family: var(--ag-font-head); font-weight: 700; font-size: 1.3rem; }
.ag-prof__role { display: block; font-size: .88rem; opacity: .85; }
.ag-prof__slide-arrow {
	position: absolute; bottom: 24px; right: 24px; z-index: 2;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--ag-green); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
}
.ag-prof__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 10px; }
.ag-prof__nav button{padding:0;}
.ag-prof__counter { font-size: .85rem; color: rgba(8,40,31,.72); }
.ag-prof__arrows { display: flex; gap: 12px; }
.ag-prof__arrow {
	width: 44px; height: 44px; border-radius: 50%;
	background: #fff; border: 1px solid rgba(8,40,31,.15); color: var(--ag-green-dark);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .2s var(--ag-ease), color .2s var(--ag-ease);
}
.ag-prof__arrow svg{width:20px!important; height:auto;}
.ag-prof__arrow:hover { background: var(--ag-green); color: #fff; border-color: var(--ag-green); }

/* =========================================================================
   GALERÍA
   ========================================================================= */
.ag-galeria { padding: 0 24px 80px; }
.ag-galeria__inner { max-width: var(--ag-maxw); margin: 0 auto; }
.ag-galeria__head { text-align: center; max-width: 50ch; margin: 0 auto 36px; }
.ag-galeria__text { font-size: .98rem; line-height: 1.6; color: rgba(8,40,31,.72); margin: 12px 0 0; }
.ag-galeria__carousel { position: relative; }
.ag-galeria__track {
	display: flex; gap: 16px;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none; scrollbar-width: none;
	padding-bottom: 4px;
}
.ag-galeria__track::-webkit-scrollbar { display: none; }
.ag-galeria__item {
	flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start;
	border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3;
}
.ag-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ag-ease); }
.ag-galeria__item:hover img { transform: scale(1.05); }
.ag-galeria__nav { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.ag-galeria__arrow {
	width: 44px; height: 44px; border-radius: 50%; padding: 0;
	background: #fff; border: 1px solid rgba(8,40,31,.2); color: var(--ag-green-dark);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .2s var(--ag-ease), color .2s var(--ag-ease);
}
.ag-galeria__arrow svg { width: 20px !important; height: auto; display: block; }
.ag-galeria__arrow svg path { stroke: currentColor; stroke-width: 2; }
.ag-galeria__arrow:hover { background: var(--ag-green); border-color: var(--ag-green); color: #fff; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
	.ag-origen__inner,
	.ag-prof__inner { grid-template-columns: 1fr; gap: 28px; }
	.ag-galeria__item { flex-basis: calc((100% - 16px) / 2); }
}
/* El método es una rejilla, no un flex: el flex-basis de antes no hacía nada
   y en móvil seguían tres columnas de palabra por línea. */
@media (max-width: 760px) {
	.ag-metodo__grid { grid-template-columns: 1fr; }
	.ag-metodo__card { min-height: 0; }
	.ag-metodo__card-title { margin-top: 0; padding-right: 60px; }
}
@media (max-width: 600px) {
	.ag-galeria__item { flex-basis: 100%; }
}
/* Trayectoria en móvil: vertical. En horizontal solo cabían dos hitos y el
   resto quedaba escondido tras un desplazamiento sin barra ni pista. */
@media (max-width: 700px) {
	.ag-tray__line {
		grid-auto-flow: row; grid-auto-columns: auto;
		overflow: visible; padding: 0 0 0 34px; gap: 28px;
	}
	.ag-tray__line::before { top: 10px; bottom: 10px; left: 8px; right: auto; width: 2px; height: auto; }
	.ag-tray__item { min-width: 0; }
	.ag-tray__dot { top: 4px; left: -34px; }
}