/* ------------------------------------------------------------------------------ medidor */

/*
 * O medidor de crescimento: quatro estagios, tantos acesos quantos o plano cobre. Ele codifica
 * a regra dita na pagina de planos — cada plano inclui tudo o que esta abaixo — sem repetir a
 * frase em cada cartao. Os cartoes em si vivem em `planosCartoes.css`.
 */
.plano-cresce { display: flex; gap: 0.3rem; margin-bottom: 0.9rem; }
.plano-cresce i { height: 3px; flex: 1; border-radius: 2px; background: var(--linha); }
.plano-cresce i.cheio { background: linear-gradient(90deg, var(--roxo), var(--roxo-claro)); }

/* --------------------------------------------------------------------------------- faq */

/* Duas colunas onde ha largura, uma onde nao ha. Duas, e nao `auto-fit`: sao quatro perguntas,
   e tres colunas deixariam a quarta sozinha. */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }

@media (max-width: 46rem) { .faq { grid-template-columns: minmax(0, 1fr); } }

.pergunta {
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: var(--vidro);
  box-shadow: var(--relevo);
  transition: border-color var(--t-rapido) var(--entrada);
}

.pergunta:hover, .pergunta[open] { border-color: var(--linha-viva); }

.pergunta summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  font-family: var(--titulo);
  font-weight: 650;
  font-size: 1rem;
  list-style: none;
}

.pergunta summary::-webkit-details-marker { display: none; }

/* O sinal de mais vira x quando a resposta esta aberta — desenhado com texto, sem icone externo. */
.pergunta summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 50%;
  color: var(--roxo-claro);
  font-family: var(--maquina);
  font-size: 0.9rem;
  transition: transform var(--t-medio) var(--saida), border-color var(--t-rapido) var(--entrada);
}

.pergunta[open] summary::before { content: '+'; transform: rotate(45deg); border-color: var(--roxo); }

.pergunta p { margin: 0; padding: 0 1.15rem 1.1rem 3.4rem; color: var(--texto-fraco); line-height: 1.6; font-size: 0.95rem; }

@media (max-width: 46rem) { .pergunta p { padding-left: 1.15rem; } }

/* ------------------------------------------------------------------------------ rodape */

.vitrine-rodape {
  margin-top: clamp(2.5rem, 7vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--linha);
  color: var(--texto-fraco);
  font-size: 0.88rem;
}

.rodape-grade { display: grid; grid-template-columns: minmax(14rem, 1.4fr) 1fr auto; gap: 2rem; align-items: start; }

@media (max-width: 46rem) { .rodape-grade { grid-template-columns: 1fr; gap: 1.5rem; } }

.rodape-marca p { margin: 0.6rem 0 0; max-width: 32ch; line-height: 1.6; }

.rodape-nav { display: grid; gap: 0.5rem; justify-items: start; }

.rodape-nav a, .rodape-acoes a { color: var(--texto-fraco); text-decoration: none; transition: color var(--t-rapido) var(--entrada); }
.rodape-nav a:hover, .rodape-nav a:focus-visible, .rodape-acoes a:hover, .rodape-acoes a:focus-visible { color: var(--texto); }

.rodape-acoes { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.rodape-acoes a.primario { color: #fff; }

/* A nota do rodape ganha os links legais na ponta direita: miudos, para quem procura. */
.rodape-nota {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

.rodape-legal a { color: var(--texto-fraco); text-decoration: none; transition: color var(--t-rapido) var(--entrada); }
.rodape-legal a:hover, .rodape-legal a:focus-visible { color: var(--texto); }

/* --------------------------------------------------------------------------- revelacao */

/* O aparecimento ao rolar. A classe `revela-armada` so entra pelo JavaScript, e so quando ha
   IntersectionObserver e o visitante nao pediu movimento reduzido: sem JS a pagina abre inteira. */
.revela-armada [data-revela] { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--saida), transform 480ms var(--saida); }
.revela-armada [data-revela].revelado { opacity: 1; transform: none; }

/* Vizinho a vizinho, um passo atras do outro: a grade chegando em fila parece uma sequencia. */
.revela-armada .tier:nth-child(2), .revela-armada .passo:nth-child(2), .revela-armada .azulejo:nth-child(2), .revela-armada .limites > div:nth-child(2) { transition-delay: 70ms; }
.revela-armada .tier:nth-child(3), .revela-armada .passo:nth-child(3), .revela-armada .azulejo:nth-child(3), .revela-armada .limites > div:nth-child(3) { transition-delay: 140ms; }
.revela-armada .tier:nth-child(4), .revela-armada .azulejo:nth-child(4), .revela-armada .limites > div:nth-child(4) { transition-delay: 210ms; }

/* --------------------------------------------------------------------------- movimento */

@media (prefers-reduced-motion: reduce) {
  .trilho-no, .trilho-trecho.aceso::after, .pergunta summary::before, .azulejo, .azulejo::after { transition: none; animation: none; }
  .azulejo:hover { transform: none; }
}

/* ---------------------------------------------------------------- o botao de comprar
   Ele nasce no JavaScript (`comprar.js`), e so nos cartoes que tem preco naquele provedor. */
.plano-comprar {
  margin-top: auto;
  align-self: stretch;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--acento, #7c3aed);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--t-rapido) var(--entrada);
}

.plano-comprar:hover:not(:disabled) { filter: brightness(1.12); }
.plano-comprar:disabled { opacity: 0.55; cursor: progress; }
.plano-comprar:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }