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

html,
body {
  height: 100%;
}

body {
  background: #e7e7e7;
  overflow: hidden;
  margin: 0;
  font-size: 126%;
}

div label img {
  width: 100px;
  position: absolute;
  top: 28px;
  transform: scale(1.1);
  right: 26px;
  filter: invert(39%) sepia(62%) saturate(7322%) hue-rotate(236deg)
    brightness(84%) contrast(91%);
  display: block;
}

.selector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}

.selector #hr {
  position: relative;
  right: 180px;
}

.selector #process {
  position: relative;
  bottom: 139px;
}

.selector ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}

.selector li input {
  display: none;
}

.selector li input + label {
  position: absolute;
  height: 0%;
  width: 0%;
  bottom: -6.5%;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  font-weight: 600;
  box-shadow: none;
  transition: all 0.5s cubic-bezier(0.05, 1.32, 1, 1), width 0.8s, height 0.8s,
    color 0.3s, background-color 0.3s;
  cursor: pointer;
}

.selector.open li input + label {
  width: 160px;
  height: 160px;
  background-color: #d3d3e9;
  margin-left: -454px;
}

.selector li input + label:hover {
  background-color: #4946ce;
}

div .alcances,
div .otros,
div .ticket {
  background-color: #d3d3e9;
  width: 160px;
  height: 160px;
  font-size: 16px;
  position: absolute;
  border-radius: 50%;
  text-align: center;
  font-weight: 600;
  right: 90%;
  top: 3%;
  animation: fadeIn 2s;
  border: none;
  transition: all 0.5s cubic-bezier(0.05, 1.32, 1, 1) 0s, width 0.8s ease 0s,
    height 0.8s ease 0s, color 0.1s ease 0s, background-color 0.3s ease 0s,
    top 0s, right 0s;
}

div .alcances:hover,
div .otros:hover,
div .ticket:hover {
  background: #4946ce;
  cursor: pointer;

}

div .alcances p,
div .otros p,
div .ticket p {
  display: block;
  width: 70%;
  right: 15%;
}

div .alcances:hover p,
div .otros:hover p,
div .ticket:hover p {
  width: 70%;
  right: 15%;
  display: block;
  transform: scale(1.4);
}

div .alcances:active,
div .otros:active,
div .ticket:active .selector li input + label:active {
  box-shadow: inset 0px 10px 5px rgba(44, 30, 49, 0.397) !important;
}

div .alcances:focus-visible,
div .otros:focus-visible,
div .ticket:focus-visible {
  outline: none;
}

div .otros,
div .ticket {
  right: 90%;
  top: 79.8%;
}

div .otros {
  right: 1.7%;
  
}

.p-hr {
  display: none;
}

p {
  width: 120%;
  color: rgba(231, 231, 231, 0);
  height: fit-content;
  margin: 0%;
  position: absolute;
  top: 43%;
  right: -10%;
  text-shadow: 0px 0px 20px #d3d3e9;
  display: block;
  transform: scale(1.2);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, display 0.3s;
  line-height: 21px;
  background: none;
  cursor: pointer;

}

div .alcances:hover p,
div .otros:hover p,
div .ticket:hover p,
.selector li input + label:hover p {
  color: rgb(231, 231, 231);
  opacity: 1;
}

label:hover p {
  background: linear-gradient(
    180deg,
    rgba(2, 0, 36, 0) 0%,
    rgb(73, 70, 206, 0.9) 15%,
    rgb(73, 70, 206, 0.9) 50%,
    rgb(73, 70, 206, 0.9) 85%,
    rgba(0, 212, 255, 0) 100%
  );
}

label:hover img {
  filter: invert(82%) sepia(14%) saturate(272%) hue-rotate(201deg)
    brightness(107%) contrast(83%);
  transform: scale(1.3) rotate(10deg);
}
.selector.open li input + label:hover img.rdi {
  transform: scale(1.2) rotate(10deg);
}
.selector.open li input + label:hover img.pwi {
  transform: scale(1.45) rotate(10deg);
}
.selector.open li input + label:hover img.chi {
  transform: scale(1.4) rotate(10deg);
}
.selector.open li input + label:hover img.cci {
  transform: scale(1.2) rotate(10deg);
}
label:hover img.alci {
  transform: scale(1.05) rotate(10deg);
}

div label img {
  transition: transform 0.2s ease-in-out, filter 0.2s ease;
  cursor: pointer;
}

#cvac:hover {
  transform: scale(1.3) rotate(36deg) !important;
}
#crd:hover {
  transform: scale(1.3) rotate(72deg) !important;
}
#cpw:hover {
  transform: scale(1.3) rotate(108deg) !important;
}
#ctur:hover {
  transform: scale(1.3) rotate(144deg) !important;
}
#cnov:hover {
  transform: scale(1.3) rotate(180deg) !important;
}
#cmob:hover {
  transform: scale(1.3) rotate(216deg) !important;
}
#ccc:hover {
  transform: scale(1.3) rotate(252deg) !important;
}
#cch:hover {
  transform: scale(1.3) rotate(288deg) !important;
}
#ccom:hover {
  transform: scale(1.3) rotate(324deg) !important;
}
#cca:hover {
  transform: scale(1.3) !important;
}
#cticket:hover {
  transform: scale(1.3) !important;
}
#cotros:hover {
  transform: scale(1.3) !important;
}
#calc:hover {
  transform: scale(1.3) !important;
}

