/**
 * Cabeçalho do site — [drope_header].
 *
 * Duas faixas: a escura, com marca e navegação principal, e a clara, com o
 * catálogo e a busca. É o mesmo desenho do header atual, reconstruído em duas
 * listas em vez de dezenas de containers do Elementor.
 *
 * Autossuficiente de propósito: o cabeçalho aparece em TODA página do site,
 * inclusive nas que não carregam home-blocks.css. Depender daquele arquivo
 * significaria puxar 90 KB de CSS de landing page em toda visita, então os
 * poucos tokens usados aqui estão declarados no próprio escopo.
 *
 * A armadilha de sempre: o kit do Elementor estiliza `a` dentro de um seletor
 * de classe (0,2,0). Toda regra de link aqui é escrita como `.dh a.classe`
 * (0,2,1), que vence sem !important.
 *
 * @see includes/site-header.php
 */

.dh {
	--dh-dark: #222;
	--dh-dark-2: #2c2c2c;
	--dh-ink: #14161a;
	--dh-muted: #6b7076;
	--dh-faint: #9aa0a6;
	--dh-line: #e4e4e7;
	--dh-surface: #fff;
	--dh-canvas: #f7f7f8;
	--dh-brand: #ff7e01;
	--dh-brand-ink: #a34700;
	--dh-brand-tint: #fff4e8;
	--dh-ok: #22a05a;
	--dh-cream: #fbf6ec;

	/* A mesma régua do resto do site. */
	--dh-w: 1140px;
	/* Respiro interno do item de catálogo. O recuo da barra o espelha. */
	--dh-cat-pad: 12px;
	--dh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/*
	 * Figtree, e não San Francisco.
	 *
	 * Conferi o que o site realmente serve: em /planos, /changelog, /faq e nas
	 * páginas de categoria, o texto renderiza em Figtree, com o stack do
	 * sistema como reserva. San Francisco está registrada no Elementor mas não
	 * é a que chega ao navegador nessas páginas.
	 *
	 * Como o cabeçalho aparece em TODAS elas, usar a fonte que já está lá é o
	 * que garante harmonia e custa zero requisição. San Francisco fica como
	 * primeira reserva, para o caso de a Figtree não carregar.
	 */
	position: relative;
	z-index: 100;
	background: var(--dh-surface);
	font-family: Figtree, "San Francisco", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.dh *,
.dh *::before,
.dh *::after { box-sizing: border-box; }

.dh-wrap {
	display: flex;
	align-items: center;
	gap: 24px;
	width: min(var(--dh-w), calc(100% - 40px));
	margin-inline: auto;
}

.dh-i { width: 18px; height: 18px; flex: none; }

/* ============================================================
 * Faixa escura
 * ============================================================ */

.dh-topo {
	background: var(--dh-dark);
	color: var(--dh-cream);
}

.dh-topo .dh-wrap {
	flex-wrap: wrap;
	padding-block: 14px 0;
}

/* ---------- Botão do menu e marca ---------- */

/*
 * O botão do menu só existe onde as barras somem. Ele dispara o popup do
 * Elementor pela âncora #elementor-action, então o menu continua sendo editado
 * lá dentro.
 */
.dh a.dh-burger {
	display: none;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	margin-left: -8px;
	border-radius: 11px;
	color: var(--dh-cream);
	text-decoration: none;
	transition: background-color 0.16s ease;
}

.dh a.dh-burger:hover { background: rgba(255, 255, 255, 0.09); }

/* Três traços desenhados: um <span> e dois pseudo-elementos. */
.dh-burger span,
.dh-burger span::before,
.dh-burger span::after {
	display: block;
	width: 19px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.dh-burger span { position: relative; }

.dh-burger span::before,
.dh-burger span::after {
	content: '';
	position: absolute;
	left: 0;
	transition: transform 0.18s var(--dh-ease);
}

.dh-burger span::before { top: -6px; }
.dh-burger span::after { top: 6px; }

/* Os traços se abrem um fio ao tocar: retorno sem trocar o ícone. */
.dh a.dh-burger:active span::before { transform: translateY(-1px); }
.dh a.dh-burger:active span::after { transform: translateY(1px); }

.dh a.dh-logo {
	display: block;
	flex: none;
	margin-right: auto;
	line-height: 0;
	text-decoration: none;
}

/*
 * Altura fixa e largura automática: a marca tem 2048x740, e sem a altura
 * travada o navegador reservaria a proporção inteira e empurraria a barra para
 * baixo até a imagem chegar.
 */
.dh img.dh-logo-img {
	display: block;
	width: auto;
	height: 34px;
	max-width: none;
}

/* ---------- Navegação principal ---------- */

/*
 * O recuo negativo alinha o TEXTO do primeiro link com a borda da logo.
 *
 * Cada link tem 14px de respiro interno, que existe para a área de clique.
 * Sem compensar isso, "Home" nasce 14px à direita da marca e as duas linhas
 * do cabeçalho ficam desencontradas: o olho percebe na hora, mesmo sem saber
 * nomear. Puxar a barra inteira devolve o alinhamento sem tirar o respiro de
 * ninguém.
 */
.dh-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	order: 3;
	width: 100%;
	margin-top: 12px;
	margin-left: -14px;
}

.dh a.dh-nav-l {
	position: relative;
	padding: 12px 14px;
	color: rgba(251, 246, 236, 0.62);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.16s ease;
}

.dh a.dh-nav-l:hover { color: #fff; }
.dh a.dh-nav-l.is-on { color: #fff; }

/* O fio embaixo do item atual cresce do centro. */
.dh a.dh-nav-l.is-on::after {
	content: '';
	position: absolute;
	inset-inline: 14px;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--dh-brand);
}

/*
 * O item de destaque.
 *
 * Passei por três desenhos até chegar aqui: verde sólido gritava mais que a
 * marca; verde translúcido com ponto pulsando parecia notificação de erro;
 * fundo levantado criava uma caixa no meio de uma linha de texto.
 *
 * O que funciona é o padrão do anexo, e ele é mais esperto que os três: o item
 * continua sendo texto, sem moldura, no MESMO ritmo dos vizinhos. O que o
 * separa são duas linhas de 1 e 2 pixels. Um fio vertical à esquerda abre um
 * capítulo novo na fileira, e uma barra verde embaixo marca o item. Nenhuma
 * área colorida, nenhum peso extra: só duas arestas.
 */
.dh a.dh-nav-l.is-cta {
	position: relative;
	margin-left: 16px;
	padding-left: 26px;
	color: #fff;
	font-weight: 700;
}

/* O fio que abre o capítulo. Não encosta no topo nem na base: um traço
   inteiro pareceria borda de tabela. */
.dh a.dh-nav-l.is-cta::before {
	content: '';
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.22);
}

/*
 * A barra verde embaixo. Sempre visível, ao contrário do fio laranja do item
 * atual: aqui ela não diz "você está aqui", diz "olhe para isto".
 */
.dh a.dh-nav-l.is-cta::after {
	content: '';
	position: absolute;
	inset-inline: 26px 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: #3ddc84;
	transform-origin: left center;
	transition: transform 0.22s var(--dh-ease);
}

/* No hover o texto vai para o verde: a cor da barra sobe para a palavra. */
.dh a.dh-nav-l.is-cta:hover { color: #3ddc84; }

/* No hover a barra engrossa um fio, sem mudar a altura da linha. */
.dh a.dh-nav-l.is-cta:hover::after { transform: scaleY(1.8); }

/* ---------- Carrinho e painel ---------- */

.dh-acoes {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.dh a.dh-cart {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: var(--dh-cream);
	text-decoration: none;
	transition: background-color 0.16s ease;
}

.dh a.dh-cart:hover { background: rgba(255, 255, 255, 0.09); }

.dh-cart .dh-i { width: 21px; height: 21px; }

/* O contador nasce com um pulo curto: é a confirmação de que o item entrou. */
.dh-cart-n {
	position: absolute;
	top: 2px;
	right: 2px;
	display: grid;
	place-items: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--dh-ok);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	animation: dh-pop 0.3s var(--dh-ease) both;
}

@keyframes dh-pop {
	from { transform: scale(0.4); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.dh a.dh-painel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--dh-cream);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.16s ease;
}

.dh a.dh-painel:hover { background: rgba(255, 255, 255, 0.09); }

/* ============================================================
 * Faixa do catálogo
 * ============================================================ */

.dh-barra {
	position: relative;
	border-bottom: 1px solid var(--dh-line);
	background: var(--dh-surface);
}

.dh-barra .dh-wrap {
	justify-content: space-between;
	gap: 16px;
}

/*
 * Mesmo recuo da barra de cima, pelo mesmo motivo: o respiro interno do link
 * empurrava "Atualizações" para dentro e a terceira linha do cabeçalho saía
 * do prumo das outras duas. O valor acompanha o padding do item, então os dois
 * andam juntos se um dia mudar.
 */
.dh-cats {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	margin-left: calc(var(--dh-cat-pad) * -1);
}

.dh-cat { position: relative; }

.dh a.dh-cat-l {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 15px var(--dh-cat-pad);
	color: var(--dh-muted);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.16s ease;
}

.dh a.dh-cat-l:hover,
.dh a.dh-cat-l.is-on { color: var(--dh-ink); }
.dh a.dh-cat-l.is-on { font-weight: 650; }

.dh-cat-l .dh-i {
	width: 14px;
	height: 14px;
	opacity: 0.5;
	transition: transform 0.22s var(--dh-ease);
}

.dh-cat.has-mega:hover .dh-cat-l .dh-i,
.dh-cat.is-open .dh-cat-l .dh-i { transform: rotate(180deg); }

/* ---------- Busca ---------- */

/*
 * A busca não estica: acima de um certo ponto, um campo largo demais parece
 * um formulário, e o que se quer aqui é um atalho.
 */
.dh-busca {
	flex: none;
	width: min(380px, 40vw);
}

.dh .dh-busca .dls,
.dh .dh-busca .dls-bar { width: 100%; max-width: none; }

/* ============================================================
 * Mega menu
 *
 * Abre no hover por CSS. O JavaScript só cuida do toque e do teclado, então
 * num mouse ele nem precisa ter carregado para o menu funcionar.
 * ============================================================ */

.dh-mega {
	position: absolute;
	top: 100%;
	left: -12px;
	z-index: 60;
	width: max-content;
	max-width: min(1000px, 92vw);
	padding-top: 1px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.24s var(--dh-ease), visibility 0.18s;
}

/*
 * A ponte invisível.
 *
 * Entre o item e o painel existe a borda de 1px da barra. O ponteiro atravessa
 * esse vão e o :hover se perde no meio do caminho, fechando o menu na cara de
 * quem estava indo até ele. Esta faixa de 10px cobre o vão sem aparecer.
 */
.dh-mega::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 12px;
}

@media (hover: hover) {
	.dh-cat.has-mega:hover .dh-mega {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

.dh-cat.is-open .dh-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.dh-mega-in {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--dh-line);
	border-radius: 0 0 14px 14px;
	border-top: 0;
	background: var(--dh-surface);
	box-shadow: 0 24px 60px -30px rgba(20, 22, 26, 0.55);
	overflow: hidden;
}

/* ---------- Colunas de links ---------- */

.dh-mega-cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 26px;
	padding: 22px 26px;
}

/*
 * As quatro colunas entram em cascata, 40ms de diferença entre elas.
 *
 * O painel inteiro aparecendo de uma vez é um susto: quarenta links surgem no
 * mesmo quadro e o olho não sabe onde pousar. Escalonado, o movimento conduz a
 * leitura da esquerda para a direita e o menu parece rápido mesmo levando os
 * mesmos 300ms.
 */
.dh-mega-cols ul { animation: dh-col 0.34s var(--dh-ease) both; }

.dh-mega-cols ul:nth-child(1) { animation-delay: 0.06s; }
.dh-mega-cols ul:nth-child(2) { animation-delay: 0.10s; }
.dh-mega-cols ul:nth-child(3) { animation-delay: 0.14s; }
.dh-mega-cols ul:nth-child(4) { animation-delay: 0.18s; }

@keyframes dh-col {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.dh-mega-cols ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-mega-cols li { margin: 0; }

.dh .dh-mega-cols a {
	display: block;
	padding: 6px 8px;
	margin-left: -8px;
	border-radius: 7px;
	color: var(--dh-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.14s ease, color 0.14s ease;
}

.dh .dh-mega-cols a {
	position: relative;
}

/* Um fio laranja cresce à esquerda no hover, de cima para baixo. Diz onde o
   ponteiro está sem precisar mudar o peso da fonte, que faria a linha pular. */
.dh .dh-mega-cols a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 2px;
	height: 0;
	border-radius: 2px;
	background: var(--dh-brand);
	transform: translateY(-50%);
	transition: height 0.18s var(--dh-ease);
}

.dh .dh-mega-cols a:hover {
	background: var(--dh-brand-tint);
	color: var(--dh-brand-ink);
}

.dh .dh-mega-cols a:hover::before { height: 60%; }

/* ---------- Painel do mega menu ---------- */

/*
 * O painel deixou de ser um cartão decorativo e virou o argumento do menu:
 * número real do catálogo em corpo grande, uma frase, e duas saídas. Quem
 * abriu "Plugins" está a um passo de procurar preço, e é aqui que a resposta
 * chega antes da pergunta.
 */
.dh-promo {
	position: relative;
	display: grid;
	align-content: center;
	width: 300px;
	flex: none;
	padding: 30px 26px;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Anel girando devagar ao fundo, ecoando o símbolo da marca. Vinte segundos
 * por volta: no limite entre "vivo" e "não reparei". Mais rápido que isso e
 * ele disputa atenção com a lista de links, que é o conteúdo.
 */
.dh-promo-anel {
	position: absolute;
	right: -70px;
	bottom: -80px;
	z-index: -1;
	width: 230px;
	height: 230px;
	border: 26px solid currentColor;
	border-radius: 50%;
	opacity: 0.14;
	clip-path: inset(0 0 0 0);
	animation: dh-gira 20s linear infinite;
}

@keyframes dh-gira { to { transform: rotate(360deg); } }

.dh-promo-in {
	display: grid;
	gap: 14px;
	/* Entra depois do painel, com um atraso curto: o olho pousa no número. */
	animation: dh-sobe 0.42s var(--dh-ease) 0.06s both;
}

@keyframes dh-sobe {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* O número. Mono com dígito tabular, corpo grande, e o rótulo embaixo. */
.dh-promo-n {
	display: grid;
	gap: 1px;
	line-height: 1;
}

.dh-promo-n strong {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
}

.dh-promo-n em {
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.72;
}

.dh-promo p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	opacity: 0.85;
}

.dh-promo-acoes {
	display: grid;
	gap: 9px;
	justify-items: start;
}

.dh a.dh-promo-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.18s var(--dh-ease), box-shadow 0.18s ease;
}

.dh a.dh-promo-btn .dh-i {
	width: 15px;
	height: 15px;
	transition: transform 0.2s var(--dh-ease);
}

.dh a.dh-promo-btn:hover { transform: translateY(-1px); }
.dh a.dh-promo-btn:hover .dh-i { transform: translateX(3px); }

.dh a.dh-promo-todos {
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.68;
	transition: opacity 0.16s ease;
}

.dh a.dh-promo-todos:hover { opacity: 1; }

/* ---------- As três peles ---------- */

/* Plugins: laranja da marca sobre creme. */
.dh-promo--plugins {
	background: linear-gradient(155deg, #fff4e8 0%, #ffe8cf 100%);
	color: var(--dh-brand-ink);
}

.dh-promo--plugins .dh-promo-anel { color: var(--dh-brand); }
.dh-promo--plugins .dh-promo-n strong { color: #7d3600; }

.dh a.dh-promo--plugins .dh-promo-btn,
.dh-promo--plugins a.dh-promo-btn {
	background: var(--dh-brand);
	/* Branco sobre #ff7e01 dá 2,6:1 e reprova; quase-preto dá 7,4:1. */
	color: #1a0f06;
	box-shadow: 0 6px 18px -10px rgba(255, 126, 1, 0.9);
}

.dh-promo--plugins a.dh-promo-todos { color: var(--dh-brand-ink); }

/* Temas: carvão, a mesma tinta do rodapé do site. */
.dh-promo--temas {
	background: linear-gradient(155deg, #2a2a2a 0%, #191919 100%);
	color: var(--dh-cream);
}

.dh-promo--temas .dh-promo-anel { color: var(--dh-brand); opacity: 0.2; }
.dh-promo--temas .dh-promo-n strong { color: #fff; }

.dh-promo--temas a.dh-promo-btn {
	background: var(--dh-cream);
	color: #1a1a1a;
}

.dh-promo--temas a.dh-promo-todos { color: var(--dh-cream); }

/* Templates: o rosa é a cor do Elementor, não da DROPE. Fica só aqui, onde
   identifica a ferramenta de que o painel fala. */
.dh-promo--templates {
	background: linear-gradient(155deg, #fdeef5 0%, #fbdde9 100%);
	color: #7a2d4c;
}

.dh-promo--templates .dh-promo-anel { color: #d0006f; }
.dh-promo--templates .dh-promo-n strong { color: #92003b; }

.dh-promo--templates a.dh-promo-btn {
	background: #d0006f;
	color: #fff;
	box-shadow: 0 6px 18px -10px rgba(208, 0, 111, 0.9);
}

.dh-promo--templates a.dh-promo-todos { color: #92003b; }

/* ============================================================
 * Telas menores
 *
 * Abaixo de 1024px o cabeçalho sai de cena: ali entra o off-canvas do
 * Elementor com o [drope_menu_mobile]. Manter duas navegações concorrendo
 * seria manter dois lugares para corrigir cada link.
 * ============================================================ */

@media (max-width: 1180px) {
	/* Trocando o token, o recuo da barra se ajusta sozinho. */
	.dh { --dh-cat-pad: 9px; }

	.dh-busca { width: min(300px, 34vw); }
	.dh a.dh-cat-l { font-size: 14px; }
	.dh a.dh-nav-l { padding-inline: 11px; }
	.dh-nav { margin-left: -11px; }
}

@media (max-width: 1024px) {
	.dh-barra { display: none; }
	.dh-nav { display: none; }
	.dh-topo .dh-wrap { padding-block: 12px; gap: 14px; }
	.dh a.dh-burger { display: grid; }
	.dh img.dh-logo-img { height: 28px; }
	.dh a.dh-painel span { display: none; }
	.dh a.dh-painel { padding: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.dh *,
	.dh *::before {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}