:root{color-scheme:dark}
.mandate .card-copy{justify-content:flex-start}
html #seguranca .security{background:transparent;border-color:transparent;box-shadow:none;border-radius:0}
#infraestrutura .comparison-network{height:260px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
#infraestrutura .fragmented{height:260px}
.comparison-network .network-label{font-size:10px;padding:9px 12px}
.comparison-network .network-label>span{display:none}
.comparison-network .nl1{left:15%;top:29%}
.comparison-network .nl3{left:66%;top:17%}
.comparison-network .nl2{left:20%;top:77%}
.comparison-network .nl4{left:85%;top:34%}
.comparison-network .nl5{left:80%;top:82%}
.comparison-network .network-center{top:50%;padding:12px 16px;gap:10px;font-size:13px;white-space:nowrap}
.comparison-network .center-symbol img{width:23px;height:23px}
@media(max-width:1100px){.comparison-network .network-label{font-size:8px;padding:8px 7px}}
#step-description{text-transform:none}
#diferenciais .bento-card p{text-transform:none}
#diferenciais .card-copy h3{padding-right:0}
.mandate-ring{position:relative}
.mandate-ring:after{content:'';position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle at 50% 4px,#2fae8e 0 3px,transparent 4px);animation:mandate-orbit 9s linear infinite;pointer-events:none}
.mandate-visual>span{transform:translate(-50%,-50%);animation:mandate-breathe 5s ease-in-out infinite}
.mandate-visual>span:nth-child(2){top:calc(50% - 78px);left:calc(50% - 58px);bottom:auto;right:auto}
.mandate-visual>span:nth-child(3){top:calc(50% + 74px);left:calc(50% - 64px);bottom:auto;right:auto;animation-delay:-1.7s}
.mandate-visual>span:nth-child(4){top:calc(50% - 24px);left:calc(50% + 93px);bottom:auto;right:auto;animation-delay:-3.3s}
.mandate-visual>span:after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid #2fae8e;background:#2fae8e18;box-shadow:0 0 16px #2fae8e55,inset 0 0 8px #2fae8e18;pointer-events:none;opacity:0;animation:mandate-light 9s linear infinite}
.mandate-visual>span:nth-child(2):after{animation-delay:-.92s}
.mandate-visual>span:nth-child(3):after{animation-delay:-3.48s}
.mandate-visual>span:nth-child(4):after{animation-delay:-7.11s}
@keyframes mandate-orbit{to{transform:rotate(360deg)}}
@keyframes mandate-breathe{0%,100%{transform:translate(-50%,-50%) translateY(3px) scale(1)}50%{transform:translate(-50%,-50%) translateY(-3px) scale(1.035)}}
@keyframes mandate-light{0%,100%{opacity:1}9%,91%{opacity:0}}
@media(prefers-reduced-motion:reduce){.mandate-ring:after,.mandate-visual>span,.mandate-visual>span:after{animation:none}}
.flow-detail{align-items:start}
.flow-detail h3{margin-top:0}
.steps{grid-template-columns:repeat(6,minmax(0,1fr))}
.steps:before{left:8.333%;right:8.333%}
.steps:after{left:8.333%;animation-name:six-step-flow}
@keyframes six-step-flow{to{left:calc(91.667% - 35px)}}
@media(max-width:600px){@keyframes six-step-flow{to{left:calc(91.667% - 20px)}}}


.fragmented span{background:#202020;border-color:#383838}
.shared span{background:#26332f;border-color:rgba(47,174,142,.18)}
.shared:before,.shared:after{background:rgba(47,174,142,.65)}
.theme-toggle{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid #ffffff29;border-radius:9px;background:#151515;color:#f0f6f6;box-shadow:0 4px 20px #0003;font-size:12px;font-weight:600;cursor:pointer}.theme-toggle .ui-icon{width:20px;height:20px}.theme-toggle:focus-visible{outline:2px solid #2fae8e;outline-offset:4px}
html[data-theme=light]{color-scheme:light;--ink:#17221f;--muted:#55615c;--line:#17221f26;--pale:#e9edeb}
html[data-theme=light] body{background:#f8faf9;color:#17221f}
html[data-theme=light] .header,html[data-theme=light] .header nav{background:#f8faf9;border-color:#17221f20}
html[data-theme=light] .header{box-shadow:0 6px 28px #17221f08}
html[data-theme=light] .brand-logo{filter:brightness(0)}
html[data-theme=light] .dropdown,html[data-theme=light] .header .institutional-dropdown{background:#fff;border-color:#17221f26;box-shadow:0 16px 40px #17221f16}
html[data-theme=light] .institutional-item,html[data-theme=light] .institutional-item>.ui-icon{color:#17221f}
html[data-theme=light] .institutional-description,html[data-theme=light] .coming-soon{color:#5b6861}
html[data-theme=light] .institutional-item+.institutional-item{border-color:#17221f12}
html[data-theme=light] .button,html[data-theme=light] .header .nav-contact,html[data-theme=light] .hero .text-link{background:#e7ece9;color:#17221f}
html[data-theme=light] .hero .button.dark{background:#2fae8e;color:#030303}
html[data-theme=light] .hero-network{background:linear-gradient(115deg,#edf2ef,#f5f8f6);border-color:#d3ded7}
html[data-theme=light] .network-label{background:#fff;border-color:#cdd8d1;color:#17221f;box-shadow:0 4px 10px #17221f05}
html[data-theme=light] .network-center,html[data-theme=light] .shared b,html[data-theme=light] .record-square{background:#174c3e;color:white}
html[data-theme=light] .network-caption,html[data-theme=light] .metrics-note{color:#5b6861}
html[data-theme=light] .metric strong{color:#187b63}
html[data-theme=light] .before{background:#e7eae8;color:#5a625e;border-color:#d5dcd7}
html[data-theme=light] .after{background:#e6eee9;border-color:#cadbd1}
html[data-theme=light] .fragmented span{background:#f3f4f3;border-color:#d4d8d5}
html[data-theme=light] .shared span{background:#fff;border-color:rgba(47,174,142,.18)}
html[data-theme=light] .fragmented small{color:#727c75}
html[data-theme=light] .operation-flow,html[data-theme=light] .bento-card,html[data-theme=light] .persona-tabs{background:#edf1ef;border-color:#d5dfd8}
html[data-theme=light] .step{color:#637169}
html[data-theme=light] .step-icon{background:white;border-color:#cdd8d1}
html[data-theme=light] .step.active{color:#17221f}
html[data-theme=light] .step.active .step-icon{background:#174c3e;color:white}
html[data-theme=light] .flow-detail,html[data-theme=light] .card-copy{background:#fff;border-color:#d5dfd8}
html[data-theme=light] .quiet-button,html[data-theme=light] .flow-foot,html[data-theme=light] .flow-foot a,html[data-theme=light] .record-header,html[data-theme=light] .record-line small,html[data-theme=light] .card-index{color:#596960}
html[data-theme=light] .record-branches span,html[data-theme=light] .validation-visual>span,html[data-theme=light] .mandate-visual>span{background:#fff;border-color:#d1ddd5}
html[data-theme=light] .validation-visual i{color:#187b63}
html[data-theme=light] .mandate-ring{border-color:#2fae8e55;box-shadow:0 0 0 18px #dce8e1}
html[data-theme=light] .mandate-ring small{color:#637169}
html[data-theme=light] .connection-card,html[data-theme=light] .persona-content{background:#e7eeea}
html[data-theme=light] .persona-tabs button{color:#647068;border-color:#ccd8d0}
html[data-theme=light] .persona-tabs button[aria-selected=true]{color:#17221f}
html[data-theme=light] .persona-tags span{background:#f9fbfa;border-color:#ccd8d0}
html[data-theme=light] .persona-number{color:#bacfc03d}
html[data-theme=light] .security{background:#e7eeea;color:#17221f;border-color:#cbdad0}
html[data-theme=light] .security .eyebrow,html[data-theme=light] .security-items article>span{color:#187b63}
html[data-theme=light] .security>div>p,html[data-theme=light] .security-items p{color:#55655b}
html[data-theme=light] .security-items article{border-color:#cbdad0}
html[data-theme=light] .asset-placeholder{background:#edf1ef;border-color:#d3ddd6}
html[data-theme=light] .asset-caption,html[data-theme=light] .asset-caption>span{color:#65756b}
html[data-theme=light] input,html[data-theme=light] textarea{color:#17221f;border-color:#a7b9ac}
html[data-theme=light] input::placeholder,html[data-theme=light] textarea::placeholder{color:#66786b}
html[data-theme=light] .form-note,html[data-theme=light] .footer-top>span,html[data-theme=light] .footer-bottom{color:#617167}
html[data-theme=light] .form-status{color:#187b63}
html[data-theme=light] .theme-toggle{background:white;color:#17221f;border-color:#cdd8d1}
@media(max-width:600px){.theme-toggle{right:14px;bottom:14px;padding:10px 12px}}

/* Dark cards: near-black surfaces with a soft overhead highlight. */
html:not([data-theme=light]) :is(.bento-card,.operation-flow,.solutions,.security,.comparison>div){
  background:radial-gradient(ellipse at 50% 0%,#ffffff06,transparent 65%),#080808;
  border-color:#ffffff14;
  box-shadow:inset 0 1px 0 #ffffff05,0 12px 32px #00000020;
}
html:not([data-theme=light]) .card-copy{background:linear-gradient(180deg,#0a0a0a,#080808)}
html:not([data-theme=light]) .persona-tabs{background:#080808}
html:not([data-theme=light]) .persona-content{background:radial-gradient(ellipse at 50% 0%,#ffffff06,transparent 70%),#0b0b0b}
html:not([data-theme=light]) .flow-detail{
  background:linear-gradient(160deg,#181818,#0e0e0e 65%);
  border-color:#ffffff14;
  box-shadow:inset 0 1px 0 #ffffff06;
}
html:not([data-theme=light]) :is(.record-branches span,.validation-visual>span,.mandate-visual>span,.persona-tags span){
  background:linear-gradient(180deg,#1b1b1b,#111111);
  border-color:#ffffff18;
  box-shadow:inset 0 1px 0 #ffffff08,0 4px 12px #00000030;
}
html:not([data-theme=light]) .fragmented span{
  background:linear-gradient(160deg,#222222,#191919);
  border-color:#ffffff14;
  box-shadow:inset 0 1px 0 #ffffff04;
}
html:not([data-theme=light]) .shared span{
  background:linear-gradient(160deg,#2a302e,#202423);
  border-color:rgba(47,174,142,.18);
  box-shadow:inset 0 1px 0 #ffffff08,0 4px 12px #00000020;
}
html:not([data-theme=light]) .shared b{
  background:linear-gradient(180deg,#1a2924,#12201b);
  box-shadow:inset 0 1px 0 #2fae8e18,0 0 24px #2fae8e0a;
}

/* A light chapter within either theme. */
html #infraestrutura{
  --ink:#17221f;--muted:#55615c;--line:#17221f26;
  color-scheme:light;color:#17221f;background:#f8faf9;
  width:100%;max-width:none;padding-inline:max(50px,calc((100% - 1280px)/2));
  padding-bottom:96px;
}
html #infraestrutura .before{background:#e7eae8;color:#5a625e;border-color:#d5dcd7;box-shadow:none}
html #infraestrutura .after{background:#e6eee9;border-color:#cadbd1;box-shadow:none}
html #infraestrutura .fragmented span{background:#f3f4f3;border-color:#d4d8d5;box-shadow:none}
html #infraestrutura .fragmented small{color:#727c75}
html #infraestrutura .network-label{background:#fff;color:#17221f;border-color:#cdd8d1;box-shadow:0 4px 10px #17221f05}
html #infraestrutura .network-center{background:#174c3e;color:#fff;border-color:#2fae8e66;box-shadow:0 10px 26px #17221f18}
html #infraestrutura .connections{stroke:#78968a}
html #infraestrutura .connections .flowing{stroke:#2fae8e}
/* Entre 900 e 1150 os seis subtitulos voltam a quebrar em duas linhas e a
   trilha fica irregular: ate la ficam so o numero e o nome. */
@media(min-width:901px) and (max-width:1150px){
  #como-funciona .flow-sub{display:none}
}
@media(max-width:900px){html #infraestrutura{padding-inline:24px;padding-bottom:72px}}
/* Individual hover feedback for validation balloons. */
.validation-visual>span{position:relative;transition:scale .22s ease,box-shadow .22s ease,border-color .22s ease;transform-origin:center}
html #diferenciais .validation-visual>span:hover{scale:1.035;z-index:2;border-color:#2fae8e70;box-shadow:0 0 24px #2fae8e28,0 5px 14px #00000012}
@media(prefers-reduced-motion:reduce){.validation-visual>span{transition:none}}

/* One persistent record viewed by each authorized participant. */
.shared-record-demo{padding:32px;min-height:285px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.record-audiences{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.record-audiences button{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid #ffffff20;border-radius:20px;background:#131817;color:#a4b0ac;font:inherit;font-size:10px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.record-audiences button[aria-selected=true]{border-color:#2fae8e99;background:#183029;color:#e8f6f1}
.record-audiences button:focus-visible{outline:2px solid #2fae8e;outline-offset:3px}
.record-audiences i{width:5px;height:5px;flex:none;border-radius:50%;background:#637a72;animation:record-sync 6s ease-in-out infinite}
.shared-document{width:min(100%,350px);border:1px solid #ffffff1c;border-radius:12px;background:#101513;box-shadow:0 8px 28px #0002;padding:20px}
.document-heading{display:flex;align-items:center;gap:10px;font-size:12px;color:#e6f0ec}.document-heading svg{color:#2fae8e;flex:none}.document-check{margin-left:auto;color:#2fae8e}
.document-lines{display:grid;gap:9px;margin:20px 0}.document-lines span{height:5px;border-radius:3px;background:#ffffff14;width:90%}.document-lines span:nth-child(2){width:70%;animation:record-line-sync 6s ease-in-out infinite}.document-lines span:nth-child(3){width:80%}
.document-foot{font-size:8px;letter-spacing:.6px;color:#91a39c;border-top:1px solid #ffffff12;padding-top:12px}
html[data-theme=light] .record-audiences button{background:#f8faf9;border-color:#d1ddd5;color:#596a62}
html[data-theme=light] .record-audiences button[aria-selected=true]{background:#e0efe8;border-color:#2fae8e88;color:#174c3e}
html[data-theme=light] .shared-document{background:#fff;border-color:#d5e0d9;box-shadow:0 8px 28px #17221f08}
html[data-theme=light] .document-heading{color:#17221f}html[data-theme=light] .document-lines span{background:#dce6e0}html[data-theme=light] .document-foot{color:#62786c;border-color:#dce6e0}
@keyframes record-sync{0%,35%,70%,100%{background:#829d93;box-shadow:0 0 0 transparent}45%,55%{background:#2fae8e;box-shadow:0 0 9px #2fae8e88}}
@keyframes record-line-sync{0%,30%,75%,100%{opacity:.65}45%,55%{background:#2fae8e;opacity:1;box-shadow:0 0 10px #2fae8e28}}
@media(max-width:600px){.shared-record-demo{padding:24px 16px}.record-audiences button{font-size:8px;padding:8px;gap:5px}}
@media(prefers-reduced-motion:reduce){.record-audiences i,.document-lines span:nth-child(2){animation:none}}
/* Distinguish illustration surfaces from the copy in dark bento cards. */
html:not([data-theme=light]) #diferenciais :is(.shared-record-demo,.validation-visual,.mandate-visual){background:linear-gradient(145deg,#202020,#171717);box-shadow:inset 0 0 0 1px #ffffff04}
/* Matching visual and copy rows for the first pair of bento cards. */
@media(min-width:601px){
  #diferenciais .shared-record-demo,#diferenciais .validation-visual{height:300px;min-height:300px;flex:0 0 300px;box-sizing:border-box}
  #diferenciais .bento-card:not(.mandate) .card-copy{justify-content:flex-start}
}
/* Section 03 stays light in both themes. */
html #diferenciais{--ink:#17221f;--muted:#55615c;--line:#17221f26;--pale:#e9edeb;color-scheme:light;color:#17221f;background:#f8faf9;width:100%;max-width:none;margin-top:96px;padding-inline:max(50px,calc((100% - 1280px)/2));padding-bottom:96px}
html #diferenciais .bento-card{background:#edf1ef;border-color:#d5dfd8;box-shadow:none}
html #diferenciais .card-copy{background:#fff;border-color:#d5dfd8}
html #diferenciais .bento :is(.shared-record-demo,.validation-visual,.mandate-visual){background:#edf1ef;box-shadow:none}
html #diferenciais :is(.validation-visual>span,.mandate-visual>span){background:#fff;border-color:#d1ddd5;box-shadow:0 3px 8px #17221f0d}
html #diferenciais .validation-visual i{color:#187b63}
html #diferenciais .mandate-ring{border-color:#2fae8e55;box-shadow:0 0 0 18px #dce8e1}
html #diferenciais .mandate-ring small{color:#637169}
html #diferenciais .connection-card{background:#e7eeea}
html #diferenciais .record-audiences button{background:#f8faf9;border-color:#d1ddd5;color:#596a62}
html #diferenciais .record-audiences button[aria-selected=true]{background:#e0efe8;border-color:#2fae8e88;color:#174c3e}
html #diferenciais .shared-document{background:#fff;border-color:#d5e0d9;box-shadow:0 8px 28px #17221f08}
html #diferenciais .document-heading{color:#17221f}
html #diferenciais .document-lines span{background:#dce6e0}
html #diferenciais .document-foot{color:#62786c;border-color:#dce6e0}
@media(max-width:900px){html #diferenciais{padding-inline:24px;padding-bottom:72px;margin-top:72px}}
#seguranca .security{align-items:start;row-gap:24px}
#seguranca .security-label{grid-column:1/-1}
#seguranca .security h2{margin-top:0}
#seguranca .security-items article:first-child{padding-top:0}

/* A shared orbit replaces the persona index. */
.persona-tabs button>span{display:none}
.persona-orbit{position:relative;width:100%;height:230px;margin-top:20px}
.orbit-track{position:absolute;left:11%;top:27%;width:78%;height:44%;border:1px solid #2fae8e45;border-radius:50%}
.orbit-dot{position:absolute;width:17px;height:17px;padding:0;border-radius:50%;border:1px solid #70978b;background:#657f76;cursor:pointer;transition:background .3s,box-shadow .3s}
.orbit-dot.active{background:#2fae8e;border-color:#8adbc5;box-shadow:0 0 0 6px #2fae8e12,0 0 20px #2fae8e35}
.orbit-dot:focus-visible{outline:2px solid #2fae8e;outline-offset:6px}
@media(min-width:1200px){.persona-content{padding-right:36%}.persona-orbit{position:absolute;width:32%;height:280px;right:3%;top:50%;margin:0;transform:translateY(-50%)}}
/* Compact orbit in the former index position. */
#solucoes .persona-content{padding-right:60px;padding-bottom:145px}
#solucoes .persona-orbit{position:absolute;width:155px;height:155px;right:18px;bottom:10px;top:auto;margin:0;transform:rotate(-45deg);transform-origin:center;opacity:.8}
#solucoes .orbit-dot{width:11px;height:11px}
#solucoes .orbit-dot.active{box-shadow:0 0 0 4px #2fae8e0d,0 0 12px #2fae8e20}
@media(max-width:900px){#solucoes .persona-content{padding-right:35px}}
@media(max-width:600px){#solucoes .persona-content{padding-right:25px;padding-bottom:125px}#solucoes .persona-orbit{width:130px;height:130px;right:12px;bottom:4px}}
#solucoes .persona-orbit{right:-28px;bottom:-28px}
@media(max-width:600px){#solucoes .persona-orbit{right:-22px;bottom:-22px}}

/* Tighter orbit, half revealed at the card corner. */
#solucoes .persona-orbit{width:120px;height:120px;right:-60px;bottom:-60px;transform:translate(-21px,-21px) rotate(-45deg);overflow:visible}
@media(max-width:600px){#solucoes .persona-orbit{width:110px;height:110px;right:-55px;bottom:-55px;transform:translate(-20px,-20px) rotate(-45deg)}}
/* Remove the oversized allowance previously reserved for the orbit. */
#solucoes .persona-content{padding-bottom:40px;min-height:0}
#solucoes .persona-tags{margin-bottom:0;padding-right:35px}
@media(max-width:600px){#solucoes .persona-content{padding-bottom:55px}}

/* Align the unboxed security section with the shared page container. */
html #seguranca .security{padding-inline:0;border-inline-width:0}

html #sobre .rise-contact,html #sobre .rise-contact:hover{background:#2fae8e;color:#030303;font-size:12px}

/* Contact form panel and clearly bounded fields. */
#contact-form{padding:32px;border:1px solid #ffffff1c;border-radius:16px;background:#101010;box-shadow:0 12px 35px #00000012;min-width:0}
#contact-form input,#contact-form textarea{width:100%;box-sizing:border-box;background:#080808;border:1px solid #ffffff26;border-radius:8px;padding:13px 14px;color:#f0f6f6;text-transform:none;transition:border-color .2s,box-shadow .2s}
#contact-form textarea{min-height:125px;resize:vertical}
#contact-form input:focus,#contact-form textarea:focus{outline:none;border-color:#2fae8e;box-shadow:0 0 0 3px #2fae8e18}
html #contact-form .button,html #contact-form .button:hover{background:#2fae8e;color:#030303}
html[data-theme=light] #contact-form{background:#edf1ef;border-color:#d5dfd8;box-shadow:none}
html[data-theme=light] #contact-form input,html[data-theme=light] #contact-form textarea{background:#fff;border-color:#c6d3cb;color:#17221f}
html[data-theme=light] #contact-form input:focus,html[data-theme=light] #contact-form textarea:focus{border-color:#2fae8e}
@media(max-width:600px){#contact-form{padding:22px 18px}}
/* Contact remains a light section in either theme. */
html #contato{--ink:#17221f;--muted:#55615c;--line:#17221f26;color-scheme:light;color:#17221f;background:#f8faf9;width:100%;max-width:none;padding-inline:max(50px,calc((100% - 1280px)/2));border-color:#d5dfd8}
html #contato .contact-copy>p{color:#55615c}
html #contato .email{color:#17221f;border-color:#cdd8d1}
html #contato #contact-form{background:#edf1ef;border-color:#d5dfd8;box-shadow:none}
html #contato #contact-form input,html #contato #contact-form textarea{background:#fff;border-color:#c6d3cb;color:#17221f}
html #contato #contact-form input::placeholder,html #contato #contact-form textarea::placeholder{color:#66786b}
html #contato #contact-form input:focus,html #contato #contact-form textarea:focus{border-color:#2fae8e}
html #contato .form-note{color:#617167}
html #contato .form-status{color:#187b63}
@media(max-width:900px){html #contato{padding-inline:24px}}
@media(max-width:600px){html #contato{padding-inline:20px}}/* Photographic connection card retains contrast in both themes. */
html #diferenciais .bento .connection-card{background:linear-gradient(180deg,rgba(3,10,13,.76) 0%,rgba(3,10,13,.35) 48%,rgba(3,10,13,.86) 100%),url('assets/connection-skybridge.png') center/cover no-repeat;color:#f0f6f6;min-height:310px}
html #diferenciais .bento .connection-card h3{color:#f0f6f6}
html #diferenciais .bento .connection-card p{color:#e0e8e5}

/* Hexágono de integrações bilaterais — card "antes" da seção #infraestrutura.
   Cores e proporções portadas do Figma (node 73:622). A seção é clara nos dois
   temas, então os valores do arquivo valem direto, sem variante escura. */
html #infraestrutura .bilateral-mesh{display:block;width:100%;height:260px;overflow:visible}
html #infraestrutura .mesh-edges line{stroke:#c00;stroke-opacity:.35;stroke-width:1;stroke-dasharray:4 4}
html #infraestrutura .mesh-nodes circle{fill:#141b34;fill-opacity:.6}
html #infraestrutura .mesh-labels text{fill:#141b34;fill-opacity:.7;font-size:10.5px;font-weight:500;dominant-baseline:middle}
@media(max-width:900px){html #infraestrutura .bilateral-mesh{height:230px}}
@media(max-width:600px){html #infraestrutura .bilateral-mesh{height:205px}}

/* Seção 04 (#solucoes) ocultada temporariamente — ver comentário no index.html. */
#solucoes[hidden]{display:none}

/* ===== Botões — Design System v3 =====
   Primary é off-white sobre superfície escura, por isso a troca vale só no tema
   escuro: #F1F7F7 sobre o #f8faf9 do tema claro não teria contraste nenhum.
   Enquanto o claro existir, ele segue com o CTA verde. */
html:not([data-theme=light]) :is(.button,.header .nav-contact,.hero .text-link){
  background-color:var(--btn-secondary-bg);color:var(--btn-secondary-fg)
}
html:not([data-theme=light]) :is(.button,.header .nav-contact,.hero .text-link):hover{
  background-color:var(--btn-secondary-bg-hover);color:var(--btn-secondary-fg)
}
html:not([data-theme=light]) .button.dark{
  background:var(--btn-primary-bg);background-color:var(--btn-primary-bg);color:var(--btn-primary-fg)
}
html:not([data-theme=light]) .button.dark:hover{
  background:var(--btn-primary-bg-hover);background-color:var(--btn-primary-bg-hover);color:var(--btn-primary-fg)
}
html:not([data-theme=light]) #contact-form .button,
html:not([data-theme=light]) #contact-form .button:hover,
html:not([data-theme=light]) #sobre .rise-contact,
html:not([data-theme=light]) #sobre .rise-contact:hover{
  background:var(--btn-primary-bg);color:var(--btn-primary-fg)
}
html:not([data-theme=light]) #contact-form .button:hover,
html:not([data-theme=light]) #sobre .rise-contact:hover{
  background:var(--btn-primary-bg-hover)
}
html:not([data-theme=light]) :is(.button,.header .nav-contact,.hero .text-link):disabled{
  background-color:var(--btn-disabled-bg);color:var(--btn-disabled-fg);cursor:not-allowed;transform:none
}
:is(.button,.header .nav-contact,.hero .text-link):focus-visible{
  outline:2px solid var(--border-focus);outline-offset:4px
}

/* ===== Faixa de parceiros (Figma 947:1916) =====
   Duas cópias da mesma lista correm lado a lado; a animação desloca metade da
   largura total, então quando volta ao início a segunda cópia está exatamente
   onde a primeira estava — a emenda não aparece. */
.partners{overflow:hidden;padding:clamp(34px,5vw,64px) 0;background:#f8faf9}
.partners-track{display:flex;width:max-content;animation:partners-scroll 55s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.partners-row{display:flex;align-items:center;gap:37px;margin:0;padding:0 18px;list-style:none}
.partners-row li{display:flex;align-items:center;flex:0 0 auto}
/* O SVG entra como máscara e a cor vem do token: a silhueta é pintada em
   --green-500 exatamente, o que filtro de cor não alcança. Também resolve as
   cores misturadas dos arquivos (o CBA é branco puro, o fiscal cripto e o iggy
   têm partes quase pretas) — na máscara só a forma importa. */
.partner-logo{display:block;width:var(--w);height:auto;background-color:var(--text-heading-inverse);opacity:.62;transition:opacity .25s ease-out;
  -webkit-mask-image:var(--logo);mask-image:var(--logo);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.partners li:hover .partner-logo{opacity:1}
@keyframes partners-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.partners:hover .partners-track{animation-play-state:paused}
/* Abaixo do desktop o Figma não define tamanho; normalizo a altura com width:auto
   para que o logo encolha de verdade (scale() encolheria só o desenho, deixando
   o espaço original reservado e buracos entre as marcas). */
@media(max-width:900px){.partners{padding:clamp(28px,4vw,44px) 0}.partner-logo{height:46px;width:auto}.partners-row{gap:28px}}
@media(max-width:600px){.partners{padding:26px 0}.partner-logo{height:34px;width:auto}.partners-row{gap:20px}}
@media(prefers-reduced-motion:reduce){.partners-track{animation:none}
  .partners{overflow-x:auto}
  .partners-track{-webkit-mask-image:none;mask-image:none}}


/* ===== Seção 02 — trilha fixa com painel que troca pelo scroll =====
   .flow-stage é só altura: cada etapa ganha um trecho de rolagem. O conteúdo
   fica preso em .flow-sticky enquanto o trecho passa, e o JS deriva a etapa
   ativa da posição. Sem JS, os seis blocos aparecem empilhados e legíveis. */
/* Duas colunas: a intro fica presa à esquerda enquanto a trilha e o container
   percorrem as etapas à direita. O título ancora a seção inteira. */
#como-funciona .flow-layout{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(24px,3vw,52px);align-items:start}
#como-funciona .flow-intro{position:sticky;top:calc(var(--flow-centered-top,104px) + 20px)}
#como-funciona .flow-intro h2{margin:20px 0 0;font-size:clamp(27px,2.7vw,38px);
  text-wrap:balance;letter-spacing:-1.5px}
#como-funciona .flow-intro p{margin:26px 0 0;color:var(--text-body);font-size:16px;line-height:1.7;max-width:46ch}
#como-funciona .flow-stage{position:relative;height:calc(6 * 68vh)}
#como-funciona .flow-sticky{position:sticky;top:var(--flow-centered-top,104px);display:grid;
  grid-template-rows:auto auto;gap:clamp(18px,2vw,28px);align-content:center;
  min-height:min(560px,calc(100vh - 150px))}

/* --- Trilha --- */
/* Uma régua contínua com um cursor que desliza entre as etapas, em vez de uma
   borda acendendo item a item: numa seção de quatro telas o movimento do cursor
   é o que diz onde você está. O JS alimenta --cursor-topo e --cursor-altura. */
#como-funciona .flow-track{position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
#como-funciona .flow-track:before,#como-funciona .flow-track:after{content:'';
  position:absolute;bottom:0;height:2px;border-radius:2px}
#como-funciona .flow-track:before{left:0;right:0;background:var(--line)}
#como-funciona .flow-track:after{left:var(--cursor-topo,0);width:var(--cursor-altura,0);
  background:var(--green-500);transition:left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1)}
#como-funciona .flow-track button{display:grid;gap:3px;align-content:start;width:100%;text-align:left;
  background:none;border:0;padding:0 10px 16px 0;color:var(--text-body);transition:opacity .3s}
#como-funciona .flow-num{font-size:11px;letter-spacing:.08em;color:var(--text-body);transition:color .3s}
#como-funciona .flow-name{font-size:14px;font-weight:500;color:var(--text-heading);
  opacity:.45;transition:opacity .3s;line-height:1.25}
#como-funciona .flow-sub{font-size:10.5px;letter-spacing:-.01em;color:var(--text-body);opacity:.7;transition:opacity .3s;line-height:1.35}
#como-funciona .flow-track button:hover .flow-name{opacity:.75}
#como-funciona .flow-track button[aria-selected=true] .flow-name{opacity:1}
#como-funciona .flow-track button[aria-selected=true] .flow-num{color:var(--green-500)}
#como-funciona .flow-track button[aria-selected=true] .flow-sub{opacity:1}

/* --- Painel: container de imagem com o card por dentro --- */
#como-funciona .flow-panel{position:relative;order:1}
#como-funciona .flow-track{order:2}
#como-funciona .flow-slide{position:relative;margin:0}
#como-funciona .flow-media{position:relative;margin:0;width:100%;aspect-ratio:16/10;min-height:clamp(300px,34vh,440px);border-radius:18px;
  overflow:hidden;border:1px solid var(--line);background:var(--bg-card)}
#como-funciona .flow-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);display:block}
/* Véu de baixo para cima: garante o contraste do card tanto sobre foto quanto
   sobre o container vazio. Fica também quando a imagem entrar. */
#como-funciona .flow-media:before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(4,4,4,.12),transparent 58%)}
/* Enquanto não há imagem, o número da etapa e um brilho da marca seguram o
   espaço, em vez de um retângulo vazio. Somem sozinhos quando houver <img>. */
#como-funciona .flow-media:after{content:var(--n);position:absolute;inset:0;
  display:flex;align-items:flex-start;justify-content:flex-end;padding:34px 34px 0 0;
  font-size:clamp(96px,12vw,170px);line-height:.78;font-weight:500;
  color:var(--text-heading);opacity:.06;
  background:radial-gradient(ellipse at 34% 24%,rgba(47,174,142,.18),transparent 64%)}
#como-funciona .flow-media:has(img):after{display:none}

/* O card cobre o container inteiro, conteudo assentado no rodape para a
   imagem respirar por cima do vidro. */
/* Card opaco assentado dentro do container, com margem nos tres lados para a
   foto aparecer em volta. Solido: nada de vidro, o contraste vem do proprio
   fundo e nao depende de como a imagem se comporta atras. */
#como-funciona .flow-card{position:absolute;z-index:2;
  left:clamp(14px,2.1vw,26px);right:clamp(14px,2.1vw,26px);bottom:clamp(14px,2.1vw,26px);
  display:flex;flex-direction:column;
  background:var(--bg-card);
  border:1px solid rgba(241,247,247,.08);border-radius:14px;
  padding:clamp(20px,2.3vw,30px);
  box-shadow:0 22px 54px rgba(0,0,0,.55)}
#como-funciona .flow-card .eyebrow{font-size:10px;letter-spacing:.14em;color:var(--green-500)}
#como-funciona .flow-card h3{margin:12px 0 9px;font-size:clamp(19px,1.7vw,24px);line-height:1.2}
#como-funciona .flow-card p{margin:0;color:var(--text-body);font-size:14px;line-height:1.6}

/* Um de cada vez só quando o JS assume. */
#como-funciona .flow-panel.js .flow-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out,visibility .5s}
#como-funciona .flow-panel.js .flow-slide.on{position:relative;opacity:1;visibility:visible;transform:none}

@media(max-width:900px){
  #como-funciona .flow-layout{grid-template-columns:1fr;gap:30px}
  #como-funciona .flow-intro{position:static}
  #como-funciona .flow-intro p{max-width:none}
  #como-funciona .flow-stage{height:auto}
  #como-funciona .flow-sticky{position:static;grid-template-columns:1fr;gap:26px;min-height:0}
  /* no celular os seis nao cabem lado a lado: viram uma faixa rolavel */
  #como-funciona .flow-track{display:flex;overflow-x:auto;scrollbar-width:thin}
  #como-funciona .flow-track button{flex:0 0 auto;min-width:142px;padding:0 16px 14px 0}
  #como-funciona .flow-media{aspect-ratio:auto;min-height:370px}
  #como-funciona .flow-card{padding:22px}
}
@media(prefers-reduced-motion:reduce){
  #como-funciona .flow-panel.js .flow-slide,#como-funciona .flow-track:after{transition:none}
}

/* Card da seção 02 no tema claro. Os tokens --*-inverse existem no Design
   System justamente para texto sobre superfície clara. O eyebrow desce para
   Green/700: o Green/500 sobre off-white fica em 2,3:1 e não se lê. */
html[data-theme=light] #como-funciona .flow-card{
  background:var(--off-white);
  border-color:rgba(4,4,4,.1);
  box-shadow:0 22px 54px rgba(4,4,4,.16)}
html[data-theme=light] #como-funciona .flow-card h3{color:var(--text-heading-inverse)}
html[data-theme=light] #como-funciona .flow-card p{color:var(--text-body-inverse)}
html[data-theme=light] #como-funciona .flow-card .eyebrow{color:var(--green-700)}

/* O restante da seção 02 no tema claro. O bloco principal foi escrito com os
   tokens dark-first (--text-heading é off-white), então sobre a página clara a
   trilha ficava em 1:1 — branco no branco. Aqui tudo passa para os Inverse. */
html[data-theme=light] #como-funciona .flow-intro p{color:var(--text-body-inverse)}
html[data-theme=light] #como-funciona .flow-name{color:var(--text-heading-inverse)}
html[data-theme=light] #como-funciona .flow-sub,
html[data-theme=light] #como-funciona .flow-num{color:var(--text-body-inverse)}
html[data-theme=light] #como-funciona .flow-track button[aria-selected=true] .flow-num{color:var(--green-700)}
html[data-theme=light] #como-funciona .flow-track:after{background:var(--green-700)}
html[data-theme=light] #como-funciona .flow-media{border-color:rgba(4,4,4,.12)}

/* A faixa tem fundo claro nos dois temas, entao as marcas sao sempre escuras. */




/* ===== Seção de números =====
   Quatro colunas separadas por filete, cada número sobre uma régua e o rótulo
   abaixo — a leitura da referência, no tema escuro do site. */
/* A secao toma a tela inteira e centra o conteudo. min-height, nao height: se
   o texto crescer ou a tela for curta, ela acompanha em vez de cortar.
   svh evita o salto da barra de endereco no celular. */
#numeros{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(80px,9vw,140px);padding-bottom:clamp(80px,9vw,140px);text-align:center}
#numeros h2{margin:0 0 clamp(40px,5vw,72px);font-size:clamp(28px,3.2vw,46px)}
#numeros .numbers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);text-align:left}
#numeros .numero{position:relative;padding-left:clamp(18px,2.4vw,34px)}
#numeros .numero:first-child{padding-left:0}
/* o filete separa as colunas, sem sobrar na primeira */
#numeros .numero:not(:first-child):before{content:'';position:absolute;left:0;top:4px;bottom:34%;
  width:1px;background:var(--line)}
#numeros .numero strong{display:flex;align-items:baseline;gap:.12em;
  font-size:clamp(34px,4.6vw,64px);font-weight:450;letter-spacing:-.03em;line-height:1;
  color:var(--text-heading)}
#numeros .numero-afixo{font-size:.42em;letter-spacing:0;color:var(--green-500)}
#numeros .numero-valor{font-variant-numeric:tabular-nums}
/* a régua sob o número, como na referência */
#numeros .numero p{margin:clamp(14px,1.6vw,22px) 0 0;padding-top:clamp(12px,1.4vw,18px);
  border-top:1px solid var(--green-500);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-body);max-width:30ch}
@media(max-width:900px){
  #numeros .numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}
  #numeros .numero:nth-child(odd){padding-left:0}
  #numeros .numero:nth-child(3):before{display:none}
}
@media(max-width:520px){
  #numeros .numbers-grid{grid-template-columns:1fr;gap:30px}
  #numeros .numero{padding-left:0}
  #numeros .numero:before{display:none}
}

/* Seção de números no tema claro — mesma armadilha da seção 02: o bloco acima
   usa os tokens dark-first, e sobre a página clara o número sai off-white
   sobre off-white. */
html[data-theme=light] #numeros .numero strong{color:var(--text-heading-inverse)}
html[data-theme=light] #numeros .numero p{color:var(--text-body-inverse);border-top-color:var(--green-700)}
html[data-theme=light] #numeros .numero-afixo{color:var(--green-700)}

/* ===== Bento da seção 03 =====
   A imagem passa a ocupar a coluna da esquerda inteira, nas duas linhas; os
   dois cards de cima dividem a linha de cima à direita e o "mandato" toma a
   largura da direita embaixo.
        ┌────────┬────────┬────────┐
        │        │ origem │ regra  │
        │ imagem ├────────┴────────┤
        │        │     mandato     │
        └────────┴─────────────────┘ */
#diferenciais .bento{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
#diferenciais .bento .connection-card{grid-column:1;grid-row:1/3}
#diferenciais .bento .bento-large{grid-column:2;grid-row:1}
#diferenciais .bento .bento-card:nth-child(2){grid-column:3;grid-row:1}
#diferenciais .bento .mandate{grid-column:2/4;grid-row:2}
@media(max-width:900px){
  #diferenciais .bento{grid-template-columns:1fr 1fr}
  #diferenciais .bento .connection-card{grid-column:1/3;grid-row:auto}
  #diferenciais .bento .bento-large{grid-column:1;grid-row:auto}
  #diferenciais .bento .bento-card:nth-child(2){grid-column:2;grid-row:auto}
  #diferenciais .bento .mandate{grid-column:1/3;grid-row:auto}
}
@media(max-width:600px){
  #diferenciais .bento{grid-template-columns:1fr}
  #diferenciais .bento>*{grid-column:1!important;grid-row:auto!important}
}

/* O card da foto herda justify-content:space-between e tem só dois filhos, então
   título e texto iam para extremos opostos. Isso servia num card de 310px; agora
   que ele cobre as duas linhas, os dois ficam juntos, assentados no rodapé. */
#diferenciais .bento .connection-card{justify-content:flex-end}
#diferenciais .bento .connection-card h3{margin:0 0 14px}
#diferenciais .bento .connection-card p{margin:0}

/* The partner strip shares the next section's surface in both themes. */
html .hero .partners{position:relative;z-index:1;background:var(--bg-primary);isolation:isolate}
html .hero .partners .partner-logo{background-color:var(--text-heading)}
html[data-theme=light] .hero .partners{background:var(--bg-page-light)}
html[data-theme=light] .hero .partners .partner-logo{background-color:var(--text-heading-inverse)}

/* Quiet depth behind the figures, fading out before adjacent sections. */
#numeros{position:relative;isolation:isolate}
#numeros::before,#numeros::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
#numeros::before{background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--green-500) 13%,transparent) 0%,color-mix(in srgb,var(--green-500) 5%,transparent) 38%,transparent 72%)}
#numeros::after{background-image:radial-gradient(circle,color-mix(in srgb,var(--green-300) 18%,transparent) .7px,transparent .9px);background-size:24px 24px;mask-image:radial-gradient(ellipse at 50% 58%,black 0%,transparent 68%);-webkit-mask-image:radial-gradient(ellipse at 50% 58%,black 0%,transparent 68%)}
html[data-theme=light] #numeros::before{background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--green-500) 10%,transparent) 0%,color-mix(in srgb,var(--green-500) 4%,transparent) 38%,transparent 72%)}
html[data-theme=light] #numeros::after{background-image:radial-gradient(circle,color-mix(in srgb,var(--green-700) 15%,transparent) .7px,transparent .9px)}
@media(max-width:600px){#numeros::after{background-size:28px 28px}}

/* Frosted glass with enough opacity to keep every stage readable. */
#como-funciona .flow-card{
  background:color-mix(in srgb,var(--bg-card) 36%,transparent);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  backdrop-filter:blur(8px) saturate(120%);
  border-color:color-mix(in srgb,var(--off-white) 18%,transparent);
  box-shadow:0 16px 40px color-mix(in srgb,var(--gray-950) 30%,transparent),inset 0 1px 0 color-mix(in srgb,var(--white) 7%,transparent);
}
#como-funciona .flow-card p{color:var(--gray-200)}
html[data-theme=light] #como-funciona .flow-card{
  background:linear-gradient(135deg,color-mix(in srgb,var(--white) 86%,transparent),color-mix(in srgb,var(--white) 78%,transparent));
  -webkit-backdrop-filter:blur(18px) saturate(85%);
  backdrop-filter:blur(18px) saturate(85%);
  border-color:color-mix(in srgb,var(--white) 65%,transparent);
  box-shadow:0 8px 24px color-mix(in srgb,var(--gray-950) 10%,transparent),inset 0 1px 0 color-mix(in srgb,var(--white) 85%,transparent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #como-funciona .flow-card{background:var(--bg-card)}
  html[data-theme=light] #como-funciona .flow-card{background:var(--off-white)}
}

/* Rotating validation stack: foreground center, smaller upper/lower cards. */
html #diferenciais .bento .validation-visual{
  position:relative;overflow:hidden;isolation:isolate;perspective:850px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--green-500) 10%,var(--white)),var(--off-white) 75%);
}
html #diferenciais .validation-visual>span{
  position:absolute;left:50%;top:50%;width:calc(100% - 54px);box-sizing:border-box;
  display:flex;align-items:center;gap:14px;min-height:62px;padding:15px 18px;
  border:1px solid color-mix(in srgb,var(--green-700) 16%,var(--white));border-radius:13px;
  background:linear-gradient(135deg,var(--white),var(--off-white));
  color:var(--text-heading-inverse);font-size:13px;font-weight:500;letter-spacing:.01em;
  box-shadow:0 12px 28px color-mix(in srgb,var(--green-1000) 10%,transparent),inset 0 1px 0 var(--white);
  transform:translate(-50%,-50%);transform-origin:center;will-change:transform;opacity:1;
  animation:validation-wheel 9s cubic-bezier(.45,0,.2,1) infinite;
}
html #diferenciais .validation-visual>span:nth-child(1){animation-delay:-3s}
html #diferenciais .validation-visual>span:nth-child(3){animation-delay:-6s}
html #diferenciais .validation-visual>span i{
  display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;margin:0;border-radius:50%;
  background:color-mix(in srgb,var(--green-500) 11%,var(--white));color:var(--green-700);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green-500) 15%,transparent);
}
html #diferenciais .validation-visual>span i svg{width:18px;height:18px}
html #diferenciais .validation-visual>span:hover{scale:1}
@keyframes validation-wheel{
  0%,20%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:3}
  33.333%,53.333%{transform:translate(-50%,calc(-50% - 72px)) scale(.87);opacity:.56;z-index:2}
  57%{transform:translate(-50%,calc(-50% - 52px)) scale(.78) rotateX(30deg);opacity:.56;z-index:1}
  60%{transform:translate(-50%,calc(-50% - 12px)) scale(.68) rotateX(75deg);opacity:.25;z-index:1}
  61%{transform:translate(-50%,calc(-50% + 8px)) scale(.68) rotateX(90deg);opacity:0;z-index:1}
  63%{transform:translate(-50%,calc(-50% + 48px)) scale(.78) rotateX(-30deg);opacity:.4;z-index:1}
  66.667%,86.667%{transform:translate(-50%,calc(-50% + 72px)) scale(.87);opacity:.56;z-index:2}
}
@media(prefers-reduced-motion:reduce){
  html #diferenciais .validation-visual>span{animation:none;will-change:auto}
  html #diferenciais .validation-visual>span:nth-child(1){transform:translate(-50%,calc(-50% - 72px)) scale(.87);opacity:.7}
  html #diferenciais .validation-visual>span:nth-child(3){transform:translate(-50%,calc(-50% + 72px)) scale(.87);opacity:.7}
}

/* Scroll-driven security story. */
html #seguranca{padding-top:0;padding-bottom:0}
.trust-sticky{text-align:center;padding:70px 0 40px}
.trust-sticky h2{font-size:clamp(30px,3.7vw,52px);line-height:1.12;margin:22px auto;max-width:950px}
.trust-intro{max-width:650px;margin:0 auto;color:var(--muted);font-size:clamp(15px,1.5vw,18px)}
.trust-progress{height:1px;background:var(--line);max-width:760px;margin:42px auto 24px}
.trust-progress>span{display:block;height:1px;background:var(--green-500);width:var(--trust-progress,33.333%);transition:width .4s ease}
.trust-steps{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;letter-spacing:.12em;color:var(--muted)}
.trust-steps button{background:none;border:0;color:inherit;padding:10px;cursor:pointer;border-radius:5px;font:inherit}
.trust-steps button[aria-current=true]{color:var(--green-500)}
.trust-steps button:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.trust-slide{padding:24px 0 30px}
.trust-slide svg{width:38px;height:38px;color:var(--green-500);margin:0 auto 20px;display:block}
.trust-slide h3{font-size:clamp(25px,3vw,40px);font-weight:450;line-height:1.18;margin:0 auto 18px;max-width:760px}
.trust-slide p{font-size:clamp(15px,1.7vw,20px);color:var(--muted);max-width:720px;margin:auto;line-height:1.6}
.trust-stage.is-scroll{height:260vh}
.is-scroll .trust-sticky{position:sticky;top:80px;min-height:calc(100svh - 80px);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
.is-scroll .trust-progress{width:100%;flex-shrink:0}
.is-scroll .trust-panels{display:grid;width:100%}
.is-scroll .trust-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease,visibility .4s}
.is-scroll .trust-slide.is-active{opacity:1;visibility:visible;transform:none}
@media(max-width:600px){.trust-sticky h2{font-size:29px}.trust-progress{margin-top:26px;margin-bottom:12px}.trust-slide{padding:18px 0}.trust-slide h3{font-size:25px}.trust-slide svg{margin-bottom:14px}.is-scroll .trust-sticky{top:72px;min-height:calc(100svh - 72px)}}
@media(prefers-reduced-motion:reduce){.trust-progress>span{transition:none}}
.trust-steps .trust-current{color:var(--green-500);padding:10px 0}
.trust-stage:not(.is-scroll) .trust-steps{display:none}

/* Intro: the enlarged title settles before the three principles advance. */
.trust-stage.is-scroll{height:330vh}
.is-scroll .trust-sticky{justify-content:flex-start;padding-top:32px}
.is-scroll .trust-sticky h2{transform:translateY(var(--trust-title-y,0px)) scale(var(--trust-title-scale,1));transform-origin:center;will-change:transform;position:relative;z-index:2}
.is-scroll .trust-sticky>.eyebrow,
.is-scroll .trust-intro,
.is-scroll .trust-progress,
.is-scroll .trust-steps,
.is-scroll .trust-panels{opacity:var(--trust-detail-opacity,0)}
@media(max-width:600px){.is-scroll .trust-sticky h2{max-width:88%}}

/* Words reveal with scroll while the title is centered, before settling. */
.trust-stage.is-scroll{height:390vh}
.trust-word{display:inline-block}
.is-scroll .trust-word{opacity:var(--word-opacity,0);transform:translateY(var(--word-y,12px));filter:blur(var(--word-blur,4px))}

/* Editorial headline accents: Fraunces italic, as in the adviser site. */
html body :is(h1,h2,h3) .serif{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:450;
  font-size:inherit;line-height:inherit;letter-spacing:-.035em;
  text-transform:none;font-optical-sizing:auto;
}

/* Principles reveal with scroll; keywords retain the brand accent. */
#seguranca .trust-progress{display:none}
#seguranca .trust-steps{margin-top:32px}
#seguranca .trust-keyword{color:var(--green-500)}

/* Compact partner strip and closer transition to operational figures. */
html .hero .partners{padding:32px 0}
html .hero .partner-logo{width:calc(var(--w) * .68);height:auto}
html .hero .partners-row{gap:32px}
html #numeros{min-height:0;padding-top:clamp(64px,6vw,96px);padding-bottom:clamp(80px,8vw,120px)}
@media(max-width:600px){html .hero .partners{padding:24px 0}html .hero .partner-logo{width:calc(var(--w) * .5)}html .hero .partners-row{gap:24px}}

/* Theme switch hidden from the public interface. */
.theme-toggle{display:none!important}


.partners-track{display:flex;width:max-content;animation:partners-continuous var(--partner-duration,45s) linear infinite}.partners-row{flex-shrink:0}@keyframes partners-continuous{to{transform:translateX(var(--partner-distance,-50%))}}@media(prefers-reduced-motion:reduce){.partners-track{animation:none}}
/* A more compact desktop bento, with room for illustrations and translated copy. */
@media(min-width:601px){
  #diferenciais .shared-record-demo,#diferenciais .validation-visual{height:260px;min-height:260px;flex-basis:260px}
  #diferenciais .mandate-visual{min-height:260px}
  #diferenciais .bento-card .card-copy{padding-top:24px;padding-bottom:24px}
}
/* The light and slide changes share the reading clock in flow.js. */
#como-funciona .steps:after{animation:none!important;left:clamp(0px,calc(var(--reading-position,8.333%) - 17px),calc(100% - 35px));transition:none}
@media(max-width:600px){#como-funciona .steps:after{left:clamp(0px,calc(var(--reading-position,8.333%) - 10px),calc(100% - 20px))}}