.comi,
.chi,
.mobi,
.turi,
.rdi,
.pwi,
.alci,
.otrosi,
.ticketi {
  left: 19%;
}
.chi,
.cai,
.pwi {
  top: 18%;
  transform: scale(1.2);
}
.cci {
  left: 20%;
  top: 22%;
}
.mobi,
.cai,
.otrosi,
.ticketi {
  top: 19%;
}
.novi {
  top: 23%;
  left: 18%;
}
.turi {
  top: 16%;
}
.rdi {
  transform: scale(1);
  top: 19%;
}
.vaci {
  top: 18%;
  left: 18%;
}
.alci {
  transform: scale(0.9);
  top: 15%;
}

.ch,
p.cc,
p.com,
p.mob,
p.ca,
p.rd,
p.pw,
p.tur,
p.nov {
  top: 35%;
}
p.vac {
  top: 42%;
}

/* MODO OSCURO */

body.dark {
  background: #1f2123;
}

div .alcances:hover p.dark,
div .otros:hover p.dark,
div .ticket:hover p.dark,
.selector li input + label:hover p.dark {
  color: #2b2e30;
}

label img.dark {
  filter: invert(82%) sepia(14%) saturate(272%) hue-rotate(201deg)
    brightness(107%) contrast(83%);
}
label:hover img.dark {
  filter: invert(16%) sepia(18%) saturate(184%) hue-rotate(161deg)
    brightness(91%) contrast(93%);
}

#process.dark {
  filter: invert(82%) sepia(14%) saturate(272%) hue-rotate(201deg)
    brightness(107%) contrast(83%);
}

.selector.open li input + label.dark {
  background: #2b2e30;
  color: #2b2e30;
}

.selector li input + label.dark:hover {
  background: #d3d3e9;
}

div .alcances.dark,
div .otros.dark,
div .ticket.dark {
  color: #2b2e30;
  background: #2b2e30;
}

div .alcances.dark:hover,
div .otros.dark:hover,
div .ticket.dark:hover {
  background: #d3d3e9;
}

div .alcances.dark:active,
div .otros.dark:active,
div .ticket.dark:active,
.selector li input + label.dark:active {
  box-shadow: inset 0px 10px 5px rgba(60, 49, 65, 0.397) !important;
}

p.dark {
  background: none;
}

label:hover p.dark {
  background: linear-gradient(
    180deg,
    rgba(2, 0, 36, 0) 0%,
    rgb(211, 211, 233, 0.9) 15%,
    rgb(211, 211, 233, 0.9) 50%,
    rgb(211, 211, 233, 0.9) 85%,
    rgba(0, 212, 255, 0) 100%
  );
  color: black;
  text-shadow: 0px 0px 20px #2b2e30 !important;
}


@media only screen and (max-width: 700px) {
  body, html{
    height: 100%;
    width: 100%;
  }
  li {
    transform: rotate(0deg) !important;
  }
  ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .selector.open li input + label {
    margin-left: 10px;
  }
  #hr, #process {
    display: none;
  }
  li .circulos {
    margin-left: 10px !important;
  }
  .selector ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 200px;
  }
  .selector {
    position: absolute; 
    left: 0; 
    top: 0; 
    margin-top: 0; 
    margin-left: 0;
  }
  
}
@media (min-width: 1200px) and (max-width: 1919px) {
  body {
    transform: scale(0.64);
  }

  div .alcances,
  div .otros,
  div .ticket {
    right: 113%;
    top: -20.5%;
  }

  div .ticket,
  div .otros {
    top: 94.5%;
  }

  div .otros {
    right: -25.5%;
  }
}

@media (min-width: 1300px) and (max-width: 1919px) {
  body {
    transform: scale(0.67);
  }

  div .alcances,
  div .otros,
  div .ticket {
    right: 110%;
    top: -18%;
  }

  div .ticket,
  div .otros {
    top: 93%;
  }

  div .otros {
    right: -21%;
  }
}

@media (min-width: 1400px) and (max-width: 1919px) {
  body {
    transform: scale(0.75);
  }

  div .alcances,
  div .otros,
  div .ticket {
    right: 103.3%;
    top: -13%;
  }

  div .ticket,
  div .otros {
    top: 89.5%;
  }

  div .otros {
    right: -14%;
  }
}

@media (min-width: 1500px) and (max-width: 1919px) {
  body {
    transform: scale(0.8);
  }

  div .alcances,
  div .otros,
  div .ticket {
    right: 100%;
    top: -9%;
  }

  div .ticket,
  div .otros {
    top: 87%;
  }

  div .otros {
    right: -10%;
  }
}

@media (min-width: 1700px) and (max-width: 1919px) {
  body {
    transform: scale(0.91);
  }

  div .alcances,
  div .otros,
  div .ticket {
    right: 94%;
    top: -1.7%;
  }

  div .ticket,
  div .otros {
    top: 83%;
  }

  div .otros {
    right: -3%;
  }
}

@media (max-width: 1279px) {
  body {
    transform: scale(0.571);
  }

  div .alcances,
  div .otros,
  div .ticket {
    right: 110%;
    top: -18%;
  }

  div .ticket,
  div .otros {
    top: 93%;
  }

  div .otros {
    right: -21%;
  }
}