@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


:root {

  --bg: #050505;

  --line: #252525;

  --text: #f5f5f5;

  --muted: #777;

  --lime: #b8ff00;

}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  background: var(--bg);

  color: var(--text);

  font-family:
    Inter,
    Arial,
    sans-serif;

}


a {

  color: inherit;

  text-decoration: none;

}


/* =========================
   CABEÇALHO
========================= */

.site-header {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  min-height: 82px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  border-bottom:
    1px solid
    var(--line);

}


.brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  white-space: nowrap;

}


.brand img {

  width: 60px;

  height: 60px;

  display: block;

  object-fit: contain;

}


.brand span {

  font-size: 17px;

  font-weight: 800;

  letter-spacing: .08em;

}


.nav {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

  flex: 1;

}


.nav a {

  color: #999;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .08em;

}


.nav a:hover {

  color: var(--lime);

}


.header-contact {

  color: var(--lime);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .08em;

}


/* =========================
   CONSTRUÇÃO
========================= */

.construction {

  flex: 1;

  min-height: 650px;

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

}


.construction-logo {

  width: 700px;

  max-width: 80%;

  height: auto;

  display: block;

  margin-bottom: 20px;

}


.construction h1 {

  margin: 0;

  font-size: 32px;

  font-weight: 400;

  opacity: .85;

}


/* =========================
   RODAPÉ
========================= */

.footer {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin: 0 auto;

  padding:
    40px
    0
    28px;

  border-top:
    1px solid
    var(--line);

  display: grid;

  grid-template-columns:
    1fr
    auto
    auto;

  gap: 50px;

  color: #888;

}


.footer-brand p {

  max-width: 280px;

  margin:
    15px
    0
    0;

  font-size: 11px;

  line-height: 1.6;

}


.footer-links {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 9px 30px;

  align-content: start;

}


.footer-links a {

  font-size: 10px;

  font-weight: 600;

}


.footer-links a:hover {

  color: var(--lime);

}


.footer-copy {

  align-self: end;

  text-align: right;

  font-size: 10px;

}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

  .nav {

    display: none;

  }


  .footer {

    grid-template-columns:
      1fr
      1fr;

  }


  .footer-copy {

    grid-column:
      1 / -1;

    text-align: left;

  }

}


/* =========================
   CELULAR
========================= */

@media (max-width: 600px) {

  .site-header,
  .construction,
  .footer {

    width:
      calc(
        100% - 28px
      );

  }


  .site-header {

    min-height: 75px;

  }


  .brand img {

    width: 50px;

    height: 50px;

  }


  .brand span {

    font-size: 15px;

  }


  .header-contact {

    font-size: 8px;

  }


  .construction {

    min-height: 500px;

  }


  .construction-logo {

    width: 500px;

    max-width: 85%;

  }


  .construction h1 {

    font-size: 26px;

  }


  .footer {

    grid-template-columns:
      1fr;

    gap: 30px;

  }


  .footer-copy {

    grid-column: auto;

    text-align: left;

  }

}