/* =========================================================================
   Agonza Sports — Instalaciones + Colaboraciones
   Usa las variables :root de css-header.css.
   ========================================================================= */

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

/* ===== INTRO (compartida) ===== */
.ag-inst-intro, .ag-col-intro { padding: 64px 24px 24px; }
.ag-inst-intro__inner, .ag-col-intro__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ag-inst-intro__text, .ag-col-intro__text { font-size: 1.02rem; line-height: 1.7; color: rgba(8,40,31,.75); margin-top: 14px; }
.ag-inst-intro__text p, .ag-col-intro__text p { margin: 0 0 12px; }

/* =========================================================================
   INSTALACIONES — ESPACIOS (filas alternas imagen/texto)
   ========================================================================= */
.ag-inst-esp { padding: 40px 24px 72px; }
.ag-inst-esp__inner { max-width: var(--ag-maxw); margin: 0 auto; }
.ag-inst-esp__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.ag-inst-esp__text { font-size: 1rem; line-height: 1.6; color: rgba(8,40,31,.72); margin-top: 12px; }
.ag-inst-esp__list { display: flex; flex-direction: column; gap: 40px; }

.ag-inst-row {
	display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
}
.ag-inst-row--rev .ag-inst-row__media { order: 2; }
.ag-inst-row__media { border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ag-sand); }
.ag-inst-row__media[data-empty="1"] { background: linear-gradient(135deg, var(--ag-sand), var(--ag-lime)); }
.ag-inst-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ag-ease); }
.ag-inst-row:hover .ag-inst-row__media img { transform: scale(1.04); }
.ag-inst-row__title {
	font-family: var(--ag-font-head); font-weight: 700;
	font-size: 1.6rem; line-height: 1.1; margin: 0 0 12px; color: var(--ag-green-dark);
}
.ag-inst-row__desc { font-size: .95rem; line-height: 1.6; color: rgba(8,40,31,.72); margin: 0; }

/* INSTALACIONES — GALERÍA */
/* =========================================================================
   INSTALACIONES — NUESTRAS SEDES (tarjetas a cada página de sede)
   ========================================================================= */
.ag-inst-sedes { padding: 40px 24px 40px; }
.ag-inst-sedes__inner { max-width: var(--ag-maxw); margin: 0 auto; }
.ag-inst-sedes__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.ag-inst-sedes__text { font-size: 1rem; line-height: 1.6; color: rgba(8,40,31,.72); margin-top: 12px; }
.ag-inst-sedes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.ag-inst-sede {
	display: flex; flex-direction: column;
	background: #fff; border-radius: 20px; overflow: hidden;
	box-shadow: 0 10px 26px rgba(8,40,31,.06);
	color: inherit; text-decoration: none;
	transition: transform .25s var(--ag-ease), box-shadow .25s var(--ag-ease);
}
.ag-inst-sede, .ag-inst-sede * { text-decoration: none !important; }
.ag-inst-sede:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8,40,31,.12); }
.ag-inst-sede:focus-visible { outline: 2px solid var(--ag-green); outline-offset: 3px; }
.ag-inst-sede__media { display: block; aspect-ratio: 16 / 9; background: var(--ag-sand); overflow: hidden; }
.ag-inst-sede__media[data-empty="1"] { background: linear-gradient(135deg, var(--ag-sand), var(--ag-lime)); }
.ag-inst-sede__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ag-ease); }
.ag-inst-sede:hover .ag-inst-sede__media img { transform: scale(1.04); }
.ag-inst-sede__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 28px; flex: 1 1 auto; }
.ag-inst-sede__title { font-family: var(--ag-font-head); font-weight: 800; font-size: 1.7rem; line-height: 1.05; color: var(--ag-green-dark); }
.ag-inst-sede__desc { font-size: .95rem; line-height: 1.6; color: rgba(8,40,31,.72); }
.ag-inst-sede__more {
	display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px;
	font-weight: 600; font-size: .92rem; color: var(--ag-green);
}
.ag-inst-sede__arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--ag-green); color: #fff;
	transition: transform .25s var(--ag-ease), background .25s var(--ag-ease), color .25s var(--ag-ease);
}
.ag-inst-sede:hover .ag-inst-sede__arrow { transform: rotate(45deg); background: var(--ag-lime); color: var(--ag-green-dark); }

.ag-inst-galeria { padding: 24px 24px 80px; }
.ag-inst-galeria__inner { max-width: var(--ag-maxw); margin: 0 auto; }
.ag-inst-galeria__title { text-align: center; margin: 0 auto 36px; }
/* Con texto debajo, el título cede el margen al párrafo. */
.ag-inst-galeria__title:has(+ .ag-inst-galeria__text) { margin-bottom: 12px; }
.ag-inst-galeria__text { text-align: center; max-width: 620px; margin: 0 auto 36px; opacity: .85; }
.ag-inst-galeria__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ag-inst-galeria__item { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.ag-inst-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ag-ease); }
.ag-inst-galeria__item:hover img { transform: scale(1.05); }

/* =========================================================================
   COLABORACIONES — LOGOS
   ========================================================================= */
.ag-col-logos { padding: 40px 24px 72px; }
.ag-col-logos__inner { max-width: var(--ag-maxw); margin: 0 auto; }
.ag-col-logos__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.ag-col-logos__text { font-size: 1rem; line-height: 1.6; color: rgba(8,40,31,.72); margin-top: 12px; }
.ag-col-logos__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px;
}
.ag-col-logo {
	display: flex; align-items: center; justify-content: center;
	background: #fff; border-radius: 16px; padding: 28px 24px; min-height: 120px;
	box-shadow: 0 8px 22px rgba(8,40,31,.05);
	text-decoration: none; transition: transform .25s var(--ag-ease), box-shadow .25s var(--ag-ease);
}
a.ag-col-logo:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(8,40,31,.1); }
.ag-col-logo img { max-width: 100%; max-height: 64px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s var(--ag-ease), opacity .25s var(--ag-ease); }
.ag-col-logo:hover img { filter: grayscale(0); opacity: 1; }
.ag-col-logo__name { font-weight: 700; color: var(--ag-green-dark); text-align: center; }

/* COLABORACIONES — BLOQUE DESTACADO */
.ag-col-dest { padding: 24px 24px 80px; }
.ag-col-dest__inner {
	max-width: var(--ag-maxw); margin: 0 auto;
	background: var(--ag-green); border-radius: 24px; padding: 56px 48px;
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
}
.ag-col-dest__title {
	font-family: var(--ag-font-head); font-weight: 800;
	font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; color: #fff; margin: 0 0 16px;
}
.ag-col-dest__text { font-size: .98rem; line-height: 1.7; color: rgba(255,255,255,.9); margin-bottom: 24px; }
.ag-col-dest__text p { margin: 0 0 12px; }
.ag-col-dest__media { border-radius: 18px; overflow: hidden; }
.ag-col-dest__media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 240px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 880px) {
	.ag-inst-row, .ag-inst-row--rev { grid-template-columns: 1fr; gap: 20px; }
	.ag-inst-row--rev .ag-inst-row__media { order: 0; }
	.ag-col-dest__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; }
}
@media (max-width: 600px) {
	.ag-inst-intro, .ag-col-intro { padding: 44px 24px 16px; }
	.ag-inst-galeria__grid { grid-template-columns: 1fr 1fr; }
	.ag-col-logos__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}