/*
CTC Separate Stylesheet
Updated: 2025-03-27 18:09:04
Theme Name: Thinkia
Template: neuros
Author: David
Version: 1.0.1743098944
*/

/* ===================================================================
   1. ESTILOS GENERALES Y VARIABLES (MODO LIGHT)
   =================================================================== */

body.modo-light {
  --e-global-color-text-light: var(--e-global-color-secondary);
  --e-global-color-secondary-light: var(--e-global-color-e4c8a1e);
  --arrow-normal-color: hsla(0, 0%, 20%, 0.9);
  
  background-color: var(--e-global-color-secondary-light);
}

body.modo-light code {
   background-color: lightgray;
}

/* ===================================================================
   2. INTERCAMBIO DE LOGOS
   =================================================================== */

/* Por defecto, se muestra el logo oscuro */
.logo-claro {
  display: none !important;
}
.logo-oscuro {
  display: inline-block !important;
}

/* En modo light, se invierte la visibilidad */
body.modo-light .logo-claro {
  display: inline-block !important;
}
body.modo-light .logo-oscuro {
  display: none !important;
}

/* ===================================================================
   3. CONTENIDO PRINCIPAL Y TIPOGRAFÍA
   =================================================================== */

body.modo-light .content-wrapper {
  margin-top: 100px;
}

/* Aplica el color de texto a todos los elementos dentro de .content-wrapper */
body.modo-light .content-wrapper,
body.modo-light .content-wrapper h1,
body.modo-light .content-wrapper h2,
body.modo-light .content-wrapper h3,
body.modo-light .content-wrapper h4,
body.modo-light .content-wrapper h5,
body.modo-light .content-wrapper h6,
body.modo-light .content-wrapper p,
body.modo-light .content-wrapper a,
body.modo-light .content-wrapper li,
body.modo-light .content-wrapper span,
body.modo-light .content-wrapper strong,
body.modo-light .content-wrapper em,
body.modo-light .content-wrapper label,
body.modo-light .content-wrapper input,
body.modo-light .content-wrapper textarea,
body.modo-light .content-wrapper select,
body.modo-light .content-wrapper .wpforms-form input,
body.modo-light .content-wrapper .wpforms-form textarea,
body.modo-light .content-wrapper .wpforms-form select {
  color: var(--e-global-color-text-light) !important;
}

/* Estilo específico para enlaces dentro del contenido del post */
body.modo-light .post-content a {
  color: var(--e-global-color-accent) !important;
}

/* Proteger títulos de página de servicios */
body.modo-light .page-title-container .page-title,
body.modo-light .page-title-container h1,
body.modo-light .page-title-container h2,
body.modo-light .page-title-container h3,
body.modo-light .page-title-container h4,
body.modo-light .page-title-container h5,
body.modo-light .page-title-container h6 {
  color: inherit !important;
}

/* ===================================================================
   4. ESTILOS DE ENTRADAS DE BLOG (POSTS)
   =================================================================== */

body.modo-light .blog-item {
  background-color: var(--e-global-color-e4c8a1e); /* Blanco puro */
}

/* Elimina pseudo-elemento en el contenedor del blog */
body.modo-light .standard-blog-item-wrapper:not(.neuros-format-quote) .blog-item:before,
body.modo-light .grid-blog-item-wrapper:not(.neuros-format-quote) .blog-item:before {
  content: none !important;
  display: none !important;
}

/* Imagen destacada del post */
body.modo-light .content-wrapper .post-media-wrapper img {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  object-fit: cover;
  max-height: 500px;
}

/* --- Metadatos y Categorías del Post --- */

body.modo-light .post-meta-header:not(:first-child) {
  margin: 2px 2px 0;
}

body.modo-light .post-meta-item-tags a{
	margin: 0px 0px 0px 0px !important; 
}



body.modo-light .content-wrapper .post-meta-items-wrapper,
body.modo-light .content-wrapper .post-meta-items-wrapper span,
body.modo-light .content-wrapper .post-meta-items-wrapper i {
  color: var(--e-a-color-white) !important;
}

body.modo-light .content-wrapper .post-meta-items-wrapper a {
  color: var(--e-global-color-secondary) !important;
}

body.modo-light .post-meta-items-wrapper::after {
  box-shadow: 0 0 0 0 !important;
}

body.modo-light .post-meta-items {
  padding: 7px 24px 3px !important;
  border: 0 !important;
  text-transform: uppercase;
  border-radius: 25px;
  display: inline-block;
  background: transparent;
  color: var(--e-global-color-secondary) !important;
}

body.modo-light .post-categories {
  display: inline;
 

}

body.modo-light a.post-category-item {
	color: var(--e-global-color-text) !important;
	background-color: var(--e-global-color-secondary) !important;
	border-radius: 999px !important;
	padding: 6px 12px !important;
	margin-top: -50px;
    margin-left: -130px;
}

body.modo-light a.post-category-item:hover {
	background-color: var(--e-global-color-secondary) !important;
}

.post-categories .post-category-item:before, .post-categories .post-category-item:after {
	content: '/';
	display: inline-block;
	margin-right: 5px !important;
	color: transparent;
}
.post-categories .post-category-item:hover:before, 
.post-categories .post-category-item:hover:after {
	content: '/';
	display: inline-block;
	margin-right: 5px !important;
	color: var(--e-global-color-accent) !important;
}

/* ===================================================================
   5. SIDEBAR Y WIDGETS
   =================================================================== */

