@font-face {
  font-family: "Archivo Landing";
  src: url("/fonts/archivo-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #173f35;
  --ink-fundo: #123029;
  --ground: #f3f7f4;
  --strip: #ffffff;
  --line: #ccdcd2;
  --line-strong: #9fb7a9;
  --muted: #536c60;
  --accent: #a9dfc4;
  --accent-hover: #91d2b1;
  --green: #286b50;
  --amber: #a96817;
  --amber-soft: #fff4df;
  --largura: 1140px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Archivo Landing", "Segoe UI", system-ui, sans-serif;
  font-size: 1.04rem;
  line-height: 1.62;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

/* Cabeçalho ---------------------------------------------------------- */

.topo {
  background: var(--ink);
  color: #eef5f0;
}

.abertura,
.hero-tela {
  max-width: var(--largura);
  margin: 0 auto;
  padding-inline: 24px;
}

/* Cabeçalho ----------------------------------------------------------- *
 *
 * Fica fixo no topo porque a página é longa e tem três destinos: sem isso,
 * quem desce até os planos precisa voltar ao começo para ir a qualquer
 * outro lugar. O fundo é sólido desde o início — no herói ele se funde ao
 * bloco escuro, e no corpo claro continua legível sem truque de rolagem.
 */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ink);
}

.nav-dentro {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 14px 24px;
}

.nav-dentro .marca {
  margin-right: auto;
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  color: #c6dbcd;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.nav-links a:hover {
  color: #eef5f0;
}

/* A página atual se identifica por sublinhado, não só por cor: cor sozinha
   não chega a quem não a distingue. */
.nav-links a[aria-current="page"] {
  color: #eef5f0;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

@media (max-width: 720px) {
  .nav-dentro {
    flex-wrap: wrap;
    padding-top: 12px;
  }

  .nav-dentro .marca img {
    width: 120px;
    height: auto;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: space-between;
    padding-top: 4px;
    gap: 12px;
  }

  .nav-links a {
    font-size: 0.86rem;
  }
}

.marca img {
  display: block;
  max-width: 150px;
}

.abertura {
  padding-top: 76px;
}

h1 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2.2rem, 5.8vw, 4rem);
  font-weight: 730;
  line-height: 1;
  letter-spacing: -0.038em;
}

.linha-fina {
  max-width: 54ch;
  margin: 26px 0 0;
  color: #c6dbcd;
  font-size: clamp(1.04rem, 1.7vw, 1.2rem);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 34px 0 0;
}

.nota {
  color: #9dbbaa;
  font-size: 0.88rem;
}

/* A tela atravessa a borda entre o bloco escuro e o claro, costurando os
   dois em vez de deixar um corte reto. */
.hero-tela {
  margin: 56px auto 0;
  background: linear-gradient(to bottom, var(--ink) 55%, var(--ground) 55%);
}

.hero-tela img {
  display: block;
  border: 1px solid #3a5c4f;
  border-radius: 8px;
}

