/* ==========================================================
   portada.css — layouts de módulo (ESCRITORIO, 1200px)
   Grid/Flex con gap. Valores 1:1 de portada.jsx.
   Gaps y márgenes de layout en PX (estructura). 1 GAP = 32px.
   ========================================================== */

/* ── Cabecera del sitio ───────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--hair);
}
.site-header__brand {
	background: var(--lv-blue);
	color: #fff;
}
.site-header__bar {
	max-width: var(--content-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 14px var(--content-pad);
}
.site-header__left {
	display: flex;
	align-items: center;
	gap: 16px;
}
.site-header__right {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}
.site-header__logo {
	height: 40px;
	width: auto;
	display: block;
}
.site-header__bar .btn {
	height: 30px;
}
.iconbtn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--hair);
	background: transparent;
	color: var(--ink);
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s;
}
.iconbtn:hover {
	background: var(--paper-2);
	border-color: var(--lv-blue);
	color: var(--lv-blue);
}
.iconbtn--on-dark {
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
}
.iconbtn--on-dark:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}
.site-header__sections {
	border-bottom: 1px solid var(--hair);
}
.site-header__sections-inner {
	max-width: var(--content-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 var(--content-pad);
	overflow: hidden;
}
.lv-section-link {
	font-family: var(--f-sans);
	font-size: var(--fs-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--ink);
	padding: 13px 12px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition:
		color 0.15s,
		border-color 0.15s;
}
.lv-section-link:hover {
	color: var(--lv-blue);
	border-bottom-color: var(--lv-blue);
}

/* ── Menú desplegable (CSS puro, sin JS) ── */
.lv-menu-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.lv-burger {
	cursor: pointer;
}
.lv-burger span {
	display: inline-flex;
}
.lv-burger .ic-close {
	display: none;
}
.lv-menu-toggle:checked ~ .site-header__brand .lv-burger .ic-menu {
	display: none;
}
.lv-menu-toggle:checked ~ .site-header__brand .lv-burger .ic-close {
	display: inline-flex;
}
.lv-mobile-menu {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	background: var(--paper);
	border-bottom: 1px solid var(--hair);
	box-shadow: var(--shadow-lg);
	max-height: 72vh;
	overflow-y: auto;
}
.lv-menu-toggle:checked ~ .lv-mobile-menu {
	display: block;
}
.lv-mobile-menu__inner {
	max-width: var(--content-max);
	margin-inline: auto;
}
.lv-mobile-menu__sec {
	padding: 14px 16px;
	border-bottom: 1px solid var(--hair-soft);
}
.lv-mobile-menu__search {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--meta);
	border: 1px solid var(--hair);
	border-radius: var(--r-pill);
	padding: 0 14px;
	height: 42px;
	background: var(--paper-2);
}
.lv-mobile-menu__search input {
	flex: 1;
	border: 0;
	background: transparent;
	outline: none;
	font-family: var(--f-sans);
	font-size: var(--fs-13);
	color: var(--ink);
}
.lv-mobile-menu__label {
	font-family: var(--f-sans);
	font-size: var(--fs-11);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
	margin-bottom: 10px;
}
.lv-appearance {
	display: inline-flex;
	border: 1px solid var(--hair);
	border-radius: var(--r-pill);
	overflow: hidden;
}
.lv-appearance button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	border: 0;
	cursor: pointer;
	background: transparent;
	color: var(--ink);
	font-family: var(--f-sans);
	font-size: var(--fs-13);
	letter-spacing: var(--letter-spacing-kicker);
	font-weight: 600;
}
.lv-appearance button.is-on {
	background: var(--lv-blue);
	color: #fff;
}
.lv-mobile-menu__nav {
	padding: 6px 0 10px;
}
.lv-mobile-menu__nav a {
	display: block;
	padding: 12px 16px;
	font-family: var(--f-sans);
	font-size: var(--fs-13);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--hair-soft);
}
.lv-mobile-menu__nav a:last-child {
	border-bottom: none;
}

