article.cora-page {
  overflow: hidden;
}

.cora-page--wwdo--container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 145px;
  width: 100%;
}

.cora-page--wwdo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  padding: 95px 0;
}

.cora-page--wwdo--col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.cora-page--wwdo--title {
  margin: 0;
  display: flex;
}

.cora-page--wwdo--title--button {
  /* font-size: 45px; */
  /* font-size: min(max(30px, 2.6vw), 45px); */
  font-size: min(max(30px, 2.6vw), 34px);
  background-color: transparent;
  border: 0;
  text-align: left;
  color: var(--cora-primary);
  font-family: var(--cora-font-secondary);
  line-height: 1;
  margin: 0;
  padding: 0;
  max-width: 300px;
  cursor: pointer;
}

.cora-page--wwdo--description {
  /* font-size: 20px; */
  /* font-size: min(max(15px, 1.2vw), 20px); */
  font-size: min(max(15px, 1.2vw), 17px);
  line-height: 1.4em;
  font-weight: 200;
  color: var(--cora-primary);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-out, opacity 0.6s ease-out;
}

.cora-page--wwdo--col.opened .cora-page--wwdo--description {
  max-height: 200px;
  /* valor alto o suficiente para qualquer conteúdo */
  opacity: 1;
  margin-top: 25px;
}

.cora-page--wwdo--col--content {
  position: relative;
  z-index: 50;
  padding-bottom: 30px;
  border-bottom: 2px solid var(--cora-primary);
  width: 100%;
  max-width: 78%;
}

.cora-page--wwdo--col--el {
  position: absolute;
  /* mix-blend-mode: normal; */
  border-radius: 100%;
  border: 1px solid;
  outline-style: solid;
  outline-width: 1px;
  transition: 0.8s;

  /* Força renderização via GPU para evitar flickering */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.cora-page--wwdo--col--el.el1 {
  width: min(max(260px, 20vw), 300px);
  height: min(max(260px, 20vw), 300px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}

.cora-page--wwdo--col.col1 .cora-page--wwdo--col--el.el1 {
  background: #DEAECB;
  border-color: #DEAECB;
  outline-color: #DEAECB;
  filter: blur(30px);
}

.cora-page--wwdo--col.col2 .cora-page--wwdo--col--el.el1 {
  background: #A5A4EB;
  outline-color: #A5A4EB;
  border-color: #A5A4EB;
  filter: blur(30px);
}

.cora-page--wwdo--col.col3 .cora-page--wwdo--col--el.el1 {
  background: #80D1CD;
  outline-color: #80D1CD;
  border-color: #80D1CD;
  filter: blur(30px);
}

.cora-page--wwdo--col--el.el2 {
  width: min(max(260px, 20vw), 300px);
  height: min(max(260px, 20vw), 300px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
}

.cora-page--wwdo--col.col1 .cora-page--wwdo--col--el.el2 {
  background: #FF23F8;
  border-color: #FF23F8;
  outline-color: #FF23F8;
  filter: blur(25px);
}

.cora-page--wwdo--col.col2 .cora-page--wwdo--col--el.el2 {
  background: #4541D3;
  border-color: #4541D3;
  outline-color: #4541D3;
  filter: blur(30px);
}

.cora-page--wwdo--col.col3 .cora-page--wwdo--col--el.el2 {
  background: #00FF2F;
  border-color: #00FF2F;
  outline-color: #00FF2F;
  filter: blur(30px);
}

.cora-page--wwdo--col--el.el3 {
  width: min(max(280px, 25vw), 350px);
  height: min(max(280px, 25vw), 350px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.cora-page--wwdo--col.col1 .cora-page--wwdo--col--el.el3 {
  background: #FFDF41;
  border-color: #FFDF41;
  outline-color: #FFDF41;
  filter: blur(40px);
}

.cora-page--wwdo--col.col2 .cora-page--wwdo--col--el.el3 {
  background: #00B7FF;
  border-color: #00B7FF;
  outline-color: #00B7FF;
  filter: blur(40px);
}

.cora-page--wwdo--col.col3 .cora-page--wwdo--col--el.el3 {
  background: #00FFF2;
  border-color: #00FFF2;
  outline-color: #00FFF2;
  filter: blur(40px);
}

.cora-page--wwdo--col.col1.opened .cora-page--wwdo--col--el.el1,
.cora-page--wwdo--col.col1.opened .cora-page--wwdo--col--el.el2,
.cora-page--wwdo--col.col1.opened .cora-page--wwdo--col--el.el3 {
  transform: translate(-50%, -50%) scale(3);

  /* Força o navegador a redesenhar corretamente no macOS */
  opacity: 0.99;
}

.cora-page--wwdo--col.col2.opened .cora-page--wwdo--col--el.el1,
.cora-page--wwdo--col.col2.opened .cora-page--wwdo--col--el.el2,
.cora-page--wwdo--col.col2.opened .cora-page--wwdo--col--el.el3 {
  transform: translate(-50%, -50%) scale(3);
  opacity: 0.99;
}

.cora-page--wwdo--col.col3.opened .cora-page--wwdo--col--el.el1,
.cora-page--wwdo--col.col3.opened .cora-page--wwdo--col--el.el2,
.cora-page--wwdo--col.col3.opened .cora-page--wwdo--col--el.el3 {
  transform: translate(-50%, -50%) scale(3);
  opacity: 0.99;
}

.cora-page--wwdo--col.col1 {
  z-index: 10;
}

.cora-page--wwdo--col.col2 {
  z-index: 20;
}

.cora-page--wwdo--col.col3 {
  z-index: 30;
}

.cora-page--wwdo--col.col3.opened,
.cora-page--wwdo--col.col2.opened {
  z-index: 5;
}

@media(max-width: 992px) {
  .cora-page--wwdo {
    height: initial;
    padding: 0;
  }

  .cora-page--wwdo--container {
    grid-template-columns: 1fr;
    max-width: 400px;
    gap: 300px;
    padding: calc((100dvh / 2) - 100px) 0;
  }

  .cora-page--wwdo--title {
    flex-direction: column;
    width: 100%;
    max-width: 200px;
  }
}