/*
Theme Name: Panorama Child
Theme URI: https://diariopanoramasj.com/
Template: broadnews
Author: Diario Panorama
Description: Child theme de BroadNews para Cuyovisión. Todas las personalizaciones de diseño y funcionalidad del sitio viven acá, nunca en el tema padre.
Version: 1.0.1
Text Domain: broadnews-child
*/

/* =========================================================
 * BOTÓN "VOLVER ARRIBA" - SVG limpio, sin pisar el fade nativo
 * del tema (jQuery ya lo muestra/oculta solo al scrollear;
 * por eso NO se toca "display" acá).
 * ========================================================= */

#scroll-up.secondary-color {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background-color: var(--cv-red) !important;
	border: none !important;
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 9999;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	transition: background-color 0.2s ease;
}

#scroll-up.secondary-color:hover {
	background-color: var(--cv-red-dark) !important;
}

@media (max-width: 782px) {
	#scroll-up.secondary-color {
		width: 40px !important;
		height: 40px !important;
		bottom: 16px;
		right: 16px;
		background-size: 16px 16px;
	}
}

/* =========================================================
 * SISTEMA DE DISEÑO - paleta y tipografía únicas del sitio
 * ========================================================= */

:root {
	--cv-black: #0b0b0b;
	--cv-red: #01306b;
	--cv-red-dark: #002158;
	--cv-text: #1a1a1a;
	--cv-text-muted: #555555;
	--cv-border: #e5e5e5;
	--cv-font-heading: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--cv-font-body: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* El tema padre tiene decenas de reglas puntuales que fijan otras
 * tipografías (ej. "Jost" en el título del sitio) con más especificidad
 * que un cambio normal. Se fuerza Roboto en todo, sin excepciones. */
* {
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* =========================================================
 * HEADER - se dejó el fondo natural del tema (imagen con velo
 * oscuro traslúcido) para que el logo PNG (bordes transparentes)
 * se vea integrado en vez de recortado sobre un negro sólido.
 * ========================================================= */

/* Título del sitio: accesible para lectores de pantalla y SEO,
 * pero oculto visualmente (el logo ya lo dice). */
.site-title {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	display: block !important;
}

/* =========================================================
 * BANNERS - se adaptan según el formato detectado de cada imagen
 * ========================================================= */

.cv-banners-group {
	display: block;
	width: 100%;
	margin: 28px 0;
}

/* Antes tenía fondo gris + padding fijo para "contener" cualquier
 * banner, pero eso hacía que un banner chico o de bajo contraste
 * quedara adentro de una caja gris que ocupaba todo el ancho del
 * bloque, tapando espacio de la página. Se saca el fondo y el padding:
 * el banner (grande o chico) queda solo, centrado, sin nada detrás. */
.cv-banner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.cv-banner img,
.cv-banner video {
	max-width: 100%;
	height: auto;
	display: block;
}

.cv-banner-media {
	display: block;
	max-width: 100%;
}

/* Con imagen/video distinto para móvil: se arman dos bloques y CSS
 * muestra uno solo según el ancho de pantalla. */
.cv-banner-media-mobile {
	display: none;
}

/* Horizontal (leaderboard tipo 1200x150 / 970x90): ocupa el ancho del bloque */
.cv-banner--horizontal img,
.cv-banner--horizontal video {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Cuadrado / rectángulo medio: no se estira, se centra sobre el fondo neutro */
.cv-banner--cuadrado img,
.cv-banner--cuadrado video {
	max-width: 320px;
}

/* Vertical (skyscraper): se limita en ancho para no romper columnas */
.cv-banner--vertical img,
.cv-banner--vertical video {
	max-width: 220px;
}

/* Relleno de AdSense cuando no hay banner propio vendido para el lugar:
 * mismo ancho/centrado que un banner horizontal propio, para que no se
 * note la diferencia. */
.cv-banner--adsense {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.cv-banner--adsense ins.adsbygoogle {
	display: block;
	width: 100%;
}

/* Banner móvil específico: oculto en escritorio */
.cv-banner--mobile-only {
	display: none;
}

@media (max-width: 782px) {
	.cv-banners-group {
		margin: 20px 0;
	}
	.cv-banner--mobile-only {
		display: flex;
		width: 100%;
	}
	.cv-banner--horizontal img,
	.cv-banner--horizontal video {
		max-width: 100%;
	}
	.cv-banner--vertical img,
	.cv-banner--vertical video,
	.cv-banner--cuadrado img,
	.cv-banner--cuadrado video {
		max-width: 80%;
	}
	.cv-banner-media-desktop {
		display: none;
	}
	.cv-banner-media-mobile {
		display: block;
	}
}

/* =========================================================
 * PORTADA EDITORIAL
 * ========================================================= */

/* El contenedor padre (.container-wrapper) ya aplica su propio
 * padding de 20px a los 1440px del sitio (mismo que usa el footer).
 * Un padding propio acá sumaba 16px más solo en la portada, corriendo
 * las tarjetas 16px a la derecha respecto del footer/header. */
.cv-homepage {
	max-width: 1440px;
	margin: 0 auto;
}

/* Causa raíz de bloques que no ocupan todo el ancho (ej. Instagram
 * quedaba con un hueco vacío al lado): el tema padre usa
 * ".section-block-upper" (compartida con single/archivo/búsqueda,
 * por eso no se toca esa clase sola) con display:flex + wrap, pensado
 * para layouts de una sola fila. Ahí, el ancho de cada sección
 * depende de su propio contenido en vez de ocupar toda la fila — una
 * sección con contenido angosto (como la grilla de Instagram) nunca
 * se estira sola. Se vuelve a un stack vertical normal (display:block)
 * solo para la combinación exacta usada en la portada. */
.cv-homepage.section-block-upper {
	display: block !important;
}

/* --- En vivo (YouTube): solo aparece cuando hay transmisión real --- */

.cv-live-section {
	margin: 24px 0 32px;
	background: var(--cv-black);
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cv-live-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.cv-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cv-red);
	color: #fff;
	font-weight: 900;
	font-size: 13px;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	border-radius: 20px;
	flex-shrink: 0;
}

.cv-live-dot {
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	animation: cv-live-pulse 1.5s ease-in-out infinite;
}

@keyframes cv-live-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

.cv-live-title {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.cv-live-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
}

.cv-live-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 782px) {
	.cv-live-section {
		padding: 14px;
		margin: 16px 0 24px;
	}
	.cv-live-title {
		font-size: 15px;
	}
}

/* El tema padre topea el ancho general del sitio (header, footer, notas)
 * en 1180-1200px vía .container-wrapper, con reglas muy específicas por
 * contexto (.elementor-default .container-wrapper, etc.) que pisan un
 * override simple. Se usa !important para ganar siempre, sin tocar el
 * archivo del padre.
 * Etapa 6: de 1360 a 1440px — Tiempo de San Juan (referencia pedida) usa
 * ~1560-1570px de contenido en una pantalla de 1920px (~82% del ancho);
 * este primer paso es más conservador a propósito porque es el cambio de
 * mayor riesgo visual. Si funciona bien se puede llevar más cerca de ese
 * nivel en un paso posterior, junto con la redistribución de la zona
 * principal (punto 1 completo). */
.container-wrapper {
	max-width: 1440px !important;
}

/* El cuerpo de la nota mantiene un ancho de lectura cómodo aunque el
 * layout general sea más ancho (líneas de texto no demasiado largas). */
.entry-content.read-details {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

/* Mismo CSS viejo de arriba: `.entry-content` (sin más contexto) también
 * está en esa lista genérica y le mete al cuerpo de la nota un fondo
 * blanco + sombra + padding + margin-bottom no buscados, encima del
 * ancho de lectura ya definido. Se neutraliza con más especificidad. */
.entry-content.read-details {
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin-bottom: 0;
}

/* --- Clima y dólar: dos módulos separados --- */

.cv-info-modules {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 20px;
	margin: 36px 0;
	width: 100%;
}

.cv-weather-module,
.cv-dollar-module {
	background: var(--cv-black);
	border-radius: 8px;
	padding: 16px 22px;
	border-top: 3px solid var(--cv-red);
}

.cv-weather-module {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cv-weather-icon {
	font-size: 42px;
	line-height: 1;
}

.cv-weather-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cv-weather-place {
	color: #999;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cv-weather-temp {
	color: #fff;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.1;
}

.cv-weather-desc {
	color: #ccc;
	font-size: 13px;
}

.cv-dollar-title {
	display: block;
	color: #999;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}

.cv-dollar-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cv-dollar-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 12px;
}

.cv-dollar-row:first-child {
	padding-top: 0;
}

.cv-dollar-row + .cv-dollar-row {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cv-dollar-name {
	flex: 0 0 64px;
	display: inline-block;
	color: #fff;
	background: var(--cv-red);
	border-radius: 4px;
	font-weight: 700;
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 0;
}

.cv-dollar-figures {
	display: flex;
	align-items: baseline;
	gap: 28px;
}

.cv-dollar-figure {
	display: flex;
	flex-direction: column;
}

.cv-dollar-figure strong {
	color: #fff;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.1;
}

.cv-dollar-figure small {
	color: #999;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

@media (max-width: 782px) {
	.cv-info-modules {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.cv-weather-icon {
		font-size: 34px;
	}

	.cv-weather-temp {
		font-size: 22px;
	}
}

.cv-section {
	margin: 36px 0;
}

.cv-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 3px solid var(--cv-black);
	padding-bottom: 8px;
	margin-bottom: 18px;
}

.cv-section-title {
	font-family: var(--cv-font-heading);
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

.cv-section-more {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--cv-red);
	transition: color 0.2s ease;
}

.cv-section-more:hover {
	color: var(--cv-red-dark);
	text-decoration: underline;
}

.cv-section-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* --- Tarjeta genérica --- */

.cv-card {
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease;
}

.cv-card:hover {
	transform: translateY(-2px);
}

/* Causa raíz de las tarjetas descuadradas: un CSS viejo (Additional CSS,
 * previo a este sistema de tarjetas) le pone a CUALQUIER <article> del
 * sitio fondo blanco + sombra + padding:20px + margin-bottom:30px, y un
 * hover propio (scale) que compite con el nuestro (translateY). Como
 * cada .cv-card ES un <article>, arrastraba esos 50px extra de forma
 * impredecible entre tarjetas. Se neutraliza acá con más especificidad
 * (article.cv-card le gana a article solo) en vez de tocar ese CSS
 * compartido, que puede estar en uso en otras páginas no revisadas en
 * esta etapa (archivos de categoría, por ejemplo). */
article.cv-card {
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin-bottom: 0;
}

article.cv-card:hover {
	transform: translateY(-2px);
	box-shadow: none;
}

.cv-card-image-link {
	display: block;
}

.cv-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cv-border);
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease;
}

.cv-card:hover .cv-card-image {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.cv-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform 0.3s ease;
}

.cv-card:hover .cv-card-image img {
	transform: scale(1.03);
}

/* Sin imagen destacada: se muestra el isotipo en vez de un gris vacío */
.cv-card-image--empty {
	background: var(--cv-black) url('https://cuyovision.com/wp-content/uploads/2026/04/cropped-Logos-CuyoVisiondsfgvdfsgffed-3.png') no-repeat center center;
	background-size: 40% auto;
}

.cv-card-body {
	padding-top: 10px;
}

.cv-card-cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cv-red);
	margin-bottom: 10px;
}

/* La categoría de las tarjetas (home, cv-card-cat) usa var(--cv-red)
 * (navy #01306b) sin condicional de modo — en dark mode se pierde
 * contra el fondo casi negro, mismo caso que ya se corrigió para la
 * volanta de categoría en la nota individual. */
body.aft-dark-mode .cv-card-cat {
	color: #ffffff !important;
}

body.aft-dark-mode .cv-card-cat:hover {
	color: #e0e0e0 !important;
}

.cv-card-title {
	margin: 0;
	font-family: var(--cv-font-heading);
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cv-card-title a {
	color: var(--cv-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cv-card-title a:hover {
	color: var(--cv-red);
}

.cv-card-excerpt {
	font-size: 14px;
	color: #555;
	line-height: 1.5;
	margin-top: 8px;
}

/* --- Hero: noticia principal + secundarias --- */

.cv-hero {
	margin-top: 20px;
}

.cv-hero-grid {
	display: grid;
	grid-template-columns: 7fr 3fr;
	gap: 28px;
}

.cv-hero-main .cv-card-image {
	aspect-ratio: 16 / 9;
}

.cv-hero-main .cv-card-title {
	font-size: 30px;
	line-height: 1.2;
}

.cv-hero-secondary {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cv-hero-secondary .cv-card {
	flex-direction: row;
	gap: 12px;
}

.cv-hero-secondary .cv-card-image-link {
	flex: 0 0 120px;
}

.cv-hero-secondary .cv-card-image {
	aspect-ratio: 1 / 1;
}

.cv-hero-secondary .cv-card-body {
	padding-top: 0;
}

.cv-hero-secondary .cv-card-title {
	font-size: 15px;
}

/* --- Video --- */

.cv-video-placeholder {
	display: block;
	text-align: center;
	padding: 40px 20px;
	background: var(--cv-black);
	color: #fff;
	font-weight: 700;
	transition: background 0.2s ease;
	text-decoration: none;
	border-radius: 4px;
}

.cv-video-placeholder:hover {
	background: var(--cv-red);
}

.cv-video-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.cv-video-card {
	display: block;
	text-decoration: none;
	color: var(--cv-text);
}

.cv-video-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: var(--cv-border);
}

.cv-video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.cv-video-card:hover .cv-video-thumb img {
	transform: scale(1.03);
}

.cv-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(11, 11, 11, 0.75);
}

.cv-video-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

.cv-video-title {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

/* --- Instagram: el plugin siempre trae 20 posteos; se muestran solo
 * los primeros 4 (una fila prolija) y se oculta "Load More" para que el
 * bloque no se haga larguísimo, sobre todo en móvil. El plugin trae su
 * propio encabezado (avatar+bio) y botón "Follow"; se ocultan porque ya
 * tenemos nuestro propio encabezado de sección consistente con el resto
 * del sitio (título + link @cuyovision). --- */
#sb_instagram #sbi_images .sbi_item:nth-child(n+5) {
	display: none !important;
}

#sb_instagram .sbi_load_btn,
#sb_instagram .sb_instagram_pagination,
#sb_instagram .sb_instagram_header,
#sb_instagram .sbi_follow_btn {
	display: none !important;
}

#sbi_images {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
}

#sb_instagram .sbi_item {
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#sb_instagram .sbi_photo_wrap {
	overflow: hidden;
}

#sb_instagram .sbi_photo img {
	transition: transform 0.3s ease;
}

