:root{
  --brand:#1824A8; --brand-2:#1824A8; --brand-light:#828BED;
  --accent:var(--brand); --accent-bright:#828BED; --accent-deep:#0E1670;
  --accent-top:#2733C4;
  --fio-claro:#A8AFF4;
  --ink:#050824; --ink-2:#0A0E2E; --ink-3:#121A44;
  --text:#F4F5FA; --text-2:#D3D6E6; --muted:#A6AAC2;
  --green:#1FA858; --green-light:#2BD46E; --green-deep:#148244;
  --r:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --pad:18px;
  --disp:'Sora',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --texto:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mark-band:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAB8CAYAAAAxUQMjAAAEVklEQVR4nO2dPYslRRSGn36n987OdVxWUBFREDEQwUSjjZQNNDAxMVAxMNBfoeYGxv4DUQMTwUyEjUSETTUxMhARv2b3zue9LQWnoGh27u2evT1d1ukHmj7dfaamTnXV26eHoU/12DOfkzlvAG8DrwB7wCFwAOza9at27nng1w1tfQe8DCxq8uZN4DOzz4C/gTuAgAeBpW0VsOrYZgOc5B54CCgGHdgHZhZs2GODcJz4dGlzP/fAQ4C07uaOHTfJwLR9NlGF0RqDF21NjoYu8Xc9DnwA/Az8CLzAiNSX0P67wFvADVPiuBZHXWb1QO3eBN4HXgWu27mgyL+YQD15gdmm1rrPLvBvgZesgwvgL+DUlDd0/uQCYrR16gHafMKm82+2D4+da/bc/TcJPKhyUYEf2t28bo+edIpes1kQj0dDPXwf6jiQe5ZG7lvgM9uH7Qowz2Gqa8P1XXsEfQ/c6tBeVOzK7JhSzmyrWhlXdlP9JvAO8Hqiyj9coP0mh7u7KfA58LEF/ZydO269CRVDbfv3gE9MeQ+SN6Dw7P0HeGrshGPbyO7up3ZXD0x1jxKfPfMLwlQMNfCRKS4mRHMLNirxkQ1KFKWuVMmWCtkql8B3EyGq7VF0aoMQAn+AAlEr8ThtveOSZFrt8/9r6sReWJBXk4zryNLM2djP3SECX5mdZlhxzWNTfpXL2txm4I3Z8yTo+Ae8K4nQjZpbbxsl9nlruKi1HSlq3fZBOEU4RThFOEU4RThFid14GiT18F15y9yKRDhFOEUD+WaPevgWK26uEE4RTlFiT5mbN3GrcIRwinCKBvLNHvXwLVbcXCGcIpyixJ4yN2/iVuEI4RThFA3kmz3q4VusuLlCOEU4RYk9ZW7exK3CEcIpwikayDd71MO3WHFzhXCKcIoS223mVm3wncStBIRThFM0kG/2qIfvJG4lIJwinKLEnjK3c5jErQSEU4RTNJBv9qiH7yRuJSCcIpyixJ4yt3OYxK0EhFOEUzSQb/aoh+8kbiUgnCKcosQe9VvIl40Se/p3Lw8IpwinCKcIpwinCKeowwvJmInNzpo8o7rfwJf3+Pp9Y1v8Am8zcuCN9bXqOEjnUUVDSVA5Zm6DDbhwinCK1lxrr+2m1M+MN2artY/n+xIF8qI/zz0KuTXbutHq6FjcktCaa1t9buYeuFrHsepFcci+pB/LBfwJ3LXjxmoonN1H8CfWRkySzpLqVzs9aysp0aW0dMmyx/qvbN+Exr6wThxbRxf2Cw+sikZtjcfqGV06Gzu8tDaiyC2tOkfaiU1txYDuWp/SQTu083c6CuiJ7U9DULeBb6wM33xNIZhQS+HZDo2Huiq1bY+2rtVJ2S91aO+RpGLWwmq6pDMlVPjABudh29axb/tZ6MhPwGvAh9aRMDVD59PpE+zfzXcTXwJPJwVmYr4ftlh5JwQSBnxTe6Ew3Fc2G2P5sLgM44wJMYQl2qVvXwN/hFnyH+ox3asc1U0QAAAAAElFTkSuQmCC');
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100svh; font-family:var(--texto); color:var(--text);
  background:var(--ink); -webkit-font-smoothing:antialiased;
  font-size:16px; line-height:1.55;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  padding:clamp(18px,3.2vh,34px) var(--pad) calc(20px + env(safe-area-inset-bottom));
  position:relative; overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--ink)}
