/* ===== Ported design from the other version: paper, quadro, numbered rows, dark method, reading progress ===== */
:root{--paper:#f5f4ef;--paper-2:#eeeee6;--linha:#d6d9d0}
body{background:var(--paper)}
header{background:#f5f4efe6;border-bottom-color:var(--linha)}
/* reading progress */
.reading-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#17A868;transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none;z-index:62;box-shadow:0 0 8px #17a86866}
@supports (animation-timeline:scroll()){
 html.fx .reading-progress.sd{animation:rp-grow linear both;animation-timeline:scroll(root block)}
 @keyframes rp-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* active section underline in nav */
@media (min-width:801px){
 .nav-links a:not(.nav-cta){position:relative}
 .nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:#17A868;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
 .nav-links a:not(.nav-cta):hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
 .nav-links a[aria-current]{color:var(--tinta)}
}
@media (max-width:800px){
 .nav-links a[aria-current]:not(.nav-cta){color:#17A868;box-shadow:inset 3px 0 0 #17A868;padding-left:14px}
 .nav-links a:not(.nav-cta){transition:color .2s,padding .25s,box-shadow .25s}
}
/* hero layout */
.hero{padding:34px 0 0}
.hero-kicker{display:flex;justify-content:space-between;gap:16px;font-size:.82rem;color:var(--cinza);margin-bottom:40px}
.hero-kicker .k1{display:inline-flex;gap:10px;align-items:center;color:var(--tinta);font-weight:500}
.hero-kicker .k1 i{font-style:normal;color:#17A868;font-size:1.1rem;line-height:1}
.hero-grid{grid-template-columns:1.08fr minmax(0,.92fr)!important;gap:56px}
@media (min-width:801px){.hero h1 .tl>span{white-space:nowrap}}
.hero h1{font-weight:600!important;letter-spacing:-.04em!important;line-height:1.04!important;max-width:none!important;font-size:clamp(2.3rem,4.3vw,3.75rem)!important}
.hero h1 .tl{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .tl>span{display:block}
.hero h1 em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;color:#17A868;letter-spacing:-.01em;font-size:1.08em}
.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--linha);margin-top:56px;padding:22px 0;font-size:.85rem;color:var(--cinza)}
.hero-bottom strong{color:var(--tinta);font-weight:500}
.hero-bottom a{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--tinta);font-weight:500;text-decoration:none}
.hero-bottom a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s}
.hero-bottom a:hover svg{transform:translateY(3px)}
.hero-bottom .idx{letter-spacing:.12em;font-size:.78rem;font-variant-numeric:tabular-nums}
/* the quadro */
.quadro{position:relative;margin:0;background:var(--paper-2);border:1px solid #d3d7cb;transform:rotate(1.5deg);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s;box-shadow:0 30px 60px -30px #12254a33}
.quadro:hover{transform:rotate(0) translateY(-4px);box-shadow:0 40px 70px -30px #12254a44}
.quadro::before,.quadro::after{content:"";position:absolute;width:17px;height:17px;pointer-events:none;color:#17A868}
.quadro::before{left:-6px;top:-6px;border-left:1.5px solid;border-top:1.5px solid}
.quadro::after{right:-6px;bottom:-6px;border-right:1.5px solid;border-bottom:1.5px solid}
.q-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px 12px;font-size:.78rem;font-weight:600;color:var(--tinta)}
.q-ref{color:var(--cinza);font-weight:400;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.q-ill{padding-inline:8px}
.q-svg{display:block;width:100%;height:auto;overflow:visible;font-family:Geist,system-ui,sans-serif}
.quadro figcaption{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #cdd2c5;margin:0 24px;padding:16px 0;font-size:.85rem;color:var(--tinta)}
.quadro figcaption a{display:grid;place-items:center;width:40px;height:40px;border:1px solid #b8c4b0;border-radius:50%;color:var(--tinta);transition:background .2s}
.quadro figcaption a:hover{background:#d5e9dc}
.quadro figcaption svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.q-box,.q-label,.q-br,.q-check,.q-shadow{transform-box:fill-box}
.q-dot{opacity:0}
/* motion */
html.fx .hero-kicker{animation:ec-fade .6s ease both}
html.fx .hero h1 .tl>span{animation:q-line .9s cubic-bezier(.22,1,.36,1) both}
html.fx .hero h1 .tl:nth-child(2)>span{animation-delay:.12s}html.fx .hero h1 .tl:nth-child(3)>span{animation-delay:.24s}
@keyframes q-line{from{transform:translateY(108%)}to{transform:none}}
html.fx .hero h1{animation:none!important}
html.fx .hero-bottom{animation:ec-fade .8s ease .8s both}
html.fx .quadro{animation:q-in 1s cubic-bezier(.22,1,.36,1) .2s both}
@keyframes q-in{from{opacity:0;transform:translateY(24px) rotate(0)}to{opacity:1;transform:rotate(1.5deg)}}
html.fx .q-label{animation:q-pop .55s cubic-bezier(.22,1,.36,1) both}
html.fx .q-l1{animation-delay:.7s}html.fx .q-l2{animation-delay:.85s}html.fx .q-l3{animation-delay:1s}
@keyframes q-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.fx .q-route path{animation:q-flow 1.4s linear infinite}
@keyframes q-flow{to{stroke-dashoffset:-16}}
html.fx .q-box{animation:q-float 5s ease-in-out 1.4s infinite}
html.fx .q-shadow{transform-origin:50% 50%;animation:q-shad 5s ease-in-out 1.4s infinite}
@keyframes q-float{0%,100%{transform:none}50%{transform:translateY(-7px)}}
@keyframes q-shad{0%,100%{opacity:1}50%{opacity:.55}}
html.fx .q-br{stroke-dasharray:70;stroke-dashoffset:70;animation:q-draw .8s cubic-bezier(.65,0,.35,1) 1.1s forwards,q-breathe 3.2s ease-in-out 2.2s infinite}
html.fx .q-br:nth-child(2){animation-delay:1.2s,2.2s}html.fx .q-br:nth-child(3){animation-delay:1.3s,2.2s}html.fx .q-br:nth-child(4){animation-delay:1.4s,2.2s}
@keyframes q-draw{to{stroke-dashoffset:0}}
@keyframes q-breathe{0%,100%{opacity:1}50%{opacity:.45}}
html.fx .q-check{stroke-dasharray:24;stroke-dashoffset:24;animation:q-draw .5s ease 1.7s forwards}
html.fx .q-dot{offset-rotate:0deg;animation:q-travel 3.6s ease-in-out 1.6s infinite}
.q-dot1{offset-path:path("M94 97v75h70")}
.q-dot2{offset-path:path("M320 216h76v77");animation-delay:3.4s!important}
@keyframes q-travel{0%{offset-distance:0%;opacity:0}12%{opacity:1}80%{opacity:1}100%{offset-distance:100%;opacity:0}}
html.fx .q-ping{transform-box:fill-box;transform-origin:center;animation:q-ping 2s ease-in-out 1.6s infinite}
@keyframes q-ping{0%,100%{transform:scale(1)}50%{transform:scale(1.7);opacity:.6}}
/* numbered rows (frentes + licenças) */
#frentes .frentes,#licencas .frentes{display:block!important;counter-reset:fr;border-bottom:1px solid var(--linha);margin-top:40px}
#licencas .frentes{counter-reset:fr 4}
#frentes .frentes>div,#licencas .frentes>div{counter-increment:fr;display:grid;grid-template-columns:56px minmax(0,.9fr) minmax(0,1.3fr);gap:8px 28px;align-items:baseline;padding:26px 0;border:0!important;border-top:1px solid var(--linha)!important;border-radius:0!important;background:none!important;box-shadow:none!important;transition:background .3s,padding .3s}
#frentes .frentes>div::before,#licencas .frentes>div::before{content:counter(fr,decimal-leading-zero);font-size:.8rem;color:var(--cinza);font-variant-numeric:tabular-nums}
#frentes .frentes h3,#licencas .frentes h3{font-size:1.3rem;letter-spacing:-.025em;margin:0;transition:color .25s}
#frentes .frentes p,#licencas .frentes p{margin:0;color:var(--cinza);line-height:1.75}
#frentes .frentes>div:hover,#licencas .frentes>div:hover{background:#fdfcf8!important;padding-inline:14px}
#frentes .frentes>div:hover h3,#licencas .frentes>div:hover h3{color:#17A868}
#frentes .frentes>div:hover::before,#licencas .frentes>div:hover::before{color:#17A868}
@media (max-width:800px){#frentes .frentes>div,#licencas .frentes>div{grid-template-columns:40px 1fr}#frentes .frentes p,#licencas .frentes p{grid-column:2}}
/* call as the dark method band */
.call{background:#12254A!important;color:#f5f4ef}
.call h2,.call ol h3{color:#fdfcf8}
.call .lead,.call ol p{color:#b9c1ca!important}
.call-grid{grid-template-columns:1fr!important;gap:48px!important}
.call-grid>div:first-child{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 40px}
.call-grid>div:first-child h2{max-width:none}
.call-grid>div:first-child .acoes{margin:0}
.call ol{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;counter-reset:p}
.call ol li{border:0!important;padding:0!important;counter-increment:p}
.call ol li::before{content:counter(p,decimal-leading-zero)!important;position:static!important;display:block!important;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:2.6rem;line-height:1;color:#a8e0bf!important;background:none!important;width:auto!important;height:auto!important;border:0!important;margin:0 0 22px}
.call ol li h3{position:relative;padding-top:26px;font-size:1.35rem;letter-spacing:-.02em}
.call ol li h3::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#586875}
.call ol li h3::after{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;background:#a8e0bf}
html.fx .call ol li h3::before{transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.22,1,.36,1) .25s}
html.fx .call ol li.on h3::before{transform:scaleX(1)}
@media (max-width:800px){.call ol{grid-template-columns:1fr;gap:34px}.call-grid>div:first-child{grid-template-columns:1fr}}
/* mobile hero */
@media (max-width:800px){
 .hero{padding-top:22px}
 .hero-kicker{margin-bottom:26px;font-size:.78rem}.hero-kicker .k2{display:none}
 .hero-grid{grid-template-columns:1fr!important;gap:40px}
 .quadro{transform:rotate(1deg);margin-inline:4px}
 @keyframes q-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:rotate(1deg)}}
 .q-head{padding:16px 16px 8px}.quadro figcaption{margin:0 16px;padding:12px 0}
 .hero-bottom{margin-top:36px;flex-wrap:wrap}.hero-bottom .idx{display:none}
}
/* reduced motion: fades only */
@media (prefers-reduced-motion:reduce){
 html.fx .hero h1 .tl>span{animation:ec-fade .9s ease both}
 html.fx .quadro{animation:ec-fade 1s ease .2s both}
 html.fx .q-label{animation:ec-fade .8s ease both}
 html.fx .q-route path,html.fx .q-box,html.fx .q-shadow,html.fx .q-ping,html.fx .q-dot{animation:none}
 html.fx .q-br,html.fx .q-check{stroke-dashoffset:0;animation:ec-fade 1s ease 1s both}
 html.fx .call ol li h3::before{transform:none;transition:none}
 .quadro,.quadro:hover{transition:none}
}
.call .btn-cheio{background:#17A868!important;color:#fff!important;border-color:#17A868!important}.call .btn-cheio:hover{background:#13925a!important}
