:root{
  --navy:#232A32; --navy-fundo:#1B2127;
  --menta:#8CCECA; --menta-clara:#B9E2DF; --menta-escura:#6FBDB8; --sage:#5B7272;
  --menta-viva:#5EDDD0; --menta-viva-clara:#B4F5EE; --menta-viva-funda:#2DC9B9;
  --zap:#25D366; --zap-claro:#3BE07F; --zap-fundo:#1EBE5C; --zap-tinta:#062B16;
  --on-dark:#EEF3F3; --on-dark-mute:#CFD9DA;
  --radius:0px;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;background:var(--navy-fundo)}
body{
  font-family:var(--font);background:var(--navy-fundo);color:var(--on-dark);
  min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative;
  padding:20px 22px calc(22px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden;
}
a{color:inherit}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--navy-fundo)}
.bg__col{position:absolute;inset:0;overflow:hidden}
.bg__col>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.bg__col::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(27,33,39,.82) 0%, rgba(27,33,39,.78) 30%,
    rgba(27,33,39,.75) 58%, rgba(27,33,39,.86) 100%)}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
html.anim .bg__col>img{animation:heroZoom 20s var(--ease) infinite alternate}
.wrap{position:relative;z-index:2;width:100%;max-width:430px;
  display:flex;flex-direction:column;align-items:center}
.marca{position:relative;display:block;width:clamp(212px,58vw,256px);aspect-ratio:964.25/278.25;margin:0 0 26px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.marca__svg{display:block;width:100%;height:100%;overflow:visible}
.marca__svg .aro{stroke-dasharray:1;stroke-dashoffset:1}
.marca__svg .tronco{clip-path:inset(100% 0 0 0)}
.marca__svg .lf{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
.marca__svg .nome{opacity:0}
html.anim .marca__svg .aro{animation:aroFecha 1.1s cubic-bezier(.5,0,.2,1) .3s forwards}
html.anim .marca__svg .tronco{animation:cresce .8s cubic-bezier(.3,.7,.2,1) .45s forwards}
html.anim .marca__svg .lf{animation:brota .5s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(1.2s + var(--i) * .075s)}
html.anim .marca__svg .nome{animation:aparece .7s ease .4s forwards}
@keyframes aroFecha{to{stroke-dashoffset:0}}
@keyframes cresce{to{clip-path:inset(0 0 0 0)}}
@keyframes brota{to{transform:scale(1);opacity:1}}
@keyframes aparece{to{opacity:1}}
html:not(.anim) .marca__svg .aro{stroke-dashoffset:0}
html:not(.anim) .marca__svg .tronco{clip-path:none}
html:not(.anim) .marca__svg .lf,html:not(.anim) .marca__svg .nome{transform:none;opacity:1}
.marca__luz{position:absolute;inset:0;display:block;pointer-events:none;opacity:0;
  -webkit-mask:url(../img/logo-luz.svg) center/contain no-repeat;mask:url(../img/logo-luz.svg) center/contain no-repeat;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.16) 43%,rgba(235,250,248,.95) 50%,
    rgba(255,255,255,.16) 57%,transparent 64%) 140% 0/300% 100% no-repeat}
html.anim .marca__luz{animation:luz 7s cubic-bezier(.4,.05,.35,1) 4s infinite}
@keyframes luz{0%{background-position:140% 0;opacity:0}3%{opacity:1}20%{background-position:-40% 0;opacity:1}
  25%,100%{background-position:-40% 0;opacity:0}}
html.anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.anim .reveal.is-visible{opacity:1;transform:none}
.ganho{margin:0 0 26px;text-align:center;font-size:16px;line-height:1.52;font-weight:400;
  color:var(--on-dark);max-width:33ch;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.42)}
.ganho b{color:var(--menta);font-weight:700}
.nums{display:flex;gap:16px;align-items:center;justify-content:center;
  width:100%;max-width:320px;margin-bottom:28px}
.num{flex:1;text-align:center;min-width:0}
.num b{display:block;font-weight:700;font-size:34px;line-height:.92;letter-spacing:-.035em;color:var(--menta-clara)}
.num b i{font-style:normal}
.num span{display:block;margin-top:9px;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-mute);line-height:1.4}
.nums__arvore{flex:0 0 auto;width:26px;aspect-ratio:171.75/210.25;align-self:flex-start;margin-top:-1px;
  background:linear-gradient(180deg,var(--menta-clara) 0%,var(--menta) 55%,var(--sage) 100%);
  -webkit-mask:url(../img/arvore.svg) center/contain no-repeat;mask:url(../img/arvore.svg) center/contain no-repeat;
  opacity:.75}
.links{width:100%;display:flex;flex-direction:column;gap:12px}
.btn{position:relative;display:flex;align-items:center;gap:12px;isolation:isolate;
  padding:15px 17px 15px 15px;border-radius:var(--radius);
  font-weight:600;font-size:14.5px;line-height:1.32;text-decoration:none;color:#fff;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--menta);outline-offset:3px}
.btn--prin{color:var(--navy);font-weight:700;
  background:linear-gradient(118deg,var(--menta-viva-clara) 0%,var(--menta-viva) 50%,var(--menta-viva-funda) 100%);
  box-shadow:0 14px 34px -10px rgba(94,221,208,.75)}
.btn--prin:hover{filter:brightness(1.05)}
@keyframes ringPulse{0%{inset:0;opacity:.5}70%{inset:-12px;opacity:0}100%{inset:-12px;opacity:0}}
.btn--prin::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius);background:var(--menta-viva)}
html.anim .btn--prin::after{animation:ringPulse 2.1s ease-out infinite}
.btn--zap{color:var(--zap-tinta);font-weight:700;
  background:linear-gradient(118deg,var(--zap-claro) 0%,var(--zap) 55%,var(--zap-fundo) 100%);
  box-shadow:0 14px 34px -10px rgba(37,211,102,.75)}
.btn--zap:hover{filter:brightness(1.05)}
.btn__ic{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.btn__ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.btn--zap .btn__ic svg{stroke:none;fill:var(--zap-tinta)}
.btn__tx{flex:1;min-width:0}
.btn__seta{flex:none;width:16px;height:16px;opacity:.72;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.btn:hover .btn__seta{transform:translateX(3px)}
.pe{margin-top:24px;text-align:center}
.pe__praca{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--menta)}
.pe__tag{margin-top:8px;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(207,217,218,.9)}
.pe__tag a{font-weight:700;color:var(--menta-clara);text-decoration:none}
.pe__tag a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.anim .reveal{opacity:1;transform:none}
  .marca__svg .aro{stroke-dashoffset:0}
  .marca__svg .tronco{clip-path:none}
  .marca__svg .lf,.marca__svg .nome{transform:none;opacity:1}
  .btn--prin::after{opacity:0}
}