.bg picture{display:contents}
.bg img{width:100%;height:62%;object-fit:cover;object-position:50% 18%;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
  mask:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
  filter:brightness(.92) contrast(1.14) saturate(1.02);
  animation:heroZoom 30s ease-in-out infinite alternate}
@media (min-width:720px){.bg img{height:100%;object-position:50% 46%;
  -webkit-mask:none;mask:none}}
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.08)}}
.bg__chapa{position:absolute;inset:0;background:linear-gradient(0deg,
  rgba(5,8,36,.99) 0%, rgba(5,8,36,.98) 24%, rgba(10,14,46,.955) 34%,
  rgba(10,14,46,.91) 42%, rgba(18,26,68,.82) 50%, rgba(18,26,68,.63) 58%,
  rgba(18,26,68,.40) 66%, rgba(18,26,68,.20) 74%, rgba(18,26,68,.07) 82%,
  rgba(18,26,68,.01) 90%)}
.bg__luz{position:absolute;inset:0;
  -webkit-mask:linear-gradient(0deg,#000 0%,#000 52%,transparent 84%);
  mask:linear-gradient(0deg,#000 0%,#000 52%,transparent 84%);background:
  radial-gradient(64% 32% at 12% 94%, rgba(24,36,168,.22), transparent 66%),
  radial-gradient(56% 28% at 90% 80%, rgba(130,139,237,.09), transparent 64%),
  radial-gradient(76% 22% at 50% 100%, rgba(14,22,112,.26), transparent 70%)}
.bg__malha{position:absolute;left:0;right:0;bottom:0;height:76%;opacity:.011;
  background-color:var(--brand-light);
  -webkit-mask-image:var(--mark-band), linear-gradient(0deg,#000 0%,#000 56%,transparent 94%);
  mask-image:var(--mark-band), linear-gradient(0deg,#000 0%,#000 56%,transparent 94%);
  -webkit-mask-size:46px 92px, 100% 100%;
  mask-size:46px 92px, 100% 100%;
  -webkit-mask-repeat:repeat, no-repeat;
  mask-repeat:repeat, no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect}
.bg__topo{position:absolute;inset:0;background:
  radial-gradient(58% 22% at 50% 19%, rgba(5,8,36,.44), rgba(5,8,36,.20) 56%, transparent 84%),
  linear-gradient(180deg,rgba(5,8,36,.30) 0%,rgba(5,8,36,.24) 10%,rgba(5,8,36,.17) 20%,rgba(5,8,36,.10) 30%,rgba(5,8,36,.04) 42%,rgba(5,8,36,0) 52%)}
.fio{position:fixed;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--accent-deep) 14%,var(--brand) 34%,var(--brand-light) 50%,var(--brand) 66%,var(--accent-deep) 86%,transparent);
  background-size:220% 100%;animation:mkl-flow 7s ease-in-out infinite}
.wrap{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center}
.marca{display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
  gap:clamp(10px,2.6vw,13px);
  margin-bottom:clamp(18px,2.8vh,28px);
  filter:drop-shadow(0 10px 26px rgba(3,5,20,.66)) drop-shadow(0 0 16px rgba(130,139,237,.18));
  animation:mkl-selo 3.6s var(--ease) infinite alternate}
@keyframes mkl-selo{
  from{filter:drop-shadow(0 10px 26px rgba(3,5,20,.66)) drop-shadow(0 0 16px rgba(130,139,237,.18))}
  to  {filter:drop-shadow(0 10px 26px rgba(3,5,20,.66)) drop-shadow(0 0 32px rgba(130,139,237,.52))}}
.marca__mark{position:relative;display:block;flex:0 0 auto;
  height:clamp(74px,19vw,90px);
  width:calc(clamp(74px,19vw,90px) * 138 / 134)}
.marca__piece{position:absolute;background:center/100% 100% no-repeat}
.marca__piece--0{left:0%;      top:16.418%; width:7.971%;  height:83.582%; background-image:url('../img/marca-p0.png')}
.marca__piece--1{left:14.493%; top:10.448%; width:7.971%;  height:89.552%; background-image:url('../img/marca-p1.png')}
.marca__piece--2{left:28.261%; top:5.224%;  width:7.971%;  height:94.776%; background-image:url('../img/marca-p2.png')}
.marca__piece--3{left:42.754%; top:0%;      width:54.348%; height:100%;    background-image:url('../img/marca-p3.png')}
.marca__word{flex:0 0 auto;height:clamp(74px,19vw,90px);width:auto;
  transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
  .marca__piece{animation:brandMonta .62s var(--ease) backwards}
  .marca__piece--0{animation-delay:.10s}
  .marca__piece--1{animation-delay:.26s}
  .marca__piece--2{animation-delay:.42s}
  .marca__piece--3{animation-delay:.58s}
  .marca__word{animation:brandPalavra .5s var(--ease) .86s backwards}
}
@keyframes brandMonta{
  0%  {transform:translateX(-260%);opacity:0}
  62% {opacity:1}
  78% {transform:translateX(9%)}
  100%{transform:translateX(0);opacity:1}
}
@keyframes brandPalavra{
  0%  {opacity:0;transform:translateX(-14px) scaleX(.92)}
  100%{opacity:1;transform:none}
}
.mancha{position:relative;width:calc(100% + var(--pad) * 2);
  margin:0 calc(var(--pad) * -1) clamp(18px,2.8vh,26px)}
.mancha::before{content:'';position:absolute;top:-78px;bottom:-26px;
  z-index:0;
  pointer-events:none;
  left:50%;margin-left:-50vw;width:100vw;
  background:linear-gradient(180deg,
    rgba(4,5,12,0) 0%, rgba(4,5,12,.42) 9%, rgba(4,5,12,.80) 18%,
    rgba(4,5,12,.88) 26%, rgba(4,5,12,.86) 62%, rgba(4,5,12,.64) 78%,
    rgba(4,5,12,.26) 91%, rgba(4,5,12,0) 100%)}
.eyebrow{position:relative;z-index:1;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;margin:0 auto 10px;
  font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-bright);
  text-shadow:0 1px 6px rgba(3,5,20,.55)}
.eyebrow::before{content:"";width:10px;height:11px;flex:0 0 auto;
  background:var(--accent-bright);
  clip-path:polygon(0 22%,100% 0,100% 100%,0 100%)}
.mancha{text-align:center}
.titulo{position:relative;z-index:1;margin:0 auto 10px;max-width:20ch;
  padding:0 calc(var(--pad) - 8px);
  font-family:var(--disp);font-weight:800;font-size:clamp(23px,6.4vw,30px);
  line-height:1.12;letter-spacing:-.02em;color:#fff;text-wrap:balance;
  text-shadow:0 2px 12px rgba(3,5,20,.55)}
.titulo u{text-decoration:none;position:relative;text-shadow:none;
  background:linear-gradient(100deg,var(--accent-bright),var(--fio-claro));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.titulo u::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.08em;
  background:linear-gradient(90deg,var(--accent-bright),var(--brand-light))}
.sub{position:relative;z-index:1;margin:0 auto clamp(12px,2vh,18px);max-width:40ch;
  padding:0 calc(var(--pad) - 8px);
  font-family:var(--texto);font-size:14.5px;line-height:1.5;color:#ECE9E5;
  text-wrap:balance;text-shadow:0 1px 7px rgba(3,5,20,.6)}
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .eyebrow.reveal{transition-delay:.62s}
.js .titulo.reveal{transition-delay:.76s}
.js .nums.reveal{transition-delay:.90s}
.js .pe.reveal{transition-delay:.50s}
.nums{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;margin:0}
.num{text-align:center}
.num b{display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(36px,10.5vw,46px);line-height:1;letter-spacing:-.03em;color:#fff;
  white-space:nowrap;
  filter:drop-shadow(0 2px 10px rgba(3,5,20,.6))}
.num b .u{color:#fff}
.num b .anos{font-size:.5em;font-weight:700;letter-spacing:-.01em}
.num b::after{content:"";display:block;width:38px;height:2px;margin:12px auto 0;
  background:linear-gradient(90deg,var(--accent-deep),var(--brand-light),var(--accent-deep))}
.num__rot,.num > span{display:block;margin-top:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);
  text-shadow:0 1px 6px rgba(3,5,20,.55)}
.links{width:100%;display:flex;flex-direction:column;gap:clamp(9px,1.5vh,12px)}
.btn{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:13px 15px;
  font-family:var(--disp);font-weight:600;font-size:12.2px;letter-spacing:.045em;
  text-transform:uppercase;line-height:1.3;border-radius:var(--r);
  transition:transform .2s var(--ease),filter .25s;
  animation:entra .55s var(--ease) both;
}
@keyframes entra{from{opacity:0;transform:translateY(18px)}}
.btn[data-rota="construir"]{animation-delay:.10s}
.btn[data-rota="reformar"]{animation-delay:.22s}
.btn[data-rota="whatsapp"]{animation-delay:.34s}
.btn:active{transform:translateY(1px)}
@media (hover:hover){.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}}
.btn:focus-visible{outline:2px solid var(--fio-claro);outline-offset:3px}
.btn__ic{flex:0 0 auto;width:23px;height:23px;display:grid;place-items:center}
.btn__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.btn__tx{flex:1 1 auto}
.btn__seta{flex:0 0 auto;width:19px;height:19px;opacity:.78;transition:transform .2s}
@media (hover:hover){.btn:hover .btn__seta{transform:translateX(3px)}}
.btn::before,.btn::after{content:'';position:absolute;inset:0;z-index:2;
  pointer-events:none;border-radius:var(--r);background-repeat:no-repeat;
  background-image:linear-gradient(var(--fio-claro),var(--fio-claro)),
                   linear-gradient(var(--fio-claro),var(--fio-claro))}
