/* Estilo das duas paginas de porta: a raiz (/) e o 404.
   Separado do landing.css de proposito — aquele carrega hero, painel,
   formulario e animacao de revelacao, coisa que estas duas nao usam. Sao
   ~2 KB contra ~19 KB, e quem cai aqui geralmente esta so de passagem. */

/* Mesma variavel da landing. Caminho relativo a este arquivo, que mora em
   _shared/, igual ao landing.css. */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --roxo: #494495;
  --roxo-escuro: #383470;
  --amarelo: #F2BF0D;
  --superficie: #f8f8fc;
  --cartao: #ffffff;
  --tinta: #17323C;
  /* Nomeados em vez de soltos no meio das regras porque o testes/rodar.mjs le
     estas variaveis para conferir contraste. Cor escrita direto na regra
     escapa da checagem. */
  --tinta-2: #46525a;
  --tinta-3: #5c6b73;
  --sobre-roxo: #ffffff;
  --sobre-roxo-2: #e9e8f4;
  --linha: #dcdde7;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--superficie);
  color: var(--tinta);
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}

.casca {
  width: min(60rem, 100% - 2.5rem);
  margin-inline: auto;
}

.capa {
  background: var(--roxo);
  color: var(--sobre-roxo);
  padding: 2.5rem 0 3rem;
}

/* No desktop o texto sozinho deixava a metade direita da faixa roxa vazia.
   Vira duas colunas com a foto encostada na base da faixa — mesma composicao
   das landings, para a porta e o destino parecerem a mesma campanha. */
@media (min-width: 60rem) {
  .capa .casca {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: 2rem;
    align-items: end;
  }
  .capa .marca { grid-column: 1; }
  .capa .dupla { grid-column: 2; grid-row: 1 / span 4; align-self: end; }
}

/* So no desktop. No celular a foto comia 300px de altura e empurrava os dois
   cartoes para fora da primeira tela — e escolher entre eles e' a unica coisa
   que esta pagina faz. Combinada com loading="lazy", display:none tambem evita
   o download no celular. */
.capa .dupla { display: none; }

/* -3rem come o padding de baixo da faixa: a dupla fica em pe na divisa entre
   o roxo e o fundo claro, em vez de flutuar. */
@media (min-width: 60rem) {
  .capa .dupla {
    display: block;
    width: 100%;
    max-width: 21rem;
    height: auto;
    margin: 0 0 -3rem;
  }
}

.capa .marca {
  width: min(17rem, 60%);
  height: auto;
  display: block;
}

h1 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.2;
  margin: 1.75rem 0 0.75rem;
  max-width: 22ch;
}

.capa p {
  margin: 0;
  max-width: 46ch;
  color: var(--sobre-roxo-2);
}

main { padding: 2.5rem 0 3.5rem; }

.escolha {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 42rem) {
  .escolha { grid-template-columns: 1fr 1fr; }
}

/* O cartao inteiro e' o link: alvo grande no celular, e um unico parada de
   tabulacao por opcao em vez de titulo e botao separados. */
.escolha a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.5rem;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 0.9rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}

.escolha a:hover { border-color: var(--roxo); transform: translateY(-2px); }

.escolha a:focus-visible {
  outline: 3px solid var(--roxo);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .escolha a { transition: none; }
  .escolha a:hover { transform: none; }
}

.escolha strong {
  font-size: 1.15rem;
  color: var(--roxo);
}

.escolha span { color: var(--tinta-2); }

.escolha em {
  margin-top: auto;
  padding-top: 0.75rem;
  font-style: normal;
  font-weight: 600;
  color: var(--roxo);
}

.rodape {
  border-top: 1px solid var(--linha);
  padding: 1.5rem 0 2.5rem;
  font-size: 0.85rem;
  color: var(--tinta-3);
}

.rodape a { color: var(--roxo); }

.filete {
  width: 4rem;
  height: 0.375rem;
  background: var(--amarelo);
  border: 0;
  margin: 1.5rem 0 1.25rem;
}