@font-face{font-family:Sora;font-weight:500;font-display:swap;src:url(/fontes/sora-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Sora;font-weight:600;font-display:swap;src:url(/fontes/sora-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/fontes/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/fontes/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/fontes/inter-latin-600-normal.woff2) format("woff2")}

:root{
  --marinho:#0E2A47;--marinho2:#143558;--marinho3:#0A2038;--verde:#1B7F79;--verde-esc:#156963;--verde-cla:#3FB0A8;
  --pergaminho:#F2EBDD;--ambar:#C8862A;--ambar-cla:#E0A44E;
  --fundo:#F7F4EE;--branco:#FFFFFF;--texto:#33424F;--suave:#66727D;--linha:#DDD5C6;--claro-esc:#D9DEE5;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--fundo);color:var(--texto);font:17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde)}
h1,h2,h3{font-family:Sora,Inter,sans-serif;color:var(--marinho);line-height:1.18;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(42px,6.4vw,72px);letter-spacing:-.8px}
h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.4px}
h3{font-size:19px}
p{margin:0 0 1em}
.faixa{max-width:1180px;margin:0 auto;padding:0 16px}
section{padding:96px 0;position:relative}
.selo{font-family:Sora,Inter,sans-serif;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ambar-cla);margin-bottom:14px;font-weight:500}
.selo.escuro{color:var(--verde)}

/* ---------- Topo ---------- */
.topo{position:sticky;top:0;z-index:30;background:rgba(14,42,71,.92);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(242,235,221,.08);transition:box-shadow .3s}
.topo.rolou{box-shadow:0 10px 30px rgba(5,18,32,.35)}
.topo .faixa{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:16px}
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--pergaminho);font-family:Sora,Inter,sans-serif;font-weight:600;font-size:22px;letter-spacing:.3px}
.marca img{transition:transform .8s var(--ease)}
.marca:hover img{transform:rotate(90deg)}
.menu{display:flex;align-items:center;gap:22px}
.menu a{color:var(--claro-esc);text-decoration:none;font-size:15px;position:relative}
.menu a:not(.botao)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ambar);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu a:not(.botao):hover::after{transform:scaleX(1)}
.menu a:hover{color:var(--pergaminho)}
.menu .entrar{color:var(--pergaminho);font-weight:500}

/* ---------- Botões ---------- */
.botao{position:relative;overflow:hidden;display:inline-block;background:var(--verde);color:#fff !important;text-decoration:none;font-weight:600;font-size:16px;padding:14px 24px;border-radius:11px;border:0;cursor:pointer;font-family:inherit;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.botao:hover{background:var(--verde-esc);transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,127,121,.35)}
.botao.pequeno{padding:9px 16px;font-size:14px}
.botao.contorno{background:transparent;border:1px solid rgba(242,235,221,.45);color:var(--pergaminho) !important}
.botao.contorno:hover{background:rgba(242,235,221,.08);box-shadow:none}
.botao.largo{width:100%}
.botao:disabled{opacity:.6;cursor:default;transform:none}
.brilho::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:brilho 4.5s ease-in-out infinite}
@keyframes brilho{0%,60%{left:-60%}85%,100%{left:130%}}

