/*
Theme Name: La Tribuna
Theme URI: https://latribunacolombia.co/
Description: Tema hijo editorial de Twenty Twenty-Five para La Tribuna Colombia. Portada, secciones, encabezado y pie de página construidos íntegramente con bloques nativos, bloques de consulta y patrones reutilizables, administrables desde Apariencia > Editor y Estilos globales.
Author: La Tribuna Colombia
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: la-tribuna
Tags: block-patterns, full-site-editing, news, editorial, blog, one-column, custom-colors, custom-menu, featured-images, block-styles, wide-blocks
*/

/* ---------------------------------------------------------------------------
   IMPORTANTE
   Este archivo NO define la maqueta ni el contenido de la portada.
   Solo contiene efectos que los bloques no pueden expresar por sí mismos
   (barra pegajosa, escala de grises, zoom al pasar el cursor, etc.).
   Todos los valores se leen de theme.json / Estilos globales mediante
   variables var(--wp--preset--*), de modo que al cambiar un color o una
   tipografía en Apariencia > Editor > Estilos, esto cambia con ella.
   --------------------------------------------------------------------------- */

/* Barra de menú pegajosa (clase "lt-nav" en el grupo del menú).
   Un ancestro con overflow oculto rompe position:sticky, por eso se
   fuerza overflow visible en los contenedores del tema padre. */
html,
body,
.wp-site-blocks,
.wp-site-blocks > main,
.wp-site-blocks > div {
	overflow: visible !important;
}

/* El contenedor de la parte de plantilla mide lo mismo que el menú, y eso
   impide que sticky tenga recorrido: se anula haciéndolo transparente al layout. */
.wp-block-template-part:has(> .lt-nav) {
	display: contents;
}

.lt-nav {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 90;
	margin: 0 !important;
}

body.admin-bar .lt-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .lt-nav {
		top: 46px;
	}
}

/* Por debajo de 600px la barra de administración de WordPress deja de ser fija
   y se va con el scroll: si se reserva su altura queda una franja vacía sobre
   el menú. Ahí el menú se pega al borde mismo de la pantalla. */
@media screen and (max-width: 600px) {
	body.admin-bar .lt-nav {
		top: 0;
	}
}

/* En móvil el menú es un botón: va ARRIBA del hero, no debajo.
   El orden visual se invierte sin tocar la plantilla, así que en el editor
   la sección sigue en su sitio y se puede mover como siempre. */
@media (max-width: 820px) {
	.wp-site-blocks main {
		display: flex;
		flex-direction: column;
	}

	.lt-nav {
		order: -1;
	}

	/* Sin barra de menú debajo, el hero recupera esa altura */
	.lt-hero {
		min-height: 66svh !important;
	}
}

/* Alto y separación de los enlaces del menú */
.lt-nav .wp-block-navigation__container > li > a,
.lt-nav .wp-block-navigation-item__content {
	padding-block: 8px;
}

/* Hero de portada: ocupa la pantalla menos el cabezote, de modo que el menú
   quede pegado al borde inferior; al hacer scroll el menú se ancla arriba.
   La altura mínima/máxima se puede cambiar desde el panel del bloque Cubierta. */
/* El hero ocupa la pantalla menos el cabezote y menos la barra de menú, de modo
   que el menú quede exactamente sobre el borde inferior. La medida exacta la
   calcula assets/hero-altura.js; este valor es el de respaldo. */
.lt-hero {
	min-height: var(--lt-hero-alto, 62svh) !important;
}

/* Retratos y fotografías en blanco y negro (estilo de bloque "Blanco y negro") */
.is-style-lt-grayscale img,
.lt-grayscale img {
	filter: grayscale(1) contrast(1.06);
}

/* Zoom suave de la imagen destacada dentro de una tarjeta */
.is-style-lt-card .wp-block-post-featured-image,
.lt-card .wp-block-post-featured-image {
	overflow: hidden;
}

.is-style-lt-card .wp-block-post-featured-image img,
.lt-card .wp-block-post-featured-image img {
	transition: transform 0.35s ease;
}

.is-style-lt-card:hover .wp-block-post-featured-image img,
.lt-card:hover .wp-block-post-featured-image img {
	transform: scale(1.025);
}

/* Estilo de bloque: Tarjeta blanca (grupo / columna) */
.is-style-lt-card {
	background-color: var(--wp--preset--color--white);
}

