/* TELEPATICO / CANARD — PORTADA EDITORIAL DE TRES COLUMNAS
   Versión 3.0 · Pegar al FINAL del CSS adicional.
   Necesita al menos cinco artículos configurados como Featured Content.
   Los cambios de rejilla afectan SOLO a la portada del blog. */
:root {
}

body {
	color: #111;
	background: #fff;
}

.site-title, .site-title a {
	font-family: Impact, 'Arial Narrow', Arial, sans-serif;
	font-weight: 900;
	letter-spacing: -.035em;
	text-transform: uppercase;
}

.main-navigation a, .secondary-navigation a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.entry-title, .entry-title a, .page-title {
	font-family: Impact, 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1.08;
}

.entry-title a {
	color: #080808;
}

.entry-title a:hover {
	color: var(--tp-red);
}

.entry-content {
	line-height: 1.75;
}

/* Etiquetas oscuras de categorías; no afecta al texto principal */
.entry-meta .cat-links a, .entry-header .cat-links a,
.entry-meta a[rel~='category'] {
	display: inline-block;
	background: var(--tp-black);
	color: #fff !important;
	padding: 5px 8px;
	margin: 2px 3px 3px 0;
	font: 700 11px/1.25 Arial, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.entry-meta .cat-links a:hover, .entry-header .cat-links a:hover {
	background: var(--tp-red);
}

/* Títulos de widgets en forma de etiqueta WIRED */
.widget-area .widget-title {
	display: table;
	background: var(--tp-black);
	color: #fff;
	padding: 9px 12px;
	font: 800 13px/1.2 Arial, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	position: relative;
}

.widget-area .widget-title::after {
	content: '';
	display: block;
	position: absolute;
	left: 100%;
	top: 0;
	width: 100vw;
	height: 3px;
	background: var(--tp-black);
}

.widget-area .widget {
	overflow: hidden;
}

/* La parte editorial de tres columnas solo se aplica a pantallas grandes */
@media screen and (min-width: 1080px) {
	.blog .featured-content {
		border: 0;
		padding: 24px 20px 35px;
	}
	
	.blog .featured-content-inner {
		width: 100% !important;
		max-width: 1480px;
		display: grid;
		grid-template-columns: minmax(0,1fr) minmax(0,1.9fr) minmax(0,1fr);
		grid-template-rows: repeat(2,minmax(235px,auto));
		gap: 20px;
	}
	
	.blog .featured-content-inner::before,
				  .blog .featured-content-inner::after {
		content: none !important;
		display: none !important;
	}
	
	.blog .featured-content .hentry,
				  .blog .featured-content .hentry:first-of-type,
				  .blog .featured-content .hentry:nth-of-type(2),
				  .blog .featured-content .hentry:nth-of-type(3),
				  .blog .featured-content .hentry:nth-of-type(4),
				  .blog .featured-content .hentry:nth-of-type(5) {
		float: none !important;
		clear: none !important;
		width: auto !important;
		height: auto !important;
		min-height: 235px;
		margin: 0 !important;
		padding: 0;
		position: relative;
		background-color: #171717;
		border: 0;
	}
	
	.blog .featured-content .hentry:first-of-type {
		grid-column: 2;
		grid-row: 1 / span 2;
		min-height: 490px;
	}
	
	.blog .featured-content .hentry:nth-of-type(2) {
		grid-column: 1;
		grid-row: 1;
	}
	
	.blog .featured-content .hentry:nth-of-type(3) {
		grid-column: 3;
		grid-row: 1;
	}
	
	.blog .featured-content .hentry:nth-of-type(4) {
		grid-column: 1;
		grid-row: 2;
	}
	
	.blog .featured-content .hentry:nth-of-type(5) {
		grid-column: 3;
		grid-row: 2;
	}
	
	.blog .featured-content .entry-header {
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		background: linear-gradient(transparent,rgba(0,0,0,.82));
		padding-top: 45px;
	}
	
	.blog .featured-content .entry-title {
		font-size: clamp(20px,2vw,31px);
		line-height: 1.08;
		padding: 0 19px 21px;
		margin: 0;
		font-family: Impact, 'Arial Narrow', Arial, sans-serif;
	}
	
	.blog .featured-content .hentry:first-of-type .entry-title {
		font-size: clamp(40px,4.2vw,74px);
		padding: 0 30px 30px;
	}
	
	.blog .featured-content .entry-title a {
		color: #fff;
	}
	
	.blog .featured-content .entry-meta {
		padding-left: 19px;
		padding-right: 19px;
	}
	
	.blog .featured-content .hentry:first-of-type .entry-meta {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.blog .featured-content .post-thumbnail {
		width: 100%;
		height: 100%;
	}
	
	.blog .site-content-inner, .blog .site-branding {
		max-width: 1480px;
	}
}

/* En tablet y móvil se conserva la disposición adaptable nativa de Canard. */
@media screen and (max-width:1079px) {
	.featured-content .entry-title {
		font-family: Impact, 'Arial Narrow', Arial, sans-serif;
	}
}

@media screen and (max-width:599px) {
	.entry-title {
		overflow-wrap: break-word;
	}
	
	.widget-area .widget-title {
		font-size: 12px;
	}
}

/* TELEPATICO / CANARD — Complemento visual v4
   Añadir DESPUÉS de telepatico-canard-tres-columnas.css.
   No altera el menú ni la cuadrícula existente.
*/
:root {
}

/* Cinta editorial antes de los destacados de la portada */
.blog .featured-content::before,
.home.blog .featured-content::before {
	content: 'FEATURED STORIES';
	display: block;
	width: max-content;
	max-width: calc(100% - 40px);
	box-sizing: border-box;
	padding: 9px 14px;
	margin: 0 0 14px max(20px, calc((100% - 1480px)/2 + 20px));
	color: #fff;
	background: var(--tp-ink);
	font: 800 13px/1.2 Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
}

/* Categorías de artículos (solo donde Canard las muestra en HTML) */
.cat-links a,
.entry-meta a[rel~="category"],
.entry-header a[rel~="category"] {
	display: inline-block;
	background: var(--tp-ink);
	color: #fff !important;
	padding: 5px 9px;
	margin: 0 5px 5px 0;
	font: 700 11px/1.3 Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
}

.cat-links a:hover,
.entry-meta a[rel~="category"]:hover,
.entry-header a[rel~="category"]:hover {
	background: #b51217;
	color: #fff !important;
}

/* Títulos de bloques/widgets ya presentes */
.widget-area .widget-title,
#secondary .widget-title,
.widget .widgettitle {
	display: table;
	position: relative;
	background: var(--tp-ink);
	color: #fff;
	padding: 9px 13px;
	font: 800 12px/1.25 Arial, Helvetica, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.widget-area .widget-title::after,
#secondary .widget-title::after,
.widget .widgettitle::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 0;
	width: 100vw;
	height: 2px;
	background: var(--tp-rule);
}

.widget-area .widget,#secondary .widget {
	overflow: hidden;
}

/* Títulos de archivo/categoría */
.archive .page-title,
.category .page-title {
	display: inline-block;
	background: var(--tp-ink);
	color: #fff;
	padding: 9px 14px;
	font: 800 14px/1.2 Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
}

@media(max-width:600px) {
	.blog .featured-content::before {
		font-size: 11px;
		padding: 8px 11px;
		margin-left: 12px;
	}
}

/* TELEPATICO / CANARD — Complemento visual v4
   Añadir DESPUÉS de telepatico-canard-tres-columnas.css.
   No altera el menú ni la cuadrícula existente.
*/
:root {
}

/* Cinta editorial antes de los destacados de la portada */
.blog .featured-content::before,
.home.blog .featured-content::before {
	content: 'FEATURED STORIES';
	display: block;
	width: max-content;
	max-width: calc(100% - 40px);
	box-sizing: border-box;
	padding: 9px 14px;
	margin: 0 0 14px max(20px, calc((100% - 1480px)/2 + 20px));
	color: #fff;
	background: var(--tp-ink);
	font: 800 13px/1.2 Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
}

/* Categorías de artículos (solo donde Canard las muestra en HTML) */
.cat-links a,
.entry-meta a[rel~="category"],
.entry-header a[rel~="category"] {
	display: inline-block;
	background: var(--tp-ink);
	color: #fff !important;
	padding: 5px 9px;
	margin: 0 5px 5px 0;
	font: 700 11px/1.3 Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
}

.cat-links a:hover,
.entry-meta a[rel~="category"]:hover,
.entry-header a[rel~="category"]:hover {
	background: #b51217;
	color: #fff !important;
}

/* Títulos de bloques/widgets ya presentes */
.widget-area .widget-title,
#secondary .widget-title,
.widget .widgettitle {
	display: table;
	position: relative;
	background: var(--tp-ink);
	color: #fff;
	padding: 9px 13px;
	font: 800 12px/1.25 Arial, Helvetica, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.widget-area .widget-title::after,
#secondary .widget-title::after,
.widget .widgettitle::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 0;
	width: 100vw;
	height: 2px;
	background: var(--tp-rule);
}

.widget-area .widget,#secondary .widget {
	overflow: hidden;
}

/* Títulos de archivo/categoría */
.archive .page-title,
.category .page-title {
	display: inline-block;
	background: var(--tp-ink);
	color: #fff;
	padding: 9px 14px;
	font: 800 14px/1.2 Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
}

@media(max-width:600px) {
	.blog .featured-content::before {
		font-size: 11px;
		padding: 8px 11px;
		margin-left: 12px;
	}
}

/* TELEPATICO: prueba de etiqueta editorial */
.blog .featured-content::before {
	content: "FEATURED STORIES" !important;
	display: block !important;
	background: #000000 !important;
	color: #ffffff !important;
	padding: 10px 15px !important;
	margin: 0 20px 15px !important;
	font: bold 14px Arial, sans-serif !important;
	width: fit-content !important;
}