/* =========================================================================
   Agonza Sports — Formación / Curso
   Usa las variables :root de header.css.
   ========================================================================= */

.ag-formacion-page { font-family: var(--ag-font-body); color: var(--ag-green-dark); }
.ag-form-hero { min-height: 480px; }

/* =========================================================================
   CÓMO FUNCIONA  (pasos en grid + 2 imágenes intercaladas)
   ========================================================================= */
.ag-cf { padding: 72px 24px; }
.ag-cf__inner { max-width: var(--ag-maxw); margin: 0 auto; }

.ag-cf__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* El head es la primera celda del grid (sin fondo) */
.ag-cf__head { display: flex; flex-direction: column; justify-content: center; padding: 4px; }
.ag-cf__badge {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	font-size: .82rem; font-weight: 600; color: var(--ag-green-dark);
	background: var(--ag-lime); padding: 8px 16px; border-radius: 999px;
	margin-bottom: 16px;
}
.ag-cf__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-green); }
.ag-cf__title {
	font-family: var(--ag-font-head); font-weight: 800;
	font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.02;
	margin: 0 0 14px; max-width: 12ch;
}
.ag-cf__text { font-size: .92rem; line-height: 1.55; color: rgba(8,40,31,.72); margin: 0; }

/* Celdas cuadradas con fondo blanco */
.ag-cf__step {
	background: #fff;
	border-radius: 18px;
	padding: 26px 24px;
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex; flex-direction: column; justify-content: flex-end;
	box-shadow: 0 10px 26px rgba(8,40,31,.06);
}
.ag-cf__step-num {
	position: absolute; top: 22px; right: 22px;
	width: auto; height: auto; border-radius: 100px;
	padding: 6px 10px;
	background: var(--ag-black); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .9rem;
}
.ag-cf__step-title {
	font-family: var(--ag-font-head); font-weight: 700;
	font-size: 1.2rem; margin: 0 0 10px; max-width: 100%;
}
.ag-cf__step-text { font-size: .85rem; line-height: 1.45; color: rgba(8,40,31,.72); margin: 0; }

/* Las imágenes ocupan una celda cuadrada igual que los pasos */
.ag-cf__img { border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1; }
.ag-cf__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================================
   INFORMACIÓN PRÁCTICA Y MATRÍCULA  (card-CTA + acordeón)
   ========================================================================= */
.ag-infop { padding: 0 24px 72px; }
.ag-infop__inner {
	max-width: var(--ag-maxw); margin: 0 auto;
	display: grid; grid-template-columns: 400px 1fr; gap: 28px; align-items: start;
}
.ag-infop__card {
	
	background-image: linear-gradient(rgba(8, 71, 52, .86), rgba(8, 40, 31, .62)), url("/wp-content/uploads/2026/06/women-s-soccer-2026-01-09-08-41-26-utc.jpg");
	background-size: cover; color: #fff;
	border-radius: 20px; padding: 40px;
	position: relative; overflow: hidden;
	min-height: 320px;
	display: flex; flex-direction: column;
}
.ag-infop__title { font-family: var(--ag-font-head); font-weight: 800; font-size: 1.9rem; line-height: 1.05; margin: 0 0 14px; }
.ag-infop__text { font-size: .95rem; line-height: 1.55; opacity: .9; margin: 0 0 auto; }
.ag-infop__card .ag-btn { margin-top: 24px; align-self: flex-start; }
.ag-infop__card .ag-btn--secondary .ag-btn__text { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }

.ag-infop__list { display: grid; gap: 12px; }
.ag-infop__item {
	background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: 0 8px 22px rgba(8,40,31,.05);
	transition: box-shadow .2s var(--ag-ease);
}
.ag-infop__item:hover,
.ag-infop__item.is-open { box-shadow: var(--ag-shadow); }

