:root{
  --ardosia:#5B6773; --ardosia-rgb:91,103,115;
  --vermelho:#F01D25; --vermelho-rgb:240,29,37;
  --ink:#121417; --ink-rgb:18,20,23; --ink-2:#1B1F24;
  --claro:#AFB8C0;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --chanfro:12px;
  --colw:100vw;
  --fw:min(calc(var(--colw) * 2), 100svh);
  --fh:calc(var(--fw) * .5625);
  --pt:clamp(16px,3svh,30px);
  --lh:clamp(92px,15.5svh,138px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;background:var(--ink)}
body{
  font-family:var(--font);background:var(--ink);color:#fff;
  min-height:100vh;min-height:100svh;display:flex;justify-content:center;position:relative;
  padding:var(--pt) 20px calc(clamp(14px,2.6svh,28px) + 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(--ink)}
.bg__amb{display:none}
.bg__col{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.bg__foto{position:absolute;top:0;left:50%;width:var(--fw);height:auto;max-width:none;
  transform:translateX(-41.2%);transform-origin:41.2% 40%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.62) 59%,rgba(0,0,0,.26) 67%,rgba(0,0,0,.08) 76%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.62) 59%,rgba(0,0,0,.26) 67%,rgba(0,0,0,.08) 76%,transparent 88%)}
@keyframes heroZoom{from{transform:translateX(-41.2%) scale(1)}to{transform:translateX(-41.2%) scale(1.05)}}
html.anim .bg__foto{animation:heroZoom 20s var(--ease) infinite alternate}
.bg__veu{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.58) 0,rgba(var(--ink-rgb),.34) calc(var(--fh) * .3),
    rgba(var(--ink-rgb),.08) calc(var(--fh) * .5),rgba(var(--ink-rgb),0) calc(var(--fh) * .58))}
.bg__brilho{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 58% at 50% 82%,rgba(var(--ardosia-rgb),.46) 0%,rgba(var(--ardosia-rgb),.16) 52%,transparent 78%)}
@media (min-width:700px){
  :root{--colw:520px}
  .bg__amb{display:block;position:absolute;inset:0;
    background:
      linear-gradient(90deg,rgba(var(--ink-rgb),.9) 0%,rgba(var(--ink-rgb),.62) 50%,rgba(var(--ink-rgb),.9) 100%),
      linear-gradient(180deg,rgba(var(--ink-rgb),.4) 0%,rgba(var(--ink-rgb),.9) 100%),
      url(../img/casa-noite.webp) 41% 30% / cover no-repeat}
  .bg__col{left:50%;right:auto;width:var(--colw);margin-left:calc(var(--colw) / -2);
    box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 70px rgba(0,0,0,.6)}
}
.wrap{position:relative;z-index:2;width:100%;max-width:440px;
  min-height:calc(100svh - var(--pt) - clamp(14px,2.6svh,28px) - env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center}
.marca{flex:none;height:var(--lh);aspect-ratio:959.75/947.53;font-size:0;line-height:0;
  filter:drop-shadow(0 0 1px rgba(var(--ink-rgb),.9)) drop-shadow(0 1px 2.5px rgba(var(--ink-rgb),.75)) drop-shadow(0 0 14px rgba(var(--ink-rgb),.45))}
.marca__svg{display:block;width:100%;height:100%;overflow:visible}
.marca__svg .pc path{fill:var(--vermelho)}
.marca__svg .pc--casa path{fill:#fff}
.marca__palavra{fill:#fff}
@keyframes brandMonta{
  0%{transform:translateX(var(--dx));opacity:0}
  62%{opacity:1}
  78%{transform:translateX(calc(var(--dx) * -.035))}
  100%{transform:translateX(0);opacity:1}}
@keyframes brandPalavra{
  0%{opacity:0;transform:translateX(-14px) scaleX(.92)}
  100%{opacity:1;transform:none}}
html.anim .marca__svg .pc{animation:brandMonta .62s var(--ease) var(--d) backwards}
html.anim .marca__palavra{transform-box:fill-box;transform-origin:50% 50%;
  animation:brandPalavra .5s var(--ease) .9s backwards}
.vao{flex:none;height:max(10px,calc(var(--fh) * .655 - var(--pt) - var(--lh)))}
html.anim .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.anim .reveal.is-visible{opacity:1;transform:none}
.ganho{width:100%;text-align:center;font-size:clamp(16.5px,5.3vw,21.5px);line-height:1.42;font-weight:500;
  letter-spacing:-.01em;color:#fff;text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(var(--ink-rgb),.7),0 0 26px rgba(var(--ink-rgb),.5)}
.tarja{color:#fff;font-weight:700;padding:.02em .26em .06em;text-shadow:none;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(90deg,var(--vermelho) 0 100%) left center / 100% 100% no-repeat}
html.anim .tarja{background-size:0% 100%;transition:background-size .8s var(--ease) 1.1s}
html.anim .ganho.is-visible .tarja{background-size:100% 100%}
.regua{list-style:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr) minmax(0,1.12fr);
  margin-top:clamp(18px,3.8svh,34px);text-align:center}
.regua li{display:flex;flex-direction:column;align-items:center;padding:0 4px;
  border-left:1px solid rgba(255,255,255,.14)}
.regua li:first-child{border-left:0}
.regua li::before{content:"";display:block;width:26px;height:4px;margin-bottom:9px;background:var(--vermelho);
  clip-path:polygon(4px 0,100% 0,100% 100%,0 100%,0 4px)}
.regua b{display:flex;align-items:baseline;justify-content:center;white-space:nowrap;
  font-size:clamp(20px,6.1vw,25px);font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--vermelho);
  text-shadow:0 6px 22px rgba(var(--vermelho-rgb),.28)}
.regua b small{margin-left:3px;font-size:.44em;font-weight:700;letter-spacing:0;color:#fff}
.regua li > span{margin-top:6px;font-size:clamp(8.5px,2.4vw,9.8px);font-weight:600;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;text-wrap:balance}
.links{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2.6svh,22px);margin-top:auto;padding-top:clamp(20px,4.4svh,38px);text-align:left}
.btn{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;
  min-height:clamp(62px,10svh,86px);padding:9px 14px 9px 11px;
  font-weight:700;line-height:1.2;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--ease),filter .3s var(--ease)}
.btn::before,.btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  clip-path:polygon(var(--chanfro) 0,100% 0,100% 100%,0 100%,0 var(--chanfro))}
.btn::before{z-index:-1}
.btn::after{z-index:-2;opacity:0}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn__tx{flex:1 1 auto;min-width:0;white-space:nowrap;font-size:clamp(14.5px,calc((100vw - 142px) / 14.6),18px)}
@media (min-width:700px){.btn__tx{font-size:18px}}
.btn__tx small{display:block;margin-top:4px;font-size:13.5px;font-weight:500;line-height:1.3;letter-spacing:0;white-space:normal}
.btn__ic,.btn__zap{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;
  clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px)}
