/* ==========================================================================================
   landing.css — seções da index. Mobile-first: o CSS base é o do celular e os @media só
   ACRESCENTAM. Espaço é o principal recurso de "premium" disponível (§2.5).
   ========================================================================================== */

/* ---------------------------------------------------------------------------- cabeçalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms;
}

/* O filete só aparece depois de 8 px de rolagem (§4.1): parado, o cabeçalho é papel liso. */
.topo.rolado {
  border-bottom-color: var(--linha);
}

.topo-int {
  display: flex;
  align-items: center;
  gap: var(--e5);
  min-height: 64px;
}

.topo-nav {
  display: none; /* no mobile os links de âncora somem: a página é curta e o rodapé repete */
  gap: var(--e5);
  margin-left: auto;
}

.topo-nav a {
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 550;
}

.topo-nav a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-left: auto;
}

/* `.btn-peq` subiu para o `base.css` na FOL-7 — toda tela de operação precisa dele, e a
   landing não é mais a única página com botão pequeno. Nada muda aqui: o base carrega antes. */

.topo-demo {
  display: none; /* no mobile fica só "Entrar" à direita */
}

@media (min-width: 768px) {
  .topo-int {
    min-height: 72px;
  }
  .topo-nav {
    display: flex;
  }
  .topo-acoes {
    margin-left: 0;
  }
  .topo-demo {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------------- herói */

.heroi {
  padding-top: var(--e7);
  padding-bottom: var(--e7);
}

.heroi-grade {
  display: grid;
  gap: var(--e7);
  align-items: center;
}

/* Ver a nota em base.css (.passo): sem isto a coluna da arte estica a grade inteira e a landing
   ganha rolagem horizontal no celular. Vale para as duas colunas porque, numa grade de coluna
   única, a mais larga define a largura de todas. */
.heroi-grade > * {
  min-width: 0;
}

.heroi-texto .display {
  margin-top: var(--e4);
}

.heroi-sub {
  margin-top: var(--e5);
  max-width: 34em;
}

.heroi-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

.heroi-nota {
  margin-top: var(--e4);
  max-width: 42ch;
}

/* Selo de pré-lançamento: carimbo honesto de "em breve" no herói. Não é etiqueta de app — é
   chip de livro-caixa: filete fino, papel, e o traço âmbar da marca (o mesmo da .marca::after).
   A página segue vendendo o produto; o selo só marca que a operação ainda não abriu. */
.selo-breve {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 5px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-chip);
  background: var(--carta);
  box-shadow: var(--sombra-1);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.selo-breve::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ambar);
  flex: none;
}

/* A linha honesta logo abaixo da promessa do herói: mesma assinatura do .destaque (filete âmbar
   à esquerda), em tinta cheia para pesar como afirmação, não como legenda. */
.heroi-aviso {
  margin-top: var(--e5);
  padding-left: var(--e4);
  border-left: 3px solid var(--ambar);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tinta);
  max-width: 40ch;
}

.memoria-figura {
  margin: 0;
}

.memoria-legenda {
  margin-top: var(--e4);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tinta-2);
  border-left: 2px solid var(--ambar);
  padding-left: var(--e4);
  max-width: 46ch;
}

@media (min-width: 960px) {
  .heroi {
    padding-top: var(--e8);
    padding-bottom: var(--e9);
  }
  .heroi-grade {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--e8);
    /* O cartão é bem mais alto que o texto; centralizar abria um vazio grande acima da
       sobrancelha e empurrava o H1 para o meio da tela. Alinhado pelo topo, o título e o
       cartão dividem a mesma linha de partida — que é o que dá o ar de documento. */
    align-items: start;
  }
  .heroi-texto {
    padding-top: var(--e5);
  }
}

/* ------------------------------------------------------------------------ faixa de fatos */

.fatos {
  display: grid;
  gap: var(--e5);
  margin-top: var(--e8);
  padding-top: var(--e6);
  border-top: 1px solid var(--linha);
}

.fatos li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fatos strong {
  font-size: 0.9375rem;
  font-weight: 650;
}

.fatos span {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

@media (min-width: 560px) {
  .fatos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e5) var(--e6);
  }
}

@media (min-width: 960px) {
  .fatos {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------------- cabeçalhos de seção */

.regua + .h2,
.regua + .problema-h {
  margin-top: var(--e5);
}

.cabeca-sub {
  margin-top: var(--e4);
  font-size: 1.0625rem;
}

@media (min-width: 768px) {
  .cabeca-sub {
    font-size: 1.1875rem;
  }
}

/* ----------------------------------------------------------------------------- problema */

.problema-p {
  margin-top: var(--e5);
}

.destaque {
  margin-top: var(--e6);
  padding-left: var(--e5);
  border-left: 3px solid var(--ambar);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -0.012em;
}

/* -------------------------------------------------------------------------- diferenciais */

.grade-3 {
  display: grid;
  gap: var(--e6);
  margin-top: var(--e7);
}

@media (min-width: 640px) {
  .grade-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e6) var(--e6);
  }
}

@media (min-width: 1000px) {
  .grade-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e7) var(--e6);
  }
}

