*{
  box-sizing:border-box;
}

html{
  color-scheme:dark;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -10%,#071126 0,transparent 33%),
    #010308;
  color:#f7f8fb;
  font-family:Inter,Segoe UI,Arial,sans-serif;
}

#network{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.95;
}

.portal{
  position:relative;
  z-index:2;
  width:min(850px,calc(100% - 32px));
  margin:0 auto;
  padding:36px 0 40px;
}

.hero{
  text-align:center;
}

.logo-wrap{
  position:relative;
  display:inline-block;
  animation:logoFloat 5s ease-in-out infinite;
}

.logo-text{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  font-size:102px;
  line-height:.9;
  font-weight:800;
  letter-spacing:3px;
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #f3f3f5 30%,
      #aeb2ba 73%,
      #fff 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 0 10px #ffffff10)
    drop-shadow(0 0 24px #227cff14);
}

.logo-ai{
  letter-spacing:-12px;
}

.logo-wrap p{
  margin:18px 0 0;
  color:#c9c9ce;
  font-size:31px;
  font-weight:400;
}

.spark{
  position:absolute;
  z-index:4;
  color:#fff;
  text-shadow:
    0 0 10px #fff,
    0 0 22px #80bdff;
  animation:sparkle 2.4s ease-in-out infinite;
}

.s1{
  left:8px;
  top:-16px;
  font-size:32px;
}

.s2{
  left:145px;
  top:-37px;
  font-size:27px;
  animation-delay:.8s;
}

.s3{
  left:72px;
  top:55px;
  font-size:19px;
  animation-delay:1.5s;
}

.welcome{
  margin:46px auto 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-align:left;
}

.welcome h1{
  margin:0 0 10px;
  font-size:35px;
  letter-spacing:-.6px;
}

.welcome h1 strong{
  color:#6862ff;
}

.welcome p{
  margin:0;
  color:#cacbd1;
  font-size:21px;
  line-height:1.5;
}

.wifi-logo{
  position:relative;
  width:88px;
  height:78px;
  flex:none;
  filter:drop-shadow(0 0 15px #2e8cff55);
  animation:wifiPulse 2.8s ease-in-out infinite;
}

.wifi-logo span{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border:9px solid transparent;
  border-top-color:#329cff;
  border-radius:50%;
}

.wifi-logo span:nth-child(1){
  width:90px;
  height:90px;
  top:0;
}

.wifi-logo span:nth-child(2){
  width:63px;
  height:63px;
  top:20px;
}

.wifi-logo span:nth-child(3){
  width:36px;
  height:36px;
  top:39px;
}

.wifi-logo i{
  position:absolute;
  left:50%;
  bottom:1px;
  transform:translateX(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:#6546ff;
  box-shadow:0 0 18px #6546ff;
}

.login-card{
  position:relative;
  margin:22px auto 28px;
  padding:28px 52px 30px;
  border:1px solid #4598ff;
  border-right-color:#744aff;
  border-radius:25px;
  background:
    linear-gradient(145deg,#111824db,#060a12ee);
  box-shadow:
    0 0 0 1px #ffffff05 inset,
    0 18px 60px #000d,
    0 0 25px #2089ff32,
    0 0 30px #5b38ff20;
  backdrop-filter:blur(22px);
}

.login-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      120deg,
      #ffffff08,
      transparent 34%,
      transparent 70%,
      #6357ff08
    );
  pointer-events:none;
}

.card-top{
  display:flex;
  align-items:center;
  gap:27px;
}

.wifi-circle{
  width:104px;
  height:104px;
  flex:none;
  border-radius:50%;
  border:2px solid #4aa6ff;
  border-right-color:#703eff;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle,#17355e66,transparent 62%);
  box-shadow:
    inset 0 0 26px #268cff25,
    0 0 22px #358dff2d;
  color:#3e93ff;
  font-size:63px;
  transform:rotate(-16deg);
  text-shadow:0 0 18px #506eff;
}

.card-top h2{
  margin:0 0 6px;
  font-size:28px;
}

.card-top p{
  margin:0;
  color:#b9bbc4;
  font-size:20px;
}

.divider{
  height:1px;
  margin:17px 0 22px;
  background:#ffffff20;
}

label{
  display:block;
  margin:0 0 16px;
  font-size:19px;
}

.input-box{
  height:59px;
  margin-top:8px;
  display:flex;
  align-items:center;
  border:1px solid #ffffff1c;
  border-radius:12px;
  overflow:hidden;
  background:
    linear-gradient(90deg,#111823,#161d29);
  transition:.25s ease;
}

.input-box:focus-within{
  border-color:#438fff;
  box-shadow:
    0 0 0 3px #2e82ff12,
    0 0 20px #256bff16;
}

.input-box > span{
  width:58px;
  text-align:center;
  color:#c4cad6;
  font-size:24px;
}

.input-box input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0 10px;
  outline:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:19px;
}

.input-box input::placeholder{
  color:#c0c1c7;
}

.eye{
  width:60px;
  height:100%;
  border:0;
  background:transparent;
  color:#c8ccd5;
  cursor:pointer;
  font-size:22px;
}

.terms{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
  color:#dddfe4;
  font-size:17px;
}

.terms input{
  width:23px;
  height:23px;
  accent-color:#347fff;
}

a{
  color:#2988ff;
  text-decoration:none;
}

.connect{
  position:relative;
  width:100%;
  height:64px;
  border:0;
  border-radius:11px;
  overflow:hidden;
  color:#fff;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  background:
    linear-gradient(
      100deg,
      #22a7ff 0%,
      #3275ff 42%,
      #7238f1 100%
    );
  box-shadow:
    inset 0 1px #ffffff42,
    0 11px 30px #315cff28;
  transition:.25s ease;
}

.connect:before{
  content:"";
  position:absolute;
  top:0;
  left:-60%;
  width:35%;
  height:100%;
  background:
    linear-gradient(
      100deg,
      transparent,
      #ffffff40,
      transparent
    );
  transform:skewX(-22deg);
  animation:buttonShine 4.4s infinite;
}

.connect:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px #ffffff55,
    0 14px 38px #315cff40;
}

.connect span{
  margin-right:12px;
  font-size:29px;
}

.or{
  display:flex;
  align-items:center;
  gap:18px;
  margin:18px 0;
  color:#c5c6cb;
}

.or span{
  height:1px;
  flex:1;
  background:
    linear-gradient(
      90deg,
      transparent,
      #ffffff38
    );
}

.or span:last-child{
  background:
    linear-gradient(
      90deg,
      #ffffff38,
      transparent
    );
}

.or b{
  font-weight:400;
}

.visitor{
  width:100%;
  height:58px;
  border-radius:11px;
  border:1px solid #667081;
  color:#f1f2f4;
  background:#080c12a8;
  font-size:18px;
  cursor:pointer;
  transition:.25s;
}

.visitor:hover{
  border-color:#448cff;
  background:#111722;
}

.forgot{
  width:100%;
  margin-top:15px;
  border:0;
  background:none;
  color:#7faeff;
  font-size:15px;
  cursor:pointer;
}

#message,
#forgotMessage{
  min-height:20px;
  margin-top:12px;
  text-align:center;
  color:#ffb1b1;
}