.btn__ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
.btn__seta{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:square;stroke-linejoin:miter;transition:transform .25s var(--ease)}
.btn:hover .btn__seta{transform:translateX(4px)}
@keyframes setaVai{0%,70%,100%{transform:none}80%{transform:translateX(5px)}90%{transform:translateX(1px)}}
html.anim .btn__seta{animation:setaVai 3.2s var(--ease) 2.2s infinite}
@keyframes anda{from{background-position:120% 0,0 0}to{background-position:-140% 0,0 0}}
@keyframes ringPulse{0%{inset:0;opacity:.55}70%{inset:-12px;opacity:0}100%{inset:-12px;opacity:0}}
.btn--prin{color:var(--ink);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.btn--prin::before{
  background:
    linear-gradient(105deg,transparent 0%,transparent 42%,rgba(var(--vermelho-rgb),.13) 50%,transparent 58%,transparent 100%) 120% 0/260% 100% no-repeat,
    linear-gradient(180deg,#FFFFFF 0%,#EDEFF2 100%);
  box-shadow:inset 0 -4px 0 var(--vermelho)}
.btn--prin::after{background:#fff}
html.anim .btn--prin::before{animation:anda 4.2s ease-in-out 1.8s infinite}
html.anim .btn--prin::after{animation:ringPulse 1.9s ease-out 1.4s infinite}
.btn--prin .btn__ic{background:var(--vermelho);color:#fff}
.btn--prin .btn__seta{color:var(--vermelho)}
.btn--prin .btn__tx small{color:#3E4650}
.btn--zap{color:#062B16;
  filter:drop-shadow(0 8px 22px rgba(37,211,102,.42))}
.btn--zap::before{
  background:
    linear-gradient(105deg,transparent 0%,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%,transparent 100%) 120% 0/260% 100% no-repeat,
    linear-gradient(110deg,#4BE08C 0%,#25D366 40%,#1EBE5A 65%,#3DDC80 100%) 0% 50%/220% 100%}
.btn--zap::after{background:#4BE08C}
html.anim .btn--zap::before{animation:anda 4.2s ease-in-out 3.9s infinite}
html.anim .btn--zap::after{animation:ringPulse 2.4s ease-out 2.2s infinite}
.btn--zap .btn__tx small{color:#0B3D22}
.btn__zap{background:#fff;color:#1EBE5A}
.btn__zap svg{width:27px;height:27px;fill:currentColor}
.pe{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:auto;padding-top:clamp(18px,3.6svh,32px);
  font-size:12.5px;line-height:1.3;text-align:center}
.pe__locais{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.pe__locais span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff}
.pe__locais svg{width:15px;height:15px;fill:none;stroke:var(--vermelho);stroke-width:2;stroke-linejoin:round}
.pe__dev{color:var(--claro);font-weight:500;letter-spacing:.02em}
.pe__dev a{color:#fff;font-weight:700;text-decoration:none}
.pe__dev a:hover{text-decoration:underline}
@media (max-height:760px){
  .links{gap:11px}
  .btn{min-height:58px;padding-top:6px;padding-bottom:6px}
  .btn__ic,.btn__zap{width:42px;height:42px}
  .btn__tx small{font-size:12px}
  .regua li::before{margin-bottom:6px}
}
@media (max-height:700px){
  .ganho{font-size:clamp(16px,4.7vw,18px);line-height:1.38}
  .regua{margin-top:14px}
  .regua li::before{margin-bottom:5px;height:3px}
  .regua b{font-size:clamp(19px,5.6vw,22px)}
  .regua li > span{margin-top:4px;font-size:8.5px}
  .links{padding-top:16px;gap:10px}
  .btn{min-height:58px;padding-top:5px;padding-bottom:5px}
  .btn__ic,.btn__zap{width:38px;height:38px}
  .btn__ic svg{width:22px;height:22px}
  .btn__zap svg{width:23px;height:23px}
  .btn__tx small{margin-top:2px;font-size:11.5px}
  .pe{padding-top:12px;gap:5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.anim .reveal{opacity:1;transform:none}
  html.anim .tarja{background-size:100% 100%}
}