.headline {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 0;
	gap: 0;
	overflow: hidden;
}

.headline .overlay {
	position: absolute;
	inset: 0 55% 0 0;
	z-index: 0;
	display: none
}

.headline > dl:nth-of-type(1) {
	position: relative;
	width: 45%;
	box-sizing: border-box;
	z-index: 1;
}

.headline > dl:nth-of-type(2) {
	position: relative;
	width: 55%;
	box-sizing: border-box;
	z-index: 1;
}

.headline .artxt {
	color: rgb(var(--n) / 1);
	padding: 0;
	box-sizing: border-box;
}

/* ESCRITORIO (Los paddings enormes de 27rem solo aplican aquí) */
@media (min-width: 768px) {
	.headline .artxt dt {
		text-align: right;
		padding: 3rem 0 3rem 27rem;
	}

	.headline .artxt dt h2 {
		width: 100%;
	}

	.headline .artxt dt h2, 
	.headline .artxt dt h3, 
	.headline .artxt dt span {
		padding-right: 1.5rem;
	}

	.headline .artxt dd {
		border: none;
		padding: 3rem 27rem 3rem 0;
	}

	.headline .artxt dd h4, 
	.headline .artxt dd p, 
	.headline .artxt dd span {
		padding-left: 1.5rem;
	}

	.headline dd p {
		column-count: 2;
		column-gap: 1rem;
	}
}

/* MÓVIL (Resetea los paddings de 27rem y mantiene los alineamientos) */
@media (max-width: 767px) {
	.headline {
		flex-direction: column;
		padding: 0;
	}

	.headline .overlay {
		inset: 0;
	}

	.headline > dl:nth-of-type(1),
	.headline > dl:nth-of-type(2) {
		width: 100%;
		padding: 0;
	}

	/* Primer DL (arriba) -> Alineado a la derecha */
	.headline > dl:nth-of-type(1) {
		text-align: right;
	}

	.headline > dl:nth-of-type(1) dt {
		width: 100%;
		padding: 2.5rem 1.25rem 1rem; /* Padding móvil normal */
		text-align: right;
	}
	.headline > dl:nth-of-type(1) dt h2{
		width: 100%;
	}
	

	.headline > dl:nth-of-type(1) dt h2,
	.headline > dl:nth-of-type(1) dt h3,
	.headline > dl:nth-of-type(1) dt span {
		padding-right: 0;
	}

	.headline > dl:nth-of-type(1) hr {
		margin: 1rem 0 1rem auto; /* Hr a la derecha */
		width: 65%;
	}

	.headline .headline-buttons-top {
		justify-content: flex-end;
		margin: 1rem 0 0;
	}

	/* Segundo DL (abajo) -> Alineado a la izquierda */
	.headline > dl:nth-of-type(2) {
		text-align: left;
	}

	.headline > dl:nth-of-type(2) dd {
		width: 100%;
		padding: 1rem 1.25rem 2.5rem; /* Padding móvil normal */
		border-top: 1px solid transparent;
		border-image: linear-gradient(to right, 
			rgb(var(--b) / .4) 0%, 
			rgb(var(--b) / .2) 30%, 
			transparent 30%, 
			transparent 100%) 1;
	}

	.headline > dl:nth-of-type(2) dd h4,
	.headline > dl:nth-of-type(2) dd p,
	.headline > dl:nth-of-type(2) dd span {
		padding-left: 0;
	}

	.headline dd p {
		column-count: 1;
		column-gap: 0;
	}
}