/* Roda da Vida — Entre Fases.
   Identidade: creme, areia, terracota, mel, cacau.
   Elemento gráfico da marca: os dois arcos e o eixo de luz. */
:root {
  --creme: #F6EEE3;
  --areia: #E8D5C0;
  --terracota: #C97B63;
  --mel: #D9A45B;
  --cacau: #5A3E33;
  --suave: #A3938A;
  --branco: #FFFDFA;
  --sombra: 0 2px 18px rgba(90, 62, 51, .07);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--cacau);
  background: var(--creme);
  font-weight: 300;
  line-height: 1.55;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* Os arcos da marca, bem suaves, atrás de tudo */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% -18%, rgba(232, 213, 192, .55), transparent 46%),
    radial-gradient(circle at -22% 42%, rgba(232, 213, 192, .38), transparent 38%),
    radial-gradient(circle at 122% 78%, rgba(232, 213, 192, .38), transparent 38%);
}

.folha { position: relative; z-index: 1; max-width: 34rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

h1, h2, h3 {
  font-family: 'Noto Serif Display', Georgia, serif;
  font-weight: 500;              /* 400 afina demais nesta fonte */
  font-stretch: 96%;             /* a mesma largura do logo */
  font-variation-settings: 'wdth' 96, 'wght' 500;
  line-height: 1.14;
  letter-spacing: -.005em;
}
h1 { font-size: 2.35rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.18rem; }
p { margin-top: 0.9rem; }
.sumido { display: none !important; }

.aparece { animation: surgir .45s ease both; }
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- abertura: a capa da marca ---------- */
.capa {
  position: relative;
  min-height: 100dvh;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* sangra de ponta a ponta */
  padding: 3rem 2rem 3.5rem;
  background: var(--cacau);
  color: var(--creme);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* o ícone da marca, grande e suave, atrás de tudo */
.capa::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 30rem);
  aspect-ratio: 1;
  /* O ícone em marca d'água saiu em 12/10/2026: a capa já tem o logo com o
     nome, e a regra da marca não deixa os dois juntos. */
  background: none;
  opacity: .1;
  pointer-events: none;
}
.capa::after {                    /* o arco de luz, marca d'água */
  content: '';
  position: absolute;
  width: 128%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 91, .3);
  bottom: -62%;
}
.capa > * { position: relative; z-index: 1; max-width: 26rem; width: 100%; }
.capa .marca { width: 9.5rem; margin-bottom: 2.4rem; }
.capa h1 { color: var(--creme); font-size: 2.6rem; }
.capa .frase {
  font-family: 'Noto Serif Display', serif;
  font-style: italic;
  font-size: 1.28rem;
  color: var(--mel);
  margin-top: 1.2rem;
  max-width: 22rem;
}
.capa .convite { color: rgba(246, 238, 227, .72); font-size: .95rem; margin-top: 1.8rem; max-width: 20rem; }
.capa .botao { background: var(--terracota); max-width: 20rem; }
.capa .selo { margin-top: 2.5rem; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(246,238,227,.45); }

/* ---------- botões ---------- */
.botao {
  display: block; width: 100%; border: 0; border-radius: 999px;
  background: var(--terracota); color: var(--branco);
  font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 500;
  letter-spacing: .02em; padding: 1.05rem 1.5rem; margin-top: 2rem;
  cursor: pointer; box-shadow: 0 6px 18px rgba(201, 123, 99, .28);
  transition: transform .15s, box-shadow .15s;
}
.botao:active { transform: translateY(1px); }
.botao:disabled { background: var(--areia); color: var(--suave); box-shadow: none; cursor: default; }

/* ---------- perguntas ---------- */
.passo { position: relative; display: flex; flex-direction: column; min-height: 100dvh; justify-content: center; padding: 2rem 0; }
.passo::before {                       /* o ícone da marca, quase transparente */
  content: '';
  position: absolute;
  right: -18%;
  top: 50%;
  transform: translateY(-50%);
  width: 78%;
  aspect-ratio: 1;
  background: url(../img/icone-cores.png) no-repeat center / contain;
  opacity: .055;
  pointer-events: none;
}
.tela { position: relative; }
.tela::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2rem;
  transform: translateX(-50%);
  width: 62%;
  aspect-ratio: 1;
  background: url(../img/icone-cores.png) no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.tela > * { position: relative; z-index: 1; }
.trilha { height: 2px; background: rgba(232, 213, 192, .9); border-radius: 2px; margin-bottom: 2.6rem; }
.trilha span { display: block; height: 100%; background: var(--terracota); border-radius: 2px; transition: width .4s ease; }

/* o ícone da área, em cima da pergunta */
.marca-area { margin-bottom: 1.1rem; }
.icone-area .luz { fill: #D9A45B; stroke: none; }
.leitura .topo .icone-area { flex: 0 0 auto; }
.area-nome { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--terracota); font-weight: 500; margin-top: .5rem; }
/* A pergunta é formulário, não título: Montserrat, como manda o manual.
   A serif fica nos títulos curtos, onde ela é bonita sem atrapalhar a leitura. */