/* ---------- Hero ---------- */
.hero{overflow:hidden;background:radial-gradient(1200px 600px at 75% 40%,#1A4268 0%,var(--marinho) 55%,var(--marinho3) 100%);color:var(--claro-esc);padding:80px 0 110px}
.hero .rumos{position:absolute;inset:0;width:100%;height:100%}
.rumos .linhas>*{stroke-opacity:.10;stroke-dasharray:1600;stroke-dashoffset:1600;animation:traca 3.2s var(--ease) forwards}
.rumos .linhas>*:nth-child(odd){animation-delay:.25s}
.rumos .linhas circle{stroke-dasharray:2700;stroke-dashoffset:2700;animation-duration:4s;animation-delay:.6s}
@keyframes traca{to{stroke-dashoffset:0}}
.rosa-fundo{position:absolute;width:520px;right:-120px;top:50%;margin-top:-260px;opacity:.06;animation:gira 120s linear infinite;pointer-events:none}
@keyframes gira{to{transform:rotate(360deg)}}
.hero-conteudo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero h1{color:var(--pergaminho)}
.hero .lead{font-size:19px;max-width:560px}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Demonstração animada */
.demo{background:rgba(247,244,238,.98);border-radius:18px;box-shadow:0 40px 80px rgba(3,12,24,.45),0 0 0 1px rgba(242,235,221,.25);overflow:hidden;color:var(--texto);transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);transition:transform .6s var(--ease)}
.demo:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
.demo-topo{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#EDE6D8;font-size:12px;color:var(--suave);border-bottom:1px solid var(--linha)}
.pontos{display:flex;gap:6px}.pontos i{width:10px;height:10px;border-radius:50%;background:#D6CDBB;display:block}
.demo-corpo{padding:20px 22px 22px}
.demo-item{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.demo-pn{font-family:Sora,Inter,sans-serif;font-weight:600;color:var(--marinho);font-size:15px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.demo-cli{font-family:Inter,sans-serif;font-weight:400;color:var(--suave);font-size:13px}
.demo-desc{font-size:14px;color:var(--texto);min-height:44px;margin-top:6px}
.cursor{display:inline-block;width:2px;height:1em;background:var(--verde);vertical-align:-2px;margin-left:1px;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.demo-etapas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.demo-etapas li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid transparent;background:#fff;opacity:.38;transform:translateX(8px);transition:all .5s var(--ease)}
.demo-etapas li b{display:block;color:var(--marinho);font-size:14px}
.demo-etapas .det{display:block;font-size:13px;color:var(--suave)}
.demo-etapas li.ativa{opacity:1;transform:none;border-color:var(--verde-cla);box-shadow:0 8px 20px rgba(27,127,121,.15)}
.demo-etapas li.feita{opacity:1;transform:none}
.icone{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #CFC6B5;margin-top:1px;position:relative;transition:all .4s}
li.ativa .icone{border-color:var(--verde);border-top-color:transparent;animation:gira .8s linear infinite}
li.feita .icone{background:var(--verde);border-color:var(--verde)}
li.feita .icone::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.attr{display:inline-block;margin:6px 6px 0 0;padding:3px 9px;border-radius:20px;background:var(--pergaminho);color:var(--marinho);font-size:12px;opacity:0;transform:translateY(6px);transition:all .4s var(--ease)}
.attr.on{opacity:1;transform:none}
.barra{display:block;height:6px;border-radius:6px;background:#EAE3D5;margin:7px 0 5px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--verde),var(--verde-cla));border-radius:6px;transition:width 1.6s var(--ease)}
.demo-final{margin-top:14px;padding:12px 14px;border-radius:12px;background:#E3F1EE;color:var(--verde-esc);font-size:14px;opacity:0;transform:scale(.96);transition:all .5s var(--ease)}
.demo-final.on{opacity:1;transform:none}
.selo-ok{display:inline-block;background:var(--verde);color:#fff;font-size:12px;font-weight:600;padding:2px 9px;border-radius:20px;margin-right:6px}

/* ---------- Números ---------- */
.numeros{background:var(--marinho3);color:var(--claro-esc);padding:44px 0}
.grade4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.numero b{display:block;font-family:Sora,Inter,sans-serif;font-size:clamp(32px,4vw,44px);color:var(--pergaminho);font-weight:600;line-height:1.1}
.numero span{font-size:14px;color:#AEB8C4}

/* ---------- Cartões ---------- */
.grade3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.cartao{position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:16px;padding:28px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.cartao:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(14,42,71,.12);border-color:#CFC4AE}
.cartao p{margin:0;color:var(--texto);font-size:16px}
.cartao.claro{background:var(--pergaminho);border-color:transparent}
.cartao.escuro{background:rgba(242,235,221,.05);border-color:rgba(242,235,221,.14)}
.cartao.escuro h3{color:var(--pergaminho)}.cartao.escuro p{color:var(--claro-esc)}
.cartao.escuro:hover{border-color:rgba(200,134,42,.6);box-shadow:0 22px 44px rgba(0,0,0,.25)}
.tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--ambar);background:#FBF1E2;padding:3px 10px;border-radius:20px;margin-bottom:14px}

/* ---------- Catálogo ---------- */
.catalogo{background:linear-gradient(180deg,var(--fundo),var(--pergaminho))}
.catalogo-grade{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.checks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.checks li{padding-left:34px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--verde)}
.checks li::after{content:"";position:absolute;left:8px;top:7px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.checks b{color:var(--marinho)}
.ficha{background:#fff;border-radius:18px;padding:22px;box-shadow:0 30px 60px rgba(14,42,71,.14);border:1px solid var(--linha)}
.ficha-topo{display:flex;justify-content:space-between;align-items:center;font-family:Sora,Inter,sans-serif;font-weight:600;color:var(--marinho);margin-bottom:14px}
.pill{font-family:Inter,sans-serif;font-size:12px;font-weight:500;background:var(--pergaminho);padding:4px 10px;border-radius:20px;color:var(--marinho)}
.ficha-linha{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border:1px solid #EEE7DA;border-radius:11px;margin-bottom:9px;opacity:.35;transition:all .5s var(--ease)}
.ficha-linha .rot{font-size:14px;color:var(--texto)}
.ficha-linha .rot i{font-style:normal;font-size:11px;color:var(--suave);margin-left:6px;background:#F4EFE6;padding:1px 7px;border-radius:10px}
.ficha-linha .val{font-weight:600;color:var(--marinho);font-size:14px;opacity:0;transform:translateX(-8px);transition:all .4s var(--ease) .15s;white-space:nowrap}
.ficha-linha.on{opacity:1;border-color:#CDE6E2;background:#F6FBFA}
.ficha-linha.on .val{opacity:1;transform:none}
.ficha-linha.cond{max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;border-width:0;overflow:hidden}
.ficha-linha.cond.on{max-height:60px;padding-top:12px;padding-bottom:12px;margin-bottom:9px;border-width:1px}
.ficha-alerta{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:11px;background:#FBF1E2;color:#7A4F12;font-size:13.5px;opacity:0;transform:translateY(8px);transition:all .5s var(--ease)}
.ficha-alerta.on{opacity:1;transform:none}
.pulso{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ambar);margin-top:5px;box-shadow:0 0 0 0 rgba(200,134,42,.6);animation:pulso 1.8s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 12px rgba(200,134,42,0)}100%{box-shadow:0 0 0 0 rgba(200,134,42,0)}}

/* ---------- Integração ---------- */
.integracao{background:radial-gradient(900px 500px at 50% 0%,#1A4268,var(--marinho) 60%);color:var(--claro-esc);overflow:hidden}
.integracao h2{color:var(--pergaminho)}
.intro{max-width:680px;font-size:18px}
.fluxo{display:grid;grid-template-columns:170px 1fr 170px;gap:22px;align-items:center;margin:46px 0 10px}
.no{background:rgba(242,235,221,.06);border:1px solid rgba(242,235,221,.18);border-radius:18px;padding:22px 14px;text-align:center;display:grid;justify-items:center;gap:6px}
.no b{color:var(--pergaminho);font-family:Sora,Inter,sans-serif}
.no span{font-size:13px;color:#AEB8C4}
.no-a img{animation:gira 40s linear infinite}
.gov{width:44px;height:44px;border-radius:12px;background:var(--pergaminho);color:var(--marinho);display:grid;place-items:center;font-family:Sora,Inter,sans-serif;font-weight:600}
.trilhos{display:grid;gap:14px}
.trilho{position:relative;height:30px;border-radius:15px;background:repeating-linear-gradient(90deg,rgba(242,235,221,.18) 0 8px,transparent 8px 16px) center/100% 2px no-repeat}
.pacote{position:absolute;top:50%;left:0;transform:translate(0,-50%);white-space:nowrap;font-size:13px;font-weight:600;padding:5px 12px;border-radius:20px;background:var(--verde);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:0}
.volta .pacote{background:var(--ambar)}
.fluxo.anima .p1{animation:vai 6s var(--ease) infinite}
.fluxo.anima .p2{animation:vai 6s var(--ease) .5s infinite}
.fluxo.anima .p3{animation:vai 6s var(--ease) 1s infinite}
.fluxo.anima .p4{animation:volta 6s var(--ease) 2.2s infinite}
@keyframes vai{0%{left:0;opacity:0}8%{opacity:1}45%{left:calc(100% - 110px);opacity:1}55%,100%{left:calc(100% - 110px);opacity:0}}
@keyframes volta{0%{left:calc(100% - 120px);opacity:0}8%{opacity:1}45%{left:0;opacity:1}55%,100%{left:0;opacity:0}}
.integra-cards{margin-top:40px}

/* ---------- Como funciona ---------- */
.como{background:var(--branco)}
.passo{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center;margin-top:72px}
.passo.inverso .passo-texto{order:2}
.tela{border-radius:16px;overflow:hidden;border:1px solid var(--linha);box-shadow:0 22px 50px rgba(14,42,71,.14);transition:transform .5s var(--ease),box-shadow .5s}
.tela:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 30px 60px rgba(14,42,71,.2)}
.tela img{transition:transform 1.2s var(--ease)}
.tela:hover img{transform:scale(1.03)}
.num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--marinho);color:var(--pergaminho);font-family:Sora,Inter,sans-serif;font-weight:600;margin-bottom:16px}
.extras{margin-top:80px}
.radar{display:block;width:44px;height:44px;border-radius:50%;border:2px solid var(--verde);position:relative;margin-bottom:14px;overflow:hidden;background:radial-gradient(circle,transparent 30%,rgba(27,127,121,.12) 31%,transparent 33%,transparent 60%,rgba(27,127,121,.12) 61%,transparent 63%)}
.radar i{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(27,127,121,.55),transparent 25%);border-radius:50%;animation:gira 2.6s linear infinite}

/* ---------- Segurança ---------- */
.seguranca{background:var(--marinho);color:var(--claro-esc)}
.seguranca h2{color:var(--pergaminho)}
.lista-seg{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 44px}
.lista-seg li{padding-left:28px;position:relative}
.lista-seg li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--ambar);transform:rotate(45deg)}
.lista-seg strong{color:var(--pergaminho);font-weight:600}

/* ---------- Nome ---------- */
.nome-grade{display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:center}
.rosa-gira{width:240px;margin:0 auto;transition:transform 1.4s var(--ease)}
.rosa-gira:hover{transform:rotate(45deg)}
.assinatura{margin-top:24px;padding-top:20px;border-top:1px solid var(--linha);color:var(--suave);font-size:16px}

/* ---------- Contato ---------- */
.contato{background:var(--pergaminho)}
.contato-grade{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.contato .selo{color:var(--ambar)}
.pequeno-texto{font-size:15px;color:var(--suave)}
form{background:var(--branco);border:1px solid var(--linha);border-radius:18px;padding:30px;box-shadow:0 24px 50px rgba(14,42,71,.10)}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:14px;font-weight:500;color:var(--marinho);margin-bottom:6px}
.campo label span{color:var(--suave);font-weight:400}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--marinho);background:#fff;border:1px solid var(--linha);border-radius:10px;padding:12px 13px;transition:border-color .2s,box-shadow .2s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(27,127,121,.15)}
.campo.erro input,.campo.erro select{border-color:#C0392B}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.armadilha{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--suave);margin:4px 0 18px}
.aceite input{margin-top:4px}
.retorno{margin:14px 0 0;font-size:15px;min-height:1.4em}
.retorno.ok{color:var(--verde-esc)}.retorno.erro{color:#B03A2E}

/* ---------- Rodapé ---------- */
.rodape{background:var(--marinho3);color:#AEB8C4;padding:44px 0}
.rodape-grade{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.rodape p{margin:0}
.rodape nav{display:flex;gap:20px;flex-wrap:wrap}
.rodape a{color:var(--claro-esc);text-decoration:none;font-size:15px}
.rodape .copy{width:100%;font-size:13px;color:#8796A6}
.texto-legal{max-width:760px;margin:0 auto;padding:56px 16px 80px}
.texto-legal h1{font-size:34px}
.texto-legal h2{font-size:21px;margin-top:32px}

/* ---------- Surgir na rolagem ---------- */
.js .surge{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .surge.visto{opacity:1;transform:none}
.js .demo.surge{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(30px)}
.js .demo.surge.visto{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg)}
.js .demo.surge.visto:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}

@media (max-width:980px){
  .menu a:not(.botao):not(.entrar){display:none}
  .hero-conteudo,.passo,.contato-grade,.nome-grade,.catalogo-grade{grid-template-columns:1fr}
  .passo.inverso .passo-texto{order:0}
  .grade3,.lista-seg{grid-template-columns:1fr}
  .grade4{grid-template-columns:repeat(2,1fr)}
  .fluxo{grid-template-columns:1fr;gap:16px}
  .demo,.js .demo.surge,.js .demo.surge.visto{transform:none}
  section{padding:68px 0}
}
@media (max-width:520px){
  .menu .botao{display:none}
  .duas{grid-template-columns:1fr}
  .hero{padding:52px 0 70px}
  .rosa-fundo{width:360px;right:-160px;margin-top:-180px}
}
@media (prefers-reduced-motion:reduce){
  /* Sem giros nem deslocamentos; o que é conteúdo (demonstração, ficha, números) continua, só com troca suave. */
  .rosa-fundo,.no-a img,.radar i,li.ativa .icone,.brilho::after,.cursor{animation:none !important}
  .rumos .linhas>*{animation:none;stroke-dashoffset:0}
  .js .surge,.js .demo.surge{transform:none !important;transition:opacity .6s ease}
  .demo,.demo:hover,.tela:hover,.tela:hover img,.cartao:hover,.botao:hover,.rosa-gira:hover,.marca:hover img{transform:none !important}
  .demo-etapas li,.attr,.ficha-linha .val,.ficha-alerta,.demo-final{transform:none !important}
  .fluxo.anima .pacote{animation:pisca-suave 3s ease-in-out infinite !important;left:50%;transform:translate(-50%,-50%)}
  .fluxo.anima .p2{animation-delay:.4s !important}.fluxo.anima .p3{animation-delay:.8s !important}.fluxo.anima .p4{animation-delay:1.6s !important}
}
@keyframes pisca-suave{0%,100%{opacity:.25}50%{opacity:1}}