/* Estilo de bloque: Filo rojo superior */
.is-style-lt-topline {
	border-top: 5px solid var(--wp--preset--color--red);
}

/* Estilo de bloque: Regla superior de sección */
.is-style-lt-rule {
	border-top: 2px solid currentColor;
	padding-top: var(--wp--preset--spacing--30);
}

/* Subrayado editorial en titulares */
.wp-block-post-title a:hover,
.is-style-lt-underline a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Numeración de sección (01, 02, 03...) */
.lt-section-number {
	font-variant-numeric: tabular-nums;
}

/* Lista de especiales: filas separadas por línea */
.is-style-lt-divided-list li,
.is-style-lt-divided-list > .wp-block-post {
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.is-style-lt-divided-list li:last-child,
.is-style-lt-divided-list > .wp-block-post:last-child {
	border-bottom: 0;
}

/* Enlaces del menú y del pie: subrayado solo al pasar el cursor */
.wp-block-navigation a:hover,
.wp-block-page-list a:hover {
	color: var(--wp--preset--color--red);
}

/* El logotipo del pie se invierte a blanco (estilo de bloque "Logo en negativo") */
.is-style-lt-logo-invert img {
	filter: grayscale(1) brightness(0) invert(1);
}

/* Cuerpo de artículo: letra capital coherente con la marca */
.wp-block-post-content p.has-drop-cap:not(:focus)::first-letter {
	color: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
}

/* Accesibilidad: foco visible en toda la interfaz */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}


/* ---------------------------------------------------------------------------
   VISTA DE CATEGORÍA (archivo de sección)
   El primer artículo de la rejilla se agranda solo: no hay dos consultas ni
   contenido repetido, es la misma lista con la primera tarjeta destacada.
   --------------------------------------------------------------------------- */
.lt-archive {
	background-color: #f7f5f1;
}

.lt-archive-card .wp-block-post-title {
	letter-spacing: -0.025em;
	line-height: 1.03;
}

.lt-archive-card .wp-block-post-featured-image {
	overflow: hidden;
}

.lt-archive-card .wp-block-post-featured-image img {
	transition: transform 0.35s ease;
}

.lt-archive-card:hover .wp-block-post-featured-image img {
	transform: scale(1.025);
}

/* Primera tarjeta: dos columnas de ancho y dos de alto. Para que no quede un
   hueco debajo, la fotografía crece hasta llenar el alto sobrante —la misma
   solución que ya usaba el mosaico— en vez de dejar aire muerto.
   Se excluye .lt-mosaico, que tiene su propia composición más abajo. */
.lt-archive-cards:not(.lt-mosaico) > li:first-child {
	grid-column: span 2;
	grid-row: span 2;
	display: flex;
}

.lt-archive-cards:not(.lt-mosaico) > li:first-child > .lt-archive-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.lt-archive-cards:not(.lt-mosaico) > li:first-child .wp-block-post-featured-image {
	flex: 1 1 auto;
	min-height: 320px;
}

.lt-archive-cards:not(.lt-mosaico) > li:first-child .wp-block-post-featured-image img {
	aspect-ratio: auto !important;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.lt-archive-cards:not(.lt-mosaico) > li:first-child .wp-block-post-featured-image {
		flex: 0 0 auto;
		min-height: 0;
	}

	.lt-archive-cards:not(.lt-mosaico) > li:first-child .wp-block-post-featured-image img {
		aspect-ratio: 16 / 9 !important;
	}
}

/* Rejilla del final: la última nota de cada subsección pequeña, sin encabezado.
   Cada consulta es un hijo directo, así que la rejilla va sobre el contenedor. */