/* Sem ícone genérico: o numeral e o filete bastam e envelhecem melhor (§4.4). */
.bloco {
  border-top: 2px solid var(--ambar);
  padding-top: var(--e4);
}

.bloco-n {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ambar);
  letter-spacing: 0.06em;
  margin-bottom: var(--e2);
}

.bloco .h3 {
  margin-bottom: var(--e3);
}

.bloco p {
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--tinta-2);
}

.bloco-liso {
  border-top-color: var(--linha);
}

.grade-seg .h3 {
  margin-bottom: var(--e3);
}

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

.passos {
  margin-top: var(--e7);
  display: grid;
  gap: var(--e6);
}

.passos li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--e4);
  align-items: start;
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
}

.passos li:first-child {
  border-top: 0;
  padding-top: 0;
}

.passo-n {
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.9;
  color: var(--ambar);
  opacity: 0.9;
}

.passos .h3 {
  margin-bottom: var(--e2);
}

.passos p {
  color: var(--tinta-2);
}

@media (min-width: 768px) {
  .passos li {
    grid-template-columns: 88px 1fr;
    gap: var(--e6);
    padding-top: var(--e6);
  }
}

/* ------------------------------------------------------------------------- profundidade */

.lista-regua {
  margin-top: var(--e7);
  display: grid;
  gap: var(--e5);
}

.lista-regua li {
  position: relative;
  padding-left: var(--e5);
  color: var(--tinta-2);
  line-height: 1.6;
  max-width: 56ch;
}

/* O marcador é um traço de régua, não um ponto. */
.lista-regua li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 2px;
  background: var(--ambar);
}

.lista-regua strong {
  color: var(--tinta);
  font-weight: 650;
}

@media (min-width: 860px) {
  .lista-regua {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e5) var(--e7);
  }
}

.fecho {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
  max-width: 62ch;
}

/* ------------------------------------------------------------------------ chamada final */

.chamada {
  background: var(--azul-forte);
  color: var(--azul-sobre);
  padding-block: var(--e8);
}

.chamada-int {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chamada .h2 {
  color: var(--azul-sobre);
}

.chamada-p {
  margin-top: var(--e5);
  max-width: 62ch;
  color: color-mix(in srgb, var(--azul-sobre) 88%, var(--azul-forte));
  line-height: 1.62;
}

.chamada-acoes {
  margin-top: var(--e6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
}

.btn-grande {
  min-height: 52px;
  padding: var(--e4) var(--e7);
  font-size: 1.0625rem;
}

.chamada-alt {
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--azul-sobre) 85%, var(--azul-forte));
  max-width: 46ch;
}

.chamada-alt a {
  color: var(--azul-sobre);
  font-weight: 600;
}

.chamada :focus-visible {
  outline-color: var(--azul-sobre);
}

@media (min-width: 768px) {
  .chamada {
    padding-block: var(--e9);
  }
}

/* ------------------------------------------------------------------ documento (privacidade) */
/* Sem `style=` no HTML: a CSP de produção declara `style-src 'self'`, que bloqueia atributo
   de estilo inline. O que quebraria em produção tem que morar aqui. */

.doc-h1 {
  margin-top: var(--e4);
}

.doc-regua {
  margin-top: var(--e7);
}

.doc h2 {
  margin-top: var(--e6);
  margin-bottom: var(--e3);
}

.doc p {
  color: var(--tinta-2);
}

.doc p + p {
  margin-top: var(--e3);
}

.doc-lista {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
}

.doc-lista li {
  position: relative;
  padding-left: var(--e5);
  color: var(--tinta-2);
  line-height: 1.6;
}

.doc-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 2px;
  background: var(--ambar);
}

.doc-lista strong {
  color: var(--tinta);
  font-weight: 650;
}

.doc-nota {
  margin-top: var(--e7);
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
}

/* -------------------------------------------------------------------------------- rodapé */

.rodape {
  padding-block: var(--e7) var(--e6);
  background: var(--papel);
  border-top: 1px solid var(--linha);
}

.rodape-grade {
  display: grid;
  gap: var(--e6);
  margin-bottom: var(--e6);
}

.rodape-dominio {
  margin-top: var(--e3);
  font-size: 0.875rem;
  color: var(--tinta-2);
}

.rodape-marca .legenda {
  margin-top: var(--e2);
  max-width: 34ch;
}

.rodape-h {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: var(--e3);
}

.rodape-col ul {
  display: grid;
  gap: var(--e2);
}

.rodape-col a,
.rodape-col button {
  font-size: 0.9375rem;
  color: var(--tinta-2);
  text-decoration: none;
  font-weight: 500;
}

.rodape-col a:hover,
.rodape-col button:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.rodape-lgpd {
  margin-top: var(--e5);
  max-width: 78ch;
}

.rodape-direitos {
  margin-top: var(--e3);
}

@media (min-width: 640px) {
  .rodape-grade {
    grid-template-columns: repeat(3, 1fr);
  }
  .rodape-marca {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .rodape-grade {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--e7);
  }
  .rodape-marca {
    grid-column: auto;
  }
}