#sb_instagram .sbi_photo:hover img {
	transform: scale(1.06);
}

@media (max-width: 782px) {
	#sbi_images {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* --- Responsive --- */

@media (max-width: 1024px) {
	.cv-section-grid,
	.cv-video-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 782px) {
	.cv-hero-grid {
		grid-template-columns: 1fr;
	}
	.cv-hero-main .cv-card-title {
		font-size: 24px;
	}
	.cv-section-grid,
	.cv-video-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.cv-section-grid,
	.cv-video-grid {
		grid-template-columns: 1fr;
	}
	.cv-hero-secondary .cv-card {
		flex-direction: row;
	}
}

/* =========================================================
 * FOOTER - 3 columnas (logo/descripcion, secciones, redes)
 * ========================================================= */

.site-footer .primary-footer-area .widget {
	margin-bottom: 24px;
}

/* El tema aplica fondo blanco sutil + sombra + padding a todo widget
 * (pensado para fondos claros); en el footer oscuro se ve como un
 * recuadro. Se neutraliza acá para que las 3 columnas apoyen directo
 * sobre el fondo negro. */
.site-footer .widget {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Las 3 columnas arrancan a la misma altura. */
.site-footer .primary-footer-area {
	display: flex;
	flex-direction: column;
}

.cv-footer-brand .cv-footer-logo {
	max-width: 140px;
	height: auto;
	margin-bottom: 12px;
	/* El footer es oscuro (#222) siempre, claro u oscuro el sitio.
	 * El logo es texto negro sobre fondo transparente — sin esto
	 * queda invisible, mismo caso que el logo del header. */
	filter: brightness(0) invert(1);
}

/* Logo chico a la izquierda del copyright, en la última franja del
 * footer (fondo oscuro en todo el sitio, por eso el mismo invert que
 * se usa en dark mode del header). */
.cv-footer-info-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.cv-site-footer-logo .custom-logo {
	max-width: 110px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.cv-footer-brand p {
	font-size: 13px;
	line-height: 1.6;
	color: #ccc;
	margin: 0;
}

.footer-second-widgets-section ul,
.cv-footer-social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-second-widgets-section li,
.cv-footer-social li {
	margin-bottom: 8px;
}

.footer-second-widgets-section a,
.cv-footer-social a {
	color: #ddd;
	font-size: 13px;
	text-decoration: none !important;
}

.footer-second-widgets-section a:hover {
	color: #fff;
	text-decoration: underline;
}

.cv-footer-social a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	transition: color 0.2s ease;
}

.cv-footer-social li {
	margin-bottom: 12px;
}

.cv-footer-social a svg {
	flex-shrink: 0;
	fill: currentColor;
}

.cv-footer-social a:hover {
	color: var(--cv-red) !important;
	text-decoration: none !important;
}

/* El tema padre le pone un border-bottom rojo a los links de widgets tipo
 * "widget_text" (clase heredada que WordPress también le pone a los widgets
 * de HTML personalizado como este). No es un subrayado de texto, por eso el
 * fix anterior de text-decoration no lo tapaba. Se anula sin tocar el padre. */
.cv-footer-social a {
	border-bottom: none !important;
}

.site-footer .widget-title {
	color: #999;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 14px;
}

/* =========================================================
   NOTA INDIVIDUAL (single post)
========================================================= */

/* Más aire entre la etiqueta de categoría y el título, consistente
 * con el espaciado que ya usan las tarjetas de la home. */
.entry-header .figure-categories {
	margin-bottom: 14px;
}

/* Volanta de categoría de la nota: mismo lenguaje visual que la
 * etiqueta de categoría de las tarjetas (texto rojo, sin recuadro),
 * en vez del chip gris que traía el tema por defecto. */
.entry-header .cat-links a {
	background: transparent !important;
	color: var(--cv-red) !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* La regla de arriba no alcanzaba a pisar el chip con fondo sólido:
 * el markup de esta nota trae la clase .af-cat-widget-carousel (pensada
 * para el carrusel de categorías, con fondo de color) también en el
 * encabezado de la nota individual, y esa regla del tema tiene más
 * especificidad. Se repite el selector completo agregando .entry-header
 * para ganarle en especificidad sin tocar el carrusel real. */
.entry-header .af-cat-widget-carousel a.broadnews-categories.category-color-1 {
	background-color: transparent !important;
	color: var(--cv-red) !important;
	padding: 0 !important;
	border-bottom: 2px solid var(--cv-red) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.entry-header .af-cat-widget-carousel a.broadnews-categories.category-color-1:hover {
	color: #002158 !important;
	border-bottom-color: #002158 !important;
}

/* Las dos reglas de arriba usan var(--cv-red) (navy #01306b) sin
 * condicionar por modo — en dark mode ese azul se pierde contra el
 * fondo casi negro. Se pasa a blanco, mismo patrón que el resto de
 * los textos en dark mode. */
body.aft-dark-mode .entry-header .cat-links a,
body.aft-dark-mode .entry-header .af-cat-widget-carousel a.broadnews-categories.category-color-1 {
	color: #ffffff !important;
	border-bottom-color: #ffffff !important;
}

body.aft-dark-mode .entry-header .cat-links a:hover,
body.aft-dark-mode .entry-header .af-cat-widget-carousel a.broadnews-categories.category-color-1:hover {
	color: #e0e0e0 !important;
	border-bottom-color: #e0e0e0 !important;
}

/* Imágenes sueltas del cuerpo de la nota: sin regla propia quedaban
 * pegadas a la izquierda cuando son más angostas que la columna de
 * lectura. Se centran (salvo que el autor las haya alineado a
 * izquierda/derecha a propósito) con margen vertical parejo. */
.entry-content img {
	height: auto;
	max-width: 100%;
	border-radius: 4px;
	margin-top: 24px;
	margin-bottom: 24px;
}

/* Blindado con !important: WordPress envuelve una imagen suelta del
 * editor en <figure class="wp-block-image"> sin ninguna clase de
 * alineación cuando el autor no la marca explícitamente como
 * centrada, y ni el bloque ni la imagen quedan centrados por defecto.
 * Se fuerza siempre, salvo alineación explícita a izquierda/derecha. */
.entry-content img:not(.alignleft):not(.alignright) {
	display: block !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.entry-content .wp-caption,
.entry-content figure:not(.alignleft):not(.alignright) {
	max-width: 100% !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Línea de autor / fecha / tiempo de lectura: prolija, con separadores
 * sutiles en vez de amontonarse. */
.aft-post-excerpt-and-meta .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.entry-meta .author-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--cv-text-muted);
}

.entry-meta .item-metadata {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.entry-meta .item-metadata + .item-metadata::before {
	content: "\00b7";
	margin-right: 6px;
	color: var(--cv-border);
	font-weight: 700;
}

/* El tema tiene 2 reglas viejas contradictorias para "a:focus" (una
 * pone underline, otra lo saca) que compiten con el outline nativo del
 * navegador al hacer click — el resultado visual es un doble
 * subrayado. Se fuerza sin underline ni outline en todos los estados,
 * solo para el link del autor. También un poco más de aire entre el
 * avatar y el nombre. */
.entry-meta .posts-author a {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--cv-text-muted);
	text-decoration: none !important;
	border-bottom: none !important;
	outline: none !important;
}

.entry-meta .posts-author a:hover,
.entry-meta .posts-author a:focus,
.entry-meta .posts-author a:active,
.entry-meta .posts-author a:visited {
	color: var(--cv-red);
	text-decoration: none !important;
	border-bottom: none !important;
	outline: none !important;
}

/* Cada autor con Gravatar real (ver functions.php, filtro
 * pre_get_avatar_data) muestra su propia foto; el que no tiene, cae
 * a nuestro respaldo (círculo rojo con "CV") — mismo tamaño para
 * los dos casos, así no se distingue cuál es cuál por el tamaño. */
.entry-meta .posts-author img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--cv-border);
	object-fit: cover;
}

.entry-meta .min-read {
	color: var(--cv-text-muted);
}

/* Botones de compartir: círculos prolijos con ícono, no texto pelado. */
.aft-social-share {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0;
}

/* !important: el tema fuerza .entry-header-details .aft-social-share a
 * a 30px con display:inline-block (más específico que un selector
 * simple), y como esa regla solo apunta a <a>, el botón "copiar"
 * (un <button>) quedaba con un tamaño distinto — de ahí lo dispar. */
.aft-social-share a,
.aft-social-share .cv-share-copy {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	line-height: normal !important;
	border-radius: 50%;
	background: #f2f2f2;
	color: var(--cv-text);
	font-size: 16px;
	border: none;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.aft-social-share a svg,
.aft-social-share .cv-share-copy svg {
	display: block;
}

/* Facebook y X tienen fondo azul/negro (heredado del tema) pero el
 * ícono heredaba un color casi negro (var(--cv-text)) — invisible
 * sobre esos fondos. Se fuerza blanco en los <a> (Facebook, X,
 * WhatsApp); "copiar" ya es blanco sobre rojo por su propia regla. */
.aft-social-share a {
	color: #fff !important;
}

.aft-social-share a:hover,
.aft-social-share .cv-share-copy:hover {
	background: var(--cv-red);
	color: #fff;
	transform: translateY(-2px);
}

.aft-social-share .aft-jpshare {
	display: none;
}

.aft-social-share .cv-share-whatsapp {
	background: #25d366;
	color: #fff;
}

.aft-social-share .cv-share-whatsapp:hover {
	background: #1da851;
}

/* BUG REAL encontrado: esta regla ponía la cabecera (categoría, título,
 * meta, compartir) y la imagen destacada en 900px, mientras el cuerpo
 * del texto (.entry-content.read-details, más abajo) está en 780px.
 * Como cada uno se centraba por separado con un ancho distinto, NO
 * comparten el mismo borde izquierdo: el cuerpo/imagen quedaba corrido
 * 60px a la derecha respecto al título. Eso es lo que se veía como
 * "las fotos descentradas del texto". Se iguala todo a 780px, el mismo
 * ancho que ya usa el cuerpo, para que quede una sola columna prolija. */
.entry-header .read-details,
.read-img {
	max-width: 780px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Imagen destacada de la nota: alto controlado y recorte parejo (el
 * tamaño "full" original que usa el tema puede ser de cualquier
 * proporción). Solo aplica a la destacada del single, no a las
 * miniaturas de "relacionadas" (que tienen su propia regla más abajo,
 * con más especificidad). object-fit necesita una caja con alto fijo
 * para recortar de verdad; por eso aspect-ratio en el contenedor,
 * no max-height en la imagen. */
.post-thumbnail.full-width-image {
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: 6px;
}

.post-thumbnail.full-width-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Relacionadas / "Quizá te interese": mismo lenguaje visual que las
 * tarjetas del home (tarjeta prolija con hover), sin rehacer la grilla
 * del tema. */
/* Las miniaturas de "relacionadas"/"Quizá te interese" venían con el
 * layout nativo del tema: una fila angosta horizontal (foto chica +
 * texto al lado), muy distinto al lenguaje visual del resto del sitio.
 * Se convierten en tarjetas verticales (imagen 16:9 arriba, texto
 * abajo), iguales en espíritu a las tarjetas de la home. */
.trending-posts-item .read-single {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trending-posts-item .read-single:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.trending-posts-item .read-img {
	float: none !important;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
}

.trending-posts-item .read-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.3s ease;
}

.trending-posts-item .read-single:hover .read-img img {
	transform: scale(1.05);
}

.trending-posts-item .col-66.read-details {
	float: none !important;
	width: 100% !important;
	padding: 14px !important;
}

.trending-posts-item .read-title h4 {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
}

/* La tarjeta de "relacionadas" siempre tiene fondo blanco (a propósito,
 * ver arriba), pero el tema padre le pone texto blanco al título en
 * modo oscuro (pensado para tarjetas con fondo oscuro) — texto blanco
 * sobre fondo blanco, invisible. Se fuerza el color oscuro siempre,
 * sin importar el modo claro/oscuro del resto del sitio. */
.trending-posts-item .read-title a {
	color: var(--cv-text) !important;
	text-decoration: none;
}

.trending-posts-item .read-title a:hover {
	color: var(--cv-red) !important;
}

@media (max-width: 782px) {
	.entry-meta .author-links {
		font-size: 12px;
	}

	.aft-social-share a,
	.aft-social-share .cv-share-copy {
		width: 36px !important;
		height: 36px !important;
	}
}

/* =========================================================
   HEADER: BARRA SUPERIOR EN MÓVIL
========================================================= */

/* En móvil la barra de fecha/redes se apila y las redes pueden terminar
 * mostrándose antes que la fecha o amontonadas. Se ocultan acá (quedan
 * igual disponibles y funcionando en el footer, "Seguinos") y la barra
 * superior en móvil se queda solo con fecha/hora, prolija. */
@media screen and (max-width: 992px) {
	.top-header .top-bar-right {
		display: none;
	}

	.top-header .top-bar-left {
		justify-content: center;
		margin-bottom: 0;
	}
}

/* =========================================================
   HEADER: LOGO CENTRADO (solo escritorio)
========================================================= */

/* .af-middle-container es flex con justify-content:space-between y solo
 * 2 hijos (.logo y .header-promotion): el logo queda pegado al borde
 * izquierdo por diseño del tema (pensado para header "side", no
 * centrado), nunca estuvo matemáticamente centrado. Se saca el logo del
 * flujo flex y se centra respecto al ancho total del header, sin tocar
 * el archivo del padre. Solo en desktop: en el breakpoint mobile del
 * tema (992px) el header cambia a otro layout que no se toca. */
@media screen and (min-width: 993px) {
	.af-middle-container {
		position: relative;
		/* Al sacar el logo del flujo (position:absolute) el contenedor
		 * pierde la altura que antes le daba el logo como hijo flex
		 * normal. Sin este min-height se achica y el logo, ahora
		 * flotante, termina tapando la barra de arriba. */
		min-height: 180px;
	}

	.af-middle-container .logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.af-middle-container .header-promotion {
		margin-left: auto;
	}
}

/* =========================================================
   HEADER: CENTRAR TEXTO EN EL FONDO ROJO DEL MENÚ
========================================================= */

/* El tema padre fuerza height:49px en los links del menú de escritorio,
 * además de padding:15px arriba/abajo. El sitio usa box-sizing:border-box
 * de forma global (html{box-sizing:border-box}), así que esos 49px son el
 * alto TOTAL del botón, no el del contenido: el texto queda pegado arriba
 * en vez de centrado, y el fondo rojo de hover/activo se ve desparejo.
 * En vez de intentar calcular a mano cuánto mide realmente el texto
 * (depende de la fuente, se puede desajustar), se usa flexbox: centra el
 * contenido sea cual sea su alto real, sin tocar el height ni el padding
 * originales, así el alto total del botón no cambia y no se descuadra la
 * barra contra el buscador/Suscribite/toggle. Scope al mismo media query
 * que usa el tema para no tocar el menú mobile. */
@media screen and (min-width: 993px) {
	.main-navigation .menu-desktop > li > a,
	.main-navigation .menu-desktop > ul > li > a {
		display: flex;
		align-items: center;
	}
}

/* =========================================================
   FRANJA CLARA ARRIBA DE LAS MINIATURAS DE TARJETAS
========================================================= */

/* WordPress le agrega la clase wp-post-image a toda miniatura destacada
 * (the_post_thumbnail()); el tema padre le pone margin:1em auto (pensado
 * para imágenes sueltas del editor alineadas a "centro") y solo lo
 * cancela dentro de .post-thumbnail (nota individual). En nuestras
 * tarjetas (.cv-card-image, usadas por cv_post_card() para destacada,
 * secundarias, últimas noticias y secciones) queda un margen de 16px
 * arriba y abajo de la imagen: arriba expone el fondo claro del
 * contenedor, abajo lo recorta el overflow:hidden. Se anula en el
 * origen (mismo selector que el tema, gana por venir después en el
 * child theme) para cualquier lugar donde aparezca esa clase. */
img.wp-post-image {
	margin: 0;
}

/* =========================================================
   BUSCADOR: PÁGINA DE RESULTADOS
========================================================= */

.cv-search-header {
	margin-bottom: 8px;
}

.cv-search-title {
	font-family: var(--cv-font-heading);
	font-size: 24px;
	font-weight: 800;
	margin: 0;
}

.cv-search-quicklinks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0 36px;
}

.cv-search-quicklink {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--cv-border);
	border-radius: 6px;
	color: var(--cv-text) !important;
	text-decoration: none;
	font-size: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cv-search-quicklink:hover {
	border-color: var(--cv-red);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cv-search-quicklink-type {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: #fff;
	background: var(--cv-red);
	padding: 3px 7px;
	border-radius: 3px;
}

.cv-search-empty {
	margin-bottom: 36px;
}

.cv-search-empty-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.cv-search-empty-cat {
	padding: 8px 14px;
	background: var(--cv-black);
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	transition: background 0.2s ease;
}

.cv-search-empty-cat:hover {
	background: var(--cv-red);
	color: #fff;
}

.cv-pagination {
	margin: 32px 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* Mismo problema que las tarjetas de "relacionadas": fondo blanco fijo
 * a propósito, pero el tema padre le pone texto blanco en modo oscuro
 * — números y "Siguiente" invisibles. Color forzado con !important. */
.cv-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid var(--cv-border);
	color: var(--cv-text) !important;
	text-decoration: none;
	font-size: 14px;
}

.cv-pagination .page-numbers.current {
	background: var(--cv-red);
	border-color: var(--cv-red);
	color: #fff !important;
}

.cv-pagination .page-numbers:hover:not(.current) {
	border-color: var(--cv-red);
}

@media (max-width: 782px) {
	.cv-search-quicklinks {
		flex-direction: column;
	}
}

/* =========================================================
   BUSCADOR: SUGERENCIAS EN VIVO
========================================================= */

/* .af-search-form ya es un panel flotante (position:absolute, fondo
 * blanco) del tema padre — el bloque de sugerencias se agrega ADENTRO
 * de ese mismo panel, no hace falta armar uno nuevo. */
.cv-livesearch-results {
	display: none;
	margin-top: 10px;
	max-height: 340px;
	overflow-y: auto;
}

.cv-livesearch-results.is-open {
	display: block;
}

.cv-livesearch-quick,
.cv-livesearch-notes {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.cv-livesearch-quick {
	border-bottom: 1px solid var(--cv-border);
	padding-bottom: 8px;
}

.cv-livesearch-quick a,
.cv-livesearch-notes a {
	display: block;
	padding: 6px 4px;
	color: var(--cv-text);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.3;
}

.cv-livesearch-quick a:hover,
.cv-livesearch-notes a:hover {
	color: var(--cv-red);
}

.cv-livesearch-cat {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cv-red);
	font-weight: 700;
}

.cv-livesearch-empty {
	font-size: 13px;
	color: var(--cv-text-muted);
	padding: 6px 4px;
	margin: 0;
}

/* =========================================================
   PERFIL DE AUTOR
========================================================= */

.cv-author-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 40px 16px;
	margin-bottom: 36px;
	border-bottom: 1px solid var(--cv-border);
}

.cv-author-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 16px;
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* A diferencia de las tarjetas de relacionadas/autores/Sobre Nosotros,
 * esta cabecera NO tiene fondo fijo: se apoya directo sobre el fondo de
 * la página, que ya se adapta solo entre modo claro/oscuro. Por eso acá
 * el texto tiene que adaptarse también (no forzar un color fijo con
 * !important como en las tarjetas de fondo blanco — eso fue un error de
 * la auditoría anterior: quedaba texto casi negro sobre fondo casi negro
 * en modo oscuro). */
.cv-author-header .cv-author-name {
	font-family: var(--cv-font-heading);
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 4px;
	color: var(--cv-text);
}

.cv-author-header .cv-author-role {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cv-red);
	font-weight: 700;
	margin: 0 0 8px;
}

.cv-author-header .cv-author-count {
	font-size: 13px;
	color: var(--cv-text-muted);
	margin: 0 0 16px;
}

.cv-author-header .cv-author-bio {
	max-width: 560px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cv-text);
	margin: 0 0 16px;
}

body.aft-dark-mode .cv-author-header .cv-author-name,
body.aft-dark-mode .cv-author-header .cv-author-bio {
	color: #f0f0f0 !important;
}

body.aft-dark-mode .cv-author-header .cv-author-role {
	color: #6ea8dc !important;
}

body.aft-dark-mode .cv-author-header .cv-author-count {
	color: #cccccc !important;
}

.cv-author-social {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

.cv-author-social a {
	font-size: 13px;
	font-weight: 600;
	color: var(--cv-text);
	text-decoration: none;
	border-bottom: 2px solid var(--cv-red);
	padding-bottom: 2px;
}

.cv-author-social a:hover {
	color: var(--cv-red);
}

@media (max-width: 782px) {
	.cv-author-header {
		padding: 28px 16px;
	}
	.cv-author-name {
		font-size: 22px;
	}
}

/* =========================================================
   PÁGINA "SOBRE NOSOTROS"
========================================================= */

.cv-about {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px 60px;
}

/* Causa raíz del descentrado: .cv-about comparte la clase
 * section-block-upper con el resto del sitio, y el tema padre le
 * aplica display:flex; flex-direction:row a esa clase (pensado para
 * layouts de una fila). Ahí cada sección se encoge a su propio ancho
 * de contenido y queda pegada a la izquierda en vez de ocupar el 100%
 * y centrarse — mismo bug ya resuelto para .cv-homepage con Instagram. */
.cv-about.section-block-upper {
	display: block !important;
}

/* Animación de aparición al hacer scroll: liviana (solo opacity +
 * transform, sin librerías), respeta prefers-reduced-motion. */
.cv-about-fade {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.cv-about-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.cv-about-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.cv-about-hero {
	background: var(--cv-black);
	background: linear-gradient(160deg, #0b0b0b 0%, #1c1c1c 100%);
	border-radius: 8px;
	padding: 64px 32px;
	text-align: center;
	margin: 32px 0 48px;
	border-bottom: 4px solid var(--cv-red);
}

.cv-about-hero-inner {
	max-width: 640px;
	margin: 0 auto;
}

.cv-about-eyebrow {
	display: inline-block;
	color: rgba(255, 255, 255, 0.92);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 14px;
}

.cv-about-title {
	font-family: var(--cv-font-heading);
	font-size: 40px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 14px;
}

.cv-about-subtitle {
	font-size: 17px;
	color: #d8d8d8;
	margin: 0;
	line-height: 1.5;
}

.cv-about-intro {
	max-width: 720px;
	margin: 0 auto 56px;
}

.cv-about-intro p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--cv-text);
	margin: 0 0 20px;
}

.cv-about-section-title {
	font-family: var(--cv-font-heading);
	font-size: 24px;
	font-weight: 800;
	text-align: center;
	margin: 0 0 28px;
}

.cv-about-mv {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 56px;
}

.cv-about-mv-card {
	background: #fff;
	border: 1px solid var(--cv-border);
	border-top: 4px solid var(--cv-red);
	border-radius: 8px;
	padding: 32px 28px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cv-about-mv-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.cv-about-mv-card .cv-about-icon {
	width: 32px;
	height: 32px;
	color: var(--cv-red);
	margin-bottom: 12px;
}

/* Tarjetas con fondo blanco fijo a propósito: mismo bug de texto
 * blanco-sobre-blanco en modo oscuro. El selector "h2" con una sola
 * clase empataba en especificidad con la regla de modo oscuro del
 * tema ("body.aft-dark-mode h2", también !important) — se agrega
 * ".cv-about" adelante para ganar esa pulseada siempre. */
.cv-about .cv-about-mv-card h2 {
	font-family: var(--cv-font-heading);
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 10px;
	color: var(--cv-text) !important;
}

.cv-about-mv-card p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--cv-text-muted) !important;
	margin: 0;
}

.cv-about-values {
	text-align: center;
	margin-bottom: 56px;
}

.cv-about-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.cv-about-pill {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--cv-black);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: background 0.2s ease, transform 0.2s ease;
}

