/* Refino da home — antes inline em index.html; o CSP do site (_headers)
   bloqueia <style> e <script> inline, por isso mora em arquivo. */
/* Refinamentos da página original. Componentes e identidade preservados. */
.refino{--txt-3:#9BAFA2;--divisa:#304037}
.refino{scroll-padding-top:84px}
.refino .heroi__in{padding-top:clamp(42px,5.5vw,72px);padding-bottom:36px;max-width:1120px}
.refino .heroi__in .rotulo:first-child{margin-bottom:22px}
.refino h1{font-size:clamp(42px,6.7vw,84px);line-height:1.04}
.refino h1 span{color:#99B5A3}
.refino .heroi__sub{max-width:42em;font-size:clamp(17px,1.6vw,20px);margin-top:22px}
.refino .heroi .acoes{margin-top:27px}
.refino .heroi .rotulo--fino{font-size:10px;margin-top:15px}
.refino .heroi{border-bottom:0}
.refino #tela .secao__in{padding-top:16px;padding-bottom:60px}
.refino #tela .titulo-centro{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:10px 70px;text-align:left;margin-bottom:28px}
.refino #tela .titulo-centro>.rotulo{grid-column:1/-1;font-size:10px}
.refino #tela h2{font-size:clamp(27px,3.3vw,40px);line-height:1.12;max-width:none}
.refino #tela .titulo-centro .lead{font-size:15px;line-height:1.6;color:#afc2b6}
.refino #tela .janela{border-color:#415448;box-shadow:0 28px 75px #0005}
.refino .destaques{margin-top:28px}
.refino-legenda{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px;color:#9EB2A5;font-size:11px}
.refino-ampliar{border:1px solid #405b49;border-radius:5px;background:#1d2c22;color:#d1e6d8;padding:9px 13px;font:12px var(--fonte);cursor:pointer;display:flex;gap:16px}
.refino-ampliar:hover{background:#304736}
.refino #fontes .bloco{gap:50px;padding-top:80px;padding-bottom:80px;grid-template-columns:1.1fr 1fr}
.refino #fontes h2{font-size:clamp(32px,3.7vw,46px)}
.refino #fontes .lead{font-size:16px}
.contexto-historia{list-style:none;display:grid;gap:0;margin:26px 0;padding:0;border-left:1px solid #4b6655}
.contexto-historia li{position:relative;padding:0 0 19px 21px;font-size:16px;color:#e4eee7}
.contexto-historia li:last-child{padding-bottom:0}
.contexto-historia li:before{content:'';position:absolute;top:4px;left:-4px;width:7px;height:7px;border-radius:50%;background:#9cbea8;border:2px solid #142019}
.contexto-historia li>span{display:block;color:#9bb9a6;font:10px var(--mono);letter-spacing:.1em;margin-bottom:4px}
.refino #fontes .fontes{margin:0;padding:22px 12px;border:1px solid #354b3c;border-radius:12px;background:#142019}
.refino-fluxo{padding:62px 0 0;border-bottom:1px solid var(--divisa)}
.refino-fluxo__titulo{text-align:center;padding:0 24px}
.refino-fluxo__titulo h2{font-size:clamp(28px,3vw,37px);line-height:1.15;margin-top:14px}
.refino-fluxo .fluxo--h{max-width:1050px;padding-top:30px}
.refino-fluxo .selos{padding-top:22px;padding-bottom:55px}
.refino-fluxo .selos li{background:transparent;border:0;border-left:1px solid #3a5142;border-radius:0;padding:7px 24px}
.refino-fluxo .selos b{font-size:29px}
.refino-fluxo .selos span{font-size:12px}
.refino .secao__in{padding-top:clamp(65px,7vw,96px);padding-bottom:clamp(65px,7vw,96px)}
.refino .perguntas summary{padding-top:23px;padding-bottom:23px}
.refino .recursos a{transition:border-color .2s,background .2s}
.refino .refino-menu{display:none}
.refino-dialog{width:min(1220px,calc(100vw - 32px));max-width:none;max-height:90vh;padding:0;border:1px solid #526d5b;border-radius:12px;background:#142019;color:#d9e8de;overflow:auto}
.refino-dialog::backdrop{background:#020905dc;backdrop-filter:blur(8px)}
.refino-dialog__barra{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #344b3c;font-size:13px;position:sticky;top:0;background:#142019;z-index:3}
.refino-dialog button{border:1px solid #526d5b;padding:8px 13px;border-radius:4px;background:#23382b;color:#e2f0e7;font:12px var(--fonte);cursor:pointer}
.refino-dialog__tela{overflow:auto;padding:20px}
.refino-dialog__tela .janela{transform:none!important;margin:0 auto!important;width:1120px}
.refino-dialog>p{font-size:11px;color:#a7c0b0;padding:0 20px 15px}
@media(max-width:880px){.refino .refino-menu{display:block;margin-left:auto;position:relative}.refino-menu summary{list-style:none;cursor:pointer;font-size:12px;color:#ccdfd2;display:flex;gap:10px}.refino-menu summary::-webkit-details-marker{display:none}.refino-menu nav{position:absolute;right:0;top:36px;display:grid;min-width:210px;padding:12px;background:#1b2b21;border:1px solid #486451;border-radius:6px;box-shadow:0 15px 40px #0007}.refino-menu a{padding:10px 12px;text-decoration:none;font-size:13px}.refino-menu a:hover{background:#2a4232}.refino .topo__in{gap:20px}.refino .topo__in .botao{margin-left:0}.refino #fontes .bloco{grid-template-columns:1fr;gap:35px}.refino #fontes .fontes{max-width:560px;width:100%;margin:auto}}
@media(max-width:600px){.refino .heroi__in{padding-top:40px;padding-bottom:32px}.refino h1{font-size:clamp(32px,8vw,44px);letter-spacing:-.04em}.refino .heroi__sub{font-size:16px}.refino .heroi .rotulo{font-size:9px}.refino .heroi .acoes{gap:10px}.refino .heroi .botao{font-size:12px;padding:0 15px;min-height:46px}.refino #tela .titulo-centro{grid-template-columns:1fr;gap:13px;margin-bottom:22px}.refino #tela .titulo-centro .lead{font-size:14px}.refino #tela .secao__in{padding-bottom:40px}.refino #tela h2{font-size:30px}.refino #tela .palco{overflow:hidden;border-radius:6px}.refino-legenda{font-size:9px;gap:10px}.refino-ampliar{font-size:10px;padding:9px;gap:5px;white-space:nowrap}.refino #fontes .bloco{padding-top:50px;padding-bottom:50px}.refino #fontes h2{font-size:33px}.refino #fontes .lead{font-size:15px}.refino .destaques{gap:20px}.refino-fluxo .selos li{padding:8px 16px}.refino-fluxo .selos b{font-size:26px}.refino-fluxo{padding-top:45px}.refino .topo__in{gap:13px}.refino .logotipo{font-size:19px}.refino .topo__in .botao{padding:0 12px;font-size:11px}.refino .refino-menu summary{font-size:11px}.refino-dialog__barra{padding:12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.refino *{scroll-behavior:auto!important}.refino .pacotes{display:none}}
/* A rolagem explica o produto, destacando conteúdo existente na interface. */
.uso-rolagem{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:38px;position:relative;align-items:start}
.uso-visual{position:sticky;top:100px;padding:20px 0}
.uso-etapa{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.4;transition:opacity .45s ease;padding:35px 0;border-bottom:1px solid #314b3a}
.uso-etapa:last-child{border-bottom:0;min-height:58vh}
.uso-etapa.ativa{opacity:1}
.uso-etapa h3{font-size:27px;line-height:1.15;letter-spacing:-.035em;margin:16px 0}
.uso-etapa>p:not(.rotulo){font-size:14px;line-height:1.65;color:#afc5b7}
.uso-indice{font-size:10px;color:#9dc3ab;margin-top:24px}
.uso-visual .bal,.uso-visual .app__banco{transition:opacity .45s,box-shadow .45s,border-color .45s}
.uso-visual[data-foco="documento"] .bal:not(.bal--doc),.uso-visual[data-foco="audio"] .bal:not(.bal--audio){opacity:.42}
.uso-visual[data-foco="documento"] .bal--doc,.uso-visual[data-foco="audio"] .bal--audio{box-shadow:0 0 0 2px #75d595,0 0 32px #5fd68a24;position:relative;z-index:2}
.uso-visual[data-foco="base"] .app__banco{box-shadow:inset 3px 0 #75d595;background:#233127}
.uso-visual[data-foco="audio"] .onda i{animation:ondaUso 1.3s ease-in-out infinite alternate;transform-origin:center}
.uso-visual[data-foco="audio"] .onda i:nth-child(3n){animation-delay:.3s}
.uso-visual[data-foco="audio"] .onda i:nth-child(2n){animation-delay:.7s}
@keyframes ondaUso{from{transform:scaleY(.55);opacity:.55}to{transform:scaleY(1);opacity:1}}
.refino .revela{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.refino .js-anima .revela:not(.visivel){transform:translateY(18px)}
.contexto-historia li{transition:opacity .5s,transform .5s}
.contexto-historia li.em-espera{opacity:.2;transform:translateX(-8px)}
.refino .topo:after{content:'';position:absolute;bottom:-1px;left:0;height:2px;width:var(--leitura,0%);background:#8fbea0;transition:width .1s linear}
@media(min-width:1400px){.uso-visual{top:130px}}
@media(max-width:920px){.uso-rolagem{grid-template-columns:minmax(0,1fr) 210px;gap:24px}.uso-etapa h3{font-size:23px}.uso-etapa>p:not(.rotulo){font-size:13px}}
@media(max-width:650px){.uso-rolagem{display:flex;flex-direction:column;gap:0}.uso-visual{top:65px;width:100%;z-index:5;background:#111814;padding:12px 0 10px;border-bottom:1px solid #344e3d}.uso-etapas{width:100%}.uso-etapa{min-height:62vh;padding:45px 12px 35px}.uso-etapa:last-child{min-height:55vh}.uso-etapa h3{font-size:30px}.uso-etapa>p:not(.rotulo){font-size:16px;max-width:35em}.uso-indice{display:none}.refino #tela .palco:before{display:none}.refino-legenda{margin-top:10px}.uso-visual .janela{box-shadow:none!important}}
@media(prefers-reduced-motion:reduce){.uso-etapa{opacity:1;min-height:0;padding:25px 0}.uso-visual .onda i{animation:none!important}.contexto-historia li.em-espera{opacity:1;transform:none}.uso-visual{position:relative;top:0}.refino .topo:after{display:none}}
html:has(body.refino){scroll-padding-top:84px}
@media(max-width:650px){.uso-etapa{min-height:52vh}.uso-etapa:last-child{min-height:48vh}}

/* Botões desenhados dentro das telas ilustrativas não são clicáveis:
   só parecem botões do app, então não reagem ao mouse. */
.integ__lista button, .pm-gerar, .porta__botao, .conv__busca { pointer-events: none; cursor: default; }