:root {
--bg:#ffffff;
--bg-soft:#f6f7fb;
--bg-card:#ffffff;
--ink:#0a1929;
--text-muted:#5c6b7f;
--text-soft:#33445a;
--primary:#bd8c1e;
--primary-hover:#a1750f;
--primary-soft:#f1cb57;
--primary-glow:rgba(189,140,30,.16);
/* Tons mais escuros que --primary/--primary-hover, usados como cor de
TEXTO pequeno sobre fundo claro (tag, botão outline) — só eles batem
4.5:1 (WCAG AA) nesse contexto; --primary/--primary-hover ficam entre
3:1 e 4.1:1. Botão cheio resolve diferente: texto --ink sobre o
dourado claro original, que dá contraste ainda maior sem escurecer o
dourado da marca. */
--primary-deep:#8a660d;
--primary-deeper:#6b4d0a;
--whatsapp:#25d366;
--border:rgba(10,25,41,.12);
--border-soft:rgba(10,25,41,.07);
--shadow:0 20px 50px rgba(10,25,41,.08);
--shadow-gold:0 12px 32px rgba(189,140,30,.18);
--radius:20px;
--radius-lg:28px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Toda a escala do site está em rem, então a base fica aqui, no html —
subir o font-size do body não mexeria em nada que já declara rem.
17.5px em vez dos 16px padrão levanta a página inteira ~9% mantendo
a hierarquia relativa que já estava desenhada. */
html{font-size:17.5px;scroll-behavior:smooth}
@media(max-width:600px){html{font-size:16.5px}}
body{
background:var(--bg);
color:var(--ink);
line-height:1.65;
font-family:'Inter',system-ui,sans-serif;
-webkit-font-smoothing:antialiased;
overflow-x:hidden
}
h1,h2,h3,.logo,.btn{font-family:'Plus Jakarta Sans',system-ui,sans-serif}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,92%);margin:0 auto}
/* ── HEADER ── */
header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.92);
border-bottom:1px solid var(--border);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px)
}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:16px 0;gap:20px}
/* O símbolo é o logo oficial recortado com o fundo removido, então funciona
tanto sobre o branco do cabeçalho quanto sobre o azul do rodapé. */
.logo{
display:flex;align-items:center;gap:11px;
color:var(--primary);font-size:1.55rem;font-weight:800;letter-spacing:.5px;
line-height:1
}
.logo-mark{width:40px;height:auto;flex-shrink:0}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-sub{color:var(--text-muted);font-size:.65rem;letter-spacing:2.5px;margin-top:4px;font-family:'Inter',sans-serif;font-weight:500}
nav{display:flex;gap:6px;align-items:center}
nav a{
color:var(--text-muted);font-size:.88rem;font-weight:500;
padding:7px 12px;border-radius:8px;transition:.25s
}
nav a:hover{color:var(--ink);background:rgba(10,25,41,.05)}
.btn-cliente{
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:999px;
border:1.5px solid var(--border);
color:var(--text-muted);
background:var(--bg-soft);
font-size:.83rem;font-weight:600;
font-family:'Plus Jakarta Sans',sans-serif;
white-space:nowrap;transition:.25s
}
.btn-cliente:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-glow)}
.btn-cliente-mobile{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:8px;padding:12px;border-radius:12px;
border:1.5px solid var(--border);
color:var(--text-muted);background:var(--bg-soft);
font-size:.92rem;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;
transition:.25s
}
.btn-cliente-mobile:hover{border-color:var(--primary);color:var(--primary)}
/* hamburger */
.nav-toggle{
display:none;flex-direction:column;gap:5px;cursor:pointer;
background:none;border:none;padding:6px
}
.nav-toggle span{
display:block;width:22px;height:2px;
background:var(--text-muted);border-radius:2px;transition:.3s
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{
display:none;
flex-direction:column;
gap:2px;
padding:12px 0 18px;
border-top:1px solid var(--border-soft)
}
.mobile-nav a{
color:var(--text-soft);font-size:.95rem;font-weight:500;
padding:11px 4px;border-bottom:1px solid var(--border-soft)
}
.mobile-nav a:last-child{border-bottom:none}
/* ── MEGA MENU (Segmentos) ── */
.nav-item-mega{position:relative}
.nav-mega-trigger{
display:inline-flex;align-items:center;gap:4px;
color:var(--text-muted);font-size:.88rem;font-weight:500;
padding:7px 12px;border-radius:8px;transition:.25s;
background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif
}
.nav-mega-trigger:hover{color:var(--ink);background:rgba(10,25,41,.05)}
.nav-mega-trigger svg{transition:transform .25s}
.nav-item-mega.open .nav-mega-trigger{color:var(--ink);background:rgba(10,25,41,.05)}
.nav-item-mega.open .nav-mega-trigger svg{transform:rotate(180deg)}
.mega-menu{
display:none;
position:absolute;top:calc(100% + 14px);left:50%;
transform:translateX(-50%);
width:660px;max-width:90vw;
background:#fff;border-radius:20px;
box-shadow:0 30px 60px rgba(10,25,41,.18);
border:1px solid var(--border-soft);
overflow:hidden;
z-index:60
}
.nav-item-mega.open .mega-menu{display:block}
.mega-menu-inner{display:grid;grid-template-columns:220px 1fr}
.mega-menu-list{
background:var(--bg-soft);
padding:18px 12px;
display:flex;flex-direction:column;gap:2px;
border-right:1px solid var(--border-soft)
}
.mega-menu-list-title{
font-size:.7rem;font-weight:800;letter-spacing:.6px;
text-transform:uppercase;color:var(--text-muted);
padding:6px 10px 10px;font-family:'Plus Jakarta Sans',sans-serif
}
.mega-menu-item{
display:flex;align-items:center;gap:10px;
padding:10px;border-radius:12px;width:100%;
background:none;border:none;text-align:left;cursor:pointer;
color:var(--ink);transition:.2s
}
/* O hover agora é o único aviso de "isso é clicável" (a troca do painel só
acontece no clique), então precisa ser percebido: fundo mais firme e um
leve deslocamento. O item ativo continua com o dourado e vence o hover. */
.mega-menu-item:hover{background:rgba(10,25,41,.07);transform:translateX(2px)}
.mega-menu-item:focus-visible{
outline:2px solid var(--primary);
outline-offset:-2px
}
.mega-menu-item.active{background:var(--primary-glow);transform:none}
.mega-menu-item-icon{font-size:1.15rem;flex-shrink:0}
.mega-menu-item-title{display:block;font-size:.86rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;line-height:1.25}
.mega-menu-item-desc{display:block;font-size:.72rem;color:var(--text-muted);margin-top:1px}
.mega-menu-panel{padding:24px}
.mega-menu-panel-content{display:none}
.mega-menu-panel-content.active{display:block}
.mega-menu-panel-content h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;color:var(--ink);margin-bottom:14px}
.mega-menu-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.mega-feature{
display:flex;align-items:center;gap:10px;
padding:10px 12px;border-radius:12px;
border:1px solid var(--border-soft);background:var(--bg-soft);
color:var(--text-soft);font-size:.84rem;font-weight:600;
transition:.2s
}
.mega-feature:hover{border-color:rgba(189,140,30,.4);background:var(--primary-glow);color:var(--primary-hover)}
.mega-feature span{font-size:1rem;flex-shrink:0}
.mega-menu-cta{width:100%;padding:12px;font-size:.88rem}
@media(max-width:980px){
.mega-menu{display:none!important}
}
/* ── BUTTONS ── */
.btn{
display:inline-flex;justify-content:center;align-items:center;gap:8px;
padding:14px 26px;border-radius:999px;border:none;
cursor:pointer;font-weight:700;font-size:.95rem;
font-family:'Plus Jakarta Sans',sans-serif;
transition:all .25s;letter-spacing:.2px;
white-space:nowrap
}
.btn-primary{
background:linear-gradient(135deg,var(--primary-soft),var(--primary));
color:var(--ink);
box-shadow:0 6px 20px rgba(189,140,30,.28)
}
.btn-primary:hover{
background:linear-gradient(135deg,var(--primary),var(--primary-soft));
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(189,140,30,.4)
}
.btn-outline{
border:1.5px solid var(--primary);
color:var(--primary-deeper);background:var(--primary-glow)
}
.btn-outline:hover{background:rgba(189,140,30,.14);transform:translateY(-2px)}
.btn-whatsapp{
background:linear-gradient(135deg,#25d366,#1da851);
color:white;
box-shadow:0 6px 20px rgba(37,211,102,.28)
}
.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,211,102,.4)}
/* GSAP assume o movimento no hover quando carrega (ver assets/site.js);
a regra acima continua sendo o fallback caso o GSAP falhe ao carregar. */
body.js-gsap-hover .btn:hover{transform:none}
/* ── HERO ENTRANCE (GSAP) ──
.gsap-pending é adicionada por um script inline no topo do de cada
página, antes do hero renderizar, então os elementos já nascem ocultos sem
piscar. Se o JS estiver desativado essa classe nunca é criada e o conteúdo
some do CSS, ficando visível normalmente. Se o GSAP falhar ou o usuário
preferir menos movimento, assets/site.js remove a classe e revela tudo. */
html.gsap-pending .hero-anim{opacity:0}
/* ── SECTIONS ── */
section{padding:90px 0}
/* O header é sticky (~70px), então todo alvo de rolagem precisa reservar essa
altura — sem isso o topo do elemento para embaixo do header, tanto nos links
"#sobre/#contato" quanto no scrollIntoView do formulário e do painel de
acesso. scroll-margin só tem efeito quando o elemento é alvo de rolagem,
então não afeta o layout normal. */
section[id],
#topo,
#formulario,
#dadosAcessoPrincipal{scroll-margin-top:90px}
/* ── HERO (faixa escura — o resto do site continua claro) ── */
.hero{
padding:96px 0 72px;
position:relative;
overflow:hidden;
background:
radial-gradient(ellipse 70% 55% at 50% 0%,rgba(212,175,55,.16),transparent),
linear-gradient(160deg,#071425 0%,#050f1f 60%,#030a16 100%)
}
.hero::before{
content:'';
position:absolute;inset:0;
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events:none;opacity:.6
}
/* ── CONSTELAÇÃO DO HERO ──
O canvas é criado pelo site.js e entra como primeiro filho de .hero.
Fica acima do gradiente de fundo e abaixo do padrão pontilhado do
::before, então os três se somam em vez de um cobrir o outro. */
.hero-constelacao{
position:absolute;inset:0;
width:100%;height:100%;
pointer-events:none;
z-index:0
}
.hero::before{z-index:1}
.hero>.container{position:relative;z-index:2}
.hero-module{padding:72px 0 48px}
.hero-centered-inner{max-width:820px;margin:0 auto;text-align:center;position:relative}
/* ── HERO EM DUAS COLUNAS (home) ──
As páginas de módulo seguem com o hero centralizado. Só a home usa esta
variante: texto à esquerda, formulário à direita. Assim a headline ganha
largura (cabe letra maior) e o cartão de cadastro sobe pra primeira
dobra, em vez de ficar empurrado pra baixo do texto. */
.hero-split-inner{
position:relative;
display:grid;grid-template-columns:1.04fr .96fr;
gap:56px;align-items:center;text-align:left
}
.hero-split-copy{display:flex;flex-direction:column;align-items:flex-start}
/* O clamp global do h1 (5.4vw) foi calibrado pro hero centralizado de 820px.
Numa coluna de ~595px ele pede 756px de linha e quebra o título em quatro,
então aqui a escala é menor — as duas frases cabem uma por linha, como o
pede. O seletor precisa do `.hero` na frente: sozinho ele empata em
especificidade com `.hero h1`, que vem depois no arquivo e venceria. */
.hero .hero-split-inner h1{font-size:clamp(2.05rem,3.5vw,2.85rem)}
.hero-split-inner .hero-lead{margin:0 0 4px;max-width:34em}
.hero-split-inner .quick-card{margin:0;max-width:none}
.hero-split-inner .hero-checklist{
grid-template-columns:1fr;gap:11px;max-width:none;margin:26px 0 0
}
/* O h1 do hero vinha MENOR (máx 3rem) e mais leve (700) que o h1 global
(3.6rem / 800) — ou seja, o título mais importante do site tinha menos
presença que um título de seção interna. Agora ele é o maior de todos. */
.hero h1{
color:#fff;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:clamp(2.2rem,5.4vw,3.75rem);
font-weight:800;
line-height:1.06;
letter-spacing:-.03em;
margin-bottom:18px
}
/* ── DESTAQUE SERIFADO DA HEADLINE ──
O logotipo da TRIAX é um wordmark serifado, mas essa serifa não aparecia
em lugar nenhum do site: o título vinha inteiro numa grotesca geométrica,
o par mais genérico da categoria. Agora a frase em dourado — que já era o
destaque em todas as dez páginas — sai numa serifa de alto contraste, e a
headline passa a ter duas vozes em vez de um peso só.
O :not() poupa a primeira linha da home, que é branca e deve seguir sans.
Como a estrutura do h1 é a mesma nas dez páginas, isto vale para todas
sem tocar em nenhuma marcação. O 1.06em compensa a serifa parecer menor
que a grotesca no mesmo corpo, e o tracking afrouxa porque letra
serifada de alto contraste sufoca no -.03em do título. */
.hero h1 span{color:#f1cb57}
.hero h1 span:not(.hero-line-big){
font-family:'Bodoni Moda',Georgia,'Times New Roman',serif;
font-weight:700;
font-size:1.06em;
letter-spacing:-.005em
}
.hero h1 .hero-line-big{color:#fff}
.hero p,.hero .hero-lead{color:#b9c7dc}
.hero .badge{
border-color:rgba(255,255,255,.22);
color:#f1cb57;
background:rgba(255,255,255,.06)
}
.hero .badge::before{background:#f1cb57}
.hero-lead{
font-size:clamp(1.14rem,1.6vw,1.34rem);
line-height:1.6;
max-width:580px;
margin:0 auto 8px
}
.hero-actions-center{justify-content:center}
.hero .btn-outline{
border-color:#f1cb57;
color:#f1cb57;
background:rgba(241,203,87,.1)
}
.hero .btn-outline:hover{background:rgba(241,203,87,.18)}
/* ── QUICK CARD (hero da home: só WhatsApp, sem formulário extenso) ── */
.quick-card{
background:#fff;
border-radius:26px;
padding:36px 34px 30px;
max-width:480px;
width:100%;
margin:38px auto 0;
box-shadow:0 30px 70px rgba(0,0,0,.45);
text-align:left;
position:relative;
overflow:hidden
}
/* Mesma faixa dourada do .form-card lá embaixo — os dois formulários do site
passam a se reconhecer como o mesmo componente. */
.quick-card::before{
content:'';
position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,transparent,var(--primary),transparent)
}
.quick-card-tag{
display:inline-flex;align-items:center;gap:6px;
padding:6px 14px;border-radius:999px;
background:rgba(37,177,90,.12);color:#1da851;
font-size:.78rem;font-weight:800;letter-spacing:.4px;
margin-bottom:16px;font-family:'Plus Jakarta Sans',sans-serif
}
.quick-card h3{color:var(--ink);font-size:1.68rem;letter-spacing:-.015em;margin-bottom:6px}
.quick-card p{color:var(--text-muted);font-size:1.08rem;margin-bottom:20px}
.quick-card input{font-size:1.12rem;padding:17px 18px}
.quick-card .btn{width:100%;margin-top:14px;font-size:1.12rem;padding:17px 26px}
.quick-card-trust{
display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft);
font-size:.9rem;color:var(--text-muted)
}
.quick-card-note{
text-align:center;margin-top:8px;
font-size:.9rem;color:var(--primary-hover);font-weight:700
}
.form-group>label{
display:block;color:var(--text-soft);font-weight:600;
font-size:.93rem;margin-bottom:6px
}
.quick-card-success{display:none;text-align:center}
.quick-card-success strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:6px}
.quick-card-success p{margin-bottom:0}
.hero-checklist{
list-style:none;
display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px;
max-width:480px;margin:28px auto 0;text-align:left
}
.hero-checklist li{display:flex;gap:10px;align-items:flex-start;color:#d7e0ee;font-size:1.03rem;line-height:1.45}
.hero-checklist li::before{
content:'✓';flex-shrink:0;
width:16px;height:16px;border-radius:50%;
background:rgba(37,177,90,.2);color:#4ade80;
display:flex;align-items:center;justify-content:center;
font-size:.65rem;font-weight:800;margin-top:2px
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* ── BADGE ── */
.badge{
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;border-radius:999px;
border:1px solid rgba(189,140,30,.35);
color:var(--primary-hover);
background:var(--primary-glow);
margin-bottom:20px;
font-size:.82rem;font-weight:600;
font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.5px
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0}
/* ── TYPOGRAPHY ── */
h1{font-size:clamp(1.9rem,5.5vw,3.6rem);line-height:1.15;margin-bottom:20px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
h1 span,h2 span{color:var(--primary)}
h2{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin-bottom:14px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
p{color:var(--text-muted);line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
/* ── FORM CARD ── */
.form-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:34px;
box-shadow:var(--shadow);
transition:.35s;
position:relative;
overflow:hidden
}
.form-card::before{
content:'';
position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,transparent,var(--primary),transparent)
}
.form-standalone{max-width:760px;margin:0 auto}
.form-card.segmento-agro{background:linear-gradient(145deg,rgba(48,120,70,.06),var(--bg-card))}
.form-card.segmento-food{background:linear-gradient(145deg,rgba(180,92,25,.06),var(--bg-card))}
.form-card.segmento-clinica{background:linear-gradient(145deg,rgba(45,95,160,.06),var(--bg-card))}
.form-card.segmento-pet{background:linear-gradient(145deg,rgba(110,70,160,.06),var(--bg-card))}
.form-card.segmento-salao{background:linear-gradient(145deg,rgba(170,70,130,.06),var(--bg-card))}
.form-card.segmento-agendas{background:linear-gradient(145deg,rgba(50,130,150,.06),var(--bg-card))}
.form-group{margin-bottom:12px}
input,select{
width:100%;padding:13px 16px;
border-radius:12px;
border:1.5px solid var(--border);
background:var(--bg-soft);
color:var(--ink);outline:none;font-size:.93rem;
font-family:'Inter',sans-serif;
transition:.2s
}
/* Anel de foco visível: antes o campo só mudava a borda e ganhava fundo
dourado, que além de indicador fraco deixava o texto sendo digitado sobre
um fundo tingido. Agora o fundo clareia e o anel marca o campo ativo. */
input:focus,select:focus{
border-color:var(--primary);
background:var(--bg);
box-shadow:0 0 0 3px rgba(189,140,30,.2)
}
input::placeholder{color:#8a96a6}
select option{color:var(--ink);background:#fff}
.form-card .btn{width:100%;margin-top:10px;padding:15px;font-size:1rem}
.segment-note{
display:none;margin-bottom:14px;padding:12px 14px;
border-radius:14px;border:1px solid var(--border);
background:var(--bg-soft);color:var(--primary-hover);
font-size:.92rem
}
/* ── SECTION TITLE ── */
.section-title{text-align:center;max-width:680px;margin:0 auto 52px}
.section-title .badge{margin-bottom:14px}
.section-title h2{margin-bottom:12px}
.section-title p{font-size:1.05rem;color:var(--text-muted)}
/* ── TRUST LOGOS ── */
.trust-section{
padding:32px 0;
border-top:1px solid var(--border-soft);
border-bottom:1px solid var(--border-soft);
background:var(--bg-soft)
}
.trust-inner{
display:flex;align-items:center;gap:32px;
flex-wrap:wrap;justify-content:center
}
.trust-label{
color:var(--text-muted);font-size:.78rem;
text-transform:uppercase;letter-spacing:1.5px;
white-space:nowrap;font-weight:600
}
.trust-items{
display:flex;align-items:center;gap:28px;flex-wrap:wrap;
justify-content:center
}
.trust-item{
display:flex;align-items:center;gap:8px;
color:var(--text-soft);font-size:.88rem;font-weight:600;
padding:8px 16px;border-radius:999px;
border:1px solid var(--border);
background:var(--bg)
}
.trust-item span{font-size:1.1rem}
/* ── DEMO SECTION ── */
.demo-section{
background:var(--bg-soft);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border)
}
.video-frame{
width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);
overflow:hidden;border:1px solid var(--border);
background:var(--bg);box-shadow:var(--shadow)
}
/* ── CARDS ── */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
background:var(--bg-card);
border:1px solid var(--border-soft);
border-radius:var(--radius);padding:26px;
transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden;
box-shadow:0 2px 10px rgba(10,25,41,.04)
}
.card::after{
content:'';
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(189,140,30,.05),transparent);
opacity:0;transition:opacity .3s
}
.card:hover{transform:translateY(-5px);border-color:rgba(189,140,30,.35);box-shadow:var(--shadow-gold)}
.card:hover::after{opacity:1}
.icon{font-size:1.7rem;margin-bottom:14px}
.icon svg{width:30px;height:30px;color:var(--primary);display:block}
.card h3{color:var(--ink);margin-bottom:8px;font-size:1.05rem}
.features-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feature-item{
display:flex;gap:12px;align-items:flex-start;
background:var(--bg-soft);
border:1px solid var(--border-soft);
padding:19px;border-radius:16px;color:var(--text-soft);
font-size:.99rem;line-height:1.5
}
.check{
color:var(--primary);font-weight:800;
width:20px;height:20px;border-radius:50%;
background:var(--primary-glow);
display:flex;align-items:center;justify-content:center;
font-size:.75rem;flex-shrink:0;margin-top:1px
}
/* ── FEATURE CATEGORY (páginas de módulo) ── */
.feature-category{
background:var(--bg-card);border:1px solid var(--border-soft);
border-radius:var(--radius);padding:26px;
box-shadow:0 2px 10px rgba(10,25,41,.04)
}
.feature-category h3{
color:var(--primary-hover);font-size:1.05rem;margin-bottom:14px;
display:flex;align-items:center;gap:10px
}
.feature-category ul{list-style:none;display:grid;gap:10px}
.feature-category li{
display:flex;gap:10px;align-items:flex-start;
color:var(--text-soft);font-size:.92rem;line-height:1.5
}
.feature-category li::before{content:'✓';color:var(--primary);font-weight:800;flex-shrink:0}
/* ── SEGMENT CARDS ── */
.segment-card{
background:var(--bg-card);border:1px solid var(--border-soft);
border-radius:var(--radius);padding:28px;transition:transform .3s,box-shadow .3s;position:relative;
box-shadow:0 2px 10px rgba(10,25,41,.04);
display:flex;flex-direction:column
}
.segment-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.segment-card h3{color:var(--ink);margin-bottom:8px;font-size:1.1rem}
.segment-card>p{margin-bottom:16px}
.segment-web,.segment-food,.segment-agro,.segment-clinica,.segment-pet,.segment-agenda{
background:var(--bg-card)
}
.destaque{
position:relative;
border:1px solid rgba(189,140,30,.55)!important;
box-shadow:0 0 0 1px rgba(189,140,30,.1),var(--shadow-gold)
}
.segment-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.segment-tag{
font-size:.74rem;font-weight:700;
color:var(--primary-deeper);
background:var(--primary-glow);
border:1px solid rgba(189,140,30,.3);
padding:5px 11px;border-radius:999px
}
.segment-list{
list-style:none;display:grid;gap:9px;margin:0 0 22px;
color:var(--text-soft);font-size:.96rem
}
.segment-list li{display:flex;align-items:center;gap:8px}
.segment-list li::before{
content:'✓';color:var(--primary);font-weight:800;
flex-shrink:0;font-size:.8rem
}
.segment-card .btn{margin-top:auto}
/* ── CTA ── */
.cta{
background:var(--bg-soft);
text-align:center;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
position:relative;overflow:hidden
}
.cta::before{
content:'';
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:600px;height:600px;
background:radial-gradient(circle,rgba(189,140,30,.08),transparent 70%);
pointer-events:none
}
.cta h2{margin-bottom:12px}
.cta p{max-width:520px;margin:0 auto 28px;font-size:1.05rem}
.access-data{
display:none;margin-top:28px;padding-top:28px;
border-top:1px solid var(--border)
}
.form-card.access-open{
max-width:1120px;
width:100%;
margin:0 auto
}
.form-card.access-open #dadosAcessoPrincipal{
max-width:100%
}
.access-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
flex-wrap:wrap;
margin-bottom:22px
}
.access-header h3{
color:var(--ink);
font-size:1.45rem;
margin-bottom:6px
}
.access-layout{
display:grid;
grid-template-columns:minmax(290px,360px) 1fr;
gap:22px;
align-items:start
}
.access-box{
display:grid;gap:12px;background:var(--bg-soft);
border:1px solid var(--border);
border-top:3px solid var(--primary);
border-radius:22px;padding:22px;
color:var(--text-muted);
position:sticky;
top:100px
}
.access-box h4{
color:var(--ink);
font-size:1.1rem;
margin-bottom:4px
}
.access-credentials{
display:grid;
gap:14px;
background:var(--bg);
border:1px solid var(--border);
border-radius:16px;
padding:18px;
margin-top:6px
}
.cred-row{display:grid;gap:5px}
.cred-label{
font-size:.68rem;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
color:var(--text-muted)
}
/* Rótulo e botão "Copiar" dividem a primeira linha; o valor fica sozinho na
linha de baixo, com a largura toda. Sem isso o botão rouba ~60px e e-mails
longos quebram no meio da palavra. */
.cred-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
min-height:20px
}
/* Monoespaçada de propósito: login e senha são copiados/digitados à mão,
e a fonte mono elimina a ambiguidade entre l/1/I e O/0. */
.cred-value{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.86rem;
font-weight:600;
color:var(--ink);
line-height:1.4;
overflow-wrap:anywhere;
min-width:0
}
a.cred-value{color:var(--ink)}
a.cred-value:hover{color:var(--primary-hover);text-decoration:underline}
.cred-copy{
flex:0 0 auto;
border:1px solid var(--border);
background:var(--bg-soft);
color:var(--text-muted);
border-radius:8px;
padding:5px 10px;
font-size:.7rem;
font-weight:700;
font-family:'Inter',sans-serif;
cursor:pointer;
transition:.2s
}
.cred-copy:hover{border-color:var(--primary);color:var(--primary-hover);background:var(--primary-glow)}
.cred-copy.copiado{border-color:#1da851;color:#1da851;background:rgba(37,177,90,.12)}
.access-box .btn{width:100%;margin-top:8px}
.tutorial-panel{
background:var(--bg-soft);
border:1px solid var(--border);
border-radius:22px;
padding:22px;
min-height:520px
}
.tutorial-panel-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
margin-bottom:18px;
flex-wrap:wrap
}
.tutorial-badge{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--text-soft);
border:1px solid var(--border);
background:var(--bg);
border-radius:999px;
padding:7px 13px;
font-weight:700;
font-size:.8rem;
margin-bottom:10px
}
.tutorial-panel h3{color:var(--ink);font-size:1.35rem;margin-bottom:4px}
.tutorial-toolbar{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
margin-bottom:18px
}
.tutorial-search{
min-width:260px;
flex:1
}
.tutorial-select{
max-width:260px
}
.tutorial-actions{
display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px
}
.tutorial-filter-btn{
border:1px solid var(--border);
background:var(--bg);
color:var(--text-soft);
border-radius:999px;
padding:9px 15px;
font-weight:800;
cursor:pointer;
transition:.25s;
font-size:.84rem
}
/* Estado ativo em azul-escuro, não dourado: o dourado fica reservado só pras
ações principais (entrar no sistema, dar play), então não compete com elas. */
.tutorial-filter-btn:hover{
border-color:var(--ink);
color:var(--ink)
}
.tutorial-filter-btn.active{
background:var(--ink);
border-color:var(--ink);
color:#fff
}
.faq-buttons{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px
}
.faq-video-btn{
width:100%;
min-height:138px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-start;
gap:12px;
padding:18px;
border-radius:18px;
border:1px solid var(--border);
background:var(--bg);
color:var(--ink);
cursor:pointer;
transition:.3s;
text-align:left;
box-shadow:0 2px 8px rgba(10,25,41,.03)
}
.faq-video-btn:hover{
border-color:var(--primary);
transform:translateY(-3px);
box-shadow:0 16px 34px rgba(10,25,41,.12)
}
/* display:block é obrigatório aqui: os dois são gerados pelo JS e,
inline, título e descrição colavam na mesma linha. */
.faq-video-btn .video-title{
display:block;
color:var(--ink);
font-weight:800;
font-size:.92rem;
line-height:1.3;
margin-bottom:5px
}
.faq-video-btn .video-desc{
display:block;
color:var(--text-muted);
font-weight:500;
font-size:.78rem;
line-height:1.45
}
.faq-video-footer{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
gap:10px;
color:var(--text-muted);
font-weight:700;
font-size:.82rem
}
.faq-video-btn:hover .faq-video-footer{color:var(--primary-hover)}
.play-dot{
width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--primary);color:#fff;
flex:0 0 auto;
box-shadow:0 4px 12px rgba(189,140,30,.35)
}
.faq-video-btn.visto{
border-color:rgba(37,177,90,.5);
background:linear-gradient(145deg,rgba(37,177,90,.07),var(--bg))
}
.faq-video-btn.visto .play-dot{background:#1da851;color:#fff;box-shadow:0 4px 12px rgba(29,168,81,.35)}
.faq-video-btn.visto .video-title,
.faq-video-btn.visto .video-desc{color:var(--ink)}
.video-progress{
margin-top:16px;
font-size:.92rem;
color:var(--text-muted)
}
.tutorial-empty{
display:none;
color:var(--text-muted);
padding:18px;
border:1px dashed rgba(189,140,30,.35);
border-radius:16px;
text-align:center
}
/* ── FOOTER ──
Mesmo azul-escuro do hero: fecha a página com a cor da marca e, principalmente,
separa o rodapé da seção .cta logo acima — as duas usavam --bg-soft e se
fundiam numa mancha só. Como o fundo é escuro, todo texto aqui usa a paleta
clara do hero (#b9c7dc / #f1cb57), não as variáveis de tema claro. */
footer{
/* padding-bottom folgado pra linha de copyright nunca ficar atrás do
botão flutuante do WhatsApp (position:fixed, ancorado no canto
inferior direito da viewport, sempre por cima do fim da página) */
padding:52px 0 110px;
color:#b9c7dc;
background:linear-gradient(160deg,#071425 0%,#050f1f 60%,#030a16 100%);
font-size:.9rem;
border-top:1px solid rgba(255,255,255,.08)
}
/* 3 colunas: marca+contato (mais larga), segmentos e navegação. Antes era um
flex de uma linha só, que espremia tudo lado a lado e não dava hierarquia. */
.footer-grid{
display:grid;
grid-template-columns:1.7fr 1fr 1fr;
gap:48px;
align-items:start
}
/* Mesma composição do cabeçalho: símbolo à esquerda, nome e assinatura
empilhados à direita. O .logo-mark já traz o glow dourado que separa o
navy do símbolo do navy do fundo — aqui ele é ainda mais necessário,
porque o rodapé é a superfície mais escura do site. */
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-logo-txt{display:flex;flex-direction:column;line-height:1}
.footer-brand .logo-mark{width:48px}
.footer-brand strong{
display:block;
color:#f1cb57;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:1.45rem;font-weight:800;letter-spacing:.5px;line-height:1
}
.footer-brand-sub{
display:block;
color:#8fa3bc;font-size:.62rem;
letter-spacing:2.5px;margin-top:5px
}
.footer-desc{
color:#b9c7dc;font-size:.95rem;line-height:1.6;
margin:18px 0 22px;max-width:330px
}
.footer-contact{display:grid;gap:11px;margin-bottom:22px}
.footer-contact a{
display:flex;align-items:flex-start;gap:10px;
color:#b9c7dc;font-size:.95rem;
width:fit-content;transition:.2s
}
.footer-contact a:hover{color:#f1cb57}
/* Endereço não é link (não leva a lugar nenhum), mas alinha igual aos demais */
.footer-contact .footer-address{
display:flex;align-items:flex-start;gap:10px;
color:#b9c7dc;font-size:.95rem;line-height:1.5;
width:fit-content
}
.footer-contact svg{
width:16px;height:16px;flex-shrink:0;
margin-top:2px;opacity:.65
}
.footer-col-title{
display:block;color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:.92rem;font-weight:700;
margin-bottom:16px
}
.footer-nav{display:grid;gap:11px}
.footer-nav a{
color:#b9c7dc;font-size:.95rem;
width:fit-content;transition:.2s
}
.footer-nav a:hover{color:#f1cb57}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;
gap:16px;flex-wrap:wrap;
margin-top:48px;padding-top:26px;
border-top:1px solid rgba(255,255,255,.08)
}
.footer-copy{color:#8fa3bc;font-size:.8rem}
.footer-status{
display:inline-flex;align-items:center;gap:9px;
color:#8fa3bc;font-size:.8rem;
white-space:nowrap
}
.footer-status::before{
content:'';
width:8px;height:8px;border-radius:50%;
background:#25d366;
box-shadow:0 0 0 3px rgba(37,211,102,.18);
flex-shrink:0
}
/* Redes sociais: neutras em repouso e com a cor da própria rede no hover —
dourado aqui competiria com os CTAs, que é onde ele deve ficar reservado. */
.footer-social{display:flex;gap:10px;margin-top:14px}
.footer-social a{
display:flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.06);
color:#b9c7dc;
transition:.25s
}
.footer-social a:hover{border-color:currentColor;transform:translateY(-2px)}
.footer-social svg{width:17px;height:17px;display:block}
.footer-social .social-instagram:hover{color:#f06292;background:rgba(240,98,146,.14)}
.footer-social .social-facebook:hover{color:#4293ff;background:rgba(66,147,255,.14)}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{color:#b9c7dc;transition:.2s;font-size:.88rem}
.footer-links a:hover{color:#f1cb57}
/* ── FLOATING WHATSAPP ── */
.floating-whatsapp{
position:fixed;right:22px;bottom:22px;z-index:40;
width:60px;height:60px;border-radius:50%;
background:linear-gradient(135deg,#25d366,#1da851);
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 30px rgba(37,211,102,.4);
transition:.25s
}
.floating-whatsapp:hover{transform:scale(1.1)}
.floating-whatsapp::before{
content:'';
position:absolute;inset:-4px;border-radius:50%;
border:2px solid rgba(37,211,102,.35);
animation:pulse-ring 2s ease-out infinite
}
@keyframes pulse-ring{
0%{transform:scale(.92);opacity:1}
100%{transform:scale(1.35);opacity:0}
}
.anti-spam-box{
background:var(--bg-soft);
border:1px solid rgba(189,140,30,.25);
border-radius:14px;
padding:14px;
margin-bottom:14px
}
.anti-spam-box label{
display:block;
color:var(--primary-hover);
font-weight:700;
font-size:.92rem;
margin-bottom:8px
}
.anti-spam-box small{
display:block;
color:var(--text-muted);
margin-top:6px;
font-size:.8rem
}
.campo-oculto{
position:absolute!important;
left:-9999px!important;
opacity:0!important;
height:0!important;
width:0!important;
overflow:hidden!important
}
#botaoAcessoPrincipal{
background:var(--primary);
color:#fff;
font-weight:800;
opacity:1 !important;
filter:none !important
}
#botaoAcessoPrincipal:hover{
background:var(--primary-hover);
transform:translateY(-2px)
}
.video-modal{
display:none;
position:fixed;
inset:0;
z-index:200;
background:rgba(10,25,41,.6);
align-items:center;
justify-content:center;
padding:20px
}
.video-modal-box{
width:min(920px,94vw);
background:var(--bg);
border:1px solid var(--border);
border-radius:24px;
padding:18px;
box-shadow:var(--shadow);
position:relative
}
.video-modal-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:14px
}
.video-modal-header h3{
color:var(--primary-hover);
font-size:1.15rem
}
.close-video-modal{
width:38px;
height:38px;
border-radius:50%;
border:1px solid var(--border);
background:var(--bg-soft);
color:var(--ink);
font-size:1.4rem;
cursor:pointer
}
.video-modal-frame{
width:100%;
aspect-ratio:16/9;
overflow:hidden;
border-radius:18px;
border:1px solid rgba(189,140,30,.3);
background:#000
}
.video-modal-frame iframe{
width:100%;
height:100%;
display:block
}
/* ── COMO FUNCIONA STEP CIRCLE ── */
.step-num{
width:56px;height:56px;border-radius:50%;
background:var(--primary-glow);border:2px solid rgba(189,140,30,.45);
display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
font-family:'Plus Jakarta Sans',sans-serif;font-size:1.4rem;font-weight:800;color:var(--primary-hover)
}
/* ── FEATURE SHOWCASE (abas + carrossel de imagens) ── */
.showcase-tabs{
display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
margin:0 auto 32px;padding:6px;
background:var(--bg-soft);border:1px solid var(--border);
border-radius:999px;width:fit-content;max-width:100%
}
.showcase-tab{
appearance:none;border:none;cursor:pointer;
padding:10px 20px;border-radius:999px;
font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:700;
color:var(--text-muted);background:transparent;
display:flex;align-items:center;gap:8px;white-space:nowrap;
transition:.25s
}
.showcase-tab:hover{color:var(--ink)}
.showcase-tab.active{
color:var(--primary-hover);background:var(--bg-card);
box-shadow:0 6px 16px rgba(10,25,41,.08)
}
.showcase-panel{
display:grid;grid-template-columns:360px 1fr;gap:36px;align-items:center;
background:linear-gradient(135deg,var(--primary-glow),var(--bg-soft) 60%);
border:1px solid var(--border);border-radius:var(--radius-lg);
padding:32px
}
.showcase-list{
list-style:none;display:grid;gap:6px;
background:var(--bg-card);border-radius:var(--radius);
padding:10px;box-shadow:var(--shadow)
}
.showcase-list[hidden]{display:none}
.showcase-item{
display:flex;align-items:flex-start;gap:14px;
padding:14px 16px;border-radius:14px;cursor:pointer;
transition:.25s;border:1px solid transparent
}
.showcase-item:hover{background:var(--bg-soft)}
.showcase-item.active{background:var(--primary-glow);border-color:rgba(189,140,30,.3)}
.showcase-item-body strong{
display:block;font-family:'Plus Jakarta Sans',sans-serif;
font-size:.94rem;color:var(--ink);font-weight:700
}
.showcase-item-desc{
display:none;margin-top:6px;font-size:.84rem;color:var(--text-muted);line-height:1.55
}
.showcase-item.active .showcase-item-desc{display:block}
.showcase-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:0 50px}
.showcase-frame-wrap{position:relative;width:100%;max-width:320px;margin:0 auto}
.showcase-frame{
position:relative;z-index:1;width:100%;
border-radius:var(--radius-lg);overflow:hidden;
border:1px solid var(--border);box-shadow:var(--shadow);
background:var(--bg)
}
.showcase-frame img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.showcase-frame::after{
content:'';position:absolute;inset:0;z-index:0;
background:linear-gradient(to top,rgba(10,25,41,.62),transparent 48%)
}
.showcase-ghost{
position:absolute;top:8%;bottom:8%;width:92%;z-index:0;
border-radius:var(--radius-lg);
background:var(--bg-card);border:1px solid var(--border)
}
.showcase-ghost-left{left:-10%;transform:rotate(-6deg)}
.showcase-ghost-right{right:-10%;transform:rotate(6deg)}
.showcase-badge{
position:absolute;z-index:1;top:16px;left:16px;
padding:6px 14px;border-radius:999px;
background:var(--primary);color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:.72rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase
}
.showcase-counter{
position:absolute;z-index:1;top:16px;right:16px;
color:#fff;font-size:.76rem;font-weight:700;
background:rgba(10,25,41,.4);padding:4px 10px;border-radius:999px
}
.showcase-caption{
position:absolute;z-index:1;left:16px;right:16px;bottom:16px;
color:#fff;font-weight:700;font-size:1.05rem;line-height:1.35
}
.showcase-arrow{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:42px;height:42px;border-radius:50%;
background:var(--bg-card);border:1px solid var(--border);
box-shadow:var(--shadow);cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:1.2rem;color:var(--ink);transition:.2s
}
.showcase-arrow:hover{background:var(--primary-glow);border-color:rgba(189,140,30,.35)}
.showcase-arrow-prev{left:0}
.showcase-arrow-next{right:0}
@media(max-width:980px){
nav{display:none}
.nav-toggle{display:flex}
.grid-2{grid-template-columns:1fr}
/* o hero da home volta a ser uma coluna só: em duas, o cartão de cadastro
era espremido a poucos pixels de largura */
.hero-split-inner{grid-template-columns:1fr;gap:36px;text-align:center}
.hero-split-copy{align-items:center}
.hero-split-inner .hero-lead{margin-inline:auto}
.hero-split-inner .quick-card{max-width:480px;margin-inline:auto}
.hero-split-inner .hero-checklist{
grid-template-columns:1fr;max-width:480px;margin-inline:auto;text-align:left
}
.cards-grid{grid-template-columns:repeat(2,1fr)}
.access-layout{grid-template-columns:1fr}
.access-box{position:static}
.faq-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
.showcase-panel{grid-template-columns:1fr;padding:22px}
.showcase-ghost{display:none}
/* blur no header fixo é recalculado a cada frame de scroll — pesado em
celular/tablet. Troca por fundo quase opaco, visual quase idêntico. */
header{
backdrop-filter:none;
-webkit-backdrop-filter:none;
background:rgba(255,255,255,.98)
}
}
@media(max-width:860px){
/* marca ocupa a linha inteira e as duas colunas de links dividem a de baixo */
.footer-grid{grid-template-columns:1fr 1fr;gap:20px 32px}
.footer-brand{grid-column:1/-1;margin-bottom:12px}
}
@media(max-width:760px){
.trust-items{gap:12px}
}
@media(max-width:620px){
/* ── RODAPÉ CENTRALIZADO NO MOBILE ──
As duas colunas de links continuam lado a lado (empilhar as 11 deixaria
o rodapé longo demais), mas todo o conteúdo passa a ser centralizado.
Os elementos com width:fit-content precisam de margin auto pra centrar. */
.footer-grid{text-align:center;gap:26px 24px}
.footer-desc{margin-left:auto;margin-right:auto}
.footer-contact a,
.footer-contact .footer-address{justify-content:center;margin:0 auto;text-align:left}
.footer-social{justify-content:center}
.footer-nav a{margin-left:auto;margin-right:auto}
.footer-bottom{
flex-direction:column;
align-items:center;
text-align:center;
gap:12px
}
section{padding:64px 0}
.cards-grid,.features-list{grid-template-columns:1fr}
.hero-actions{flex-direction:column}
.btn{width:100%}
.form-card{padding:24px}
.faq-buttons{grid-template-columns:1fr}
.tutorial-toolbar{display:grid}
.tutorial-search,.tutorial-select{min-width:0;max-width:100%;width:100%}
.hero-checklist{grid-template-columns:1fr}
.quick-card{padding:24px}
.showcase-tab{padding:9px 14px;font-size:.8rem}
.showcase-stage{padding:0 40px}
.showcase-arrow{width:36px;height:36px;font-size:1rem}
}
/* ── FADE-UP ANIMATIONS ── */
.fade-up{
opacity:0;
transform:translateY(28px);
transition:opacity .65s ease,transform .65s ease
}
.fade-up.visible{opacity:1;transform:none}
/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important;transition:none!important;animation:none!important}
.fade-up{opacity:1;transform:none}
}
/* ── BARRA DE NAVEGAÇÃO ──
A barra já estava no limite exato da largura do .container com 6 itens.
Com o 7º item ("Reforma") o conjunto logo + links passou a não caber:
o subtítulo do logo quebrava em duas linhas e o botão do DEMO saía do
container. Em vez de espremer os links, o menu hambúrguer passa a
assumir a partir de 1230px — acima disso o menu completo continua igual.
O logo não encolhe mais (flex-shrink:0) e nada mais quebra linha. */
/* Só a barra do topo: o seletor solto "nav a" pegava também o índice
das páginas de reforma e o rodapé, que precisam quebrar linha. */
header nav a,.nav-mega-trigger{white-space:nowrap}
@media(min-width:1231px){
/* Só onde o menu completo aparece: aí o logo não pode encolher, senão
o subtítulo quebra em duas linhas e estica o header. Em tela menor
ele volta a ceder espaço — o header do "Área do cliente" tem um
botão largo do lado e sem isso estoura a largura no celular. */
.logo{flex-shrink:0}
.logo span{white-space:nowrap}
}
@media(max-width:1230px){
nav{display:none}
.nav-toggle{display:flex}
}
/* =============================================================
REFORMA TRIBUTÁRIA
Classes das páginas reforma-tributaria*.html e da faixa de
chamada na home. Ficam aqui porque as duas partes compartilham
exatamente os mesmos blocos.
============================================================= */
/* ── ALTERNADOR PARTE 1 / PARTE 2 ──
Vive dentro do .hero (fundo escuro), por isso usa cores absolutas. */
.rt-partswitch{
display:inline-flex;gap:4px;padding:5px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.15)
}
.rt-partswitch a{
padding:9px 20px;border-radius:999px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:.83rem;font-weight:700;
color:rgba(255,255,255,.65);transition:color .25s,background .25s;white-space:nowrap
}
.rt-partswitch a:hover{color:#fff}
.rt-partswitch a[aria-current="page"]{background:var(--primary);color:#0a1929}
/* Botão vazado sobre fundo escuro — o .btn-outline padrão usa texto
marrom escuro, que só tem contraste em fundo claro. */
.btn-outline-light{
border:1.5px solid rgba(241,203,87,.5);
color:var(--primary-soft);
background:rgba(255,255,255,.04)
}
.btn-outline-light:hover{background:rgba(241,203,87,.14);border-color:var(--primary-soft)}
/* ── ÍNDICE DA PÁGINA ── */
.rt-toc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rt-toc a{
display:flex;gap:13px;align-items:center;
padding:15px 18px;border-radius:14px;
background:var(--bg-card);border:1px solid var(--border-soft);
box-shadow:0 2px 10px rgba(10,25,41,.04);
color:var(--text-soft);font-size:.91rem;font-weight:600;
transition:transform .25s,border-color .25s,color .25s
}
.rt-toc a:hover{transform:translateY(-3px);border-color:var(--primary);color:var(--ink)}
.rt-toc-num{
flex-shrink:0;width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--primary-glow);color:var(--primary-deeper);
font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:800
}
/* ── LINHA DO TEMPO DA TRANSIÇÃO ── */
.rt-timeline{display:grid;gap:16px;max-width:860px;margin:0 auto}
.rt-phase{
display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start;
background:var(--bg-card);border:1px solid var(--border-soft);
border-radius:var(--radius);padding:24px 28px;
box-shadow:0 2px 10px rgba(10,25,41,.04)
}
.rt-phase-when{display:flex;flex-direction:column;gap:7px}
.rt-phase-year{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:1.45rem;font-weight:800;color:var(--primary-hover);line-height:1.15
}
.rt-phase-now{
font-size:.66rem;font-weight:800;letter-spacing:.7px;
color:var(--primary-deeper);background:var(--primary-glow);
border:1px solid rgba(189,140,30,.3);
padding:3px 9px;border-radius:999px;width:fit-content
}
.rt-phase h3{font-size:1.02rem;margin-bottom:6px}
.rt-phase p{font-size:.93rem}
/* ── CARTÃO DE TRIBUTO (CBS / IBS / IS) ── */
.rt-replaces{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;align-items:center}
.rt-replaces span{
font-size:.72rem;font-weight:700;color:var(--text-muted);
background:var(--bg-soft);border:1px solid var(--border-soft);
padding:4px 10px;border-radius:999px
}
.rt-replaces .rt-replaces-label{
background:none;border:none;padding:0;color:var(--text-muted);
font-weight:600;text-transform:uppercase;letter-spacing:.6px;font-size:.66rem
}
/* ── CAIXA DE OBSERVAÇÃO ── */
.rt-note{
display:flex;gap:15px;align-items:flex-start;
padding:20px 24px;border-radius:16px;
background:var(--primary-glow);border:1px solid rgba(189,140,30,.3)
}
.rt-note>.ic{width:22px;height:22px;flex-shrink:0;margin-top:2px;color:var(--primary-hover);vertical-align:0}
.rt-note p{font-size:.93rem;color:var(--text-soft)}
.rt-note strong{color:var(--primary-deeper)}
/* ── AVISO NEUTRO ── */
.rt-disclaimer{
padding:18px 22px;border-radius:14px;
background:var(--bg-soft);border:1px solid var(--border-soft);
font-size:.85rem;color:var(--text-muted)
}
/* ── NÚMERO EM DESTAQUE ── */
.rt-stat{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:3.4rem;font-weight:800;line-height:1;
color:var(--primary-hover);margin-bottom:8px
}
.rt-stat-label{font-size:.88rem;color:var(--text-muted)}
/* ── FLUXO DE 4 ETAPAS (split payment) ── */
.rt-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rt-flow .card{text-align:center}
.rt-flow h3{font-size:1rem;margin-bottom:8px}
.rt-flow p{font-size:.89rem}
/* ── PÍLULAS (produtos do Imposto Seletivo) ── */
.rt-pills{display:flex;flex-wrap:wrap;gap:9px}
.rt-pills span{
display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;border-radius:999px;
background:var(--bg-card);border:1px solid var(--border);
font-size:.87rem;font-weight:600;color:var(--text-soft)
}
.rt-pills span::before{
content:"";width:6px;height:6px;border-radius:50%;
background:var(--primary);flex-shrink:0
}
/* ── NAVEGAÇÃO ENTRE AS PARTES ── */
.rt-partnav{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:860px;margin:0 auto}
.rt-partnav a{
display:flex;flex-direction:column;gap:5px;
padding:24px 26px;border-radius:var(--radius);
background:var(--bg-card);border:1px solid var(--border-soft);
box-shadow:0 2px 10px rgba(10,25,41,.04);
transition:transform .25s,border-color .25s
}
.rt-partnav a:hover{transform:translateY(-4px);border-color:var(--primary)}
.rt-partnav-dir{
display:flex;align-items:center;gap:7px;
font-size:.72rem;font-weight:700;letter-spacing:.7px;
text-transform:uppercase;color:var(--primary-hover)
}
.rt-partnav-dir .ic{width:15px;height:15px}
.rt-partnav-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--ink);font-size:.97rem}
.rt-partnav-next{text-align:right}
.rt-partnav-next .rt-partnav-dir{justify-content:flex-end}
/* ── ONDE ESTÃO OS TUTORIAIS ──
Segunda linha da seção de demonstração: o vídeo mostra o núcleo comum a
todas as versões, e esta linha diz onde ver o resto. Fica mais discreta
que o parágrafo principal, porque é orientação e não argumento de venda. */
.demo-tutoriais{
display:flex;align-items:flex-start;gap:10px;
margin-top:12px;padding-top:14px;
border-top:1px solid var(--border-soft);
font-size:.95rem;color:var(--text-muted);
}
.demo-tutoriais .ic{
width:17px;height:17px;flex-shrink:0;margin-top:4px;
color:var(--primary);
}
/* ── SUPORTE HUMANIZADO (#sobre) ──
Mesmo fundo do hero: a seção fecha a página em azul junto com a faixa da
reforma, e o bloco de atendimento ganha o peso de uma seção-âncora em vez
de mais um trecho claro. Como o fundo inverte, TODO texto aqui precisa da
versão clara — por isso as regras abaixo repetem cor por cor. */
#sobre{
position:relative;
background:
radial-gradient(ellipse 70% 55% at 50% 0%,rgba(212,175,55,.14),transparent),
linear-gradient(160deg,#071425 0%,#050f1f 60%,#030a16 100%);
color:#c3cee0
}
#sobre .sobre-cabecalho{text-align:center;max-width:760px;margin:0 auto 46px}
#sobre .badge{
border-color:rgba(255,255,255,.22);
color:#f1cb57;
background:rgba(255,255,255,.06)
}
#sobre .badge::before{background:#f1cb57}
#sobre h2{color:#fff}
#sobre h2 span{color:#f1cb57}
#sobre p{color:#c3cee0}
#sobre .feature-item{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.12);
color:#d7e0ee
}
#sobre .check{background:rgba(37,177,90,.2);color:#4ade80}
#sobre .btn-outline{
border-color:rgba(241,203,87,.5);
color:#f1cb57;
background:transparent
}
#sobre .btn-outline:hover{
border-color:#f1cb57;
background:rgba(241,203,87,.12)
}
/* ── BRILHO QUE ATRAVESSA O BOTÃO ──
Mesmo efeito do botão da landing. Fica no ::after pra não competir com o
gradiente de fundo do próprio botão, e com pointer-events:none pra não
roubar o clique. */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
content:'';
position:absolute;inset:0;
background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
transform:translateX(-130%);
animation:btn-shine 4.6s ease-in-out infinite;
pointer-events:none
}
/* o conteúdo do botão precisa ficar acima da faixa de brilho */
.btn-primary>*{position:relative;z-index:1}
@keyframes btn-shine{
0%,62% {transform:translateX(-130%)}
86%,100% {transform:translateX(130%)}
}
@media(prefers-reduced-motion:reduce){
.btn-primary::after{animation:none;opacity:0}
}
/* ── FAIXA DE CHAMADA NA HOME ──
Bloco escuro entre duas seções claras: quebra o ritmo da página e
dá ao guia o mesmo peso visual de uma seção, em vez de virar mais
um link sublinhado no meio de uma lista. */
.rt-strip{
padding:56px 0;
position:relative;overflow:hidden;
background:
radial-gradient(ellipse 60% 70% at 15% 50%,rgba(212,175,55,.16),transparent),
linear-gradient(150deg,#071425 0%,#050f1f 60%,#030a16 100%)
}
.rt-strip-inner{
display:flex;align-items:center;justify-content:space-between;
gap:40px;position:relative;z-index:1
}
.rt-strip-text{max-width:640px}
.rt-strip-tag{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:999px;margin-bottom:14px;
border:1px solid rgba(241,203,87,.35);
background:rgba(241,203,87,.1);
color:var(--primary-soft);
font-family:'Plus Jakarta Sans',sans-serif;
font-size:.74rem;font-weight:700;letter-spacing:.6px
}
.rt-strip-tag .ic{width:14px;height:14px}
.rt-strip h2{color:#fff;font-size:1.75rem;margin-bottom:10px}
.rt-strip h2 span{color:var(--primary-soft)}
.rt-strip p{color:#c3cee0;font-size:.97rem;max-width:580px}
.rt-strip-actions{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.rt-strip-actions .btn{font-size:.87rem;padding:12px 22px}
@media(max-width:980px){
.rt-toc{grid-template-columns:repeat(2,1fr)}
.rt-flow{grid-template-columns:repeat(2,1fr)}
.rt-strip-inner{flex-direction:column;align-items:flex-start;gap:26px}
.rt-strip-actions{flex-direction:row;flex-wrap:wrap;width:100%}
.rt-strip-actions .btn{flex:1 1 210px}
}
@media(max-width:620px){
.rt-toc,.rt-partnav{grid-template-columns:1fr}
/* O fluxo do split payment continua em 2 colunas: são 4 cartões de
uma linha de texto cada — empilhar os quatro só faria o leitor
rolar sem ganhar legibilidade. */
.rt-flow .card{padding:20px 14px}
.rt-flow h3{font-size:.94rem}
.rt-flow p{font-size:.84rem}
.rt-flow .step-num{width:44px;height:44px;font-size:1.15rem;margin-bottom:12px}
.rt-phase{grid-template-columns:1fr;gap:12px;padding:22px}
.rt-phase-when{flex-direction:row;align-items:center;gap:10px}
.rt-partnav-next{text-align:left}
.rt-partnav-next .rt-partnav-dir{justify-content:flex-start}
.rt-partswitch{display:flex;width:100%}
.rt-partswitch a{flex:1;text-align:center;padding:10px 8px;font-size:.78rem}
.rt-stat{font-size:2.7rem}
.rt-strip{padding:44px 0}
.rt-strip h2{font-size:1.42rem}
.rt-strip-actions{flex-direction:column}
/* No eixo vertical o flex-basis:210px herdado da faixa de 980px viraria
ALTURA — o botão virava um oval gigante. */
.rt-strip-actions .btn{flex:0 0 auto;width:100%}
.rt-note{padding:18px;gap:12px}
.ic-box{width:42px;height:42px;border-radius:12px;margin-bottom:14px}
}
/* ── MENOS EFEITO NO CELULAR ──
Tela de toque não tem hover: o translateY e a sombra dourada de
cada cartão só custam repaint durante o scroll. E a animação de
entrada fica mais curta, sem atraso escalonado — em tela pequena
o escalonamento vira espera. */
@media(hover:none){
.card:hover,.segment-card:hover,.rt-toc a:hover,.rt-partnav a:hover{
transform:none;box-shadow:0 2px 10px rgba(10,25,41,.04)
}
.card:hover::after{opacity:0}
}
@media(max-width:620px){
.fade-up{transition-duration:.4s;transform:translateY(14px)}
.fade-up[style*="transition-delay"]{transition-delay:0s!important}
}
/* Evita a "linha órfã" — uma palavra sozinha na última linha do título.
O navegador distribui as quebras de forma equilibrada; quem não
suporta simplesmente ignora e quebra como antes. */
h1,h2,.section-title p,.hero-lead{text-wrap:balance}
/* Complemento de rótulo que some em tela estreita. No header do "Área
do cliente" o logo e o botão dividem a mesma linha sem hambúrguer:
com "← Voltar ao site" inteiro o subtítulo do logo quebrava em duas
linhas no celular. */
@media(max-width:480px){
.so-largo{display:none}
}
/* No celular o subtítulo do logo ficava a poucos pixels de caber numa
linha só e quebrava em duas, esticando o header. Um pouco menos de
espaçamento entre letras resolve sem mexer no tamanho da fonte. */
@media(max-width:420px){
.logo span{letter-spacing:1.4px;margin-right:-1.4px}
}
/* Grade de 2 colunas para blocos de 4 (ou 2) cartões, no lugar do
style inline que estava em uso: inline vence media query, então no
celular a grade continuava com 2 colunas espremidas e estourava a
largura. Como classe, a regra de 1 coluna do mobile volta a valer. */
.cards-grid.grid-2up{
grid-template-columns:repeat(2,1fr);
max-width:900px;margin-left:auto;margin-right:auto
}
@media(max-width:620px){
.cards-grid.grid-2up{grid-template-columns:1fr}
}
/* Abaixo de 360px as 2 colunas ficariam estreitas demais para as legendas. */
@media(max-width:359px){
.rt-flow{grid-template-columns:1fr}
.rt-flow .card{padding:22px}
}
/* =============================================================
SISTEMA DE ÍCONES
Os desenhos ficam num