/* ── Fila de servicios móvil: chips deslizables + Suscríbete fijo a la derecha ── */
.lv-mobile-services {
	display: none;
}
@media (max-width: 640px) {
	.lv-mobile-services {
		display: flex;
		align-items: stretch;
		position: relative;
		background: var(--paper);
		border-bottom: 1px solid var(--hair);
	}
	.lv-mobile-services__chips {
		flex: 1;
		min-width: 0;
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.lv-mobile-services__chips::-webkit-scrollbar {
		display: none;
	}
	.lv-mobile-services__chips a {
		flex: 0 0 auto;
		font-family: var(--f-sans);
		font-size: var(--fs-12);
		font-weight: 600;
		letter-spacing: var(--letter-spacing-kicker);
		text-transform: uppercase;
		color: var(--ink);
		padding: 11px 14px;
		white-space: nowrap;
	}
	.lv-mobile-services__cta {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding-left: 24px;
		padding-right: 12px;
		background: linear-gradient(90deg, transparent, var(--paper) 24px);
	}
	.lv-mobile-services__cta .btn {
		height: 30px;
	}
}

/* ── 1 · Claves del día (apertura lead2) ──────────────── */
.claves__lead2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	align-items: stretch;
}
.tema-card__media {
	margin-bottom: 8px;
}
.tema-card__related {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
	display: grid;
	gap: 10px;
}
.claves__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--gap);
}
.claves__side-item + .claves__side-item {
	padding-top: var(--gap);
	border-top: 1px solid var(--hair);
}
.tema-side__grid {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 18px;
	align-items: start;
}
/* El kicker es inline-block y se alineaba a la BASELINE del strut (24px = line-height
   1.5 del <div>), por eso caía ~8px bajo el borde superior de la foto. Con display:block
   sale del contexto inline y arranca arriba, alineado con la foto. */
.tema-side__grid .kicker {
	display: block;
	line-height: 1;
}
.tema-side__related {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--hair);
	display: grid;
	gap: 8px;
}

/* ── 2 · Actualidad (premium) ─────────────────────────── */
.actualidad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ad-w);
	gap: var(--gap);
	align-items: start;
}
.actualidad__main {
	min-width: 0;
}
.act-destacado {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1fr;
	gap: var(--gap);
	align-items: center;
	padding-bottom: 26px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--hair);
}
.act-dosgrandes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	padding-bottom: 24px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--hair);
}
.act-dosgrandes__withphoto {
	display: grid;
	grid-template-columns: 1fr 88px;
	gap: 16px;
	align-items: start;
	margin-top: 4px;
}
.act-dosgrandes__withphoto .headline {
	margin-top: 0;
}
.act-rail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
}
.rail-col > .rail-item:first-child {
	border-top: none;
}
.rail-item {
	padding: 15px 0;
	border-top: 1px solid var(--hair);
}
.rail-item--thumb {
	display: grid;
	grid-template-columns: 1fr 88px;
	gap: 16px;
	align-items: start;
}

/* Branded (sección propia, fuera del grid de Actualidad). Imagen 16:9 de ancho
   fijo (394px en desktop) + cuerpo a la derecha. */
.branded-full {
	display: grid;
	grid-template-columns: 394px 1fr;
	align-items: center;
	background: var(--brand-bg);
	overflow: hidden;
}
.branded-full__media {
	position: relative;
	width: 394px;
	aspect-ratio: 16 / 9;
	background: var(--paper-2);
}
.branded-full__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.branded-full__body {
	padding: 36px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.branded-full__kicker {
	font-family: var(--f-sans);
	font-size: var(--fs-12);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--ink-soft);
}
.branded-full__title {
	margin-top: 8px;
}
.branded-full__foot {
	margin-top: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* ── Vídeos (clips verticales) ────────────────────────── */
.clips {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--gap);
}
.vclip {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border: 1px solid var(--hair);
	background: var(--paper-2);
}
.vclip img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.vclip__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(8, 12, 20, 0.05) 0%, rgba(8, 12, 20, 0.32) 45%, rgba(8, 12, 20, 0.9) 100%);
}
.vclip__play {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--lv-blue-deep);
	display: grid;
	place-items: center;
}
.vclip__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 14px 14px;
}
.vclip:hover {
	opacity: 0.8;
}
.vclip__dur {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 9px;
	font-family: var(--f-text);
	font-size: var(--fs-11);
	font-weight: 600;
	color: #fff;
	background: rgba(8, 10, 14, 0.55);
	padding: 3px 8px;
	border-radius: var(--r-pill);
}
.vclip__title {
	display: block;
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: var(--fs-18);
	line-height: 1.16;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

/* ── 3 · Destacados (producción propia) ───────────────── */
.destacados__lead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--hair);
	align-items: center;
}
.destacados__body {
	display: grid;
	grid-template-columns: 1fr var(--ad-w);
	gap: var(--gap);
	align-items: start;
}
.destacados__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}
.dest-card__media {
	margin-bottom: 8px;
}

