/* ==========================================================
   base.css — reset, base, tipografía por pieza, primitivas
   Valores 1:1 de portada.jsx / portada-mobile.jsx.
   font-size en REM · letter-spacing en EM · bordes/sombras en PX.
   ========================================================== */

:root {
	--_f-mono: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
} /* 1rem = 16px, respeta a11y */
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: var(--fs-16);
	line-height: 1.5;
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}

/* — Accesibilidad — */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: 8px;
	top: -48px;
	z-index: 100;
	background: var(--lv-blue);
	color: #fff;
	padding: 10px 16px;
	font-family: var(--f-sans);
	letter-spacing: var(--letter-spacing-kicker);
	font-size: var(--fs-14);
	transition: top 0.15s ease;
}
.skip-link:focus {
	top: 8px;
}
:focus-visible {
	outline: 2px solid var(--lv-blue);
	outline-offset: 2px;
}

/* — Contenedor / sección — */
.container {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: 28px var(--content-pad) 80px;
}

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

/* Cabecera de sección: filete navy 2px + título sans uppercase 15px */
.section__head {
	border-top: 2px solid var(--lv-blue);
	padding-top: 8px;
	margin-bottom: 20px;
	min-height: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.section__title {
	margin: 0;
	font-family: var(--f-sans);
	letter-spacing: var(--letter-spacing-kicker);
	font-weight: 700;
	font-size: var(--fs-15);
	text-transform: uppercase;
	color: var(--ink);
}

/* Paginador (Opinión) */
.pager {
	display: flex;
	gap: 8px;
	margin-block: -7px;
}
.pager button {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--hair);
	border-radius: 50%; /* círculo, coherente con .iconbtn (botones de icono) */
	background: transparent;
	color: var(--lv-blue);
	cursor: pointer;
	padding: 0;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s;
}
.pager button:hover {
	background: var(--lv-blue);
	border-color: var(--lv-blue);
	color: #fff;
}

/* ==========================================================
   Tipografía por pieza
   ========================================================== */
.kicker {
	display: block;
	font-family: var(--f-sans);
	font-size: var(--fs-12);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
}
.kicker--live {
	color: var(--live);
}
.verttag {
	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);
}
.byline {
	display: block;
	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);
	margin-top: 9px;
}
.meta {
	font-family: var(--f-text);
	font-size: var(--fs-12_5);
	color: var(--meta);
}

.deck {
	margin: 9px 0 0;
	font-family: var(--f-text);
	font-size: var(--fs-16);
	line-height: 1.5;
	color: var(--deck);
	text-wrap: pretty;
}
.deck--14 {
	font-size: var(--fs-14);
}
.deck--17 {
	font-size: var(--fs-17);
}
.deck--18 {
	font-size: var(--fs-18);
}
.deck--19 {
	font-size: var(--fs-19);
}

/* Headline base — todos los titulares editoriales */
.headline {
	display: block;
	font-family: var(--f-headline);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
	/*text-wrap: balance;*/
	margin-top: 4px; /* gap antetítulo→titular por defecto (Hl mt=7 en el prototipo) */
}
a.headline:hover {
	text-decoration: none;
	opacity: 0.65;
}

/* Heading que envuelve el titular principal de cada noticia (<h3 class="headline-h">
   <a class="headline t-*">…</a></h3>). Da semántica SEO sin alterar el diseño: el
   estilo visual sigue en .headline (el <a>); aquí solo neutralizamos los estilos
   por defecto del heading (márgenes, tamaño/peso de fuente). */
.headline-h {
	margin: 0;
	font: inherit;
	font-weight: inherit;
}

/* — Stretched link — Toda la noticia es clicable (foto incluida). Cada <article>
   ancla un overlay (::after del titular principal) que cubre la tarjeta entera;
   así el clic en la foto/entradilla/hueco abre la noticia, y el :hover del titular
   se activa al pasar por cualquier punto. Los demás enlaces de la tarjeta
   (relacionados, índice, CTA branded) se elevan por encima del overlay para
   seguir siendo clicables de forma independiente. */