.cv-about-pill:hover {
	background: var(--cv-red);
	transform: translateY(-2px);
}

.cv-about-what {
	margin-bottom: 56px;
}

.cv-about-what-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cv-about-what-card {
	background: #fff;
	border: 1px solid var(--cv-border);
	border-radius: 8px;
	padding: 28px 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cv-about-what-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.cv-about-what-card .cv-about-icon {
	width: 28px;
	height: 28px;
	color: var(--cv-red);
	margin-bottom: 12px;
}

.cv-about .cv-about-what-card h3 {
	font-family: var(--cv-font-heading);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--cv-text) !important;
}

.cv-about-what-card p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--cv-text-muted) !important;
	margin: 0;
}

.cv-about-closing {
	text-align: center;
	padding: 48px 16px;
	border-top: 1px solid var(--cv-border);
}

.cv-about-closing-text {
	font-family: var(--cv-font-heading);
	font-size: 24px;
	font-weight: 800;
	color: var(--cv-text);
	max-width: 640px;
	margin: 0 auto 24px;
	line-height: 1.4;
}

.cv-about-social {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.cv-about-social a {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cv-text);
	text-decoration: none;
	border-bottom: 2px solid var(--cv-red);
	padding-bottom: 3px;
	transition: color 0.2s ease;
}