.btn::before{background-position:0 0,100% 0;background-size:0 2px,2px 0;
  animation:mkl-desenha-td 6s linear infinite;animation-delay:0s}
.btn::after{background-position:100% 100%,0 100%;background-size:0 2px,2px 0;
  animation:mkl-desenha-be 6s linear infinite;animation-delay:0s}
@keyframes mkl-desenha-td{
  0%{background-size:0 2px,2px 0;opacity:1}
  22%{background-size:100% 2px,2px 0}
  44%,88%{background-size:100% 2px,2px 100%;opacity:1}
  97%,100%{background-size:100% 2px,2px 100%;opacity:0}}
@keyframes mkl-desenha-be{
  0%,44%{background-size:0 2px,2px 0;opacity:1}
  66%{background-size:100% 2px,2px 0}
  88%{background-size:100% 2px,2px 100%;opacity:1}
  97%,100%{background-size:100% 2px,2px 100%;opacity:0}}
.btn--obra{color:#fff;
  background:linear-gradient(120deg,var(--accent-deep) 0%,var(--brand) 38%,var(--accent-top) 72%,var(--accent-top) 100%);
  background-size:200% 100%;
  box-shadow:0 10px 26px rgba(3,5,20,.44);
  animation:entra .55s var(--ease) both,
            mkl-flow 6s ease-in-out .9s infinite}
