/* ======================================================
   DARK THEME CSS — YEES INC / ROXO
   Atualizado para a paleta roxa do projeto.
====================================================== */


/* ======================================================
   DARK MODE UTILITIES
   Todas as classes de dark mode seguem o padrão:
   .dark__mode .classe_dark
====================================================== */

.dark__mode [class*="_dark"] {
	transition: .2s ease;
}


/* ======================================================
   ROXO / MARCA — COLOR
====================================================== */

.dark__mode .pinta__roxo_main_dark {
	color: var(--roxo-main) !important;
}

.dark__mode .pinta__roxo_1_dark {
	color: var(--roxo-1) !important;
}

.dark__mode .pinta__roxo_2_dark {
	color: var(--roxo-2) !important;
}

.dark__mode .pinta__roxo_3_dark {
	color: var(--roxo-3) !important;
}

.dark__mode .pinta__roxo_4_dark {
	color: var(--roxo-4) !important;
}

.dark__mode .pinta__roxo_5_dark {
	color: var(--roxo-5) !important;
}

.dark__mode .pinta__roxo_6_dark {
	color: var(--roxo-6) !important;
}

.dark__mode .pinta__roxo_7_dark {
	color: var(--roxo-7) !important;
}

.dark__mode .pinta__roxo_8_dark {
	color: var(--roxo-8) !important;
}

.dark__mode .pinta__roxo_9_dark {
	color: var(--roxo-9) !important;
}

.dark__mode .pinta__roxo_extra_1_dark {
	color: var(--roxo-extra-1) !important;
}

.dark__mode .pinta__roxo_extra_2_dark {
	color: var(--roxo-extra-2) !important;
}


/* ======================================================
   ROXO / MARCA — BACKGROUND
====================================================== */

.dark__mode .pinta__bg_roxo_main_dark {
	background-color: var(--roxo-main) !important;
}

.dark__mode .pinta__bg_roxo_1_dark {
	background-color: var(--roxo-1) !important;
}

.dark__mode .pinta__bg_roxo_2_dark {
	background-color: var(--roxo-2) !important;
}

.dark__mode .pinta__bg_roxo_3_dark {
	background-color: var(--roxo-3) !important;
}

.dark__mode .pinta__bg_roxo_4_dark {
	background-color: var(--roxo-4) !important;
}

.dark__mode .pinta__bg_roxo_5_dark {
	background-color: var(--roxo-5) !important;
}

.dark__mode .pinta__bg_roxo_6_dark {
	background-color: var(--roxo-6) !important;
}

.dark__mode .pinta__bg_roxo_7_dark {
	background-color: var(--roxo-7) !important;
}

.dark__mode .pinta__bg_roxo_8_dark {
	background-color: var(--roxo-8) !important;
}

.dark__mode .pinta__bg_roxo_9_dark {
	background-color: var(--roxo-9) !important;
}

.dark__mode .pinta__bg_roxo_extra_1_dark {
	background-color: var(--roxo-extra-1) !important;
}

.dark__mode .pinta__bg_roxo_extra_2_dark {
	background-color: var(--roxo-extra-2) !important;
}

.dark__mode .pinta__bg_gradiente_roxo_dark {
	background: var(--gradiente-roxo) !important;
}


/* ======================================================
   PRETOS / CINZAS / NEUTROS — COLOR
====================================================== */

.dark__mode .pinta__preto_dark {
	color: var(--preto) !important;
}

.dark__mode .pinta__branco_dark {
	color: var(--branco) !important;
}

.dark__mode .pinta__preto_1_dark {
	color: var(--preto-1) !important;
}

.dark__mode .pinta__preto_2_dark {
	color: var(--preto-2) !important;
}

.dark__mode .pinta__preto_3_dark {
	color: var(--preto-3) !important;
}

.dark__mode .pinta__preto_4_dark {
	color: var(--preto-4) !important;
}

.dark__mode .pinta__preto_5_dark {
	color: var(--preto-5) !important;
}