.benefits,
.contact,
.social{
  display:grid;
  border:1px solid #3b4352;
  border-radius:15px;
  background:#05090fbd;
  backdrop-filter:blur(14px);
}

.benefits{
  grid-template-columns:repeat(3,1fr);
  margin-top:27px;
  padding:21px 18px;
}

.benefits article{
  min-width:0;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:16px;
  border-right:1px solid #353b46;
}

.benefits article:last-child{
  border-right:0;
}

.benefit-icon{
  color:#248bff;
  font-size:45px;
  text-shadow:0 0 20px #237fff55;
}

.benefits strong,
.benefits span,
.social strong,
.social span{
  display:block;
}

.benefits strong{
  margin-bottom:5px;
}

.benefits span{
  color:#b9bbc1;
  font-size:14px;
}

.contact{
  grid-template-columns:1fr 1fr;
  margin-top:27px;
}

.contact a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  min-height:100px;
  color:#fff;
}

.contact a:first-child{
  border-right:1px solid #333a45;
}

.contact span,
.contact strong{
  display:block;
}

.contact span{
  margin-bottom:7px;
  font-size:17px;
}

.contact strong{
  color:#367fff;
  font-size:18px;
}

.contact a:first-child strong{
  color:#35e871;
}

.contact-icon{
  font-size:42px;
}

