*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-neutral-161616);
  background:var(--color-white-ffffff);
  min-height:100vh;
  padding:0;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

.skip-link{
  position:absolute;
  left:var(--space-16);
  top:var(--space-16);
  padding:10px 12px;
  background:var(--color-white-ffffff);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  transform:translateY(-200%);
  transition:transform .2s ease;
  z-index:40;
}

.skip-link:focus{
  transform:translateY(0);
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.frame{
  width:100vw;
  height:100vh;
  position:relative;
  overflow:hidden;
  border-radius:0;
  background:var(--color-white-ffffff);
  box-shadow:none;
}

.frame::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:url("./map.png");
  background-size:cover;
  background-position:center;
  transform:scale(var(--bg-zoom, 1));
  transform-origin:50% 50%;
  transition:transform 80ms linear;
  opacity:.86;
  pointer-events:none;
}

.frame::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  background:transparent;
  pointer-events:none;
}

.main,
.footer{
  position:absolute;
  inset:auto;
  z-index:2;
}

.container{
  width:min(var(--container, 903px), calc(100% - 40px));
  margin:0 auto;
}

.site-header{
  position:fixed;
  z-index:100;
  top:54px;
  left:0;
  width:100%;
  height:71.2666px;
  pointer-events:none;
  transition:top .25s ease;
}

.header-inner{
  pointer-events:auto;
  position:relative;
  width:min(903px, calc(100% - 40px));
  height:71.2666px;
  display:flex;
  align-items:center;
  margin:0 auto;
  padding:0 15.8px 0 40.98px;
  border-radius:66.9211px;
  color:#fff;
  background:rgba(0, 0, 0, .4);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.site-header.is-scrolled{
  top:24px;
}

.site-header.is-scrolled .header-inner{
  background:rgba(0, 0, 0, .52);
}

.site-header .brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  white-space:nowrap;
}

.site-header .brand--top{
  flex:0 0 119.508px;
  width:119.508px;
  height:26.094px;
}

.site-header .brand-logo{
  display:block;
  width:119.508px;
  height:26.094px;
  object-fit:contain;
}

.site-nav{
  position:absolute;
  left:225px;
  top:27.811px;
  width:454.408px;
  height:17.007px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  font-size:12.1675px;
  line-height:18.2512px;
  font-weight:500;
}

.site-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:17.007px;
  text-decoration:none;
  color:#fff;
  opacity:1;
  transition:opacity .2s ease;
}

.site-nav a.site-nav__login{
  display:none;
}

.site-nav a:hover,
.site-nav a.is-active{
  color:#fff;
  opacity:.72;
}

.header-ctas{
  margin-left:auto;
  display:flex;
  align-items:center;
}

.btn-header{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:131.235px;
  height:42.112px;
  border-radius:48.198px;
  text-decoration:none;
  font-size:11.5919px;
  line-height:17.3879px;
  font-weight:600;
}

.btn-header--cadastro{
  color:#002645;
  background:#fff;
}

.top-login{
  pointer-events:auto;
  position:absolute;
  top:15px;
  right:62.765px;
  width:131.235px;
  height:42.112px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:55px;
  border:1px solid #CCCCCC;
  color:#FFFFFF;
  background:linear-gradient(180deg, #76004F 0%, #DC0093 100%);
  text-decoration:none;
  font-size:clamp(12px, 0.85vw, 14px);
  line-height:1;
  font-weight:500;
  box-shadow:none;
  transition:filter .2s ease, transform .2s ease;
}

.top-login:hover{
  filter:brightness(1.04);
}

.top-login:focus-visible{
  outline:2px solid rgba(0,111,253,.8);
  outline-offset:3px;
}

.hamburger{
  display:none;
  width:42.112px;
  height:42.112px;
  margin-left:auto;
  border-radius:999px;
  background:#fff;
  color:#002645;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.hamburger span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform .25s ease, opacity .25s ease;
}

body.menu-open .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2){ opacity:0; }
body.menu-open .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0;
  font-weight:var(--font-weight-medium);
  border:1px solid transparent;
  cursor:pointer;
}

.main{
  left:0;
  top:0;
  width:100%;
  height:100%;
  padding:0;
}

.hero__title-art{
  position:relative;
  z-index:2;
  position:absolute;
  left:35.364583%;
  top:25.080437%;
  width:29.427083%;
  height:33.366435%;
}

.hero__title-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.cluster{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
}

.bubble{
  position:absolute;
  width:clamp(46px, 4.15vw, 80px);
  height:clamp(46px, 4.15vw, 80px);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--color-white-ffffff);
  border:3.19px solid var(--ring, #0095FF);
  box-shadow:0 10px 40px rgba(0,0,0,.12);
  transform:translate(-50%, -50%);
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:grab;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  isolation:isolate;
  z-index:10;
}

.bubble:active{
  cursor:grabbing;
}