.dark__mode .pinta__preto_6_dark {
	color: var(--preto-6) !important;
}

.dark__mode .pinta__preto_7_dark {
	color: var(--preto-7) !important;
}

.dark__mode .pinta__preto_8_dark {
	color: var(--preto-8) !important;
}

.dark__mode .pinta__preto_9_dark {
	color: var(--preto-9) !important;
}


/* ======================================================
   PRETOS / CINZAS / NEUTROS — BACKGROUND
====================================================== */

.dark__mode .pinta__bg_preto_dark {
	background-color: var(--preto) !important;
}

.dark__mode .pinta__bg_branco_dark {
	background-color: var(--branco) !important;
}

.dark__mode .pinta__bg_preto_1_dark {
	background-color: var(--preto-1) !important;
}

.dark__mode .pinta__bg_preto_2_dark {
	background-color: var(--preto-2) !important;
}

.dark__mode .pinta__bg_preto_3_dark {
	background-color: var(--preto-3) !important;
}

.dark__mode .pinta__bg_preto_4_dark {
	background-color: var(--preto-4) !important;
}

.dark__mode .pinta__bg_preto_5_dark {
	background-color: var(--preto-5) !important;
}

.dark__mode .pinta__bg_preto_6_dark {
	background-color: var(--preto-6) !important;
}

.dark__mode .pinta__bg_preto_7_dark {
	background-color: var(--preto-7) !important;
}

.dark__mode .pinta__bg_preto_8_dark {
	background-color: var(--preto-8) !important;
}

.dark__mode .pinta__bg_preto_9_dark {
	background-color: var(--preto-9) !important;
}


/* ======================================================
   CORES COMPLEMENTARES — COLOR
====================================================== */

.dark__mode .pinta__verde_agua_dark {
	color: var(--verde-agua) !important;
}

.dark__mode .pinta__verde_limao_dark {
	color: var(--verde-limao) !important;
}

.dark__mode .pinta__amarelo_mostarda_dark {
	color: var(--amarelo-mostarda) !important;
}

.dark__mode .pinta__amarelo_mostarda_claro_dark {
	color: var(--amarelo-mostarda-claro) !important;
}

.dark__mode .pinta__vermelho_dark {
	color: var(--vermelho) !important;
}

.dark__mode .pinta__bege_claro_dark {
	color: var(--bege-claro) !important;
}

.dark__mode .pinta__bege_medio_dark {
	color: var(--bege-medio) !important;
}


/* ======================================================
   CORES COMPLEMENTARES — BACKGROUND
====================================================== */

.dark__mode .pinta__bg_verde_agua_dark {
	background-color: var(--verde-agua) !important;
}

.dark__mode .pinta__bg_verde_limao_dark {
	background-color: var(--verde-limao) !important;
}

.dark__mode .pinta__bg_amarelo_mostarda_dark {
	background-color: var(--amarelo-mostarda) !important;
}

.dark__mode .pinta__bg_amarelo_mostarda_claro_dark {
	background-color: var(--amarelo-mostarda-claro) !important;
}

.dark__mode .pinta__bg_vermelho_dark {
	background-color: var(--vermelho) !important;
}

.dark__mode .pinta__bg_bege_claro_dark {
	background-color: var(--bege-claro) !important;
}

.dark__mode .pinta__bg_bege_medio_dark {
	background-color: var(--bege-medio) !important;
}


/* ======================================================
   CORES SEMÂNTICAS — COLOR
====================================================== */

.dark__mode .pinta__sucesso_dark {
	color: var(--sucesso) !important;
}

.dark__mode .pinta__alerta_dark {
	color: var(--alerta) !important;
}

.dark__mode .pinta__erro_dark {
	color: var(--erro) !important;
}

.dark__mode .pinta__info_dark {
	color: var(--info) !important;
}


/* ======================================================
   CORES SEMÂNTICAS — BACKGROUND
====================================================== */

