/* ============================================================================
 * DPiX Finance - Home (Landing Page) - v10 "glassmorphism"
 * Caio Codigo - squad Criacao de Sites & Sistemas
 *
 * CSS proprio e AUTOSSUFICIENTE para a Home publica (app/views/welcome/home.php).
 * Substitui INTEIRAMENTE a v9 (mesmo arquivo, mesmo carregamento por ULTIMO no
 * <head>, depois de bootstrap.css e custom.css). NENHUMA marcacao HTML foi
 * alterada nesta rodada - so este arquivo. Nenhum $lang[...] foi tocado.
 *
 * MUDANCA DE DIRECAO VISUAL (pedido explicito do cliente apos a v9):
 * a Home inteira passa a usar "glassmorphism" - fundo com gradiente de marca
 * (navy -> dark + glow vermelho), e os blocos de conteudo (navbar, hero
 * caption, cards de "Como ganhar", avisos de teto, footer) viram paineis de
 * vidro fosco (fundo translucido + backdrop-filter: blur + borda sutil
 * brilhante), flutuando sobre esse fundo.
 *
 * REGRA DE CONTRASTE (napertida apos bugs de texto invisivel na v8 e na v9):
 * como o fundo agora e ESCURO em toda a pagina (nao so no header/footer como
 * antes), TODO texto declara "color" explicito em branco/quase-branco. Nao
 * ha nenhuma regra abaixo que dependa de heranca de cor do body/bootstrap/
 * custom.css. Cada bloco de vidro fosco define sua propria cor de texto.
 *
 * BUGS CORRIGIDOS NESTA RODADA:
 * 1) Navbar com altura muito alta -> "--dpx-header-h" reduzido de 72px para
 *    64px, e o layout dos itens do menu passou a usar flex + line-height
 *    igual a altura do header (em vez de padding vertical empilhado por
 *    item), entao a altura real nunca ultrapassa "--dpx-header-h",
 *    independente de quantos itens o menu tenha.
 * 2) Footer com letras muito pequenas -> fonte do copyright subiu de
 *    0.85rem (~13.6px) para 1rem (16px), com mais respiro (padding/line-height).
 *
 * ADR-17: TODO tamanho de fonte deste arquivo usa px, nunca rem - o html
 * deste tema (core.css/bootstrap, fora deste arquivo) define
 * "font-size: 62.5%" na raiz, o truque antigo pra 1rem = 10px em vez dos
 * 16px "padrao". Isso passou despercebido em rodadas anteriores (inclusive
 * no item 2 acima - "1rem (16px)" no comentario nunca foi verdade NESTE
 * site, só ~10px de verdade) e fez todo texto em rem deste arquivo renderizar
 * a 62.5% do tamanho pretendido, com nenhum erro visível de CSS - só letra
 * pequena demais em silêncio. Reportado várias vezes pelo cliente como
 * "letra pequena" antes de eu achar a causa raiz.
 *
 * Paleta de marca (mesma ja usada no restante do sistema - nenhuma cor nova
 * foi inventada, so aplicada em formato de vidro/gradiente):
 * vermelho #d60044, azul-marinho #154360, azul bem escuro #151441, branco.
 * ========================================================================= */

:root {
	--dpx-red: #d60044;
	--dpx-red-dark: #b8003a;
	--dpx-red-glow: rgba(214, 0, 68, .35);
	--dpx-navy: #154360;
	--dpx-dark: #151441;

	/* vidro fosco (glassmorphism) */
	--glass-bg: rgba(255, 255, 255, .08);
	--glass-bg-strong: rgba(255, 255, 255, .13);
	--glass-border: rgba(255, 255, 255, .18);
	--glass-border-strong: rgba(255, 255, 255, .28);
	--glass-blur: blur(16px);
	--glass-shadow: 0 10px 34px rgba(5, 4, 30, .45);

	/* texto sobre vidro/fundo escuro - sempre explicito, nunca herdado */
	--on-glass: #ffffff;
	--on-glass-soft: rgba(255, 255, 255, .84);
	--on-glass-muted: rgba(255, 255, 255, .66);

	--dpx-header-h: 64px;
}