.ag-infop__q:hover{background:var(--ag-lime);color:var(--ag-green-dark);}
.ag-infop__q:focus{background:#fff;color:var(--ag-green-dark);}

.ag-infop__q {
	width: 100%; text-align: left;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: transparent; border: 0; cursor: pointer;
	padding: 20px 22px;
	font-family: var(--ag-font-body); font-weight: 600; font-size: 1rem;
	color: var(--ag-green-dark);
}
.ag-infop__q:focus-visible { outline: 2px solid var(--ag-green); outline-offset: -2px; border-radius: 14px; }
.ag-infop__icon {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
	background: var(--ag-green); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .3s var(--ag-ease);
}
.ag-infop__item.is-open .ag-infop__icon { transform: rotate(180deg); }
.ag-infop__a {
	max-height: 0; overflow: hidden;
	transition: max-height .35s var(--ag-ease);
}
.ag-infop__item.is-open .ag-infop__a { max-height: 480px; }
.ag-infop__a-inner { padding: 0 22px 22px; font-size: .92rem; line-height: 1.6; color: rgba(8,40,31,.78); }
.ag-infop__a-inner p { margin: 0 0 8px; }

/* =========================================================================
   EXPERIENCIAS REALES  (testimonios en carrusel)
   ========================================================================= */
.ag-exp { padding: 72px 24px; }
.ag-exp__inner {
	max-width: var(--ag-maxw); margin: 0 auto;
	display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: start;
}
.ag-exp__aside { position: relative; padding-top: 8px; }
.ag-exp__title { font-family: var(--ag-font-head); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.02; margin: 0 0 16px; max-width: 14ch; }
.ag-exp__text { font-size: .95rem; line-height: 1.55; color: rgba(8,40,31,.7); margin: 0 0 36px; max-width: 30ch; }
.ag-exp__quote {
	position: absolute; top: 30px; right: 0;
	font-family: var(--ag-font-head); font-weight: 800;
	font-size: 6rem; line-height: .6; color: rgba(8,40,31,.16);
	pointer-events: none;
}
.ag-exp__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: 16px;
}
.ag-exp__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-green); }
.ag-exp__nav { display: flex; gap: 12px; }

.ag-exp__nav button{padding:0;}
.ag-exp__arrow {
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid rgba(8,40,31,.2);
	background: #fff; color: var(--ag-green-dark);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s var(--ag-ease), color .2s var(--ag-ease), opacity .2s;
}
.ag-exp__arrow:hover { background: var(--ag-green); color: #fff; border-color: var(--ag-green); }
.ag-exp__arrow:focus { background: #fff; color: var(--ag-green-dark);}

.ag-exp__arrow svg{width:20px; height:auto;}


.ag-exp__track {
	display: flex; gap: 24px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ag-exp__track::-webkit-scrollbar { display: none; }

/* Flechas de experiencias siempre clicables, por encima del track */
.ag-exp__aside { position: relative; z-index: 2; }
.ag-exp__nav { position: relative; z-index: 3; }
.ag-exp__track { position: relative; z-index: 1; min-width: 0; }

.ag-exp__card {
	flex: 0 0 100%; scroll-snap-align: start;
	background: #fff; border-radius: 20px; padding: 48px;
	box-shadow: 0 14px 34px rgba(8,40,31,.08);
}
.ag-exp__card-title { font-family: var(--ag-font-head); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; margin: 0 0 16px; }
.ag-exp__card-text { font-size: .95rem; line-height: 1.6; color: rgba(8,40,31,.78); margin: 0 0 24px; }
.ag-exp__card-author { display: flex; flex-direction: column; gap: 2px; }
.ag-exp__card-name { font-weight: 700; color: var(--ag-green-dark); }
.ag-exp__card-role { font-size: .85rem; color: rgba(8,40,31,.72); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
	.ag-cf__grid { grid-template-columns: repeat(2, 1fr); }
	.ag-cf__head { aspect-ratio: auto; }
	.ag-infop__inner,
	.ag-exp__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
	.ag-cf__grid { grid-template-columns: 1fr; }
	.ag-cf__step, .ag-cf__img { aspect-ratio: auto; min-height: 200px; }
}

/* La sección de experiencias no debe tener transforms que descoloquen el clic */
.ag-exp,
.ag-exp__aside,
.ag-exp__nav,
.ag-exp__track { transform: none !important; }
.ag-exp [data-parallax] { transform: none !important; pointer-events: none; }
.ag-exp__nav { position: relative; z-index: 10; }
.ag-exp__arrow { position: relative; z-index: 10; pointer-events: auto; }
/* =========================================================================
   SEMANA TIPO
   Horario semanal y asignaturas por curso. La tabla tiene seis columnas, así
   que en pantallas estrechas se desplaza en horizontal con la columna de
   horas fijada, en vez de encogerse hasta ser ilegible.
   ========================================================================= */
/* Sin fondo propio: va justo debajo de «Así va a ser tu día a día» y los dos
   cuentan lo mismo, así que encadenan. Sin padding superior se evita el hueco
   de 144px que dejaban los 72px de cada uno. */
.ag-semana { padding: 0 24px 72px; }
.ag-semana__inner { max-width: var(--ag-maxw); margin: 0 auto; }

.ag-semana__head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.ag-semana__head .ag-badge { margin-left: auto; margin-right: auto; align-self: center; }
.ag-semana__text { font-size: 1rem; line-height: 1.6; color: rgba(8,40,31,.72); margin-top: 12px; }

.ag-semana__curso {
	background: #fff;
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 12px 30px rgba(8,40,31,.06);
}
.ag-semana__curso + .ag-semana__curso { margin-top: 24px; }

.ag-semana__curso-title {
	font-family: var(--ag-font-head);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--ag-green);
	margin: 0 0 20px;
}

.ag-semana__asig { margin-bottom: 26px; }
.ag-semana__asig-label {
	display: block;
	font-size: .78rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ag-green);
	margin-bottom: 10px;
}
.ag-semana__asig-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px;
	counter-reset: asignatura;
}
.ag-semana__asig-list li {
	counter-increment: asignatura;
	display: flex; align-items: flex-start; gap: 12px;
	padding: 13px 16px;
	background: var(--ag-cream);
	border-radius: 12px;
	font-size: .9rem; line-height: 1.45;
	color: var(--ag-green-dark);
}
/* Numeración 01, 02… igual que las secciones del hub de formación */
.ag-semana__asig-list li::before {
	content: counter(asignatura, decimal-leading-zero);
	flex: 0 0 auto;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--ag-lime); color: var(--ag-green-dark);
	font-size: .72rem; font-weight: 700; letter-spacing: .02em;
	display: inline-flex; align-items: center; justify-content: center;
}