.dark__mode .pinta__bg_sucesso_dark {
	background-color: var(--sucesso) !important;
}

.dark__mode .pinta__bg_alerta_dark {
	background-color: var(--alerta) !important;
}

.dark__mode .pinta__bg_erro_dark {
	background-color: var(--erro) !important;
}

.dark__mode .pinta__bg_info_dark {
	background-color: var(--info) !important;
}

.dark__mode .pinta__bg_sucesso_light_dark {
	background-color: var(--sucesso-bg) !important;
}

.dark__mode .pinta__bg_alerta_light_dark {
	background-color: var(--alerta-bg) !important;
}

.dark__mode .pinta__bg_erro_light_dark {
	background-color: var(--erro-bg) !important;
}

.dark__mode .pinta__bg_info_light_dark {
	background-color: var(--info-bg) !important;
}


/* ======================================================
   SECUNDÁRIAS — COLOR
====================================================== */

.dark__mode .pinta__secundaria_1_dark {
	color: var(--secundaria-1) !important;
}

.dark__mode .pinta__secundaria_2_dark {
	color: var(--secundaria-2) !important;
}

.dark__mode .pinta__secundaria_3_dark {
	color: var(--secundaria-3) !important;
}

.dark__mode .pinta__secundaria_4_dark {
	color: var(--secundaria-4) !important;
}

.dark__mode .pinta__secundaria_5_dark {
	color: var(--secundaria-5) !important;
}


/* ======================================================
   SECUNDÁRIAS — BACKGROUND
====================================================== */

.dark__mode .pinta__bg_secundaria_1_dark {
	background-color: var(--secundaria-1) !important;
}

.dark__mode .pinta__bg_secundaria_2_dark {
	background-color: var(--secundaria-2) !important;
}

.dark__mode .pinta__bg_secundaria_3_dark {
	background-color: var(--secundaria-3) !important;
}

.dark__mode .pinta__bg_secundaria_4_dark {
	background-color: var(--secundaria-4) !important;
}

.dark__mode .pinta__bg_secundaria_5_dark {
	background-color: var(--secundaria-5) !important;
}


/* ======================================================
   BACKGROUND BASE DO TEMA ESCURO
====================================================== */

body.dark__mode,
.dark__mode .cookies-content,
.dark__mode .newsletter {
	background-color: var(--preto-9) !important;
}


/* ======================================================
   BACKGROUND — SUPERFÍCIES PRINCIPAIS
====================================================== */

.dark__mode .tab button, .dark__mode .tags__list li a {
	background-color: var(--roxo-8) !important;
	color: var(--preto-1) !important;
}

.dark__mode .tab button.active, .dark__mode .tab button.is-active, .dark__mode .tab button:hover {
	background-color: var(--roxo-7) !important;
}

.dark__mode .card__loop_horizontal,
.dark__mode .card__newsletter.box__shadow_hover,
.dark__mode.error404 h1 strong,
.dark__mode .box__whatsapp_inline_post,
.dark__mode .redes__sociais_fixed,
.dark__mode .pb-toc,
.dark__mode .pb-summary,
.dark__mode .menu__topo,
.dark__mode .footer__copywriting,
.dark__mode .sem__termos_span,
.dark__mode .section__3_colunas,
.dark__mode .ver__mais_top,
.dark__mode .section__webstories,
.dark__mode .section__faq,
.dark__mode .section__topicos_interesse,
.dark__mode .trigger-input:checked + .trigger-wrapper .faq-conteudo,
.dark__mode .table__of_contents,
.dark__mode .btn__branco,
.dark__mode .img__card_blog,
.dark__mode .main__img_post figure img,
.dark__mode .img__esquerda_indicadores,
.dark__mode .content__article_body blockquote,
.dark__mode .nome__relacionados_bloco,
.dark__mode .menu__main_hamburguer_wrapper,
.dark__mode .sidebar__block,
.dark__mode .tags__blog,
.dark__mode .box__author_single {
	background-color: var(--roxo-9) !important;
}