.whatsapp{
  color:#42df6d;
}

.globe{
  color:#2f83ff;
}

.social-title{
  margin:28px 0 16px;
  text-align:center;
  font-size:21px;
}

.social{
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  border:0;
  background:none;
}

.social a{
  min-height:91px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 26px;
  border:1px solid #38414e;
  border-radius:14px;
  color:#fff;
  background:#060a11cf;
  transition:.25s;
}

.social a:hover{
  transform:translateY(-3px);
  border-color:#418cff;
  background:#0d131d;
}

.social-icon{
  width:55px;
  height:55px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  font-size:36px;
  font-weight:700;
}

.fb{
  border-radius:50%;
  background:#146cff;
}

.ig{
  background:
    radial-gradient(
      circle at 30% 100%,
      #ffe44c,
      #ef295d 45%,
      #8c35d9 70%
    );
}

.yt{
  background:#ff0015;
}

.social strong{
  margin-bottom:5px;
}

.social span{
  color:#d4d5da;
}

.footer{
  margin-top:26px;
  padding-top:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border-top:1px solid #292f39;
  color:#9197a2;
  font-size:14px;
}

.modal{
  position:fixed;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:20px;
  background:#000b;
  backdrop-filter:blur(12px);
}

.hidden{
  display:none !important;
}

.modal-card{
  position:relative;
  width:min(480px,100%);
  padding:34px;
  border:1px solid #427fff;
  border-radius:20px;
  background:#090e17;
  box-shadow:
    0 25px 80px #000,
    0 0 35px #395cff30;
}

.modal-card h2{
  margin-top:0;
}

.modal-card p{
  color:#afb3bd;
  line-height:1.5;
}

.modal-card input{
  width:100%;
  height:55px;
  margin:10px 0 18px;
  padding:0 17px;
  border:1px solid #343e4d;
  border-radius:10px;
  outline:none;
  background:#111722;
  color:#fff;
  font-size:17px;
}

.modal-close{
  position:absolute;
  right:15px;
  top:12px;
  border:0;
  background:none;
  color:#fff;
  font-size:29px;
  cursor:pointer;
}

@keyframes logoFloat{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-8px) scale(1.012);
  }
}

@keyframes sparkle{
  0%,100%{
    opacity:.35;
    transform:scale(.75) rotate(0);
  }
  50%{
    opacity:1;
    transform:scale(1.25) rotate(35deg);
  }
}