.cv-about-social a:hover {
	color: var(--cv-red);
}

@media (max-width: 782px) {
	.cv-about-hero {
		padding: 44px 20px;
	}
	.cv-about-title {
		font-size: 28px;
	}
	.cv-about-subtitle {
		font-size: 15px;
	}
	.cv-about-mv {
		grid-template-columns: 1fr;
	}
	.cv-about-what-grid {
		grid-template-columns: 1fr;
	}
	.cv-about-closing-text {
		font-size: 19px;
	}
}

/* =========================================================
   ÍNDICE DE AUTORES
========================================================= */

.cv-authors-header {
	text-align: center;
	max-width: 640px;
	margin: 32px auto 40px;
}

.cv-authors-title {
	font-family: var(--cv-font-heading);
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 10px;
}

.cv-authors-subtitle {
	font-size: 15px;
	color: var(--cv-text-muted);
	margin: 0;
}

.cv-authors-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}

.cv-authors-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: 1px solid var(--cv-border);
	border-radius: 8px;
	padding: 32px 20px;
	text-decoration: none;
	color: var(--cv-text);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cv-authors-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.cv-authors-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 14px;
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Misma familia de bug que las tarjetas de "relacionadas" y la
 * paginación del buscador: la tarjeta de autor tiene fondo blanco fijo
 * a propósito, así que el texto necesita color oscuro forzado siempre,
 * sin importar el modo claro/oscuro del resto del sitio. El selector
 * de una sola clase perdía contra la regla de modo oscuro del tema
 * (más específica: "body.aft-dark-mode h2", también con !important) —
 * se agrega ".cv-authors-card" adelante para tener más especificidad
 * real, no solo !important. */