/* ------------------------------------------------------------------------
 * FUNDO GLOBAL
 * Gradiente diagonal de marca (navy -> dark) fixo atras de toda a pagina,
 * com dois glows suaves (vermelho e navy) que dao profundidade para os
 * paineis de vidro "flutuarem" por cima. position:fixed nos pseudo-elementos
 * evita que o gradiente se repita/quebre entre secoes.
 * ---------------------------------------------------------------------- */
body {
	font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
	color: var(--on-glass-soft);
	background-color: var(--dpx-dark);
	background-image: linear-gradient(135deg, #151441 0%, #1a1c4d 32%, #154360 68%, #10102e 100%);
	position: relative;
}
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(10px);
}
body::before {
	top: -10%;
	right: -10%;
	width: 55vw;
	height: 55vw;
	background: radial-gradient(circle, var(--dpx-red-glow) 0%, rgba(214, 0, 68, 0) 70%);
	opacity: .55;
}
body::after {
	bottom: -15%;
	left: -12%;
	width: 60vw;
	height: 60vw;
	background: radial-gradient(circle, rgba(21, 67, 96, .55) 0%, rgba(21, 67, 96, 0) 70%);
}
#content_wrapper {
	position: relative;
	z-index: 1;
}
/* ADR-21: navegador mostra um contorno de foco (outline) ao clicar em
qualquer link - reportado pelo cliente como "borda branca e meia
amarelada" na logo, nos itens do menu e no "Saber Mais". Removido em
toda a home (só este arquivo, não afeta admin/backoffice). */
a:focus,
a:active {
	outline: none;
}
/* #header NAO recebe position/z-index proprio: isso criaria um novo contexto
   de empilhamento que prenderia o z-index:1030 da .dpx-navbar (fixa) dentro
   dele, fazendo-o perder a disputa contra #content_wrapper (que vem depois
   no HTML) mesmo os dois tendo "z-index:1" - era exatamente esse bug que
   fazia o hero cobrir a navbar e ela "sumir"/ficar cortada ao rolar a
   pagina. A .dpx-navbar ja e position:fixed com seu proprio z-index (ver
   abaixo) e assim compete direto (e vence, 1030 > 1) contra o
   #content_wrapper, sem precisar de nenhum wrapper com z-index proprio. */

#content_wrapper h1,
#content_wrapper h2,
#content_wrapper h3,
#content_wrapper h4,
#content_wrapper h5 {
	font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	color: var(--on-glass);
	margin: 0;
}
#content_wrapper p {
	color: var(--on-glass-soft);
	line-height: 1.7;
	margin: 0 0 10px;
}
#content_wrapper a {
	transition: color .15s ease, background-color .15s ease, opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}
#content_wrapper .container {
	max-width: 1140px;
}

/* ------------------------------------------------------------------------
 * HEADER / NAVBAR - vidro fosco fixo, altura compacta (bug #1)
 * ---------------------------------------------------------------------- */
