/* Sistema de identidade do Ecossistema Facilita Tokens conforme Growth/identidade-visual-facilita.md Paleta A (verde, PF) rege o site. Paleta B (petroleo/dourado, PJ) rege /empresas/. Guardrail: verde nunca e texto nem linha fina sobre branco. Botao verde leva texto escuro. */ :root{ /* Paleta A, verde, PF */ --verde:#5ABB64; --verde-claro:#88CE8F; --grafite:#231F20; --escuro:#0F1E17; --escuro-2:#1B3628; --card-escuro:#16281F; --borda-escura:#24402F; --sobre-escuro:#F2F7F4; --sobre-escuro-2:#B7C4BC; --sobre-escuro-3:#8FA79C; --branco:#FFFFFF; --claro-2:#F4F7F5; --ink:#1A1F1C; --ink-2:#5B665F; --borda:#E2E7E4; --sucesso:#2E8B57; --alerta-txt:#8A4A2F; --alerta-bg:#FBF1EC; --serif:Georgia,"Times New Roman",serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --max:1120px; --gap:clamp(20px,4vw,32px); --raio:10px; --sombra:0 1px 2px rgba(15,30,23,.04),0 12px 32px -20px rgba(15,30,23,.22); /* papeis, reatribuidos no territorio PJ */ --marca:var(--verde); --marca-escura:var(--escuro); --btn-bg:var(--verde); --btn-txt:var(--escuro); } /* Paleta B, petroleo/dourado, PJ. Aplicada com */ body.pj{ --petroleo:#0B2E38; --petroleo-2:#164B59; --dourado:#C9A227; --dourado-claro:#E0B33C; --escuro:#0B2E38; --escuro-2:#164B59; --card-escuro:#0E3742; --borda-escura:#1D5566; --sobre-escuro:#F2F6F7; --sobre-escuro-2:#B8C8CD; --sobre-escuro-3:#8FA6AD; --claro-2:#F4F6F7; --marca:var(--dourado); --marca-escura:var(--petroleo); --btn-bg:var(--dourado); --btn-txt:#231F20; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--branco);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance} h1{font-size:clamp(30px,4.6vw,48px)} h2{font-size:clamp(24px,3.2vw,34px)} h3{font-size:clamp(19px,2.2vw,23px)} h4{font-size:17px} p{margin:0 0 1em} .container{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,28px)} .estreito{max-width:var(--max)} .container.estreito > *{max-width:74ch} .eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px} .lead{font-size:clamp(17px,2vw,19px);color:var(--ink-2);max-width:62ch} .nota{font-size:14px;color:var(--ink-2)} :focus-visible{outline:3px solid var(--marca);outline-offset:2px;border-radius:4px} .pular{position:absolute;left:-9999px} .pular:focus{position:static;display:inline-block;padding:10px 16px;background:var(--escuro);color:var(--sobre-escuro)} /* ---- botoes ---- */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;font-weight:600;padding:12px 22px;border-radius:8px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;line-height:1.3;transition:transform .12s ease,background .15s ease,border-color .15s ease} .btn:hover{transform:translateY(-1px)} .btn--primary{background:var(--btn-bg);color:var(--btn-txt);border-color:var(--btn-bg)} .btn--primary:hover{background:var(--verde-claro);border-color:var(--verde-claro)} body.pj .btn--primary:hover{background:var(--dourado-claro);border-color:var(--dourado-claro)} .btn--linha{background:transparent;color:var(--ink);border-color:var(--borda)} .btn--linha:hover{border-color:var(--ink-2)} .btn--sm{font-size:14px;padding:9px 16px} .escuro .btn--linha{color:var(--sobre-escuro);border-color:var(--borda-escura)} .escuro .btn--linha:hover{border-color:var(--sobre-escuro-3)} /* ---- topo ---- */ .topo{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--borda)} .topo-in{display:flex;align-items:center;gap:20px;min-height:76px} .marca-link{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto} .marca-link img{height:44px;width:auto;display:block} .nav{display:flex;gap:2px;margin-left:auto;align-items:center} .nav a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 11px;border-radius:6px} .nav a:hover{color:var(--ink);background:var(--claro-2)} .nav a[aria-current="page"]{color:var(--ink);font-weight:600} .nav .sep{width:1px;height:20px;background:var(--borda);margin:0 8px} .nav .outro{color:var(--ink-2);font-size:14px} .nav .outro:hover{background:var(--claro-2)} .menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--borda);border-radius:8px;padding:8px 12px;font:600 14px var(--sans);color:var(--ink);cursor:pointer} @media(max-width:900px){ .menu-btn{display:block} .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--branco);border-bottom:1px solid var(--borda);flex-direction:column;align-items:stretch;padding:10px clamp(18px,4vw,28px) 18px;gap:2px;box-shadow:var(--sombra)} .nav.aberto{display:flex} .nav a{padding:11px 8px;font-size:16px} .nav .sep{width:100%;height:1px;margin:8px 0} } /* ---- secoes ---- */ .secao{padding:clamp(48px,7vw,80px) 0} .secao--alt{background:var(--claro-2)} .secao--compacta{padding:clamp(32px,4vw,48px) 0} .escuro{background:var(--escuro);color:var(--sobre-escuro)} .escuro h1,.escuro h2,.escuro h3{color:var(--sobre-escuro)} .escuro p,.escuro li{color:var(--sobre-escuro-2)} .escuro .eyebrow{color:var(--marca)} .escuro .lead{color:var(--sobre-escuro-2)} .secao-topo{max-width:720px;margin-bottom:clamp(26px,4vw,40px)} /* ---- hero ---- */ .hero{background:var(--escuro);color:var(--sobre-escuro);padding:clamp(56px,8vw,96px) 0} .hero h1{color:var(--sobre-escuro);max-width:22ch} .hero .lead{color:var(--sobre-escuro-2);max-width:56ch} .hero .eyebrow{color:var(--marca)} .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .hero-notas{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;padding:0;list-style:none;font-size:14px;color:var(--sobre-escuro-3)} .hero-notas li::before{content:"✓";color:var(--marca);margin-right:7px;font-weight:700} .page-hero{background:var(--escuro);color:var(--sobre-escuro);padding:clamp(38px,5.5vw,64px) 0 clamp(34px,5vw,56px)} .page-hero h1{color:var(--sobre-escuro);max-width:20ch} .page-hero .lead{color:var(--sobre-escuro-2)} .page-hero .eyebrow{color:var(--marca)} .page-hero p{color:var(--sobre-escuro-2)} .trilha,.breadcrumb{font-size:13.5px;color:var(--sobre-escuro-3);margin:0 0 14px} .trilha a,.breadcrumb a{color:var(--sobre-escuro-3)} .trilha a:hover,.breadcrumb a:hover{color:var(--marca)} .page-hero .btn--linha{color:var(--sobre-escuro);border-color:var(--borda-escura)} .page-hero .btn--linha:hover{border-color:var(--sobre-escuro-3);background:rgba(255,255,255,.04)} /* ---- grades e cartoes ---- */ .grade{display:grid;gap:var(--gap)} .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))} .cartao{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:24px;display:flex;flex-direction:column;gap:10px} .secao--alt .cartao{background:var(--branco)} .cartao h3{margin:0} .cartao p{margin:0;color:var(--ink-2);font-size:15px} .cartao .rodape{margin-top:auto;padding-top:14px} .cartao-link{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px} .cartao-link:hover{text-decoration:underline} .escuro .cartao{background:var(--card-escuro);border-color:var(--borda-escura)} .escuro .cartao p{color:var(--sobre-escuro-2)} .escuro .cartao-link{color:var(--sobre-escuro)} /* porta: as quatro entradas da home */ .porta{display:flex;flex-direction:column;gap:8px;background:var(--card-escuro);border:1px solid var(--borda-escura);border-radius:var(--raio);padding:22px;text-decoration:none;transition:border-color .15s ease,transform .12s ease} .porta:hover{border-color:var(--marca);transform:translateY(-2px)} .porta .pergunta{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--sobre-escuro);line-height:1.25} .porta .resposta{font-size:14.5px;color:var(--sobre-escuro-2);margin:0} .porta .destino{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:600;color:var(--marca)} /* ---- prosa ---- */ .prosa{max-width:70ch} .prosa h2{margin-top:1.6em} .prosa h2:first-child{margin-top:0} .prosa h3{margin-top:1.4em;font-size:20px} .prosa ul,.prosa ol{padding-left:1.25em;margin:0 0 1em} .prosa li{margin-bottom:.45em} .prosa strong{font-weight:600;color:var(--ink)} /* ---- tabelas ---- */ .tabela-rolagem{overflow-x:auto;border:1px solid var(--borda);border-radius:var(--raio)} table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px} th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--borda);vertical-align:top} th{font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);background:var(--claro-2)} tr:last-child td{border-bottom:none} .num{font-variant-numeric:tabular-nums} /* ---- planos ---- */ .plano{border:1px solid var(--borda);border-radius:var(--raio);padding:26px;display:flex;flex-direction:column;gap:6px;background:var(--branco)} .plano .preco{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--ink);line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums} .plano .por{font-size:14px;color:var(--ink-2);margin:0 0 4px} .plano ul{list-style:none;padding:0;margin:14px 0 0;font-size:14.5px;color:var(--ink-2);display:grid;gap:7px} .plano ul li{padding-left:22px;position:relative} .plano ul li::before{content:"✓";position:absolute;left:0;color:var(--sucesso);font-weight:700} .plano .rodape{margin-top:auto;padding-top:18px} /* ---- roteamento ---- */ .rotas{display:grid;gap:14px} .rota{border:1px solid var(--borda);border-left:3px solid var(--marca);border-radius:var(--raio);padding:20px 22px;background:var(--branco)} .rota h3{font-size:19px;margin:0 0 8px} .rota p{margin:0 0 14px;color:var(--ink-2);font-size:15px} .rota .destinos{display:flex;flex-wrap:wrap;gap:10px} /* ---- avisos ---- */ .aviso{border:1px solid var(--borda);background:var(--claro-2);border-radius:var(--raio);padding:18px 20px;font-size:15px;color:var(--ink-2)} .aviso strong{color:var(--ink)} .alerta{border:1px solid #EBD8CD;background:var(--alerta-bg);color:var(--alerta-txt);border-radius:var(--raio);padding:16px 18px;font-size:14.5px} .alerta a{color:var(--alerta-txt)} /* ---- destaque de venda cruzada ---- */ .cruzada{background:var(--escuro-2);color:var(--sobre-escuro);border-radius:var(--raio);padding:clamp(24px,3.5vw,34px);display:grid;gap:14px} .cruzada h2,.cruzada h3{color:var(--sobre-escuro);margin:0} .cruzada p{color:var(--sobre-escuro-2);margin:0} .cruzada .itens{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:4px 0 0;font-size:15px} .cruzada .itens li::before{content:"→";color:var(--marca);margin-right:8px} /* ---- rodape ---- */ .rodape-site{background:var(--escuro);color:var(--sobre-escuro-2);padding:clamp(40px,5vw,60px) 0 30px;font-size:14.5px} .rodape-site h4{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sobre-escuro-3);margin:0 0 12px;font-weight:600} .rodape-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px var(--gap)} .rodape-site ul{list-style:none;padding:0;margin:0;display:grid;gap:8px} .rodape-site a{color:var(--sobre-escuro-2);text-decoration:none} .rodape-site a:hover{color:var(--marca)} .rodape-fim{margin-top:36px;padding-top:22px;border-top:1px solid var(--borda-escura);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13.5px;color:var(--sobre-escuro-3)} .rodape-legal{max-width:62ch} @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}} /* ---- correcoes da primeira revisao visual ---- */ /* botao de linha sobre qualquer fundo escuro, nao so .escuro */ .cruzada .btn--linha,.hero .btn--linha,.porta .btn--linha{color:var(--sobre-escuro);border-color:var(--borda-escura)} .cruzada .btn--linha:hover,.hero .btn--linha:hover{border-color:var(--sobre-escuro-3);background:rgba(255,255,255,.04)} /* ---- aliases para o conteudo migrado do site antigo ---- */ .section{padding:clamp(48px,7vw,80px) 0} .section--alt{background:var(--claro-2)} .prose{max-width:70ch} .prose h2{margin-top:1.6em} .prose h2:first-child{margin-top:0} .prose h3{margin-top:1.4em;font-size:20px} .prose ul,.prose ol{padding-left:1.25em;margin:0 0 1em} .prose li{margin-bottom:.45em} .prose strong{font-weight:600;color:var(--ink)} .breadcrumb{font-size:13.5px;color:var(--ink-2);margin:0 0 14px} .breadcrumb a{color:var(--ink-2)} .breadcrumb a:hover{color:var(--ink)} .card-link{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px} .card-link:hover{text-decoration:underline} .card,.feature{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:24px} .grid,.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} /* Alinhamento: quando .prosa/.prose (ou .estreito) sao o proprio .container, o max-width mais o margin auto do container centralizavam a coluna, e a pagina passava a ter duas bordas esquerdas diferentes: uma no hero, outra no texto. O container mantem a largura do site, e quem estreita e o conteudo dentro dele. */ .container.prosa,.container.prose,.container.estreito{max-width:var(--max)} .container.prosa > *,.container.prose > *,.container.estreito > *{max-width:74ch} .container.prosa > .grade,.container.prose > .grade,.container.estreito > .grade{max-width:74ch}