article {
	position: relative;
}
article .headline-h > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
article :is(.related__link, .discover, .closing-card__section, .closing-card__item) {
	position: relative;
	z-index: 2;
}

/* Titulares por contexto (font-size REM / line-height) — DESKTOP */
.t-claves-lead {
	font-size: var(--fs-34);
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.t-claves-side {
	font-size: var(--fs-18);
	line-height: 1.2;
}
.t-act-dest {
	font-size: var(--fs-28);
	line-height: 1.1;
}
.t-act-grande {
	font-size: var(--fs-22);
	line-height: 1.16;
}
.t-rail {
	font-size: var(--fs-18);
	line-height: 1.2;
}
.t-rail-live {
	font-size: var(--fs-17);
	line-height: 1.2;
}
.t-dest-lead {
	font-size: var(--fs-30);
	line-height: 1.08;
}
.t-dest-card {
	font-size: var(--fs-18);
	line-height: 1.2;
}
.t-news-lead {
	font-size: var(--fs-28);
	line-height: 1.08;
}
.t-news-second {
	font-size: var(--fs-20);
	line-height: 1.18;
}
.t-list {
	font-size: var(--fs-18);
	line-height: 1.2;
}
.t-parati {
	font-size: var(--fs-18);
	line-height: 1.2;
}
.t-gente {
	font-size: var(--fs-20);
	line-height: 1.2;
}
.t-contra {
	font-size: var(--fs-32);
	line-height: 1.08;
}
.t-comprador {
	font-size: var(--fs-16);
	line-height: 1.2;
}
.t-closing-lead {
	font-size: var(--fs-19);
	line-height: 1.22;
}
.t-closing-item {
	font-size: var(--fs-17);
	line-height: 1.25;
	font-weight: 400;
}

/* Branded (titulares) */
.t-branded-full {
	font-size: var(--fs-34);
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.t-branded-card16 {
	font-size: var(--fs-16);
	line-height: 1.16;
}
.t-branded-card18 {
	font-size: var(--fs-18);
	line-height: 1.16;
}
.t-branded-card20 {
	font-size: var(--fs-20);
	line-height: 1.16;
}
.t-branded-list {
	font-size: var(--fs-16);
	line-height: 1.2;
}
.t-branded-rail {
	font-size: var(--fs-26);
	line-height: 1.12;
}

/* Opinión */
.t-op-lead {
	font-family: var(--f-headline);
	font-style: italic;
	font-weight: 500;
	font-size: var(--fs-27);
	line-height: 1.14;
	color: var(--ink);
	display: block;
	margin-top: 5px;
}

.t-op-lead:hover {
	text-decoration: none;
	opacity: 0.65;
}

.t-op-firma {
	font-family: var(--f-headline);
	font-style: italic;
	font-weight: 500;
	font-size: var(--fs-19);
	line-height: 1.1;
	color: var(--ink);
	display: block;
}

.t-op-firma:hover {
	text-decoration: none;
	opacity: 0.65;
}

.t-product {
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: var(--fs-19);
	line-height: 1.16;
	color: var(--ink);
}

/* Las variantes móviles de TAMAÑO viven ahora en el @media (max-width:640px)
   de portada.css — un único DOM responsive, sin clases .t-m-* paralelas. */

/* Márgenes superiores (gap antetítulo→titular) 1:1 con el prototipo.
   Por defecto .headline lleva 7px; estas son las excepciones por contexto. */
.t-act-dest {
	margin-top: 8px;
}
.t-act-grande {
	margin-top: 6px;
}
.t-rail {
	margin-top: 4px;
}
.t-rail-live {
	margin-top: 4px;
}
.t-parati {
	margin-top: 4px;
}
.t-comprador {
	margin-top: 4px;
}
.t-contra {
	margin-top: 8px;
}
.t-closing-lead {
	margin-top: 10px;
}
.t-closing-item {
	margin-top: 0;
}
.t-branded-list {
	margin-top: 4px;
}

/* ── Variantes de Claves del día y Gran Acontecimiento (titulares) ── */
.t-claves-card {
	font-size: var(--fs-34);
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.t-claves-full {
	font-size: var(--fs-38);
	line-height: 1.06;
	letter-spacing: -0.01em;
}
.t-acon-lead {
	font-size: var(--fs-46);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin-top: 18px;
}
.t-acon-video {
	font-size: var(--fs-22);
	line-height: 1.16;
	margin-top: 10px;
}
.t-acon-derived {
	font-size: var(--fs-16);
	line-height: 1.22;
	margin-top: 5px;
}
.t-acon-titular {
	font-size: var(--fs-54);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin-top: 26px;
}
.t-acon-visual {
	font-size: var(--fs-56);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
	margin-top: 0;
}
.t-acon-reducido {
	font-size: var(--fs-38);
	line-height: 1.06;
	letter-spacing: -0.01em;
}
.t-acon-rel {
	font-size: var(--fs-18);
	line-height: 1.22;
	margin-top: 6px;
}
.t-acon-timeline {
	font-size: var(--fs-16);
	line-height: 1.25;
	margin-top: 0;
}

/* ==========================================================
   Media — SIEMPRE con ratio reservado (CLS ≈ 0)
   ========================================================== */
.media {
	position: relative;
	overflow: hidden;
	display: block;
	background: var(--paper-2);
	/*border: 1px solid var(--hair);*/
}
.media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media--16x9 {
	aspect-ratio: 16 / 9;
}
.media--1x1 {
	aspect-ratio: 1 / 1;
}
.media--4x3 {
	aspect-ratio: 4 / 3;
}
.media--4x5 {
	aspect-ratio: 4 / 5;
}
.media--9x16 {
	aspect-ratio: 9 / 16;
} /* clips verticales */
.media--21x9 {
	aspect-ratio: 21 / 9;
}

/* Play badge (vídeo) */
.play-badge {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 2;
}
.play-badge i {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--lv-blue-deep);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.play-badge--big i {
	width: 56px;
	height: 56px;
}
.dur-chip {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	font-family: var(--f-text);
	font-size: var(--fs-11);
	font-weight: 600;
	color: #fff;
	background: rgba(8, 10, 14, 0.6);
	padding: 3px 9px;
	border-radius: var(--r-pill);
}

/* ==========================================================
   "En directo"
   ========================================================== */
.live-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.live-tag__dot {
	position: relative;
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
}
.live-tag__dot::before,
.live-tag__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--live);
}
.live-tag__dot::after {
	animation: lv-pulse 1.8s ease-out infinite;
}
.live-tag__label {
	font-family: var(--f-sans);
	font-weight: 700;
	font-size: var(--fs-11);
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--live);
}
.live-tag__sub {
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: var(--fs-11_5);
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--meta);
}
@keyframes lv-pulse {
	0% {
		opacity: 0.6;
		transform: scale(1);
	}
	70% {
		opacity: 0;
		transform: scale(3.2);
	}
	100% {
		opacity: 0;
		transform: scale(3.2);
	}
}
@media (prefers-reduced-motion: reduce) {
	.live-tag__dot::after {
		animation: none;
	}
}

