/* La Contra · apertura (integrado del handoff design/noticia/apertura-contra-A).
   Per-page como article/section CSS. Mapeos: --f-serif-text→--f-text, --f-mono→--f-sans.
   Solo se añade --band-ink (los demás tokens ya existen en el sitio). */
:root {
	--band-ink: #15171a;
}

/* ==========================================================
   DESCUBRIMIENTO · "Todas las Contras" (banda navy)
   ========================================================== */
.contra-disc {
	background: var(--lv-blue);
	color: #fff;
}
.contra-disc__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 26px 24px 30px;
}
.contra-disc__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.contra-disc__eyebrow {
	font-family: var(--f-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lv-yellow);
	margin-bottom: 8px;
}
.contra-disc__h2 {
	margin: 0;
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #fff;
}
.contra-disc__nav {
	display: flex;
	gap: 8px;
}
.contra-disc__arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: #fff;
	display: grid;
	place-items: center;
	transition:
		background 0.15s,
		border-color 0.15s;
}
.contra-disc__arrow:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

.contra-disc__rail {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.contra-disc__rail::-webkit-scrollbar {
	display: none;
}

.contra-disc__card {
	flex: 0 0 232px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 130px;
	background: #fff;
	color: var(--lv-blue);
	padding: 16px 16px 14px;
	text-decoration: none;
	border-top: 3px solid var(--lv-yellow);
	transition:
		transform 0.15s,
		box-shadow 0.15s;
}
.contra-disc__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.contra-disc__card-title {
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.16;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.contra-disc__card-go {
	align-self: flex-end;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid #c9cdd6;
	display: grid;
	place-items: center;
	color: var(--lv-blue);
	margin-top: 14px;
}

/* ==========================================================
   Bloque apertura
   ========================================================== */
.contra-ap {
	width: 100%;
	max-width: 1200px;
	margin: 40px 0 40px;
}

/* ── 1 · Cintillo ───────────────────────────────────────── */
.contra-ap__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.contra-ap__brand {
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	color: var(--lv-blue);
}
.contra-ap__sep {
	width: 1px;
	height: 14px;
	background: var(--hair);
}
.contra-ap__meta {
	font-family: var(--f-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--meta);
	white-space: nowrap;
}

/* ── 2 · Foto 16:9 limpia ───────────────────────────────── */
.contra-ap__photo {
	margin: 0;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #33425c;
}
.contra-ap__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 44% 42%;
}
/* Placeholder visual (borrar cuando haya foto real) */
.contra-ap__photo-ph {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 30% 66% at 44% 42%, rgba(18, 20, 26, 0.42), transparent 62%), radial-gradient(ellipse at 76% 12%, rgba(255, 255, 255, 0.26), transparent 46%), linear-gradient(168deg, #a9c4dd 0%, #8aa6c1 34%, #6a7480 64%, #4a4d53 100%);
	display: grid;
	place-items: center;
}
.contra-ap__photo-tag {
	font-family: var(--f-sans);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	white-space: nowrap;
	padding: 6px 11px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--r-chip);
	backdrop-filter: blur(6px);
}

/* ── 3 · Bandas ─────────────────────────────────────────── */
/* Banda amarilla: nombre + cargo */
.contra-ap__band-name {
	background: var(--lv-yellow);
	padding: 15px 26px;
}
.contra-ap__person {
	display: block;
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.05;
	color: #15140e;
}
.contra-ap__role {
	display: block;
	font-family: var(--f-text);
	font-style: italic;
	font-size: 18px;
	color: #3a3520;
	margin-top: 2px;
}
/* Banda tinta: titular-cita */
.contra-ap__band-quote {
	background: var(--lv-blue);
	padding: 24px 30px 22px;
}
.contra-ap__headline {
	margin: 0;
	font-family: var(--f-headline);
	font-weight: 500;
	font-size: var(--fs-46);
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: #fff;
}
.contra-ap__credit {
	margin-top: 16px;
	font-family: var(--f-sans);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.5);
	text-align: right;
	display: none !important; /* ocultar crédito por ahora, hasta que haya foto real y se decida si se mantiene o no */
}

/* ==========================================================
   MOBILE  (≤ 640px)
   Cintillo con gutter lateral; foto y bandas a sangre.
   ========================================================== */
@media (max-width: 640px) {
	/* Carrusel compacto: sin flechas, cabecera y raíl con gutter */
	.contra-disc {
		margin-left: -16px;
		margin-right: -16px;
		width: auto;
	}

	.contra-disc__inner {
		padding: 16px 0 18px;
	}
	.contra-disc__head {
		padding: 0 16px;
		margin-bottom: 12px;
	}
	.contra-disc__nav {
		display: none;
	}
	.contra-disc__h2 {
		font-size: 21px;
	}
	.contra-disc__eyebrow {
		font-size: 10.5px;
		letter-spacing: 0.12em;
	}
	.contra-disc__rail {
		padding: 0 16px 4px;
		gap: 10px;
	}
	.contra-disc__card {
		flex: 0 0 168px;
		min-height: 104px;
		padding: 12px 13px 11px;
	}
	.contra-disc__card-title {
		font-size: 15px;
	}
	.contra-disc__card-go {
		width: 24px;
		height: 24px;
		margin-top: 8px;
	}

	.contra-ap {
		padding: 0;
	}
	.contra-ap__kicker {
		padding: 0 16px;
		margin-bottom: 12px;
	}
	.contra-ap__band-name {
		padding: 11px 16px;
	}
	.contra-ap__person {
		font-size: 20px;
	}
	.contra-ap__role {
		font-size: 14px;
	}
	.contra-ap__band-quote {
		padding: 16px 16px 15px;
	}
	.contra-ap__headline {
		font-size: 24px;
	}
	.contra-ap__credit {
		margin-top: 12px;
	}

	.contra-ap__photo,
	.contra-ap__bands {
		margin: 0 -16px;
		width: auto;
	}
}

/* — Integración en el container del artículo: sin doble centrado/padding — */
.contra-disc__inner,
.contra-ap {
	max-width: none;
	margin-inline: 0;
}

/* — Entradilla bajo la apertura (no venía en el handoff) — */
.contra-ap__deck {
	margin: 20px 0 0;
	font-family: var(--f-headline);
	font-weight: 100;
	font-size: var(--fs-21);
	line-height: 1.4;
	color: var(--deck);
	text-wrap: pretty;
	margin-left: var(--gutter); /* para compensar el sangrado de la foto a sangre en móvil */
}

/* — "Para saber más" (content-information-know-more), 1er bloque del cuerpo — */
.contra-knowmore {
	margin-block-end: var(--margin-block);
	padding: 25px;
	background: var(--lv-yellow);
}
.contra-knowmore__head {
	margin-bottom: 8px;
}
.contra-knowmore__eyebrow {
	display: 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(--lv-blue);
	margin-bottom: 4px;
}
.contra-knowmore__title {
	display: block;
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: var(--fs-20);
	color: var(--ink);
}
.contra-knowmore__text {
	margin: 0;
	font-family: var(--f-text);
	font-size: var(--fs-18);
	line-height: 1.55;
	color: var(--ink-soft);
}