.hero {
	background: var(--indf-negro);
	color: var(--indf-crema);
	overflow: hidden;
	position: relative;
	padding: 48px 20px 30px;
}

.hero__inner {
	max-width: var(--ancho-contenido);
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4vw;
}

.hero__logo {
	flex: 0 1 460px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	z-index: 2;
	position: relative;
}

.hero__logo img {
	width: 100%;
	max-width: 420px;
}

.hero__tagline {
	font-family: var(--fuente-display);
	font-size: clamp(18px, 2.6vw, 26px);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0;
	max-width: 34ch;
}

.hero__tagline span {
	color: var(--indf-turquesa);
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.hero__character {
	flex: 0 0 auto;
	width: clamp(110px, 16vw, 220px);
	position: relative;
	align-self: flex-end;
}

.hero__character--trino {
	transform: rotate(-3deg);
}

.hero__character--nia {
	transform: rotate(2deg);
}

.hero__pose {
	display: none;
}

.hero__pose.is-active {
	display: block;
}

.hero__pose img {
	width: 100%;
	filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.35));
}

/* Micro-variación fija por pose: refuerza el aspecto de recorte de papel
   sin que "tiemble" en cada cambio (misma pose siempre = mismo desplazamiento). */
.hero__pose:nth-child(1) { transform: rotate(-1.5deg) translate(2px, -2px) scale(1); }
.hero__pose:nth-child(2) { transform: rotate(1deg) translate(-3px, 2px) scale(0.99); }
.hero__pose:nth-child(3) { transform: rotate(-0.5deg) translate(3px, 3px) scale(1.01); }
.hero__pose:nth-child(4) { transform: rotate(1.5deg) translate(-2px, -3px) scale(1); }
.hero__pose:nth-child(5) { transform: rotate(-1deg) translate(2px, 2px) scale(0.99); }
.hero__pose:nth-child(6) { transform: rotate(0.5deg) translate(-3px, -2px) scale(1.01); }

@media (max-width: 960px) {
	.hero__inner {
		gap: 3vw;
	}

	.hero__logo {
		flex-basis: 320px;
	}
}

@media (max-width: 680px) {
	.hero {
		padding: 32px 16px 24px;
	}

	.hero__inner {
		flex-wrap: wrap;
		align-items: center;
	}

	.hero__logo {
		order: -1;
		flex-basis: 100%;
	}

	.hero__logo img {
		max-width: 260px;
	}

	.hero__character {
		width: clamp(90px, 30vw, 150px);
	}
}