/* Badge "En directo" sobre imagen (apertura) */
.live-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--live);
	color: #fff;
	padding: 4px 11px;
	border-radius: var(--r-chip);
	font-family: var(--f-text);
	font-size: var(--fs-12);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.live-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
}

/* ==========================================================
   Enlaces relacionados
   ========================================================== */
/* Grupos de enlaces que son listas semánticas (<ul>): relacionados, índice de
   cierre y derivadas del acontecimiento. Neutralizamos SOLO los estilos de lista
   del navegador con :where() (specificity 0) para no pisar el layout grid/flujo
   ni los márgenes que cada contenedor ya define. */
:where(.related, .tema-card__related, .tema-side__related, .lead-related, .acon-derived-row, .acon-derived-list, .closing-card__items) {
	list-style: none;
	margin-bottom: 0;
	padding-inline-start: 0;
}
.related {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
	display: grid;
	gap: 10px;
}
.related__link {
	display: block;
	font-family: var(--f-headline);
	font-weight: 100;
	font-size: var(--fs-16);
	letter-spacing: 0.01em;
	line-height: 1.4;
	color: var(--related-link);
}
.related__link:hover {
	text-decoration: none;
	opacity: 0.65;
}
.related__dot {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--related-link);
	vertical-align: middle;
	margin-right: 7px;
}
.related__type {
	font-family: var(--f-sans);
	font-size: var(--fs-13);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
	margin-right: 7px;
}
.related__type--live {
	color: var(--live);
}
.related__dot--live {
	background: var(--live);
}

