/**
 * reduce-reusa.css — Sección "Reduce, Reusa, Recicla"
 * RC-22 | Figma nodeIds 120:195 (card), 120:196 (heading), 120:197 (párrafo)
 *
 * Specs (canvas 1600px):
 *  - Card: #DAF3F0, 56.25% ancho (900/1600), min-height 410px
 *    border-radius: 0 204px 0 0 (solo esquina top-right)
 *    padding: 103px 80px 99px 104px
 *  - Heading: Roboto 900 96px, 3 colores: #5F9FCB / #004E5A / #448A2B
 *  - Párrafo: Roboto Light 20px, #4E4F4F, lh 30px, max-width 479px
 */

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

.reduce-reusa {
	width: 100%;
	display: flex;
	align-items: stretch;
	min-height: 410px;
	background-color: #FAFAFA;
}

/* ── Card izquierda: rectángulo mint ── */
.reduce-reusa__card {
	flex: 0 0 56.25%;
	background-color: #DAF3F0;
	border-radius: 0 204px 0 0;
	padding: 103px 80px 99px 104px;
	display: flex;
	align-items: center;
	margin-top: -65px;
	z-index: 9;
}

/* ── Heading display ── */
/* Figma: Roboto ExtraBold ≈ weight 900 (Roboto no tiene 800 como estático) */
.reduce-reusa__heading {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 96px;
	line-height: 1.1;
	margin: 0;
	word-break: break-word;
}

/* Colores exactos del Figma */
.reduce-reusa__word--blue  { color: #5F9FCB; } /* "Reduce, "  */
.reduce-reusa__word--teal  { color: #004E5A; } /* "Reusa"      */
.reduce-reusa__word--green { color: #448A2B; } /* "Recicla."   */

/* ── Columna derecha: párrafo ── */
.reduce-reusa__content {
	flex: 1;
	display: flex;
	align-items: center;
	padding-inline-start: 57px;  /* gap entre card y párrafo = 957-900 en Figma */
	padding-inline-end: 80px;
}

.reduce-reusa__text {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #4E4F4F;
	line-height: 30px;
	letter-spacing: -0.1504px;
	max-width: 479px;
	margin: 0;
}

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

/* ── Laptop ≤ 1400px ── */
@media (max-width: 1400px) {
	.reduce-reusa__heading {
		font-size: 80px;
	}

	.reduce-reusa__card {
		padding: 80px 60px 80px 80px;
		border-radius: 0 160px 0 0;
	}
}

/* ── Tablet ≤ 1100px ── */
@media (max-width: 1100px) {
	.reduce-reusa__heading {
		font-size: 64px;
	}

	.reduce-reusa__card {
		padding: 60px 48px 60px 56px;
		border-radius: 0 120px 0 0;
	}

	.reduce-reusa__content {
		padding-inline-start: 40px;
		padding-inline-end: 40px;
	}
}

/* ── Mobile ≤ 900px: stack vertical ── */
@media (max-width: 900px) {
	.reduce-reusa {
		flex-direction: column;
	}

	.reduce-reusa__card {
		flex: none;
		width: 100%;
		border-radius: 0 80px 0 0;
		padding: 60px 24px 60px 24px;
		justify-content: center;
	}

	.reduce-reusa__heading {
		font-size: 56px;
		text-align: center;
	}

	.reduce-reusa__content {
		padding: 40px 24px;
		justify-content: center;
	}

	.reduce-reusa__text {
		max-width: 100%;
		text-align: center;
	}
}

/* ── Móvil pequeño ≤ 480px ── */
@media (max-width: 480px) {
	.reduce-reusa__heading {
		font-size: 42px;
	}

	.reduce-reusa__card {
		border-radius: 0 60px 0 0;
		padding-block: 48px;
	}
}