.cv-authors-card .cv-authors-name {
	font-family: var(--cv-font-heading);
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 4px;
	color: var(--cv-text) !important;
}

.cv-authors-card .cv-authors-role {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cv-red) !important;
	font-weight: 700;
	margin-bottom: 6px;
}

.cv-authors-card .cv-authors-count {
	font-size: 13px;
	color: var(--cv-text-muted) !important;
	margin-bottom: 10px;
}

.cv-authors-card .cv-authors-bio {
	font-size: 13px;
	line-height: 1.5;
	color: var(--cv-text-muted) !important;
	margin: 0;
}

@media (max-width: 992px) {
	.cv-authors-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.cv-authors-grid {
		grid-template-columns: 1fr;
	}
	.cv-authors-title {
		font-size: 24px;
	}
}

/* =========================================================
   CABECERA DE CATEGORÍA
   Fondo e íconos definidos explícitamente para claro Y oscuro (no un
   fondo fijo blanco), así se evita el problema de texto invisible que
   tuvieron otras tarjetas de fondo fijo en modo oscuro.
========================================================= */

.cv-category-header {
	background: #f7f5f3;
	border-left: 4px solid var(--cv-red);
	border-radius: 8px;
	padding: 28px 32px;
	margin-bottom: 32px;
}

.cv-category-header-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 900px;
}

