:root {
  --laranja: #FA5F12;
  --navy: #0B1F42;
  --texto: #1a2030;
  --suave: #5a6478;
  --borda: #e3e7ee;
  --fundo: #ffffff;
  --fundo-alt: #f7f9fc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
}

.envelope { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* A barra sangra de ponta a ponta; o conteúdo continua limitado pelo
   .envelope que ela carrega por dentro. */
.topo {
  background: var(--navy);
}

.topo-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.marca {
  display: block;
  line-height: 0;
}

.logo {
  width: 140px;
  height: auto;
  display: block;
}

.topo nav a {
  color: #ffffff;
  text-decoration: none;
  margin-left: 22px;
  font-size: 16px;
}

.topo nav a:hover { text-decoration: underline; }

/* Faixa do hero: sangra de ponta a ponta como a barra navy. A ilustração se
   posiciona pela borda da janela, não pelos 880px do conteúdo — na arte ela
   encosta na lateral da tela, e assim a borda direita fica fora do quadro. */
.hero-faixa {
  position: relative;
  overflow: hidden;
  background: var(--laranja);
}

.hero-conteudo {
  position: relative;
  z-index: 1;
  padding-top: 52px;
  padding-bottom: 52px;
}

.hero-texto { max-width: 520px; }

.hero-faixa h1 {
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 16px;
  color: #ffffff;
  letter-spacing: -0.4px;
}

/* Sobre o laranja da marca (#FA5F12): branco em texto corrido dá 3,13:1 e
   reprova na WCAG AA, mas o navy da marca dá 5,21:1 e passa — por isso o
   parágrafo usa a própria variável, sem tom sob medida. O h1 pode ser branco
   porque se enquadra em texto grande, cujo limite é 3:1 — vale a 34px aqui e a
   27px no responsivo, ambos acima do piso de 24px da WCAG. A margem é estreita
   (3,13:1): abaixo de 24px o branco reprova, e aí o h1 teria de virar navy. */
.hero-faixa p {
  font-size: 19px;
  color: var(--navy);
  margin: 0;
}

/* A largura acompanha a janela em vez de ser fixa. Com 460px fixos o texto e
   a ilustração se sobrepõem em toda janela entre 901px e 1128px — 52px de
   colisão num laptop de 1024px — porque a ilustração se posiciona pela borda
   da tela e o texto pela do .envelope, que para de crescer aos 880px. Os 36vw
   deixam 39px de folga a 1024px e 22px a 901px, e o teto de 460px preserva o
   tamanho da arte em monitor grande. */
.hero-arte {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: clamp(320px, 36vw, 460px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* O .secao traz border-top para separar uma seção da outra. Na primeira, que
   encosta na faixa laranja, essa linha vira um fio solto logo abaixo do
   laranja, separando de nada.
   O seletor casa pela vizinhança da faixa, não por `main > .secao:first-child`:
   aquele dependia de a seção ser filha direta do <main>, e deixou de casar
   quando o <main> subiu para envolver a faixa — a linha voltou e a home inteira
   desceu 8px sem que nada no HTML da seção mudasse. Só a home tem faixa; em
   suporte.html o primeiro filho é .hero e privacidade.html não usa .secao. */
.hero-faixa + .envelope > .secao:first-child {
  border-top: none;
  padding-top: 44px;
}

@media (max-width: 900px) {
  .hero-arte {
    position: static;
    transform: none;
    width: 100%;
    max-width: min(520px, calc(100% - 48px));
    margin: 0 auto;
    display: block;
  }

  .hero-texto { max-width: none; }
  .hero-conteudo { padding-bottom: 24px; }
}

.hero { padding: 56px 0 40px; }

.hero h1 {
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--navy);
  letter-spacing: -0.4px;
}

.hero p { font-size: 19px; color: var(--suave); margin: 0; max-width: 620px; }

.secao { padding: 36px 0; border-top: 1px solid var(--borda); }

.secao h2 {
  font-size: 22px;
  margin: 0 0 20px;
  color: var(--navy);
}

.secao h3 { font-size: 17px; margin: 0 0 10px; color: var(--navy); }

.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.cartao {
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 22px;
}

.cartao ul { margin: 0; padding-left: 20px; color: var(--suave); }
.cartao li { margin-bottom: 6px; }
.cartao p { margin: 0; color: var(--suave); }

.passos { margin: 0; padding-left: 22px; color: var(--suave); }
.passos li { margin-bottom: 10px; }

.dados { margin: 0; color: var(--suave); }
.dados dt { font-weight: 600; color: var(--texto); margin-top: 12px; }
.dados dd { margin: 2px 0 0; }

.contato a { color: var(--laranja); font-weight: 600; }

.faq { margin-top: 8px; }
.faq h3 { margin-top: 24px; }
.faq p { color: var(--suave); margin: 0; }

.rodape {
  border-top: 1px solid var(--borda);
  margin-top: 40px;
  padding: 28px 0 44px;
  font-size: 14px;
  color: var(--suave);
}

.rodape p { margin: 0 0 6px; }
.rodape .razao { font-weight: 600; color: var(--texto); }
.rodape a { color: var(--suave); }

.texto-legal h2 { font-size: 20px; color: var(--navy); margin: 32px 0 12px; }
.texto-legal h3 { font-size: 17px; color: var(--navy); margin: 22px 0 8px; }
.texto-legal p, .texto-legal li { color: var(--suave); }
.texto-legal table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
.texto-legal th, .texto-legal td {
  border: 1px solid var(--borda);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  color: var(--suave);
}
.texto-legal th { background: var(--fundo-alt); color: var(--texto); }

@media (max-width: 600px) {
  .hero { padding: 36px 0 28px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 17px; }
  .hero-faixa h1 { font-size: 27px; }
  .hero-faixa p { font-size: 17px; }
  .hero-conteudo { padding-top: 36px; }
}