.dpx-navbar {
	background-color: var(--glass-bg-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 0;
	border-bottom: 1px solid var(--glass-border);
	margin-bottom: 0;
	min-height: var(--dpx-header-h);
	box-shadow: 0 4px 24px rgba(5, 4, 30, .35);
}
.dpx-navbar .navbar-header {
	min-height: var(--dpx-header-h);
	float: none;
}
.dpx-navbar .navbar-brand {
	padding: 0 15px;
	height: var(--dpx-header-h);
	display: flex;
	align-items: center;
}
.dpx-navbar .navbar-brand > img {
	/* ADR-23: logo ocupava so 30px de altura numa navbar de 64px, sobrando
	17px de vao vazio em cima e embaixo - agora acompanha a altura do
	header (menos uma folga pequena), width:auto mantem a proporcao. */
	height: calc(var(--dpx-header-h) - 14px);
	width: auto;
}
.dpx-navbar .navbar-toggle {
	margin-top: 14px;
	margin-bottom: 14px;
	border-color: var(--glass-border-strong);
}
.dpx-navbar .navbar-toggle .icon-bar {
	background-color: var(--on-glass);
}
.dpx-navbar .navbar-toggle:hover,
.dpx-navbar .navbar-toggle:focus {
	background-color: rgba(255, 255, 255, .1);
}
.dpx-nav-list {
	margin-top: 0;
}
/* Desktop: tudo alinhado numa unica linha com altura fixa igual ao header -
   e o que garante que a navbar nunca cresce, nao importa quantos itens
   (menu, botao CTA, bandeiras de idioma) existam lado a lado. */
@media (min-width: 768px) {
	.dpx-navbar .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--dpx-header-h);
	}
	.dpx-navbar .navbar-collapse {
		float: none;
		padding: 0;
		height: var(--dpx-header-h) !important;
	}
	.dpx-nav-list {
		display: flex;
		align-items: center;
		height: var(--dpx-header-h);
	}
}
.dpx-nav-list > li > a.l-menu {
	color: var(--on-glass-soft);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 0 16px;
	line-height: var(--dpx-header-h);
	display: block;
}
.dpx-nav-list > li > a.l-menu:hover,
.dpx-nav-list > li > a.l-menu:focus,
.dpx-nav-list > li > a.l-menu.selected-nav {
	color: var(--on-glass);
	background-color: transparent;
}
.dpx-nav-list > li > a.l-menu.selected-nav {
	box-shadow: inset 0 -3px 0 var(--dpx-red);
}
.dpx-nav-cta {
	display: flex;
	align-items: center;
}
.dpx-nav-cta > a {
	display: inline-block;
	margin: 0 0 0 6px;
	padding: 9px 22px !important;
	background-color: var(--dpx-red);
	color: var(--on-glass) !important;
	border-radius: 30px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px var(--dpx-red-glow);
}
.dpx-nav-cta > a:hover,
.dpx-nav-cta > a:focus {
	/* !important necessario: o bootstrap.css tem ".nav > li > a:hover" com
	specificidade maior (2 elementos na cadeia vs 1 aqui) e ganhava a cascata
	mesmo carregado antes, deixando o botao com bg quase branco (#f5f5f5) e
	texto branco por cima - texto sumia no hover. */
	background-color: var(--dpx-red-dark) !important;
	color: var(--on-glass) !important;
}

/* language switcher (v11: dropdown, so a bandeira ativa fica visivel) */
/* Especificidade ".dpx-nav-list > li.dpx-lang-switch" (nao so ".dpx-lang-switch")
   de proposito: o <li class="dpx-lang-switch"> e filho direto de <ul class="nav
   navbar-nav navbar-right dpx-nav-list">, entao o bootstrap.css tem
   ".nav>li,.nav>li>a{display:block;...}" (especificidade 0,1,1 / 0,1,2), que e
   MAIOR que ".dpx-lang-switch{display:flex}" sozinho (0,1,0) - especificidade
   decide o empate independente de home-modern.css carregar DEPOIS de
   bootstrap.css no <head>. Sem o seletor mais especifico abaixo (2 classes +
   tag, igual ao padrao ja usado em "#content_wrapper .dpx-hero-caption h2"
   mais acima neste arquivo), o <li> voltaria a ficar em display:block e cairia
   pra fora da navbar (64px de altura), por cima do hero.
   Estrutura nova (era 3 <a> sempre visiveis lado a lado, com borda vermelha
   via box-shadow indicando qual estava ativa - o cliente achou essa borda
   maior que a propria bandeira). Agora e um <button> (a bandeira do idioma
   ATUAL, sempre visivel, funciona como toggle) + um <ul> dropdown de vidro
   fosco com as outras 2 bandeiras, que so aparece com a classe "dpx-open"
   (alternada via JS no clique - ver script antes de </body> em home.php).
   Como so a bandeira ativa fica visivel, nao existe mais indicador de
   "ativo": a propria posicao (toggle vs. dentro do dropdown) ja comunica
   isso, entao o antigo box-shadow de borda foi removido, nao substituido. */