.pergunta {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.45;
  letter-spacing: 0;
  margin-top: .8rem;
}
.ajuda { font-size: .85rem; color: var(--suave); margin-top: .7rem; }

.notas { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-top: 2.2rem; }
.nota {
  aspect-ratio: 1; border: 1px solid var(--areia); background: var(--branco); border-radius: 50%;
  font-family: 'Montserrat', sans-serif; font-size: 1rem; color: var(--cacau); cursor: pointer;
  box-shadow: var(--sombra); transition: transform .12s, background .12s, border-color .12s;
}
.nota:hover { border-color: var(--terracota); transform: translateY(-2px); }
.nota.marcada { background: var(--terracota); border-color: var(--terracota); color: var(--branco); }
.legenda { display: flex; justify-content: space-between; font-size: .75rem; color: var(--suave); margin-top: .9rem; }
.voltar { background: none; border: 0; color: var(--suave); font-family: 'Montserrat', sans-serif; font-size: .85rem; margin-top: 2.2rem; cursor: pointer; align-self: center; }

/* ---------- identificação ---------- */
.tela { padding-top: 3.5rem; }
label { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 1.6rem; color: #8C6A57; }
input[type=text], input[type=tel] {
  width: 100%; margin-top: .45rem; padding: .9rem 1rem;
  border: 1px solid var(--areia); border-radius: .7rem; background: var(--branco); color: var(--cacau);
  font-family: 'Montserrat', sans-serif; font-size: 1rem; box-shadow: var(--sombra);
}
input:focus { outline: 2px solid var(--terracota); outline-offset: 1px; }
.aceite {
  display: flex; gap: .8rem; align-items: flex-start; margin-top: 1.8rem;
  background: var(--branco); border: 1px solid var(--areia); border-radius: .9rem;
  padding: 1.1rem; box-shadow: var(--sombra);
}
.aceite input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--terracota); flex: 0 0 auto; }
.aceite span { font-size: .88rem; }

/* ---------- resultado ---------- */
.cartao-roda {
  background: var(--branco); border-radius: 1.4rem; padding: 1.2rem .6rem .4rem;
  margin-top: 1.6rem; box-shadow: var(--sombra); border: 1px solid rgba(232, 213, 192, .7);
}
.roda-desenho { display: block; width: 100%; }

.destaque {
  position: relative; background: var(--areia); border-radius: 1.2rem;
  padding: 1.8rem 1.6rem; margin-top: 2.2rem; overflow: hidden;
}
.destaque::after {
  content: ''; position: absolute; right: -2.2rem; bottom: -2.6rem;
  width: 9rem; height: 9rem; opacity: .16;
  background: url(../img/icone-cores.png) no-repeat center / contain;
}
.destaque > * { position: relative; z-index: 1; }
.destaque .rotulo { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: #8C6A57; }
.destaque h2 { margin-top: .5rem; }

.titulo-secao { display: flex; align-items: center; gap: .9rem; margin-top: 3rem; }
.titulo-secao::after { content: ''; flex: 1; height: 1px; background: var(--areia); }

.leitura { border-top: 1px solid rgba(232, 213, 192, .8); padding-top: 1.3rem; margin-top: 1.4rem; }
.leitura:first-child { border-top: 0; }
.leitura .topo { display: flex; align-items: center; gap: .8rem; }
.leitura .topo h3 { flex: 1; }
.leitura .valor { font-family: 'Noto Serif Display', serif; font-size: 1.6rem; color: var(--terracota); }
.leitura p { margin-top: .5rem; font-size: .95rem; }

.bloco {
  background: var(--branco); border: 1px solid rgba(232, 213, 192, .8); border-radius: 1.2rem;
  padding: 1.7rem; margin-top: 2rem; box-shadow: var(--sombra);
}
.bloco ol { margin: .9rem 0 0 1.1rem; }
.bloco li { margin-top: .8rem; font-size: .95rem; }
.bloco li::marker { color: var(--mel); }

.acolhimento {
  font-family: 'Noto Serif Display', serif; font-style: italic; font-size: 1.3rem;
  text-align: center; margin-top: 3.2rem; color: var(--cacau); line-height: 1.45;
}
.eixo { display: block; width: 1px; height: 2.6rem; background: linear-gradient(var(--areia), var(--mel)); margin: 2.2rem auto 0; }
.eixo::after { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--mel); margin: 0 0 0 -3px; }

.zap { background: var(--cacau); box-shadow: 0 6px 18px rgba(90, 62, 51, .22); }
.rodape { text-align: center; font-size: .75rem; color: var(--suave); margin-top: 2.6rem; line-height: 1.8; }
.erro { color: #A8452C; font-size: .9rem; margin-top: 1rem; text-align: center; }