/* ==========================================================================
   Canal Empresas — Rediseño "Limpio y Moderno" + Navegación móvil
   Hoja de estilos aditiva (no reescribe Newsup Pro). Se encola la última.
   ========================================================================== */

:root{
	--ce-ink:        #0f1720;   /* texto principal casi-negro */
	--ce-body:       #33404d;   /* texto de cuerpo */
	--ce-muted:      #6b7683;   /* metadatos, fechas */
	--ce-brand:      #0a4d8c;   /* azul corporativo profundo */
	--ce-brand-600:  #0c5aa6;
	--ce-accent:     #1a73e8;   /* azul vivo para enlaces/hover */
	--ce-hot:        #e0361f;   /* rojo controlado: destacados/breaking */
	--ce-line:       #e7ebf0;   /* líneas y bordes suaves */
	--ce-bg:         #ffffff;
	--ce-bg-soft:    #f6f8fb;   /* fondos de sección */
	--ce-radius:     12px;
	--ce-shadow:     0 4px 18px rgba(15,23,32,.08);
	--ce-shadow-lg:  0 12px 34px rgba(15,23,32,.14);
	--ce-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ce-head: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Tipografía base ---------- */
body{
	font-family: var(--ce-sans);
	color: var(--ce-body);
	font-size: 16px;
	line-height: 1.7;
	background-color: #eef1f5 !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.wrapper{ background-color: var(--ce-bg); }
h1,h2,h3,h4,h5,h6,
.site-title,.title,.mg-sec-title,.entry-title,.post-title{
	font-family: var(--ce-head);
	color: var(--ce-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
a{ color: var(--ce-accent); }
a:hover,a:focus{ color: var(--ce-brand); }

/* Cuerpo del artículo: lectura cómoda */
.mg-blog-content,.entry-content,.single-content,.post-content{
	font-size: 1.075rem;
	line-height: 1.8;
	color: var(--ce-body);
}
.mg-blog-content p,.entry-content p{ margin-bottom: 1.25em; }
.mg-blog-content h2,.entry-content h2{ margin: 1.6em 0 .6em; font-size: 1.6rem; }
.mg-blog-content h3,.entry-content h3{ margin: 1.4em 0 .5em; font-size: 1.3rem; }
.mg-blog-content img,.entry-content img{ border-radius: var(--ce-radius); }

/* ---------- Categorías / etiquetas ---------- */
.mg-blog-category a,.cat-links a,.post-cat a,.mg-cat a{
	display:inline-block;
	background: var(--ce-brand);
	color:#fff !important;
	font-family: var(--ce-head);
	font-weight:600;
	font-size:.68rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:5px 11px;
	border-radius:999px;
	line-height:1;
}
.mg-blog-category a:hover,.mg-cat a:hover{ background: var(--ce-brand-600); }

/* ---------- Tarjetas de noticia ---------- */
.mg-posts .mg-blog,.mg-blog,.post-item,article.bottom{
	background: var(--ce-bg);
	border:1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	overflow:hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mg-posts .mg-blog:hover,.mg-blog:hover,article.bottom:hover{
	transform: translateY(-3px);
	box-shadow: var(--ce-shadow-lg);
	border-color: transparent;
}
.mg-blog .mg-blog-thumb img,.mg-blog img,.post-thumb img{
	transition: transform .4s ease;
	width:100%;
}
.mg-blog:hover .mg-blog-thumb img{ transform: scale(1.04); }
.title a,h4.title a,.entry-title a{ color: var(--ce-ink); }
.title a:hover,h4.title a:hover,.entry-title a:hover{ color: var(--ce-brand); }
.mg-blog-meta,.post-meta,.entry-meta{ color: var(--ce-muted); font-size:.82rem; }
.mg-blog-meta a{ color: var(--ce-muted); }

/* ---------- Títulos de sección ---------- */
.mg-sec-title,.widget-title,.mg-widget h6{
	position:relative;
	font-family: var(--ce-head);
	font-weight:700;
	text-transform:none;
}

/* ---------- Botones ---------- */
.btn,.mg-btn,button.btn,input[type="submit"],.more-link,.read-more{
	font-family: var(--ce-head);
	font-weight:600;
	border-radius:10px;
	padding:11px 20px;
	transition: background .18s ease, transform .12s ease;
}
.btn:hover,.mg-btn:hover,.more-link:hover{ transform: translateY(-1px); }
.btn-primary,.mg-btn{ background: var(--ce-brand); border-color: var(--ce-brand); }
.btn-primary:hover,.mg-btn:hover{ background: var(--ce-brand-600); border-color: var(--ce-brand-600); }

/* ---------- Cabecera: limpieza ---------- */
.navbar-wp{ box-shadow: 0 2px 10px rgba(15,23,32,.06); }
.nav.navbar-nav > li > a{
	font-family: var(--ce-head);
	font-weight:600;
	font-size:.95rem;
	letter-spacing:.01em;
}

/* ==========================================================================
   NAVEGACIÓN MÓVIL — panel deslizante con targets grandes
   Breakpoint lg de Bootstrap (navbar-expand-lg = <992px es móvil)
   ========================================================================== */
@media (max-width: 991.98px){

	/* La barra con el botón hamburguesa se queda fija arriba */
	.mg-menu-full,.mg-main-nav{
		position: sticky;
		top: 0;
		z-index: 1060;
		background: #fff;
		box-shadow: 0 2px 12px rgba(15,23,32,.08);
	}

	/* Botón hamburguesa: área táctil amplia y visible */
	.navbar-toggler{
		width:48px; height:48px;
		display:flex !important;
		align-items:center; justify-content:center;
		border:1px solid var(--ce-line) !important;
		border-radius:12px !important;
		background:#fff !important;
		position: relative;
		z-index: 1062;
	}
	.navbar-toggler .navbar-toggler-icon{
		width:22px; height:2px; background: var(--ce-ink);
		position:relative; transition:.2s;
	}
	.navbar-toggler .navbar-toggler-icon::before,
	.navbar-toggler .navbar-toggler-icon::after{
		content:""; position:absolute; left:0; width:22px; height:2px; background: var(--ce-ink);
	}
	.navbar-toggler .navbar-toggler-icon::before{ top:-7px; }
	.navbar-toggler .navbar-toggler-icon::after{ top:7px; }
	/* Al abrir, el theme muestra el span .close (fa-times): lo agrandamos */
	.navbar-toggler .close{ font-size:22px; color: var(--ce-ink); opacity:1; }

	/* Botón home y buscador móvil: targets de 48px */
	.mobilehomebtn,.mg-search-box .msearch{
		width:48px; height:48px;
		display:flex !important; align-items:center; justify-content:center;
		border-radius:12px;
		font-size:18px;
		color: var(--ce-ink);
	}

	/* El menú colapsable se convierte en panel lateral deslizante */
	#navbar-wp.navbar-collapse{
		position: fixed;
		top:0; right:0;
		width: 86%;
		max-width: 360px;
		height: 100vh !important;
		background:#fff;
		z-index: 1055;
		display:block !important;
		transform: translateX(100%);
		transition: transform .3s cubic-bezier(.4,0,.2,1);
		overflow-y:auto;
		padding: 78px 0 32px;
		box-shadow: none;
	}
	#navbar-wp.navbar-collapse.show{
		transform: translateX(0) !important;
		box-shadow: 0 0 0 100vmax rgba(15,23,32,.5); /* backdrop solo al abrir */
	}

	/* Encabezado del panel */
	#navbar-wp.navbar-collapse::before{
		content:"Navegación";
		position:absolute; top:26px; left:24px;
		font-family: var(--ce-head); font-weight:700; font-size:.78rem;
		letter-spacing:.14em; text-transform:uppercase; color: var(--ce-muted);
	}

	/* Enlaces del menú: full-width, grandes y fáciles de tocar */
	#navbar-wp .nav.navbar-nav{ width:100%; }
	#navbar-wp .nav.navbar-nav > li{
		width:100%;
		border-bottom:1px solid var(--ce-line);
	}
	#navbar-wp .nav.navbar-nav > li > a{
		display:flex; align-items:center;
		min-height:56px;
		padding:14px 24px !important;
		font-family: var(--ce-head);
		font-size:1.05rem !important;
		font-weight:600;
		color: var(--ce-ink) !important;
		width:100%;
	}
	#navbar-wp .nav.navbar-nav > li > a:hover,
	#navbar-wp .nav.navbar-nav > li.current-menu-item > a{
		background: var(--ce-bg-soft);
		color: var(--ce-brand) !important;
	}
	/* Submenús desplegados en bloque, sangrados */
	#navbar-wp .nav.navbar-nav .dropdown-menu,
	#navbar-wp .nav.navbar-nav .sub-menu{
		position:static !important; float:none; width:100%;
		border:0; box-shadow:none; background: var(--ce-bg-soft);
	}
	#navbar-wp .nav.navbar-nav .sub-menu > li > a,
	#navbar-wp .nav.navbar-nav .dropdown-menu > li > a{
		min-height:48px; padding:12px 24px 12px 40px !important;
		font-size:.98rem; color: var(--ce-body) !important;
	}
}

/* ---------- Accesibilidad: foco visible ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
	outline:3px solid rgba(26,115,232,.5);
	outline-offset:2px;
}

/* ---------- Enlaces del cuerpo del artículo subrayados ---------- */
.mg-blog-content a,.entry-content a{
	color: var(--ce-accent);
	text-decoration: underline;
	text-underline-offset:2px;
	text-decoration-thickness: from-font;
}