/* EvoTalks — Header + Mega Menu + Demo Modal styles */
/* Body padding pra compensar o header FIXED flutuante — sem isso, conteúdo
fica embaixo da barra. 76px header + 16px top margin + ~12px folga = ~104px */
body { padding-top: 104px; }
/* Anchors (#section) não ficam escondidos atrás do header flutuante */
html { scroll-padding-top: 116px; }
/* Topbar — escondido por enquanto. Os 2 links (WhatsApp atendimento + Login)
estavam empurrando o site na entrada. Header flutuante já carrega o
essencial. Pode reativar depois com design integrado se precisar. */
.evo-topbar { display: none; }
.evo-topbar-inner {
display: flex;
justify-content: flex-end;
gap: 28px;
padding: 8px 28px;
}
.evo-topbar-link {
display: inline-flex; align-items: center; gap: 8px;
color: #5b606b;
font-weight: 500;
transition: color .2s;
}
.evo-topbar-link:hover { color: #1bbf5d; }
.evo-topbar-link svg { width: 14px; height: 14px; }
/* Header FLUTUANTE com glass — estilo Brusoft/Cuberto, EvoTalks.
Blur 18px (era 20px) com saturate 200% — visual glass marcante mantido,
mas custo GPU ~20% menor por reduzir o raio. Layer dedicada via
translateZ(0). NÃO usar `contain: paint` porque cortaria o mega-menu. */
.evo-header {
position: fixed;
top: 16px;
/* Header alinhado com .container — mesma margem lateral em todas as páginas.
Antes era `left: 24px; right: 24px` da viewport: em monitores largos
a barra ficava muito mais wide que o conteúdo (que respeita
max-width: 1240px). Agora o header se centraliza no mesmo bound. */
left: 50%;
width: calc(100% - 2 * var(--container-pad));
max-width: var(--container-max);
z-index: 60;
/* Background mais opaco compensa o blur menor — visualmente equivalente,
GPU economiza ~60% (blur de 18→10 e saturate removido). Header tem
backdrop PERMANENTE, então qualquer scroll triggera reblend. */
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 20px;
box-shadow:
0 10px 32px rgba(30, 32, 38, 0.08),
0 2px 8px rgba(30, 32, 38, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
/* PADRÃO: VISÍVEL. O script inline em seo.php seta uma classe no
ANTES do body parsear: .evo-anim-header em primeira visita/reload/referrer
externo (e a regra abaixo dispara a animação); .evo-no-anim em navegação
interna (e o header simplesmente aparece). Default visível garante zero
flash em qualquer cenário. */
transform: translate3d(-50%, 0, 0);
opacity: 1;
transition: background-color .3s ease, box-shadow .3s ease;
}
/* Primeira visita / reload / referrer externo: animação roda */
html.evo-anim-header .evo-header {
animation: evoHeaderEnter .85s cubic-bezier(.16, 1, .3, 1) forwards;
}
/* .is-loaded ficou como fallback do JS legado — mantém comportamento idêntico */
.evo-header.is-loaded {
animation: evoHeaderEnter .85s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes evoHeaderEnter {
from { opacity: 0; transform: translate3d(-50%, -12px, 0); }
to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
/* Scrolled OU mega menu aberto — mais opaco (legibilidade sobre conteúdo).
Body recebe .has-mm-open via JS (mega menu não é mais filho do header). */
.evo-header.scrolled,
body.has-mm-open .evo-header {
background: rgba(255, 255, 255, 0.78);
box-shadow:
0 12px 40px rgba(30, 32, 38, 0.10),
0 4px 12px rgba(30, 32, 38, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Mobile — margens menores pra header não ficar pequeno */
@media (max-width: 720px) {
.evo-header {
top: 10px;
/* Mobile usa gutter menor (12px de cada lado) — sobrescreve o
calc(100% - 2 * container-pad) do desktop */
width: calc(100% - 24px);
border-radius: 16px;
}
.evo-mm-stage {
/* Acompanha o header no mobile */
top: 84px;
width: calc(100% - 24px);
border-radius: 16px;
}
body { padding-top: 92px; }
}
.evo-nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
gap: 24px;
}
.evo-logo img { height: 28px !important; width: auto !important; max-width: 130px; }
.evo-nav-links {
display: flex;
align-items: center;
gap: 4px;
}
/* ─── Nav links DUAL-FACE com flip 3D ───────────────────────────────────
Usa CSS Grid 1×1: ambas faces ocupam a MESMA célula, o container
automaticamente tem o tamanho do MAIOR conteúdo.
ÂNCORA = botão "Faça uma demonstração" à direita. As faces se alinham
pelo END (direita) — assim, independente do tamanho da logo, o último
link da nav fica SEMPRE colado no botão na mesma posição. */
.evo-nav-links--flip {
display: grid;
grid-template: 1fr / 1fr;
perspective: 800px;
align-items: center;
justify-items: end;
margin-left: auto;
}
.evo-nav-links--flip > .evo-nav-links-face {
grid-area: 1 / 1;
display: flex;
align-items: center;
gap: 4px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform .85s cubic-bezier(.5, 0, .2, 1) .25s;
white-space: nowrap;
}
.evo-nav-links--flip > .evo-nav-links-face--front {
transform: rotateX(0deg);
}
.evo-nav-links--flip > .evo-nav-links-face--back {
transform: rotateX(-180deg);
}
/* Back face é puramente visual — não é interativa */
.evo-nav-links--flip .evo-nav-links-face--back .evo-nav-link {
pointer-events: none;
cursor: default;
}
.evo-nav-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 14px;
border-radius: 10px;
font-family: inherit;
font-size: 14.5px;
font-weight: 500;
color: #5b606b;
transition: color .2s, background-color .2s;
cursor: pointer;
}
.evo-nav-link:hover, .evo-nav-link.is-open, .evo-nav-link.is-active { color: #1e2026; background: #eff2f7; }
.evo-caret { width: 10px; height: 6px; transition: transform .25s; }
.evo-nav-link.is-open .evo-caret { transform: rotate(180deg); }
.evo-btn-pri {
background: #1bbf5d; color: #fff;
padding: 12px 22px;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
box-shadow: 0 8px 20px rgba(27,191,93,0.28);
transition: transform .2s, box-shadow .2s;
}
.evo-btn-pri:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27,191,93,0.36); }
/* Mega menu stage — agora é um SEGUNDO card flutuante glass aparecendo
abaixo do header. Adaptado pro layout flutuante: 4 cantos arredondados,
sai com margem de 8px do header pra parecer flutuar separadamente. */
.evo-mm-stage {
/* position: fixed (era absolute relativo ao header). Agora é sibling do
header → posicionado em coords da viewport. Top = 16px (header top) +
76px (header height) + 8px (gap) = 100px. Mobile: ajustado pelo media.
Largura/centralização: mesmo bound do .evo-header e do .container. */
position: fixed;
left: 50%;
width: calc(100% - 2 * var(--container-pad));
max-width: var(--container-max);
top: 100px;
z-index: 59; /* abaixo do header (60) pra não cobrir a sombra dele */
isolation: isolate;
/* Glass com blur APENAS quando ABERTO — opacity:0 não pula computação
do backdrop-filter, então deixar ele ligado quando fechado (height:0)
custava GPU à toa. Agora só computa quando is-open ativa. */
background: rgba(255, 255, 255, 0.72);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 20px;
box-shadow:
0 24px 50px rgba(30, 32, 38, 0.14),
0 8px 20px rgba(30, 32, 38, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
opacity: 0;
pointer-events: none;
/* translateX(-50%) preserva a centralização durante o slide-in vertical */
transform: translate3d(-50%, -6px, 0);
height: 0;
overflow: hidden;
transition:
opacity .25s cubic-bezier(.2, .9, .3, 1),
transform .3s cubic-bezier(.2, .9, .3, 1),
height .45s cubic-bezier(.4, 0, .2, 1),
background-color .3s,
border-color .3s;
}
.evo-mm-stage.is-open {
opacity: 1;
pointer-events: auto;
transform: translate3d(-50%, 0, 0);
/* Blur só quando aberto (visualmente equivalente, GPU economiza quando fechado).
Reduzido de 22px+saturate pra 12px puro — corte adicional de GPU quando
o mega menu fica aberto sobre conteúdo animado da home. */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* height é setado inline via JS pra bater com o painel ativo */
}
/* Wrapper interno onde os painéis são empilhados absolutamente.
Sem padding — o offset é controlado pelo top/left/right do .mm-panel. */
.mm-stage-inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
}
.mm-panel {
position: absolute;
top: 36px;
left: 28px;
right: 28px;
opacity: 0;
pointer-events: none;
transform: translateX(0);
/* Curva longa e ease pra deslizamento parecer "encaixar" */
transition:
opacity .32s cubic-bezier(.2, .9, .3, 1),
transform .42s cubic-bezier(.2, .85, .2, 1);
will-change: transform, opacity;
}
.mm-panel.is-active {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
/* Painéis à esquerda do ativo deslizam pra esquerda quando saem */
.mm-panel.is-prev { transform: translateX(-32px); }
/* Painéis à direita deslizam pra direita */
.mm-panel.is-next { transform: translateX(32px); }
.mm-grid { display: grid; gap: 28px; perspective: 900px; }
.mm-grid-6 { grid-template-columns: repeat(6, 1fr); }
.mm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mm-grid-solucoes { grid-template-columns: 1.4fr 1.4fr 1fr; }
.mm-grid-funcoes { grid-template-columns: 1fr 1fr 0.9fr; gap: 24px; }
/* Colunas internas do Funções — gap vertical pros .mm-mod-row não ficarem
colados (estavam stack puro sem gap, sem respiro). Espaço simétrico
com o gap horizontal entre colunas (24px → 12px vertical = visual padrão). */
.mm-grid-funcoes > div {
display: flex;
flex-direction: column;
gap: 12px;
}
.mm-col-title {
font-size: 13px; font-weight: 500;
color: #8a8f99;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #eef1f6;
}
.mm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; perspective: 900px; }
.mm-list-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; perspective: 900px; }
/* === Minicards do mega-menu ===
.mm-link agora é um minicard com fundo, borda, sombra sutil. No hover ganha
zoom suave pra frente + tilt 3D leve (rotateX/Y via JS data-tilt) + sombra
mais profunda. Curva spring pra parecer "elástico". */
.mm-link {
display: flex; align-items: center; gap: 12px;
padding: 12px;
border-radius: 12px;
font-size: 13.5px;
color: #1e2026;
background: #fff;
border: 1px solid #eef1f6;
box-shadow: 0 1px 3px rgba(30, 32, 38, 0.04);
transform-style: preserve-3d;
will-change: transform;
transition:
transform .35s cubic-bezier(.16, 1, .3, 1),
box-shadow .35s cubic-bezier(.16, 1, .3, 1),
border-color .25s ease;
}
.mm-link:hover {
transform: translateY(-3px) scale(1.035);
border-color: rgba(27, 191, 93, 0.35);
box-shadow:
0 18px 36px rgba(30, 32, 38, 0.10),
0 6px 14px rgba(30, 32, 38, 0.05);
}
.mm-link span:not(.mm-ico) { line-height: 1.3; }
/* Cascade reveal — só nos .mm-link DENTRO do painel Soluções. JS adiciona
.is-revealed com stagger de 35ms entre cada item quando o painel abre.
Outros painéis (Recursos, Segmentos) usam .mm-link sem essa animação. */
.mm-grid-solucoes .mm-link {
opacity: 0;
transform: translateY(8px) scale(0.96);
transition:
transform .45s cubic-bezier(.16, 1, .3, 1),
opacity .4s cubic-bezier(.16, 1, .3, 1),
box-shadow .35s cubic-bezier(.16, 1, .3, 1),
border-color .25s ease;
}
.mm-grid-solucoes .mm-link.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
.mm-grid-solucoes .mm-link.is-revealed:hover {
transform: translateY(-3px) scale(1.035);
}
@media (prefers-reduced-motion: reduce) {
.mm-grid-solucoes .mm-link {
opacity: 1;
transform: none;
transition: none;
}
}
.mm-ico {
width: 36px; height: 36px;
border-radius: 9px;
display: grid; place-items: center;
background: #eff2f7;
flex-shrink: 0;
font-size: 16px;
}
.mm-ico-soft { background: #d8f5e6; }
.mm-ico-img { width: 22px; height: 22px; }
.mm-ico-emoji { font-size: 17px; line-height: 1; }
/* Variante pra logos de canal (WhatsApp/Instagram/Facebook/Messenger):
os SVGs em assets/canais/*.svg já têm um retângulo arredondado colorido
embutido. Em vez de aninhar um retângulo claro do wrapper + um menor do
SVG dentro (gera o efeito "miúdo"), removemos o bg do wrapper e fazemos
o ![]()
ocupar 100% — o retângulo do próprio SVG vira o container. */
.mm-ico--brand {
background: transparent !important;
overflow: hidden;
}
.mm-ico--brand > img {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
}
.mm-promo {
margin-top: 28px;
padding: 18px 22px;
background: #eff2f7;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.mm-promo strong { display: block; font-size: 14.5px; font-weight: 600; }
.mm-promo span { font-size: 13px; color: #5b606b; }
.mm-btn-ghost {
padding: 10px 20px;
border-radius: 999px;
border: 1px solid #1e2026;
font-size: 13.5px; font-weight: 500;
color: #1e2026;
transition: background-color .2s, color .2s;
white-space: nowrap;
}
.mm-btn-ghost:hover { background: #1e2026; color: #fff; }
.mm-btn-dark {
display: inline-block;
background: #1e2026;
color: #fff;
padding: 10px 18px;
border-radius: 8px;
font-size: 13.5px; font-weight: 500;
margin-top: 14px;
transition: background-color .2s;
}
.mm-btn-dark:hover { background: #000; }
.mm-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: #1bbf5d;
color: #fff;
padding: 12px 22px;
border-radius: 10px;
font-size: 14px; font-weight: 600;
margin-top: 16px;
box-shadow: 0 6px 16px rgba(27,191,93,0.28);
transition: transform .25s cubic-bezier(.16, 1, .3, 1),
box-shadow .25s ease,
background .25s ease;
position: relative;
overflow: hidden;
isolation: isolate;
}
.mm-btn-primary:hover {
transform: translateY(-2px);
background: #16a64f;
box-shadow: 0 12px 24px rgba(27, 191, 93, 0.38);
}
.mm-btn-primary svg { transition: transform .25s ease; }
.mm-btn-primary:hover svg { transform: translateX(3px); }
/* Variante com brilho diagonal passando — adicionada no aside animado. */
.mm-btn-shine::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -60%;
width: 50%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-18deg);
pointer-events: none;
z-index: -1;
animation: mmBtnShine 3.4s ease-in-out infinite;
}
@keyframes mmBtnShine {
0%, 65% { left: -60%; }
85% { left: 130%; }
100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
.mm-btn-shine::before { animation: none; }
}
/* Lista vertical scrollável dos 12 segmentos no aside Soluções.
ZERO padding no aside-seg — o list ocupa 100%×100% do cardzão cinza.
Especificidade aumentada (.mm-aside.mm-aside-seg = 20) pra sobrescrever
o .mm-aside { padding: 24px } que vem depois no CSS. */
.mm-aside.mm-aside-seg {
display: flex;
flex-direction: column;
padding: 0;
min-height: 0;
align-self: stretch;
height: 100%;
}
.mm-aside.mm-aside-seg .mm-aside-title {
padding: 24px 24px 14px 24px;
margin: 0;
flex-shrink: 0;
}
.mm-aside.mm-aside-seg .mm-seg-list {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
padding: 0 18px 0 24px; /* só lateral — top/bottom = 0 */
margin: 0;
scrollbar-color: rgba(30, 32, 38, 0.32) transparent;
perspective: 800px;
}
/* WebKit: thumb cinza escuro pra ficar visível no card claro */
.mm-seg-list::-webkit-scrollbar-thumb {
background: rgba(30, 32, 38, 0.32);
border: 1px solid rgba(30, 32, 38, 0.06);
}
.mm-seg-list::-webkit-scrollbar-thumb:hover {
background: rgba(30, 32, 38, 0.5);
}
.mm-seg-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
background: #fff;
border: 1px solid transparent;
border-radius: 9px;
font-size: 13px;
color: #1e2026;
text-decoration: none;
/* Estado inicial pra cascade reveal — opacity 0 + translateY 12px */
opacity: 0;
transform: translateY(12px);
transition:
opacity .5s cubic-bezier(.22, 1, .36, 1),
transform .55s cubic-bezier(.22, 1, .36, 1),
background-color .18s,
border-color .18s,
box-shadow .3s ease;
transform-style: preserve-3d;
will-change: transform, opacity;
}
/* Estado revelado — fim da cascade */
.mm-seg-row.is-revealed {
opacity: 1;
transform: translateY(0);
}
.mm-seg-row:hover {
background: #f6faf7;
border-color: rgba(27, 191, 93, 0.3);
}
/* Estado tiltando — sem transition em transform (responsivo ao mouse),
sombra de elevação + z-index pra ficar por cima dos vizinhos. */
.mm-seg-row.is-tilting {
transition:
opacity .4s ease,
background-color .18s,
border-color .18s,
box-shadow .3s ease;
box-shadow: 0 8px 18px rgba(30, 32, 38, 0.14);
z-index: 2;
background: #f6faf7;
border-color: rgba(27, 191, 93, 0.3);
}
.mm-seg-ico {
width: 24px; height: 24px;
border-radius: 7px;
display: grid; place-items: center;
flex-shrink: 0;
}
.mm-seg-ico .ico { width: 12px; height: 12px; background-color: currentColor; }
.mm-seg-lbl {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.mm-seg-arrow {
width: 12px; height: 12px;
color: #8a8f99;
opacity: 0;
transform: translateX(-4px);
transition: opacity .2s, transform .2s, color .2s;
flex-shrink: 0;
}
.mm-seg-row:hover .mm-seg-arrow {
opacity: 1;
transform: translateX(0);
color: #1bbf5d;
}
/* Soluções aside */
.mm-aside {
background: #eff2f7;
border-radius: 16px;
padding: 24px;
}
.mm-aside-title {
font-size: 15px; font-weight: 600;
margin-bottom: 8px;
color: #1e2026;
}
.mm-aside p {
font-size: 13px;
color: #5b606b;
line-height: 1.5;
margin: 0;
}
.mm-aside-eyebrow {
font-size: 12.5px; font-weight: 500;
color: #5b606b;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e3e6eb;
}
.mm-aside-art {
position: relative;
height: 100px;
margin: 14px 0;
}
.art-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-node {
position: absolute;
width: 32px; height: 32px;
border-radius: 8px;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
display: grid; place-items: center;
}
/* Logo central da Evo + 3 nodes com logos das integrações (assets/canais).
Padrão: fundo na COR DA MARCA, ícone BRANCO via filter (silhueta). */
.art-node-evo {
left: 16%; top: 36%;
width: 38px; height: 38px;
padding: 0;
background: transparent;
box-shadow: none;
}
.art-node-evo img { width: 100%; height: 100%; object-fit: contain; }
.art-node {
box-shadow: 0 4px 12px rgba(30, 32, 38, 0.18);
}
.art-node img {
width: 100%; height: 100%;
object-fit: contain;
}
/* WhatsApp já é badge completo (rect verde + ícone branco) — sem padding/filter. */
.art-node-1 {
right: 12%; top: 8%;
background: transparent;
padding: 0;
}
/* Asaas e Notion são logos "soltos" — bg da marca + filtro pra deixar branco. */
.art-node-2 {
right: 20%; top: 50%;
background: #0073EA;
padding: 7px;
}
.art-node-2 img { filter: brightness(0) invert(1); }
.art-node-3 {
right: 6%; bottom: 8%;
background: #1e2026;
padding: 7px;
}
.art-node-3 img { filter: brightness(0) invert(1); }
/* Funções aside */
.mm-aside-soft {
background: #eff2f7;
}
/* ───── Variante animada do aside "Tudo num painel" ─────
Entra com fade + slide quando o painel "Funções" abre. O JS adiciona
.is-revealed depois da cascade dos cards (ordem narrativa: módulos →
"tudo num painel pra unificar"). */
.mm-aside-anim {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #f1faf3 0%, #eaf6ef 50%, #e6f4ec 100%);
border: 1px solid rgba(27, 191, 93, 0.14);
opacity: 0;
transform: translateY(14px) scale(0.97);
transition:
opacity .55s cubic-bezier(.16, 1, .3, 1),
transform .6s cubic-bezier(.16, 1, .3, 1),
box-shadow .4s;
}
.mm-aside-anim.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
.mm-aside-anim.is-revealed:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(27, 191, 93, 0.14);
}
.mm-aside-glow {
position: absolute;
inset: -30%;
pointer-events: none;
background:
radial-gradient(420px 280px at 18% 0%, rgba(27, 191, 93, 0.18), transparent 60%),
radial-gradient(360px 240px at 100% 100%, rgba(27, 191, 93, 0.12), transparent 65%);
animation: mmAsideGlow 7s ease-in-out infinite alternate;
z-index: 0;
}
.mm-aside-anim > *:not(.mm-aside-glow) { position: relative; z-index: 1; }
@keyframes mmAsideGlow {
0% { transform: translate(0, 0) scale(1); opacity: .85; }
100% { transform: translate(-4%, 3%) scale(1.08); opacity: 1; }
}
.mm-aside-avatars {
display: flex; gap: -8px;
margin-bottom: 14px;
perspective: 600px;
}
.mm-aside-avatars .av {
width: 44px; height: 44px;
border-radius: 50%;
background: #d8f5e6;
border: 2px solid #fff;
margin-right: -8px;
position: relative;
overflow: hidden; /* recorta os ombros da silhueta dentro do círculo */
box-shadow: 0 6px 14px rgba(27, 191, 93, 0.18);
animation: mmAvatarBreath 3.6s ease-in-out infinite;
transform-origin: 50% 60%;
will-change: transform;
}
.mm-aside-avatars .av:nth-child(1) { animation-delay: 0s; }
.mm-aside-avatars .av:nth-child(2) { animation-delay: .35s; background: #c8f0d8; }
.mm-aside-avatars .av:nth-child(3) { animation-delay: .7s; background: #b9eccd; }
/* Silhueta de pessoa (avatar) — cabeça + ombros no verde da marca.
Substitui a "telinha" antiga que não fazia sentido. Sem pulse-ring. */
.mm-aside-avatars .av::before { /* cabeça */
content: ""; position: absolute;
left: 50%; top: 17%; transform: translateX(-50%);
width: 36%; height: 36%;
border-radius: 50%;
background: #1bbf5d;
}
.mm-aside-avatars .av::after { /* ombros (recortados pelo círculo) */
content: ""; position: absolute;
left: 50%; bottom: -10%; transform: translateX(-50%);
width: 64%; height: 46%;
border-radius: 50% 50% 0 0 / 80% 80% 0 0;
background: #1bbf5d;
}
@keyframes mmAvatarBreath {
0%, 100% { transform: translateY(0) scale(1) rotate(0); }
50% { transform: translateY(-3px) scale(1.05) rotate(-1.5deg); }
}
.mm-checks {
list-style: none; padding: 0; margin: 14px 0 0;
font-size: 13px; line-height: 1.45;
color: #1e2026;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Animação dos checks "Tudo num painel" — cada item entra com:
1. faz slide-in lateral + fade
2. .mm-check-ico pula com scale-bounce
3. SVG path do tick é desenhado via stroke-dashoffset
Estados iniciais aqui; transições driven por .is-revealed no aside pai.
Cada item tem seu transition-delay próprio pra criar a cascata. */
.mm-aside-anim .mm-checks li {
display: flex; align-items: center; gap: 9px;
opacity: 0;
transform: translateX(-14px);
transition:
opacity .5s cubic-bezier(.16, 1, .3, 1),
transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.mm-aside-anim.is-revealed .mm-checks li {
opacity: 1;
transform: translateX(0);
}
.mm-aside-anim.is-revealed .mm-checks li:nth-child(1) { transition-delay: 0.10s; }
.mm-aside-anim.is-revealed .mm-checks li:nth-child(2) { transition-delay: 0.26s; }
.mm-aside-anim.is-revealed .mm-checks li:nth-child(3) { transition-delay: 0.42s; }
.mm-check-ico {
width: 18px; height: 18px;
border-radius: 50%;
background: #1bbf5d;
color: #fff;
display: inline-grid; place-items: center;
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(27, 191, 93, 0.28);
transform: scale(0);
transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.mm-check-ico svg {
width: 11px; height: 11px;
}
.mm-check-ico svg polyline {
stroke-dasharray: 28;
stroke-dashoffset: 28;
transition: stroke-dashoffset .55s cubic-bezier(.65, 0, .35, 1);
}
.mm-aside-anim.is-revealed .mm-checks li .mm-check-ico {
transform: scale(1);
}
.mm-aside-anim.is-revealed .mm-checks li .mm-check-ico svg polyline {
stroke-dashoffset: 0;
}
/* Stagger nos ícones + desenho do tick (defasagem maior que o pra
o círculo pular DEPOIS do texto chegar) */
.mm-aside-anim.is-revealed .mm-checks li:nth-child(1) .mm-check-ico { transition-delay: 0.18s; }
.mm-aside-anim.is-revealed .mm-checks li:nth-child(2) .mm-check-ico { transition-delay: 0.34s; }
.mm-aside-anim.is-revealed .mm-checks li:nth-child(3) .mm-check-ico { transition-delay: 0.50s; }
.mm-aside-anim.is-revealed .mm-checks li:nth-child(1) .mm-check-ico svg polyline { transition-delay: 0.32s; }
.mm-aside-anim.is-revealed .mm-checks li:nth-child(2) .mm-check-ico svg polyline { transition-delay: 0.48s; }
.mm-aside-anim.is-revealed .mm-checks li:nth-child(3) .mm-check-ico svg polyline { transition-delay: 0.64s; }
@media (prefers-reduced-motion: reduce) {
.mm-aside-glow,
.mm-aside-avatars .av,
.mm-aside-avatars .av::after { animation: none; }
.mm-aside-anim,
.mm-aside-anim .mm-checks li,
.mm-check-ico,
.mm-check-ico svg polyline {
opacity: 1 !important;
transform: none !important;
stroke-dashoffset: 0 !important;
transition: none !important;
}
}
.mm-funcs-head {
font-size: 14px; color: #8a8f99; /* mesmo cinza dos títulos de Soluções (.mm-col-title) */
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid #eef1f6;
}
/* Funções module rows — minicard com mesmo tratamento de .mm-link
Estado inicial (oculto) usado pela cascade de entrada quando o painel
Funções abre. JS adiciona .is-revealed com stagger de 55ms entre cards. */
.mm-mod-row {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px;
border-radius: 14px;
background: #fff;
border: 1px solid #eef1f6;
box-shadow: 0 1px 3px rgba(30, 32, 38, 0.04);
transform-style: preserve-3d;
will-change: transform, opacity;
opacity: 0;
transform: translateY(12px) scale(0.94);
transition:
transform .5s cubic-bezier(.16, 1, .3, 1),
opacity .45s cubic-bezier(.16, 1, .3, 1),
box-shadow .35s cubic-bezier(.16, 1, .3, 1),
border-color .25s ease;
}
.mm-mod-row.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
.mm-mod-row.is-revealed:hover {
transform: translateY(-3px) scale(1.025);
border-color: rgba(27, 191, 93, 0.35);
box-shadow:
0 18px 36px rgba(30, 32, 38, 0.10),
0 6px 14px rgba(30, 32, 38, 0.05);
}
@media (prefers-reduced-motion: reduce) {
.mm-mod-row {
opacity: 1;
transform: none;
transition: none;
}
}
.mm-mod {
width: 40px; height: 40px;
border-radius: 10px;
display: grid; place-items: center;
flex-shrink: 0;
}
.mm-mod svg,
.mm-mod .ico { width: 20px; height: 20px; }
/* Garante que o .ico dentro do mm-ico/mm-mod escala corretamente */
.mm-ico .ico, .mm-mod .ico { display: inline-block; }
.mm-mod-title {
font-size: 15px; font-weight: 600;
color: #1e2026;
display: flex; align-items: center; gap: 8px;
margin-bottom: 4px;
}
.mm-mod-desc {
font-size: 12.5px;
color: #5b606b;
line-height: 1.5;
/* Reserva SEMPRE 2 linhas (3em = 2 × line-height) e limita a no máximo 2.
Assim todos os cards do mega-menu ficam com a MESMA altura, tenha a
descrição 1 ou 2 linhas — nada de card crescendo por causa do texto. */
min-height: 3em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mm-tag {
background: #d8f5e6;
color: #16a34a;
font-size: 10px; font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Variante "Em breve" — laranja/âmbar pra diferenciar de "NOVO" verde */
.mm-tag-soon {
background: #fef3c7;
color: #b45309;
}
/* Recursos cards — mesma sensação de hover (zoom suave + tilt 3D via JS) */
.mm-card {
background: #fff;
border: 1px solid #eef1f6;
border-radius: 16px;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 2px 6px rgba(30, 32, 38, 0.04);
transform-style: preserve-3d;
will-change: transform, opacity;
/* Estado inicial do surgimento — o JS adiciona .is-revealed em cascade
(direita → esquerda) quando o painel "Recursos" abre. */
opacity: 0;
transform: translateY(12px) scale(0.97);
transition:
transform .45s cubic-bezier(.16, 1, .3, 1),
opacity .4s cubic-bezier(.16, 1, .3, 1),
box-shadow .35s cubic-bezier(.16, 1, .3, 1),
border-color .25s ease;
}
.mm-card.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
.mm-card.is-revealed:hover {
transform: translateY(-6px) scale(1.035);
border-color: rgba(27, 191, 93, 0.35);
box-shadow:
0 28px 50px rgba(30, 32, 38, 0.14),
0 8px 18px rgba(30, 32, 38, 0.06);
}
@media (prefers-reduced-motion: reduce) {
.mm-card {
opacity: 1;
transform: none;
transition: none;
}
}
.mm-illo { width: 100%; height: 130px; display: block; }
/* Variante mm-illo com a logo Meta Partner centralizada em fundo azul claro */
.mm-illo-meta {
background: #e7f0fd;
display: grid;
place-items: center;
padding: 22px;
overflow: hidden;
}
.mm-illo-meta img {
max-width: 80%;
max-height: 70%;
width: auto;
height: auto;
display: block;
}
.mm-card-body { padding: 18px 20px 22px; }
.mm-card h4 { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: #1e2026; }
.mm-card p { font-size: 12.5px; color: #5b606b; line-height: 1.55; margin: 0; }
/* === DEMO MODAL === */
.evo-demo-overlay {
position: fixed;
inset: 0;
background: rgba(15,17,23,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 200;
opacity: 0;
pointer-events: none;
display: grid; place-items: center;
padding: 32px 20px;
transition: opacity .25s;
}
.evo-demo-overlay.is-open { opacity: 1; pointer-events: auto; }
.evo-demo-card {
position: relative;
max-width: 1080px;
width: 100%;
max-height: 90vh;
background: #fff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 40px 80px rgba(0,0,0,0.4);
transform: scale(0.96) translateY(8px);
transition: transform .35s cubic-bezier(.2,.8,.2,1);
display: flex;
flex-direction: column;
}
.evo-demo-overlay.is-open .evo-demo-card { transform: scale(1) translateY(0); }
.evo-demo-close {
position: absolute;
top: 16px; right: 16px;
z-index: 5;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
display: grid; place-items: center;
color: #1e2026;
border: 1px solid rgba(255,255,255,0.5);
cursor: pointer;
transition: background-color .2s;
}
.evo-demo-close:hover { background: #fff; }
.evo-demo-close svg { width: 18px; height: 18px; }
.evo-demo-grid {
display: grid;
grid-template-columns: 0.85fr 1.1fr;
min-height: 540px;
flex: 1;
overflow: hidden;
}
.evo-demo-pitch {
background: linear-gradient(160deg, #2dd874 0%, #1bbf5d 60%, #16a34a 100%);
color: #fff;
padding: 56px 48px;
display: flex; flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.evo-demo-pitch::before {
content: "";
position: absolute;
inset: -50%;
background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.18), transparent 50%);
pointer-events: none;
}
.evo-demo-pitch h2 {
font-size: clamp(24px, 5.4vw, 42px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
color: #1e2026;
margin: 0 0 18px;
position: relative;
}
.evo-demo-pitch p {
font-size: 14.5px;
line-height: 1.55;
color: #1e2026;
opacity: 0.85;
margin: 0 0 32px;
max-width: 36ch;
position: relative;
}
.evo-demo-pills {
display: flex; flex-wrap: wrap; gap: 10px;
position: relative;
}
.evo-demo-pill {
display: inline-flex; align-items: center; gap: 8px;
background: #fff;
padding: 10px 18px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.evo-demo-pill svg { width: 18px; height: 18px; }
.evo-demo-pill.p-crm { color: #1bbf5d; }
.evo-demo-pill.p-multi { color: #2563eb; }
.evo-demo-pill.p-mon { color: #f59e0b; }
.evo-demo-pill.p-flux { color: #0ea5b7; }
.evo-demo-pill.p-ia { color: #7c6bf5; }
.evo-demo-pill.p-camp { color: #ec4899; }
.evo-demo-form {
padding: 48px 56px;
overflow-y: auto;
display: flex; flex-direction: column;
justify-content: center;
}
.evo-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 22px;
}
.evo-form-field { display: flex; flex-direction: column; gap: 6px; }
.evo-form-field span {
font-size: 13px;
color: #1e2026;
font-weight: 500;
}
.evo-form-field span em { color: #ef4444; font-style: normal; }
.evo-form-field input,
.evo-form-field select {
font-family: inherit;
font-size: 13.5px;
padding: 11px 14px;
border-radius: 8px;
border: 1px solid #e3e6eb;
background: #fff;
color: #1e2026;
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.evo-form-field input:focus,
.evo-form-field select:focus {
border-color: #1bbf5d;
box-shadow: 0 0 0 3px rgba(27,191,93,0.15);
}
.evo-form-field input::placeholder { color: #b1b5bd; }
.evo-form-field .is-invalid,
.evo-form-field input.is-invalid,
.evo-form-field select.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }
.evo-form-submit {
margin-top: 28px;
background: #1bbf5d;
color: #fff;
padding: 14px 28px;
border-radius: 999px;
font-family: inherit;
font-size: 14.5px;
font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
cursor: pointer;
transition: background-color .2s, transform .2s;
}
.evo-form-submit:hover { background: #16a34a; transform: translateY(-1px); }
.evo-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.evo-form-submit svg { width: 18px; height: 18px; }
.evo-form-success {
margin-top: 16px;
padding: 14px 16px;
border-radius: 10px;
background: #d8f5e6;
color: #16a34a;
font-size: 13.5px;
font-weight: 500;
display: none;
align-items: center; gap: 10px;
}
.evo-form-success.is-shown { display: flex; }
.evo-form-check {
width: 22px; height: 22px;
border-radius: 50%;
background: #1bbf5d;
color: #fff;
display: grid; place-items: center;
font-size: 13px; font-weight: 700;
}
@media (max-width: 820px) {
.evo-nav-links { display: none; }
/* Esconde SÓ o botão demo da NAVBAR no mobile (dá lugar ao hamburger).
Escopo `.evo-nav` é essencial: o CTA do drawer também é `.evo-btn-pri` e
NÃO pode ser escondido. Especificidade 0,2,0 já vence o `.evo-btn-pri--flip`
(0,1,0, definido depois) que reativava o display — sem precisar !important. */
.evo-nav .evo-btn-pri { display: none; }
.evo-demo-grid { grid-template-columns: 1fr; }
.evo-demo-pitch { padding: 36px 28px; }
.evo-demo-form { padding: 32px 28px; }
.evo-form-grid { grid-template-columns: 1fr; }
.mm-grid-6, .mm-grid-3, .mm-grid-solucoes, .mm-grid-funcoes { grid-template-columns: 1fr 1fr; }
}
/* Mobile pequeno (<480px) — modal de demo precisa de padding bem mais compacto
pra não estourar viewport. h2 já usa clamp(), grid já é 1col em 820px. */
@media (max-width: 480px) {
.evo-demo-pitch { padding: 24px 20px; }
.evo-demo-form { padding: 20px 18px; }
.evo-form-grid { gap: 12px 16px; }
.evo-demo-pitch p { margin-bottom: 20px; font-size: 13.5px; }
}
/* ===================================================================
HAMBURGER + MOBILE DRAWER — só renderiza em ≤820px.
Drawer é full-screen sliding from right, com accordion ()
pros agrupamentos. Touch-friendly (44px tap targets, fontes 16px+).
=================================================================== */
.evo-md-toggle {
display: none;
appearance: none;
background: transparent;
border: 0;
width: 44px; height: 44px;
cursor: pointer;
padding: 0;
position: relative;
flex-direction: column;
align-items: center; justify-content: center;
gap: 5px;
z-index: 110;
border-radius: 12px;
transition: background-color .2s;
}
.evo-md-toggle:active { background: rgba(30, 32, 38, 0.06); }
.evo-md-toggle span {
display: block;
width: 22px; height: 2px;
background: #1e2026;
border-radius: 2px;
transition: transform .35s cubic-bezier(.2, .9, .3, 1), opacity .25s ease;
transform-origin: center;
}
.evo-md-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.evo-md-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.evo-md-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 820px) {
.evo-md-toggle { display: inline-flex; }
}
/* === Drawer ===
Glass effect: fundo semi-transparente + blur pra mostrar o site por trás.
Sem cobertura total como antes (white opaco). */
.evo-md-drawer {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
z-index: 95;
opacity: 0;
pointer-events: none;
transform: translateX(8%);
transition:
opacity .35s cubic-bezier(.2, .9, .3, 1),
transform .45s cubic-bezier(.2, .9, .3, 1);
display: flex;
flex-direction: column;
-webkit-overflow-scrolling: touch;
}
.evo-md-drawer.is-open {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.evo-md-scrollarea {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 110px 20px 32px;
display: flex;
flex-direction: column;
gap: 6px;
overscroll-behavior: contain;
}
/* X de fechar do drawer — canto superior direito, ~na posição do hamburger.
Fica DENTRO do drawer (que cobre o header z-60 com z-95), então é o jeito
de fechar quando o hamburger fica oculto. */
.evo-md-close {
position: absolute;
top: 24px;
right: 20px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0;
border-radius: 12px;
color: #1e2026;
cursor: pointer;
z-index: 3;
-webkit-tap-highlight-color: transparent;
transition: background-color .2s ease, transform .2s ease;
}
.evo-md-close:active { background: rgba(30, 32, 38, 0.06); transform: scale(.9); }
.evo-md-close svg { width: 22px; height: 22px; }
/* Accordion ( nativo) */
.evo-md-group {
border-bottom: 1px solid var(--evo-border-soft, #eef1f6);
}
.evo-md-group > summary {
list-style: none;
cursor: pointer;
padding: 18px 8px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 17px;
font-weight: 600;
color: #1e2026;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.evo-md-group > summary::-webkit-details-marker { display: none; }
.evo-md-group > summary:active { background: var(--evo-off-white, #f6f7fa); margin: 0 -8px; padding: 18px 16px; }
.evo-md-caret {
width: 12px; height: 8px;
transition: transform .4s cubic-bezier(.34, 1.2, .5, 1);
flex-shrink: 0;
}
.evo-md-group[open] .evo-md-caret { transform: rotate(180deg); }
/* === Accordion com altura ANIMADA suave (max-height + opacity + transform) ===
Trick: força o conteúdo a renderizar mesmo quando não tem [open]
(UA esconde com display:none via shadow DOM). !important no display vence
o UA. Controla altura via max-height: 0 → grande + fade + slide-up sutil.
Cards internos cascateiam via --i (set inline pelo JS). */
.evo-md-sub {
display: flex !important; /* override UA "details closed hides children" */
flex-direction: column;
gap: 2px;
max-height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
transition:
max-height .42s cubic-bezier(.22, 1, .36, 1),
opacity .28s ease-out,
transform .42s cubic-bezier(.22, 1, .36, 1),
padding .42s cubic-bezier(.22, 1, .36, 1);
}
.evo-md-mini-grid {
display: grid !important; /* override UA hide + preserve grid */
grid-template-columns: 1fr 1fr;
gap: 8px;
max-height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
transition:
max-height .42s cubic-bezier(.22, 1, .36, 1),
opacity .28s ease-out,
transform .42s cubic-bezier(.22, 1, .36, 1),
padding .42s cubic-bezier(.22, 1, .36, 1);
}
.evo-md-group[open] > .evo-md-sub {
max-height: 600px;
padding: 4px 0 12px;
opacity: 1;
transform: translateY(0);
}
.evo-md-group[open] > .evo-md-mini-grid {
max-height: 900px; /* generoso pra acomodar Soluções (segmentos + cenários) */
padding: 12px 0 16px;
opacity: 1;
transform: translateY(0);
}
/* Cards internos com cascata sutil ao abrir — cada um entra com pequeno delay */
.evo-md-group[open] > .evo-md-mini-grid > .evo-md-mini {
animation: mdMiniIn .45s cubic-bezier(.22, 1, .36, 1) backwards;
animation-delay: calc(var(--i, 0) * 24ms + 80ms);
}
@keyframes mdMiniIn {
from { opacity: 0; transform: translateY(8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Label de subseção dentro do grid mobile (Canais / Cenários / Segmentos).
Ocupa ambas as colunas via grid-column: 1/-1 — vira "header" inline
sem precisar quebrar o grid em wrappers extras. */
.evo-md-mini-label {
grid-column: 1 / -1;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(30, 32, 38, 0.45);
padding: 0 4px;
margin-top: 14px;
margin-bottom: -2px;
}
.evo-md-mini-label:first-child {
margin-top: 4px;
}
.evo-md-mini {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--evo-border-soft, #eef1f6);
border-radius: 12px;
color: var(--evo-text, #1e2026);
font-size: 13px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 6px rgba(30, 32, 38, 0.04);
transition: transform .15s ease, box-shadow .25s ease, border-color .2s;
}
.evo-md-mini:active {
transform: scale(0.96);
box-shadow: 0 4px 12px rgba(30, 32, 38, 0.08);
border-color: rgba(27, 191, 93, 0.35);
}
.evo-md-mini-ico {
width: 32px;
height: 32px;
border-radius: 9px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.evo-md-mini-ico .ico {
width: 16px;
height: 16px;
}
.evo-md-mini-lbl {
font-weight: 500;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.evo-md-link {
padding: 13px 18px;
color: var(--evo-text-soft, #5b606b);
font-size: 15px;
text-decoration: none;
border-radius: 10px;
-webkit-tap-highlight-color: transparent;
transition: background-color .15s;
}
.evo-md-link:active { background: var(--evo-off-white, #f6f7fa); color: #1e2026; }
.evo-md-link-solo {
border-bottom: 1px solid var(--evo-border-soft, #eef1f6);
padding: 18px 8px;
font-size: 17px;
font-weight: 600;
color: #1e2026;
border-radius: 0;
}
.evo-md-cta {
appearance: none;
border: 0;
cursor: pointer;
margin-top: 24px;
background: var(--evo-green, #1bbf5d);
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 16px 22px;
border-radius: 14px;
box-shadow: 0 10px 24px rgba(27, 191, 93, 0.32);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
transition: transform .2s, box-shadow .25s;
}
.evo-md-cta:active {
transform: scale(0.97);
box-shadow: 0 4px 12px rgba(27, 191, 93, 0.2);
}
/* No-scroll do body quando drawer aberto — feito via JS, este é fallback */
body:has(.evo-md-drawer.is-open) { overflow: hidden; }
/* Desktop: drawer não aparece, hamburger não aparece */
@media (min-width: 821px) {
.evo-md-drawer { display: none; }
}
/* ╭───────────────────────────────────────────────────────────────────╮
│ MODO BLOG — header verde com logo EvoBlog, animação de entrada │
│ Ativado pelo JS via .is-blog-mode quando URL bate /blog ou │
│ /materiais-ricos. Camada extra (.is-blog-entering) anima a varrida │
│ verde da esquerda pra direita. .is-blog-leaving roda o reverso. │
╰───────────────────────────────────────────────────────────────────╯ */
/* Header em estado blog mode — fundo já verde-claro, mas a "tinta" verde
sólida é desenhada por um ::before que faz scaleX(0→1) à esquerda. */
.evo-header.is-blog-mode {
/* Border quase invisível pra não destacar da varredura */
border: 1px solid rgba(255, 255, 255, 0.15);
/* O fundo BASE continua branco translúcido pra a varredura ser visível */
background: rgba(255, 255, 255, 0.78);
position: fixed;
overflow: hidden;
}
.evo-header.is-blog-mode::before {
content: '';
position: absolute;
inset: 0;
/* Verde sólido — sem transparência nem glass */
background: linear-gradient(135deg, #1bbf5d 0%, #16a34a 100%);
transform-origin: left center;
transform: scaleX(0);
transition: transform .7s cubic-bezier(.22, 1, .36, 1) .15s;
z-index: 0;
border-radius: inherit;
}
/* Modo "navegação interna do blog" — sem animação, estado final direto */
.evo-header.is-blog-instant,
.evo-header.is-blog-instant *,
.evo-header.is-blog-instant::before {
transition: none !important;
animation: none !important;
}
.evo-header.is-blog-mode.is-blog-entering::before {
transform: scaleX(1);
}
.evo-header.is-blog-mode.is-blog-leaving::before {
transform-origin: right center;
transform: scaleX(0);
transition: transform .55s cubic-bezier(.5, 0, .8, 0);
}
/* === Veio de página do BLOG → header já nasce VERDE direto, ZERO flash. ===
Classe `evo-from-blog` é adicionada no pelo inline script em
partials/seo.php ANTES do body parsear. Aqui força o overlay verde em
scaleX(1), os links brancos, e o flip de logo/botão no estado final,
tudo SEM TRANSITION — primeiro paint já é o estado verde completo.
IMPORTANTE: NÃO aplica quando o header está em `.is-blog-leaving`
(saída animada) — senão o `!important` aqui bloqueia a animação de
saída ao clicar em "EvoTalks" / "Faça uma demonstração". */
html.evo-from-blog .evo-header.is-blog-mode:not(.is-blog-leaving)::before {
transform: scaleX(1) !important;
transition: none !important;
}
html.evo-from-blog .evo-header.is-blog-mode:not(.is-blog-leaving) .evo-nav-link {
color: rgba(255, 255, 255, 0.92) !important;
transition: none !important;
}
html.evo-from-blog .evo-header.is-blog-mode:not(.is-blog-leaving) .evo-logo-face--front {
transform: rotateX(180deg) !important;
transition: none !important;
}
html.evo-from-blog .evo-header.is-blog-mode:not(.is-blog-leaving) .evo-logo-face--back {
transform: rotateX(0deg) !important;
transition: none !important;
}
html.evo-from-blog .evo-header.is-blog-mode:not(.is-blog-leaving) .evo-btn-face--front {
transform: rotateX(180deg) !important;
transition: none !important;
}
html.evo-from-blog .evo-header.is-blog-mode:not(.is-blog-leaving) .evo-btn-face--back {
transform: rotateX(0deg) !important;
transition: none !important;
}
/* === Chegada no MODO NORMAL vinda do blog. Quando o referrer é blog,
o inline script no seo.php adiciona `evo-from-blog` no ANTES do
primeiro paint — então o CSS abaixo aplica o estado INICIAL (estado
blog) já no first paint, ZERO snap visual. Depois de 2 rAF, o JS
adiciona `.has-arrived-from-blog` no header pra disparar a TRANSITION
pro estado normal (overlay verde retrai + logos/botão flipam de volta).
=== */
/* ESTADO INICIAL — header normal nasce em "estado blog" via CSS puro.
Só ativa em modo NORMAL (não-is-blog-mode) E vindo do blog. */
html.evo-from-blog .evo-header:not(.is-blog-mode) {
overflow: hidden;
}
html.evo-from-blog .evo-header:not(.is-blog-mode)::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1bbf5d 0%, #16a34a 100%);
/* transform-origin LEFT — overlay retrai PRA ESQUERDA (parte direita
desaparece primeiro, verde "vai embora" pela esquerda). */
transform-origin: left center;
transform: scaleX(1);
transition: transform 1.05s cubic-bezier(.22, 1, .36, 1) .15s;
z-index: 0;
border-radius: inherit;
pointer-events: none;
}
/* Conteúdo flutua acima do overlay */
html.evo-from-blog .evo-header:not(.is-blog-mode) .container,
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-nav,
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-logo,
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-nav-links,
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-btn-pri {
position: relative;
z-index: 1;
}
/* ESTADO INICIAL — transition DESLIGADA pra logo EvoBlog, botão branco
e links blog aparecerem INSTANTANEAMENTE no primeiro paint (estado
blog completo). Quando JS adiciona .has-arrived-from-blog, a regra
desativa e a curva suave assume pra o flip animado. */
html.evo-from-blog .evo-header:not(.is-blog-mode):not(.has-arrived-from-blog) .evo-logo-face,
html.evo-from-blog .evo-header:not(.is-blog-mode):not(.has-arrived-from-blog) .evo-btn-face,
html.evo-from-blog .evo-header:not(.is-blog-mode):not(.has-arrived-from-blog) .evo-nav-links-face {
transition: none !important;
}
/* DURANTE A ANIMAÇÃO (com .has-arrived-from-blog) — curva suave longa,
sincronizada com o overlay (~1s total, mesma curva). */
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-logo-face,
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-btn-face,
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-nav-links-face {
transition: transform 1s cubic-bezier(.22, 1, .36, 1) .25s !important;
}
/* Logo: EvoBlog visível (back), EvoTalks atrás (front) */
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-logo-face--front {
transform: rotateX(180deg);
}
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-logo-face--back {
transform: rotateX(0deg);
}
/* Botão: face branca visível (back), verde atrás (front) */
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-btn-face--front {
transform: rotateX(180deg);
}
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-btn-face--back {
transform: rotateX(0deg);
}
/* Nav links: flip 3D — face BACK (links blog) começa visível, FRONT
(links normais) atrás. Quando JS adiciona .has-arrived-from-blog,
o flip rola e os links normais voltam pra frente. */
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-nav-links-face--front {
transform: rotateX(180deg);
}
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-nav-links-face--back {
transform: rotateX(0deg);
}
/* ESTADO FINAL (animado) — JS adiciona .has-arrived-from-blog no header
2 rAFs após o boot pra disparar a transition pro estado normal. */
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog::before {
transform: scaleX(0);
}
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-logo-face--front {
transform: rotateX(0deg);
}
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-logo-face--back {
transform: rotateX(-180deg);
}
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-btn-face--front {
transform: rotateX(0deg);
}
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-btn-face--back {
transform: rotateX(-180deg);
}
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-nav-links-face--front {
transform: rotateX(0deg);
}
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-nav-links-face--back {
transform: rotateX(-180deg);
}
/* Cor dos textos transita de branco (sobre verde) pra cinza (sobre branco)
SINCRONIZADA com a retração do overlay — simula o verde "saindo" e
despintando o texto. */
html.evo-from-blog .evo-header:not(.is-blog-mode) .evo-nav-links-face--back .evo-nav-link {
transition: color .7s cubic-bezier(.22, 1, .36, 1) .15s;
}
html.evo-from-blog .evo-header:not(.is-blog-mode).has-arrived-from-blog .evo-nav-links-face--back .evo-nav-link {
color: #5b606b;
}
/* Todo conteúdo dentro precisa flutuar acima do ::before */
.evo-header.is-blog-mode .container,
.evo-header.is-blog-mode .evo-nav,
.evo-header.is-blog-mode .evo-logo,
.evo-header.is-blog-mode .evo-nav-links,
.evo-header.is-blog-mode .evo-btn-pri,
.evo-header.is-blog-mode .evo-md-toggle {
position: relative;
z-index: 1;
}
/* Em blog mode, a FACE FRONT do nav-links é os links blog (brancos
sobre fundo verde). A FACE BACK é os links normais (escondida, gira
na transição). */
.evo-header.is-blog-mode .evo-nav-links-face--front .evo-nav-link {
color: rgba(255, 255, 255, 0.92);
transition: color .2s ease, background-color .25s ease;
}
.evo-header.is-blog-mode .evo-nav-links-face--back .evo-nav-link {
/* Face escondida no blog — cor cinza igual aos links do site normal */
color: #5b606b;
}
.evo-header.is-blog-mode .evo-nav-links-face--front .evo-nav-link:hover,
.evo-header.is-blog-mode .evo-nav-links-face--front .evo-nav-link.is-active {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
/* Header NORMAL — face FRONT é os links normais (cinza padrão).
Face BACK é os links blog (cor branca pra aparecer no overlay verde
durante chegada vinda do blog). */
.evo-header:not(.is-blog-mode) .evo-nav-links-face--back .evo-nav-link {
color: rgba(255, 255, 255, 0.92);
}
/* Botão "Faça uma demonstração" — dual-face com flip 3D, igual ao logo.
Wrapper fica transparente; as 2 faces têm dimensão e estilo próprio.
Front (verde→branco) é o estado normal; back (branco→verde) só aparece
em blog mode após o flip. */
.evo-btn-pri--flip {
position: relative;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border: none;
perspective: 700px;
cursor: pointer;
/* Garante área de clique = tamanho da maior face */
display: inline-block;
}
.evo-btn-face {
display: inline-block;
padding: 12px 22px;
border-radius: 10px;
font-family: inherit;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform .85s cubic-bezier(.5, 0, .2, 1) .25s;
white-space: nowrap;
pointer-events: none; /* clique vai pro