/* ==========================================================================
   Seção 01 · O que é
   Manifesto revelado palavra a palavra pelo scroll + 4 respostas rápidas.
   ========================================================================== */

.metodo__eyebrow {
  margin-bottom: var(--space-10);
}

.manifesto {
  max-width: 64rem;
  margin-bottom: var(--space-20);
  color: var(--color-text);
}

.manifesto__accent {
  color: var(--color-accent);
}

/* Cada palavra acende conforme --p (0 → 1) avança. --i = índice, --n = total. */
.manifesto.is-split .word {
  opacity: clamp(0.14, calc(var(--p, 0) * (var(--n, 1) + 6) - var(--i, 0)), 1);
  transition: opacity 140ms linear;
}

/* ------------------------------------------------------------------ Fatos */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    translate var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

.fact:hover {
  --hairline: var(--gradient-hairline-accent);
  translate: 0 -4px;
}

.fact__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 1.125rem;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-mint) / 0.2);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.fact:hover .fact__icon {
  color: var(--color-on-accent);
  background: var(--color-accent);
}

.fact__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 40em) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}