.treedimensional-des {
	--treedimensional-des-hero-space: clamp(26px, 2vw, 34px);
	--treedimensional-des-media-size: clamp(300px, 26vw, 400px);
	--treedimensional-des-right-size: clamp(420px, 33vw, 540px);
	position: relative;
	background-color: var(--color-blanco-hueso);
	color: var(--color-azul-verde-oscuro);
}

.treedimensional-des--spacious {
	--treedimensional-des-hero-space: clamp(52px, 5vw, 76px);
}

.treedimensional-des__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
	align-items: center;
	gap: clamp(16px, 2vw, 30px);
	width: min(calc(100% - 48px), 1320px);
	margin: 0 auto;
	padding: var(--treedimensional-des-hero-space) 0;
}

.treedimensional-des__visual {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
}

.treedimensional-des__libro {
	display: block;
	width: clamp(300px, 27vw, 400px);
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.treedimensional-des__mensaje {
	justify-self: center;
	min-width: 0;
}

.treedimensional-des__mensaje-texto {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	flex-direction: column;
	min-width: 0;
	text-align: center;
}

.treedimensional-des__imagen-lateral {
	--treedimensional-des-imagen-x: 0px;
	display: block;
	width: min(100%, 420px);
	max-width: 100%;
	height: auto;
	object-fit: contain;
	align-self: end;
	justify-self: start;
	margin-bottom: calc(var(--treedimensional-des-hero-space) * -1);
	transform: translateX(var(--treedimensional-des-imagen-x));
}

/* Animación de entrada exclusiva del hero. */
.treedimensional-des__hero { opacity: 0; }

.treedimensional-des__visual {
	opacity: 0;
	transform: translateX(-18px) scale(.98);
}

.treedimensional-des__mensaje-texto {
	opacity: 0;
	transform: translateY(-16px);
}

.treedimensional-des__imagen-lateral {
	opacity: 0;
	transform: translateX(calc(var(--treedimensional-des-imagen-x) + 18px)) scale(.98);
}

.treedimensional-des__hero.is-hero-ready {
	opacity: 1;
	transition: opacity 400ms var(--hero-ease);
}

.treedimensional-des__hero.is-hero-ready .treedimensional-des__visual,
.treedimensional-des__hero.is-hero-ready .treedimensional-des__imagen-lateral {
	opacity: 1;
	transition: opacity var(--hero-dur) var(--hero-ease), transform var(--hero-dur) var(--hero-ease);
	transition-delay: 160ms;
}

.treedimensional-des__hero.is-hero-ready .treedimensional-des__visual {
	transform: none;
}

.treedimensional-des__hero.is-hero-ready .treedimensional-des__imagen-lateral {
	transform: translateX(var(--treedimensional-des-imagen-x));
}

.treedimensional-des__hero.is-hero-ready .treedimensional-des__mensaje-texto {
	opacity: 1;
	transform: none;
	transition: opacity var(--hero-dur) var(--hero-ease), transform var(--hero-dur) var(--hero-ease);
	transition-delay: 220ms;
}

.treedimensional-des__etiqueta {
	display: flex;
	align-items: center;
	align-self: center;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 clamp(34px, 3vw, 48px);
	color: var(--color-blanco);
	font-family: var(--wp--preset--font-family--elza-text);
	font-weight: 800;
	line-height: .95;
}

.treedimensional-des__etiqueta > span {
	display: block;
	padding: 4px 9px 5px;
	border-radius: 8px;
	background: var(--color-rojo);
	font-size: clamp(21px, 1.55vw, 28px);
}

.treedimensional-des__titulo {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	font-family: 'Moranga', Georgia, serif;
	font-weight: 300;
	letter-spacing: -.025em;
	text-align: center;
}

.treedimensional-des__titulo-linea {
	display: block;
	font-size: clamp(27px, 1.95vw, 36px);
	line-height: 1.03;
	white-space: nowrap;
}

.treedimensional-des__titulo-linea strong { font-weight: 500; }

.treedimensional-des__titulo-investigacion {
	display: inline-block;
	padding: 1px 6px 3px;
	border-radius: 8px;
	background: var(--color-naranja);
	line-height: .9;
}

.treedimensional-des__titulo-desigualdades {
	display: block;
	margin-top: 2px;
	padding: 0 4px 4px;
	border-bottom: 6px solid var(--color-rojo);
	font-size: clamp(27px, 1.95vw, 36px);
	font-weight: 500;
	line-height: .95;
}

.treedimensional-des__descripcion {
	max-width: 510px;
	margin: clamp(24px, 2.5vw, 36px) 0 0;
	font: 400 var(--fs-400)/1.3 'Elza Text', sans-serif;
}

.treedimensional-des__mensaje-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-top: 20px;
	background: var(--color-azul-verde-oscuro);
	color: var(--color-blanco);
	font: 700 var(--fs-300)/1 'Elza Text', sans-serif;
	text-align: center;
	text-decoration: none;
}

.treedimensional-des__mensaje-boton:hover,
.treedimensional-des__mensaje-boton:focus-visible {
	color: var(--color-blanco);
}

.treedimensional-des__visual,
.treedimensional-des__imagen-lateral {
	align-self: center;
}

.treedimensional-des__visual { justify-self: end; }

.treedimensional-des__libro,
.treedimensional-des__imagen-lateral {
	width: min(100%, var(--treedimensional-des-media-size));
	height: var(--treedimensional-des-media-size);
	max-height: none;
	margin: 0;
	object-fit: contain;
}

.treedimensional-des__imagen-lateral {
	width: min(100%, var(--treedimensional-des-right-size));
	height: var(--treedimensional-des-right-size);
	max-width: 100%;
	overflow: hidden;
	justify-self: start;
}

@media (min-width: 1051px) {
	.treedimensional-des:not(.treedimensional-des--research) .treedimensional-des__imagen-lateral {
		width: min(100%, 420px);
		height: auto;
		max-height: none;
		align-self: end;
		margin-bottom: calc(var(--treedimensional-des-hero-space) * -1);
		overflow: visible;
		translate: none;
	}
}

.treedimensional-des--research .treedimensional-des__libro img,
.treedimensional-des--research .treedimensional-des__imagen-lateral img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.treedimensional-des--research .treedimensional-des__imagen-lateral img {
	transform: scale(1.12);
	transform-origin: center;
}

@media (min-width: 781px) {
	.treedimensional-des__hero {
		column-gap: clamp(28px, 3.5vw, 56px);
		width: min(calc(100% - 48px), 1520px);
	}
}

.treedimensional-des__franja {
	--treedimensional-des-inclinacion-superior: clamp(18px, 2.8vw, 34px);
	--treedimensional-des-inclinacion-inferior: clamp(30px, 4.6vw, 56px);
	padding: 80px 30px;
	background-color: var(--color-azul-verde-oscuro);
	clip-path: polygon(0 0, 100% var(--treedimensional-des-inclinacion-superior), 100% calc(100% - var(--treedimensional-des-inclinacion-inferior)), 0 100%);
}

.treedimensional-des__franja-contenido {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(34px, 6vw, 78px);
	width: min(840px, 100%);
	margin: 0 auto;
}

.treedimensional-des__franja-texto h2 {
	margin: 0;
	color: var(--color-rojo);
	font: 800 var(--fs-700)/1.1 var(--wp--preset--font-family--elza-text);
}

.treedimensional-des__franja-texto p {
	margin: 8px 0 0;
	color: var(--color-blanco);
	font: 400 var(--fs-500)/1.3 var(--wp--preset--font-family--elza-text);
}

.treedimensional-des__franja-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	border-radius: 18px;
	background-color: var(--color-rojo);
	color: var(--color-blanco);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .32);
	font: 700 var(--fs-600)/1 var(--wp--preset--font-family--elza-text);
	text-align: center;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.treedimensional-des__franja-boton:hover {
	color: var(--color-blanco);
	box-shadow: 0 15px 28px rgba(0, 0, 0, .4);
	transform: translateY(-3px);
}

.treedimensional-des__franja-boton:focus-visible {
	outline: 3px solid var(--color-blanco);
	outline-offset: 4px;
}

/*
	A 1100px o menos ocultamos las imagenes de los lados (libro izquierdo e
	imagen lateral derecha) y dejamos el hero como una sola columna centrada
	con el texto. Aplica tanto al header de la pagina treedimensional como a
	la seccion treedimensional dentro de investigacion.
*/
@media (max-width: 1100px) {
	.treedimensional-des__visual,
	.treedimensional-des__imagen-lateral {
		display: none;
	}

	.treedimensional-des__hero {
		grid-template-columns: 1fr;
		gap: 26px;
		width: min(calc(100% - 36px), 560px);
		text-align: center;
	}

	.treedimensional-des__mensaje {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.treedimensional-des__mensaje-texto,
	.treedimensional-des__titulo {
		align-items: center;
	}

	.treedimensional-des__mensaje-boton {
		align-self: center;
	}
}

@media (max-width: 780px) {
	.treedimensional-des {
		--treedimensional-des-media-size: min(240px, 72vw);
		--treedimensional-des-right-size: min(290px, 82vw);
	}

	.treedimensional-des__visual,
	.treedimensional-des__imagen-lateral {
		display: none;
	}

	.treedimensional-des__hero {
		grid-template-columns: 1fr;
		gap: 26px;
		width: min(calc(100% - 36px), 560px);
		padding: 24px 0;
		text-align: center;
	}

	.treedimensional-des__libro { max-height: 360px; }
	.treedimensional-des__visual { justify-content: center; }
	.treedimensional-des__mensaje { display: flex; align-items: center; flex-direction: column; }
	.treedimensional-des__mensaje-texto,
	.treedimensional-des__titulo { align-items: center; }
	.treedimensional-des__imagen-lateral {
		grid-column: auto;
		width: min(230px, 62vw);
		margin-top: -6px;
		margin-bottom: 0;
		justify-self: center;
		transform: none;
	}
	.treedimensional-des__imagen-lateral {
		width: var(--treedimensional-des-right-size);
		height: var(--treedimensional-des-right-size);
		max-width: 100%;
		justify-self: center;
	}
	.treedimensional-des__etiqueta { margin-bottom: 30px; }
	.treedimensional-des__mensaje-boton { align-self: center; }
	.treedimensional-des__franja { padding-right: 24px; padding-left: 24px; }
	.treedimensional-des__franja-contenido { grid-template-columns: 1fr; gap: 24px; }
	.treedimensional-des__franja-boton { justify-self: start; }
}

@media (max-width: 480px) {
	.treedimensional-des__etiqueta > span { font-size: 21px; }
	.treedimensional-des__titulo-linea { font-size: clamp(22px, 6.5vw, 29px); white-space: normal; }
	.treedimensional-des__titulo-desigualdades { font-size: clamp(22px, 6.5vw, 29px); }
	.treedimensional-des__franja { --treedimensional-des-inclinacion-superior: 16px; --treedimensional-des-inclinacion-inferior: 28px; padding-right: 20px; padding-left: 20px; }
	.treedimensional-des__franja-boton { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.treedimensional-des__hero,
	.treedimensional-des__visual,
	.treedimensional-des__mensaje-texto,
	.treedimensional-des__imagen-lateral {
		opacity: 1 !important;
		transition: none !important;
	}

	.treedimensional-des__visual,
	.treedimensional-des__mensaje-texto { transform: none !important; }
	.treedimensional-des__imagen-lateral { transform: translateX(var(--treedimensional-des-imagen-x)) !important; }
	.treedimensional-des__franja-boton { transition: none; }
}