/*
Theme Name: Newsmatic Tercer Ojo
Description: Rediseño de identidad visual sobre el tema Newsmatic.
Template: newsmatic
Version: 1.0.35
Text Domain: newsmatic
*/

/* =========================================================
   1. TOKENS
   ========================================================= */
:root{
	--ink: #15201B;
	--ink-soft: #46503F;
	--ink-faint: #6E7863;
	--paper: #F0F2EA;
	--paper-raised: #FFFFFF;
	--line: #D6DACB;
	--brand: #0E4B2E;
	--brand-strong: #0A3823;
	--brand-tint: #E2ECE1;
	--signal: #AD3D18;
	--signal-tint: #F4E1D5;

	--font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--font-body: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

/* pisamos las variables de color originales del tema para que ningun
   componente se quede con el verde viejo */
:root{
	--theme-color-red: var(--brand);
	--top-header-bk-color: var(--brand);
	--menu-border-top-color: var(--brand);
	--menu-color-hover: var(--brand);
	--menu-color-active: var(--brand);
	--menu-color-submenu-hover: var(--brand);
	--ticker-outer-bk-color: var(--brand);
	--ticker-inner-bk-color: var(--brand);
	--move-to-top-background-color: var(--brand);
	--move-to-top-background-color-hover: var(--brand-strong);
	--move-to-top-border-color: var(--brand);
	--move-to-top-border-color-hover: var(--brand-strong);
	--sidebar-toggle-color-hover: var(--brand);
	--newsletter-color-hover: var(--brand);
	--random-news-color-hover: var(--brand);
	--search-color-hover: var(--brand);
}

body.newsmatic_dark_mode{
	--ink: #EAEFE6;
	--ink-soft: #AAB6A1;
	--ink-faint: #7C8873;
	--paper: #10140E;
	--paper-raised: #171C14;
	--line: #2A3226;
	--brand: #45AE79;
	--brand-strong: #6BC79A;
	--brand-tint: rgba(69,174,121,0.16);
	--signal: #E07A45;
	--signal-tint: rgba(224,122,69,0.18);

	--theme-color-red: var(--brand);
	--top-header-bk-color: var(--brand);
	--menu-border-top-color: var(--brand);
	--menu-color-hover: var(--brand);
	--menu-color-active: var(--brand);
	--menu-color-submenu-hover: var(--brand);
	--ticker-outer-bk-color: var(--brand);
	--ticker-inner-bk-color: var(--brand);
	--move-to-top-background-color: var(--brand);
	--move-to-top-background-color-hover: var(--brand-strong);
	--move-to-top-border-color: var(--brand);
	--move-to-top-border-color-hover: var(--brand-strong);
	--sidebar-toggle-color-hover: var(--brand);
	--newsletter-color-hover: var(--brand);
	--random-news-color-hover: var(--brand);
	--search-color-hover: var(--brand);
}

/* =========================================================
   2. BASE
   ========================================================= */
html{
	overflow-x: hidden;
}
body{
	background: var(--paper) !important;
	color: var(--ink);
	font-family: var(--font-body);
	overflow-x: hidden;
	max-width: 100vw;
}
a{ color: var(--ink); }
p{ color: var(--ink-soft); }

h1, h2, h3, h4,
.post-title,
.newsmatic-block-title,
.entry-title{
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
}

.post-title a,
.entry-title a{ color: var(--ink); }
.post-title a:hover,
.entry-title a:hover{ color: var(--brand); }

.post-meta,
.post-meta *,
time,
.posted-on,
.byline{
	font-family: var(--font-mono) !important;
	font-size: 12px !important;
	color: var(--ink-faint) !important;
	letter-spacing: .01em;
}

::selection{ background: var(--brand-tint); color: var(--brand-strong); }

/* ninguna imagen puede desbordar el ancho de pantalla (mobile) */
img{
	max-width: 100%;
	height: auto;
}
.entry-content img{
	display: block;
}

/* =========================================================
   3. CATEGORY PILLS
   ========================================================= */
ul.post-categories{ list-style:none; display:flex; gap:6px; margin:0 0 10px; padding:0; flex-wrap:wrap; }
ul.post-categories li.cat-item{ margin:0; }
ul.post-categories li.cat-item a{
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--brand-strong) !important;
	background: var(--brand-tint);
	padding: 3px 8px;
	display: inline-block;
	border-radius: 2px;
}
ul.post-categories li.cat-item a:hover{ background: var(--brand); color: var(--paper-raised) !important; }

/* =========================================================
   4. HEADER / NAVEGACION
   ========================================================= */
#masthead.site-header{
	background: var(--paper-raised);
	border-bottom: 1px solid var(--line);
}
/* logo unico: se oculta el texto duplicado "Tercer Ojo" (ya esta en la imagen del logo) */
.site-branding .site-title,
.site-branding .site-description{
	display: none !important;
}
.site-branding{
	padding: 10px 0 !important;
}
.site-branding img,
.custom-logo-link img{
	max-height: 52px !important;
	width: auto !important;
}
#site-navigation.main-navigation ul li a{
	font-family: var(--font-body) !important;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--ink-soft) !important;
}
#site-navigation.main-navigation ul li a:hover,
#site-navigation.main-navigation ul li.current-menu-item > a{
	color: var(--brand) !important;
}