/* ── 4 · La Contra ────────────────────────────────────── */
.contra {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	align-items: center;
}
.contra--retrato {
	grid-template-columns: 0.78fr 1fr;
}

/* ── 4 · Opinión + productos ──────────────────────────── */
.opinion {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--gap);
}
.opinion__lead {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	align-items: start;
}
.opinion__portrait {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--paper-2);
	border: 1px solid var(--hair);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	overflow: hidden;
}
.opinion__name {
	font-family: var(--f-sans);
	font-size: var(--fs-12_5);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
}
.opinion__role {
	font-family: var(--f-text);
	font-size: var(--fs-12_5);
	color: var(--meta);
	margin-bottom: 12px;
}
.opinion__excerpt {
	margin: 12px 0 0;
	font-family: var(--f-text);
	font-size: var(--fs-15);
	line-height: 1.5;
	color: var(--ink-soft);
	text-wrap: pretty;
}
.opinion__firmas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}
.firma {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.firma__portrait {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--paper-2);
	border: 1px solid var(--hair);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	overflow: hidden;
}
.opinion__portrait img,
.firma__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.firma__name {
	font-family: var(--f-sans);
	font-size: var(--fs-11_5);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
}
.firma__title {
	margin-top: 4px;
}
/* Firma reutilizada en módulos de noticia (Actualidad, Economía, Cierre, Para ti):
   las iniciales del autor como avatar (el retrato genérico del módulo Opinión usa
   SVG; aquí va texto, centrado ya por place-items del .firma__portrait). */
.firma__initials {
	font-family: var(--f-sans);
	font-size: var(--fs-17);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--lv-blue);
}
/* Cierre: la firma vive dentro del <article.closing-card> → elevarla sobre el
   overlay stretched-link del lead (si no, su enlace no es clicable) y replicar el
   ritmo de la lista. Retrato algo más contenido para el índice compacto. */
.closing-card .firma {
	position: relative;
	z-index: 2;
	padding: 11px 0;
	border-top: 1px solid var(--hair);
}
.closing-card .firma__portrait {
	width: 40px;
	height: 40px;
}
.closing-card .firma__initials {
	font-size: var(--fs-15);
}
/* Para ti: la firma ocupa una celda del grid de tarjetas → anclar arriba. */
.parati__firma {
	align-self: start;
}
.newsletters {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}
.product {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	align-items: start;
	background: var(--paper-2);
	padding: 18px 20px;
}
.product__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lv-blue);
	color: #fff;
	display: grid;
	place-items: center;
}
.product__type {
	font-family: var(--f-sans);
	font-size: var(--fs-11_5);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
}
.product__name {
	margin: 3px 0 6px;
}
.product__desc {
	margin: 0 0 14px;
	font-family: var(--f-text);
	font-size: var(--fs-13_5);
	line-height: 1.45;
	color: var(--meta);
	text-wrap: pretty;
}

/* ── 5 · Para ti ──────────────────────────────────────── */
.parati {
	display: grid;
	grid-template-columns: 1fr var(--ad-w);
	gap: var(--gap);
	align-items: start;
}
.parati__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}
.parati-card__media {
	margin-bottom: 8px;
}

/* ── 6 · Economía / Deportes (NewsModule) ─────────────── */
.newsmod--econ {
	background: var(--econ-bg);
	margin-inline: calc(-1 * var(--content-pad));
	padding: 32px var(--content-pad) 36px;
}
.newsmod__grid {
	display: grid;
	grid-template-columns: 1fr 1fr var(--ad-w);
	gap: var(--gap);
}
.newsmod__lead-media {
	margin-bottom: 8px;
}
.newsmod__second {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--hair);
}
/* La lista usa el template unificado rail-item (rail-item--thumb, con foto), igual
   que Actualidad. El primer ítem no lleva filete ni padding superior. */
