@keyframes wipe-out-down {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(100% 0 0 0);
  }
}

[transition-style="out:wipe:down"] {
  animation: 1.5s cubic-bezier(0.25, 1, 0.3, 1) wipe-out-down both;
}

@keyframes circle-in-hesitate {
  0% {
    clip-path: circle(0%);
  }
  40% {
    clip-path: circle(40%);
  }
  100% {
    clip-path: circle(125%);
  }
}

[transition-style="in:circle:hesitate"] {
  animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) circle-in-hesitate both;
}



/* .hero-config{
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
@media screen and (max-width: 771px) {
  .hero-config{
      min-height: 95vh;
  }
  
} */
 
@keyframes wipe-in-up {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

[transition-style="in:wipe:up"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
}
/* Hero */

#hero-loading {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* position: absolute; */
  position: fixed;
  top: 0;
  left: 0;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  z-index: 9999;
}
#hero-loading.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
/* @media screen and (max-width: 771px) {
  #hero-loading {
    min-height: 95vh;
  }
} */
/* #hero-loading{
  width: 100%;
  height: 100%; 
} */
.hero-load {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-step1 {
  z-index: 12;
}

.intro {
  z-index: 11;

  background-image: url(../img/hero-back.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.logo-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* max-width: 500px; */
  /* Para desktop */
}
.logo-part {
  width: 50%;
  max-width: 150px;
  transform: scale(8);
  /* punto inicial */
}

.logo_right {
  margin-left: -60px;
  opacity: 0;
}
@media (min-width: 768px) {
  .logo-part {
    max-width: 300px;
  }
}