/* ======================================================
   BACKGROUND — HEADER / MENUS / ÁREAS DE MARCA
====================================================== */

.dark__mode .menu__main_desktop,
.dark__mode .header__h1_interno,
.dark__mode .feed__category_img,
.dark__mode .page-numbers,
.dark__mode .section__video {
	background-color: var(--roxo-9) !important;
}

.dark__mode .newsletter__grid {
	background: var(--gradiente-roxo) !important;
	box-shadow: 0 8px 0 var(--roxo-8) !important;
}


/* ======================================================
   BACKGROUND — SUPERFÍCIES SECUNDÁRIAS
====================================================== */

.dark__mode .caixa__menu,
.dark__mode .submenu,
.dark__mode .menu__blog_wide,
.dark__mode .menu li:after,
.dark__mode .faq-titulo,
.dark__mode footer,
.dark__mode .main__img_post_label_absolute,
.dark__mode .section__frase_central,
.dark__mode .tabela__comparacao li:not(:first-child),
.dark__mode .card__finalidades.pinta__bg_roxo_2,
.dark__mode .card__finalidades.pinta__bg_secundaria_2,
.dark__mode .div__ads,
.dark__mode .glossario__lista_a_z,
.dark__mode .pinta__bg_roxo_1,
.dark__mode .pinta__bg_secundaria_1 {
	background-color: var(--preto-7) !important;
}


/* ======================================================
   BACKGROUND — TABELAS / LINHAS / ELEMENTOS DE APOIO
====================================================== */

.dark__mode tr:nth-child(odd) {
	background-color: var(--preto-8) !important;
}

.dark__mode tr:nth-child(even) {
	background-color: var(--preto-7) !important;
}

.dark__mode .cta__linha_dupla .linha,
.dark__mode .tab button.active,
.dark__mode #tags__list li a:hover {
	background-color: var(--roxo-main) !important;
}


/* ======================================================
   SEÇÕES QUE DEVEM PERMANECER TRANSPARENTES
====================================================== */

.dark__mode .section__loop_blog_horizontal,
.dark__mode .section__colunas_mista,
.dark__mode .section__lancamentos,
.dark__mode .section__colunas_3_1,
.dark__mode .section__modulo_texto_central {
	background-color: transparent !important;
}


/* ======================================================
   HOVER / ACTIVE
====================================================== */

.dark__mode .card__loop_horizontal:hover {
	background-color: var(--preto-7) !important;
	border-color: var(--roxo-main) !important;
}

.dark__mode .page-numbers.current,
.dark__mode .page-numbers:hover,
.dark__mode .btn__branco:hover {
	background-color: var(--roxo-8) !important;
}


/* ======================================================
   TEXTOS GERAIS
====================================================== */

.dark__mode h1,
.dark__mode h2,
.dark__mode h3,
.dark__mode h4,
.dark__mode h5,
.dark__mode a,
.dark__mode p,
.dark__mode li,
.dark__mode span,
.dark__mode strong,
.dark__mode time,
.dark__mode em,
.dark__mode b,
.dark__mode i,
.dark__mode .content__article_body blockquote cite {
	color: var(--preto-1) !important;
}

.dark__mode .meta__views,
.dark__mode .meta__info_author,
.dark__mode .meta__info_author time,
.dark__mode .flex__cookies p,
.dark__mode label,
.dark__mode label a {
	color: var(--preto-2) !important;
}

.dark__mode .schema-faq .schema-faq-answer {
	color: var(--preto-7) !important;
}


/* ======================================================
   TEXTOS DE DESTAQUE / MARCA
====================================================== */

.dark__mode .menu__topo_btn_newsletter span,
.dark__mode .loop__categorias h3,
.dark__mode .section__frase_central *,
.dark__mode .menu__main_group .menu li span,
.dark__mode .texto__destacado,
.dark__mode .control {
	color: var(--roxo-1) !important;
}