body.modo-light .sidebar .widget .widget-title:first-child:before,
body.modo-light .sidebar .widget .wp-block-heading:first-child:before,
body.modo-light .sidebar .widget .wp-block-search__label:first-child:before {
  content: '';
  display: block;
  font-family: 'fontello';
  font-size: 0.36em;
  font-weight: 400;
  position: absolute;
  top: 0;
  right: 0;
}

/* --- Widget de Categorías --- */

body.modo-light .wp-block-categories-list .cat-item {
  padding: 10px 0;
}

body.modo-light .cat-item a{
  color: var(--e-global-color-text) !important;
  font-size: 18px;
  font-weight: 400;
  background-color: #1A224C !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
}    


body.modo-light .widget_categories ul > li:before,
body.modo-light ul.wp-block-categories > li:before {
  content: '';

}

body.modo-light .widget_categories ul > li:hover:before,
body.modo-light ul.wp-block-categories > li:hover:before {
  content: '';

}

/* --- Widget de Nube de Etiquetas (Tag Cloud) --- */

body.modo-light .wp-block-tag-cloud,
body.modo-light .post-meta-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  max-width: 100%;
}

body.modo-light .wp-block-tag-cloud .tag-cloud-link {
  margin: 0;
}

body.modo-light .wp-block-tag-cloud a,
body.modo-light .post-meta-item-tags a{
	display: inline-flex;
	align-items: center;
	background-color: transparent !important;
	border: 1px solid var(--e-global-color-secondary) !important;
	border-radius: 999px;
	font-size: 14px !important;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: background-color 0.3s, color 0.3s;
	padding: 12px 12px;
}

body.modo-light .wp-block-tag-cloud a:hover,
body.modo-light .post-meta-item-tags a:hover 
{
	color: var(--e-global-color-accent) !important;
	background-color: transparent;
}

body.modo-light .wp-block-tag-cloud a::before,
body.modo-light .post-meta-item-tags a::before,
body.modo-light .cat-item a::before,
body.modo-light .wp-block-tag-cloud a::after,
body.modo-light .post-meta-item-tags a::after,
body.modo-light .cat-item a::after{
  content: '/';
  display: inline-block;
  color: transparent;
  background-color: transparent;
  transition: color 0.3s ease;
}

body.modo-light .wp-block-tag-cloud a::before,
body.modo-light .cat-item a::before,
body.modo-light .post-meta-item-tags a::before {
  margin-right: 6px;
}

body.modo-light .wp-block-tag-cloud a::after,
body.modo-light .cat-item a::after,
body.modo-light .post-meta-item-tags a::after {
  margin-left: 6px;
}

body.modo-light .wp-block-tag-cloud a:hover::before,
body.modo-light .post-meta-item-tags a:hover::before,
body.modo-light .cat-item a:hover::before,
body.modo-light .wp-block-tag-cloud a:hover::after,
body.modo-light .post-meta-item-tags a:hover::after,
body.modo-light .cat-item a:hover::after
{
	content: '/';
	background-color: transparent;
	color: var(--e-global-color-accent);
}


/* ===================================================================
   6. MENÚ DE NAVEGACIÓN (MEGA MENU)
   =================================================================== */

body.modo-light #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
  color: var(--e-global-color-secondary) !important;
}

body.modo-light #mega-menu-wrap-main .mega-menu-toggle {
  background: none !important;
}
.widget_neuros_nav_menu_widget ul li > a:after,
.widget_neuros_nav_menu_widget ul li > a:before
{	
	color: var(--e-global-color-accent);
	padding-left: 6px;
	padding-right: 0px;
}
.widget_neuros_nav_menu_widget ul li > a
{
  margin-bottom: 6px;
}

.single-post .post-meta-footer:not(:first-child):before
{
  background: none !important;
}

body.modo-light #mega-menu-wrap-main .mega-menu-toggle + #mega-menu-main,
body.modo-light #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
body.modo-light #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
body.modo-light #mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  background: var(--e-global-color-e4c8a1e) !important;
}

body.modo-light #mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  color: #000000;
}

/***widget**/
body.modo-light .sidebar .widget .widget-title:first-child,.sidebar,
body.modo-light .widget .wp-block-heading:first-child,
body.modo-light .sidebar .widget .widget-wrapper h3:not(:last-child) {
	border: none;
	margin-bottom: 5px !important;
}

/* ===================================================================
   7. ESTILOS DEL CARRUSEL EN MODO LIGHT
   =================================================================== */

/* Flechas del carrusel */
body.modo-light .elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next svg,
body.modo-light .elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev svg {
    fill: var(--arrow-normal-color, hsla(0, 0%, 20%, 0.9));
}

/* Puntitos (pagination) del carrusel */
body.modo-light .swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: hsla(0, 0%, 40%, 0.6);
}

body.modo-light .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: hsla(0, 0%, 20%, 0.9);
}

/* Estilos más específicos para el carrusel de Elementor */
body.modo-light .elementor-widget-loop-carousel .swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: hsla(0, 0%, 40%, 0.6);
}

body.modo-light .elementor-widget-loop-carousel .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: hsla(0, 0%, 20%, 0.9);
}

/* Estilos adicionales para todas las variantes posibles */
body.modo-light .swiper-pagination-clickable .swiper-pagination-bullet {
    background-color: hsla(0, 0%, 40%, 0.6);
}

body.modo-light .swiper-pagination-clickable .swiper-pagination-bullet-active {
    background-color: hsla(0, 0%, 20%, 0.9);
}

body.modo-light .swiper-pagination-horizontal .swiper-pagination-bullet {
    background-color: hsla(0, 0%, 40%, 0.6);
}

body.modo-light .swiper-pagination-horizontal .swiper-pagination-bullet-active {
    background-color: hsla(0, 0%, 20%, 0.9);
}