.newsmod__list > .rail-item:first-child {
	border-top: none;
	padding-top: 0;
}
.branded-list {
	background: var(--brand-bg);
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 14px;
	align-items: stretch;
	margin: 14px 0 4px;
	overflow: hidden;
}
.branded-list__media {
	position: relative;
	min-height: 104px;
	background: var(--paper-2);
	/* No estirar con la altura del card (texto): mantiene el 1:1 a ancho de columna,
	   así el branded de Economía y Deportes tiene el MISMO tamaño de imagen. */
	align-self: start;
}
.branded-list__body {
	padding: 12px 14px 12px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.branded-list__label {
	font-family: var(--f-sans);
	font-size: var(--fs-11);
	font-weight: 400;
	letter-spacing: 0em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.branded-list__sponsor {
	margin-top: 7px;
	font-family: var(--f-sans);
	font-size: var(--fs-11);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--meta);
}

/* ── 7 · Gente y estilo ───────────────────────────────── */
.ligeros {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}
.gente-card__media {
	margin-bottom: 8px;
}

/* ── · El Comprador (afiliación) ──────────────────────── */
.comprador {
	background: var(--brand-bg);
	margin-inline: calc(-1 * var(--content-pad));
	padding: 26px var(--content-pad) 32px;
}
.comprador__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	row-gap: 26px;
}
.comprador__item {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 14px;
	align-items: start;
}
.comprador__eyebrow {
	display: inline-block;
	font-family: var(--f-sans);
	font-size: var(--fs-11);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--comprador-accent);
}

/* ── Final · Más noticias (cierre 2col) ───────────────── */
.cierre {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ad-w);
	gap: var(--gap);
	align-items: start;
}
.cierre__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}
.closing-card {
	padding-top: 12px;
	border-top: 1px solid var(--hair);
}
.closing-card__section {
	display: block;
	font-family: var(--f-sans);
	font-size: var(--fs-11_5);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
	margin-bottom: 12px;
}
.closing-card__media {
	margin-bottom: 8px;
}
.closing-card__items {
	margin-top: 12px;
}
.closing-card__item {
	display: block;
	padding: 11px 0;
	border-top: 1px solid var(--hair);
}

/* layout helpers usados en columnas */
.col-min0 {
	min-width: 0;
}
.stack-18 {
	display: grid;
	gap: 18px;
	align-content: start;
}

/* ==========================================================
   RESPONSIVE — un único DOM que refluye con breakpoints.
   ≥1025px = escritorio (1:1 con el prototipo).
   ≤1024px = tablet · ≤640px = móvil.
   ========================================================== */

/* ---------- TABLET (≤1024px) ---------- */
@media (max-width: 1024px) {
	.container {
		padding: 24px 20px 64px;
	}

	/* el raíl de anuncio baja a fila propia, centrado (sigue reservando 300×600) */
	.actualidad,
	.parati,
	.cierre,
	.destacados__body {
		grid-template-columns: minmax(0, 1fr);
	}
	.ad-slot {
		position: static;
		margin: 8px auto 0;
	}
	.ad-slot--sticky {
		position: static;
	}

	/* rejillas de 3 → 2 columnas */
	.destacados__cards,
	.parati__cards,
	.ligeros,
	.comprador__grid,
	.newsletters {
		grid-template-columns: repeat(2, 1fr);
	}
	.clips {
		grid-template-columns: repeat(4, 1fr);
	}

	/* NewsModule: quita la columna de anuncio; el ad pasa debajo a todo el ancho */
	.newsmod__grid {
		grid-template-columns: 1fr 1fr;
	}
	.newsmod__grid .ad-slot {
		grid-column: 1 / -1;
	}
}

