/*
 * A mandala da plataforma.
 *
 * Quatro anéis contam a mesma frase de dentro para fora: a base, os três
 * momentos da operação, o que cada um entrega, e a inteligência que atravessa
 * os três. A leitura é da esquerda para a direita, e a cor acompanha: lilás no
 * começo, roxo no meio, indigo no fim. Lime aparece só na estrela do "Decidir"
 * e na argola da bolinha, porque é acento, nunca superfície.
 *
 * A roda começa como esqueleto cinza e ganha cor conforme a pessoa arrasta a
 * bolinha pelo arco. O esqueleto existe desde o primeiro quadro: sem ele a
 * pessoa veria um vazio e não saberia que há algo a percorrer.
 *
 * Abaixo de 860px a roda não cabe legível (num celular um rótulo ficaria com
 * uns 4px), e ali entra a lista empilhada. Ela não é a roda encolhida: é o
 * mesmo conteúdo em outra forma. E é dela que o JS lê os dados da roda, então
 * a lista é a fonte, não uma segunda cópia a divergir.
 */

.home-mandala {
  background: #ffffff;
  border-top: 1px solid #e3d7f5;
  padding: 84px 0 76px;
  scroll-margin-top: 88px;
}

.home-mandala h2 {
  margin: 0 auto;
  max-width: 24ch;
  text-align: center;
  font: 400 clamp(30px, 3.1vw, 44px)/1.12 'Roboto Serif', Georgia, serif;
  letter-spacing: -.03em;
  color: #1b0d35;
}

.home-mandala h2 span { color: #6c2bea }

.mandala-sub {
  margin: 16px auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: 16px;
  line-height: 1.65;
  color: #4c4358;
}

/* "Decidir" atravessa os três momentos, então fica fora da roda, no topo. */
.mandala-decidir {
  margin-top: 46px;
  text-align: center;
}

.mandala-estrela {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: #1b0d35;
  color: #c7f04a;
  font-size: 22px;
  line-height: 1;
}

.mandala-decidir strong {
  display: block;
  margin-top: 10px;
  font: 400 clamp(20px, 2vw, 27px)/1 'Roboto Serif', Georgia, serif;
  color: #1b0d35;
}

.mandala-decidir p {
  margin: 8px 0 0;
  font-size: 13px;
  color: #756485;
}

/* ---------------------------------------------------------------- roda --- */

.mandala-roda {
  position: relative;
  margin: 18px auto 0;
  width: 100%;
  max-width: 1060px;
  aspect-ratio: 2 / 1;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.mandala-roda[data-arrastando='1'] { cursor: grabbing }

/* Filho direto, e não descendente: os ícones dos rótulos também são <svg> e
   seriam esticados para o tamanho da roda inteira. */
.mandala-roda > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mandala-rotulos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mandala-rotulos > * {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: opacity 300ms ease, color 300ms ease;
}

/* O ícone fica em cima do rótulo, como na referência, e herda a cor dele: assim
   apaga e acende junto, sem uma segunda regra para manter em dia. */
.mandala-rotulos svg {
  display: block;
  margin: 0 auto 5px;
}

.mandala-pilar-rotulo {
  font: 400 clamp(14px, 1.75vw, 23px)/1 'Roboto Serif', Georgia, serif;
}

.mandala-pilar-rotulo svg {
  width: clamp(17px, 1.9vw, 23px);
  height: clamp(17px, 1.9vw, 23px);
  margin-bottom: 7px;
}

.mandala-item-rotulo {
  width: clamp(56px, 7.4vw, 84px);
  font-size: clamp(8px, .95vw, 11.5px);
  line-height: 1.25;
}

.mandala-item-rotulo svg {
  width: clamp(12px, 1.4vw, 18px);
  height: clamp(12px, 1.4vw, 18px);
}

/* Apagado é o estado de repouso: a peça existe, mas ainda não foi percorrida. */
.mandala-rotulos > [data-aceso='0'] {
  opacity: .32;
  color: #9a93a8;
}

/*
 * O arquivo do logo é claro, feito para fundo escuro, e o miolo da roda é
 * branco: sem filtro ele some. O site já resolve isso no cabeçalho do mesmo
 * jeito, então aqui é a mesma linha, não uma segunda solução.
 */
.mandala-marca {
  display: block;
  height: clamp(26px, 3.4vw, 44px);
  width: auto;
  filter: brightness(0) saturate(0);
}

/* A bolinha: o controle. Argola lime, miolo roxo, e foco visível. */
.mandala-bolinha {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 3px solid #c7f04a;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 16px -4px rgba(42, 27, 58, .4);
  cursor: grab;
  transition: transform 150ms ease;
  z-index: 2;
}

.mandala-bolinha:hover,
.mandala-bolinha:focus-visible { transform: scale(1.12) }
.mandala-bolinha:focus-visible { outline: 2px solid #6c2bea; outline-offset: 4px }
.mandala-bolinha i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6c2bea;
}

.mandala-dica {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: #756485;
}

/* --------------------------------------------------------------- base ---- */

.mandala-base {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  margin: 28px auto 0;
  padding: 20px 40px;
  border-radius: 999px;
  background: #ede4fe;
  list-style: none;
}

.mandala-base li {
  font-size: clamp(11.5px, 1.05vw, 14.5px);
  color: #1b0d35;
}

/* ------------------------------------------------------------ empilhada -- */

.mandala-pilares { display: none }

.mandala-pilar {
  overflow: hidden;
  border: 1px solid #e3d7f5;
  border-radius: 10px;
}

.mandala-pilar h3 {
  margin: 0;
  padding: 12px 16px;
  font: 400 1.1rem/1 'Roboto Serif', Georgia, serif;
}

.mandala-pilar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 12px 16px;
  list-style: none;
}

.mandala-pilar li {
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .7);
  font-size: 11.5px;
  color: #3b2b57;
}

@media (max-width: 860px) {
  .mandala-roda,
  .mandala-dica { display: none }

  .mandala-pilares {
    display: grid;
    gap: 12px;
    margin-top: 24px;
  }

  .mandala-base {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    padding: 16px 24px;
    border-radius: 16px;
  }
}