.dpx-nav-list > li.dpx-lang-switch {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 0 0 16px;
	margin-left: 6px;
	height: var(--dpx-header-h);
}
.dpx-lang-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 6px;
	margin: 0;
	line-height: 0;
	cursor: pointer;
	border-radius: 6px;
	min-width: 34px;
	min-height: 34px;
	color: var(--on-glass);
}
.dpx-lang-toggle:hover,
.dpx-lang-toggle:focus {
	background-color: rgba(255, 255, 255, .12);
	outline: 0;
}
.dpx-lang-toggle img {
	display: block;
	width: 22px;
	height: 16px;
	object-fit: cover;
	border-radius: 3px;
}
/* Setinha indicando que a bandeira abre um menu (pedido do cliente) -
".caret" e a classe/estrutura padrao do proprio Bootstrap (usada em
todo o resto do site pra dropdowns), reaproveitada aqui em vez de
inventar um triangulo novo do zero. */
.dpx-lang-toggle .caret {
	margin-left: 5px;
}
.dpx-lang-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 8px 0 0;
	padding: 6px;
	list-style: none;
	display: none;
	flex-direction: column;
	gap: 2px;
	background-color: var(--glass-bg-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-strong);
	border-radius: 12px;
	box-shadow: var(--glass-shadow);
	z-index: 1040;
	min-width: 150px;
}
.dpx-lang-dropdown.dpx-open {
	display: flex;
}
.dpx-lang-dropdown li {
	display: block;
}
/* Antes so a bandeira aparecia aqui dentro (o nome do idioma so dava
pra ver via "title", tooltip que ninguem passa o mouse pra ver) -
pedido do cliente: mostrar bandeira + nome por extenso em cada opcao. */
.dpx-lang-dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	opacity: .8;
	border-radius: 6px;
	overflow: hidden;
	white-space: nowrap;
}
.dpx-lang-dropdown a:hover,
.dpx-lang-dropdown a:focus {
	opacity: 1;
	background-color: rgba(255, 255, 255, .14);
}
.dpx-lang-dropdown img {
	display: block;
	width: 22px;
	height: 16px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
}
.dpx-lang-name {
	font-size: 13px;
	line-height: 1;
	color: var(--on-glass);
}

@media (max-width: 767px) {
	.dpx-navbar .navbar-collapse {
		background-color: var(--glass-bg-strong);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
		border-color: var(--glass-border);
		box-shadow: 0 12px 24px rgba(5, 4, 30, .4);
	}
	.dpx-nav-list {
		margin: 0 -15px;
	}
	.dpx-nav-list > li > a.l-menu {
		padding: 16px 15px;
		line-height: 20px;
		border-top: 1px solid var(--glass-border);
	}
	.dpx-nav-cta {
		padding: 14px 15px 6px;
		display: block;
	}
	.dpx-nav-cta > a {
		display: block;
		text-align: center;
		margin: 0;
	}
	.dpx-nav-list > li.dpx-lang-switch {
		height: auto;
		padding: 16px 15px 20px;
		border-top: 1px solid var(--glass-border);
	}
	/* O dropdown de idioma (".dpx-lang-dropdown") e "position:absolute" no
	   desktop de proposito (flutua por cima do resto da navbar sem empurrar
	   layout). No mobile isso quebrava: o menu aberto (".navbar-collapse", ver
	   regra logo acima) e um Bootstrap 3 "collapse" com "overflow:auto" e
	   "max-height" fixo (limite de altura do proprio Bootstrap para o menu
	   scrollar em telas pequenas) - um ancestral com overflow:auto/hidden/
	   scroll recorta QUALQUER descendente position:absolute que ultrapasse
	   seus limites, entao o dropdown aberto ficava invisivel (cortado), so
	   apareceria rolando manualmente dentro do menu. Testado no navegador com
	   Playwright (clique na bandeira dentro do menu mobile aberto - nada
	   aparecia na tela). Corrigido tornando o dropdown "position:static" so
	   no mobile: ele passa a fazer parte do fluxo normal do <li> (empurra o
	   conteudo abaixo dele em vez de flutuar), entao nunca fica fora da area
	   visivel/scrollavel do menu. */
	.dpx-lang-dropdown {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 12px 0 0;
		box-shadow: none;
	}
}

