/**
* MATOGROSSO JÁ — Componentes da nova home (front-page-new.php)
* Estilos pra: top nav aberto, hero Flávio, influencer-strip, sticky dock.
*
* Tudo prefixado com .djnew- pra não conflitar com mockup ou main.css.
*/
/* ==================== ZERO RESET LOCAL ==================== */
.djnew-main *{box-sizing:border-box}
.djnew-main button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
.djnew-main a{color:inherit;text-decoration:none}
/* Esconde header antigo do tema E o nav próprio do mockup (que vinham junto no body extraído) */
.landing-page > .site-header,
body.home .site-header,
body.home .header-cta,
.djnew-main header.head,
.djnew-main .head,
.djnew-main .header-nav,
.djnew-main .header-nav__links,
.djnew-main .head-actions,
.djnew-mockup-body header.head,
.djnew-mockup-body .head,
.djnew-mockup-body .header-nav,
.djnew-mockup-body .header-nav__links,
.djnew-mockup-body .head-actions,
.djnew-mockup-body .drawer{display:none !important}
/* Esconde o modal nativo do mockup (substituído pelos nossos modal-final dj-share-overlay) */
.djnew-mockup-body .modal[data-modal]{display:none !important;pointer-events:none !important;visibility:hidden !important}
/* Remove blobs fixos do mockup antigo: eles criavam uma película azul sobre hero/CTA. */
.djnew-mockup-body .ambient,
.djnew-mockup-body .blob,
.djnew-mockup-body .blob-1,
.djnew-mockup-body .blob-2,
.djnew-mockup-body .blob-3{
display:none !important;
opacity:0 !important;
filter:none !important;
}
.story-video-cover{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
}
/* Marquee de tags (CRIME ORGANIZADO • BOLSONARO • etc) — equilibrar margens */
.djnew-mockup-body .marquee{
margin-top:36px !important;
margin-bottom:36px !important;
}
/* ==================== POR TEMA — Card BOLSONARO ocupar 2 linhas ==================== */
.djnew-mockup-body .cat-tile--featured{
grid-row:span 2 !important;
height:100% !important;
aspect-ratio:auto !important;
min-height:520px;
}
.djnew-mockup-body .cat-tile--featured .cat-tile-bg{
/* Crop melhor: foco no rosto, evita corte estranho */
background-position:center 25% !important;
background-size:cover !important;
height:100% !important;
}
.djnew-mockup-body .cat-tile{
min-height:240px;
}
/* ==================== POR TEMA — Mobile: vira select dropdown ==================== */
.djnew-cat-mobile-select{
display:none; /* desktop: escondido */
width:100%;
max-width:520px;
margin:24px auto 0;
position:relative;
}
.djnew-cat-mobile-select select{
width:100%;
appearance:none;-webkit-appearance:none;
background:rgba(255,255,255,0.06);
border:1.5px solid rgba(255,215,0,0.4);
border-radius:14px;
padding:16px 48px 16px 18px;
color:#fff;
font:600 1rem/1.4 "Satoshi","Inter",sans-serif;
cursor:pointer;
outline:0;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 18px center;
background-size:14px 10px;
transition:border-color 0.18s ease,background-color 0.18s ease;
}
.djnew-cat-mobile-select select:focus,
.djnew-cat-mobile-select select:hover{
border-color:#ffd700;
background-color:rgba(255,215,0,0.08);
}
.djnew-cat-mobile-select select option{background:#0a1140;color:#fff;font-weight:600;padding:8px}
.djnew-cat-mobile-select::before{
content:'POR TEMA';
position:absolute;top:-10px;left:14px;
background:#0a1140;padding:0 8px;
font-size:0.66rem;font-weight:800;letter-spacing:0.16em;
color:#ffd700;
}
/* Mobile breakpoint: esconde grid de cards, mostra select */
@media (max-width:768px){
.djnew-mockup-body .cat-grid,
.djnew-mockup-body .cats-tiles-grid,
.djnew-mockup-body .categorias .cat-grid,
.djnew-mockup-body section[id="categorias"] .cat-grid,
.djnew-mockup-body section .cats-tiles-grid{
display:none !important;
}
.djnew-cat-mobile-select{display:block !important}
}
/* ==================== REMOVER PROMESSAS / GARANTIAS ==================== */
.djnew-mockup-body .wstack-cta-note,
.djnew-mockup-body .ip-meta,
.djnew-mockup-body .ip-lead,
.djnew-mockup-body .ip-cta-row .btn--ghost,
.dj-influencer-overlay .infl-submit-text small,
.djnew-main .form-submit + .form-note,
.djnew-mockup-body .form-note{
display:none !important;
}
/* ==================== INFLUENCER-PRO — refinamentos ==================== */
/* Stat bubbles (+24k, 50M, +200) — mais contraste, legibilidade */
.djnew-mockup-body .ip-stat-bubble{
background:rgba(13,17,41,0.88) !important;
backdrop-filter:blur(14px) saturate(180%) !important;
-webkit-backdrop-filter:blur(14px) saturate(180%) !important;
border:1px solid rgba(255,215,0,0.35) !important;
box-shadow:0 14px 32px rgba(0,0,0,0.45) !important;
}
.djnew-mockup-body .ip-stat-bubble strong{color:#ffd700 !important;font-weight:900}
.djnew-mockup-body .ip-stat-bubble span{color:rgba(255,255,255,0.92) !important;font-weight:600}
/* Substitui foto do phone mock por imagem de campanha */
.djnew-mockup-body .ip-phone{
background-image:url('../images/direitaja/influencers-direitaja.jpeg') !important;
background-size:cover !important;
background-position:center 25% !important;
}
/* CTA principal "Quero ser parceiro" maior + destaque */
.djnew-mockup-body .ip-cta-row .btn--primary{
font-size:1.05rem !important;
padding:0 32px !important;
height:60px !important;
letter-spacing:0.005em;
}
/* ==================== BOTÕES DOURADOS — fonte com contraste forte ====================
Em qualquer botão amarelo/gold, o texto precisa ser azul-escuro (não branco). */
.djnew-mockup-body .shiny-cta,
.djnew-mockup-body .shiny-cta *,
.djnew-mockup-body .btn--primary,
.djnew-mockup-body .btn--primary *,
.djnew-mockup-body .form-submit,
.djnew-mockup-body .form-submit *,
.djnew-main .shiny-cta,
.djnew-main .shiny-cta *,
.djnew-main .btn--primary,
.djnew-main .btn--primary *{
color:#050926 !important;
fill:#050926 !important;
}
.djnew-mockup-body .shiny-cta svg,
.djnew-mockup-body .shiny-cta svg path,
.djnew-mockup-body .btn--primary svg,
.djnew-mockup-body .btn--primary svg path{
stroke:#050926 !important;
color:#050926 !important;
}
/* Background gold consistente nos CTAs */
.djnew-mockup-body .shiny-cta{
background:linear-gradient(135deg,#ffd700 0%,#ffea7a 50%,#ffd700 100%) !important;
box-shadow:0 16px 38px rgba(255,215,0,0.32) !important;
}
.djnew-mockup-body .form-submit{
background:linear-gradient(135deg,#ffd700 0%,#ffea7a 50%,#ffd700 100%) !important;
color:#050926 !important;
font-weight:800 !important;
}
/* Hub das redes — Flickr afastado dos demais ícones */
.djnew-mockup-body .hub-icon--flickr{
top:48% !important;
left:14% !important;
}
/* Kwai no canto fica isolado */
.djnew-mockup-body .hub-icon--kwai{
bottom:18% !important;
left:6% !important;
}
/* Botão "Entrar pra base" do Hub — fonte com contraste forte */
.djnew-mockup-body .hub .btn--primary,
.djnew-mockup-body .hub .btn--primary *,
.djnew-mockup-body .hub-cta,
.djnew-mockup-body .hub-cta *{
color:#050926 !important;
font-weight:800 !important;
}
.djnew-mockup-body .hub .btn--primary svg,
.djnew-mockup-body .hub .btn--primary svg path{
stroke:#050926 !important;
}
/* "Publicar no meu X" e "Copiar texto" — botões claros nos cards de tweet */
.djnew-mockup-body .tweet-card__use-btn,
.djnew-mockup-body .tweet-card__use-btn *,
.djnew-mockup-body .tweet-card__copy-btn,
.djnew-mockup-body .tweet-card__copy-btn *,
.djnew-mockup-body .tweet-card .copy-btn,
.djnew-mockup-body .tweet-card .copy-btn *{
color:#050926 !important;
fill:#050926 !important;
}
.djnew-mockup-body .tweet-card__use-btn svg,
.djnew-mockup-body .tweet-card__use-btn svg path{
stroke:#050926 !important;
}
/* Reforça background branco/claro pra contraste com texto escuro */
.djnew-mockup-body .tweet-card__use-btn{
background:#fff !important;
font-weight:800 !important;
}
/* ==================== NOTIFICAÇÕES ESTILO iOS ====================
Sobrescreve o estilo original do mockup (.float-notif) pra ficar
mais minimalista: sem avatar de iniciais, ícone da plataforma na frente
do tipo notification iOS, com glass + clicável. */
.djnew-mockup-body .float-notif{
background:rgba(13,17,41,0.65) !important;
backdrop-filter:blur(22px) saturate(170%) !important;
-webkit-backdrop-filter:blur(22px) saturate(170%) !important;
border:1px solid rgba(255,255,255,0.10) !important;
border-radius:16px !important;
padding:10px 14px !important;
cursor:pointer;
transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),background 0.2s ease,border-color 0.2s ease !important;
position:relative;
display:flex;align-items:center;gap:11px;
}
.djnew-mockup-body .float-notif:hover{
background:rgba(13,17,41,0.78) !important;
border-color:rgba(255,215,0,0.35) !important;
transform:translateX(4px) !important;
}
/* Esconde o avatar original (com iniciais) */
.djnew-mockup-body .float-notif .float-notif-avatar{display:none !important}
/* Remove o pseudo-element antigo — agora o ícone vem do JS */
.djnew-mockup-body .float-notif::before{display:none !important}
/* Wrapper do ícone — img oficial dos /assets/images/social/ */
.djnew-mockup-body .float-notif-icon{
flex-shrink:0;
width:44px;height:44px;
border-radius:11px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 16px rgba(0,0,0,0.4);
}
.djnew-mockup-body .float-notif-icon img{
width:24px;height:24px;
filter:brightness(0) invert(1); /* SVGs preto → branco */
}
.djnew-mockup-body .float-notif-icon svg{width:24px;height:24px}
/* Cores de fundo do ícone por plataforma (mesmas dos botões de share) */
.djnew-mockup-body .float-notif[data-platform="x"] .float-notif-icon{background:#000}
.djnew-mockup-body .float-notif[data-platform="instagram"] .float-notif-icon{background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.djnew-mockup-body .float-notif[data-platform="facebook"] .float-notif-icon{background:#1877f2}
.djnew-mockup-body .float-notif[data-platform="telegram"] .float-notif-icon{background:linear-gradient(135deg,#2AABEE,#229ED9)}
.djnew-mockup-body .float-notif[data-platform="threads"] .float-notif-icon{background:#000}
.djnew-mockup-body .float-notif[data-platform="kwai"] .float-notif-icon{background:#ff5b21}
.djnew-mockup-body .float-notif[data-platform="whatsapp"] .float-notif-icon{background:linear-gradient(135deg,#25D366,#009739)}
.djnew-mockup-body .float-notif[data-platform="download"] .float-notif-icon{background:#ffd700}
.djnew-mockup-body .float-notif[data-platform="download"] .float-notif-icon img,
.djnew-mockup-body .float-notif[data-platform="download"] .float-notif-icon svg{filter:none}
.djnew-mockup-body .float-notif[data-platform="signup"] .float-notif-icon{background:linear-gradient(135deg,#25D366,#009739)}
.djnew-mockup-body .float-notif[data-platform="signup"] .float-notif-icon img,
.djnew-mockup-body .float-notif[data-platform="signup"] .float-notif-icon svg{filter:none}
/* Ícones por tipo de ação — definidos via data-icon (set pelo JS) */
.djnew-mockup-body .float-notif[data-platform="x"]::before{
background-color:#000;
background-image:url("data:image/svg+xml;utf8,");
}
.djnew-mockup-body .float-notif[data-platform="instagram"]::before{
background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);
background-image:url("data:image/svg+xml;utf8,");
}
.djnew-mockup-body .float-notif[data-platform="facebook"]::before{
background-color:#1877f2;
background-image:url("data:image/svg+xml;utf8,");
}
.djnew-mockup-body .float-notif[data-platform="whatsapp"]::before{
background-color:#25D366;
background-image:url("data:image/svg+xml;utf8,");
}
.djnew-mockup-body .float-notif[data-platform="telegram"]::before{
background:linear-gradient(135deg,#2AABEE,#229ED9);
background-image:url("data:image/svg+xml;utf8,");
}
.djnew-mockup-body .float-notif[data-platform="threads"]::before{
background-color:#000;
background-image:url("data:image/svg+xml;utf8,");
}
.djnew-mockup-body .float-notif[data-platform="download"]::before{
background-color:#ffd700;
background-image:url("data:image/svg+xml;utf8,");
}
.djnew-mockup-body .float-notif[data-platform="signup"]::before{
background:linear-gradient(135deg,#25D366,#009739);
background-image:url("data:image/svg+xml;utf8,");
}
/* Texto: nome + ação + título-link clicável + cidade */
.djnew-mockup-body .float-notif-text{display:flex;flex-direction:column;gap:3px;line-height:1.25;flex:1;min-width:0}
.djnew-mockup-body .float-notif-line{font-size:0.82rem;color:rgba(255,255,255,0.85)}
.djnew-mockup-body .float-notif-line strong{
display:inline !important;
color:#fff !important;font-weight:700;
}
.djnew-mockup-body .float-notif-action-text{color:rgba(255,255,255,0.75);font-weight:500}
/* Título do card: estilizado como link com underline + arrow indica clicável */
.djnew-mockup-body .float-notif-link{
display:inline-flex;align-items:center;gap:5px;
color:#ffd700 !important;
font-weight:700;font-size:0.88rem;
text-decoration:none;
border-bottom:1.5px dashed rgba(255,215,0,0.55);
padding-bottom:1px;
align-self:flex-start;
max-width:100%;
transition:color 0.18s ease,border-color 0.18s ease;
}
.djnew-mockup-body .float-notif-link span{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:200px;
}
.djnew-mockup-body .float-notif-link svg{
width:11px;height:11px;flex-shrink:0;
transition:transform 0.22s ease;
}
.djnew-mockup-body .float-notif:hover .float-notif-link{
color:#ffea7a !important;border-color:#ffea7a;
}
.djnew-mockup-body .float-notif:hover .float-notif-link svg{transform:translateX(3px)}
.djnew-mockup-body .float-notif-city{
font-size:0.7rem;color:rgba(255,255,255,0.5);font-weight:500;
}
/* Reset margin do .landing-page wrapper pra hero ir até o topo absoluto */
body.home .landing-page{margin:0 !important;padding:0 !important;background:#050926}
/* ==================== NOTIFICAÇÕES — 1 POR VEZ + HORIZONTAL COMPACTA ====================
Layout horizontal: ícone à esquerda, 2 linhas de texto à direita. */
.djnew-mockup-body .float-notif-stack{
max-width:300px !important;
gap:6px !important;
bottom:18px !important;left:18px !important;
}
.djnew-mockup-body .float-notif-stack > .float-notif:not(:last-child){
display:none !important;
}
.djnew-mockup-body .float-notif{
padding:6px 12px 6px 8px !important;
border-radius:11px !important;
font-size:0.72rem !important;
gap:8px !important;
align-items:center !important;
min-width:0 !important;
}
.djnew-mockup-body .float-notif-icon{
width:32px !important;height:32px !important;
border-radius:8px !important;
}
.djnew-mockup-body .float-notif-icon img,
.djnew-mockup-body .float-notif-icon svg{width:17px !important;height:17px !important}
.djnew-mockup-body .float-notif-text{
gap:1px !important;
min-width:0 !important;flex:1 !important;
}
.djnew-mockup-body .float-notif-line{
font-size:0.72rem !important;
line-height:1.15 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
max-width:100% !important;
}
.djnew-mockup-body .float-notif-link{
font-size:0.72rem !important;
border-bottom-width:1px !important;
padding-bottom:0 !important;
}
.djnew-mockup-body .float-notif-link span{
max-width:170px !important;
font-size:0.72rem !important;
}
.djnew-mockup-body .float-notif-link svg{width:9px !important;height:9px !important}
/* Esconde linha de cidade — agora o tempo vai inline com o nome */
.djnew-mockup-body .float-notif-city{display:none !important}
/* Tempo (ex: "· 4 min") inline ao lado do nome — força inline pra não wrap */
.djnew-mockup-body .float-notif-line{
white-space:nowrap !important;
overflow:hidden;text-overflow:ellipsis;
}
.djnew-mockup-body .float-notif-time{
display:inline !important;
color:rgba(255,255,255,0.55) !important;
font-weight:500 !important;
font-size:0.72rem !important;
margin-left:4px;
letter-spacing:0.01em;
white-space:nowrap;
}
/* Linha de ação separada — menos protagonismo que o nome */
.djnew-mockup-body .float-notif-action{
font-size:0.74rem !important;
color:rgba(255,255,255,0.7) !important;
line-height:1.2 !important;
margin-top:1px !important;
}
@media (max-width:880px){
.djnew-mockup-body .float-notif-stack{
bottom:12px !important;
left:10px !important;right:10px !important;
max-width:none !important;
width:auto !important;
}
.djnew-mockup-body .float-notif{
padding:5px 10px 5px 7px !important;
border-radius:10px !important;
gap:7px !important;
max-width:280px !important;
}
.djnew-mockup-body .float-notif-time{font-size:0.62rem !important;margin-left:3px !important}
.djnew-mockup-body .float-notif-action{font-size:0.64rem !important}
.djnew-mockup-body .float-notif-icon{
width:26px !important;height:26px !important;
border-radius:7px !important;
}
.djnew-mockup-body .float-notif-icon img,
.djnew-mockup-body .float-notif-icon svg{width:14px !important;height:14px !important}
.djnew-mockup-body .float-notif-line{font-size:0.66rem !important;line-height:1.1 !important}
.djnew-mockup-body .float-notif-link{font-size:0.66rem !important}
.djnew-mockup-body .float-notif-link span{max-width:140px !important;font-size:0.66rem !important}
}
/* ==================== TOP NAV ==================== */
/* === V3 FLOATING PILL — menu cápsula centralizada flutuante === */
.djnew-topnav{
position:fixed !important;
top:14px !important;
left:50% !important;right:auto !important;
transform:translateX(-50%);
z-index:9999 !important;
width:auto !important;max-width:calc(100% - 28px) !important;
padding:10px 14px !important;
background:rgba(13,33,65,0.55) !important;
-webkit-backdrop-filter:blur(24px) saturate(180%) !important;
backdrop-filter:blur(24px) saturate(180%) !important;
border:1px solid rgba(255,255,255,0.10) !important;
border-radius:999px !important;
box-shadow:0 14px 40px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.04) inset;
transition:background 0.32s ease,padding 0.28s ease,top 0.28s ease,box-shadow 0.32s ease;
font-family:"Satoshi","Inter",sans-serif;
}
.djnew-topnav.is-scrolled{
top:8px !important;
background:rgba(13,33,65,0.7) !important;
-webkit-backdrop-filter:blur(24px) saturate(180%) !important;
backdrop-filter:blur(24px) saturate(180%) !important;
padding:8px 12px !important;
box-shadow:0 18px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.06) inset;
}
/* Inner ajustes pra pílula */
.djnew-topnav__inner{
width:auto !important;
margin:0 !important;
display:flex;align-items:center;gap:12px;
}
.djnew-topnav__brand{
font-size:1.2rem !important;
margin-right:4px;
}
.djnew-topnav__logo{
display:block;
width:112px;
max-width:22vw;
height:auto;
}
/* Lista de links */
.djnew-topnav__list{gap:16px !important}
.djnew-topnav__link,
.djnew-topnav__link:link,
.djnew-topnav__link:visited{
padding:7px 8px !important;
font-size:0.84rem !important;
border-radius:999px !important;
font-weight:800 !important;
}
/* Botão WhatsApp do top nav — destaque verde com sombra */
.djnew-topnav__wa,
.djnew-topnav__wa:link,
.djnew-topnav__wa:visited{
background:linear-gradient(135deg,#25D366,#009739) !important;
color:#fff !important;
font-weight:800 !important;
padding:9px 16px !important;
box-shadow:0 8px 22px rgba(37,211,102,0.35);
position:relative;
}
.djnew-topnav__wa:hover{
background:linear-gradient(135deg,#2ee07a,#0aa645) !important;
transform:translateY(-1px);
box-shadow:0 12px 28px rgba(37,211,102,0.5);
}
.djnew-topnav__wa svg{width:14px;height:14px;color:#fff !important;fill:#fff !important;opacity:1}
/* Pulse sutil pra chamar atenção */
.djnew-topnav__wa::after{
content:'';position:absolute;inset:-2px;border-radius:inherit;
border:1.5px solid rgba(37,211,102,0.6);
animation:dj-wa-pulse 2.4s ease-in-out infinite;
pointer-events:none;
}
@keyframes dj-wa-pulse{
0%,100%{transform:scale(1);opacity:0.8}
50%{transform:scale(1.08);opacity:0}
}
.djnew-topnav__inner{
max-width:1380px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.djnew-topnav__brand{
font-family:"Big Shoulders Display",Impact,sans-serif;
font-size:1.5rem;font-weight:900;
letter-spacing:-0.01em;color:#fff;
display:inline-flex;align-items:center;gap:2px;
}
.djnew-topnav__brand em{color:#ffd700;font-style:normal}
.djnew-topnav__list{
display:flex;align-items:center;gap:16px;
list-style:none;margin:0;padding:0;
}
.djnew-topnav__user{
display:inline-flex;
align-items:center;
gap:8px;
min-width:0;
padding:5px 9px 5px 5px;
border-radius:999px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.10);
color:#fff;
}
.djnew-topnav__avatar{
width:28px;
height:28px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 28px;
background:linear-gradient(135deg,#ffd700,#fff1a3);
color:#050926;
font:900 0.68rem/1 "Satoshi","Inter",sans-serif;
}
.djnew-topnav__user-text{
display:flex;
flex-direction:column;
line-height:1.05;
white-space:nowrap;
}
.djnew-topnav__user-text strong{
font-size:0.72rem;
font-weight:900;
}
.djnew-topnav__user-text small{
font-size:0.58rem;
color:rgba(255,255,255,0.62);
font-weight:700;
letter-spacing:0.02em;
}
.djnew-topnav__user.is-registered .djnew-topnav__avatar{
background:linear-gradient(135deg,#25D366,#009739);
color:#fff;
}
.djnew-topnav__item{position:relative}
.djnew-topnav__link,
.djnew-topnav__link:link,
.djnew-topnav__link:visited{
display:inline-flex !important;align-items:center;gap:6px;
padding:9px 14px;border-radius:10px;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
font-weight:700;font-size:0.88rem;
letter-spacing:0.01em;
cursor:pointer;
transition:background 0.18s ease,color 0.18s ease;
/* Sombra dura pra garantir leitura sobre qualquer fundo */
text-shadow:0 1px 2px rgba(0,0,0,0.55),0 0 12px rgba(0,0,0,0.35);
background:transparent;
border:0;
}
.djnew-topnav__link:hover{
background:rgba(255,255,255,0.10) !important;
color:#ffd700 !important;
-webkit-text-fill-color:#ffd700 !important;
}
.djnew-topnav__link svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5))}
.djnew-topnav__link svg{width:11px;height:11px;opacity:0.7;transition:transform 0.22s ease}
.djnew-topnav__item--has-sub:hover .djnew-topnav__link svg{transform:rotate(180deg);opacity:1}
.djnew-topnav__cta,
.djnew-topnav__cta:link,
.djnew-topnav__cta:visited,
.djnew-topnav__cta *{
background:#ffd700 !important;
color:#050926 !important;
-webkit-text-fill-color:#050926 !important;
font-weight:800 !important;
padding:0 !important;
text-shadow:none !important;
fill:#050926 !important;
}
button.djnew-topnav__cta,
.djnew-topnav__item button.djnew-topnav__cta{
background:#ffd700 !important;
color:#050926 !important;
-webkit-text-fill-color:#050926 !important;
padding:9px 16px !important;
text-shadow:none !important;
}
.djnew-topnav__cta:hover,
.djnew-topnav__cta:focus{
background:#ffea7a !important;
color:#050926 !important;
-webkit-text-fill-color:#050926 !important;
}
.djnew-topnav__cta svg,
.djnew-topnav__cta svg path{
width:13px;height:13px;
color:#050926 !important;
fill:#050926 !important;
stroke:#050926 !important;
filter:none !important;
opacity:1;
}
/* ========== Fix botões amarelos do mockup quando estão dentro da home nova ==========
O CSS injetado do mockup define .btn--primary com color:var(--ink), mas
alguma herança lateral (provavelmente .djnew-mockup-body ou .djnew-influencer-host
herdando --text:white) está deixando o texto branco. Forçamos cor escura aqui. */
.djnew-main .btn--primary,
.djnew-main .btn--primary:link,
.djnew-main .btn--primary:visited,
.djnew-influencer-host .btn--primary,
.djnew-mockup-body .btn--primary{
color:#050926 !important;
}
.djnew-main .btn--primary svg,
.djnew-influencer-host .btn--primary svg,
.djnew-mockup-body .btn--primary svg{
color:#050926 !important;
stroke:#050926 !important;
}
/* Mesma correção pro shiny-cta (gold pill) e pro categorias-section__more se houver */
.djnew-main .shiny-cta,
.djnew-main .shiny-cta span,
.djnew-mockup-body .shiny-cta,
.djnew-mockup-body .shiny-cta span{
color:#050926 !important;
}
/* ==================== SEÇÃO QUEM SOMOS (.qs) — off-white moderno ====================
Cria contraste com o resto do site (azul escuro). Branco quente, tipografia
sofisticada, sem cara de "página em branco genérica". */
.djnew-mockup-body .qs{
background:#f6f3ec !important; /* off-white quente, tipo papel premium */
color:#1a1f3a !important;
position:relative;
padding:96px 26px !important;
isolation:isolate;
overflow:hidden;
}
/* Detalhe sutil: gradient warm no fundo + textura noise leve */
.djnew-mockup-body .qs::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 800px 500px at 15% 30%,rgba(255,215,0,0.06),transparent 60%),
radial-gradient(ellipse 700px 400px at 90% 80%,rgba(26,58,255,0.05),transparent 60%);
}
.djnew-mockup-body .qs > *{position:relative;z-index:1}
/* Eyebrow + texto */
.djnew-mockup-body .qs .section-eyebrow{
color:#0D2141 !important;
font-weight:800;letter-spacing:0.18em;
}
.djnew-mockup-body .qs .section-eyebrow::before{
background:#0D2141 !important;
}
.djnew-mockup-body .qs .qs-title{
color:#0d1129 !important;
}
.djnew-mockup-body .qs .qs-title em{
color:#0D2141 !important;
background:linear-gradient(120deg,#0D2141 0%,#16396E 50%,#ffd700 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
font-style:normal;
}
.djnew-mockup-body .qs .qs-text{
color:rgba(26,31,58,0.78) !important;
}
.djnew-mockup-body .qs .qs-text p{
color:rgba(26,31,58,0.78) !important;
}
/* Colagem — agora uma única imagem PNG ocupando toda a área */
.djnew-mockup-body .qs-collage--single{
display:block !important;
width:100%;
aspect-ratio:1/1;
border-radius:24px;
overflow:hidden;
background:#0d1129;
box-shadow:0 30px 70px rgba(13,17,41,0.18),0 0 0 1px rgba(13,17,41,0.06);
position:relative;
}
.djnew-mockup-body .qs-collage--single img{
width:100%;height:115%; /* sobra 15% pra cropar parte de baixo */
object-fit:cover;
object-position:center top; /* anchora no topo */
display:block;
clip-path:inset(0 0 13% 0); /* corta os 13% inferiores (faixa preta) */
}
/* Detalhe: sutil borda de luz no canto */
.djnew-mockup-body .qs-collage--single::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 60%,rgba(13,17,41,0.25) 100%);
pointer-events:none;
}
@media (max-width:860px){
.djnew-mockup-body .qs{padding:64px 20px !important}
.djnew-mockup-body .qs-collage--single{aspect-ratio:4/3}
}
/* Layout linha-por-linha do título QUEM SOMOS — gap controlado */
.djnew-mockup-body .qs .qs-line{
display:block;
line-height:1;
}
.djnew-mockup-body .qs .qs-line--1{margin-bottom:0}
.djnew-mockup-body .qs .qs-line--3{margin-top:6px}
/* "MAIOR FORÇA" — sozinho na linha, cor única azul-PL, fonte ciclando. */
.djnew-mockup-body .qs .qs-em-cycle{
display:block;
font-style:normal;
background:none !important;
-webkit-text-fill-color:#0D2141 !important;
color:#0D2141 !important;
font-weight:900;
letter-spacing:-0.015em;
text-transform:uppercase;
font-size:1em;
line-height:0.95;
margin:0;
padding:0;
text-shadow:5px 5px 0 #ffd700, 5px 5px 14px rgba(255,215,0,0.25);
transition:opacity 0.32s ease,letter-spacing 0.32s ease;
font-family:"Bungee","Big Shoulders Display",Impact,sans-serif;
}
.djnew-mockup-body .qs .qs-title{
line-height:1 !important;
margin-bottom:18px !important;
}
.djnew-mockup-body .qs .qs-title br{display:none !important}
/* Variantes ciclando — especificidade alta pra sobrepor a regra base */
.djnew-mockup-body .qs .qs-em-cycle.qs-em-cycle--bungee { font-family:"Bungee","Big Shoulders Display",sans-serif !important; letter-spacing:-0.02em; font-size:1em }
.djnew-mockup-body .qs .qs-em-cycle.qs-em-cycle--anton { font-family:"Anton",Impact,sans-serif !important; letter-spacing:-0.005em; font-size:1.22em }
.djnew-mockup-body .qs .qs-em-cycle.qs-em-cycle--shrikhand{ font-family:"Shrikhand",cursive !important; font-style:italic; font-weight:400; letter-spacing:-0.005em; text-transform:uppercase; font-size:1.05em }
.djnew-mockup-body .qs .qs-em-cycle.qs-em-cycle--big { font-family:"Big Shoulders Display",Impact,sans-serif !important; font-weight:900; letter-spacing:-0.018em; font-size:1.2em }
.djnew-mockup-body .qs .qs-em-cycle.qs-em-cycle--boldonse { font-family:"Boldonse",Impact,sans-serif !important; font-style:italic; letter-spacing:-0.015em; font-size:1.02em }
.djnew-mockup-body .qs .qs-em-cycle.qs-em-cycle--caveat { font-family:"Caveat",cursive !important; font-weight:700; letter-spacing:0.005em; font-size:1.5em; text-transform:none; line-height:0.85 }
.djnew-mockup-body .qs .qs-em-cycle.qs-em-cycle--fraunces { font-family:"Fraunces",serif !important; font-weight:900; font-style:italic; letter-spacing:-0.015em; font-size:1.04em; text-transform:none }
.djnew-mockup-body .qs-em-cycle.is-fading{opacity:0}
/* ==================== SEÇÃO CADASTRO — branca uniforme + form interativo ==================== */
.djnew-mockup-body .cadastro{
background:#f6f3ec !important;
position:relative;
padding:96px 26px !important;
isolation:isolate;
overflow:hidden;
}
.djnew-mockup-body .cadastro::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 700px 500px at 90% 10%,rgba(255,215,0,0.07),transparent 60%),
radial-gradient(ellipse 600px 400px at 10% 90%,rgba(26,58,255,0.05),transparent 60%);
}
.djnew-mockup-body .cadastro > *{position:relative;z-index:1}
.djnew-mockup-body .cadastro-card{
background:#fff !important;
border:1px solid rgba(13,17,41,0.08) !important;
box-shadow:0 30px 70px rgba(13,17,41,0.10) !important;
}
.djnew-mockup-body .cadastro-pitch h2,
.djnew-mockup-body .cadastro-pitch h2 *{
color:#0d1129 !important;
-webkit-text-fill-color:#0d1129 !important;
}
.djnew-mockup-body .cadastro-pitch h2 em{
color:#0D2141 !important;
-webkit-text-fill-color:#0D2141 !important;
font-style:normal !important;
}
.djnew-mockup-body .cadastro-pitch p{color:rgba(26,31,58,0.72) !important}
/* Form fields — labels escuras */
.djnew-mockup-body .cadastro .form .field label,
.djnew-mockup-body .cadastro .form label{
color:rgba(13,17,41,0.78) !important;
font-weight:700;
}
/* Inputs — fundo neutro, hover→amarelo, filled (válido)→verde */
.djnew-mockup-body .cadastro .form input,
.djnew-mockup-body .cadastro .form select{
background:#f8f7f2 !important;
border:1.5px solid rgba(13,17,41,0.12) !important;
color:#0d1129 !important;
transition:background 0.22s ease,border-color 0.22s ease,box-shadow 0.22s ease !important;
}
.djnew-mockup-body .cadastro .form input::placeholder{color:rgba(13,17,41,0.4) !important}
/* Hover — amarelo */
.djnew-mockup-body .cadastro .form input:hover,
.djnew-mockup-body .cadastro .form select:hover{
background:rgba(255,215,0,0.10) !important;
border-color:rgba(255,215,0,0.5) !important;
}
/* Focus — amarelo mais forte */
.djnew-mockup-body .cadastro .form input:focus,
.djnew-mockup-body .cadastro .form select:focus{
background:rgba(255,215,0,0.16) !important;
border-color:#ffd700 !important;
box-shadow:0 0 0 4px rgba(255,215,0,0.15) !important;
outline:0 !important;
}
/* Filled (válido + tem valor) — verde */
.djnew-mockup-body .cadastro .form input:not(:placeholder-shown):valid,
.djnew-mockup-body .cadastro .form select:valid:not([value=""]):not(:focus){
background:rgba(0,179,71,0.10) !important;
border-color:rgba(0,179,71,0.55) !important;
}
/* Checkbox de privacidade */
.djnew-mockup-body .cadastro .form-checkbox{color:rgba(13,17,41,0.8) !important}
.djnew-mockup-body .cadastro .form-checkbox a{color:#0D2141 !important;font-weight:700}
/* Botão submit — cinza por padrão, verde quando form válido */
.djnew-mockup-body .cadastro .form-submit{
background:#cfd2db !important;
color:#7e8497 !important;
font-weight:800 !important;
cursor:not-allowed;
transition:background 0.28s ease,color 0.28s ease,transform 0.22s ease,box-shadow 0.28s ease !important;
}
/* Quando form é válido, botão fica verde — controlado por JS adicionando .is-valid */
.djnew-mockup-body .cadastro .form.is-valid .form-submit,
.djnew-mockup-body .cadastro .form-submit:not(:disabled).is-ready{
background:linear-gradient(135deg,#25D366,#009739) !important;
color:#fff !important;
cursor:pointer;
box-shadow:0 14px 32px rgba(37,211,102,0.32);
}
.djnew-mockup-body .cadastro .form.is-valid .form-submit:hover{
transform:translateY(-2px);
box-shadow:0 18px 40px rgba(37,211,102,0.45);
}
/* Submenu dropdown */
.djnew-topnav__sub{
position:absolute;top:100%;left:0;
min-width:220px;
background:rgba(10,17,64,0.96);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
padding:14px 8px 8px;
box-shadow:0 24px 60px rgba(0,0,0,0.5);
display:flex;flex-direction:column;gap:2px;
opacity:0;pointer-events:none;
transform:translateY(-6px);
transition:opacity 0.2s ease,transform 0.22s ease;
}
.djnew-topnav__item--has-sub:hover .djnew-topnav__sub,
.djnew-topnav__item--has-sub:focus-within .djnew-topnav__sub,
.djnew-topnav__item--has-sub.is-sub-open .djnew-topnav__sub{
opacity:1;pointer-events:auto;transform:translateY(0);
}
.djnew-topnav__sub a{
display:flex;align-items:center;gap:10px;
padding:9px 12px;border-radius:9px;
color:rgba(255,255,255,0.86);
font-size:0.88rem;font-weight:600;
transition:background 0.16s ease;
}
.djnew-topnav__sub a:hover{background:rgba(255,215,0,0.10);color:#fff}
.djnew-topnav__sub-icon{
width:24px;height:24px;border-radius:7px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
font-size:0.78rem;font-weight:900;color:#fff;
}
/* WhatsApp mobile (visível só ≤880px na pílula) */
.djnew-topnav__wa-mobile{
display:none;
align-items:center;gap:6px;
background:linear-gradient(135deg,#25D366,#009739);
color:#fff !important;
-webkit-text-fill-color:#fff !important;
font-family:"Satoshi","Inter",sans-serif;
font-weight:800;font-size:0.78rem;
padding:8px 12px;
border-radius:999px;
text-decoration:none !important;
box-shadow:0 6px 18px rgba(37,211,102,0.4);
white-space:nowrap;
transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.djnew-topnav__wa-mobile:hover,
.djnew-topnav__wa-mobile:focus{
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(37,211,102,0.55);
color:#fff !important;
}
.djnew-topnav__wa-mobile svg{width:14px;height:14px;color:#fff;fill:#fff}
/* Hamburguer mobile */
.djnew-topnav__menu{
display:none;
width:38px;height:38px;border-radius:9px;
background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);
flex-direction:column;justify-content:center;align-items:center;gap:4px;
}
.djnew-topnav__menu span{display:block;width:18px;height:1.6px;background:#fff;border-radius:2px;transition:all 0.22s ease}
.djnew-topnav__menu.is-open span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.djnew-topnav__menu.is-open span:nth-child(2){opacity:0}
.djnew-topnav__menu.is-open span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
@media (max-width:980px){
.djnew-topnav{
padding:9px 12px !important;
max-width:calc(100% - 18px) !important;
}
.djnew-topnav__inner{gap:10px !important}
.djnew-topnav__logo{width:96px;max-width:30vw}
.djnew-topnav__user{display:none}
.djnew-topnav__list{
position:fixed;top:0;left:0;right:0;bottom:0;
background:rgba(5,9,38,0.96);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
flex-direction:column;align-items:stretch;justify-content:flex-start;
padding:92px 22px 26px;gap:10px;
transform:translateY(-100%);
transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);
z-index:49;
}
.djnew-topnav.is-menu-open .djnew-topnav__list{transform:translateY(0)}
.djnew-topnav__link{padding:14px 18px;font-size:1rem}
.djnew-topnav__wa{
min-height:56px !important;
justify-content:center !important;
font-size:1.04rem !important;
}
.djnew-topnav__sub{position:static;background:transparent;border:0;padding:4px 0 0 32px;box-shadow:none;opacity:1;pointer-events:auto;transform:none}
.djnew-topnav__menu{display:inline-flex}
}
/* ==================== HERO FLÁVIO ==================== */
.djnew-hero{
position:relative;min-height:100vh;
background:#050926;
overflow:hidden;
display:flex;align-items:center;
padding:100px 26px 80px;
isolation:isolate;
}
/* Wrapper da imagem — separado pra permitir parallax independente sem afetar o overlay */
.djnew-hero__art-wrap{
position:absolute;inset:0;
z-index:-2;
overflow:hidden;
/* Aceita transform sem causar layout (GPU) */
will-change:transform;
}
.djnew-hero__art{
position:absolute;inset:-5% 0 -5% 0; /* sobra 5% top/bottom pra absorver parallax */
width:100%;height:110%;
object-fit:cover;
object-position:center top;
/* Crop visual: tira ~12% da parte de baixo (faixa "extra" do PNG do designer) */
clip-path:inset(0 0 12% 0);
filter:saturate(1.05);
transform:translate3d(0,0,0); /* baseline GPU */
will-change:transform;
transition:transform 0.05s linear; /* suaviza micro-jitter do scroll */
}
/* O parallax é aplicado via JS — translateY proporcional ao scrollY (~40% da velocidade) */
.djnew-hero__overlay{
position:absolute;inset:0;z-index:-1;
/* Hero limpo — sem overlay azul. Só fade sutil no rodapé pra integrar
com a influencer-strip abaixo. Topo fica TOTALMENTE limpo. */
background:linear-gradient(180deg,transparent 78%,rgba(5,9,38,0.7) 100%);
pointer-events:none;
}
/* Remove qualquer filter/saturate que possa estar tingindo de azul */
.djnew-hero__art{filter:none !important}
.djnew-hero__content{
width:100%;max-width:1380px;margin:0 auto;
display:grid;
grid-template-columns:minmax(280px,520px) 1fr;
align-items:center;
gap:32px;
}
@media (max-width:1100px){
.djnew-hero__content{grid-template-columns:1fr;align-items:flex-end}
}
.djnew-hero__title-art{
max-width:min(540px,42vw); /* aumentado levemente */
height:auto;
filter:drop-shadow(0 14px 40px rgba(0,0,0,0.55));
justify-self:start;
}
@media (max-width:1100px){.djnew-hero__title-art{max-width:min(480px,58vw)}} /* aumentado levemente */
@media (max-width:680px){.djnew-hero__title-art{max-width:min(320px,70vw)}} /* aumentado levemente */
/* Card CTA "Cadastre-se" — abaixo do título para não cobrir o rosto do hero */
.djnew-hero__cta{
display:flex;align-items:center;gap:12px;
background:rgba(255,255,255,0.97);
color:#050926;
padding:12px 16px 12px 12px;
border-radius:16px;
box-shadow:0 28px 70px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.6);
transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.28s ease;
max-width:320px;
justify-self:start;
align-self:start;
grid-column:1;
margin-top:22px;
}
.djnew-hero__cta:hover{transform:translateY(-3px);box-shadow:0 34px 80px rgba(0,0,0,0.65),0 0 0 1px var(--gold,#ffd700)}
.djnew-hero__cta-icon{
width:40px;height:40px;border-radius:10px;
background:linear-gradient(135deg,#25D366,#009739);
color:#fff;
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;
box-shadow:0 8px 20px rgba(37,211,102,0.35);
}
.djnew-hero__cta-icon svg{width:20px;height:20px}
.djnew-hero__cta-text{display:flex;flex-direction:column;gap:2px;line-height:1.2;color:#050926}
.djnew-hero__cta-text strong{font-family:"Big Shoulders Display",Impact,sans-serif;font-size:1rem;font-weight:900;letter-spacing:-0.005em;text-transform:uppercase;color:#050926 !important}
.djnew-hero__cta-text span{font-size:0.7rem;color:rgba(5,9,38,0.7) !important;font-weight:500;line-height:1.35}
@media (max-width:1100px){
.djnew-hero__cta{
justify-self:start;align-self:flex-start;
margin-bottom:0;max-width:420px;width:auto;
}
}
@media (max-width:680px){
.djnew-hero{
padding:88px 18px 12px;
min-height:clamp(390px, 52vh, 500px);
align-items:flex-end;
}
.djnew-hero__art-wrap{
position:absolute !important;
inset:0 !important;
z-index:-2 !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
transform:none !important;
background:#050926 url("../images/direitaja/HEADER_NOVO.png") 80% top / cover no-repeat !important;
}
.djnew-hero__art{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:100% !important;
object-fit:cover !important;
object-position:80% top !important;
clip-path:none !important;
transform:none !important;
filter:none !important;
}
.djnew-hero__cta{flex-wrap:nowrap;width:100%;padding:10px 14px 10px 10px;border-radius:14px}
.djnew-hero__cta-icon{width:36px;height:36px;border-radius:8px}
.djnew-hero__cta-icon svg{width:18px;height:18px}
.djnew-hero__cta-text strong{font-size:0.9rem}
.djnew-hero__cta-text span{font-size:0.65rem}
}
/* ==================== INFLUENCER STRIP (logo após hero) ==================== */
.djnew-influencer-strip{
position:relative;z-index:2;
background:linear-gradient(135deg,#0D2141 0%,#16396E 100%);
padding:36px 26px;
border-bottom:3px solid #ffd700;
}
.djnew-influencer-strip__inner{
max-width:1380px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;gap:32px;
color:#fff;font-family:"Satoshi","Inter",sans-serif;
flex-wrap:wrap;
}
.djnew-influencer-strip__eyebrow{
display:inline-block;
font-size:0.68rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;
color:#ffd700;margin-bottom:6px;
}
.djnew-influencer-strip h2{
font-family:"Big Shoulders Display",Impact,sans-serif;
font-size:1.65rem;font-weight:900;letter-spacing:-0.01em;line-height:1.05;
margin:0 0 4px;
}
.djnew-influencer-strip p{
font-size:0.9rem;color:rgba(255,255,255,0.78);line-height:1.5;margin:0;
max-width:560px;
}
.djnew-influencer-strip__cta{
display:inline-flex;align-items:center;gap:10px;
background:#ffd700;color:#050926;
padding:13px 22px;border-radius:999px;
font-weight:800;font-size:0.92rem;
transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.25s ease;
flex-shrink:0;
}
.djnew-influencer-strip__cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,215,0,0.4)}
.djnew-influencer-strip__cta svg{width:18px;height:18px}
@media (max-width:680px){
.djnew-influencer-strip{padding:26px 18px}
.djnew-influencer-strip__inner{gap:18px}
.djnew-influencer-strip h2{font-size:1.35rem}
}
/* ==================== STICKY DOCK (Cadastre + WA) ==================== */
.djnew-dock{
position:fixed;bottom:18px;right:18px;
display:flex;flex-direction:column;gap:10px;
z-index:48;
opacity:0;pointer-events:none;
transform:translateY(20px) scale(0.95);
transition:opacity 0.32s ease,transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.djnew-dock.is-visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.djnew-dock__btn{
display:inline-flex;align-items:center;gap:10px;
padding:11px 16px 11px 12px;
border-radius:14px;
font-family:"Satoshi","Inter",sans-serif;
font-weight:700;
box-shadow:0 14px 36px rgba(0,0,0,0.45);
transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.25s ease;
min-width:200px;
}
.djnew-dock__btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 44px rgba(0,0,0,0.55)}
.djnew-dock__btn svg{width:22px;height:22px;flex-shrink:0}
.djnew-dock__btn span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.djnew-dock__btn strong{font-size:0.88rem}
.djnew-dock__btn small{font-size:0.7rem;opacity:0.85;font-weight:500}
.djnew-dock__btn--gold,
.djnew-dock__btn--gold *{
color:#050926 !important;
fill:#050926;
}
.djnew-dock__btn--gold{background:#ffd700 !important}
.djnew-dock__btn--gold svg,
.djnew-dock__btn--gold svg path{stroke:#050926 !important;color:#050926 !important}
.djnew-dock__btn--gold strong{font-weight:800 !important}
.djnew-dock__btn--gold small{color:rgba(5,9,38,0.65) !important;font-weight:600 !important}
.djnew-dock__btn--wa,
.djnew-dock__btn--wa *{color:#fff !important;fill:#fff}
.djnew-dock__btn--wa{background:linear-gradient(135deg,#25D366,#009739) !important}
.djnew-dock__btn--wa svg,
.djnew-dock__btn--wa svg path{fill:#fff !important;color:#fff !important}
.djnew-dock__btn--wa strong{font-weight:800 !important}
.djnew-dock__btn--wa small{color:rgba(255,255,255,0.85) !important;font-weight:600 !important}
@media (max-width:680px){
.djnew-dock{bottom:12px;right:12px;left:12px}
.djnew-dock__btn{min-width:0;flex:1}
.djnew-dock__btn small{display:none}
}
/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
.djnew-topnav,.djnew-hero__cta,.djnew-influencer-strip__cta,.djnew-dock,.djnew-dock__btn{
transition:none !important;
}
}
/* ============================================================
FIX BLUE TINT — blobs decorativos (.blob-1, .blob-2) são círculos
azuis de 600-720px com blur(140px) e opacity 0.45. Em mobile o
viewport é menor que o blob, então cobrem TUDO em azul.
============================================================ */
@media (max-width:880px){
.djnew-mockup-body .blob,
.djnew-mockup-body .blob-1,
.djnew-mockup-body .blob-2{
display:none !important;
}
/* Mantém só o gold (blob-3) bem sutil em telas mobile, se quiser cor */
.djnew-mockup-body .blob-3{
opacity:0.06 !important;
width:280px !important;height:280px !important;
filter:blur(80px) !important;
}
}
/* ============================================================
FIX BLUE TINT — drawer-overlay (do mockup) e qualquer elemento com
backdrop-filter "invisível" (opacity:0) que ainda renderiza blur+bg.
============================================================ */
.djnew-mockup-body .drawer-overlay:not(.is-visible){
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
background:transparent !important;
}
/* Garante que o drawer-overlay abaixo do hero não tinge nada quando fechado */
.djnew-mockup-body .drawer:not(.is-open){
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
/* ============================================================
MOBILE FIXES (≤880px) — menu pill compacto + dock escondido
============================================================ */
/* 1) Esconde sticky dock (Cadastre-se + WhatsApp) no mobile */
@media (max-width:880px){
.djnew-dock{display:none !important}
}
/* ==================== NAV + HERO QA RESPONSIVO ====================
Ajustes finais para evitar o estado quebrado entre desktop/mobile,
manter o logo dentro da pílula e preservar as cores originais do hero.
==================== */
.djnew-topnav{
max-width:min(1120px, calc(100% - 28px)) !important;
}
.djnew-topnav__inner{
gap:clamp(8px, 1vw, 16px) !important;
}
.djnew-topnav__logo{
width:clamp(96px, 9vw, 124px) !important;
max-width:124px !important;
max-height:48px !important;
object-fit:contain !important;
}
.djnew-topnav__link,
.djnew-topnav__link:link,
.djnew-topnav__link:visited{
white-space:nowrap !important;
}
.djnew-topnav__sub{
top:calc(100% + 2px) !important;
}
.djnew-topnav__sub::before{
content:'';
position:absolute;
left:0;
right:0;
bottom:100%;
height:10px;
}
.djnew-hero__overlay{
display:none !important;
background:none !important;
}
.djnew-hero__art,
.djnew-hero__title-art,
.djnew-hero__cta{
opacity:1 !important;
filter:none !important;
}
.djnew-hero__cta{
background:#fff !important;
}
.djnew-hero__cta-text span{
color:#050926 !important;
}
@media (max-width:1180px) and (min-width:1101px){
.djnew-topnav{
padding:8px 10px !important;
}
.djnew-topnav__logo{
width:104px !important;
}
.djnew-topnav__link,
.djnew-topnav__link:link,
.djnew-topnav__link:visited{
padding:7px 9px !important;
font-size:0.78rem !important;
}
.djnew-topnav__wa,
.djnew-topnav__wa:link,
.djnew-topnav__wa:visited{
padding:8px 12px !important;
}
}
@media (max-width:1100px){
.djnew-topnav{
top:10px !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
width:auto !important;
max-width:calc(100% - 20px) !important;
padding:6px 8px 6px 12px !important;
border-radius:999px !important;
}
.djnew-topnav__inner{
width:auto !important;
min-width:0 !important;
gap:8px !important;
}
.djnew-topnav__brand{
flex:0 1 auto !important;
min-width:0 !important;
margin-right:0 !important;
}
.djnew-topnav__logo{
width:clamp(92px, 24vw, 118px) !important;
max-width:118px !important;
max-height:44px !important;
}
.djnew-topnav__wa-mobile{
display:inline-flex !important;
flex:0 0 auto !important;
}
.djnew-topnav__menu{
display:inline-flex !important;
flex:0 0 38px !important;
position:relative !important;
z-index:10002 !important;
}
.djnew-topnav__list{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100vw !important;
height:100vh !important;
height:100dvh !important;
background:#050926 !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
padding:92px 22px 28px !important;
gap:6px !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
transform:translateY(-14px) !important;
transition:transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.24s ease, visibility 0s linear 0.32s !important;
z-index:10000 !important;
overflow-y:auto !important;
border-radius:0 !important;
}
.djnew-topnav.is-menu-open{
top:0 !important;
left:0 !important;
right:0 !important;
transform:none !important;
width:100% !important;
max-width:100% !important;
border-radius:0 !important;
padding:12px 18px !important;
background:#050926 !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__list{
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
transform:translateY(0) !important;
transition:transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.24s ease, visibility 0s !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__logo{
width:108px !important;
max-height:42px !important;
}
.djnew-topnav__item{
width:100% !important;
border-bottom:1px solid rgba(255,255,255,0.08) !important;
}
.djnew-topnav__link,
.djnew-topnav__link:link,
.djnew-topnav__link:visited{
width:100% !important;
justify-content:space-between !important;
padding:16px 12px !important;
font-size:1rem !important;
border-radius:0 !important;
background:transparent !important;
}
.djnew-topnav__sub{
position:static !important;
min-width:0 !important;
background:transparent !important;
border:0 !important;
padding:0 0 0 12px !important;
box-shadow:none !important;
opacity:0 !important;
pointer-events:none !important;
transform:none !important;
max-height:0 !important;
overflow:hidden !important;
transition:max-height 0.28s ease, opacity 0.2s ease, padding 0.2s ease !important;
}
.djnew-topnav__sub::before{
display:none !important;
}
.djnew-topnav__item--has-sub:hover .djnew-topnav__sub,
.djnew-topnav__item--has-sub:focus-within .djnew-topnav__sub{
opacity:0 !important;
pointer-events:none !important;
max-height:0 !important;
padding:0 0 0 12px !important;
}
.djnew-topnav__item--has-sub.is-sub-open .djnew-topnav__sub,
.djnew-topnav__item--has-sub.is-sub-open:hover .djnew-topnav__sub,
.djnew-topnav__item--has-sub.is-sub-open:focus-within .djnew-topnav__sub{
opacity:1 !important;
pointer-events:auto !important;
max-height:420px !important;
padding:4px 0 12px 12px !important;
}
}
@media (max-width:420px){
.djnew-topnav__logo{
width:96px !important;
}
.djnew-topnav__wa-mobile{
padding:8px 10px !important;
}
.djnew-topnav__wa-mobile span{
display:none !important;
}
}
/* 2) Menu mobile — pill compacto (só brand + hamburger), drawer fullscreen */
@media (max-width:880px){
/* Pill ainda flutuante, mas largura mínima */
.djnew-topnav{
top:10px !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%);
width:auto !important;
max-width:calc(100% - 20px) !important;
padding:6px 6px 6px 16px !important;
border-radius:999px !important;
}
/* WA mobile aparece na pílula entre brand e hamburger */
.djnew-topnav__wa-mobile{display:inline-flex !important}
/* Esconde "WhatsApp" texto em telas muito pequenas — só ícone */
@media (max-width:380px){
.djnew-topnav__wa-mobile span{display:none}
.djnew-topnav__wa-mobile{padding:8px 10px}
}
.djnew-topnav.is-menu-open{
/* Quando aberto, vira barra full-width e SOLTA o transform pra fixed
positioning dos children escapar do containing block transformado */
top:0 !important;
left:0 !important;
right:0 !important;
transform:none !important;
width:100% !important;
max-width:100% !important;
border-radius:0 !important;
padding:14px 18px !important;
background:rgba(5,9,38,0.98) !important;
}
.djnew-topnav__inner{
gap:10px !important;
justify-content:space-between !important;
}
.djnew-topnav__brand{
font-size:1.1rem !important;
margin-right:0 !important;
}
.djnew-topnav__logo{
width:118px;
max-width:34vw;
}
/* Lista vira drawer fullscreen — FECHADO: zero background/blur pra não tingir o hero */
.djnew-topnav__list{
position:fixed !important;
top:0 !important; left:0 !important; right:0 !important;
width:100vw !important;
height:100vh !important;
height:100dvh !important;
max-height:none !important;
background:transparent !important; /* fechado: invisível */
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
padding:88px 20px 28px !important;
gap:6px !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
transform:translateY(-12px) !important;
transition:transform 0.36s cubic-bezier(0.22,1,0.36,1),opacity 0.28s ease,visibility 0s linear 0.36s,background 0s linear 0.36s,backdrop-filter 0s linear 0.36s !important;
z-index:9990 !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
border-radius:0 !important;
}
/* ABERTO: aí sim aplica o glass + bg sólido */
.djnew-topnav.is-menu-open .djnew-topnav__list{
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
transform:translateY(0) !important;
background:rgba(5,9,38,0.98) !important;
-webkit-backdrop-filter:blur(24px) saturate(180%) !important;
backdrop-filter:blur(24px) saturate(180%) !important;
transition:transform 0.36s cubic-bezier(0.22,1,0.36,1),opacity 0.28s ease,visibility 0s,background 0.18s ease,backdrop-filter 0.18s ease !important;
}
/* Items full-width no drawer */
.djnew-topnav__item{
width:100%;
border-bottom:1px solid rgba(255,255,255,0.06);
}
.djnew-topnav__item:last-child{border-bottom:0}
.djnew-topnav__link,
.djnew-topnav__link:link,
.djnew-topnav__link:visited{
width:100%;
justify-content:space-between !important;
padding:18px 14px !important;
font-size:1.05rem !important;
border-radius:0 !important;
background:transparent !important;
}
.djnew-topnav__link:hover{background:rgba(255,215,0,0.06) !important}
/* WhatsApp no drawer — destaque verde, full width */
.djnew-topnav__wa,
.djnew-topnav__wa:link,
.djnew-topnav__wa:visited{
margin-top:14px;
border-radius:14px !important;
padding:16px 18px !important;
justify-content:center !important;
box-shadow:0 10px 26px rgba(37,211,102,0.35) !important;
}
.djnew-topnav__wa::after{display:none}
/* Submenu Materiais — collapsed por padrão, expand quando aria-expanded=true */
.djnew-topnav__sub{
position:static !important;
background:transparent !important;
border:0 !important;
padding:0 0 8px 14px !important;
box-shadow:none !important;
opacity:0 !important;
pointer-events:none !important;
transform:none !important;
max-height:0 !important;
overflow:hidden !important;
transition:max-height 0.32s ease,opacity 0.22s ease,padding 0.22s ease !important;
display:flex !important;
flex-direction:column !important;
gap:2px !important;
}
.djnew-topnav__item--has-sub.is-sub-open .djnew-topnav__sub{
opacity:1 !important;
pointer-events:auto !important;
max-height:520px !important;
padding:6px 0 14px 14px !important;
}
/* Rotação seta quando submenu aberto */
.djnew-topnav__item--has-sub.is-sub-open > .djnew-topnav__link svg{
transform:rotate(180deg);
}
/* No mobile, hover NÃO abre submenu — só o tap */
.djnew-topnav__item--has-sub:hover .djnew-topnav__sub,
.djnew-topnav__item--has-sub:focus-within .djnew-topnav__sub{
opacity:0 !important;
pointer-events:none !important;
max-height:0 !important;
padding:0 0 8px 14px !important;
}
.djnew-topnav__item--has-sub.is-sub-open:hover .djnew-topnav__sub,
.djnew-topnav__item--has-sub.is-sub-open:focus-within .djnew-topnav__sub{
opacity:1 !important;
pointer-events:auto !important;
max-height:520px !important;
padding:6px 0 14px 14px !important;
}
.djnew-topnav__sub a{
padding:12px 14px !important;
font-size:0.95rem !important;
}
/* Hamburger sempre visível no mobile */
.djnew-topnav__menu{
display:inline-flex !important;
position:relative;
z-index:9999;
}
/* Travar scroll do body quando drawer aberto */
body.dj-menu-open{overflow:hidden}
}
/* Última camada: mantém o menu mobile consistente mesmo com regras antigas acima. */
@media (max-width:1100px){
.djnew-topnav{
top:10px !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
width:auto !important;
max-width:calc(100% - 20px) !important;
padding:6px 8px 6px 12px !important;
border-radius:999px !important;
}
.djnew-topnav.is-menu-open{
top:0 !important;
left:0 !important;
right:0 !important;
transform:none !important;
width:100% !important;
max-width:100% !important;
border-radius:0 !important;
padding:12px 18px !important;
background:#050926 !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
.djnew-topnav__logo{
width:clamp(92px, 24vw, 118px) !important;
max-width:118px !important;
max-height:44px !important;
object-fit:contain !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__logo{
width:108px !important;
max-height:42px !important;
}
.djnew-topnav__list{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100vw !important;
height:100dvh !important;
background:#050926 !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
transform:translateY(-14px) !important;
z-index:10000 !important;
padding:92px 22px 28px !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__list{
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
transform:translateY(0) !important;
}
.djnew-topnav__menu{
display:inline-flex !important;
}
.djnew-topnav__wa-mobile{
display:inline-flex !important;
}
.djnew-topnav__sub{
position:static !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
opacity:0 !important;
pointer-events:none !important;
max-height:0 !important;
overflow:hidden !important;
}
.djnew-topnav__item--has-sub.is-sub-open .djnew-topnav__sub,
.djnew-topnav__item--has-sub.is-sub-open:hover .djnew-topnav__sub,
.djnew-topnav__item--has-sub.is-sub-open:focus-within .djnew-topnav__sub{
opacity:1 !important;
pointer-events:auto !important;
max-height:420px !important;
padding:4px 0 12px 12px !important;
}
}
@media (max-width:420px){
.djnew-topnav__logo{
width:96px !important;
max-height:38px !important;
}
.djnew-topnav__wa-mobile span{
display:none !important;
}
}
@media (max-width:1100px){
.djnew-topnav{
position:fixed !important;
z-index:10050 !important;
}
.djnew-topnav.is-scrolled{
position:fixed !important;
z-index:10050 !important;
}
.djnew-topnav.is-menu-open{
z-index:10060 !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__list .djnew-topnav__wa,
.djnew-topnav.is-menu-open .djnew-topnav__list .djnew-topnav__wa:link,
.djnew-topnav.is-menu-open .djnew-topnav__list .djnew-topnav__wa:visited{
background:linear-gradient(135deg,#25d366 0%,#10b85f 100%) !important;
border:1px solid rgba(255,255,255,0.16) !important;
color:#ffffff !important;
box-shadow:0 18px 42px rgba(37,211,102,0.34) !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__list .djnew-topnav__wa:hover,
.djnew-topnav.is-menu-open .djnew-topnav__list .djnew-topnav__wa:focus{
background:linear-gradient(135deg,#2be874 0%,#0fb85d 100%) !important;
color:#ffffff !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__list .djnew-topnav__wa svg,
.djnew-topnav.is-menu-open .djnew-topnav__list .djnew-topnav__wa svg path{
color:#ffffff !important;
fill:#ffffff !important;
stroke:#ffffff !important;
opacity:1 !important;
}
}
/* Ajustes finais do menu: logo menor e status de cadastro acionável. */
.djnew-topnav__logo{
width:clamp(72px, 6.8vw, 94px) !important;
max-width:94px !important;
max-height:38px !important;
}
.djnew-topnav__user{
appearance:none !important;
border:1px solid rgba(255,255,255,0.10) !important;
cursor:pointer !important;
text-align:left !important;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease !important;
}
.djnew-topnav__user:hover,
.djnew-topnav__user:focus-visible{
background:rgba(255,255,255,0.10) !important;
border-color:rgba(255,215,0,0.32) !important;
transform:translateY(-1px);
outline:none !important;
}
.djnew-topnav__user .djnew-topnav__avatar{
background:linear-gradient(135deg,#ffd700,#fff1a3) !important;
color:#050926 !important;
}
.djnew-topnav__user.is-registered .djnew-topnav__avatar{
background:linear-gradient(135deg,#25D366,#009739) !important;
color:#fff !important;
}
.djnew-topnav__item--user-mobile{
display:none !important;
}
@media (max-width:1100px){
.djnew-topnav__logo{
width:clamp(78px, 22vw, 96px) !important;
max-width:96px !important;
max-height:36px !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__logo{
width:92px !important;
max-height:34px !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__item--user-mobile{
display:block !important;
margin-top:10px !important;
border-bottom:0 !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__item--user-mobile .djnew-topnav__user{
display:flex !important;
width:100% !important;
min-height:58px !important;
justify-content:center !important;
padding:14px 18px !important;
border-radius:18px !important;
background:rgba(255,215,0,0.13) !important;
border:1px solid rgba(255,215,0,0.34) !important;
color:#fff !important;
box-shadow:0 18px 42px rgba(255,215,0,0.14) !important;
}
.djnew-topnav.is-menu-open .djnew-topnav__item--user-mobile .djnew-topnav__user.is-registered{
background:rgba(37,211,102,0.14) !important;
border-color:rgba(37,211,102,0.38) !important;
box-shadow:0 18px 42px rgba(37,211,102,0.20) !important;
}
}