:root {
  --color-2: #ffc436;
  --color-1: #ee2678;
  --color-3: #512e82;
}

.w-form-formrecaptcha {
  margin-bottom: 8px;
}

.estrellas-1 {
  z-index: -10;
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  min-height: 50rem;
  display: flex;
  position: fixed;
  inset: 0%;
}

.estrellas-2 {
  width: 100%;
  height: 100%;
  display: none;
}

.body {
  background-color: #818181;
}

.main {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.bg_color {
  z-index: -15;
  background-color: #140727b3;
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.bg_color._2 {
  z-index: -5;
  background-color: #0000;
  background-image: linear-gradient(90deg, #000, #0000 90%), radial-gradient(circle, #0000, #00000080);
}

.background-video {
  z-index: -20;
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0%;
}

.seccion {
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  height: auto;
  display: flex;
}

.seccion.menu {
  z-index: 999;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-image: none;
  position: fixed;
  inset: 0% 0% auto;
}

.seccion.hero {
  background-image: url('../images/Ilustraciones_KalopsiePX_web_1.avif'), url('../images/hero_shape-1.svg');
  background-position: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: 50%, auto 100%;
  min-height: 100vh;
}

.seccion.info {
  background-color: #512e8280;
  background-image: url('../images/css-pattern-by-magicpattern-2.png');
  background-position: 50%;
  background-size: auto;
  height: auto;
  padding-top: 8rem;
  padding-bottom: 3rem;
  position: relative;
}

.seccion.talentos {
  background-color: #512e8280;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.seccion.footer {
  background-color: var(--color-2);
  height: auto;
  min-height: 100vh;
}

.contenedor {
  flex-flow: wrap;
  justify-content: space-between;
  width: 80%;
  max-width: 1280px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
}

.contenedor.hero {
  padding-top: 0;
  padding-bottom: 0;
}

.contenedor.menu {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.contenedor.talentos {
  margin-top: 3rem;
}

.contenedor.footer {
  padding-top: 8rem;
  padding-bottom: 3rem;
}

.col20 {
  flex-flow: wrap;
  justify-content: space-between;
  align-self: center;
  width: 18%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}

.txt_menu {
  color: #fff;
  text-align: center;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: transparent;
  overflow-wrap: normal;
  align-self: center;
  width: 100%;
  height: auto;
  font-family: Poppins, sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.4em;
  transition: -webkit-text-stroke-color .2s;
}

.txt_menu:hover {
  -webkit-text-stroke-color: white;
  text-overflow: clip;
  font-weight: 500;
}

.txt_menu.left {
  text-align: left;
}

.txt_menu.right {
  text-align: right;
}

.txt_menu.live {
  width: auto;
  margin-right: 1rem;
  font-weight: 700;
}

.logo_menu {
  object-fit: contain;
  width: auto;
  height: 8rem;
  margin-left: auto;
  margin-right: auto;
}

.col50 {
  flex-flow: wrap;
  justify-content: space-between;
  width: 48%;
  height: auto;
  display: flex;
}

.col50.imgs {
  position: relative;
}

.col50.hero {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  align-self: center;
  width: 51%;
}

.h1 {
  color: #fff;
  text-transform: uppercase;
  align-self: center;
  width: 100%;
  height: auto;
  font-family: Poppins, sans-serif;
  font-size: 3.5rem;
  line-height: 1.4em;
}

.color-1 {
  color: var(--color-1);
}

.color-2 {
  color: var(--color-2);
}

.imagen_hero {
  width: 100vh;
  height: auto;
  position: absolute;
  inset: auto 0% 0% auto;
}

.h2 {
  color: #fff;
  align-self: center;
  width: 100%;
  height: auto;
  font-family: Poppins, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4em;
}

.h2.seccion {
  text-align: center;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: 700;
  display: block;
}

.h2.seccion.b {
  color: var(--color-1);
  text-align: left;
  margin-bottom: 0;
}

.h2.seccion.left {
  text-align: left;
}

.bold {
  font-weight: 800;
}

.parrafo_hero {
  color: #fff;
  align-self: center;
  width: 100%;
  height: auto;
  font-family: Poppins, sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.4em;
}

.button {
  background-color: var(--color-1);
  text-transform: uppercase;
  border: 3px solid #fff;
  border-radius: 15px;
  padding: .5rem 2rem;
  font-family: Poppins, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4em;
  transition: background-color .2s, color .2s;
}

.button:hover {
  color: var(--color-1);
  background-color: #fff;
}

.button.formulario {
  background-color: var(--color-1);
  width: 100%;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.button.formulario:hover {
  color: var(--color-1);
  background-color: #fff;
}

.bg_elements {
  z-index: -100;
  width: 100%;
  height: auto;
  position: fixed;
  inset: 0%;
}

.cont_info {
  border: 3px solid var(--color-2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #0000001a;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 21rem;
  padding: 1rem 2rem;
  display: flex;
  position: relative;
  overflow: clip;
}

.cont_info.carousel-info {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #0000001a;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  height: 30rem;
  display: none;
}

.cont_info.carousel-info.active {
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
  height: 50rem;
  display: flex;
}

.parrafo_info {
  color: #fff;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6em;
}

.parrafo_info._2 {
  align-self: center;
  width: auto;
  margin-right: auto;
  font-weight: 700;
}

.parrafo_info._3 {
  margin-bottom: 1rem;
  font-size: .9rem;
  font-style: italic;
  font-weight: 500;
}

.nave_img {
  width: 100%;
  height: auto;
}

.box-color {
  z-index: -1;
  background-color: var(--color-2);
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(750px);
}

.box-color._2 {
  z-index: -1;
  display: block;
  inset: 0%;
  transform: translate(750px);
}

.carousel-container {
  width: 100%;
  height: auto;
}

.carousel {
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  height: auto;
  display: flex;
}

.carousel-item {
  background-color: #0000;
  border: 5px solid #fff;
  border-radius: 20px;
  position: relative;
  overflow: clip;
}

.carousel-item._1 {
  background-color: #3ddbff;
}

.vtuber-icon {
  background-color: #0000;
  width: 16rem;
  height: 16rem;
}

.vtuber-icon._2 {
  pointer-events: none;
  background-color: #ddff60;
}

.vtuber-icon._3 {
  pointer-events: none;
  background-color: #6b3699;
}

.vtuber-icon._1 {
  pointer-events: none;
  background-color: #3ba7ff;
}

.carousel-controls {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.button-2 {
  background-color: var(--color-1);
  border: 3px solid #fff;
  border-radius: 15px;
  font-family: Poppins, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  transition: color .2s, background-color .2s;
}

.button-2:hover {
  color: var(--color-1);
  background-color: #fff;
}

.button-3 {
  background-color: #0000;
}

.nombre {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  background-color: #000000bf;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: Poppins, sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.4em;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.image {
  width: .8rem;
  height: auto;
  margin-right: auto;
}

.cont_edad {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  display: flex;
}

.carousel-info-container {
  width: 100%;
  height: auto;
  display: block;
  position: static;
  overflow: clip;
}

.list {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  padding-left: 0;
  display: flex;
}

.list-item {
  color: #fff;
  width: 100%;
  height: auto;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.4em;
  list-style-type: disc;
  display: flex;
}

.text-span {
  font-weight: 700;
}

.light {
  font-weight: 300;
}

.fondo_icon {
  z-index: -1;
  opacity: .1;
  mix-blend-mode: overlay;
  object-fit: cover;
  align-self: center;
  width: auto;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.cont_rrss {
  border-top: 1px solid #fff;
  flex-flow: wrap;
  justify-content: space-between;
  align-self: flex-end;
  width: 100%;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
}

.cont_rrss.b {
  border-top-color: var(--color-1);
}

.col16 {
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 16%;
  height: auto;
  padding-top: .5rem;
  padding-bottom: .5rem;
  display: flex;
}

.icono_rrss {
  width: 2rem;
  height: 2rem;
}

.icono_rrss._2 {
  justify-content: center;
  align-self: center;
  align-items: center;
  max-width: 2rem;
  max-height: 2rem;
  display: inline-flex;
}

.subtitulo {
  color: var(--color-3);
  align-self: flex-start;
  width: 100%;
  height: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-family: Poppins, sans-serif;
  font-size: 1.2rem;
}

.form, .form-block {
  width: 100%;
  height: auto;
}

.text-field {
  color: #fff;
  background-color: #00000080;
  border: 3px solid #fff;
  border-radius: 15px;
  width: 100%;
  height: 3rem;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.4em;
  transition: background-color .2s;
}

.text-field:hover {
  background-color: #4e4e4e80;
}

.text-field::placeholder {
  color: silver;
}

.text-field.box {
  height: 8rem;
}

.image-2 {
  margin-bottom: 1rem;
}

.codigo {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.codigo._1 {
  width: 100%;
  height: auto;
  display: none;
}

.codigo._2 {
  display: none;
}

.live-bar {
  z-index: 100;
  background-color: #b300ff;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.5rem;
  transition: background-color .2s;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.live-bar:hover {
  background-color: #dc52ff;
}

.live-bar.twitch {
  display: flex;
}

.live-bar.twitch.nino {
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none;
  display: none;
}

.live-bar.twitch.sunny {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none;
  display: none;
}

.live-bar.twitch.mixte {
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none;
  display: none;
}

.live-bar.youtube {
  background-color: red;
}

.live-bar.youtube:hover {
  background-color: #ff4c4c;
}

.live-bar.youtube.nino {
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none;
  display: none;
}

.live-bar.youtube.sunny {
  flex-flow: row;
  justify-content: center;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none;
  display: none;
  position: absolute;
}

.live-bar.youtube.mixte {
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none;
  display: none;
}

.youtubevideo {
  width: 100%;
  height: auto;
}

.wheel-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.spin-button {
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.result-text {
  text-align: center;
  width: 100%;
  height: auto;
}

.wheel {
  aspect-ratio: auto;
  object-fit: contain;
  background-image: url('../images/ruleta_svg_estilo_espacial.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  justify-content: center;
  align-items: center;
  width: 40rem;
  height: 40rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.body-2 {
  background-color: #969696;
  margin-left: auto;
  margin-right: auto;
}

.cont_button {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.ruleta-wrapper {
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.pointer {
  margin-left: auto;
  margin-right: auto;
}

.reset-button {
  display: none;
}

.dados {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

.disparos {
  width: 100%;
  height: auto;
}

.none {
  display: none;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.logout-button {
  background-color: #ec3838;
}

.inicio-btn {
  background-color: #38ec4a;
}

@media screen and (max-width: 991px) {
  .estrellas-1 {
    display: block;
  }

  .contenedor, .contenedor.hero {
    width: 90%;
  }

  .col50 {
    width: 100%;
    margin-bottom: 1rem;
  }

  .col50.hero {
    width: 100%;
  }

  .h1 {
    font-size: 3rem;
  }

  .h2 {
    font-size: 1.8rem;
  }

  .h2.seccion.b, .h2.seccion.left {
    font-size: 2.2rem;
  }

  .parrafo_hero {
    font-size: 1.1rem;
  }

  .subtitulo {
    margin-bottom: 2rem;
    font-size: 1.1rem;
  }
}

@media screen and (max-width: 767px) {
  .h1 {
    font-size: 2.5rem;
  }

  .h2 {
    font-size: 1.6rem;
  }

  .h2.seccion.b, .h2.seccion.left {
    font-size: 1.8rem;
  }

  .parrafo_hero {
    font-size: 1rem;
  }

  .cont_info {
    height: auto;
  }

  .cont_info.carousel-info.active {
    height: 50rem;
  }
}

@media screen and (max-width: 479px) {
  .seccion.hero {
    background-size: 100%, auto 100%;
  }

  .contenedor.hero {
    align-self: center;
  }

  .col20.w--current {
    width: 33%;
  }

  .logo_menu {
    width: auto;
    height: auto;
  }

  .h1 {
    font-size: 1.9rem;
  }

  .h2 {
    margin-top: 0;
    font-size: 1.3rem;
  }

  .cont_info {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .cont_info.carousel-info.active {
    height: 60rem;
  }
}