/* Página Nosotros — cabecera + composición editorial con Trino y Nía
   flanqueando el texto (reutiliza cutouts ya existentes del hero). */

.pagina-nosotros__cabecera {
	background: var(--indf-negro);
	color: var(--indf-crema);
	padding: 56px 0 44px;
}

.pagina-nosotros__titulo {
	font-family: var(--fuente-display);
	text-transform: uppercase;
	font-size: clamp(40px, 7vw, 72px);
	line-height: 0.95;
	margin: 0;
	transform: rotate(-1deg);
}

.pagina-nosotros__grid {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 200px);
	gap: 32px;
	align-items: start;
	padding: 48px 0 64px;
}

.pagina-nosotros__personaje {
	display: flex;
	justify-content: center;
}

/* Pila de poses: igual mecánica que el hero (una sola visible a la vez,
   corte seco vía JS), marcado y clases propios para no tocar hero.css. */
.pagina-nosotros__poses {
	position: relative;
	width: 100%;
	max-width: 220px;
}

.pagina-nosotros__pose {
	display: none;
}

.pagina-nosotros__pose.is-active {
	display: block;
}

.pagina-nosotros__pose img {
	width: 100%;
	filter: drop-shadow(4px 6px 0 rgba(28, 27, 25, 0.25));
}

.pagina-nosotros__personaje--trino .pagina-nosotros__pose {
	transform: rotate(-3deg);
}

.pagina-nosotros__personaje--nia .pagina-nosotros__pose {
	transform: rotate(3deg);
}

.pagina-nosotros__texto {
	font-size: 16px;
	line-height: 1.7;
	max-width: 62ch;
	margin: 0 auto;
}

.pagina-nosotros__texto p {
	margin: 0 0 1.2em;
}

.pagina-nosotros__texto h2 {
	/* Menú flotante / hotfix tipografía (tarea 5): mismo cambio y mismo
	   motivo que .pagina__contenido h2 en pagina.css -texto libre de
	   longitud impredecible, --fuente-titular en vez de la condensada. */
	font-family: var(--fuente-titular);
	text-transform: uppercase;
	font-size: 24px;
	margin: 1.4em 0 0.5em;
}

.pagina-nosotros__texto h2:first-of-type {
	margin-top: 1.8em;
}

/* Hotfix Theme 1.13.3 -causa real de que Trino y Nía desaparecieran en
   móvil/PWA (la PWA reutiliza este mismo CSS, nunca tiene hoja propia):
   esta media query los ocultaba del todo por completo (display: none).
   Ahora pasan a una sola columna -orden real del HTML, sin tocarlo:
   Trino -> contenido -> Nía- en vez de desaparecer. */
@media (max-width: 860px) {
	.pagina-nosotros__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.pagina-nosotros__personaje {
		display: flex;
	}

	.pagina-nosotros__poses {
		width: min(55vw, 230px);
		max-width: none;
		margin-inline: auto;
	}

	.pagina-nosotros__personaje--trino {
		margin-bottom: -10px;
	}

	.pagina-nosotros__personaje--nia {
		margin-top: 8px;
	}
}

@media (max-width: 640px) {
	.pagina-nosotros__cabecera {
		padding: 40px 0 32px;
	}

	.pagina-nosotros__titulo {
		transform: none;
	}
}

@media (max-width: 480px) {
	.pagina-nosotros__poses {
		width: min(62vw, 190px);
	}
}