.dark__mode .text_chapeu {
	color: var(--amarelo-mostarda) !important;
}

.dark__mode .has__submenu > a::after,
.dark__mode .dropdown_links__mobile > a::after {
	background-color: var(--roxo-main) !important;
}


/* ======================================================
   BORDAS
====================================================== */

.dark__mode hr,
.dark__mode .newsletter__form input:not([type="range"]),
.dark__mode .menu__main_wrapper,
.dark__mode .letra-section h2,
.dark__mode .header__h1_interno:not(.has-image),
.dark__mode .faq-titulo {
	border-color: var(--preto-5) !important;
}

.dark__mode .coluna_mista_espacos li,
.dark__mode .content__list_pages .grid__card_completo,
.dark__mode .ads__between_posts,
.dark__mode .sidebar__block,
.dark__mode .sidebar__top_blog,
.dark__mode .tags__blog,
.dark__mode .box__author_single,
.dark__mode .box__whatsapp_inline_post,
.dark__mode .content__controls button,
.dark__mode .redes__sociais_fixed {
	border-color: var(--preto-6) !important;
}

.dark__mode #btnMainMobile,
.dark__mode #btnMenuFavoritos,
.dark__mode .border__padrao {
	border-color: var(--preto-5) !important;
}

.dark__mode .menu__blog_wide .current-menu-item a,
.dark__mode #menudesktop .current-menu-item,
.dark__mode .menu__blog_wide a:hover,
.dark__mode .menu__main_desktop a:hover {
	border-color: var(--roxo-main) !important;
}


/* ======================================================
   INPUTS / FORMULÁRIOS
====================================================== */

.dark__mode input,
.dark__mode textarea,
.dark__mode select {
	background-color: var(--preto-8) !important;
	color: var(--preto-1) !important;
	border-color: var(--preto-6) !important;
}

.dark__mode input::placeholder,
.dark__mode textarea::placeholder {
	color: var(--preto-4) !important;
}

.dark__mode input:hover,
.dark__mode textarea:hover,
.dark__mode input:focus,
.dark__mode textarea:focus,
.dark__mode select:hover,
.dark__mode select:focus {
	border-color: var(--roxo-main) !important;
}


/* ======================================================
   BOTÕES
====================================================== */

.dark__mode .btn__1 {
	background-color: var(--roxo-main) !important;
	color: var(--branco) !important;
}

.dark__mode .btn__1:hover {
	background-color: var(--roxo-7) !important;
	color: var(--branco) !important;
}

.dark__mode .btn__branco {
	color: var(--preto-1) !important;
	background-color: var(--preto-8) !important;
}

.dark__mode .btn__branco:hover {
	background-color: var(--roxo-8) !important;
	color: var(--branco) !important;
}


/* ======================================================
   ÍCONES / SVG / IMAGENS
====================================================== */

.dark__mode .icone__hamburguer,
.dark__mode .icone__editorias,
.dark__mode #btnMenuSearch img,
.dark__mode .theme__switch img,
.dark__mode .galeria-mansory__list img[src$=".svg"],
.dark__mode .tabs-mansory__list img[src$=".svg"],
.dark__mode .redes__sociais_fixed img {
	filter: brightness(0) invert(1);
}

.dark__mode .bookmar_ativado img {
	filter: grayscale(1) !important;
}


/* ======================================================
   BREADCRUMB
====================================================== */


/* ======================================================
   MENU NOTIFICAÇÃO / OVERLAYS
====================================================== */

.dark__mode .menu__notificacao::before {
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--roxo-9) 90%, transparent) 0%,
		color-mix(in srgb, var(--roxo-9) 55%, transparent) 45%,
		rgba(0, 0, 0, 0) 100%
	) !important;
}

.dark__mode .menu__notificacao::after {
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		color-mix(in srgb, var(--roxo-9) 50%, transparent) 56%,
		var(--roxo-9) 89%
	) !important;
}