/* ---------- MÓVIL (≤640px) ---------- */
@media (max-width: 640px) {
	.container {
		padding: 20px 16px 60px;
	}

	.contra.container {
		margin-top: 0;
		padding-top: 0px;
	}

	.section {
		margin-bottom: var(--section-gap-m);
	}
	.section--tight {
		margin-bottom: 20px;
	}

	/* Cabecera móvil = hamburguesa · logo · [Suscríbete · usuario] (estilo MobileHeader) */
	.site-header__sections {
		display: none;
	}
	.site-header__bar {
		padding: 10px 16px;
		gap: 10px;
	}
	.site-header__logo {
		height: 18px;
	}
	.site-header__bar .iconbtn {
		width: 30px;
		height: 30px;
	}
	.lv-search-btn {
		display: none;
	} /* el buscar vive dentro del menú */
	.lv-dark {
		display: none;
	} /* el toggle de tema vive dentro del menú/ajustes */
	.lv-subscribe {
		display: none;
	} /* el Suscríbete pasa a la fila de servicios móvil */

	/* Todo a una columna */
	.claves__lead2,
	.act-destacado,
	.act-dosgrandes,
	.act-rail,
	.destacados__lead,
	.contra,
	.opinion,
	.opinion__firmas,
	.newsmod__grid,
	.cierre__grid {
		grid-template-columns: 1fr;
	}
	/* (El responsive de .claves--fullrail va junto a su regla base, más abajo, para
	   que gane por orden de fuente: la base está después de este bloque.) */

	.claves__side {
		grid-template-rows: auto;
	}
	.newsmod__grid .ad-slot {
		grid-column: auto;
	}

	/* tarjetas: 2 columnas */
	.destacados__cards,
	.parati__cards,
	.ligeros,
	.comprador__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.newsletters {
		grid-template-columns: 1fr;
	}

	/* El Comprador: en móvil la foto va arriba (no miniatura lateral) */
	.comprador__item {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/* Vídeos: carrusel horizontal con scroll */
	.clips {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 0 16px;
	}
	.clips::-webkit-scrollbar {
		display: none;
	}
	.clips > .vclip {
		flex: 0 0 46%;
	}

	/* Branded → imagen arriba (ancho completo 16:9), texto debajo */
	.branded-full {
		grid-template-columns: 1fr;
	}
	.branded-full__media {
		width: auto;
		aspect-ratio: 16 / 9;
	}
	.branded-full__body {
		padding: 16px;
	}

	/* full-bleed con margen móvil */
	.newsmod--econ {
		margin-inline: -16px;
		padding: 22px 16px 26px;
	}
	.comprador {
		margin-inline: -16px;
		padding: 22px 16px 26px;
	}

	/* anuncio centrado */
	.ad-slot {
		margin: 8px auto 0;
	}

	/* ---- Escala tipográfica móvil (titulares) ---- */
	.t-claves-lead {
		font-size: var(--fs-24);
		line-height: 1.14;
	}
	.t-claves-side {
		font-size: var(--fs-17);
		line-height: 1.2;
	}
	.t-act-dest {
		font-size: var(--fs-23);
		line-height: 1.14;
	}
	.t-act-grande {
		font-size: var(--fs-18);
		line-height: 1.18;
	}
	.t-rail,
	.t-rail-live {
		font-size: var(--fs-16);
		line-height: 1.22;
	}
	.t-dest-lead {
		font-size: var(--fs-22);
		line-height: 1.16;
	}
	.t-dest-card {
		font-size: var(--fs-16);
		line-height: 1.22;
	}
	.t-news-lead {
		font-size: var(--fs-22);
		line-height: 1.16;
	}
	.t-news-second {
		font-size: var(--fs-18);
		line-height: 1.18;
	}
	.t-list {
		font-size: var(--fs-16);
		line-height: 1.22;
	}
	.t-parati {
		font-size: var(--fs-16);
		line-height: 1.22;
	}
	.t-gente {
		font-size: var(--fs-16);
		line-height: 1.24;
	}
	.t-contra {
		font-size: var(--fs-24);
		line-height: 1.1;
	}
	.t-comprador {
		font-size: var(--fs-16);
		line-height: 1.24;
	}
	.t-closing-lead {
		font-size: var(--fs-17);
		line-height: 1.22;
	}
	.t-closing-item {
		font-size: var(--fs-16);
		line-height: 1.26;
	}
	.t-branded-full {
		font-size: var(--fs-21);
		line-height: 1.14;
	}
	.t-op-lead {
		font-size: var(--fs-22);
		line-height: 1.16;
	}
	.t-op-firma {
		font-size: var(--fs-16);
		line-height: 1.22;
	}
}

/* ==========================================================
   VARIANTES · "Claves del día" (split / full) y el módulo
   "Gran Acontecimiento" con sus 4 formas. Valores 1:1.
   Una sola pieza por antetítulo/titular; reflujo móvil incluido.
   ========================================================== */

/* ---- Claves: split (2 temas iguales) ---- */
.claves--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
}

/* ---- Claves: full (1 a sangre + 3 relacionados) ---- */
.claves-full__lead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	align-items: center;
}

.claves--fullrail .claves-full__lead {
	gap: 10px;
}

.lead-related {
	margin-top: 24px;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

/* ---- Apertura "Full 2 col": lead full en 2 columnas + raíl (lista/vídeo) en la 3ª ---- */
.claves--fullrail {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--gap);
	align-items: start;
}
/* En esta variante el lead "full" lleva la imagen ARRIBA a todo el ancho de las 2
   columnas (más a sangre y equilibra el alto del vídeo vertical del raíl). */