/* ==========================================================
   Slot de anuncio — espacio SIEMPRE reservado (anti-CLS)
   ========================================================== */
.ad-slot {
	width: var(--ad-w);
	height: var(--ad-h);
	background: var(--paper-2);
	border: 1px solid var(--hair);
	display: grid;
	place-items: center;
	font-family: var(--f-sans);
	letter-spacing: var(--letter-spacing-kicker);
	font-size: var(--fs-11);
	text-transform: uppercase;
	color: var(--meta-soft);
}
.ad-slot--sticky {
	position: sticky;
	top: 115px;
}

.article__rail .ad-slot--sticky {
	margin-bottom: 200px;
}

/* ==========================================================
   Botones (suscripción / productos)
   ========================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 1.33em; /* padding en EM (escala con el texto) */
	border-radius: var(--r-pill);
	border: 1px solid var(--hair);
	background: transparent;
	color: var(--ink);
	font-family: var(--f-sans);
	letter-spacing: var(--letter-spacing-kicker);
	font-size: var(--fs-12);
	line-height: 0;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.15s,
		border-color 0.15s,
		color 0.15s;
}
.btn:not(.btn-primary):hover {
	background: var(--paper-2);
	border-color: var(--lv-blue);
	color: var(--lv-blue);
}
.btn-primary {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.btn-primary:hover {
	background: var(--lv-blue);
	border-color: var(--lv-blue);
	color: var(--paper);
}
.btn-cta {
	background: var(--lv-yellow);
	color: var(--lv-blue-deep);
	border-color: var(--lv-yellow);
	font-weight: 700;
}
.btn-cta:hover {
	background: var(--lv-yellow-deep);
	border-color: var(--lv-yellow-deep);
}
.btn--on-dark {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}
.btn--on-dark:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

/* ==========================================================
   Branded content (piezas reutilizables)
   ========================================================== */
/* Card vertical: cuerpo (brand-bg) + foto 16:9 debajo */
.branded-card__body {
	background: var(--brand-bg);
	padding: 14px 16px 16px;
}
.branded-card__label {
	font-family: var(--f-sans);
	font-size: var(--fs-11);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--ink-soft);
}
.branded-card__title {
	display: block;
	margin-top: 6px;
}
.branded-card__sponsor {
	display: block;
	margin-top: 9px;
	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);
}

/* Sponsor genérico */
.sponsor {
	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);
}
.discover {
	font-family: var(--f-sans);
	letter-spacing: var(--letter-spacing-kicker);
	font-size: var(--fs-13);
	font-weight: 600;
	color: var(--lv-blue);
}

.site-header__channel {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px;
}

.site-header__channel-logo {
	height: 60px;
}

/* Canal: barra azul y logo de LV más pequeños (dejan sitio a la banda del canal). */
.site-header--canal .site-header__bar {
	padding-block: 8px;
}
.site-header--canal .site-header__logo {
	height: 22px;
}

main.canal .section-hero {
	display: none;
}