/* ===========================================================
Dominando — CSS compartilhado entre todas as paginas do site.
Padroniza tokens, fundo, glows, animacoes e brand header.
Inclua ANTES dos CSS especificos de cada pagina:
(opcional, paginas de venda)
E adicione no inicio do :
=========================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg-deep:#071a36;
--bg-card:#0b2748;
--blue:#4a90d9;
--blue-bright:#5ba3ec;
--gold:#C9A84C;
--gold-dark:#A67C2E;
--green:#22c55e;
--danger:#ef4444;
--t90:rgba(255,255,255,0.9);
--t70:rgba(255,255,255,0.7);
--t50:rgba(255,255,255,0.5);
--t30:rgba(255,255,255,0.3);
}
html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;
background:var(--bg-deep);
color:#fff;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
min-height:100vh;
display:flex;
flex-direction:column;
}
/* Grid sutil de fundo (linhas) */
body::before{
content:'';position:fixed;inset:0;
background-image:
linear-gradient(rgba(74,144,217,0.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(74,144,217,0.025) 1px,transparent 1px);
background-size:60px 60px;
pointer-events:none;
z-index:0;
}
/* Glows ambient — adicionar 3 divs com classes glow-1/2/3 no body */
.glow{
position:fixed;
border-radius:50%;
filter:blur(140px);
pointer-events:none;
z-index:0;
}
.glow-1{width:600px;height:600px;top:-200px;left:-100px;background:rgba(74,144,217,0.07)}
.glow-2{width:500px;height:500px;top:40%;right:-180px;background:rgba(201,168,76,0.04)}
.glow-3{width:600px;height:600px;bottom:-200px;left:30%;background:rgba(74,144,217,0.05)}
/* Garante que conteudo fica acima dos glows */
main, .legal-container, .vendas-hero, .vendas-section, .ex-container, .obrigado{
position:relative;
z-index:1;
}
/* Brand header padrao do site — logo DOMINANDO + tagline */
.dr-brand-header{
position:relative;z-index:2;
padding:24px 24px 16px;
text-align:center;
border-bottom:1px solid rgba(74,144,217,0.08);
}
.dr-brand-header a{text-decoration:none;display:inline-block;}
.dr-brand-logo{
font-family:'Bebas Neue',sans-serif;
font-size:26px;
letter-spacing:5px;
background:linear-gradient(135deg,var(--gold),var(--gold-dark));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
line-height:1;
}
.dr-brand-sub{
font-family:'Oswald',sans-serif;
font-size:10px;
font-weight:600;
letter-spacing:3px;
text-transform:uppercase;
color:var(--t30);
margin-top:4px;
}
/* Animacoes globais reusaveis */
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{
0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0.4)}
50%{box-shadow:0 0 0 8px rgba(201,168,76,0)}
}
/* Botao WhatsApp flutuante (opcional — adicione no body) */
.wpp{
position:fixed;bottom:28px;right:28px;z-index:100;
width:58px;height:58px;border-radius:50%;
background:#25d366;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 20px rgba(37,211,102,0.35);
text-decoration:none;
transition:transform .2s;
}
.wpp:hover{transform:scale(1.1)}
.wpp svg{width:26px;height:26px;fill:#fff}
/* Mobile fixes globais */
@media(max-width:640px){
.dr-brand-header{padding:20px 16px 12px;}
.dr-brand-logo{font-size:22px;letter-spacing:4px;}
.glow-1{width:400px;height:400px;}
.glow-2{width:350px;height:350px;}
.glow-3{width:400px;height:400px;}
}