.claves--fullrail .claves-full__lead {
	grid-template-columns: 1fr;
}
.claves__rail {
	display: grid;
	gap: 22px;
	align-content: start;
}
.claves__rail-video .vclip {
	width: 100%;
}
.claves__rail-list {
	display: grid;
	gap: 16px;
}
.claves__rail-item + .claves__rail-item {
	padding-top: 16px;
	border-top: 1px solid var(--hair);
}
/* foto cuadrada más compacta que en lead2 (la columna del raíl es estrecha) */
.claves__rail .tema-side__grid {
	grid-template-columns: 104px 1fr;
	gap: 14px;
}
/* Con vídeo vertical, el raíl es SOLO el vídeo (se oculta la lista de noticias).
   Sin vídeo, el raíl muestra la lista. Vídeo y lista nunca conviven. */
.claves__rail:has(.claves__rail-video) .claves__rail-list {
	display: none;
}
/* Responsive de la variante (aquí, tras la regla base, para ganar por orden de fuente).
   El raíl siempre es de una columna (vídeo o lista), así que solo colapsamos la rejilla. */
@media (max-width: 1024px) {
	.claves--fullrail {
		grid-template-columns: 1fr;
	}
}

/* ---- Apertura "3 columnas": lead (ancho) + 2 columnas (foto + lista) / vídeo ---- */
.claves--cols3 {
	display: grid;
	grid-template-columns: 1fr 300px 300px;
	gap: var(--gap);
	align-items: start;
}
.claves-col {
	min-width: 0;
}
.claves-col__media {
	margin-bottom: 8px;
}
/* Titular de las columnas secundarias: reutiliza .t-claves-card (pensado para el
   split, más ancho) → en estas columnas estrechas hay que reducirlo. Scopeado con
   el indicador de variante .apertura--claves-3col. */
.apertura--claves-3col .claves-col .t-claves-card,
.apertura--claves-3up .t-claves-card {
	font-size: var(--fs-22);
	line-height: 1.14;
}
/* Noticias secundarias de cada columna: template rail-item (sin foto). El primer
   rail-item (el que sigue al card) necesita margen sobre su filete para igualar el
   ritmo: entre rail-items el filete ya tiene 15px (padding) por encima; aquí lo
   damos con margin-top para que todos los filetes queden homogéneos. */
.claves--cols3 .claves-col > :not(.rail-item) + .rail-item {
	margin-top: 15px;
}
/* Columna de vídeo vertical (toggle ?video): el 9:16 llena la columna */
.claves-col--video .vclip {
	width: 100%;
}
/* Responsive (tras la base, para ganar por orden de fuente) */
@media (max-width: 1024px) {
	.claves--cols3 {
		grid-template-columns: 1fr;
	}
	/* apilado: el vídeo vertical no debe ocupar todo el ancho */
	.claves-col--video .vclip {
		max-width: 360px;
	}
}

/* ---- Gran Acontecimiento · común ---- */
.acon__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 3px solid var(--lv-blue);
	padding: 10px 0 14px;
}
.acon__kicker--live {
	border-top-color: var(--live);
}
.acon__kicker-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--live);
}
.acon__kicker-label {
	font-family: var(--f-sans);
	font-weight: 700;
	font-size: var(--fs-12_5);
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
}
.acon__kicker--live .acon__kicker-label {
	color: var(--live);
}
.acon-derived-row {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--hair);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

/* completo (default) */
.acon-completo {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--gap);
}
.acon-completo__side {
	display: grid;
	gap: 18px;
	align-content: start;
}
.acon-derived-list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--hair);
}
.acon-derived-item {
	padding: 13px 0;
	border-bottom: 1px solid var(--hair);
}
.acon-derived-item:last-child {
	border-bottom: none;
}
.acon-extra {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--hair);
}
.acon-extra--grafico {
	grid-template-columns: 2fr 1fr;
}

