*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
  margin:0;
}

body{
  background:#050505;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,
              "Segoe UI",Arial,sans-serif;
  overflow:hidden;
}

.hero{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100vh;

  background-image:url("../hero.jpg");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

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

  padding:
    max(24px,env(safe-area-inset-top))
    max(24px,env(safe-area-inset-right))
    max(42px,env(safe-area-inset-bottom))
    max(24px,env(safe-area-inset-left));
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.08) 35%,
      rgba(0,0,0,.32) 68%,
      rgba(0,0,0,.72) 100%
    );
}

.hero-content{
  position:relative;
  z-index:2;

  width:min(520px,100%);

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

  gap:24px;
}

.brand{
  text-align:center;
  text-shadow:0 3px 18px rgba(0,0,0,.7);
}

.brand-name{
  font-size:clamp(24px,5vw,42px);
  font-weight:800;
  letter-spacing:.14em;
}

.brand-sub{
  margin-top:5px;

  font-size:clamp(13px,2.5vw,19px);
  font-weight:600;

  letter-spacing:.42em;
  color:#e6b54a;
}

.enter-btn{
  width:min(280px,78vw);
  height:54px;

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

  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;

  background:rgba(8,8,8,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  color:#fff;
  text-decoration:none;

  font-size:15px;
  font-weight:800;
  letter-spacing:.19em;

  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

.enter-btn:active{
  transform:scale(.97);
}


/* TELEFONO */
@media (max-width:700px){

  .hero{
    background-image:url("../hero-mobile.jpg");

    padding-bottom:
      max(38px,env(safe-area-inset-bottom));
  }

  .hero-content{
    gap:20px;
  }

}


/* HORIZONTAL PEQUEÑO */
@media (orientation:landscape) and (max-height:550px){

  .hero{
    padding-bottom:
      max(18px,env(safe-area-inset-bottom));
  }

  .hero-content{
    gap:12px;
  }

  .brand-name{
    font-size:24px;
  }

  .brand-sub{
    font-size:12px;
  }

  .enter-btn{
    height:46px;
    width:230px;
  }

}


/* EGP · TIPOGRAFIA UNICA ELENA GIRJOABA */
.brand-name{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
}