/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fundo); }
body {
  margin: 0;
  background:
    radial-gradient(70rem 50rem at 85% -10%, color-mix(in srgb, var(--oliva) 14%, transparent), transparent 60%),
    radial-gradient(60rem 60rem at -10% 110%, color-mix(in srgb, var(--texto) 5%, transparent), transparent 60%),
    var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-inline: 1.25rem;
}
h1, h2, h3 { font-family: var(--fonte-display); font-weight: 900; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 7.2vw, 4.6rem); line-height: 1.02; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.08; }
h3 { font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: 62ch; }
a { color: inherit; }
main { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(4rem, 10vw, 7.5rem); padding-block: 2rem 5rem; }

/* O dispositivo da marca: a marca oliva que corre atrás da palavra, a mesma da legenda dos vídeos. */
.marcado { position: relative; white-space: nowrap; color: var(--oliva-texto); z-index: 0; }
.marcado::before {
  content: ""; position: absolute; inset: 0.06em -0.12em 0.02em; z-index: -1;
  background: var(--oliva); border-radius: 0.18em;
  transform-origin: left center; animation: varrer 0.7s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes varrer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cabeçalho */
.topo { max-width: var(--largura); margin: 0 auto; padding-block: 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.marca, .selo, .sobrancelha, .nota, .ato-num, .tema { font-family: var(--fonte-mono); }
.marca { font-size: 0.95rem; }
.topo-direita { display: flex; gap: 0.75rem; align-items: center; }
.selo { font-size: 0.8rem; color: var(--texto-2); }
.tema { background: none; border: 1px solid var(--linha); color: var(--texto-2); border-radius: var(--raio-pilula); padding: 0.35rem 0.8rem; font-size: 0.75rem; cursor: pointer; }
.tema:focus-visible, .botao:focus-visible, .rodape a:focus-visible { outline: 3px solid var(--oliva); outline-offset: 3px; }

/* Herói */
.heroi { display: grid; gap: 1.5rem; padding-block: clamp(2rem, 8vw, 5rem) 0; }
.sobrancelha { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oliva); }
.apoio { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--texto-2); max-width: 54ch; }
.acao { display: grid; gap: 0.6rem; justify-items: start; margin-top: 0.5rem; }
.botao {
  display: inline-block; background: var(--oliva); color: var(--oliva-texto); text-decoration: none;
  font-family: var(--fonte-display); font-weight: 900; font-size: clamp(1.05rem, 2.4vw, 1.25rem); letter-spacing: -0.01em;
  padding: 1.05rem 1.6rem; border-radius: var(--raio); white-space: nowrap;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.botao:hover { transform: translateY(-2px); filter: brightness(1.05); }
.nota { font-size: 0.8rem; color: var(--texto-2); }

/* Para quem */
.quem { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.coluna { display: grid; gap: 1.25rem; min-width: 0; }
.quem ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.quem li { padding-left: 1.75rem; position: relative; }
.lista-sim li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.8rem; height: 0.8rem; border-radius: 3px; background: var(--oliva); }
.lista-nao li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 0.8rem; height: 2px; background: var(--texto-2); }
.coluna-nao { color: var(--texto-2); }
.coluna-nao h2 { color: var(--texto); }

/* Cinco atos: uma linha do tempo de verdade, porque os atos são uma sequência. */
.atos { display: grid; gap: 2.5rem; }
.linha-atos { list-style: none; margin: 0 0 0 1rem; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--linha); }
.linha-atos li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 0 0 1.75rem 0; margin-left: -1.05rem; }
.linha-atos li > div { display: grid; gap: 0.3rem; min-width: 0; }
.linha-atos p { color: var(--texto-2); }
.ato-num { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--fundo); border: 2px solid var(--oliva); color: var(--oliva); font-size: 0.9rem; }
.trava { margin: 0; padding: 1.5rem 1.75rem; background: var(--fundo-2); border-radius: var(--raio); border: 1px solid var(--linha); }
.trava p { font-size: 1.1rem; }

/* O que vem dentro */
.dentro { display: grid; gap: 2rem; }
.itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.itens li { background: var(--fundo); padding: 1.5rem; display: grid; gap: 0.5rem; min-width: 0; }
.itens p { color: var(--texto-2); }

/* Promessa */
.promessa { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.promessa > div { display: grid; gap: 0.9rem; min-width: 0; }
.promessa > div:last-child { color: var(--texto-2); }
.promessa > div:last-child h2 { color: var(--texto); }

/* Fechamento */
.fechamento { display: grid; gap: 1.25rem; justify-items: start; padding: clamp(2rem, 6vw, 3.5rem); background: var(--fundo-2); border-radius: calc(var(--raio) * 1.5); border: 1px solid var(--linha); }

/* Rodapé */
.rodape { max-width: var(--largura); margin: 0 auto; padding-block: 2rem 3rem; border-top: 1px solid var(--linha); display: grid; gap: 0.4rem; color: var(--texto-2); font-size: 0.9rem; }

/* Responsivo */
@media (min-width: 760px) {
  body { padding-inline: 2rem; }
  .quem, .promessa { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .itens { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .marcado::before { animation: none; }
  .botao { transition: none; }
}