/* =========================================================
   5. TICKER "TITULARES"
   ========================================================= */
.ticker-news-wrap.newsmatic-ticker{
	background: var(--brand) !important;
	border-color: var(--brand) !important;
	display: flex !important;
	align-items: center !important;
}
.ticker-news-wrap .newsmatic-ticker-box{
	padding-top: 11px !important;
	padding-bottom: 11px !important;
	box-sizing: border-box !important;
}
.ticker_label_title.ticker-title{
	background: var(--brand-strong) !important;
}
.ticker-news-wrap .newsmatic-ticker-box,
.ticker-news-wrap .ticker-item-wrap,
.ticker-news-wrap .newsmatic-ticker-controls{
	background: var(--brand) !important;
}
.ticker-news-wrap .ticker_label_title_string{
	font-family: var(--font-mono) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 12px !important;
	color: var(--paper-raised) !important;
}
.ticker-news-wrap .ticker_label_title_string::before{
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	margin-right: 8px;
	animation: tercerojo-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
	.ticker-news-wrap .ticker_label_title_string::before{ animation: none; }
}
@keyframes tercerojo-pulse{
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}
.ticker-item-wrap .title-wrap .post-title{
	font-family: var(--font-mono) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-transform: none;
	color: var(--paper-raised) !important;
}
.ticker-item-wrap .post-title a{ color: var(--paper-raised) !important; }
.newsmatic-ticker-pause{ color: var(--paper-raised) !important; }

/* imagen del ticker centrada con el texto, no pegada arriba */
.ticker-news-wrap .newsmatic-ticker-box ul li,
.ticker-news-wrap .ticker-item-wrap li.ticker-item{
	align-items: center !important;
}
.ticker-news-wrap .ticker-item{
	display: flex !important;
	align-items: center !important;
}
.ticker-news-wrap .feature_image{
	display: flex;
	align-items: center;
	overflow: hidden;
	max-height: 36px !important;
	height: 36px !important;
	max-width: 54px !important;
	margin: 0 12px 0 0 !important;
}
.ticker-news-wrap .feature_image,
.ticker-news-wrap .title-wrap{
	align-self: center !important;
}
.ticker-news-wrap .feature_image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   6. NOTA PRINCIPAL + SECUNDARIAS (fiel al boceto: lista simple,
   nada superpuesto, sin cajas que deban calzar exactas)
   ========================================================= */

/* --- nota principal: foto arriba, texto abajo en flujo normal --- */
.main-banner-wrap .slide-item{
	height: auto !important;
	overflow: visible !important;
}
.main-banner-wrap .slick-list{
	height: auto !important;
}
.main-banner-wrap .slide-item .post-element{
	position: static !important;
	inset: auto !important;
	background: transparent !important;
	padding: 18px 0 0 !important;
}
.main-banner-wrap .slide-item .post-title,
.main-banner-wrap .slide-item .post-title a{
	color: var(--ink) !important;
	text-shadow: none !important;
	font-size: clamp(26px, 3.2vw, 38px) !important;
	line-height: 1.15 !important;
	margin: 10px 0 12px;
}
.main-banner-wrap .slide-item .post-excerpt{
	font-family: var(--font-body);
	color: var(--ink-soft) !important;
	font-size: 16px;
	max-width: 62ch;
}
.main-banner-wrap .slide-item .post-meta,
.main-banner-wrap .slide-item .post-meta *{
	color: var(--ink-faint) !important;
}

/* --- flechas del carrusel: circulares, centradas, con marca --- */
.main-banner-wrap .slick-arrow{
	position: absolute !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba(21,32,27,.55) !important;
	border: none !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 5 !important;
	transition: background .2s ease, transform .2s ease;
}
.main-banner-wrap .slick-arrow:hover{
	background: var(--brand) !important;
	transform: translateY(-50%) scale(1.06) !important;
}
.main-banner-wrap .slick-prev{ left: 16px !important; right: auto !important; }
.main-banner-wrap .slick-next{ right: 16px !important; left: auto !important; }
.main-banner-wrap .slick-arrow:before{
	font-family: inherit !important;
	color: #ffffff !important;
	opacity: 1 !important;
	font-size: 20px !important;
	line-height: 1 !important;
}

