/* ==========================================================================
   Página Misiones (06_MISIONES_ESP del Figma "MiriadLanding")
   Lienzo original: 1512 px. Rejilla de 5 columnas de 270 px con 18 px de calle.
   Se carga solo en esta plantilla; depende de las variables de main.css.
   ========================================================================== */

.misiones-intro {
	padding-top: clamp(150px, 12.4vw, 188px);
	padding-bottom: clamp(2rem, 3.5vw, 3.3rem);
	background: var(--c-tinta);
}

.misiones-intro__texto {
	max-width: 1416px;
	font-size: var(--fs-intro);
	line-height: 1.33;
}
.misiones-intro__texto strong { font-weight: 700; }
.misiones-intro__texto > p + p { margin-top: 1em; }

/* --- Bloque destacado: foto a la izquierda, texto a la derecha ------------- */

.destacado {
	display: grid;
	grid-template-columns: minmax(0, 44%) minmax(0, 56%);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	background: var(--c-negro);
}

.destacado__figura { margin: 0; }

.destacado__figura img {
	width: 100%;
	aspect-ratio: 792 / 699;
	object-fit: cover;
}

.destacado__texto {
	padding: clamp(2rem, 4vw, 3.75rem) var(--margen) clamp(2rem, 4vw, 3.75rem) 0;
	max-width: 720px;
}

.destacado__pregunta {
	margin-bottom: 0.8em;
	font-size: clamp(1.25rem, 2.58vw, 2.44rem);   /* 39 px */
	font-weight: 500;
	line-height: 1.28;
}

.destacado__texto p {
	font-size: clamp(0.9rem, 1.59vw, 1.5rem);   /* 24 px */
	font-weight: 400;
	line-height: 1.4;
	color: var(--c-arena);
}
.destacado__texto > p + p { margin-top: 1em; }

/* --- Rejilla de misiones -------------------------------------------------- */

.misiones {
	padding-block: clamp(2.5rem, 4.7vw, 4.4rem);
	background: var(--c-tinta);
}

.rejilla-misiones {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1rem, 1.2vw, 18px);
}

.mision {
	display: flex;
	flex-direction: column;
	background: var(--c-marron);
	border-radius: var(--radio);
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
.mision:hover,
.mision:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 18px 38px rgb(0 0 0 / 0.45);
}

.mision__figura { margin: 0; overflow: hidden; }

.mision__img {
	width: 100%;
	aspect-ratio: 270 / 250;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mision:hover .mision__img { transform: scale(1.07); }

.mision__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(0.9rem, 1.2vw, 1.125rem);
}

.mision__titulo {
	font-size: clamp(0.95rem, 1.39vw, 1.31rem);   /* 21 px */
	font-weight: 700;
	line-height: 1.2;
}

.mision__texto {
	margin-top: 0.7em;
	font-size: clamp(0.8rem, 0.88vw, 0.83rem);   /* 13.3 px */
	font-weight: 400;
	line-height: 1.45;
	color: var(--c-arena);
}

.mision__enlace {
	display: flex;
	margin-top: auto;
	padding-top: 1.2rem;
}

.mision__enlace a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: clamp(0.8rem, 0.7vw, 0.8rem);   /* 10.6 px */
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: color 0.2s ease;
}
.mision__enlace a:hover { color: var(--c-naranja); }
.mision__enlace img {
	width: 18px;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mision__enlace a:hover img { transform: translate(4px, 4px); }

/* --- Adaptación a pantallas menores --------------------------------------- */

@media (max-width: 1200px) {
	.rejilla-misiones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.destacado { grid-template-columns: 1fr; }
	.destacado__texto { padding: 0 var(--margen) clamp(2rem, 4vw, 3rem); max-width: none; }
	.rejilla-misiones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.rejilla-misiones { grid-template-columns: 1fr; }
}