/* Copia mobile do seletor de idioma (visible-xs-block no HTML), vive
direto dentro de ".navbar-header" (fora do ".navbar-collapse") ao lado
do botao hamburguer - pedido do cliente: as bandeiras so apareciam
depois de abrir o menu, queria elas visiveis o tempo todo. "float:right"
igual ao ".navbar-toggle" (Bootstrap) e, por vir DEPOIS dele no DOM (ver
home.php), empilha imediatamente a esquerda dele. Como este wrapper NAO
fica dentro do ".navbar-collapse" com overflow:auto (motivo pelo qual a
copia desktop precisou de position:static no mobile, ver regra acima),
o dropdown aqui pode continuar "position:absolute" (flutua por cima,
sem empurrar layout) mesmo em telas pequenas - por isso as duas regras
abaixo re-especializam por cima do bloco ".dpx-lang-dropdown" mobile
logo acima, restrito a esta copia. */
.dpx-lang-switch-mobile {
	display: flex;
	align-items: center;
	float: right;
	margin: 13px 2px 0 0;
}
/* Pedido do cliente: bandeira do mesmo tamanho "aproximado" do icone
hamburguer ao lado (".navbar-toggle", 44x34px, ver ADR-51) - antes a
bandeira (30x30, imagem 22x16 dentro) ficava visivelmente menor/mais
apertada que o hamburguer. Aumentada a altura do botao pra bater com
os 34px do hamburguer e a bandeira em si um pouco maior. */
.dpx-lang-switch-mobile .dpx-lang-toggle {
	min-width: 38px;
	min-height: 34px;
	padding: 5px 6px;
}
.dpx-lang-switch-mobile .dpx-lang-toggle img {
	width: 26px;
	height: 19px;
}
@media (max-width: 767px) {
	.dpx-lang-switch-mobile .dpx-lang-dropdown {
		position: absolute;
		flex-direction: column;
		flex-wrap: nowrap;
		right: 0;
		margin: 8px 0 0;
		box-shadow: var(--glass-shadow);
	}
}

/* ------------------------------------------------------------------------
 * HERO - carrossel de imagens + legenda com texto solto (sem vidro)
 * ---------------------------------------------------------------------- */
.dpx-hero {
	position: relative;
	background-color: var(--dpx-dark);
	padding-top: var(--dpx-header-h);
}
.dpx-hero-carousel .carousel-inner {
	overflow: hidden;
}
.dpx-hero-carousel .carousel-inner img {
	width: 100%;
	height: 560px;
	object-fit: cover;
	filter: brightness(.5) saturate(1.05);
}
/* Gradiente escuro por cima da imagem toda (nao so atras do texto) -
   reforcado (v11: 0,25/0,55 -> 0,38/0,68) porque o h2 abaixo perdeu o
   cartao de vidro que ficava atras dele (pedido do cliente: o quadro de
   vidro atrapalhava ver a foto de fundo). Esse reforco + o
   filter:brightness(.5) na imagem acima + o text-shadow forte do h2 sao o
   que garante legibilidade agora, em vez de um fundo solido atras do texto. */
.dpx-hero-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	padding: 20px;
	background: linear-gradient(180deg, rgba(21, 20, 65, .38) 0%, rgba(16, 16, 46, .68) 100%);
}
/* v11: o texto de cada slide (h2) PERDEU o "cartao de vidro" que ficava
   atras dele (fundo translucido + blur + borda) - pedido explicito do
   cliente, que achou que o quadro atrapalhava ver a imagem de fundo. Sobra
   so o texto branco, com uma pilha de text-shadow (2 sombras escuras bem
   definidas + 1 glow) forte o bastante pra manter contraste sobre as 4
   fotos do carrossel (slide01..04.jpg) mesmo nas areas mais claras delas -
   somado ao gradiente escuro de .dpx-hero-caption acima (reforcado nesta
   mesma rodada) e ao brightness(.5) ja aplicado na imagem. Nenhuma caixa/
   fundo/blur/borda foi reintroduzida atras do texto. */