/* Botões ------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.94rem;
  font-weight: 670;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.botao-menta {
  color: var(--ink);
  background: var(--accent);
}

.botao-menta:hover {
  background: var(--accent-hover);
}

.botao-claro {
  height: 40px;
  border-color: #47705f;
  color: #eef5f0;
}

.botao-claro:hover {
  border-color: var(--accent);
}

.botao:active {
  transform: translateY(1px);
}

/* O mesmo link, para o fundo escuro do herói. */
.link-claro {
  color: #c6dbcd;
  font-weight: 670;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.link-claro:hover {
  color: #eef5f0;
}

.link-simples {
  color: var(--ink);
  font-weight: 670;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Estrutura das seções ----------------------------------------------- */

main {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 72px 0;
}

main > section + section {
  border-top: 1px solid var(--line);
}

.indice {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.indice.claro {
  color: #8fb3a1;
}

h2 {
  max-width: 20ch;
  margin: 0 0 22px;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

p {
  max-width: 62ch;
  margin: 0 0 18px;
}

p:last-child {
  margin-bottom: 0;
}

.destaque {
  font-size: clamp(1.1rem, 1.9vw, 1.28rem);
  line-height: 1.52;
}

/* Trilha dos cinco momentos ------------------------------------------- */

.trilha {
  display: grid;
  gap: 1px;
  margin: 40px 0 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--line-strong);
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  overflow: hidden;
}

.trilha li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 18px 24px;
  background: var(--strip);
}

.trilha-num {
  display: grid;
  width: 27px;
  height: 27px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 720;
  place-items: center;
}

.trilha strong {
  font-size: 1.02rem;
  font-weight: 700;
}

.trilha span:not(.trilha-num) {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Blocos de texto com imagem ------------------------------------------ */

.par {
  display: grid;
  gap: 44px;
  align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.par.invertido .par-texto {
  order: 2;
}

.par-texto h2,
.par-texto p {
  max-width: 40ch;
}

.quadro {
  margin: 0;
}

.quadro img {
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--strip);
}

.quadro figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.84rem;
}

.quadro.celular {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quadro.celular img {
  max-width: 300px;
  border-radius: 20px;
}

.quadro.celular figcaption {
  text-align: center;
}

/* Listas com sentido -------------------------------------------------- */

.pares {
  display: grid;
  gap: 10px;
  max-width: 44ch;
}

.pares span {
  padding-left: 15px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.95rem;
}

.pares strong {
  color: var(--ink);
  font-weight: 670;
}

.saudes {
  display: grid;
  gap: 10px;
  max-width: 44ch;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.saudes li {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 5px;
  background: var(--strip);
}

.saudes strong {
  font-size: 0.96rem;
}

.saudes span {
  color: var(--muted);
  font-size: 0.88rem;
}

.saude-movimento {
  border-left-color: var(--green);
}

.saude-aguardando {
  border-left-color: var(--amber);
}

.saude-parado {
  border-left-color: #b94941;
}

/* Planos --------------------------------------------------------------- */

.ganhos {
  display: grid;
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--line-strong);
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  overflow: hidden;
}

.ganhos li {
  display: grid;
  gap: 4px;
  padding: 22px 20px 24px;
  background: var(--strip);
}

.ganhos strong {
  font-weight: 700;
}

.ganhos span {
  max-width: 44ch;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.planos {
  display: grid;
  gap: 18px;
  margin: 36px 0 0;
  grid-template-columns: repeat(2, 1fr);
}

.plano {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--strip);
}

.plano h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 1.04rem;
  font-weight: 720;
  letter-spacing: -0.01em;
}

.preco {
  margin: 0 0 6px;
  line-height: 1.1;
}

.preco strong {
  font-size: clamp(2rem, 4.4vw, 2.6rem);
  font-weight: 730;
  letter-spacing: -0.035em;
}

.preco span {
  color: var(--muted);
  font-size: 0.95rem;
}

.preco-ano {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.preco-ano strong {
  color: var(--ink);
  font-weight: 700;
}

.miudo-preco {
  white-space: nowrap;
}

.plano-linha {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  line-height: 1.55;
}

.subtitulo {
  margin: 44px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.inclui {
  display: grid;
  gap: 8px 28px;
  margin: 18px 0 0;
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  font-size: 0.94rem;
}

.inclui li {
  padding-left: 26px;
  position: relative;
}

/* O visto é desenhado em CSS: nada de fonte de ícones para doze linhas. */
.inclui li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 4px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}

.diferenca {
  margin: 36px 0 0;
  padding: 18px 20px;
  border-left: 4px solid var(--accent);
  background: var(--strip);
  max-width: 68ch;
}

/* A nota do herói nasce sobre fundo escuro; aqui ela precisa do tom de texto
   secundário do fundo claro. */
.acoes-planos {
  margin: 28px 0 0;
}

.nota-escura {
  color: var(--muted);
}

/* Fecho e rodapé ------------------------------------------------------ */

.fecho h2 {
  max-width: 16ch;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
}

footer {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 40px 24px 72px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

footer img {
  display: block;
  margin-bottom: 14px;
  opacity: 0.75;
}

footer p {
  max-width: 62ch;
  margin: 0 0 8px;
}

footer a {
  color: var(--muted);
}

/* Foco e movimento ---------------------------------------------------- */

a:focus-visible {
  outline: 3px solid #c1831b;
  outline-offset: 2px;
  border-radius: 4px;
}

/* A revelação só existe quando o script confirma que pode animar; sem
   JavaScript ou com movimento reduzido, o conteúdo nasce visível. */
.anima .revela {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.anima .revela.dentro {
  opacity: 1;
  transform: none;
}

/* A trilha é uma sequência, então entra em sequência — o atraso diz que um
   momento vem depois do outro, não é enfeite. */
.anima .trilha li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.anima .revela.dentro .trilha li {
  opacity: 1;
  transform: none;
}

.anima .trilha li:nth-child(1) { transition-delay: 0.05s; }
.anima .trilha li:nth-child(2) { transition-delay: 0.13s; }
.anima .trilha li:nth-child(3) { transition-delay: 0.21s; }
.anima .trilha li:nth-child(4) { transition-delay: 0.29s; }
.anima .trilha li:nth-child(5) { transition-delay: 0.37s; }

@media (prefers-reduced-motion: reduce) {
  *,
  .anima .revela {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Telas menores -------------------------------------------------------- */

@media (max-width: 960px) {
  .trilha {
    grid-template-columns: repeat(2, 1fr);
  }

  .trilha li:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 860px) {
  section {
    padding: 52px 0;
  }

  .abertura {
    padding-top: 52px;
  }

  .hero-tela {
    margin-top: 40px;
  }

  .par {
    gap: 28px;
    grid-template-columns: 1fr;
  }

  .par.invertido .par-texto {
    order: 0;
  }

  .par-texto h2,
  .par-texto p {
    max-width: none;
  }

  .ganhos,
  .planos {
    grid-template-columns: 1fr;
  }

  .inclui {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .trilha {
    grid-template-columns: 1fr;
  }

  .trilha li:last-child {
    grid-column: auto;
  }

  .inclui {
    grid-template-columns: 1fr;
  }
}

/* Perguntas frequentes ------------------------------------------------- */

.topo-curto .abertura {
  padding-bottom: 64px;
}

.topo-curto h1 {
  max-width: 14ch;
}

.topo-curto .linha-fina a {
  color: #eef5f0;
}

.perguntas section {
  padding: 56px 0;
}

.perguntas h2 {
  /* Aqui os títulos são frases instrucionais, não linhas de display: com as
     20ch do padrão, "Primeiro: o plano com MCP" quebra antes da sigla. */
  max-width: 26ch;
  margin-bottom: 8px;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

.perguntas details {
  border-bottom: 1px solid var(--line);
}

.perguntas details:first-of-type {
  border-top: 1px solid var(--line);
}

.perguntas summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  font-size: 1.04rem;
  font-weight: 670;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

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

/* O sinal é desenhado com bordas: um triângulo que gira ao abrir, sem
   depender de fonte de ícones nem de imagem. */
.perguntas summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  margin-top: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--green);
  transition: transform 0.18s ease;
}

.perguntas details[open] summary::before {
  transform: rotate(90deg) translateX(1px);
}

.perguntas summary:hover {
  color: var(--green);
}

.perguntas summary:focus-visible {
  outline: 3px solid #c1831b;
  outline-offset: 2px;
  border-radius: 4px;
}

.perguntas details p {
  max-width: 68ch;
  margin: 0 0 20px;
  padding-left: 21px;
  color: var(--muted);
}

.perguntas details a {
  color: var(--green);
}

.perguntas .fecho {
  border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .perguntas details p {
    padding-left: 0;
  }
}

/* Página do assistente ------------------------------------------------- */

/* Os passos são três, não cinco: a trilha da página inicial é de cinco. */
.trilha-passos {
  grid-template-columns: repeat(3, 1fr);
}

.endereco {
  display: grid;
  gap: 6px;
  max-width: none;
  margin: 28px 0;
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--strip);
}

.endereco span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.endereco code {
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.02rem;
  font-weight: 600;
}

.frases {
  display: grid;
  gap: 14px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.frases li {
  display: grid;
  gap: 3px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}

.frases strong {
  font-weight: 620;
}

.frases span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Os limites reusam a forma de `.saudes`, não as cores: lá o verde, o âmbar e
   o vermelho significam saúde de projeto, e aqui fariam um limite banal
   parecer defeito. */
.limites {
  display: grid;
  gap: 10px;
  max-width: 52ch;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.limites li {
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 5px;
  background: var(--strip);
}

.limites strong {
  font-size: 0.96rem;
}

.limites span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Cada assistente pede o mesmo endereço num lugar diferente, então o bloco
   por cliente existe para a pessoa achar o dela e ignorar os outros dois. */
.cliente {
  max-width: 62ch;
  margin: 26px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--strip);
}

.cliente h3 {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.cliente p {
  margin: 12px 0 0;
}

.cliente .nota {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Numeração pela contagem do CSS, e não pelo marcador da lista: o passo
   costuma conter um comando em bloco, e aí o marcador nativo desalinha. */
.passos {
  counter-reset: passo;
  display: grid;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.passos li {
  position: relative;
  /* Sem isto o item de grade não encolhe, e o `overflow-x` do comando longo
     vaza para fora do cartão em vez de rolar dentro dele. */
  min-width: 0;
  padding-left: 34px;
  line-height: 1.6;
}

.passos li::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  place-items: center;
}

/* O comando quebra em vez de rolar: quem chega aqui vai copiá-lo, e rolagem
   lateral esconde metade do que precisa ser copiado. A quebra é só nos
   espaços, então nenhuma opção se parte ao meio. */
.comando {
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--ground);
}

.comando code,
.perguntas p > code,
.limites code,
.cliente li code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.comando code {
  white-space: pre-wrap;
  font-size: 0.85rem;
}

/* A quebra do navegador acontece depois de hífen, e partiria `--transport`
   ao meio — um comando que parece outro. Os trechos que não podem partir
   vêm marcados no HTML; os espaços entre eles seguem quebrando. */
.comando code span {
  white-space: nowrap;
}

/* A borda é o enquadramento: a captura já vem com o fundo da aplicação, e
   uma sombra aqui seria decoração pura — proibida pelo sistema visual. */
.print {
  max-width: 820px;
  margin: 24px 0 30px;
}

/* A largura real do cartão na aplicação: maior que isso é ampliação, e
   menor obriga a apertar os olhos para ler o que a tela pede. */
.print-estreito {
  max-width: 520px;
}

.print img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.print figcaption {
  max-width: 52ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .trilha-passos {
    grid-template-columns: 1fr;
  }

  .cliente {
    padding: 18px 16px;
  }
}

/* Revelação do herói ---------------------------------------------------- *
 *
 * Feita em CSS puro, sem passar pelo `revela.js`: o herói está acima da
 * dobra e é a primeira coisa que alguém vê. Depender de JavaScript aqui
 * significaria arriscar uma tela vazia no pior momento possível — enquanto
 * uma animação CSS ou roda, ou simplesmente não acontece.
 *
 * A linha sobe de dentro de uma máscara, que é o que dá a sensação de texto
 * sendo escrito em vez de aparecer.
 */
.revelado .linha {
  display: block;
  overflow: hidden;
  /* Sem o respiro a máscara corta o pé das letras com descida (g, p, q). */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.revelado .linha > span {
  display: block;
}

/**
 * A animação só existe sob `.anima`, a classe que o `revela.js` põe depois de
 * confirmar que pode animar — e que o próprio script remove por segurança
 * depois de quatro segundos.
 *
 * Sem essa porta, o estado inicial da animação (linha fora da máscara, imagem
 * com opacidade zero) fica valendo para sempre em qualquer situação em que ela
 * não avance: aba em segundo plano, restauração de histórico, animação
 * estrangulada pelo navegador. Foi o que aconteceu — título e imagem do herói
 * invisíveis na página publicada.
 */
.anima .revelado .linha > span {
  animation: subir-linha 0.85s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

.anima .revelado .linha:nth-child(1) > span { animation-delay: 0.05s; }
.anima .revelado .linha:nth-child(2) > span { animation-delay: 0.16s; }
.anima .revelado .linha:nth-child(3) > span { animation-delay: 0.27s; }

@keyframes subir-linha {
  from {
    transform: translateY(110%);
  }
}

/* O que vem depois do título entra atrás dele, na mesma cadência. */
.anima .abertura .linha-fina,
.anima .abertura .acoes {
  animation: surgir 0.7s ease-out both;
}

.anima .abertura .linha-fina { animation-delay: 0.42s; }
.anima .abertura .acoes { animation-delay: 0.54s; }

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* A tela do produto chega por último, como quem confirma o que o texto disse. */
.anima .hero-tela img {
  animation: chegar-tela 1.1s cubic-bezier(0.16, 0.84, 0.28, 1) both;
  animation-delay: 0.6s;
}

@keyframes chegar-tela {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
}

/* Herói das páginas internas.
 *
 * Aqui a imagem fica ao lado do texto, não embaixo: sem a tela atravessando a
 * borda — que é o gesto da página inicial — empilhar deixaria a imagem
 * dominando a dobra e um rio de espaço vazio à direita do título.
 */
.hero-curto {
  margin: 0;
  align-self: end;
  background: none;
}

.hero-curto img {
  border-color: #3a5c4f;
}

/* O par fica dentro do contêiner, como o cabeçalho; gradear o cabeçalho
   inteiro faria a grade ignorar a largura máxima e desalinhar tudo do resto
   da página. */
.par-abertura {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 900px) {
  .par-abertura {
    display: grid;
    align-items: end;
    column-gap: 44px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .par-abertura .abertura,
  .par-abertura .hero-curto {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .par-abertura .abertura {
    padding-bottom: 72px;
  }

  .par-abertura .hero-curto {
    padding-bottom: 56px;
  }

  .par-abertura .hero-celular {
    max-width: 240px;
    margin-left: auto;
  }
}

@media (max-width: 899px) {
  /* Empilhado, a imagem entra contida para não empurrar o conteúdo. */
  .hero-curto {
    max-width: 460px;
    margin: 4px auto 0;
  }

  .hero-celular {
    max-width: 200px;
  }

  .topo-curto .abertura {
    padding-bottom: 36px;
  }
}

/* Fotografia -----------------------------------------------------------
 *
 * As telas do produto têm borda e cantos de janela; a fotografia não — ela
 * é cenário, não interface, e imitar a moldura da tela confundiria as duas.
 */
.quadro.foto img {
  border: 0;
  border-radius: 6px;
}

/* O vídeo do tutorial. O `preload="none"` é deliberado: são quase seis megabytes, e
   o pôster já mostra o que é. Quem quiser assistir aperta o play. A moldura
   escura é o próprio fundo do vídeo, então a borda só dá o acabamento. */
.video-secao p:not(.indice) {
  max-width: 58ch;
}

.tela-video {
  margin: 34px 0 0;
}

.tela-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--ink);
}

/* Respiro entre blocos: a foto ocupa a largura toda e corta o ritmo das
   telas de produto, que sem isso se repetem seção após seção. */
.faixa-foto {
  margin: 0;
  padding: 8px 0 0;
}

.faixa-foto img {
  display: block;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 21 / 9;
}

.faixa-foto figcaption {
  max-width: 52ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .faixa-foto img {
    aspect-ratio: 3 / 2;
  }
}

/* Vídeo de fundo do herói ----------------------------------------------- *
 *
 * O texto vive por cima, então o vídeo precisa ser escuro e quieto. O véu em
 * degradê garante o contraste independentemente do quadro — sem ele, a
 * legibilidade dependeria de qual momento do vídeo está na tela.
 */
.topo-video {
  position: relative;
  isolation: isolate;
}

.topo-fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A marca continua mandando na cor: o vídeo entra por baixo dela. */
  opacity: 0.5;
}

.topo-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    var(--ink) 0%,
    rgba(23, 63, 53, 0.92) 42%,
    rgba(23, 63, 53, 0.62) 100%
  );
}

/* Movimento reduzido: fica o pôster, que é o primeiro quadro do vídeo. */
@media (prefers-reduced-motion: reduce) {
  .topo-fundo {
    display: none;
  }

  .topo-video {
    background-image: url("/img/hero-poster.webp");
    background-size: cover;
    background-position: center;
  }
}