/* --- secundarias: lista simple apilada, sin recuadros, sin alto forzado --- */
.main-banner-block-posts{
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	height: auto !important;
	overflow: visible !important;
}
.main-banner-block-posts .post-item{
	display: grid !important;
	grid-template-columns: 96px 1fr !important;
	column-gap: 14px;
	padding: 16px 0 !important;
	border-top: 1px solid var(--line);
	background: transparent !important;
	border-radius: 0 !important;
	overflow: visible !important;
	height: auto !important;
	width: auto !important;
	grid-column: auto !important;
}
.main-banner-block-posts .post-item:first-child{
	border-top: none;
	padding-top: 0 !important;
}
.main-banner-block-posts .post-item .post-thumb{
	aspect-ratio: 1 / 1;
	height: auto !important;
	flex: none !important;
	align-self: start;
}
.main-banner-block-posts .post-item .post-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main-banner-block-posts .post-item .post-element{
	position: static !important;
	inset: auto !important;
	background: transparent !important;
	padding: 0 !important;
}
.main-banner-block-posts .post-item ul.post-categories li.cat-item a{
	background: var(--brand-tint) !important;
	color: var(--brand-strong) !important;
	padding: 3px 8px !important;
	font-size: 11px !important;
}
.main-banner-block-posts .post-item .post-title,
.main-banner-block-posts .post-item .post-title a{
	color: var(--ink) !important;
	font-size: 17px !important;
	line-height: 1.28 !important;
	text-shadow: none !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
}
.main-banner-block-posts .post-item .post-meta,
.main-banner-block-posts .post-item .post-meta *{
	color: var(--ink-faint) !important;
}

/* =========================================================
   7. SECCIONES DE PORTADA (grillas por categoria)
   ========================================================= */
.news-grid .newsmatic-block-title{
	font-size: 18px !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 1px solid var(--line);
	padding-bottom: 10px;
}
.news-grid .grid-item .post-title,
.news-grid .grid-item .post-title a{
	font-size: 18px !important;
	line-height: 1.3 !important;
	color: #ffffff !important;
	text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.news-grid .grid-item .post-meta,
.news-grid .grid-item .post-meta *{
	color: rgba(255,255,255,.85) !important;
}
.news-grid .grid-item{ background: transparent !important; }

/* =========================================================
   8. FOTOS - naturales, sin filtro (referencia: La Nacion)
   ========================================================= */
figure[class*="thumb"],
figure[class*="feature"],
[class*="post-thumb"],
[class*="feature_image"]{
	position: relative;
	overflow: hidden !important;
	border-radius: 10px !important;
}
figure[class*="thumb"] img,
figure[class*="feature"] img,
[class*="post-thumb"] img,
[class*="feature_image"] img{
	border-radius: 10px !important;
}
.grid-item,
.widget{
	border-radius: 10px !important;
	overflow: hidden !important;
}
ul.post-categories li.cat-item a{
	border-radius: 4px !important;
}

/* espaciado y superficie de las tarjetas */
.news-grid-post-wrap{ gap: 22px !important; }
.grid-item{
	background: var(--paper-raised) !important;
	border: 1px solid var(--line);
}
.grid-item .post-element,
.grid-item .post-element-inner{
	padding: 14px 16px !important;
}
.widget{
	background: var(--paper-raised);
	border: 1px solid var(--line);
	padding: 20px !important;
	margin-bottom: 26px !important;
}
.widget-title,
.widget h2,
.widget h3{
	font-family: var(--font-mono) !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 13px !important;
	border-bottom: 2px solid var(--brand);
	display: inline-block;
	padding-bottom: 6px;
	margin-bottom: 14px !important;
}

/* =========================================================
   9. PAGINA DE LECTURA (nota individual) - blanco y negro clasico
   ========================================================= */
body.single-post .post-inner{
	background: #ffffff !important;
}
body.single-post .entry-title{
	color: #111111 !important;
}
body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .entry-content li,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content blockquote{
	color: #1a1a1a !important;
	font-family: var(--font-body) !important;
}
body.single-post .entry-meta,
body.single-post .entry-meta *{
	color: #666666 !important;
}
body.single-post .post-navigation,
body.single-post .post-navigation *{
	color: #ffffff !important;
}
body.single-post .post-navigation .nav-subtitle{
	color: rgba(255,255,255,.7) !important;
}

/* =========================================================
   10. PIE DE PAGINA
   ========================================================= */
#colophon{
	background: var(--ink) !important;
	color: var(--paper) !important;
}
#colophon a{ color: var(--paper) !important; opacity: .85; }
#colophon a:hover{ opacity: 1; color: var(--brand) !important; }
#colophon .widget-title,
#colophon h2, #colophon h3{
	font-family: var(--font-mono) !important;
	font-size: 12px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #9BAA92 !important;
}
/* la categoria mantiene su propio color sin importar donde este */
.post-meta ul.post-categories li.cat-item a,
.post-meta ul.post-categories li.cat-item a *{
	color: var(--brand-strong) !important;
	background: var(--brand-tint);
}

/* en mobile, la fecha le saca lugar al titular que se desplaza arriba de todo */
@media (max-width: 600px){
	.top-date-time{
		display: none !important;
	}
}

.site-info,
.site-info *{
	font-family: var(--font-mono) !important;
	font-size: 11.5px !important;
	color: #8A9782 !important;
}