.cv-category-icon {
	width: 44px;
	height: 44px;
	min-width: 44px;
	color: var(--cv-red);
}

.cv-category-title {
	font-family: var(--cv-font-heading);
	font-size: 30px;
	font-weight: 800;
	color: var(--cv-text);
	margin: 0 0 6px;
	line-height: 1.15;
}

.cv-category-desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--cv-text-muted);
	margin: 0 0 8px;
}

.cv-category-count {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cv-red);
}

body.aft-dark-mode .cv-category-header {
	background: #1c1c1c;
}

body.aft-dark-mode .cv-category-title {
	color: #f0f0f0 !important;
}

body.aft-dark-mode .cv-category-desc {
	color: #cccccc !important;
}

body.aft-dark-mode .cv-category-count {
	color: #6ea8dc !important;
}

@media (max-width: 600px) {
	.cv-category-header {
		padding: 20px 18px;
	}
	.cv-category-header-inner {
		gap: 14px;
	}
	.cv-category-icon {
		width: 34px;
		height: 34px;
		min-width: 34px;
	}
	.cv-category-title {
		font-size: 22px;
	}
	.cv-category-desc {
		font-size: 14px;
	}
}

/* ===== HEADER BLANCO POR DEFECTO / NEGRO EN DARK MODE ===== */

.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}

.site-branding {
    background-color: #ffffff;
    position: relative;
    background-size: cover;
    background-position: center;
}

/* Overlay tenue al header (foto de Ischigualasto casi invisible) */
.site-branding::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    opacity: 0.08;
    z-index: 0;
}

.site-branding > * {
    position: relative;
    z-index: 1;
}

/* DARK MODE: Header negro, logo blanco visible */
body.aft-dark-mode .site-header {
    background-color: #1a1a1a;
    border-bottom: 1px solid #333333;
}

body.aft-dark-mode .site-branding {
    background-color: #1a1a1a;
}

/* El logo es texto negro sobre fondo transparente: brightness() solo
 * multiplica valores de color, así que el negro (0,0,0) se queda negro
 * sin importar el brightness aplicado y desaparece contra el header
 * oscuro. brightness(0) invert(1) fuerza todo el logo a blanco sólido,
 * sea cual sea su color original. */
body.aft-dark-mode .custom-logo {
    filter: brightness(0) invert(1);
}

body.aft-dark-mode .site-branding img {
    filter: brightness(0) invert(1);
}

body.aft-dark-mode .site-title,
body.aft-dark-mode .site-description {
    color: #ffffff;
}

/* Tagline del sitio ("Noticias de San Juan - Argentina") oculta visualmente
   en el header: no está hardcodeada en ningún archivo del theme, es el
   Tagline de WordPress (Ajustes > Generales) que el theme padre siempre
   imprime junto al logo. Se oculta de forma accesible (no display:none)
   para no perder el valor en lectores de pantalla ni en el <title> SEO. */
