/**
 * modelo-educativo.css — Sección "Modelo Educativo" (Ecoguardianes)
 * RC-24 | Figma nodos 226:101-226:104
 *
 * Specs medidos en canvas 1600px:
 *  - Sección: bg #FFFFFF, height ~790px
 *  - Columna izquierda: 56.25% (900px)
 *      · Strip (226:104): x=99, y=3884 → pt:77px, pl:11%(99px), 801×219px
 *      · Gap entre imágenes: 19px
 *      · Principal (226:103): x=0, y=4122 → 900×475px, full-width
 *  - Columna derecha: 43.75% (700px)
 *      · pt:147px (título y=3954 − sección y=3807)
 *      · pl:41px  (texto x=941 − columna x=900)
 *      · pr:180px (1600 − 1420 donde termina el texto)
 *      · pb:90px  (sección y=4597 − texto y+h=4507)
 *  - Título (226:102): Roboto ExtraBold 48px, #004E5A, lh:64px, ls:1px
 *  - Texto (226:101):  Roboto Regular 16px, #4E4F4F, lh:24px
 */

/* ══════════════════════════════════════════════
   SECCIÓN (flex a dos columnas)
══════════════════════════════════════════════ */

.modelo-educativo {
	display: flex;
	align-items: stretch;
	width: 100%;
	background-color: #FAFAFA;
}

/* ══════════════════════════════════════════════
   COLUMNA IZQUIERDA — imágenes
══════════════════════════════════════════════ */

.modelo-educativo__images {
	flex: 0 0 58.25%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ── Strip superior (Ecoguardianes 2) ── */
.modelo-educativo__strip-wrapper {
	padding-top: 77px;   /* espacio sobre el strip hasta el inicio de la sección */
	padding-left: 11%;   /* 99px / 900px ≈ 11% — offset horizontal del strip */
}

.modelo-educativo__strip-img {
	display: block;
	width: 100%;    /* ocupa el 89% restante de la columna (900 − 99 = 801px) */
	height: auto;
	aspect-ratio: 801 / 219;
	object-fit: cover;
}

/* ── Imagen principal (Ecoguardianes 1) ── */
.modelo-educativo__main-wrapper {
	margin-top: 19px; /* gap entre strip y la imagen principal */
}

.modelo-educativo__main-img {
	display: block;
	width: 100%;
	height: auto;     /* proporción natural — sin recorte inferior */
}

/* ══════════════════════════════════════════════
   COLUMNA DERECHA — contenido
══════════════════════════════════════════════ */

.modelo-educativo__content {
	flex: 1;
	padding-top: 147px;  /* alinea el título con y=3954 del canvas Figma */
	padding-left: 41px;  /* alinea el texto con x=941 del canvas Figma */
	padding-right: 40px; /* margen derecho mínimo — max-width del texto controla el ancho */
	padding-bottom: 90px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ── Título H2 — Roboto ExtraBold 48px, #004E5A ── */
.modelo-educativo__title {
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 48px;
	color: #004E5A;
	line-height: 64px;
	letter-spacing: 1px;
	margin: 0 0 33px 0; /* gap al texto: y=4051 − (3954+64) = 33px */
}

/* ── Texto — Roboto Regular 16px, #4E4F4F ── */
.modelo-educativo__text {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #4E4F4F;
	line-height: 24.19px; /* 1.512 × 16px (Figma) */
	max-width: 479px;     /* ancho exacto del nodo texto en Figma */
}

/* Reset de márgenes internos del texto rico */
.modelo-educativo__text p {
	margin: 0 0 1em !important;
}

.modelo-educativo__text ul {
	margin: 0 0 16px !important;
	padding-left: 24px !important;
	list-style: disc !important;
}

.modelo-educativo__text li {
	margin-bottom: 4px;
	list-style: disc !important;
}

.modelo-educativo__text p:last-child,
.modelo-educativo__text ul:last-child {
	margin-bottom: 0;
}

.modelo-educativo__text strong {
	font-weight: 700;
	color: inherit;
}

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

/* ── Laptop / pantalla media ≤ 1400px ── */
@media ( max-width: 1400px ) {
	.modelo-educativo__content {
		padding-right: 80px;
	}
}

/* ── Tablet amplio ≤ 1200px ── */
@media ( max-width: 1200px ) {
	.modelo-educativo__content {
		padding-top: 100px;
		padding-left: 32px;
		padding-right: 48px;
		padding-bottom: 60px;
	}

	.modelo-educativo__title {
		font-size: 40px;
		line-height: 52px;
		margin-bottom: 24px;
	}
}

/* ── Tablet ≤ 900px: apila columnas verticalmente ── */
@media ( max-width: 900px ) {
	.modelo-educativo {
		flex-direction: column;
	}

	.modelo-educativo__images {
		flex: none;
		width: 100%;
	}

	/* Quitar offsets de desktop al apilar */
	.modelo-educativo__strip-wrapper {
		padding-top: 0;
		padding-left: 0;
	}

	/* Proporciones naturales de imagen */
	.modelo-educativo__strip-img,
	.modelo-educativo__main-img {
		width: 100%;
		height: auto;
	}

	.modelo-educativo__main-wrapper {
		margin-top: 8px;
	}

	.modelo-educativo__content {
		padding: 48px 40px 64px;
		align-items: flex-start;
	}

	.modelo-educativo__text {
		max-width: 100%;
	}
}

/* ── Mobile ≤ 480px ── */
@media ( max-width: 480px ) {
	.modelo-educativo__content {
		padding: 40px 24px 48px;
	}

	.modelo-educativo__title {
		font-size: 32px;
		line-height: 42px;
	}

	.modelo-educativo__text {
		font-size: 15px;
		line-height: 22px;
	}
}