/* ======================================================
   DARK THEME - PINK AND BRAIN
   Projeto: paleta amarelo / mostarda / preto
====================================================== */

/* ======================================================
   UTILITÁRIOS DARK - COLOR
====================================================== */

.dark__mode .pinta__branco_dark { color: var(--branco) !important; }
.dark__mode .pinta__preto_dark { color: var(--preto) !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; }
.dark__mode .pinta__preto_10_dark { color: var(--preto-10) !important; }
.dark__mode .pinta__preto_11_dark { color: var(--preto-11) !important; }

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

/* ======================================================
   UTILITÁRIOS DARK - BACKGROUND-COLOR
====================================================== */

.dark__mode .pinta__bg_branco_dark { background-color: var(--branco) !important; }
.dark__mode .pinta__bg_preto_dark { background-color: var(--preto) !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; }
.dark__mode .pinta__bg_preto_10_dark { background-color: var(--preto-10) !important; }
.dark__mode .pinta__bg_preto_11_dark { background-color: var(--preto-11) !important; }

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

/* ======================================================
   UTILITÁRIOS DARK - GRADIENTES
====================================================== */

.dark__mode .pinta__bg_gradiente_horizontal_dark { background: var(--gradiente-horizontal) !important; }
.dark__mode .pinta__bg_gradiente_vertical_dark { background: var(--gradiente-vertical) !important; }
.dark__mode .pinta__bg_gradiente_ouro_dark { background: var(--gradiente-ouro) !important; }
.dark__mode .pinta__bg_gradiente_preto_dark { background: var(--gradiente-preto) !important; }

/* Compatibilidade com classes sem sufixo _dark quando usadas dentro do dark mode. */
.dark__mode .pinta__bg_gradiente_horizontal_dark { background: var(--gradiente-horizontal) !important; }
.dark__mode .pinta__bg_gradiente_vertical_dark { background: var(--gradiente-vertical) !important; }
.dark__mode .pinta__bg_gradiente_ouro_dark { background: var(--gradiente-ouro) !important; }
.dark__mode .pinta__bg_gradiente_preto_dark { background: var(--gradiente-preto) !important; }

/* ======================================================
   TRANSIÇÃO GLOBAL
====================================================== */

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

/* ======================================================
   BASE DO DARK MODE
====================================================== */

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

/* ======================================================
   BACKGROUNDS - NÍVEL 9 / FUNDO MAIS ESCURO
====================================================== */

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

/* ======================================================
   BACKGROUNDS - NÍVEL 8 / CARDS E BLOCOS PRINCIPAIS
====================================================== */

.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 .ver__mais_top,
.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 .modo__noturno,
.dark__mode .galeria-embutida {
	background-color: var(--preto-8) !important;
}

.dark__mode .glossario__lista_a_z a:hover,
.dark__mode .glossario__lista_a_z a.active {
	background-color: var(--preto-8) !important;
}

/* ======================================================
   BACKGROUNDS - NÍVEL 7 / HOVER E BLOCOS SECUNDÁRIOS
====================================================== */

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

.dark__mode .card__loop_horizontal:hover {
	border-color: var(--preto-4) !important;
}

/* ======================================================
   BACKGROUNDS - NÍVEL 6 / MENUS, FAQ, ADS E LISTAS
====================================================== */

.dark__mode .caixa__menu,
.dark__mode .submenu,
.dark__mode .menu__blog_wide,
.dark__mode .menu li::after,
.dark__mode .faq-titulo,
.dark__mode .main__img_post_label_absolute,
.dark__mode .section__frase_central,
.dark__mode .tabela__comparacao li:not(:first-child),
.dark__mode .card__finalidades,
.dark__mode .div__ads,
.dark__mode .glossario__lista_a_z,
.dark__mode .bookmark__menu_thumb.bookmar_ativado {
	background-color: var(--preto-6) !important;
}

/* ======================================================
   BACKGROUNDS - NÍVEL 5 / 4 / DETALHES
====================================================== */