.site-branding .site-description {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* =========================================================
   FIX: HEADER GRIS → BLANCO
   El theme padre (broadnews) usa su propio mecanismo de "custom header"
   con imagen por defecto (assets/img/default-header-image.jpeg, una
   foto de montaña genérica sin relación con Panorama) + un tinte negro
   al 50% de opacidad built-in (.af-header-image.data-bg:before,
   controlado por el theme_mod enable_header_image_tint_overlay, ya
   seteado en 0). El selector .site-branding del bloque anterior no
   alcanza esta imagen porque vive en un ancestro distinto
   (.af-middle-header.af-header-image). Se neutraliza acá mientras no
   haya una foto propia de San Juan para usar como header_image: al
   subir una y setear el theme_mod, esta regla puede ajustarse (bajar
   la opacidad en vez de "none") para mostrarla tenue en vez de blanco liso.
   ========================================================= */

.af-middle-header.af-header-image {
	background-color: #ffffff !important;
	background-image: none !important;
}

.af-header-image.data-bg:before {
	opacity: 0 !important;
}

/* =========================================================
   FIX: ROJO HARDCODEADO DEL THEME PADRE (#c00c00) → AZUL PANORAMA
   broadnews trae su propio rojo de acento (#c00c00) en ~58 selectores,
   independiente de las variables --cv-red del child theme. Selectores
   verificados uno por uno contra broadnews/style.css (no se adivinó
   ninguno). Estados :hover/.active persistentes usan --cv-red-dark
   (mismo criterio que ya usa el resto del sitio); el resto usa --cv-red.
   Se excluyen a propósito los 2 selectores que son de widgets de
   YouTube (.af-youtube-video-list, .broadnews_youtube_video_widget):
   no se migran, no tiene sentido recolorearlos.
   ========================================================= */

mark {
	border-bottom-color: var(--cv-red) !important;
}
input[type="submit"] {
	background: var(--cv-red) !important;
}
.banner-exclusive-posts-wrapper .aft-ripple {
	background-color: var(--cv-red) !important;
}
.main-navigation .menu-desktop > ul > li::after {
	background-color: var(--cv-red) !important;
}
.main-navigation .menu-desktop > ul > li:hover > a {
	background-color: var(--cv-red-dark) !important;
}
.main-navigation .menu-description {
	border-left-color: var(--cv-red) !important;
}
.woocommerce-product-search button[type="submit"] {
	background: var(--cv-red) !important;
	border: 1px solid var(--cv-red) !important;
}
input.search-submit {
	border: 1px solid var(--cv-red) !important;
}
div.custom-menu-link > a,
.broadnews-header.header-layout-side .search-watch div.custom-menu-link > a,
.broadnews-header.header-layout-compressed-full .top-bar-right div.custom-menu-link > a {
	background: var(--cv-red) !important;
}
.exclusive-posts .exclusive-now {
	background: var(--cv-red) !important;
}
.broadnews-load-more-posts a.aft-readmore .load-btn {
	background-color: var(--cv-red) !important;
}
.aft-see-more a {
	background-image: linear-gradient(120deg, var(--cv-red), var(--cv-red)) !important;
	border-bottom-color: var(--cv-red) !important;
}
body.aft-dark-mode .aft-main-banner-section.aft-banner-background-secondary {
	background-color: var(--cv-red) !important;
}
.cat-links li a {
	color: var(--cv-red) !important;
}
a.broadnews-categories.category-color-1 {
	color: var(--cv-red) !important;
}
.af-cat-widget-carousel a.broadnews-categories.category-color-1 {
	background-color: var(--cv-red) !important;
	color: #ffffff !important;
}
.single-post article.post .af-post-format i {
	background: var(--cv-red) !important;
}
.widget-title-border-side .sub-heading-line::before,
.widget-title-border-bottom .sub-heading-line::before {
	background: var(--cv-red) !important;
}
body.aft-light-mode .is-style-outline a.wp-block-button__link:not(.has-text-color) {
	border-color: var(--cv-red) !important;
	color: var(--cv-red) !important;
}
.aft-light-mode .is-style-fill a.wp-block-button__link:not(.has-background) {
	background-color: var(--cv-red) !important;
}
.aft-posts-tabs-panel .nav-tabs > li > a.active {
	background: var(--cv-red) !important;
}
.read-img .trending-no,
.trending-posts-vertical .trending-no {
	background-color: var(--cv-red) !important;
}
.page-links a.post-page-numbers {
	color: var(--cv-red) !important;
}
.broadnews-pagination .nav-links .page-numbers.current {
	border-color: var(--cv-red) !important;
}
.inner-suscribe input[type=submit] {
	background-color: var(--cv-red) !important;
}
body.single .entry-header .aft-post-excerpt-and-meta .post-excerpt {
	border-left-color: var(--cv-red) !important;
}
.aft-light-mode .comment-body .reply a:hover {
	border-color: var(--cv-red-dark) !important;
}
body.single span.tags-links a:hover {
	border-color: var(--cv-red-dark) !important;
}
body.aft-light-mode .entry-content .tagcloud a:hover,
.wp-block-tag-cloud a:hover {
	border-color: var(--cv-red-dark) !important;
}
#wp-calendar tbody td#today {
	background-color: var(--cv-red) !important;
}
#wp-calendar tbody td a::after {
	background: var(--cv-red) !important;
}
.aft-dark-mode .wp-calendar-nav a {
	border-bottom-color: var(--cv-red) !important;
}
ul.trail-items li a:hover {
	color: var(--cv-red-dark) !important;
}
.widget_mc4wp_form_widget input[type=submit] {
	background-color: var(--cv-red) !important;
}
#scroll-up {
	background-color: var(--cv-red) !important;
}
#scroll-up::after {
	border-bottom-color: var(--cv-red) !important;
}
a.sidr-class-sidr-button-close {
	background-color: var(--cv-red) !important;
}
.broadnews-widget.widget_text a {
	border-bottom-color: var(--cv-red) !important;
}
p.awpa-website a:hover {
	color: var(--cv-red-dark) !important;
}
p.awpa-more-posts a:hover,
.aft-dark-mode .wp-post-author-meta .wp-post-author-meta-more-posts a:hover {
	border-color: var(--cv-red-dark) !important;
}
.fpsml-front-form.fpsml-template-5 .qq-upload-button {
	background-color: var(--cv-red) !important;
}
.aft-dark-mode span.heading-line-before {
	background-color: var(--cv-red) !important;
}
body footer.site-footer .wp_post_author_widget .awpa-display-name a:hover {
	color: var(--cv-red-dark) !important;
}
body footer.site-footer .wp-post-author-meta .wp-post-author-meta-more-posts a:hover {
	border-color: var(--cv-red-dark) !important;
}
.entry-content > [class*="wp-block-"] a.wp-block-button__link {
	color: var(--cv-red) !important;
}
.aft-dark-mode .widget ul.menu > li a:hover {
	color: var(--cv-red-dark) !important;
}

/* =========================================================
   FIX: DARK MODE — caja del header seguía blanca y títulos de
   tarjeta ilegibles (texto oscuro sobre fondo oscuro).
   Verificado en navegador tras el primer pase de recoloreo.
   ========================================================= */

/* El bloque HEADER BLANCO de más arriba fuerza fondo blanco en
   .af-middle-header sin distinguir modo oscuro; acá se corrige
   específicamente para aft-dark-mode. */
body.aft-dark-mode .af-middle-header.af-header-image {
	background-color: #1a1a1a !important;
}

/* Títulos de las tarjetas de portada (cv_post_card): usan
   var(--cv-text), que es oscuro (#1a1a1a) a propósito para modo
   claro, pero nunca tuvo variante para aft-dark-mode. */
body.aft-dark-mode .cv-card-title a {
	color: #ffffff;
}
body.aft-dark-mode .cv-card-excerpt {
	color: #cccccc;
}