.bubble--halo::before,
.bubble--halo::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:999px;
  background:rgba(160,218,249,.55);
  z-index:-1;
  pointer-events:none;
}

.bubble--halo::before{
  width:calc(100% * var(--halo2, 2.2));
  height:calc(100% * var(--halo2, 2.2));
  opacity:.5;
}

.bubble--halo::after{
  width:calc(100% * var(--halo1, 1.7));
  height:calc(100% * var(--halo1, 1.7));
  opacity:.55;
}

.bubble__img{
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(160,218,249,.45), rgba(255,8,173,.14));
  font-size:20px;
  overflow:hidden;
}

.bubble__photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.meter{
  position:absolute;
  left:37.96875%;
  top:67.792453%;
  width:24.129687%;
  height:5.703078%;
  border-radius:999px;
  background:#F6F6F6;
  display:grid;
  place-items:center;
  z-index:3;
}

.meter__range{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.meter__surface{
  width:100%;
  height:100%;
  position:relative;
}

.meter__track{
  position:absolute;
  left:6.538462%;
  right:6.538462%;
  top:50%;
  transform:translateY(-50%);
  height:calc(100% * 10.2102 / 86.7866);
  border-radius:999px;
  overflow:visible;
  background:#E8DEF8;
}

.meter__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--meter, 50%);
  border-radius:999px;
  background:linear-gradient(90deg, #FF08AD 0%, #450036 100%);
}

.meter__rest{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#E8DEF8;
  z-index:-1;
}

.meter__thumb{
  position:absolute;
  top:50%;
  left:var(--meter, 50%);
  transform:translate(-50%, -50%);
  width:clamp(3px, 0.18vw, 4px);
  height:calc(100% * 28.078 / 86.7866);
  border-radius:999px;
  background:#6750A4;
}

.meter__dot{
  position:absolute;
  top:50%;
  right:0;
  transform:translate(50%, -50%);
  width:clamp(6px, 0.5vw, 8px);
  height:clamp(6px, 0.5vw, 8px);
  border-radius:999px;
  background:#4A4459;
}

.footer{
  left:0;
  bottom:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.footer__info{
  position:absolute;
  left:50%;
  top:79.2%;
  transform:translateX(-50%);
  width:min(760px, 74vw);
  padding:10px 18px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  border-radius:24px;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

.footer__info .brand{
  width:85px;
  height:60px;
}

.brand__image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.footer__lgpd{
  margin:0;
  text-align:center;
  color:rgba(0,0,0,.62);
  font-family:Roboto, sans-serif;
  font-weight:300;
  font-size:clamp(11px, .82vw, 13px);
  line-height:1.35;
  letter-spacing:0;
  max-width:720px;
  text-wrap:balance;
}

@media (max-width: 980px){
  .site-header{
    top:14px;
    height:58px;
  }
  .site-header.is-scrolled{
    top:12px;
  }
  .header-inner{
    width:calc(100% - 24px);
    height:58px;
    padding:0 8px 0 18px;
    border-radius:58px;
  }
  .brand--top{
    flex-basis:119.508px;
    width:119.508px;
    height:26.094px;
  }
  .site-nav{
    position:fixed;
    top:84px;
    left:12px;
    right:12px;
    width:auto;
    height:auto;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px;
    border-radius:24px;
    background:rgba(0,0,0,.82);
    box-shadow:0 24px 70px rgba(0,0,0,.35);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    max-height:calc(100svh - 96px);
    overflow-y:auto;
  }
  body.menu-open .site-nav{
    display:flex;
  }
  .site-nav a{
    height:auto;
    padding:15px 14px;
    font-size:14px;
    border-radius:14px;
  }
  .site-nav a.site-nav__login{
    display:inline-flex;
  }
  .site-nav a:hover{
    background:rgba(255,255,255,.08);
    opacity:1;
  }
  .header-ctas{
    display:none;
  }
  .top-login{
    display:none;
  }
  .hamburger{
    display:flex;
  }
}

@media (max-width: 720px){
  body{
    padding:0;
    place-items:stretch;
  }
  .frame{
    width:100%;
    border-radius:0;
    box-shadow:none;
    min-height:100svh;
    height:100svh;
  }
  .main{
    text-align:center;
  }
  .hero__title-art{
    left:50%;
    top:25%;
    width:min(560px, calc(100% - 32px));
    height:auto;
    transform:translateX(-50%);
  }
  .hero__title-image{
    height:auto;
  }
  .meter{
    left:50%;
    top:74%;
    transform:translateX(-50%);
    width:min(560px, calc(100% - 24px));
    height:86px;
  }
  .footer__lgpd{
    font-size:11px;
    line-height:1.45;
  }
  .footer__info{
    left:50%;
    top:auto;
    bottom:12px;
    width:calc(100% - 24px);
    padding:12px 14px 14px;
  }
  .brand{
    width:85px;
    height:60px;
  }
}