/**
 * modelo-gestion.css — Sección "Modelo de Gestión" (cards de actores)
 * RC-23 | Figma nodeId 121:750 (ThreeRsSection)
 *
 * Specs (canvas 1600px):
 *  - Section: bg #FFFFFF, pt 128px, px 229.5px → max-width ~1140px
 *  - Título: Inter ExtraBold 60px, #448A2B, lh 60px, tracking -1.2363px
 *  - Subtítulo: Roboto Light 20px, #004E5A, lh 30px, tracking -0.1504px
 *  - Cards: 352×264px, gap 32px, fila 1: 3 cards / fila 2: 2 cards centradas
 *  - Avatar: 96×96px, bg rgba(68,138,43,0.10), círculo completo
 *  - Iniciales: Inter ExtraBold 36px, #448A2B
 *  - H3: Inter Bold 24px, #004E5A, lh 32px, tracking 0.0703px
 *  - Descripción: Roboto Light 16px, #004E5A, lh 24px, tracking -0.1504px
 */

/* ══════════════════════════════════════════════
   SECCIÓN
══════════════════════════════════════════════ */

.modelo-gestion {
	width: 100%;
	background-color: #FFFFFF;
	padding-block-start: 128px;
	padding-block-end: 80px;
	padding-inline: 80px;
}

.modelo-gestion__inner {
	max-width: 1140px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Encabezado ── */
.modelo-gestion__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	width: 100%;
	margin-block-end: 82px; /* 58px padding interior Figma + 24px gap a las cards */
}

/* H2 — Inter ExtraBold 60px, #448A2B */
.modelo-gestion__title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 60px;
	color: #448A2B;
	text-align: center;
	line-height: 60px;
	letter-spacing: -1.2363px;
	margin: 0;
}

/* Subtítulo — Roboto Light 20px, #004E5A */
.modelo-gestion__subtitle {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #004E5A;
	text-align: center;
	line-height: 30px;
	letter-spacing: -0.1504px;
	margin: 0;
}

/* ── Grid de actores — flex-wrap centrado ──
   Con 5 cards de 352px + gap 32px: la primera fila cabe 3 (1120px ≤ 1140px max-width)
   y las 2 restantes se centran solas en la segunda fila. */
.modelo-gestion__actors {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	width: 100%;
}

/* ══════════════════════════════════════════════
   ACTOR CARD
══════════════════════════════════════════════ */

.actor-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 352px;
	flex-shrink: 0;
	min-height: 264px;
}

/* Círculo avatar */
.actor-card__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background-color: rgba(68, 138, 43, 0.10);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-block-end: 24px;
}

/* Iniciales — Inter ExtraBold 36px, #448A2B */
.actor-card__initials {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 36px;
	color: #448A2B;
	line-height: 40px;
	letter-spacing: 0.3691px;
	text-align: center;
}

/* Cuerpo de la card */
.actor-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

/* H3 — Inter Bold 24px, #004E5A */
.actor-card__title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #004E5A;
	text-align: center;
	line-height: 32px;
	letter-spacing: 0.0703px;
	margin: 0;
}

/* Descripción — Roboto Light 16px, #004E5A */
.actor-card__desc {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: #004E5A;
	text-align: center;
	line-height: 24px;
	letter-spacing: -0.1504px;
	max-width: 302px;
	margin: 0;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── Laptop ≤ 1300px: cards ligeramente más pequeñas ── */
@media (max-width: 1300px) {
	.modelo-gestion {
		padding-inline: 48px;
	}

	.actor-card {
		width: 300px;
	}
}

/* ── Tablet ≤ 1000px: 2 columnas en fila top, 1 en bottom ── */
@media (max-width: 1000px) {
	.modelo-gestion {
		padding-inline: 40px;
	}

	.modelo-gestion__row {
		flex-wrap: wrap;
		justify-content: center;
	}

	.actor-card {
		width: 280px;
	}

	.modelo-gestion__title {
		font-size: 48px;
		line-height: 52px;
	}
}

/* ── Mobile ≤ 700px: 2 columnas ── */
@media (max-width: 700px) {
	.modelo-gestion {
		padding-block-start: 80px;
		padding-block-end: 60px;
		padding-inline: 24px;
	}

	.modelo-gestion__header {
		margin-block-end: 48px;
	}

	.modelo-gestion__title {
		font-size: 36px;
		line-height: 40px;
	}

	.modelo-gestion__subtitle {
		font-size: 16px;
	}

	.modelo-gestion__row {
		gap: 24px;
	}

	.actor-card {
		width: calc(50% - 12px);
		min-width: 140px;
	}

	.actor-card__desc {
		max-width: 100%;
		font-size: 14px;
	}
}

/* ── Móvil pequeño ≤ 480px: 1 columna ── */
@media (max-width: 480px) {
	.actor-card {
		width: 100%;
		max-width: 320px;
	}
}