/* s1stema — o site: as seções (abertura, funções, manifesto, linhas, fim). */

main {
  display: grid;
}

/* ---------- abertura ---------- */

.abertura {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: min(100%, calc(var(--largura) + 2 * var(--margem)));
  min-height: calc(100svh - 4.5rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 6vh, 4.5rem) var(--margem) clamp(3.5rem, 10vh, 7rem);
}

.abertura__titulo {
  font-family: var(--f-sans);
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--texto);
  text-wrap: balance;
}

.abertura__titulo span {
  display: block;
}

.abertura__titulo .serifa {
  /* O acento do "É" não pode encostar na linha de cima. */
  margin-top: 0.1em;
  font-size: 1.08em;
  line-height: 1;
}

.abertura__missao {
  max-width: 34ch;
  margin-top: 1.75rem;
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--texto-2);
  text-wrap: pretty;
}

.abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.abertura__beta {
  max-width: 44ch;
  margin-top: 1.125rem;
  font-size: 0.875rem;
  color: var(--texto-3);
}

/* A entrada da abertura: uma vez, de baixo, em escada (Emil: 60 ms). */
.abertura__titulo span,
.abertura__missao,
.abertura__acoes,
.abertura__beta,
.console {
  animation: sobe 900ms var(--saida) both;
}

.abertura__titulo span:nth-child(2) {
  animation-delay: 80ms;
}

.abertura__missao {
  animation-delay: 180ms;
}

.abertura__acoes {
  animation-delay: 260ms;
}

.abertura__beta {
  animation-delay: 320ms;
}

.console {
  animation-delay: 240ms;
}

@keyframes sobe {
  from {
    opacity: 0;
    transform: translateY(1.125rem);
  }
}

/* ---------- títulos de seção ---------- */

.secao-titulo {
  max-width: 18ch;
  font-family: var(--f-sans);
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--texto);
  text-wrap: balance;
}

/* ---------- como funciona ---------- */

.como {
  display: grid;
  gap: clamp(4.5rem, 12vw, 9.25rem);
  width: min(100%, calc(var(--largura) + 2 * var(--margem)));
  margin: 0 auto;
  padding: clamp(4.5rem, 12vw, 8.75rem) var(--margem);
}

.funcao {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.75rem, 6vw, 6rem);
}

.funcao--inversa .funcao__texto {
  order: 2;
}

.funcao__texto {
  display: grid;
  gap: 1.125rem;
  max-width: 40ch;
}

.funcao__titulo {
  font-family: var(--f-sans);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--texto);
  text-wrap: balance;
}

.funcao__texto p {
  font-size: 1.06rem;
  color: var(--texto-2);
  text-wrap: pretty;
}

/* ---------- manifesto ---------- */

.manifesto {
  display: grid;
  justify-items: center;
  gap: 2rem;
  padding: clamp(6rem, 16vw, 12.5rem) var(--margem);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(9, 43, 128, 0.35), transparent 75%);
  text-align: center;
}

/* Como os outros títulos: a primeira frase na Geist, a segunda na serifa. */
.manifesto__frase {
  max-width: 16ch;
  font-family: var(--f-sans);
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--texto);
  text-wrap: balance;
}

.manifesto__frase span {
  display: block;
}

.manifesto__frase .serifa {
  margin-top: 0.1em;
  font-size: 1.08em;
  line-height: 1;
}

.manifesto__texto {
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.7;
  color: var(--texto-2);
  text-wrap: pretty;
}

/* ---------- em poucas linhas (sem perguntas) ---------- */

.sobre {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
  width: min(100%, calc(var(--largura) + 2 * var(--margem)));
  margin: 0 auto;
  padding: clamp(5rem, 12vw, 9.25rem) var(--margem);
}

/* O título e o núcleo dos cabos ficam no meio da altura da lista e
   acompanham as linhas quando elas abrem (a altura anda junto). */
.sobre__lado {
  display: grid;
  justify-items: start;
  align-self: center;
  gap: 3rem;
}

.linhas {
  border-top: 1px solid var(--fio-forte);
}

.linhas__item {
  border-bottom: 1px solid var(--fio-forte);
}

.linhas__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.625rem 0;
  border: none;
  background: none;
  color: var(--texto);
  font-family: var(--f-sans);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
}

/* O sinal: um "+" de dois traços que vira "−" (o vertical gira e some). */
.linhas__botao i {
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.linhas__botao i::before,
.linhas__botao i::after {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--neon);
  transition:
    transform 260ms var(--saida),
    opacity 200ms ease;
}

.linhas__botao i::after {
  transform: rotate(90deg);
}

.linhas__botao[aria-expanded='true'] i::after {
  transform: rotate(180deg);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .linhas__botao:hover {
    color: var(--neon-forte);
  }
}

/* Abre pela grade (0fr → 1fr): o acordeão é o único lugar onde a altura
   anda. Sem JavaScript, tudo fica aberto. */
.linhas__corpo {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms var(--saida);
}

.linhas__corpo > p {
  overflow: hidden;
  max-width: 58ch;
  padding-bottom: 1.625rem;
  color: var(--texto-2);
  transition: opacity 240ms ease;
}

.js .linhas__corpo {
  grid-template-rows: 0fr;
}

.js .linhas__corpo > p {
  padding-bottom: 0;
  opacity: 0;
}

.js .linhas__item[data-aberta] .linhas__corpo {
  grid-template-rows: 1fr;
}

.js .linhas__item[data-aberta] .linhas__corpo > p {
  padding-bottom: 1.625rem;
  opacity: 1;
}

/* ---------- fim ---------- */

.fim {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: clamp(6rem, 14vw, 11.25rem) var(--margem) clamp(4.5rem, 10vw, 7.5rem);
  text-align: center;
}

.fim__titulo {
  font-family: var(--f-sans);
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--texto);
}

.fim__titulo span {
  display: block;
}

.fim__texto {
  max-width: 46ch;
  color: var(--texto-2);
}

.fim__status {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.fim__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--f-hud);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.75rem var(--margem) calc(1.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fio);
  font-size: 0.875rem;
  color: var(--texto-3);
}

/* ---------- revelar ao rolar (uma vez, só com JS ligado) ---------- */

.js .revela {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 700ms var(--saida),
    transform 900ms var(--saida);
}

.js .revela[data-visto] {
  opacity: 1;
  transform: none;
}

/* ---------- celular ---------- */

@media (max-width: 860px) {
  .abertura,
  .funcao,
  .sobre {
    grid-template-columns: minmax(0, 1fr);
  }

  .abertura {
    min-height: 0;
    padding-top: 1rem;
  }

  .funcao--inversa .funcao__texto {
    order: 0;
  }

  .selo-beta__nota {
    display: none;
  }
}

@media (max-width: 420px) {
  body {
    font-size: 1rem;
  }

  .abertura__acoes .botao {
    width: 100%;
  }
}