.lt-otras-subsecciones {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.lt-otras-subsecciones > * {
	margin: 0;
}

@media (max-width: 900px) {
	.lt-otras-subsecciones {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.lt-otras-subsecciones {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lt-archive-cards > li:first-child .wp-block-post-title {
	max-width: 850px;
	font-size: var(--wp--preset--font-size--4xl);
	line-height: 0.98;
}

.lt-archive-cards > li:first-child .wp-block-post-excerpt {
	max-width: 760px;
	font-size: var(--wp--preset--font-size--lg);
}

.lt-archive-cards.lt-archive-lead:not(.lt-mosaico) > li:first-child {
	grid-column: 1 / -1;
	grid-row: auto;
}

.lt-archive-cards.lt-archive-lead:not(.lt-mosaico) > li:first-child .wp-block-post-featured-image {
	min-height: 0;
}

.lt-archive-cards.lt-archive-lead:not(.lt-mosaico) > li:first-child .wp-block-post-featured-image img {
	aspect-ratio: 21 / 9 !important;
	height: auto;
}

/* Cinta de secciones: etiquetas en tinta, rojo y dorado alternados */
.lt-archive-ribbon ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lt-archive-ribbon li a {
	display: block;
	padding: 9px 13px 7px;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lt-archive-ribbon li:nth-child(3n+1) a {
	background-color: var(--wp--preset--color--red);
}

.lt-archive-ribbon li:nth-child(3n+2) a {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.lt-archive-ribbon li a:hover {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--red);
}

/* Puntos de vista: retratos cuadrados en blanco y negro, todas las fichas iguales */
.lt-archive-opinion .lt-archive-card img {
	object-position: top;
	filter: grayscale(1) contrast(1.06);
}

.lt-archive-opinion .lt-archive-cards > li:first-child {
	grid-column: span 1;
	grid-row: span 1;
}

.lt-archive-opinion .lt-archive-cards > li:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.03;
}

.lt-archive-opinion .lt-archive-cards > li:first-child .wp-block-post-excerpt {
	font-size: 16px;
}

/* Especiales: fondo tramado y filo rojo */
.lt-archive-especiales {
	background-color: var(--wp--preset--color--tinted);
}

.lt-archive-especiales .lt-archive-card {
	border-top-color: var(--wp--preset--color--red) !important;
}

@media (max-width: 800px) {
	.lt-archive-cards > li:first-child,
	.lt-archive-opinion .lt-archive-cards > li:first-child {
		grid-column: span 1;
		grid-row: span 1;
	}

	.lt-archive-cards > li:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--3xl);
	}
}

/* Entradilla de sección: nota grande a la izquierda y tres breves apiladas */
.lt-archive-lead > li:first-child {
	grid-row: span 3;
}

@media (max-width: 800px) {
	.lt-archive-lead > li:first-child {
		grid-row: span 1;
	}
}

/* ---------------------------------------------------------------------------
   MOSAICO DE SECCIÓN
   Una sola consulta y una sola lista: la primera nota ocupa media pantalla,
   las cuatro siguientes van en bloque de dos por dos, y el resto sigue de tres
   en tres. Así no se repite ninguna nota ni se pierde al paginar.
   --------------------------------------------------------------------------- */
.lt-mosaico.is-layout-grid {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.lt-mosaico > li {
	grid-column: span 4;
}

.lt-mosaico > li:first-child {
	grid-column: span 6;
	grid-row: span 2;
}

.lt-mosaico > li:nth-child(2),
.lt-mosaico > li:nth-child(3),
.lt-mosaico > li:nth-child(4),
.lt-mosaico > li:nth-child(5) {
	grid-column: span 3;
}

.lt-mosaico > li:nth-child(-n+5) .wp-block-post-excerpt {
	font-size: 15px;
}

@media (max-width: 1100px) {
	.lt-mosaico.is-layout-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.lt-mosaico > li,
	.lt-mosaico > li:first-child,
	.lt-mosaico > li:nth-child(2),
	.lt-mosaico > li:nth-child(3),
	.lt-mosaico > li:nth-child(4),
	.lt-mosaico > li:nth-child(5) {
		grid-column: span 3;
		grid-row: span 1;
	}
}

@media (max-width: 700px) {
	.lt-mosaico.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lt-mosaico > li,
	.lt-mosaico > li:first-child,
	.lt-mosaico > li:nth-child(2),
	.lt-mosaico > li:nth-child(3),
	.lt-mosaico > li:nth-child(4),
	.lt-mosaico > li:nth-child(5) {
		grid-column: span 1;
	}
}

/* La foto de la nota principal crece hasta llenar el alto de las dos filas:
   sin ese ajuste queda un hueco debajo del texto, porque el titular y el
   resumen son más cortos que las cuatro tarjetas de la derecha. */
.lt-mosaico > li:first-child {
	display: flex;
}

.lt-mosaico > li:first-child > .lt-archive-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.lt-mosaico > li:first-child .wp-block-post-featured-image {
	flex: 1 1 auto;
	min-height: 320px;
}

.lt-mosaico > li:first-child .wp-block-post-featured-image img {
	aspect-ratio: auto !important;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.lt-mosaico > li:first-child .wp-block-post-featured-image {
		flex: 0 0 auto;
		min-height: 0;
	}

	.lt-mosaico > li:first-child .wp-block-post-featured-image img {
		aspect-ratio: 16 / 9 !important;
	}
}

/* ---------------------------------------------------------------------------
   PUNTOS DE VISTA · directorio de columnistas
   Un retrato por autor, su nombre y el titular de su última columna. Las fichas
   se separan con filetes finos, no con tarjetas.
   --------------------------------------------------------------------------- */
.lt-columnistas {
	border-right: 1px solid #d3cdc4;
}

.lt-columnista {
	min-height: 330px;
	padding: 0 20px 34px;
	border-left: 1px solid #d3cdc4;
}

.lt-columnistas > .lt-columnista:nth-child(n+6) {
	padding-top: 34px;
	border-top: 1px solid #d3cdc4;
}

.lt-columnista .wp-block-post-author {
	display: block;
}

.lt-columnista .wp-block-post-author__avatar {
	display: block;
	margin: 0 0 10px;
}

.lt-columnista .wp-block-post-author__avatar img {
	display: block;
	width: min(132px, 78%);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top;
	filter: grayscale(1) contrast(1.06);
	transition: filter 0.3s ease, transform 0.3s ease;
}

.lt-columnista .wp-block-post-author__content {
	margin: 0;
}

.lt-columnista .wp-block-post-author__name {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.lt-columnista:hover .wp-block-post-author__avatar img {
	filter: grayscale(0) contrast(1);
	transform: translateY(-3px);
}

.lt-columnista:hover .wp-block-post-author__name a,
.lt-columnista .wp-block-post-title a:hover {
	color: var(--wp--preset--color--red);
}

@media (max-width: 1050px) {
	.lt-columnistas.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lt-columnistas > .lt-columnista:nth-child(n+4) {
		padding-top: 34px;
		border-top: 1px solid #d3cdc4;
	}
}

@media (max-width: 650px) {
	.lt-columnistas.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lt-columnista {
		min-height: 290px;
		padding: 0 14px 28px;
	}

	.lt-columnistas > .lt-columnista:nth-child(n+3) {
		padding-top: 28px;
		border-top: 1px solid #d3cdc4;
	}
}

/* ---------------------------------------------------------------------------
   ENTRADA GENERAL
   Migas de pan, titular a 1050 px, foto a 1120 px, firma con retrato y bio,
   cuerpo a 720 px con letra capital y "El dato" destacado.
   --------------------------------------------------------------------------- */
.lt-entrada {
	background-color: #f7f5f1;
}

.lt-migas .wp-block-post-terms a {
	color: var(--wp--preset--color--ink);
}

.lt-migas .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--red);
}

/* Firma: retrato de 54 px, "Por", nombre y biografía en una sola ficha */
.lt-firma-fila .wp-block-post-author {
	display: grid;
	grid-template-columns: 54px minmax(0, 420px);
	gap: 14px;
	align-items: center;
}

.lt-firma-fila .wp-block-post-author__avatar img {
	width: 54px;
	height: 54px;
	object-fit: cover;
	object-position: top;
	filter: grayscale(1) contrast(1.06);
}

.lt-firma-fila .wp-block-post-author__byline {
	margin: 0;
	color: #756f68;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.lt-firma-fila .wp-block-post-author__name {
	margin: 2px 0 4px;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.lt-firma-fila .wp-block-post-author__bio {
	margin: 0;
	color: #625e59;
	font-size: 13px;
	line-height: 1.35;
}

/* Cuerpo: letra capital y el bloque "El dato".
   El tamaño de los subtítulos NO se toca aquí: vive en theme.json para que el
   editor lo pueda cambiar. Los márgenes están en SUBTÍTULOS DENTRO DEL ARTÍCULO. */
.lt-cuerpo .wp-block-post-content p.has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 10px 10px 0 0;
	color: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 86px;
	font-weight: 600;
	line-height: 0.72;
}

@media (max-width: 700px) {
	.lt-firma-fila .wp-block-post-author {
		grid-template-columns: 48px minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   PUNTO DE VISTA
   Sin fotografía de apertura: la ficha del columnista sobre rojo hace de imagen.
   Cuerpo a 760 px con una columna lateral de puntos de vista recientes.
   --------------------------------------------------------------------------- */
.lt-opinion {
	background-color: #f7f5f1;
}

/* Ficha del columnista: retrato de 148 px y la biografía al lado, sobre rojo */
.lt-ficha-autor .wp-block-post-author {
	display: grid;
	grid-template-columns: 148px minmax(0, 540px);
	gap: 26px;
	align-items: center;
}

.lt-ficha-autor .wp-block-post-author__avatar img {
	width: 148px;
	height: 148px;
	object-fit: cover;
	object-position: top;
	filter: grayscale(1) contrast(1.08);
}

.lt-ficha-autor .wp-block-post-author__byline {
	margin: 0;
	color: #f2d28d;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.lt-ficha-autor .wp-block-post-author__name {
	margin: 2px 0 8px;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.02;
}

.lt-ficha-autor .wp-block-post-author__bio {
	margin: 0;
	color: #f4eae7;
	font-size: 15px;
	line-height: 1.45;
}

.lt-ficha-autor a:hover {
	color: #f2d28d;
}

/* Columnas recientes: numeradas 01, 02, 03… y pegadas al scroll */
.lt-recientes {
	position: sticky;
	top: 88px;
}

.lt-recientes .wp-block-post-template {
	counter-reset: lt-columna;
}

.lt-recientes .wp-block-post-template > li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 0 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid #d3cdc4;
	counter-increment: lt-columna;
}

.lt-recientes .wp-block-post-template > li::before {
	content: counter(lt-columna, decimal-leading-zero);
	grid-row: span 2;
	color: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

/* Del mismo autor: etiqueta a la izquierda y titular grande a la derecha */
.lt-lista-autor > li {
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid #d3cdc4;
}

@media (max-width: 900px) {
	.lt-ficha-autor .wp-block-post-author {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 18px;
	}

	.lt-ficha-autor .wp-block-post-author__avatar img {
		width: 110px;
		height: 110px;
	}

	.lt-recientes {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
   ESPECIAL (entrada a toda página)
   Portada oscura sobre la imagen destacada con el titular encima, y el cuerpo
   con la misma medida de lectura que las demás entradas.
   --------------------------------------------------------------------------- */
.lt-especial {
	background-color: #f7f5f1;
}

.lt-especial-portada .wp-block-post-title {
	max-width: 1000px;
	text-wrap: pretty;
}

.lt-especial-portada .wp-block-post-excerpt {
	max-width: 780px;
}

/* La sombra baja desde el centro para que el titular se lea sin apagar la foto */
.lt-especial-portada .wp-block-cover__background {
	background-image: linear-gradient(to top, rgba(18, 18, 19, 0.92) 0%, rgba(18, 18, 19, 0.55) 45%, rgba(18, 18, 19, 0.12) 100%);
	background-color: transparent !important;
	opacity: 1 !important;
}

/* El enlace "Más de…" de cada subsección va subrayado para que se note */
.lt-mas-de a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.lt-mas-de a:hover {
	color: var(--wp--preset--color--red);
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
   FILA DE COMPARTIR
   Etiqueta "Compartir" y seis botones redondos: WhatsApp, Facebook, X, Bluesky,
   Telegram y copiar enlace.
   --------------------------------------------------------------------------- */
.lt-compartir {
	display: flex;
	align-items: center;
	gap: 14px;
}

.lt-compartir-etiqueta {
	color: #756f68;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.lt-compartir-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lt-compartir-lista a,
.lt-compartir-lista button {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #b9b1a7;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lt-compartir-lista a:hover,
.lt-compartir-lista button:hover {
	border-color: var(--wp--preset--color--red);
	background-color: rgba(138, 61, 51, 0.08);
}

.lt-compartir-lista svg {
	display: block;
	width: 16px;
	height: 16px;
}

.lt-compartir-lista .lt-copiado {
	border-color: var(--wp--preset--color--red);
	background-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
}

/* Sobre la ficha roja de la columna, la fila cambia de color */
.lt-ficha-autor + .wp-block-group .lt-compartir-etiqueta {
	color: #756f68;
}

/* Retrato circular en la firma de la entrada general y del especial */
.lt-firma-fila .wp-block-post-author__avatar img {
	border-radius: 50%;
}

/* Enlace a las publicaciones del columnista, dentro de la ficha roja */
.lt-enlace-autor {
	margin: 14px 0 0;
	grid-column: 2;
}

.lt-enlace-autor a {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.lt-enlace-autor a:hover {
	color: #f2d28d;
}

.lt-ficha-autor {
	display: grid;
	grid-template-columns: 148px minmax(0, 540px);
	gap: 0 26px;
	align-items: center;
	justify-content: start;
}

.lt-ficha-autor .wp-block-post-author {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}

@media (max-width: 700px) {
	.lt-compartir {
		flex-wrap: wrap;
	}

	.lt-ficha-autor,
	.lt-ficha-autor .wp-block-post-author {
		grid-template-columns: 110px minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   SUBTÍTULOS DENTRO DEL ARTÍCULO

   Aquí NO se fija el tamaño: solo los márgenes y el aire alrededor. Los tamaños
   viven en theme.json (H2 34 · H3 28 · H4 24, con el cuerpo en 21) para que se
   puedan cambiar desde Apariencia > Editor > Estilos > Encabezados sin tocar
   código. Si se fijaran aquí, ese panel dejaría de funcionar.

   El titular de la nota manda: ningún subtítulo puede competirle.
   --------------------------------------------------------------------------- */
.wp-block-post-content h2 {
	margin: 48px 0 18px;
}

.wp-block-post-content h3 {
	margin: 38px 0 16px;
}

.wp-block-post-content h4 {
	margin: 32px 0 14px;
}

/* Divi dejaba los subtítulos como <h3><strong>: el negrita sobra y descuadra. */
.wp-block-post-content :is(h2, h3, h4, h5, h6) strong {
	font-weight: inherit;
}

.wp-block-post-content h5 {
	margin: 34px 0 14px;
	font-size: 24px;
	letter-spacing: -0.01em;
	line-height: 1.18;
}

.wp-block-post-content h6 {
	margin: 34px 0 12px;
	color: var(--wp--preset--color--red);
}

.wp-block-post-content > h2:first-child,
.wp-block-post-content > h3:first-child {
	margin-top: 0;
}

/* Los enlaces dentro del cuerpo van subrayados y en rojo, no como el resto */
.wp-block-post-content a {
	color: var(--wp--preset--color--red);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wp-block-post-content a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
   FICHA DEL COLUMNISTA EN SU PÁGINA DE ARCHIVO
   Retrato grande a la izquierda, biografía y redes a la derecha. Las redes
   salen del perfil del usuario: solo aparecen las que estén llenas.
   --------------------------------------------------------------------------- */
.lt-ficha-archivo {
	display: grid;
	grid-template-columns: 220px minmax(0, 640px);
	gap: 0 32px;
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

.lt-ficha-retrato img {
	display: block;
	width: 220px;
	height: 220px;
	object-fit: cover;
	object-position: top;
	filter: grayscale(1) contrast(1.06);
}

.lt-ficha-bio {
	margin: 0;
	font-size: 19px;
	line-height: 1.5;
	color: #3d3a37;
	text-wrap: pretty;
}

/* La fila de redes: etiqueta y botones redondos, igual que la de compartir */
.lt-redes-autor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
}

.lt-redes-etiqueta {
	margin-right: 6px;
	color: #756f68;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.lt-redes-autor a {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid #b9b1a7;
	border-radius: 50%;
	color: var(--wp--preset--color--ink);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lt-redes-autor a:hover {
	border-color: var(--wp--preset--color--red);
	background-color: rgba(138, 61, 51, 0.08);
}

.lt-redes-autor svg {
	display: block;
	width: 15px;
	height: 15px;
}

/* Dentro de la firma de una entrada la fila es más discreta */
.lt-firma-fila .lt-redes-autor,
.lt-ficha-autor + .wp-block-group .lt-redes-autor {
	margin-top: 10px;
}

.lt-firma-fila .lt-redes-autor .lt-redes-etiqueta {
	display: none;
}

/* Sobre el fondo rojo de el punto de vista */
.lt-ficha-autor .lt-redes-autor a {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--wp--preset--color--white);
}

.lt-ficha-autor .lt-redes-autor a:hover {
	border-color: var(--wp--preset--color--white);
	background-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 780px) {
	.lt-ficha-archivo {
		grid-template-columns: 130px minmax(0, 1fr);
		gap: 0 20px;
	}

	.lt-ficha-retrato img {
		width: 130px;
		height: 130px;
	}

	.lt-ficha-bio {
		font-size: 16px;
	}
}

/* Solo el icono, sin el nombre de la red: el logo ya dice de cuál se trata. */
.lt-redes-autor a {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 999px;
}