/* Especificidade #content_wrapper .dpx-hero-caption h2 (nao so ".dpx-hero-caption h2")
   de proposito: precisa vencer a regra "#content_wrapper h1,h2,h3,h4,h5{margin:0}"
   (ID + tag) mais acima no arquivo - com especificidade so de classe+tag, o "margin:
   0 0 28px" abaixo era ignorado e o botao ficava colado (as vezes visualmente por
   cima) do texto do slide, sem nenhum espaco entre os dois. */
#content_wrapper .dpx-hero-caption h2 {
	color: var(--on-glass);
	font-weight: 800;
	font-size: clamp(24px, 4vw, 41.6px);
	line-height: 1.25;
	max-width: 780px;
	margin: 0 0 28px;
	padding: 0 16px;
	text-shadow:
		0 2px 6px rgba(0, 0, 0, .85),
		0 6px 22px rgba(0, 0, 0, .65),
		0 0 46px rgba(0, 0, 0, .5);
}
/* Linha com os 2 CTAs do hero ("ESCRITORIO" + "JUNTE-SE") lado a lado. Um
   wrapper flex proprio e necessario porque .dpx-hero-caption e
   "flex-direction:column" (empilha h2 e o resto verticalmente) - sem ele os
   2 botoes cairiam um embaixo do outro em vez de ficarem lado a lado.
   flex-wrap:wrap + justify-content:center evita qualquer estouro horizontal
   se o texto do botao crescer (ex: idioma en/es) num slide estreito. */
.dpx-hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
}
.dpx-btn {
	display: inline-block;
	border: 0;
	border-radius: 30px;
	padding: 14px 34px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}
.dpx-btn-primary {
	background-color: var(--dpx-red);
	color: var(--on-glass) !important;
	box-shadow: 0 10px 26px var(--dpx-red-glow);
}
.dpx-btn-primary:hover,
.dpx-btn-primary:focus {
	background-color: var(--dpx-red-dark);
	color: var(--on-glass) !important;
	transform: translateY(-1px);
}
/* Variante secundaria (contorno/vidro) para o "JUNTE-SE": nao pode competir
   visualmente com o vermelho solido do "ESCRITORIO", que continua sendo o
   CTA principal - por isso fundo translucido (glass) + borda, no mesmo
   espirito glassmorphism do resto da Home, em vez de uma segunda cor solida
   nova. */
.dpx-btn-secondary {
	background-color: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	color: var(--on-glass) !important;
	border: 1px solid var(--glass-border-strong);
	box-shadow: var(--glass-shadow);
}
.dpx-btn-secondary:hover,
.dpx-btn-secondary:focus {
	background-color: var(--glass-bg-strong);
	border-color: var(--on-glass);
	color: var(--on-glass) !important;
	transform: translateY(-1px);
}

