* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  background: #000;
  color: #e9e9e9;
  font-family: "Barlow Condensed", sans-serif;
}


/* =========================
   HERO
========================= */

.hero {
  width: 100%;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
  overflow: hidden;
}

.hero__content {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* =========================
   TEXTO
========================= */

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;

  font-size: clamp(90px, 13vw, 180px);
  line-height: 0.84;
  letter-spacing: -0.025em;

  color: #e9e9e9;
  text-transform: uppercase;

  user-select: none;
}

.hero__title span {
  display: block;
  white-space: nowrap;
}


/* =========================
   LOGO
========================= */

.hero__logo {
  display: block;

  width: 58px;
  height: auto;

  margin-top: 58px;

  object-fit: contain;
}


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

@media (max-width: 768px) {

  .hero__title {
    font-size: clamp(75px, 19vw, 140px);
    line-height: 0.86;
  }

  .hero__logo {
    width: 54px;
    margin-top: 45px;
  }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 480px) {

  .hero {
    padding: 20px;
  }

  .hero__title {
    font-size: clamp(64px, 24vw, 110px);
    line-height: 0.87;
  }

  .hero__logo {
    width: 50px;
    margin-top: 38px;
  }
}


/* =========================
   MOBILE PEQUEÑO
========================= */

@media (max-width: 360px) {

  .hero__title {
    font-size: 60px;
  }

  .hero__logo {
    width: 46px;
    margin-top: 32px;
  }
}