/* cronología compacta */
.acon-timeline__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.acon-timeline__list {
	list-style: none;
	margin: 0;
	padding: 16px 0 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--gap);
	border-top: 2px solid var(--hair);
}
.acon-timeline__item {
	position: relative;
}
.acon-timeline__dot {
	position: absolute;
	top: -23px;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--hair);
}
.acon-timeline__item--current .acon-timeline__dot {
	background: var(--live);
	border-color: var(--live);
}
.acon-timeline__date {
	font-family: var(--f-text);
	font-size: var(--fs-11);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: var(--meta);
}
.acon-timeline__item--current .acon-timeline__date {
	color: var(--live);
}

/* recurso de cifras */
.acon-graphic {
	border-top: 2px solid var(--ink);
	padding-top: 14px;
}
.acon-graphic__head {
	margin-bottom: 14px;
}
.acon-graphic__figs {
	display: grid;
	gap: 12px;
}
.acon-figure {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: baseline;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hair);
}
.acon-figure:last-child {
	border-bottom: none;
}
.acon-figure__value {
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: var(--fs-30);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--lv-blue);
	min-width: 70px;
}
.acon-figure__label {
	font-family: var(--f-text);
	font-size: var(--fs-13_5);
	line-height: 1.4;
	color: var(--meta);
	text-wrap: pretty;
}

/* titular (uno solo, centrado) */
.acon-titular {
	max-width: 840px;
	margin: 0 auto;
	text-align: center;
}

/* visual (foto a sangre, titular sobreimpreso) */
.acon-visual {
	position: relative;
	margin-inline: calc(-1 * var(--content-pad));
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--paper-2);
}
.acon-visual__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.acon-visual__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 20, 0.05) 32%, rgba(8, 12, 20, 0.84) 100%);
}
.acon-visual .live-badge {
	top: 22px;
	left: 48px;
}
.acon-visual__cap {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 48px 46px;
}
.acon-visual__cap .headline-h {
	max-width: 1000px;
}
.acon-visual__marcador {
	display: inline-block;
	margin-bottom: 16px;
	font-family: var(--f-sans);
	font-weight: 700;
	font-size: var(--fs-15);
	letter-spacing: var(--letter-spacing-kicker);
	color: #fff;
	background: var(--lv-blue);
	padding: 7px 16px;
	border-radius: var(--r-chip);
}
.acon-visual--live .acon-visual__marcador {
	background: var(--live);
}

/* reducido */
.acon-reducido {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	align-items: center;
}

/* ---- Responsive de las variantes ---- */
@media (max-width: 1024px) {
	.acon-completo,
	.acon-reducido,
	.acon-extra,
	.acon-extra--grafico {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	.claves--split,
	.claves-full__lead,
	.acon-completo,
	.acon-reducido {
		grid-template-columns: 1fr;
	}
	.lead-related,
	.acon-derived-row {
		grid-template-columns: 1fr;
	}
	/* cronología → lista vertical */
	.acon-timeline__list {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 0;
		border-top: none;
		padding-top: 8px;
	}
	.acon-timeline__item {
		padding: 12px 0 12px 18px;
		border-top: 1px solid var(--hair-soft);
	}
	.acon-timeline__item:first-child {
		border-top: none;
	}
	.acon-timeline__dot {
		top: 14px;
	}
	/* visual → 16:9 con márgenes móvil */
	.acon-visual {
		aspect-ratio: 16 / 9;
		margin-inline: -16px;
	}
	.acon-visual__cap {
		padding: 0 16px 16px;
	}
	.acon-visual .live-badge {
		top: 12px;
		left: 12px;
	}
	.acon-visual__marcador {
		font-size: var(--fs-13);
		margin-bottom: 10px;
	}
	/* tipografía móvil de variantes */
	.t-claves-card {
		font-size: var(--fs-22);
		line-height: 1.16;
	}
	.t-claves-full {
		font-size: var(--fs-24);
		line-height: 1.14;
	}
	.t-acon-lead {
		font-size: var(--fs-26);
		line-height: 1.1;
		margin-top: 14px;
	}
	.t-acon-video {
		font-size: var(--fs-16);
		line-height: 1.2;
	}
	.t-acon-derived {
		font-size: var(--fs-16);
		line-height: 1.22;
	}
	.t-acon-titular {
		font-size: var(--fs-28);
		line-height: 1.1;
		margin-top: 14px;
	}
	.t-acon-visual {
		font-size: var(--fs-27);
		line-height: 1.1;
	}
	.t-acon-reducido {
		font-size: var(--fs-25);
		line-height: 1.12;
	}
	.t-acon-rel {
		font-size: var(--fs-16);
		line-height: 1.22;
	}
}