) si existe */
.banneritem a {
display: block ;
height: 100% ;
}
/* 5. Ajuste del track (para alineación vertical, ya estaba bien) */
.bannergroupcarussel .slick-track {
display: flex ;
align-items: center ;
}
.t3-header {
padding-top: 10px;
padding-bottom: 10px;
}
#t3-header .row {
display: flex ;
align-items: center ;
min-height: 100% ;
height: auto ;
}
.slideMain .sprocket-features.layout-slideshow .sprocket-features-pagination li {
background-color: rgb(255 255 255) ;
}
.slideMain .sprocket-features.layout-slideshow .sprocket-features-pagination li.active {
background-color: #91c448 ;
}
.slick-prev:before, .slick-next:before {
font-size: 16px ;
}
.slick-prev:before, .slick-next:before {
font-size: 16px ;
}
.bannergroupcarussel .slick-arrow {
padding: 1px ;
background: #314559 ;
}
.slideMain .sprocket-features.layout-slideshow .sprocket-features-arrows .arrow {
background-color: rgba(177, 177, 177, 0.74) ;
}
.t3-spotlight h3 span, .t3-slidefull h3 span {
background-color: #314559 ;
color: white ;
padding: 8px ;
border-radius: 5px ;
}
.readmore a {
background-color: #35495c ;
color: white ;
}
.ts-hotnews.custom-hotnews h3 span {
background-color: transparent ;
color: white ;
display: inline-block ;
width: 117px ;
overflow: hidden ;
white-space: nowrap ;
height: 18px ;
}
.tab-news.blue .gkTabsWrap.vertical .gkTabsContainer {
background-color: rgba(1, 117, 200, 0.122);
padding: 12px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.tab-news.aqua .gkTabsWrap.vertical .gkTabsContainer {
background-color: rgba(0, 200, 189, 0.102);
padding: 12px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.tab-news.pink .gkTabsWrap.vertical .gkTabsContainer {
background-color: rgba(193, 5, 81, 0.129);
padding: 12px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.gkTabsItem.gk-opacity.gk-active {
background-color: transparent;
}
.nspBg .nspArts .nspArt .nspInfo a.nspCategory {
top: 0;
}
.tab-news .nspLinksWrap .nspLinks ul.nspList li {
background-color: transparent;
}
.tab-news .nspLinksWrap .nspLinks ul.nspList li {
padding: 2px 0 34px !important;
}
@media (max-width: 767px) {
.t3-header {
padding-top: 20px;
padding-bottom: 20px;
position: relative;
}
#t3-header .row {
display: flex;
align-items: center;
min-height: 100%;
height: auto;
flex-direction: column;
}
.logo a {
margin: 0;
}
}
@media (max-width: 767px) {
.tab-news .nspLinksWrap .nspLinks ul.nspList li {
padding: 2px 0 5px !important;
text-align: center;
}
}
.slideMain .sprocket-features.layout-slideshow {
text-align: left;
}
.slideMain .sprocket-features.layout-slideshow .sprocket-features-pagination {
background-color: rgba(0, 0, 0, 0.2);
padding: 4px 7px 0px 7px;
border-radius: 19px;
}
.blog-featured {
background-color: #35495c;
padding: 16px;
border-radius: 7px;
}
.article-info dd {
color: white;
}
blockquote p strong {
color: white;
}
/* =========================================================
SIDEBAR LEFT (t3-sidebar-left) – Look moderno tipo cards
Aplica a módulos NSP (News Show Pro)
========================================================= */
.t3-sidebar-left .t3-module.module {
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 16px;
overflow: hidden;
margin: 0 0 18px 0;
box-shadow: 0 10px 26px rgba(0,0,0,.06);
padding: 4px 24px 0px;
}
/* Quita paddings raros del wrapper interno si existen */
.t3-sidebar-left .t3-module.module .module-inner {
padding: 0 !important;
}
/* Título del módulo tipo “TECHNOLOGY” */
.t3-sidebar-left .t3-module.module .module-title {
margin: 0 !important;
padding: 14px 16px 12px !important;
font-weight: 900;
font-size: 18px;
letter-spacing: .4px;
text-transform: uppercase;
border-bottom: 1px solid rgba(0,0,0,.06);
position: relative;
}
.t3-sidebar-left .t3-module.module .module-title span {
display: inline-block;
}
/* Línea/acento bajo el título */
.t3-sidebar-left .t3-module.module .module-title:after {
content: "";
position: absolute;
left: 16px;
bottom: -1px;
width: 48px;
height: 3px;
background: #d81b1b;
border-radius: 999px;
}
/* Contenedor del módulo */
.t3-sidebar-left .t3-module.module .module-ct {
padding: 0 !important;
}
/* ===========================
NSP: navegación (Prev/Next)
=========================== */
.t3-sidebar-left .nspTopInterface {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: 8px;
z-index: 2;
}
/* Links "Prev/Next" como botones */
.t3-sidebar-left .nspTopInterface .nspPrev,
.t3-sidebar-left .nspTopInterface .nspNext {
width: 30px;
height: 30px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, .06);
border: 1px solid rgba(15, 23, 42, .10);
text-decoration: none !important;
font-size: 0; /* ocultamos el texto Prev/Next */
transition: transform .15s ease, background .15s ease, opacity .15s ease;
opacity: .9;
}
.t3-sidebar-left .nspTopInterface .nspPrev:hover,
.t3-sidebar-left .nspTopInterface .nspNext:hover {
background: rgba(15, 23, 42, .10);
transform: translateY(-1px);
opacity: 1;
}
/* Flechas con pseudo-elementos */
.t3-sidebar-left .nspTopInterface .nspPrev:before,
.t3-sidebar-left .nspTopInterface .nspNext:before {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid rgba(15, 23, 42, .8);
border-bottom: 2px solid rgba(15, 23, 42, .8);
display: block;
}
.t3-sidebar-left .nspTopInterface .nspPrev:before {
transform: rotate(135deg);
}
.t3-sidebar-left .nspTopInterface .nspNext:before {
transform: rotate(-45deg);
}
/* ===========================
NSP: bloque de artículos (Notas tendencia)
Convierte items a filas limpias (thumb + texto)
=========================== */
.t3-sidebar-left .nspMain {
position: relative;
}
.t3-sidebar-left .nspArts {
padding: 12px 0 0 !important;
}
/* Cada .nspArt será una fila */
.t3-sidebar-left .nspArt {
padding: 12px 16px !important;
border-top: 1px solid rgba(0,0,0,.06);
}
.t3-sidebar-left .nspArtPage .nspArt:first-child {
border-top: 0;
}
/* Imagen */
.t3-sidebar-left .nspImageWrapper {
margin: 0 12px 0 0 !important;
float: none !important;
display: inline-flex;
}
.t3-sidebar-left .nspImageWrapper .nspImage {
width: 92px !important;
height: 66px !important;
object-fit: cover;
border-radius: 12px;
display: block;
}
/* Header/título */
.t3-sidebar-left .nspHeader {
margin: 0 0 6px 0 !important;
font-size: 15px;
font-weight: 900;
line-height: 1.2;
}
.t3-sidebar-left .nspHeader a {
color: #0f172a !important;
text-decoration: none !important;
}
.t3-sidebar-left .nspHeader a:hover {
text-decoration: underline !important;
}
/* Meta info: fecha / hits / categoría */
.t3-sidebar-left .nspInfo {
margin: 0 !important;
font-size: 12px;
color: rgba(15, 23, 42, .70);
}
.t3-sidebar-left .nspInfo i {
opacity: .75;
}
/* Categoría como badge moderno */
.t3-sidebar-left a.nspCategory,
.t3-sidebar-left a.nspListCategory {
display: inline-block;
margin-left: 6px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(34, 197, 94, .12);
color: #15803d !important;
font-size: 11px;
font-weight: 800;
text-decoration: none !important;
vertical-align: middle;
}
/* ===========================
"Notas populares" – primer item grande (como tu imagen 6)
=========================== */
.t3-sidebar-left #Mod158 .nspArtPage .nspArt {
padding: 14px 16px 16px !important;
}
.t3-sidebar-left #Mod158 .nspArtPage .nspImageWrapper .nspImage {
width: 100% !important;
height: 190px !important;
border-radius: 14px;
}
.t3-sidebar-left #Mod158 .nspHeader {
font-size: 18px !important;
margin-top: 10px !important;
}
/* Texto/intro más limpio */
.t3-sidebar-left #Mod158 .nspText {
margin: 8px 0 0 !important;
color: rgba(15, 23, 42, .80);
font-size: 13px;
line-height: 1.45;
}
/* ===========================
Lista inferior (nspLinksWrap) – items tipo “Technology list”
=========================== */
.t3-sidebar-left .nspLinksWrap {
padding: 0 !important;
border-top: 1px solid rgba(0,0,0,.06);
}
/* Quita estilos viejos */
.t3-sidebar-left .nspLinks,
.t3-sidebar-left .nspList {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Cada li como fila */
.t3-sidebar-left .nspList > li {
display: flex;
gap: 12px;
padding: 12px 16px !important;
border-top: 1px solid rgba(0,0,0,.06);
}
.t3-sidebar-left .nspList > li:first-child {
border-top: 0;
}
.t3-sidebar-left .nspList > li .nspImageWrapper {
margin: 0 !important;
}
.t3-sidebar-left .nspList > li .nspImageWrapper img {
width: 92px !important;
height: 66px !important;
object-fit: cover;
border-radius: 12px;
}
/* Título de cada item en lista */
.t3-sidebar-left .nspList > li h4 {
margin: 0 0 6px 0 !important;
font-size: 14px;
font-weight: 900;
line-height: 1.2;
}
.t3-sidebar-left .nspList > li h4 a {
color: #0f172a !important;
text-decoration: none !important;
}
.t3-sidebar-left .nspList > li p {
margin: 0 !important;
color: rgba(15, 23, 42, .75);
font-size: 13px;
line-height: 1.35;
}
/* =========================================================
SIDEBAR LEFT: títulos estilo "BUSINESS" (texto + raya)
SOLO para módulos con ribbon (title-arrow)
========================================================= */
/* 1) Header estilo BUSINESS (sin caja, con raya) */
.t3-sidebar-left .t3-module.title-arrow .module-title{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 0 12px 0 !important;
padding: 10px 0px 10px 10px !important;
font-weight: 900 !important;
font-size: 22px !important;
letter-spacing: .2px !important;
text-transform: uppercase !important;
color: #0f172a !important;
/* línea sutil + rayita roja (como BUSINESS) */
border-bottom: 1px solid rgba(15,23,42,.12) !important;
background-image: linear-gradient(#d81b1b, #d81b1b) !important;
background-repeat: no-repeat !important;
background-position: 0 100% !important;
background-size: 42px 2px !important;
position: relative !important;
}
/* 2) Quita SOLO el ribbon/triángulos del title-arrow */
.t3-sidebar-left .t3-module.title-arrow .module-title:before,
.t3-sidebar-left .t3-module.title-arrow .module-title:after,
.t3-sidebar-left .t3-module.title-arrow .module-title span:before,
.t3-sidebar-left .t3-module.title-arrow .module-title span:after{
content: none !important;
display: none !important;
}
/* 3) Span del título limpio (sin fondo verde, sin padding raro) */
.t3-sidebar-left .t3-module.title-arrow .module-title span{
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
color: inherit !important;
}
/* 4) No pegues el contenido al título */
.t3-sidebar-left .t3-module.title-arrow .module-ct{
padding-top: 8px !important;
}
/* =========================================================
Flechas NSP: visibles y bien posicionadas
========================================================= */
/* Asegura contenedor relativo para posicionar flechas */
.t3-sidebar-left .nspMain{
position: relative !important;
}
/* Ubica las flechas arriba a la derecha, alineadas al título */
.t3-sidebar-left .nspTopInterface{
position: absolute !important;
top: -2px !important; /* ajusta si quieres más arriba/abajo */
right: 0 !important;
margin: 0 !important;
float: none !important;
display: flex !important;
gap: 8px !important;
z-index: 10 !important;
}
/* Botones */
.t3-sidebar-left .nspTopInterface .nspPrev,
.t3-sidebar-left .nspTopInterface .nspNext{
width: 30px !important;
height: 30px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(15,23,42,.06) !important;
border: 1px solid rgba(15,23,42,.12) !important;
text-decoration: none !important;
color: transparent !important; /* oculta "Prev/Next" */
overflow: hidden !important;
}
/* Iconos garantizados */
.t3-sidebar-left .nspTopInterface .nspPrev:before,
.t3-sidebar-left .nspTopInterface .nspNext:before{
content: "‹" !important;
color: rgba(15,23,42,.85) !important;
font-size: 22px !important;
line-height: 1 !important;
font-weight: 900 !important;
}
.t3-sidebar-left .nspTopInterface .nspNext:before{
content: "›" !important;
}
.t3-sidebar-left .nspTopInterface .nspPrev:hover,
.t3-sidebar-left .nspTopInterface .nspNext:hover{
background: rgba(15,23,42,.10) !important;
}
/* =========================================================
FIX DEFINITIVO: Flechas NSP bonitas (override total)
========================================================= */
.t3-sidebar-left .nspTopInterface .nspPrev,
.t3-sidebar-left .nspTopInterface .nspNext{
/* mata sprites/backgrounds del template */
background-image: none !important;
background: rgba(15,23,42,.06) !important;
border: 1px solid rgba(15,23,42,.12) !important;
/* mata icon fonts raros si los hubiera */
font-family: inherit !important;
width: 30px !important;
height: 30px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-indent: 0 !important; /* por si ocultaban texto */
line-height: 1 !important;
color: transparent !important; /* ocultamos Prev/Next */
overflow: hidden !important;
position: relative !important;
box-shadow: none !important;
}
/* mata pseudo del template si existe */
.t3-sidebar-left .nspTopInterface .nspPrev:after,
.t3-sidebar-left .nspTopInterface .nspNext:after{
content: none !important;
display: none !important;
}
/* nuestro icono (100% garantizado) */
.t3-sidebar-left .nspTopInterface .nspPrev:before,
.t3-sidebar-left .nspTopInterface .nspNext:before{
content: "" !important;
width: 8px !important;
height: 8px !important;
border-right: 2px solid rgba(15,23,42,.85) !important;
border-bottom: 2px solid rgba(15,23,42,.85) !important;
display: block !important;
}
/* izquierda */
.t3-sidebar-left .nspTopInterface .nspPrev:before{
transform: rotate(135deg) !important;
margin-left: 2px !important;
}
/* derecha */
.t3-sidebar-left .nspTopInterface .nspNext:before{
transform: rotate(-45deg) !important;
margin-right: 2px !important;
}
.t3-sidebar-left .nspTopInterface .nspPrev:hover,
.t3-sidebar-left .nspTopInterface .nspNext:hover{
background: rgba(15,23,42,.10) !important;
border-color: rgba(15,23,42,.18) !important;
}
@media (min-width: 1200px) {
.container {
width: 98%;
}
}
/* Base para permitir figuras detrás */
#t3-header.t3-header{
position: relative;
overflow: hidden;
background: #fff; /* fallback */
}
/* Asegura que el contenido quede arriba de las figuras */
#t3-header.t3-header > .container{
position: relative;
z-index: 2;
}
/* INICIA */
#t3-header.t3-header{
background:
linear-gradient(180deg, rgba(8, 149, 71, 0.22) 0%, rgb(8 149 71 / 0%) 60%),
#ffffff;
}
#t3-header.t3-header::before{
content:"";
position:absolute;
top: 8px;
left: -40px;
width: 300px;
height: 300px;
background:
radial-gradient(circle at center,
transparent 58%,
rgb(8 149 71 / 16%) 58%,
rgb(8 149 71 / 16%) 59%,
transparent 59%),
radial-gradient(circle at center,
transparent 74%,
rgb(8 149 71 / 12%) 74%,
rgb(8 149 71 / 12%) 75%,
transparent 75%),
radial-gradient(circle at center,
transparent 88%,
rgb(15 23 42 / 10%) 88%,
rgb(15 23 42 / 10%) 89%,
transparent 89%);
transform: rotate(-8deg);
pointer-events:none;
z-index: 1;
}
#t3-header.t3-header::after{
content:"";
position:absolute;
bottom:-220px;
right:-220px;
width:620px;
height:620px;
background: radial-gradient(circle,
rgb(8 149 71 / 12%) 0%,
rgb(8 149 71 / 0%) 70%);
pointer-events:none;
z-index: 1;
}
/*COSO NUEVO*/
.title-arrow h3.module-title > span {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* QUITAR GLOBO / PIQUITO DE LOS LABELS */
.ts-content-mid .t3-module .module-title span::after {
display: none !important;
content: none !important;
}
/* ===============================
CONTENT MID – ELEGANTE + MISMA ALTURA
================================ */
/* Contenedor general */
.ts-content-mid { margin: 20px 0 30px; }
/* Tarjeta del módulo (menos borde, más elegante) */
.ts-content-mid .t3-module{
background:#fff;
border-radius: 18px;
overflow:hidden;
}
.ts-content-mid .t3-module .module-inner{ padding: 14px 16px 10px; }
/* Header de sección: label sobrio + línea fina */
.ts-content-mid .module-title{ margin: 0 0 14px; }
.ts-content-mid .module-title span{
display:inline-block;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(15, 23, 42, .92);
background: rgba(15, 23, 42, .06);
}
/* Reemplazamos naranja/verde chillón por acentos sobrios */
.ts-content-mid .t3-module.orange .module-title span{
padding-left: 0;
background: transparent; /* dorado sobrio */
color: rgba(66, 49, 0, .95);
}
.ts-content-mid .t3-module.green .module-title span{
padding-left: 0;
background: transparent; /* verde oscuro sobrio */
color: rgba(0, 64, 32, .95);
}
/* quitamos cualquier "globo" */
.ts-content-mid .module-title span::after{ display:none !important; content:none !important; }
/* Línea fina bajo el título (muy formal) */
.ts-content-mid .module-title{
position: relative;
padding-bottom: 10px;
}
.ts-content-mid .module-title::after{
content:"";
position:absolute;
left:0;
bottom:0;
width: 56px;
height: 2px;
border-radius: 2px;
background: rgba(15, 23, 42, .18);
}
.ts-content-mid .t3-module.orange .module-title::after{ background: rgba(185, 140, 0, .55); }
.ts-content-mid .t3-module.green .module-title::after{ background: rgba(0, 102, 51, .55); }
/* ====== GRID NSP: misma altura por fila ======
NSP usa floats/cols: forzamos que las columnas sean flex
*/
.ts-content-mid .nspArtPage{
display:flex;
flex-wrap: wrap;
gap: 14px;
}
/* Cada item ocupa 50% - gap */
.ts-content-mid .nspArt.nspCol2{
width: calc(50% - 7px) !important;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 0 !important;
display:flex;
flex-direction: column; /* para empujar meta abajo */
background:#fff;
/* menos borde, más limpio */
border: 1px solid rgba(15, 23, 42, .06);
border-radius: 16px;
box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
overflow:hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.ts-content-mid .nspArt:hover{
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}
/* Imagen: tamaño consistente */
.ts-content-mid .nspImageWrapper{
display:block !important;
float:none !important;
width:100% !important;
margin:0 !important;
aspect-ratio: 16/9;
overflow:hidden;
background: #f3f4f6;
}
.ts-content-mid .nspImageWrapper img{
width:100% !important;
height:100% !important;
object-fit: cover;
display:block;
}
/* Área de texto: padding consistente */
.ts-content-mid .nspHeader{
margin: 10px 12px 8px !important;
}
/* Título a 2 líneas fijas => altura uniforme */
.ts-content-mid .nspHeader a{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
min-height: 2.6em; /* asegura misma altura aunque sea 1 línea */
font-size: 15px;
line-height: 1.3;
font-weight: 750;
color: rgba(15, 23, 42, .96);
text-decoration:none;
}
.ts-content-mid .nspHeader a:hover{ text-decoration: underline; }
/* Meta al fondo, siempre alineada */
.ts-content-mid .nspInfo1{
margin: auto 12px 12px !important; /* auto empuja al fondo */
padding-top: 8px;
border-top: 1px solid rgba(15, 23, 42, .06);
font-size: 12px;
color: rgba(15, 23, 42, .58);
display:flex;
justify-content: space-between;
align-items:center;
gap: 10px;
}
/* íconos más sobrios */
.ts-content-mid .nspInfo1 i{ opacity: .75; }
/* Mobile: 1 columna */
@media (max-width: 575px){
.ts-content-mid .nspArt.nspCol2{
width: 100% !important;
}
.ts-content-mid .nspArtPage{ gap: 12px; }
}
/* FIN CUSTOM - NEW **/
/* ==================================================
VOZ URBANA / TAB-NEWS
Selector correcto: .t3-content-top.vv-block
================================================== */
/* Contenedor principal */
.t3-content-top.vv-block .t3-module {
background: #fff !important;
border: 1px solid #e6e8ee !important;
border-radius: 18px !important;
box-shadow: 0 6px 18px rgba(15,23,42,.06) !important;
}
/* ---------- TABS ---------- */
.t3-content-top.vv-block .gkTabsNav {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 10px !important;
margin: 0 !important;
list-style: none !important;
}
/* cada tab */
.t3-content-top.vv-block .gkTabsNav > li {
padding: 0 !important;
margin: 0 !important;
height: 34px !important;
line-height: 34px !important;
border-radius: 999px !important;
border: 1px solid #dfe3ea !important;
background: #f7f8fa !important;
color: #6b7280 !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
cursor: pointer !important;
}
/* activo */
.t3-content-top.vv-block .gkTabsNav > li.active {
background: #0b4aa2 !important;
color: #fff !important;
border-color: #0b4aa2 !important;
}
/* mata círculos / flechas del template */
.t3-content-top.vv-block .gkTabsNav > li::before,
.t3-content-top.vv-block .gkTabsNav > li::after {
content: none !important;
display: none !important;
}
/* ---------- LAYOUT IZQ / DER ---------- */
/* wrapper principal */
.t3-content-top.vv-block .nspMain {
display: flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
}
/* columnas (pisan width inline 50% / 49.9%) */
.t3-content-top.vv-block .nspArts,
.t3-content-top.vv-block .nspLinksWrap {
float: none !important;
width: 50% !important;
max-width: 50% !important;
box-sizing: border-box !important;
}
/* margen inline que rompía */
.t3-content-top.vv-block .nspLinks {
margin: 0 !important;
}
/* ---------- IMÁGENES ---------- */
/* pisa width/height inline */
.t3-content-top.vv-block img.nspImage {
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* featured */
.t3-content-top.vv-block .nspFeatured .nspImageWrapper {
width: 100% !important;
}
/* ---------- LISTA DERECHA ---------- */
.t3-content-top.vv-block .nspList li {
display: flex !important;
gap: 12px !important;
align-items: flex-start !important;
}
.t3-content-top.vv-block .nspList li > div {
min-width: 0 !important;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
.t3-content-top.vv-block .nspArts,
.t3-content-top.vv-block .nspLinksWrap {
width: 100% !important;
max-width: 100% !important;
}
}
/* CONTINUA */
body {
background: linear-gradient(
rgba(244, 246, 245, 0.92),
rgba(244, 246, 245, 0.92)
),
url("/preview/images/rebrand/isotipo.png");
background-repeat: repeat;
background-size: 48px;
}
.t3-footer {
background:
linear-gradient(rgb(27 39 35 / 85%), rgb(6 9 8 / 91%)), url(/preview/images/rebrand/puente.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
.t3-copyright {
background: #1e2833;
}
.t3-copyright .copyright {
width: 100% !important;
}
/* VISTAS AISLADAS */
/* =========================
K2 Category (ItemListView) – Vivavoz coherent cards + responsive
Works with your existing markup (K2 v2.9)
========================= */
/* --- Base container spacing --- */
#k2Container.itemListView {
--vv-radius: 14px;
--vv-border: rgba(0,0,0,.08);
--vv-shadow: 0 10px 30px rgba(0,0,0,.08);
--vv-shadow-sm: 0 6px 18px rgba(0,0,0,.08);
--vv-gap: 18px;
--vv-text: rgba(0,0,0,.78);
--vv-muted: rgba(0,0,0,.56);
--vv-bg: #fff;
padding: 8px 0 22px;
}
/* Kill old floats/clears from K2 where possible */
#k2Container .clr { display: none; }
/* Normalize images */
#k2Container img,
#k2Container .catItemImage img {
max-width: 100%;
height: auto;
display: block;
}
/* --- Category header block --- */
#k2Container .itemListCategoriesBlock {
margin: 0 0 18px;
}
#k2Container .itemListCategory {
background: var(--vv-bg);
border: 1px solid var(--vv-border);
border-radius: var(--vv-radius);
padding: 16px 16px;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
#k2Container .itemListCategory img {
display:none;
}
#k2Container .itemListCategory .module-title {
margin: 0;
line-height: 1.15;
font-size: 1.2rem;
letter-spacing: -.2px;
}
#k2Container .itemListCategory p {
margin: 8px 0 0;
color: var(--vv-muted);
}
/* RSS icon block – make it subtle */
#k2Container .k2FeedIcon {
display: flex;
justify-content: flex-end;
margin: 0 0 10px;
}
#k2Container .k2FeedIcon a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid var(--vv-border);
color: var(--vv-muted);
background: rgba(255,255,255,.65);
text-decoration: none;
font-size: .92rem;
}
#k2Container .k2FeedIcon a:hover {
color: var(--vv-text);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
/* --- Remove inline width layouts from itemContainer (K2 injects style="width:..") --- */
#k2Container .itemContainer {
width: 100% !important;
float: none !important;
}
/* --- Global card look for each item --- */
#k2Container .catItemView {
background: var(--vv-bg);
border: 1px solid var(--vv-border);
border-radius: var(--vv-radius);
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#k2Container .catItemView:hover {
transform: translateY(-2px);
box-shadow: var(--vv-shadow-sm);
border-color: rgba(0,0,0,.12);
}
/* spacing inside */
#k2Container .catItemHeader,
#k2Container .catItemBody {
padding: 14px 16px;
}
/* Titles */
#k2Container .catItemTitle {
margin: 0 0 8px;
line-height: 1.15;
font-size: 1.08rem;
letter-spacing: -.2px;
}
#k2Container .catItemTitle a {
color: rgba(0,0,0,.88);
text-decoration: none;
}
#k2Container .catItemTitle a:hover {
text-decoration: underline;
}
/* Meta row (author/date) */
#k2Container .catItemInfo {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
color: var(--vv-muted);
font-size: .9rem;
}
#k2Container .catItemAuthor a {
color: rgba(0,0,0,.70);
text-decoration: none;
font-weight: 600;
}
#k2Container .catItemAuthor a:hover { text-decoration: underline; }
#k2Container .catItemDateCreated {
color: var(--vv-muted);
}
/* Category pill inside items */
#k2Container .catItemCategory {
padding: 0;
border-radius: 10px;
}
#k2Container .catItemCategory a {
display: inline-flex;
padding: 0px 10px 0px 10px;
/* border-radius: 999px; */
color: rgb(13 78 41);
text-decoration: none;
font-size: .85rem;
font-weight: 700;
}
#k2Container .catItemCategory a:hover {
background: rgba(0,0,0,.08);
}
/* Intro text clean */
#k2Container .catItemIntroText {
color: var(--vv-text);
line-height: 1.55;
}
#k2Container .catItemIntroText p {
margin: 0 0 10px;
}
#k2Container .catItemIntroText p:empty { display: none; }
/* Read more area */
#k2Container .catItemReadMore {
padding: 0 16px 16px;
}
#k2Container .catItemReadMore .btn,
#k2Container .catItemReadMore a.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(0,0,0,.02);
color: rgba(0,0,0,.85);
text-decoration: none;
font-weight: 700;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#k2Container .catItemReadMore .btn:hover,
#k2Container .catItemReadMore a.btn:hover {
background: rgba(0,0,0,.05);
box-shadow: 0 10px 24px rgba(0,0,0,.10);
transform: translateY(-1px);
}
/* --- Image block: make it nicer (cover crop) --- */
#k2Container .catItemImageBlock {
position: relative;
background: rgba(0,0,0,.03);
}
#k2Container .catItemImageBlock .catItemImage {
display: block;
}
#k2Container .catItemImageBlock .catItemImage img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid var(--vv-border);
}
/* If some items have no image block, keep spacing consistent */
#k2Container .catItemHeader:first-child {
border-top-left-radius: var(--vv-radius);
border-top-right-radius: var(--vv-radius);
}
/* =========================
LAYOUT: Leading / Primary / Secondary / Links
========================= */
/* Leading: vertical hero cards with bigger title */
#k2Container #itemListLeading {
display: grid;
grid-template-columns: 1fr;
gap: var(--vv-gap);
margin: 0 0 18px;
}
#k2Container #itemListLeading .catItemTitle {
font-size: 1.25rem;
}
/* Primary: grid (2 cols desktop, 1 col mobile) */
#k2Container #itemListPrimary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--vv-gap);
margin: 0 0 18px;
}
/* Secondary: clean stacked list */
#k2Container #itemListSecondary {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 0 0 18px;
}
#k2Container #itemListSecondary .catItemView {
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
#k2Container #itemListSecondary .catItemTitle {
font-size: 1.05rem;
}
/* Links section: compact list with image on left */
#k2Container #itemListLinks {
background: rgba(0,0,0,.02);
border: 1px solid var(--vv-border);
border-radius: var(--vv-radius);
padding: 12px;
display: flex;
flex-direction: row;
/* align-content: center; */
justify-content: center;
align-items: flex-start;
}
#k2Container #itemListLinks > h4 {
margin: 0 0 10px;
font-size: 1.05rem;
color: rgba(0,0,0,.85);
}
#k2Container #itemListLinks .catItemView.groupLinks {
display: grid;
grid-template-columns: 92px 1fr;
gap: 12px;
align-items: center;
padding: 10px 10px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.08);
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
margin: 0 0 10px;
}
#k2Container #itemListLinks .catItemView.groupLinks .catItemTitle {
margin: 0;
font-size: .98rem;
}
#k2Container #itemListLinks .catItemView.groupLinks .catItemImageBlock {
padding: 0;
background: transparent;
}
#k2Container #itemListLinks .catItemView.groupLinks .catItemImageBlock img {
width: 92px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.10);
}
#k2Container #itemListLinks .catItemView.groupLinks .clr { display: none; }
/* =========================
Pagination styling
========================= */
#k2Container .pagination {
margin-top: 18px;
}
#k2Container .pagination ul.pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 0;
margin: 0;
}
#k2Container .pagination ul.pagination > li {
list-style: none;
}
#k2Container .pagination ul.pagination > li > a,
#k2Container .pagination ul.pagination > li > span,
#k2Container .pagination ul.pagination > li > strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.12);
background: #fff;
color: rgba(0,0,0,.75);
text-decoration: none;
font-weight: 700;
}
#k2Container .pagination ul.pagination > li.active > a {
background: rgba(0,0,0,.08);
color: rgba(0,0,0,.88);
}
#k2Container .pagination ul.pagination > li.disabled > a {
opacity: .45;
cursor: not-allowed;
}
/* =========================
Responsive tweaks
========================= */
@media (max-width: 992px) {
#k2Container #itemListPrimary {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
#k2Container .itemListCategory {
padding: 14px 12px;
}
#k2Container .catItemHeader,
#k2Container .catItemBody {
padding: 12px 12px;
}
#k2Container .catItemReadMore {
padding: 0 12px 12px;
}
#k2Container #itemListLinks .catItemView.groupLinks {
grid-template-columns: 72px 1fr;
}
#k2Container #itemListLinks .catItemView.groupLinks .catItemImageBlock img {
width: 72px;
}
#k2Container .catItemTitle {
font-size: 1.02rem;
}
#k2Container #itemListLeading .catItemTitle {
font-size: 1.15rem;
}
}
/* Optional: reduce empty paragraphs produced by K2 editor */
#k2Container .catItemIntroText p {
min-height: 0;
}
#k2Container .catItemIntroText p {
margin-bottom: 10px;
}
#k2Container .catItemIntroText p:has(br):empty { display:none; } /* si tu navegador lo soporta */
#k2Container .catItemIntroText p {
/* oculta párrafos que solo traen espacios */
}
#k2Container .catItemIntroText p {
/* fallback: si el trae solo o espacios, se seguirá viendo.
La solución real es limpiar el contenido o un override PHP. */
}
/* ===== Category title clean style (no green badge) ===== */
#k2Container .itemListCategory .title-arrow {
background: none !important;
padding: 0 !important;
margin: 0 0 14px 0;
position: relative;
}
/* Quitar flechas / picos si existen */
#k2Container .itemListCategory .title-arrow::before,
#k2Container .itemListCategory .title-arrow::after {
content: none !important;
display: none !important;
}
/* Título */
#k2Container .itemListCategory .module-title {
margin: 0;
padding: 0 0 10px 0;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -.3px;
color: #111;
position: relative;
display: inline-block;
}
/* Línea roja debajo */
#k2Container .itemListCategory .module-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 3px;
background: #c62828; /* rojo editorial */
border-radius: 2px;
}
/* Quitar estilos tipo badge del span */
#k2Container .itemListCategory .module-title span {
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
color: inherit;
}
/* Responsive */
@media (max-width: 768px) {
#k2Container .itemListCategory .module-title {
font-size: 1.3rem;
}
#k2Container .itemListCategory .module-title::after {
width: 44px;
}
}