/* ─── HEADER ─────────────────────────────────────── */
header {position : sticky;top : 0;z-index : 100;background : #323138;border-bottom : 1px solid #E8E8E8;box-shadow : 0 1px 12px rgba(0, 0, 0, .06)}
.header-inner {max-width : 1200px;margin : 0 auto;padding : 0 24px;height : 72px;display : flex;align-items : center;justify-content : space-between;gap : 32px}
.logo img {height : 36px;display : block}
nav.desktop {display : flex;align-items : center;gap : 4px}
nav.desktop a {font-size : 14px;font-weight : 500;color : #444;text-decoration : none;padding : 8px 14px;border-radius : 8px;transition : background .18s, color .18s}
nav.desktop a:hover {background : #F4F4F4;color : #111}
.nav-dropdown {position : relative}
.nav-dropdown > a::after {content : '▾';margin-left : 4px;font-size : 11px}
.dropdown-menu {display : none;position : absolute;top : calc(100% + 8px);left : 0;background : #FFF;border : 1px solid #E8E8E8;border-radius : 12px;padding : 8px;min-width : 220px;box-shadow : 0 8px 32px rgba(0, 0, 0, .1);z-index : 200}
.nav-dropdown:hover .dropdown-menu {display : block}
.dropdown-menu a {display : block;font-size : 14px;color : #444;text-decoration : none;padding : 9px 14px;border-radius : 8px;transition : background .15s}
.dropdown-menu a:hover {background : #F4F4F4;color : #111}
.btn-cta {background : #1A1A1A;color : #FFF !important;border-radius : 100px;padding : 10px 22px !important;font-size : 14px;font-weight : 600;transition : background .18s, transform .15s !important}
.btn-cta:hover {background : #333 !important;transform : translateY(-1px)}

/* hamburger */
.hamburger {display : none;flex-direction : column;gap : 5px;cursor : pointer;padding : 8px;border : none;background : none}
.hamburger span {width : 24px;height : 2px;background : #FFF;border-radius : 2px;transition : all .25s}
.hamburger.open span:nth-child(1) {transform : translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2) {opacity : 0}
.hamburger.open span:nth-child(3) {transform : translateY(-7px) rotate(-45deg)}

header {
	position      : sticky;
	top           : 0;
	z-index       : 100;
	background    : #323138; /* Fundo escuro conforme a imagem */
	border-bottom : 1px solid rgba(255, 255, 255, 0.1);
}

.header-inner {
	max-width       : 1200px;
	margin          : 0 auto;
	padding         : 0 24px;
	height          : 72px;
	display         : flex;
	align-items     : center;
	justify-content : space-between;
}

/* Links do menu de topo - DEVEM SER CLAROS */
nav.desktop a {
	font-size       : 14px;
	font-weight     : 500;
	color           : #FFF !important; /* Branco para contrastar com o cinza escuro */
	text-decoration : none;
	padding         : 8px 14px;
	border-radius   : 8px;
	transition      : all 0.2s;
}

nav.desktop a:hover {
	background : rgba(255, 255, 255, 0.1);
}

/* CONTAINER DO DROPDOWN */
.nav-dropdown { position : relative; }
.nav-dropdown > a::after { content : ' ▾'; font-size : 10px; opacity : 0.7; }

/* CAIXA DO DROPDOWN - DEVE SER BRANCA */
.dropdown-menu {
	display       : none;
	position      : absolute;
	top           : calc(100% + 10px);
	left          : 0;
	background    : #FFF !important; /* Fundo branco fixo */
	border-radius : 12px;
	padding       : 10px 0;
	min-width     : 240px;
	box-shadow    : 0 10px 40px rgba(0, 0, 0, 0.2);
	z-index       : 200;
}

/* LINKS DENTRO DO DROPDOWN - DEVEM SER ESCUROS */
.dropdown-menu a {
	display       : block !important;
	color         : #333 !important; /* Texto escuro no fundo branco */
	padding       : 12px 20px !important;
	font-size     : 14px !important;
	border-radius : 0 !important;
	background    : transparent !important;
}

.dropdown-menu a:hover {
	background : #F5F5F7 !important;
	color      : #000 !important;
}

.nav-dropdown:hover .dropdown-menu { display : block; }

/* BOTÃO CTA */
.btn-cta {
	background    : #1A1A1A !important;
	color         : #FFF !important;
	border        : 1px solid #444 !important;
	border-radius : 8px !important;
	padding       : 10px 22px !important;
	font-weight   : 600;
}

.btn-cta:hover {
	background : #000 !important;
	transform  : translateY(-1px);
}

.nav-dropdown:hover .dropdown-menu {
	display       : block !important;
	background    : #FFF !important;
	min-width     : 260px !important; /* Largura controlada */
	border-radius : 12px !important;
	border        : 1px solid #E0E0E0 !important;
	box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.2) !important;
	padding       : 8px 0 !important;
	top           : calc(100% + 5px) !important;
}

/* 2. FORÇA O TEXTO A SER PRETO/CINZA ESCURO (Resolve o sumiço) */
.dropdown-menu a {
	color           : #1A1A1A !important; /* PRETO ABSOLUTO PARA CONTRASTE */
	display         : block !important;
	padding         : 12px 20px !important;
	font-size       : 14px !important;
	font-weight     : 600 !important; /* Negrito para destacar */
	text-decoration : none !important;
	transition      : background 0.2s !important;
	border-bottom   : 1px solid #F5F5F5 !important; /* Linha sutil entre itens */
	text-align      : left !important;
}

/* 3. Remove a linha do último item */
.dropdown-menu a:last-child {
	border-bottom : none !important;
}

/* 4. Efeito de Hover (fundo cinza claro ao passar o mouse) */
.dropdown-menu a:hover {
	background : #F8F8F8 !important;
	color      : #000 !important;
}

/* 5. Ajuste dos links do menu de topo (Home, Sobre...) para Branco */
nav.desktop a {
	color   : #FFF !important;
	opacity : 0.9;
}

nav.desktop a:hover {
	opacity    : 1;
	background : rgba(255, 255, 255, 0.1);
}

/* ─── OPERAÇÃO RESGATE: DROPDOWN LEGÍVEL ─── */

/* 1. Garante que os links do menu principal sejam brancos */
nav.desktop > a,
.nav-dropdown > a {
	color : #FFF !important;
}

/* 2. Configuração da caixa branca */
.dropdown-menu {
	display          : none;
	position         : absolute;
	background-color : #FFF !important; /* Fundo branco forçado */
	min-width        : 220px !important;
	border-radius    : 12px !important;
	box-shadow       : 0 10px 30px rgba(0, 0, 0, 0.3) !important;
	padding          : 10px 0 !important;
	top              : 100% !important;
	left             : 0 !important;
	border           : 1px solid #DDD !important;
	z-index          : 9999 !important;
}

/* 3. A REGRA QUE VOCÊ PRECISA: Força o texto interno a ser preto */
/* O segredo aqui é o seletor composto para vencer qualquer herança */
nav.desktop .dropdown-menu a,
header .dropdown-menu a,
.dropdown-menu a {
	color           : #1A1A1A !important; /* PRETO NO BRANCO */
	display         : block !important;
	padding         : 12px 20px !important;
	font-size       : 14px !important;
	font-weight     : 600 !important;
	text-decoration : none !important;
	background      : none !important;
	border-bottom   : 1px solid #F0F0F0 !important;
}

/* 4. Efeito de Hover dentro do dropdown */
.dropdown-menu a:hover {
	background-color : #F8F8F8 !important;
	color            : #000 !important;
	padding-left     : 25px !important;
}

/* 5. Garante que o menu apareça no hover */
.nav-dropdown:hover .dropdown-menu {
	display : block !important;
}

/* ─── AJUSTE DE HOVER NO DROPDOWN (CONTRASTE MÁXIMO) ─── */

/* Seletor ultra-específico para garantir que o fundo mude no hover */
header nav.desktop .dropdown-menu a:hover,
header .dropdown-menu a:hover,
.dropdown-menu a:hover {
	background-color : #F0EEFF !important; /* Um lilás bem clarinho para combinar com a marca */
	color            : #6C5CE7 !important; /* Texto roxo no hover para dar feedback visual */
	padding-left     : 28px !important; /* Efeito sutil de deslocamento para a direita */
	transition       : all 0.2s ease !important;
}

/* Garante que a linha sutil entre os itens não atrapalhe o visual no hover */
.dropdown-menu a:hover {
	border-bottom-color : transparent !important;
}

.btn-cta.contato {
	background : #3190E7 !important;
}