/* ----- Tabla del horario ----- */
.ag-semana__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.ag-semana__scroll:focus-visible { outline: 2px solid var(--ag-green); outline-offset: 2px; }

.ag-semana__tabla {
	width: 100%; min-width: 680px;
	border-collapse: collapse;
	font-size: .86rem;
}
.ag-semana__tabla th,
.ag-semana__tabla td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid rgba(8,40,31,.08);
}
.ag-semana__tabla thead th {
	background: var(--ag-green);
	color: #fff;
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .04em;
	white-space: nowrap;
	position: sticky; top: 0;
}
.ag-semana__tabla tbody th {
	font-weight: 600;
	color: var(--ag-green-dark);
	white-space: nowrap;
	background: var(--ag-cream);
	position: sticky; left: 0; z-index: 1;
}
/* La esquina: al desplazar en horizontal, la cabecera de la columna de horas
   tiene que quedarse igual que las horas de debajo. */
.ag-semana__tabla thead th:first-child {
	position: sticky; left: 0; z-index: 3;
}
.ag-semana__tabla thead th { z-index: 2; }
.ag-semana__tabla tbody tr:nth-child(even) td { background: rgba(237,234,191,.25); }
.ag-semana__tabla td { color: rgba(8,40,31,.8); }

/* Franja igual en los cinco días: el recreo */
.ag-semana__fila--comun td {
	text-align: center;
	font-weight: 600;
	color: var(--ag-green);
	background: var(--ag-sand) !important;
}
.ag-semana__vacio { color: rgba(8,40,31,.25); }

@media (max-width: 900px) {
	.ag-semana__fila--comun td:last-child { text-align: left; }
	.ag-semana { padding: 56px 24px; }
	.ag-semana__curso { padding: 24px 20px; }
}
@media (max-width: 600px) {
	.ag-semana__curso-title { font-size: 1.35rem; }
	.ag-semana__tabla { font-size: .8rem; }
	.ag-semana__tabla th, .ag-semana__tabla td { padding: 8px 10px; }
}

/* =========================================================================
   RITMO VERTICAL DE LA PÁGINA DE CURSO
   Cuando dos secciones seguidas llevan 72px arriba y 72px abajo, el hueco
   entre ellas es de 144px: el doble que en el resto de la página, que se
   mueve entre 40px y 88px. Se anula el de la segunda y queda uno solo.
   Los selectores son pares concretos que solo se dan en esta plantilla, para
   no tocar el ritmo de la home ni del resto de páginas.
   ========================================================================= */
.ag-infop + .ag-acceso,
.ag-acceso + .ag-cf,
.ag-exp + .ag-faq { padding-top: 0; }