.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 #tags__list li a:hover,
.dark__mode a.bookmark__menu_thumb,
.dark__mode .bookmark__menu_thumb {
	background-color: var(--preto-4) !important;
}

/* ======================================================
   BACKGROUNDS ESPECIAIS DA MARCA
====================================================== */

.dark__mode .newsletter__grid {
	background-color: var(--preto-8) !important;
	background-image: none !important;
	box-shadow: 0 8px 0 var(--preto-5) !important;
}

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

.dark__mode .bg__ouro_dark,
.dark__mode .destaque__ouro_dark {
	background: var(--gradiente-ouro) !important;
}

/* ======================================================
   TEXTO BASE
====================================================== */

.dark__mode h1,
.dark__mode h2,
.dark__mode h3,
.dark__mode h4,
.dark__mode h5,
.dark__mode h6,
.dark__mode a:not(.btn__acomodacoes):not(.btn__fill):not(.tags__list li a):not(.tab button):not(.footer__main ul li 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 {
	color: var(--preto-1) !important;
}

/* ======================================================
   TEXTO SECUNDÁRIO
====================================================== */

.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,
.dark__mode .footer__topo p,
.dark__mode .footer__topo strong,
.dark__mode .footer__main p,
.dark__mode .footer__main strong,
.dark__mode .footer__main ul li a {
	color: var(--preto-2) !important;
}

.dark__mode figcaption,
.dark__mode .linha__fina,
.dark__mode .excerpt,
.dark__mode .resumo,
.dark__mode .descricao {
	color: var(--preto-3) !important;
}

/* ======================================================
   TEXTO DE DESTAQUE / MARCA
====================================================== */

.dark__mode .text_chapeu,
.dark__mode .menu__topo_btn_newsletter span,
.dark__mode .loop__categorias h3,
.dark__mode .section__frase_central *,
.dark__mode .pinta__destaque_dark {
	color: var(--amarelo-sol) !important;
}

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

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

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

.dark__mode hr:not(.menu__mob2 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,
.dark__mode .border__color_preto_4_dark {
	border-color: var(--preto-4) !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 .redes__sociais_fixed,
.dark__mode .content__controls button,
.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(--amarelo-sol) !important;
}

.dark__mode .border__amarelo_dark {
	border-color: var(--amarelo-sol) !important;
}

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

.dark__mode .border__transparent_dark {
	border-color: transparent !important;
}

.dark__mode .btnMenuFavoritos {
	border: none !important;
}

/* ======================================================
   FORMULÁRIOS / INPUT STATES
====================================================== */

.dark__mode input,
.dark__mode textarea,
.dark__mode select {
	background-color: var(--preto-8) !important;
	border-color: var(--preto-6) !important;
	color: var(--preto-1) !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,
.dark__mode .navegacao__itens_inclusos li button,
.dark__mode .cta__whatsapp {
	border-color: var(--amarelo-sol) !important;
}

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

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

.dark__mode .btn__1 {
	background: var(--gradiente-ouro) !important;
	color: var(--preto-10) !important;
}

.dark__mode .btn__1:hover {
	background: var(--gradiente-horizontal) !important;
	color: var(--preto-10) !important;
}

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

.dark__mode .btn__branco:hover {
	background-color: var(--preto-7) !important;
	color: var(--amarelo-sol) !important;
}

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

.dark__mode .icone__hamburguer,
.dark__mode .icone__editorias,
.dark__mode #btnMenuSearch img,
.dark__mode .invert__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;
}

.dark__mode .arruma__grafismo_dark {
	width: auto;
	filter: invert(1) contrast(0);
	opacity: .5;
}

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

.dark__mode .menu__notificacao::before {
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--preto-9) 90%, transparent) 0%,
		color-mix(in srgb, var(--preto-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(--preto-9) 50%, transparent) 56%,
		var(--preto-9) 89%
	) !important;
}