@keyframes wifiPulse{
  0%,100%{
    transform:scale(1);
    filter:drop-shadow(0 0 12px #328fff50);
  }
  50%{
    transform:scale(1.05);
    filter:drop-shadow(0 0 25px #535cff85);
  }
}

@keyframes buttonShine{
  0%,72%{
    left:-60%;
  }
  90%,100%{
    left:140%;
  }
}

@media(max-width:720px){

  .portal{
    width:min(100% - 22px,600px);
    padding-top:22px;
  }

  .logo-text{
    font-size:65px;
    gap:10px;
  }

  .logo-ai{
    letter-spacing:-8px;
  }

  .logo-wrap p{
    margin-top:12px;
    font-size:21px;
  }

  .welcome{
    margin-top:34px;
    gap:18px;
    align-items:flex-start;
  }

  .wifi-logo{
    width:62px;
    height:58px;
    transform:scale(.78);
    transform-origin:top left;
  }

  .welcome h1{
    font-size:26px;
  }

  .welcome p{
    font-size:16px;
  }

  .login-card{
    padding:22px 20px 24px;
    border-radius:21px;
  }

  .card-top{
    gap:16px;
  }

  .wifi-circle{
    width:75px;
    height:75px;
    font-size:45px;
  }

  .card-top h2{
    font-size:22px;
  }

  .card-top p{
    font-size:16px;
  }

  label{
    font-size:16px;
  }

  .input-box{
    height:55px;
  }

  .terms{
    font-size:14px;
    align-items:flex-start;
  }

  .benefits{
    grid-template-columns:1fr;
    gap:18px;
  }

  .benefits article{
    border-right:0;
    border-bottom:1px solid #353b46;
    padding:0 8px 18px;
  }

  .benefits article:last-child{
    border-bottom:0;
    padding-bottom:0;
  }

  .contact{
    grid-template-columns:1fr;
  }

  .contact a:first-child{
    border-right:0;
    border-bottom:1px solid #333a45;
  }

  .social{
    grid-template-columns:1fr;
  }

  .footer{
    text-align:center;
    align-items:flex-start;
  }
}

.official-logo{
  display:block;
  width:min(620px,82vw);
  height:auto;
  margin:0 auto;

  filter:
    drop-shadow(0 0 8px #ffffff18)
    drop-shadow(0 0 24px #318cff18);

  animation:
    logoFloat 5s ease-in-out infinite,
    logoGlow 4.8s ease-in-out infinite;
}

@keyframes logoGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 8px #ffffff12)
      drop-shadow(0 0 18px #328cff16);
  }

  50%{
    filter:
      drop-shadow(0 0 12px #ffffff2f)
      drop-shadow(0 0 34px #397dff30)
      drop-shadow(0 0 22px #7a3cff22);
  }
}

.wifi-circle img{
  width:54px;
  height:54px;
  filter:
    invert(48%)
    sepia(98%)
    saturate(2350%)
    hue-rotate(194deg)
    brightness(104%)
    drop-shadow(0 0 12px #3e8fff);
}

.connect span img{
  width:27px;
  height:27px;
  vertical-align:middle;
  filter:brightness(0) invert(1);
}

.benefit-icon img{
  width:42px;
  height:42px;
  filter:
    invert(47%)
    sepia(94%)
    saturate(2317%)
    hue-rotate(194deg)
    brightness(105%)
    drop-shadow(0 0 12px #2789ff55);
}

.contact-icon.globe{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1d5fff1c;
  box-shadow:0 0 20px #2f83ff25;
}

.contact-icon.globe img{
  width:31px;
  height:31px;
  filter:
    invert(48%)
    sepia(94%)
    saturate(2450%)
    hue-rotate(195deg)
    brightness(106%);
}

.input-box > span img{
  width:23px;
  height:23px;
  filter:
    invert(88%)
    sepia(6%)
    saturate(450%)
    hue-rotate(180deg)
    brightness(92%);
}

.eye img{
  width:22px;
  height:22px;
  filter:
    invert(85%)
    sepia(8%)
    saturate(300%)
    hue-rotate(180deg);
}

/* =========================================================
   LOGO LUMI ANIMADO
   ========================================================= */

.logo-wrap{
  position:relative;
  isolation:isolate;
  width:min(720px,92vw);
  margin:0 auto;
  overflow:visible;
  animation:
    lumiLogoFloat 6s ease-in-out infinite;
}

/* A própria imagem */
.official-logo{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;

  /*
    Faz o preto da imagem se integrar ao fundo escuro.
    O branco/azul/violeta permanecem luminosos.
  */
  mix-blend-mode:screen;

  filter:
    brightness(1.05)
    contrast(1.06)
    drop-shadow(0 0 8px rgba(255,255,255,.12))
    drop-shadow(0 0 22px rgba(40,130,255,.18))
    drop-shadow(0 0 32px rgba(111,55,255,.12));

  animation:
    lumiLogoGlow 5.2s ease-in-out infinite;
}

/* Halo atrás do logo */
.logo-wrap::before{
  content:"";
  position:absolute;
  z-index:-1;

  left:8%;
  right:8%;
  top:12%;
  bottom:12%;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(33,129,255,.18) 0%,
      rgba(82,74,255,.10) 38%,
      rgba(130,47,255,.06) 57%,
      transparent 74%
    );

  filter:blur(34px);

  animation:
    lumiHalo 5.5s ease-in-out infinite;
}

/* Reflexo que atravessa lentamente o logo */
.logo-wrap::after{
  content:"";
  position:absolute;
  z-index:3;

  top:3%;
  bottom:20%;

  width:18%;
  left:-35%;

  pointer-events:none;

  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,255,255,.03) 25%,
      rgba(180,225,255,.22) 47%,
      rgba(255,255,255,.55) 52%,
      rgba(173,150,255,.20) 59%,
      transparent 100%
    );

  filter:blur(7px);

  transform:
    skewX(-18deg);

  mix-blend-mode:screen;

  animation:
    lumiLogoSweep 7.5s ease-in-out infinite;
}


/* Estrelas */
.logo-wrap .spark{
  position:absolute;
  z-index:5;

  color:#fff;

  pointer-events:none;

  text-shadow:
    0 0 5px #fff,
    0 0 11px #8ed0ff,
    0 0 20px #536fff;

  animation:
    lumiSpark 3.2s ease-in-out infinite;
}

.logo-wrap .s1{
  left:8%;
  top:7%;
  font-size:29px;
}

.logo-wrap .s2{
  left:25%;
  top:-2%;
  font-size:22px;
  animation-delay:.9s;
}

.logo-wrap .s3{
  left:15%;
  top:31%;
  font-size:17px;
  animation-delay:1.7s;
}


/* Movimento vertical muito suave */
@keyframes lumiLogoFloat{
  0%,100%{
    transform:
      translateY(0)
      scale(1);
  }

  50%{
    transform:
      translateY(-7px)
      scale(1.008);
  }
}


/* Logo respira */
@keyframes lumiLogoGlow{
  0%,100%{
    filter:
      brightness(1.02)
      contrast(1.05)
      drop-shadow(0 0 7px rgba(255,255,255,.10))
      drop-shadow(0 0 18px rgba(38,133,255,.17))
      drop-shadow(0 0 25px rgba(112,53,255,.10));
  }

  50%{
    filter:
      brightness(1.13)
      contrast(1.08)
      drop-shadow(0 0 12px rgba(255,255,255,.25))
      drop-shadow(0 0 35px rgba(36,143,255,.34))
      drop-shadow(0 0 38px rgba(132,59,255,.22));
  }
}


/* Halo crescendo e diminuindo */
@keyframes lumiHalo{
  0%,100%{
    opacity:.55;
    transform:scale(.94);
  }

  50%{
    opacity:1;
    transform:scale(1.08);
  }
}


/* Reflexo metálico */
@keyframes lumiLogoSweep{
  0%,62%{
    left:-35%;
    opacity:0;
  }

  67%{
    opacity:.25;
  }

  79%{
    opacity:1;
  }

  91%{
    opacity:.20;
  }

  100%{
    left:120%;
    opacity:0;
  }
}


/* Pontos/estrelas acendem e apagam lentamente */
@keyframes lumiSpark{
  0%,100%{
    opacity:.18;
    transform:
      scale(.60)
      rotate(0deg);
  }

  45%{
    opacity:1;
    transform:
      scale(1.30)
      rotate(20deg);
  }

  70%{
    opacity:.55;
    transform:
      scale(.92)
      rotate(34deg);
  }
}


/* No celular mantém a animação, mas reduz o tamanho */
@media(max-width:720px){

  .logo-wrap{
    width:min(570px,96vw);
  }

  .logo-wrap .s1{
    font-size:21px;
  }

  .logo-wrap .s2{
    font-size:17px;
  }

  .logo-wrap .s3{
    font-size:13px;
  }
}


/* Acessibilidade */
@media(prefers-reduced-motion:reduce){

  .logo-wrap,
  .official-logo,
  .logo-wrap::before,
  .logo-wrap::after,
  .logo-wrap .spark{
    animation-duration:20s;
  }
}

/* Rede digital Lumi */
#network{
  position:fixed !important;
  inset:0 !important;
  z-index:1 !important;

  display:block !important;

  width:100vw !important;
  height:100vh !important;

  opacity:1 !important;

  pointer-events:none !important;
}

.portal{
  position:relative;
  z-index:2;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 0% 38%,
      rgba(19,105,255,.08),
      transparent 35%
    ),
    radial-gradient(
      ellipse at 100% 35%,
      rgba(112,47,255,.09),
      transparent 36%
    );
}

.lumi-network-layer{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.lumi-network-side{
  position:absolute;
  top:0;
  bottom:0;
  width:min(30vw,390px);
}

.lumi-network-side.left{
  left:0;
  background:radial-gradient(
    ellipse at left center,
    rgba(0,110,255,.16),
    transparent 70%
  );
}

.lumi-network-side.right{
  right:0;
  background:radial-gradient(
    ellipse at right center,
    rgba(125,45,255,.17),
    transparent 70%
  );
}

.lumi-node{
  position:absolute;
  z-index:3;
  display:block;
  border-radius:50%;
  opacity:.2;
  animation:
    lumiNodePulse
    var(--duration)
    ease-in-out
    var(--delay)
    infinite;
}

.left .lumi-node{
  background:#b8e6ff;
  box-shadow:
    0 0 5px #fff,
    0 0 12px #3b9cff,
    0 0 25px #087cff;
}

.right .lumi-node{
  background:#e4c1ff;
  box-shadow:
    0 0 5px #fff,
    0 0 12px #a45cff,
    0 0 25px #7438ff;
}

.lumi-line{
  position:absolute;
  z-index:2;
  display:block;
  height:1px;
  transform-origin:left center;
  opacity:.18;
}

.left .lumi-line{
  background:rgba(50,150,255,.45);
  box-shadow:0 0 5px rgba(45,145,255,.35);
}

.right .lumi-line{
  background:rgba(155,80,255,.45);
  box-shadow:0 0 5px rgba(145,65,255,.35);
}

@keyframes lumiNodePulse{
  0%,100%{
    opacity:.12;
    transform:scale(.65);
  }

  50%{
    opacity:1;
    transform:scale(1.55);
  }
}

.portal{
  position:relative;
  z-index:3;
}


/* ========================================================
   REFINAMENTO V20
   ======================================================== */

/* Aproxima a apresentação do formulário */
.hero{
  margin-bottom:0 !important;
}

.logo-wrap{
  margin-bottom:-18px !important;
}

.welcome{
  margin-top:12px !important;
  margin-bottom:18px !important;
}

/* Botão Visitante passa a comunicar autenticação */
#visitorButton{
  position:relative;
}

#visitorButton::after{
  content:"Senha necessária";
  margin-left:10px;
  color:#8291a8;
  font-size:11px;
  font-weight:500;
}

/* Pontos ficam atrás do conteúdo e continuam visíveis */
.lumi-network-layer{
  z-index:1 !important;
}

.portal{
  z-index:3 !important;
}

/* Mobile */
@media(max-width:720px){
  .logo-wrap{
    margin-bottom:-8px !important;
  }

  .welcome{
    margin-top:10px !important;
  }

  #visitorButton::after{
    display:none;
  }
}

/* Modal de acesso Visitante */
.visitor-login-modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
}