.dpx-hero-carousel .carousel-indicators {
	bottom: 22px;
}
.dpx-hero-carousel .carousel-indicators li {
	width: 26px;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, .4);
	border: 0;
	margin: 1px 4px;
}
.dpx-hero-carousel .carousel-indicators .active {
	width: 26px;
	height: 4px;
	margin: 1px 4px;
	background-color: var(--dpx-red);
}
.dpx-hero-carousel .carousel-control {
	width: 60px;
	background-image: none !important;
	opacity: 1;
}
.dpx-hero-carousel .carousel-control span.fa {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 42px;
	height: 42px;
	line-height: 42px;
	border-radius: 50%;
	background-color: var(--glass-bg-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	color: var(--on-glass);
	font-size: 18px;
	text-align: center;
}
.dpx-hero-carousel .carousel-control:hover span.fa {
	background-color: rgba(255, 255, 255, .25);
}

.dpx-scroll-down {
	text-align: center;
	padding: 14px 0;
	background-color: var(--dpx-dark);
	border-top: 1px solid var(--glass-border);
}
.dpx-scroll-down a {
	color: var(--on-glass-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
.dpx-scroll-down a:hover {
	color: var(--on-glass);
}
.dpx-scroll-down .fa {
	display: block;
	margin: 0 auto 2px;
	color: var(--on-glass-soft);
	animation: dpx-bounce 1.6s infinite;
}
@keyframes dpx-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

@media (max-width: 767px) {
	.dpx-hero-carousel .carousel-inner img {
		height: 460px;
	}
	.dpx-hero-carousel .carousel-control {
		display: none;
	}
}

/* ------------------------------------------------------------------------
 * FEATURES ("Como eu posso ganhar") - cards de vidro fosco sobre o
 * gradiente de fundo global (a secao em si fica transparente).
 * ---------------------------------------------------------------------- */
.dpx-features {
	background-color: transparent;
	padding: 80px 0 64px;
	position: relative;
}
.dpx-section-title {
	text-align: center;
	margin-bottom: 44px;
}
.dpx-section-title h2 {
	font-size: clamp(24px, 3.4vw, 34.4px);
	color: var(--on-glass);
	position: relative;
	display: inline-block;
	padding-bottom: 16px;
}
.dpx-section-title h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background-color: var(--dpx-red);
}

.dpx-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.dpx-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background-color: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	box-shadow: var(--glass-shadow);
	padding: 22px 22px;
	text-align: left;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.dpx-card:hover {
	transform: translateY(-4px);
	background-color: var(--glass-bg-strong);
	border-color: var(--glass-border-strong);
	box-shadow: 0 16px 40px rgba(5, 4, 30, .5);
}
.dpx-card-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	line-height: 46px;
	border-radius: 50%;
	background-color: var(--dpx-red);
	color: var(--on-glass) !important;
	text-align: center;
	font-size: 18px;
	box-shadow: 0 8px 20px var(--dpx-red-glow);
}
.dpx-card-body {
	flex: 1 1 auto;
	min-width: 0;
}
.dpx-card h4 {
	color: var(--on-glass) !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 8px !important;
}
/* $lang['descbonusN'] ja vem com sua propria tag <p>...</p> do arquivo de
   idioma (langs/*.php) - estilizamos via .dpx-card-text p em vez de criar
   um <p> novo, para nao duplicar marcacao nem tocar no texto/HTML da lang.
   Cor sempre explicita (branco suave), nunca herdada. */
.dpx-card-text {
	color: var(--on-glass-soft) !important;
}
.dpx-card-text p {
	color: var(--on-glass-soft) !important;
	font-size: 13px;
	line-height: 1.65;
	margin: 0;
}
.dpx-card-text b {
	color: var(--on-glass) !important;
}

@media (max-width: 767px) {
	.dpx-cards-grid {
		grid-template-columns: 1fr;
	}
	.dpx-card {
		flex-direction: column;
	}
}

/* ADR-18: bloco "Avisos de teto" (.dpx-ceiling*) removido do HTML a
pedido do cliente - CSS correspondente removido junto (ver comentário em
welcome/home.php sobre como reativar se um dia precisar). */

/* ------------------------------------------------------------------------
 * CALCULADORA ("Calcule Seus Ganhos") - mesmo cartao de vidro fosco do
 * resto da Home, valores computados em JS a partir das configuracoes
 * reais do admin (ver script inline em welcome/home.php).
 * ---------------------------------------------------------------------- */
.dpx-calculator {
	background-color: transparent;
	padding: 24px 0 80px;
	position: relative;
}
.dpx-calc-subtitle {
	color: var(--on-glass-muted);
	font-size: 13px;
	margin-top: -22px;
}
.dpx-calc-box {
	/* ADR-19: mesma largura da seção "Como Posso Ganhar" (.dpx-cards-grid,
	que não define max-width próprio - só herda do .container do Bootstrap),
	em vez de uma largura menor e fixa só pra este cartão. */
	max-width: 100%;
	margin: 0 auto;
	background-color: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	box-shadow: var(--glass-shadow);
	padding: 28px 26px;
}
.dpx-calc-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}
.dpx-calc-form label {
	color: var(--on-glass);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}
