/* Reset básico */
*, *::before, *::after { margin : 0; padding : 0; box-sizing : border-box; }

:root {
	--bg-dark       : #192A23;
	--bg-light      : #F4F4F4;
	--card-dark     : #1F2A23;
	--card-light    : #FFF;
	--primary       : rgb(255, 173, 0);
	--primary-light : #FF9700;
	--text-dark     : #ECECEC;
	--text-light    : #1A1A1A;
	--shadow        : 0 4px 24px rgba(0, 0, 0, .12);

	/* ui scale */
	--radius        : 12px;
	--radius-lg     : 30px;
	--input-h       : 44px;
	--btn-h         : 44px;
	--gap           : 12px;
	--footer-h      : 44px;
}

html, body { height : 100%; }
body {
	background     : radial-gradient(circle at center, #040, #001A00);
	color          : var(--text-dark);
	font           : 400 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	transition     : background .3s, color .3s;
	padding-bottom : var(--footer-h); /* evita que o footer cubra o conteúdo */
}
body.claro { background : var(--bg-light); color : var(--text-light); }

/* Card principal */
.molde {
	background    : radial-gradient(circle at center, #040, #001A00);
	color         : var(--text-dark);
	transition    : background .3s, color .3s, border-color .3s;
	width         : min(92vw, 420px);
	border        : 2px solid var(--primary);
	border-radius : var(--radius-lg);
	box-shadow    : var(--shadow);
}
body.claro .molde { background : var(--card-light); color : var(--text-light); }

/* Toggle tema */
#theme-toggle-container {
	position : fixed; top : 1rem; right : 1rem; z-index : 30; user-select : none;
}
.toggle--wrapper {
	width      : 60px; height : 28px; border-radius : 999px; display : flex; align-items : center;
	background : #2C4B98; transition : background .35s; cursor : pointer; position : relative;
	box-shadow : 0 2px 8px rgba(0, 0, 0, .09);
}
body.claro .toggle--wrapper { background : #F0B65C; }
.toggle--knob {
	position   : absolute; top : 3px; left : 3px; width : 22px; height : 22px; border-radius : 50%;
	background : #FFF; transition : left .40s cubic-bezier(.9, .15, .5, 1.18), background .25s;
	box-shadow : 0 1px 5px rgba(0, 0, 0, .10); z-index : 2;
}
body.claro .toggle--knob { left : 35px; background : #FFF6C1; }
/* Sol/Lua decorativos */
.toggle--knob .sol {
	position   : absolute; left : 5px; top : 5px; width : 12px; height : 12px; border-radius : 50%;
	background : #FFC107; box-shadow : 0 0 0 4px #FFC107; opacity : 0; transition : opacity .2s;
}
body.claro .toggle--knob .sol { opacity : 1; }
.toggle--knob .moon {
	position   : absolute; inset : 0; width : 22px; height : 22px; border-radius : 50%;
	background : #FFF; opacity : 1; transition : opacity .24s; z-index : 1;
}
.toggle--knob .moon::after {
	content    : ""; position : absolute; left : 10px; top : 0; width : 15px; height : 22px; border-radius : 50%;
	background : #2C4B98;
}
body.claro .toggle--knob .moon { opacity : 0; }

/* Avatar */
.molde-avatar {
	background    : linear-gradient(180deg, #F2F2F2 0%, #BDBDBD 100%);
	color         : var(--text-dark);
	width         : 100px; height : 100px; border : 1px solid var(--primary-light);
	border-radius : 50%; box-shadow : 0 0 10px rgba(0, 0, 0, .15);
	cursor        : pointer; transition : box-shadow .2s, transform .2s;
}
.molde-avatar:hover, .molde-avatar:active {
	box-shadow : 0 0 0 4px var(--primary-light); transform : scale(1.04);
}
.molde-avatar svg { pointer-events : none; }
.avatar-img {
	width : 100%; height : 100%; object-fit : contain; object-position : center; border-radius : 50%;
}

/* Input nome */
.input-nome {
	appearance    : none;
	height        : var(--input-h);
	background    : #2A3B31; color : #ECECEC;
	border        : 1px solid var(--primary-light);
	border-radius : var(--radius);
	padding       : .75rem 1rem; font-size : 1rem; outline : none;
	transition    : border-color .2s, box-shadow .2s, background .2s, color .2s;
	box-shadow    : inset 0 1px 3px rgba(0, 0, 0, .2);
}
.input-nome::placeholder { color : #CCC; opacity : .85; }
.input-nome:focus {
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(255, 152, 0, .2);
	background   : #33463A;
}
body.claro .input-nome {
	background : #FFF; color : #1A1A1A; border : 1px solid var(--primary-light);
	box-shadow : inset 0 1px 2px rgba(0, 0, 0, .05);
}
body.claro .input-nome::placeholder { color : #888; }
body.claro .input-nome:focus {
	background : #FFF9ED; border-color : var(--primary);
	box-shadow : 0 0 0 3px rgba(240, 160, 0, .25);
}

/* Botões */
.btn-jogar-agora {
	min-height : var(--btn-h);
	padding    : 0 .9rem;
	border     : none; border-radius : 10px;
	background : linear-gradient(105deg, #FFB347 10%, #FF7E00 90%);
	color      : #FFF; font-size : 1rem; font-weight : 700; text-transform : uppercase;
	box-shadow : 0 2px 8px rgba(255, 126, 0, .10);
	cursor     : pointer; outline : none; position : relative; overflow : hidden;
	transition : transform .14s, box-shadow .18s, background .18s;
}
.btn-jogar-agora::after {
	content    : ""; position : absolute; left : -40%; top : 0; width : 60%; height : 100%;
	background : linear-gradient(120deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%);
	filter     : blur(2px); pointer-events : none; transition : left .4s cubic-bezier(.7, .3, .2, .9);
}
.btn-jogar-agora:hover::after, .btn-jogar-agora:focus::after { left : 110%; }
.btn-jogar-agora:hover, .btn-jogar-agora:focus {
	background : linear-gradient(105deg, #FFD89B 0%, #FF7E00 100%);
	box-shadow : 0 5px 18px rgba(255, 126, 0, .16);
}

/* Divisor */
.divider { width : 100%; height : 1px; background : #CFBE99; margin : 1.2rem 0; opacity : .36; }

/* Botão Google — altura reduzida */
.btn-google {
	display    : flex; align-items : center; justify-content : center; gap : .55rem;
	width      : 100%; min-height : var(--btn-h);
	background : #FFF; color : #222;
	border     : 1px solid #E4E6EB; border-radius : 10px;
	box-shadow : 0 2px 8px rgba(66, 133, 244, .10);
	font-size  : 1rem; font-weight : 700;
	padding    : 0 .9rem; /* ↓ menos altura vertical */
	cursor     : pointer; outline : none;
	transition : box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.btn-google:hover, .btn-google:focus {
	background : #F7F7F7; color : #111; border-color : #DADCE0;
	box-shadow : 0 4px 14px rgba(66, 133, 244, .16);
}
.btn-google:active { background : #EFEFEF; color : #222; }
.google-icon svg { width : 18px; height : 18px; display : block; }
.google-text { font : inherit; letter-spacing : .02em; }

/* Footer fixo */
.footer {
	position   : fixed; left : 0; bottom : 0; width : 100vw;
	background : rgba(27, 26, 24, .85); color : #BBB; font-size : .93rem;
	padding    : 10px 0; text-align : center; z-index : 10; backdrop-filter : blur(2px);
	box-shadow : 0 -2px 14px rgba(0, 0, 0, .11); height : var(--footer-h);
	display    : flex; align-items : center; justify-content : center; gap : .5rem;
}
.footer a {
	color      : var(--primary); text-decoration : none; font-weight : 600; position : relative;
	transition : color .25s ease;
}
.footer a::after {
	content          : ""; position : absolute; left : 0; bottom : -3px; width : 0%; height : 2px;
	background-color : var(--primary-light); transition : width .3s ease;
}
.footer a:hover { color : var(--primary-light); }
.footer a:hover::after { width : 100%; }
body.claro .footer { background : rgba(0, 0, 0, 0.9); color : #A07700; }
body.claro .footer a::after { background-color : var(--primary); }
body.claro .footer a:hover { color : var(--primary); }

/* Modal temas */
#avatarFrame { display : block; border : none; }
body:not(.claro) .modal-content { background : #2C3E50; color : var(--text-dark); }
body.claro .modal-content { background : #FFF; color : var(--text-light); }
body:not(.claro) .modal-header, body:not(.claro) .modal-footer { border-color : rgba(255, 255, 255, .15); }
body:not(.claro) .modal .close { color : #FFF; opacity : 1; text-shadow : none; }
body.claro .modal .close { color : #212529; opacity : 1; text-shadow : none; }
body:not(.claro) .modal .btn-secondary {
	background : #3B4D5D; border-color : #3B4D5D; color : #FFF;
}
body:not(.claro) .modal .btn-secondary:hover {
	background : #465D70; border-color : #465D70;
}
#btnConfirmAvatar, #btnSalvar { background : #FFA92C; color : #FFF !important; }
#btnConfirmAvatar:hover { background : #FB8C00 !important; outline : none !important; box-shadow : none !important; }
#btnSalvar:hover { background : #FB8C00 !important; outline : none !important; box-shadow : none !important; }

/* Mobile: modal full screen */
@media (max-width : 768px) {
	#avatarModal .modal-dialog { margin : 0; max-width : 100vw; height : 100vh; }
	#avatarModal .modal-content { height : 100vh; border-radius : 0; }
	#avatarModal .modal-body { flex : 1 1 auto; padding : 0; overflow-y : auto; }
	/* ajuste de densidade */
	.molde { width : min(94vw, 440px); }
}

/* Utilidades Bootstrap override leves */
.form-control:focus { box-shadow : none; }

/* Layout dos dois botões */
.btn-row {
	display               : grid;
	grid-template-columns :1fr 1fr;
	gap                   : var(--gap);
	width                 : 100%;
}

.btn-row .to-btn {
	min-height  : var(--btn-h);
	display     : inline-flex; align-items : center; justify-content : center; gap : .55rem;
	padding     : 0 .9rem;
	font-size   : .95rem; line-height : 1; font-weight : 800; text-transform : uppercase;
	white-space : nowrap; min-width : 0;
	border      : none; border-radius : 14px;
	position    : relative; overflow : hidden; color : #FFF;
	transition  : transform .14s, box-shadow .2s, filter .2s;
	box-shadow  : 0 6px 18px rgba(0, 0, 0, .12);
}

/* brilho passando */
.btn-row .to-btn::after {
	content    : ""; position : absolute; left : -40%; top : 0; width : 60%; height : 100%;
	background : linear-gradient(120deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 60%);
	transform  : skewX(-20deg); opacity : 0; filter : blur(2px);
	transition : left .45s cubic-bezier(.7, .3, .2, .9), opacity .3s;
}
.btn-row .to-btn:hover::after { left : 110%; opacity : .9; }

.btn-row .to-btn:active { transform : translateY(1px); }

/* Ícones */
.btn-ico { width : 1.1em; height : 1.1em; display : inline-flex; align-items : center; justify-content : center; flex : 0 0 auto; }
.btn-ico svg { width : 1em; height : 1em; display : block; }

/* Temas dos botões */
.to-btn--account {
	background : linear-gradient(135deg, #4ADE80 0%, #059669 100%);
	border     : 1px solid rgba(5, 150, 105, .36);
	box-shadow : 0 6px 18px rgba(5, 150, 105, .28);
}
.to-btn--account:hover { filter : saturate(1.07) brightness(1.03); box-shadow : 0 10px 26px rgba(5, 150, 105, .34); }
.to-btn--account:focus-visible { outline : 0; box-shadow : 0 0 0 3px rgba(16, 185, 129, .35), 0 8px 22px rgba(5, 150, 105, .30); }

.to-btn--logout {
	background : linear-gradient(135deg, #F87171 0%, #DC2626 100%);
	border     : 1px solid rgba(220, 38, 38, .40);
	box-shadow : 0 6px 18px rgba(220, 38, 38, .26);
}
.to-btn--logout:hover { filter : saturate(1.08) brightness(1.02); box-shadow : 0 10px 26px rgba(220, 38, 38, .34); }
.to-btn--logout:focus-visible { outline : 0; box-shadow : 0 0 0 3px rgba(244, 63, 94, .35), 0 8px 22px rgba(220, 38, 38, .30); }

/* Mobile empilha */
@media (max-width : 280px) {
	.btn-row { grid-template-columns :1fr; }
}

body:not(.claro) .modal-content .card {
	background : #253544;
	color      : var(--text-dark);
	border     : 1px solid rgba(255, 255, 255, .08);
}

/* Gutters consistentes só dentro da accountModal */
#accountModal .row {
	margin-left  : -8px; /* gutter = 16px */
	margin-right : -8px;
}
#accountModal .row > [class*="col-"] {
	padding-left  : 8px;
	padding-right : 8px;
}

/* Alturas iguais e visual alinhado */
#accountModal .card { height : 100%; border-radius : 12px; }
#accountModal .modal-body { overflow-x : hidden; }

/* ==== Ajustes específicos para o modo escuro do input nome ==== */
body:not(.claro) .input-nome {
	background   : #212E27; /* mais escuro e limpo */
	color        : #F2F2F2;
	border-color : #375A49; /* borda discreta em repouso */
	box-shadow   : none; /* remove sombra interna "suja" */
	caret-color  : var(--primary); /* cursor visível */
}

body:not(.claro) .input-nome::placeholder {
	color   : #9FB0A7; /* placeholder claro, mas não estoura */
	opacity : .95;
}

body:not(.claro) .input-nome:focus {
	background   : #1B2722; /* foco um pouco mais escuro */
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(240, 160, 0, .20); /* halo consistente */
}

/* Respeita UI dark nativa (seleção, popups, etc.) */
.input-nome { color-scheme : dark; }

/* Corrige o amarelo do autofill no Chrome/Safari */
.input-nome:-webkit-autofill,
.input-nome:-webkit-autofill:focus {
	-webkit-text-fill-color : #F2F2F2;
	-webkit-box-shadow      : 0 0 0 1000px #1B2722 inset; /* pinta o fundo */
	transition              : background-color 5000s ease-in-out 0s; /* mata o flash */
}

/* Se também usa .form-control do Bootstrap, garanta a especificidade */
body:not(.claro) .form-control.input-nome:focus {
	background   : #1B2722;
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(240, 160, 0, .20);
}

/* ==== Inputs dark mode: .input-nome + #accountNome + .account-nome ==== */
body:not(.claro) :is(.input-nome, #accountNome, .account-nome) {
	background   : #212E27;
	color        : #F2F2F2;
	border-color : #375A49;
	box-shadow   : none;
	caret-color  : var(--primary);
	color-scheme : dark; /* integra com UI nativa */
}

body:not(.claro) :is(.input-nome, #accountNome, .account-nome)::placeholder {
	color : #9FB0A7; opacity : .95;
}

body:not(.claro) :is(.input-nome, #accountNome, .account-nome):focus {
	background   : #1B2722;
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(240, 160, 0, .20);
}

/* Corrige amarelo do autofill (Chrome/Safari) */
:is(.input-nome, #accountNome, .account-nome):-webkit-autofill,
:is(.input-nome, #accountNome, .account-nome):-webkit-autofill:focus {
	-webkit-text-fill-color : #F2F2F2;
	-webkit-box-shadow      : 0 0 0 1000px #1B2722 inset;
	transition              : background-color 5000s ease-in-out 0s;
}

/* Se for .form-control do Bootstrap, garante especificidade no foco */
body:not(.claro) .form-control:is(.input-nome, #accountNome, .account-nome):focus {
	background   : #1B2722;
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(240, 160, 0, .20);
}

/* Tema do modal Sobre (usa suas CSS vars) */
.sobre-modal {
	background    : var(--card-dark, #1F2A23);
	color         : var(--text-dark, #ECECEC);
	border-radius : var(--radius, 12px);
	box-shadow    : var(--shadow, 0 4px 24px rgba(0, 0, 0, .12));
}
body.claro .sobre-modal {
	background : var(--card-light, #FFF);
	color      : var(--text-light, #1A1A1A);
}
.sobre-modal .modal-header,
.sobre-modal .modal-footer {
	border : 0;
}
.sobre-modal .btn-primary {
	background   : var(--primary, #F0A000);
	border-color : var(--primary, #F0A000);
	color        : #111;
}
.sobre-modal .btn-primary:hover {
	filter : brightness(.95);
}

/* Lista do modal Sobre — corrige bullets e recuo */
.sobre-modal .modal-body ul {
	margin              : .5rem 0 0;
	padding-left        : 1.25rem; /* recuo */
	list-style-position : outside;
}
.sobre-modal .modal-body ul li {
	list-style-type : disc; /* bolinha padrão */
	margin          : .25rem 0;
}

/* Se em algum lugar seu reset remove bullets (list-style:none),
   isso aqui garante que o Sobre continue mostrando */
.sobre-modal .modal-body ul,
.sobre-modal .modal-body li {
	list-style : revert; /* fallback moderno */
}

/* Justificar apenas os parágrafos do modal "Sobre" */
.sobre-modal .modal-body p {
	text-align      : justify;
	text-justify    : inter-word; /* suporte parcial, não faz mal ter */
	-webkit-hyphens : auto;
	hyphens         : auto; /* usa hifenização do pt-BR */
}

/* Se quiser justificar também os itens de lista, ative: */
.sobre-modal .modal-body li {
	text-align      : justify;
	-webkit-hyphens : auto;
	hyphens         : auto;
}

/* Não justificar a linha de crédito em small */
.sobre-modal .modal-body p.small {
	text-align : left;
}

/* (Opcional) melhorar legibilidade: limitar largura e altura de linha */
.sobre-modal .modal-dialog { max-width : 560px; }
/* ~ideal para blocos justificados */
.sobre-modal .modal-body { line-height : 1.55; }

/* =========================================
   ESTILOS DA LANDING PAGE (NOVO)
   ========================================= */

/* Fundo geral mais profissional */
body.landing-page {
	background-color : #F4F6F8; /* Fundo claro para a parte de baixo */
	overflow-x       : hidden;
}

/* NAVBAR */
.lp-navbar {
	position : absolute;
	top      : 0; left : 0; width : 100%;
	padding  : 20px 0;
	z-index  : 10;
}
.lp-brand {
	font-size      : 1.5rem;
	font-weight    : 800;
	color          : #FFF;
	letter-spacing : 1px;
}
.lp-brand .highlight { color : #FF9800; }

.lp-menu a {
	color           : rgba(255, 255, 255, 0.8);
	margin          : 0 15px;
	text-decoration : none;
	font-weight     : 500;
	font-size       : 0.95rem;
	transition      : color 0.2s;
}
.lp-menu a:hover, .lp-menu a.active { color : #FF9800; }
.badge-warning { background-color : #FF9800; color : #111; font-size : 0.6rem; vertical-align : top; }

/* HERO SECTION */
.lp-hero {
	position       : relative;
	min-height     : 100vh; /* Ocupa a tela toda */
	background     : radial-gradient(circle at 30% 50%, #2E7D32 0%, #1B5E20 100%);
	padding-top    : 80px; /* Espaço pro navbar */
	padding-bottom : 100px;
	display        : flex;
	align-items    : center;
	overflow       : hidden;
}

/* Textos do Hero */
.tagline {
	display        : block;
	color          : #FF9800;
	font-weight    : 700;
	letter-spacing : 2px;
	font-size      : 0.9rem;
	margin-bottom  : 10px;
	text-transform : uppercase;
}
.main-title {
	font-size     : 3.5rem;
	font-weight   : 900;
	color         : #FFF;
	line-height   : 1.1;
	margin-bottom : 20px;
}
.text-gradient {
	background              : linear-gradient(to right, #FFF, #81C784);
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
}
.lead-text {
	color         : rgba(255, 255, 255, 0.8);
	font-size     : 1.1rem;
	margin-bottom : 30px;
	max-width     : 500px;
	margin-left   : auto; margin-right : auto; /* Center mobile */
}

@media (min-width : 992px) {
	.lead-text { margin-left : 0; text-align : left; }
	.main-title { font-size : 4.5rem; }
}

/* Stats no Hero */
.stat-item { text-align : center; }
.stat-num { display : block; font-size : 1.5rem; font-weight : 800; color : #FFF; }
.stat-label { font-size : 0.8rem; color : rgba(255, 255, 255, 0.6); text-transform : uppercase; }
.stat-divider { width : 1px; height : 40px; background : rgba(255, 255, 255, 0.2); margin : 0 20px; }

/* Onda SVG embaixo */
.custom-shape-divider-bottom-16789 {
	position : absolute; bottom : 0; left : 0; width : 100%; overflow : hidden; line-height : 0;
}
.custom-shape-divider-bottom-16789 svg {
	position : relative; display : block; width : calc(138% + 1.3px); height : 86px;
}
.custom-shape-divider-bottom-16789 .shape-fill { fill : #F4F6F8; }

/* FEATURE CARDS */
.feature-card {
	background    : #FFF;
	border-radius : 20px;
	box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.05);
	transition    : transform 0.3s;
}
.feature-card:hover { transform : translateY(-10px); }
.icon-box { font-size : 2.5rem; }

/* ANIMAÇÃO DAS CARTAS FLUTUANTES (Background) */
.floating-bg {
	position       : absolute; top : 0; left : 0; width : 100%; height : 100%;
	pointer-events : none; z-index : 1;
}
.card-float {
	position  : absolute;
	font-size : 4rem;
	color     : rgba(255, 255, 255, 0.05);
	animation : floatCard 10s infinite ease-in-out;
}
.c1 { top : 10%; left : 10%; animation-delay : 0s; font-size : 6rem; transform : rotate(-15deg); }
.c2 { top : 20%; right : 15%; animation-delay : 2s; font-size : 5rem; transform : rotate(15deg); }
.c3 { bottom : 30%; left : 20%; animation-delay : 4s; font-size : 4rem; transform : rotate(-5deg); }
.c4 { bottom : 10%; right : 10%; animation-delay : 6s; font-size : 7rem; transform : rotate(10deg); }

@keyframes floatCard {
	0% { transform : translateY(0) rotate(0deg); }
	50% { transform : translateY(-20px) rotate(5deg); }
	100% { transform : translateY(0) rotate(0deg); }
}

/* Z-INDEX CONTROL */
.z-index-2 { position : relative; z-index : 2; }

/* AJUSTE RESPONSIVO DO MOLDE PARA CABER NO HERO */
@media (max-width : 991px) {
	.lp-hero { padding-top : 120px; height : auto; min-height : auto; }
	.molde { margin-bottom : 50px; }
}

/* =========================================
   ESTILOS DA LANDING PAGE (GLOBAL THEME)
   ========================================= */

/* 1. Configuração Base (Modo Escuro / Default) */
body.landing-page {
	background-color : #0D120F; /* Fundo bem escuro, quase preto esverdeado */
	color            : #E0E0E0;
	overflow-x       : hidden;
	transition       : background-color 0.3s, color 0.3s;
}

/* 2. Configuração Modo Claro */
body.landing-page.claro {
	background-color : #F4F6F8; /* Fundo cinza claro */
	color            : #212529;
}

/* NAVBAR */
.lp-navbar {
	position   : absolute;
	top        : 0; left : 0; width : 100%;
	padding    : 20px 0;
	z-index    : 10;
	transition : background 0.3s;
}
.lp-brand {
	font-size      : 1.5rem;
	font-weight    : 800;
	color          : #FFF; /* Logo sempre branca no hero */
	letter-spacing : 1px;
}
.lp-brand .highlight { color : #FF9800; }

.lp-menu a {
	color           : rgba(255, 255, 255, 0.8);
	margin          : 0 15px;
	text-decoration : none;
	font-weight     : 500;
	font-size       : 0.95rem;
	transition      : color 0.2s;
}
.lp-menu a:hover, .lp-menu a.active { color : #FF9800; }
.badge-warning { background-color : #FF9800; color : #111; font-size : 0.6rem; vertical-align : top; }

/* HERO SECTION - Adaptação de Tema */
.lp-hero {
	position       : relative;
	min-height     : 100vh;
	padding-top    : 80px;
	padding-bottom : 100px;
	display        : flex;
	align-items    : center;
	overflow       : hidden;
	transition     : background 0.5s;

	/* Modo Escuro (Mais profundo e sério) */
	background     : radial-gradient(circle at 30% 50%, #1A4A1D 0%, #0D2010 100%);
}

/* Modo Claro (Verde mais vivo, clássico do Truco) */
body.landing-page.claro .lp-hero {
	background : radial-gradient(circle at 30% 50%, #2E7D32 0%, #1B5E20 100%);
}

/* Textos do Hero */
.tagline {
	display        : block;
	color          : #FF9800;
	font-weight    : 700;
	letter-spacing : 2px;
	font-size      : 0.9rem;
	margin-bottom  : 10px;
	text-transform : uppercase;
}
.main-title {
	font-size     : 3.5rem;
	font-weight   : 900;
	color         : #FFF; /* Título do Hero sempre branco por causa do fundo verde */
	line-height   : 1.1;
	margin-bottom : 20px;
}
.text-gradient {
	background              : linear-gradient(to right, #FFF, #81C784);
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
}
.lead-text {
	color         : rgba(255, 255, 255, 0.85);
	font-size     : 1.1rem;
	margin-bottom : 30px;
	max-width     : 500px;
	margin-left   : auto; margin-right : auto;
}

@media (min-width : 992px) {
	.lead-text { margin-left : 0; text-align : left; }
	.main-title { font-size : 4.5rem; }
}

/* Stats no Hero */
.stat-item { text-align : center; }
.stat-num { display : block; font-size : 1.5rem; font-weight : 800; color : #FFF; }
.stat-label { font-size : 0.8rem; color : rgba(255, 255, 255, 0.6); text-transform : uppercase; }
.stat-divider { width : 1px; height : 40px; background : rgba(255, 255, 255, 0.2); margin : 0 20px; }

/* Onda SVG embaixo */
.custom-shape-divider-bottom-16789 {
	position : absolute; bottom : 0; left : 0; width : 100%; overflow : hidden; line-height : 0;
}
.custom-shape-divider-bottom-16789 svg {
	position : relative; display : block; width : calc(138% + 1.3px); height : 86px;
}

/* A onda precisa combinar com o fundo da próxima seção (body) */
.custom-shape-divider-bottom-16789 .shape-fill {
	fill       : #0D120F; /* Cor do fundo escuro */
	transition : fill 0.3s;
}
body.landing-page.claro .custom-shape-divider-bottom-16789 .shape-fill {
	fill : #F4F6F8; /* Cor do fundo claro */
}

/* FEATURES SECTION */
.lp-features h2 {
	color      : #FFF; /* Título padrão escuro */
	transition : color 0.3s;
}
body.landing-page.claro .lp-features h2 {
	color : #212529 !important; /* Força escuro no modo claro */
}

/* Cards das Features */
.feature-card {
	background    : #1F2A23; /* Card Escuro */
	border        : 1px solid rgba(255, 255, 255, 0.05);
	border-radius : 20px;
	box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.2);
	transition    : transform 0.3s, background 0.3s;
	color         : #DDD;
}
.feature-card h4 { color : #FFF; }
.feature-card p { color : #AAA; }

/* Cards no Modo Claro */
body.landing-page.claro .feature-card {
	background : #FFF;
	border     : none;
	box-shadow : 0 10px 30px rgba(0, 0, 0, 0.05);
	color      : #333;
}
body.landing-page.claro .feature-card h4 { color : #111; }
body.landing-page.claro .feature-card p { color : #6C757D; }
/* text-muted equivalente */

.feature-card:hover { transform : translateY(-10px); }
.icon-box { font-size : 2.5rem; }

/* ANIMAÇÃO DAS CARTAS FLUTUANTES */
.floating-bg {
	position       : absolute; top : 0; left : 0; width : 100%; height : 100%;
	pointer-events : none; z-index : 1;
}
.card-float {
	position  : absolute;
	font-size : 4rem;
	color     : rgba(255, 255, 255, 0.05);
	animation : floatCard 10s infinite ease-in-out;
}
.c1 { top : 10%; left : 10%; animation-delay : 0s; font-size : 6rem; transform : rotate(-15deg); }
.c2 { top : 20%; right : 15%; animation-delay : 2s; font-size : 5rem; transform : rotate(15deg); }
.c3 { bottom : 30%; left : 20%; animation-delay : 4s; font-size : 4rem; transform : rotate(-5deg); }
.c4 { bottom : 10%; right : 10%; animation-delay : 6s; font-size : 7rem; transform : rotate(10deg); }

@keyframes floatCard {
	0% { transform : translateY(0) rotate(0deg); }
	50% { transform : translateY(-20px) rotate(5deg); }
	100% { transform : translateY(0) rotate(0deg); }
}

.z-index-2 { position : relative; z-index : 2; }

@media (max-width : 991px) {
	.lp-hero { padding-top : 120px; height : auto; min-height : auto; }
	.molde { margin-bottom : 50px; }
}

@media (max-width : 991px) {
	.lp-hero {
		/* Garante que o Hero ocupe 100% da altura real da tela do celular */
		min-height      : 100dvh;
		height          : auto;

		/* Centraliza verticalmente todo o conteúdo (Texto + Molde) */
		display         : flex;
		align-items     : center;
		justify-content : center;

		/* Ajustes de espaçamento para não ficar colado nas bordas */
		padding-top     : 80px; /* Compensa a navbar fixa se houver */
		padding-bottom  : 40px;
	}

	/* Força a row do Bootstrap a se comportar como coluna flexível centralizada */
	.lp-hero .row {
		display         : flex;
		flex-direction  : column;
		justify-content : center;
		align-items     : center;
		width           : 100%;
		margin          : 0;
	}

	/* Ajuste do Texto no Mobile para não empurrar o molde para fora da tela */
	.lp-hero .col-lg-6:first-child {
		margin-bottom : 2rem; /* Espaço entre texto e molde */
	}

	.main-title {
		font-size     : 2.2rem; /* Diminui um pouco o título para sobrar espaço */
		margin-bottom : 10px;
	}

	.lead-text {
		font-size     : 0.95rem;
		margin-bottom : 15px;
		/* Opcional: limitar a largura do texto para ficar bonito */
		max-width     : 90%;
		margin-left   : auto;
		margin-right  : auto;
	}

	/* O MOLDE - A Estrela do Show */
	.molde {
		margin    : 0 auto; /* Centralização horizontal absoluta */
		width     : 95%; /* Ocupa quase toda a largura da tela */
		max-width : 420px; /* Limite para não ficar gigante em tablets */

		/* Garante que ele apareça "cheio" na tela */
		padding   : 1.5rem !important;
	}

	/* Removemos margens extras que possam estar atrapalhando */
	.hero-stats {
		display : none; /* Sugestão: Esconder estatísticas no mobile para focar no Login/Play */
	}
}

/* =========================================
   MOBILE: AJUSTE FINAL (LIMPEZA TOTAL)
   ========================================= */
@media (max-width : 991px) {

	/* 1. Configura a tela para ocupar exatos 100% da altura visível */
	.lp-hero {
		min-height      : 100dvh !important;
		height          : 100dvh !important;
		padding-top     : 70px !important; /* Espaço apenas para o navbar */
		padding-bottom  : 0 !important;
		overflow        : hidden !important; /* Impede scroll indesejado */

		display         : flex !important;
		flex-direction  : column !important;
		justify-content : flex-start !important; /* Começa do topo */
		align-items     : center !important;
	}

	/* 2. REMOVE ELEMENTOS QUE OCUPAM ESPAÇO INÚTIL NO MOBILE */
	.hero-stats {
		display : none !important; /* Tchau estatísticas */
	}

	.tagline {
		display : none !important; /* Tchau texto pequeno amarelo */
	}

	.lead-text {
		display : none !important; /* Tchau texto descritivo */
	}

	/* 3. Ajusta o container interno para centralizar o que sobrou */
	.lp-hero .container {
		height          : 100%;
		display         : flex;
		flex-direction  : column;
		justify-content : center; /* Centraliza verticalmente o Molde + Título */
		align-items     : center;
	}

	.lp-hero .row {
		width          : 100%;
		margin         : 0;
		display        : flex;
		flex-direction : column;
		align-items    : center;
	}

	/* 4. Título bem compacto para sobrar espaço pro card */
	.main-title {
		font-size     : 1.6rem !important; /* Fonte menor */
		line-height   : 1.1;
		margin-bottom : 1rem !important;
		text-align    : center;
		margin-top    : -20px; /* Puxa um pouco pra cima */
	}

	/* Remove margens das colunas do Bootstrap */
	.col-lg-6 {
		padding         : 0 !important;
		margin          : 0 !important;
		width           : 100%;
		display         : flex;
		justify-content : center;
	}

	/* 5. O MOLDE (CARD DE LOGIN) */
	.molde {
		width     : 90% !important;
		max-width : 360px !important;
		margin    : 0 auto !important;
		padding   : 1rem !important; /* Reduz padding interno pra ganhar espaço */

		/* Se a tela for muito pequena (iPhone SE), diminui um pouco o card */
		transform : scale(0.95);
	}

	/* Ajusta a imagem dentro do molde */
	.molde img {
		width         : 100px !important; /* Logo menor */
		height        : auto;
		margin-bottom : 0.5rem !important;
	}

	/* Ajusta botão jogar agora para não ficar gigante */
	.btn-jogar-agora {
		margin-top : 1rem !important; /* Menos espaço acima do botão */
	}
}

/* --- Ajustes do Menu Mobile --- */

/* O Container do menu aberto */
.mobile-nav-box {
	background-color : rgba(20, 35, 25, 0.95); /* Fundo escuro translúcido */
	backdrop-filter  : blur(5px);
	border           : 1px solid rgba(255, 255, 255, 0.1);
	box-shadow       : 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Links do menu mobile */
.mobile-nav-box a {
	color           : #ECECEC;
	text-decoration : none;
	font-weight     : 500;
	font-size       : 1.1rem;
	padding-left    : 10px;
	transition      : all 0.2s;
}

.mobile-nav-box a:hover {
	color        : #FF9800;
	padding-left : 15px; /* Efeito de deslizar levemente */
	background   : rgba(255, 255, 255, 0.05);
}

.mobile-nav-box .border-bottom {
	border-color : rgba(255, 255, 255, 0.1) !important;
}

/* --- Adaptação para o Modo Claro (.claro) --- */

/* Cor do ícone hambúrguer no modo claro */
body.landing-page.claro .lp-actions .btn-link {
	color : #1A1A1A !important;
}

/* Fundo e texto do menu mobile no modo claro */
body.landing-page.claro .mobile-nav-box {
	background-color : rgba(255, 255, 255, 0.95);
	border           : 1px solid rgba(0, 0, 0, 0.05);
}

body.landing-page.claro .mobile-nav-box a {
	color : #333;
}

body.landing-page.claro .mobile-nav-box a:hover {
	color      : #FF7E00;
	background : rgba(0, 0, 0, 0.03);
}

body.landing-page.claro .mobile-nav-box .border-bottom {
	border-color : rgba(0, 0, 0, 0.1) !important;
}

/* --- Ajustes do Menu Mobile --- */

/* O Container do menu aberto */
.mobile-nav-box {
	background-color : rgba(20, 35, 25, 0.95); /* Fundo escuro translúcido */
	backdrop-filter  : blur(5px);
	border           : 1px solid rgba(255, 255, 255, 0.1);
	box-shadow       : 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Links do menu mobile */
.mobile-nav-box a {
	color           : #ECECEC;
	text-decoration : none;
	font-weight     : 500;
	font-size       : 1.1rem;
	padding-left    : 10px;
	transition      : all 0.2s;
}

.mobile-nav-box a:hover {
	color        : #FF9800;
	padding-left : 15px; /* Efeito de deslizar levemente */
	background   : rgba(255, 255, 255, 0.05);
}

.mobile-nav-box .border-bottom {
	border-color : rgba(255, 255, 255, 0.1) !important;
}

/* --- Adaptação para o Modo Claro (.claro) --- */

/* Cor do ícone hambúrguer no modo claro */
body.landing-page.claro .lp-actions .btn-link {
	color : #FFF !important;
}

/* Fundo e texto do menu mobile no modo claro */
body.landing-page.claro .mobile-nav-box {
	background-color : rgba(255, 255, 255, 0.95);
	border           : 1px solid rgba(0, 0, 0, 0.05);
}

body.landing-page.claro .mobile-nav-box a {
	color : #333;
}

body.landing-page.claro .mobile-nav-box a:hover {
	color      : #FF7E00;
	background : rgba(0, 0, 0, 0.03);
}

body.landing-page.claro .mobile-nav-box .border-bottom {
	border-color : rgba(0, 0, 0, 0.1) !important;
}

.a-logo {
	all    : unset;
	cursor : pointer; /* Mantém a "mãozinha" para o usuário saber que é clicável */
}
.a-logo:hover {
	all    : unset;
	cursor : pointer; /* Mantém a "mãozinha" para o usuário saber que é clicável */
}

/* Overlay que cobre a tela toda */
.modal-overlay {
	position        : fixed;
	top             : 0; left : 0;
	width           : 100%; height : 100%;
	background      : rgba(0, 0, 0, 0.7);

	/* MUDANÇA 1: Usamos display flex fixo para manter a estrutura */
	display         : flex;
	align-items     : center;
	justify-content : center;
	z-index         : 9999;
	backdrop-filter : blur(4px);

	/* MUDANÇA 2: Estado inicial invisível */
	opacity         : 0;
	visibility      : hidden;

	/* MUDANÇA 3: Transição suave de opacidade e visibilidade */
	transition      : opacity 0.4s ease, visibility 0.4s ease;
}

/* Quando o modal tem a classe .show, ele aparece suavemente */
.modal-overlay.show {
	opacity    : 1;
	visibility : visible;
}

/* A caixa branca do alerta */
.modal-box {
	background    : white;
	padding       : 2rem;
	border-radius : 16px;
	max-width     : 400px;
	width         : 90%;
	text-align    : center;
	box-shadow    : 0 10px 25px rgba(0, 0, 0, 0.2);
	color         : #333;

	/* MUDANÇA 4: Animação de entrada (slide para cima) */
	transform     : translateY(30px) scale(0.95);
	transition    : transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Estado final da caixa quando o modal está aberto */
.modal-overlay.show .modal-box {
	transform : translateY(0) scale(1);
}

.modal-icon {
	font-size     : 3rem;
	font-weight   : bold;
	margin-bottom : 10px;
}

.modal-title {
	display       : block;
	font-size     : 1.5rem;
	font-weight   : 800;
	margin-bottom : 10px;
}

.modal-text {
	font-size : 1rem;
	color     : #666;
}