@keyframes mkl-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn[data-rota="construir"]{
  animation:entra .55s var(--ease) both,
            mkl-flow 6s ease-in-out .9s infinite,
            mkl-pulso 3.2s ease-in-out .9s infinite}
@keyframes mkl-pulso{
  0%,100%{box-shadow:0 0 0 1px rgba(130,139,237,.55),0 0 34px -14px rgba(130,139,237,.55),
          0 14px 34px -14px rgba(3,5,20,.6)}
  50%{box-shadow:0 0 0 2px rgba(130,139,237,.95),0 0 62px -6px rgba(130,139,237,.6),
      0 16px 38px -14px rgba(3,5,20,.68)}}
.btn--zap{color:#fff;background:
    radial-gradient(30px 30px at 27px 50%, var(--green-light) 0%, var(--green) 62%, rgba(31,168,88,0) 74%),
    linear-gradient(120deg,var(--green-deep) 0%,#0A5730 100%);
  animation:entra .55s var(--ease) both,
            waPulse 3.6s ease-in-out .9s infinite}
.btn--zap::before,.btn--zap::after{
  background-image:linear-gradient(#6FE6A2,#6FE6A2),linear-gradient(#6FE6A2,#6FE6A2)}
.btn--zap .btn__ic svg{stroke:none;fill:currentColor}
@keyframes waPulse{
  0%,100%{box-shadow:0 12px 30px -8px rgba(20,130,68,.6),0 0 0 0 rgba(43,212,110,.5)}
  50%{box-shadow:0 12px 30px -8px rgba(20,130,68,.6),0 0 0 11px rgba(43,212,110,0)}}
.pe{margin-top:clamp(20px,3.4vh,34px);display:flex;flex-direction:column;
  align-items:center;gap:9px}
.locais{display:flex;flex-direction:column;align-items:center;gap:4px}
.local{display:block;text-align:center;font-size:11.5px;line-height:1.5;
  color:var(--text-2);text-shadow:0 1px 6px rgba(3,5,20,.55);text-wrap:balance}
.local svg{display:inline-block;vertical-align:-1px;margin-right:5px}
.nq{white-space:nowrap}
.local svg{width:12px;height:12px;fill:none;stroke:var(--accent-bright);
  stroke-width:1.8}
.dev{display:flex;align-items:center;gap:9px;font-size:11.5px;
  color:rgba(244,245,250,.82)}
.dev a{color:#fff;font-weight:700;letter-spacing:.06em;transition:color .25s}
@media (hover:hover){.dev a:hover{color:var(--accent-bright)}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:720px){
  .bg__malha{opacity:.006;height:70%}
}
@media (min-width:720px){
  .mancha::before{
    -webkit-mask:linear-gradient(90deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
    mask:linear-gradient(90deg,transparent 0%,#000 30%,#000 70%,transparent 100%)}
}
@media (max-width:420px){
  .eyebrow{letter-spacing:.14em;font-size:11px}
}
@media (max-height:760px){
  .bg__chapa{background:linear-gradient(0deg,
    rgba(5,8,36,.995) 0%, rgba(5,8,36,.985) 24%, rgba(10,14,46,.96) 34%,
    rgba(10,14,46,.92) 42%, rgba(18,26,68,.83) 50%, rgba(18,26,68,.64) 58%,
    rgba(18,26,68,.41) 66%, rgba(18,26,68,.20) 74%, rgba(18,26,68,.07) 82%,
    rgba(18,26,68,.01) 90%)}
  body{--pad:16px;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom))}
  .marca{margin-bottom:13px}
  .marca__mark{height:clamp(62px,16vw,74px);width:calc(clamp(62px,16vw,74px) * 138 / 134)}
  .marca__word{height:clamp(62px,16vw,74px)}
  .eyebrow{font-size:10.5px;margin-bottom:6px}
  .titulo{font-size:clamp(20px,5.6vw,24px);margin-bottom:7px}
  .sub{font-size:13px;line-height:1.42;margin-bottom:9px}
  .mancha{margin-bottom:11px}
  .mancha::before{top:-66px;bottom:-24px}
  .nums{margin-bottom:11px}
  .num b{font-size:clamp(30px,8.6vw,38px)}
  .num > span{font-size:10.5px;margin-top:5px}
  .links{gap:7px}
  .btn{padding:10px 13px;font-size:11.6px}
  .pe{margin-top:14px;gap:7px}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .btn::before,.btn::after{background-size:100% 2px,2px 100% !important;opacity:1 !important}
}