/* =========================================================
   FIX: DARK MODE — meta del interior de nota (autor, tiempo de
   lectura). El child theme define estos colores con var(--cv-text-muted)
   sin variante oscura; el theme padre SÍ tiene una regla
   ".aft-dark-mode .posts-author a { color:#fff }" pero empata en
   especificidad con la del child y pierde por orden de carga
   (el child se enqueuea después). Bug preexistente heredado de
   CuyoVisión, no introducido por el clonado.
   ========================================================= */
body.aft-dark-mode .entry-meta .posts-author a,
body.aft-dark-mode .entry-meta .min-read,
body.aft-dark-mode .entry-meta .author-links {
	color: #cccccc !important;
}

/* Mismo patrón en las tarjetas de "Sobre Nosotros" (relevante ahora
   que se reescribe el texto de la página para Panorama). */
body.aft-dark-mode .cv-about-mv-card p,
body.aft-dark-mode .cv-about-what-card p {
	color: #cccccc !important;
}

/* =========================================================
   NOTAS RELACIONADAS — pulido estético
   Selectores reales (broadnews/inc/hooks/blocks/block-post-related.php):
   .af-reated-posts (sic, typo del theme padre) > .af-container-row >
   .trending-posts-item > .aft-trending-posts. Sin CSS propio hasta
   ahora — heredaba 100% el look genérico del theme padre.
   ========================================================= */
.af-reated-posts .af-container-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.af-reated-posts .trending-posts-item {
	float: none;
	width: auto;
	padding: 0;
}

.af-reated-posts .aft-trending-posts {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%;
}

.af-reated-posts .aft-trending-posts:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.af-reated-posts .aft-trending-posts img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 0;
}

.af-reated-posts .read-title,
.af-reated-posts .read-title a {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cv-text);
}

.af-reated-posts .read-details {
	padding: 14px 16px;
}

body.aft-dark-mode .af-reated-posts .aft-trending-posts {
	background: #2a2a2a;
}

body.aft-dark-mode .af-reated-posts .read-title,
body.aft-dark-mode .af-reated-posts .read-title a {
	color: #ffffff;
}

/* "Quizá te interese" (bloque global antes del footer, en TODAS las
 * páginas — .af-main-banner-latest-posts) usa el mismo markup que
 * "Notas relacionadas" (aft-trending-posts / read-title) pero nunca
 * tuvo el fix de dark mode: quedaban tarjetas blancas con texto negro
 * incrustadas en medio de una página oscura. */
body.aft-dark-mode .af-main-banner-latest-posts .aft-trending-posts {
	background: #2a2a2a;
}

body.aft-dark-mode .af-main-banner-latest-posts .read-title,
body.aft-dark-mode .af-main-banner-latest-posts .read-title a {
	color: #ffffff;
}

/* =========================================================
   PRELOADER — logo Panorama
   El theme padre trae por defecto un spinner de "cubo" en CSS puro
   (#af-preloader > #loader-wrapper > #loader, sin logo). CuyoVisión
   lo reemplaza con su GIF animado vía CSS Adicional del Customizer,
   que nunca se clonó a Panorama; se replica acá el mismo patrón con
   el ícono de Panorama (PNG estático, con una animación de pulso
   propia ya que no hay un GIF animado equivalente).
   ========================================================= */
#af-preloader {
	background-color: #ffffff !important;
	background-image: none !important;
}

#af-preloader > * {
	display: none !important;
}

#af-preloader::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96px;
	height: 96px;
	transform: translate(-50%, -50%);
	background-image: url('/wp-content/themes/panorama-child/assets/img/panorama-icon.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	animation: cv-preloader-pulse 1.2s ease-in-out infinite;
}

@keyframes cv-preloader-pulse {
	0%, 100% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(0.92);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.05);
	}
}

/* =========================================================
   FIX: ícono Instagram del botón Seguinos no se veía — el theme
   padre fuerza font-family: aft-icons !important en los <i> dentro
   de .custom-menu-link (su propia fuente de íconos, sin glyph para
   fa-instagram), pisando la clase fa/FontAwesome que carga el ícono
   real. Se fuerza de vuelta a FontAwesome solo para este botón.
   ========================================================= */
div.custom-menu-link > a i.fa-instagram {
	font-family: 'FontAwesome' !important;
	margin-right: 8px;
}


/* =========================================================
   FIX 2: el font-family de FontAwesome no alcanza porque el theme
   padre tiene la cola de font-awesome.min.css COMENTADA en su propio
   functions.php (nunca se carga, tampoco en CuyoVisión) — cargar la
   fuente entera solo para un ícono es peso de más. Se reemplaza por
   un SVG inline (mismo path que usa el widget de redes de CuyoVisión
   en su footer), sin dependencias externas.
   ========================================================= */
div.custom-menu-link > a i.fa-instagram {
	font-family: initial !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.9.3 2.3.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.3 1 .4 2.3.1 1.3.1 1.6.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.9-.4 2.3-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .3-2.3.4-1.3.1-1.6.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.9-.3-2.3-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.3-1-.4-2.3-.1-1.3-.1-1.6-.1-4.9s0-3.6.1-4.9c.1-1.2.3-1.9.4-2.3.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.3 2.3-.4 1.3-.1 1.6-.1 4.9-.1M12 0C8.7 0 8.3 0 7 .1c-1.3.1-2.2.3-3 .6-.8.3-1.5.7-2.2 1.4C1.1 2.8.7 3.5.4 4.3c-.3.8-.5 1.7-.6 3C-.2 8.7-.2 9.1-.2 12.4s0 3.7.1 5c.1 1.3.3 2.2.6 3 .3.8.7 1.5 1.4 2.2.7.7 1.4 1.1 2.2 1.4.8.3 1.7.5 3 .6 1.3.1 1.7.1 5 .1s3.7 0 5-.1c1.3-.1 2.2-.3 3-.6.8-.3 1.5-.7 2.2-1.4.7-.7 1.1-1.4 1.4-2.2.3-.8.5-1.7.6-3 .1-1.3.1-1.7.1-5s0-3.7-.1-5c-.1-1.3-.3-2.2-.6-3-.3-.8-.7-1.5-1.4-2.2C21.2 1.1 20.5.7 19.7.4c-.8-.3-1.7-.5-3-.6C15.7 0 15.3 0 12 0z'/%3E%3Cpath d='M12 5.8a6.2 6.2 0 100 12.4 6.2 6.2 0 000-12.4zm0 10.2a4 4 0 110-8 4 4 0 010 8z'/%3E%3Ccircle cx='18.4' cy='5.6' r='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}
div.custom-menu-link > a i.fa-instagram::before {
	content: '' !important;
}

/* Logo del footer (widget propio de Panorama, block-17): queda
   casi invisible en negro sobre el fondo oscuro del footer, se
   blanquea via filtro. */
.uag-image-1980 {
	filter: brightness(0) invert(1);
}

.main-navigation .menu-desktop > li.current-menu-item > a,
.main-navigation .menu-desktop > ul > li.current-menu-item > a {
	background-color: var(--cv-red) !important;
}

/* FIX: las tarjetas de relacionadas no llenaban su columna del
   grid — .trending-posts-item trae un ancho fijo tipo Bootstrap
   (col-2) que gana sobre el stretch por defecto de CSS Grid. */
.af-reated-posts .trending-posts-item,
.af-reated-posts .aft-trending-posts {
	width: 100%;
}

.af-reated-posts .af-container-row .trending-posts-item.col-2 {
	width: 100%!important;
	float: none!important;
	padding: 0!important;
}
.af-reated-posts .af-container-row .trending-posts-item.col-2 .aft-trending-posts {
	width: 100%!important;
}