.visitor-login-modal.open{
  display:grid;
}

.visitor-login-card{
  position:relative;
  width:min(430px,100%);
  padding:30px;
  border:1px solid #477dff;
  border-radius:22px;
  background:
    linear-gradient(145deg,#111824f2,#070b12f5);
  box-shadow:
    0 25px 80px #000,
    0 0 35px rgba(63,99,255,.28);
}

.visitor-login-card h2{
  margin:0 0 7px;
}

.visitor-login-card p{
  margin:0 0 20px;
  color:#aeb6c4;
}

.visitor-password-box{
  display:flex;
  align-items:center;
  height:56px;
  border:1px solid #39465a;
  border-radius:11px;
  background:#101722;
  overflow:hidden;
}

.visitor-password-box input{
  flex:1;
  min-width:0;
  height:100%;
  border:0;
  outline:0;
  padding:0 16px;
  background:transparent;
  color:#fff;
  font-size:17px;
}

.visitor-password-box button{
  width:55px;
  height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
}

.visitor-password-box img{
  width:21px;
  filter:brightness(0) invert(1);
}

.visitor-login-submit{
  margin-top:18px;
}

.visitor-login-close{
  position:absolute;
  right:14px;
  top:10px;
  border:0;
  background:none;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

#visitorLoginMessage{
  min-height:20px;
  margin-top:12px;
  text-align:center;
  color:#ff9d9d;
}