.dpx-calc-input-group {
	width: 100%;
	max-width: 340px;
	display: flex;
	align-items: center;
	background-color: rgba(0, 0, 0, .2);
	border: 1px solid var(--glass-border-strong);
	border-radius: 12px;
	padding: 0 16px;
}
.dpx-calc-prefix {
	color: var(--on-glass-soft);
	font-weight: 700;
	margin-right: 8px;
}
.dpx-calc-input {
	flex: 1;
	width: 100%;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--on-glass);
	font-size: 15px;
	font-weight: 600;
	padding: 12px 0;
	text-align: center;
	-moz-appearance: textfield;
}
.dpx-calc-input::-webkit-outer-spin-button,
.dpx-calc-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.dpx-calc-results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}
.dpx-calc-results-bottom {
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 0;
}
.dpx-calc-result-item {
	background-color: rgba(0, 0, 0, .18);
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	padding: 14px 10px;
	text-align: center;
}
.dpx-calc-result-label {
	display: block;
	color: var(--on-glass-muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 6px;
}
.dpx-calc-result-value {
	display: block;
	color: var(--on-glass);
	font-size: 18px;
	font-weight: 700;
}
/* ADR-17: "#content_wrapper p" (mais especifico, ID + elemento) estava
vencendo a margem daqui (classe + elemento) e zerando o espaço acima do
texto - mesmo truque de escopo por ID já usado no resto do arquivo
(#content_wrapper .dpx-hero-caption h2) pra vencer essa disputa. */
#content_wrapper .dpx-calc-disclaimer {
	max-width: 100%;
	margin: 28px auto 0;
	color: var(--on-glass-muted);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 767px) {
	.dpx-calc-box {
		padding: 28px 22px;
	}
	.dpx-calc-results {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------
 * FOOTER - vidro fosco escuro; fonte do copyright aumentada (bug #2:
 * 0.85rem/~13.6px na v9 -> 1rem/16px agora, com mais respiro vertical).
 * ---------------------------------------------------------------------- */
.dpx-footer {
	background-color: var(--glass-bg-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-top: 1px solid var(--glass-border);
	padding: 30px 0;
}
.dpx-footer p {
	color: var(--on-glass-soft) !important;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}
.dpx-footer span {
	color: var(--on-glass);
	font-weight: 700;
}

/* ------------------------------------------------------------------------
 * BOTAO "VOLTAR AO TOPO" (foguete) - escondido ate rolar um pouco a
 * pagina, some de novo perto do topo. A rolagem em si + a animacao do
 * foguete "subindo" (dpx-rocket-fly) sao controladas em JS (perto do fim
 * de welcome/home.php), na mesma duracao, pra ficarem sincronizadas.
 * ---------------------------------------------------------------------- */
.dpx-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	width: 52px;
	height: 52px;
	border: 1px solid var(--glass-border-strong);
	border-radius: 50%;
	background-color: var(--dpx-red);
	box-shadow: 0 8px 20px var(--dpx-red-glow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, background-color .18s ease, visibility 0s .25s;
}
.dpx-scroll-top.dpx-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .25s ease, transform .25s ease, background-color .18s ease, visibility 0s;
}
.dpx-scroll-top:hover {
	background-color: var(--dpx-red-dark);
}
.dpx-rocket-icon {
	font-size: 22px;
	line-height: 1;
	display: inline-block;
}
@keyframes dpx-rocket-fly {
	0% { transform: translateY(0) rotate(0deg); }
	20% { transform: translateY(-6px) rotate(-10deg); }
	55% { transform: translateY(-18px) rotate(6deg); }
	100% { transform: translateY(-2px) rotate(0deg); }
}
.dpx-scroll-top.dpx-launching .dpx-rocket-icon {
	animation-name: dpx-rocket-fly;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@media (max-width: 767px) {
	.dpx-scroll-top {
		right: 16px;
		bottom: 16px;
		width: 46px;
		height: 46px;
	}
	.dpx-rocket-icon {
		font-size: 19px;
	}
}