.img-white {
  filter: brightness(0) invert(100%);
}

.img-black {
  filter: brightness(0);
}
.fecha-img {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  font-size: medium;
  align-items: center;
  padding-left: 2rem;
}

.fecha-img img {
  width: 100px;
  aspect-ratio: 1;
}

.flecha {
  margin-top: 2rem;
  width: 23px;
  height: 25px;
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.rueda-calendarica {
  height: 73vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-composite: intersect;
  mask-image: linear-gradient(
      to top,
      transparent 0,
      #1f1f1f 3% 97%,
      transparent 100%
    ),
    linear-gradient(to left, transparent 0, #1f1f1f 3% 97%, transparent 100%);
}

.rueda-calendarica,
.rueda-calendarica * {
  box-sizing: content-box;
}

#cholq\'ij {
  aspect-ratio: 1;
  position: absolute;
  right: calc(35% + 1px);
  border-radius: 50%;
  height: calc(1156.88px * var(--rueda-ratio));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#cholq\'ij .circle:not(.circle-num) img {
  transform: rotate(-90deg);
}

#cholq\'ij .circle.circle-num img {
  transform: rotate(180deg);
}

#cholq\'ij .circle span:nth-child(1) {
  width: calc(20px * var(--rueda-ratio));
}

#cholq\'ij .circle span:nth-child(2) {
  width: calc(30px * var(--rueda-ratio));
  background: #ffffff padding-box;
}

#haab {
  aspect-ratio: 1;
  position: absolute;
  left: calc(65% + 1px);
  border-radius: 50%;
  height: calc(21026.66px * var(--rueda-ratio));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  transition: transform 3s ease-in-out;
}

#haab .circle {
  background: radial-gradient(
    closest-side,
    transparent calc(100% - 115px * var(--rueda-ratio)),
    #2e4f4f calc(100% - 115px * var(--rueda-ratio))
  );
}

#haab .circle:not(.circle-num) img {
  transform: rotate(90deg);
}

#haab .circle span {
  width: calc(30px * var(--rueda-ratio));
  background: #ffffff padding-box;
}

#haab .circle > div {
  transform: rotate(calc(var(--n) * 0.9863deg - 90.9863deg));
}

@media (max-width: 601px) {
  .rueda-calendarica {
    --rueda-ratio: 1 / 2;
  }
}

@media (min-width: 601px) {
  .rueda-calendarica {
    --rueda-ratio: 3 / 5;
  }
}

@media (min-width: 994px) {
  .rueda-calendarica {
    --rueda-ratio: 2 / 3;
  }

  #cholq\'ij {
    right: calc(25% + 1px);
  }

  #haab {
    left: calc(75% + 1px);
  }
}

.circle {
  aspect-ratio: 1;
  position: absolute;
  background: radial-gradient(
    closest-side,
    transparent calc(100% - 125px * var(--rueda-ratio)),
    #2dc997 calc(100% - 125px * var(--rueda-ratio))
  );
  background-clip: content-box;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle > div {
  height: 50%;
  width: calc(100px * var(--rueda-ratio));
  position: absolute;
  bottom: 50%;
  transform-origin: center bottom;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.circle img {
  width: calc(100px * var(--rueda-ratio));
  height: calc(100px * var(--rueda-ratio));
}

.circle span {
  display: block;
}

.circle > div > div {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.circle#circle-energia {
  background: radial-gradient(
    closest-side,
    transparent calc(100% - 125px * var(--rueda-ratio)),
    #ecb176 calc(100% - 125px * var(--rueda-ratio))
  );
  background-clip: content-box;
  height: calc(628.9px * var(--rueda-ratio));
  right: calc(109.06px * var(--rueda-ratio));
  padding: calc(10px * var(--rueda-ratio));
  transition: transform 3s ease-in-out;
}

.circle#circle-energia span {
  height: calc(19.06px * var(--rueda-ratio));
  background-color: #ecb176;
}

.circle#circle-energia > div {
  transform: rotate(calc(var(--n) * -27.69deg + 90deg));
}

.circle#circle-nahual {
  height: calc(1156.88px * var(--rueda-ratio));
  padding: calc(10px * var(--rueda-ratio));
  transition: transform 3s ease-in-out;
}

.circle#circle-nahual span:nth-child(1) {
  height: calc(17.12px * var(--rueda-ratio));
  background-color: #2dc997;
}

.circle#circle-nahual span:nth-child(2) {
  height: calc(19.06px * var(--rueda-ratio));
}

.circle#circle-nahual > div {
  transform: rotate(calc(var(--n) * -18deg + 36deg));
}

.circle#circle-uinal {
  height: calc(20806.66px * var(--rueda-ratio));
}

.circle#circle-kin {
  height: calc(21026.66px * var(--rueda-ratio));
}

.circle#circle-kin span {
  height: calc(10.4px * var(--rueda-ratio));
}

.rot-left {
  transform: rotate(-90deg);
}

.cuenta-larga {
  --cuenta-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 601px) {
  .cuenta-larga {
    --cuenta-ratio: 2;
  }
}

.cuenta-larga img {
  height: calc(150px / var(--cuenta-ratio));
  width: calc(150px / var(--cuenta-ratio));
}

.cuenta-larga .introductorio img {
  height: calc(400px / var(--cuenta-ratio));
  width: calc(600px / var(--cuenta-ratio));
}

.cuenta-larga div {
  display: flex;
  position: relative;
}

.cuenta-larga div.senor-noche {
  flex-direction: row-reverse;
}

.cuenta-larga > div > div {
  width: calc(300px / var(--cuenta-ratio));
}

.cuenta-larga div > span {
  position: absolute;
  display: inline-block;
  text-align: center;
  color: #2dc997;
  writing-mode: vertical-rl;
  height: 100%;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

.cuenta-larga div > span.left {
  right: 100%;
  border-right: 1px solid #ecb176;
}

.cuenta-larga div > span.rigth {
  left: 100%;
  border-left: 1px solid #ecb176;
}

.introductorio > span {
  top: 50%;
  height: 80%;
  transform: translateY(-50%);
}

.cruz-maya-wrapper {
  background-image: url("/img/cruz_maya.png");
  background-size: 1200px 1200px;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cruz-maya,
.cruz-maya .middle,
.cruz-maya div:has(> img) {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.cruz-maya {
  flex-direction: column;
  width: 60%;
  aspect-ratio: 1;
}

.cruz-maya div:has(> img) {
  flex-direction: column;
}

.cruz-maya div span {
  color: #2dc997;
  background-color: #1f1f1f80;
}

.cruz-maya img {
  height: 100px;
  width: 100px;
}

.cruz-maya .middle {
  width: 100%;
}

@media (max-width: 994px) {
  .cruz-maya {
    width: 100%;
  }
}

@media (max-width: 661px) {
  .cruz-maya img {
    height: 50px;
    width: 50px;
  }

  .cruz-maya-wrapper {
    background-size: 600px 600px;
  }

  .cruz-maya {
    width: 90%;
  }

  .fecha {
    font-size: 15px;
  }
  
  .fecha-img {
    font-size: small;
  }
  
  .fecha-img img {
    width: 75px;
    height: 75px;
  }

  .cuenta-larga div > span {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
}