/* ============================================================
   CondoOS — landing.css
   Estilo exclusivo da página pública. Consome tokens.css e
   base.css; não redefine nenhum dos dois.

   PREFIXO: tudo que é exclusivo da landing usa `lp-`
   (landing pública), do mesmo modo que as telas do produto usam
   `sis-`. Nenhum nome significa duas coisas no projeto.

   Componentes compartilhados vêm de base.css e NÃO são
   redeclarados aqui: .faixa, a escala .t-*, .dados, .trilho e
   suas partes e estados, .selo*, .botao*, .pular-para-conteudo,
   .apenas-leitor, .rolagem-tabela, .tabela (+ .celula-texto,
   .celula-numero), .indicadores/.indicador*, .empilha-*,
   .linha-inline, .suave.

   Pontos de quebra: 1024 e 640, os mesmos do produto.
   Nenhum hex, nenhuma família tipográfica e nenhum espaçamento
   fora da escala é declarado aqui.
   Referência normativa: brand/MANUAL-DE-MARCA.md
   ============================================================ */

/* ------------------------------------------------------------
   0. Página
   O respeito a prefers-reduced-motion é global e vive em
   tokens.css; não se repete aqui.
   ------------------------------------------------------------ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--esp-16);
}

/* ------------------------------------------------------------
   1. Grade genérica de seção
   Uma única implementação para todas as grades de blocos da
   landing. Seção nova escolhe a contagem de colunas pelo
   modificador e não exige CSS novo.
   ------------------------------------------------------------ */

.lp-grade {
  display: grid;
  gap: var(--esp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-grade--folgada { gap: var(--esp-8); }

@media (max-width: 1024px) {
  .lp-grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .lp-grade--2,
  .lp-grade--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Utilitário: empurra o elemento para o fim de um bloco em coluna */
.lp-fundo {
  margin-top: auto;
}

/* Sobrelinha e título de painel.
   §3 do manual reserva a caixa alta a rótulo de estado e cabeçalho de
   tabela; aqui a hierarquia vem de peso e cor, sem versalete. */
.lp-sobrelinha {
  font-weight: var(--tipo-titulo-peso);
  color: var(--co-tinta-suave);
}

/* ------------------------------------------------------------
   2. Cabeçalho
   ------------------------------------------------------------ */

.lp-cabecalho {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--co-base);
  border-bottom: var(--borda-fina);
}

.lp-cabecalho__faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-6);
  min-height: 44px;
  padding-block: var(--esp-2);
}

.lp-cabecalho__marca {
  display: block;
  color: var(--co-tinta);
  line-height: 0;
}

.lp-cabecalho__marca img {
  width: calc(var(--esp-24) + var(--esp-16));
  height: auto;
}

.lp-cabecalho__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-6);
}

.lp-cabecalho__lista a {
  display: inline-block;
  padding-block: var(--esp-2);
  color: var(--co-tinta-suave);
  text-decoration: none;
}

.lp-cabecalho__lista a:hover {
  color: var(--co-sinal);
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .lp-cabecalho__nav { display: none; }
}

/* ------------------------------------------------------------
   3. Ritmo de seção
   ------------------------------------------------------------ */

.lp-secao {
  padding-block: var(--esp-24);
  border-top: var(--borda-fina);
}

.lp-secao:first-of-type { border-top: 0; }

.lp-secao__cabeca {
  max-width: 68ch;
  margin-top: var(--esp-6);
  margin-bottom: var(--esp-12);
}

.lp-secao__lead {
  margin-top: var(--esp-4);
  color: var(--co-tinta-suave);
}

.lp-secao__fecho {
  max-width: 62ch;
  margin-top: var(--esp-12);
  padding-inline-start: var(--esp-4);
  /* Ênfase estrutural: borda neutra em tinta. A faixa de 3px na cor
     é reservada a estado (§2.2: acento não é estado). */
  border-inline-start: var(--borda-forte);
}

.lp-secao__nota {
  max-width: 72ch;
  margin-top: var(--esp-8);
  color: var(--co-tinta-suave);
}

@media (max-width: 640px) {
  .lp-secao { padding-block: var(--esp-16); }
}

/* ------------------------------------------------------------
   4. Abertura
   ------------------------------------------------------------ */

.lp-abertura {
  position: relative;
  padding-top: var(--esp-16);
  padding-bottom: var(--esp-16);
  overflow: hidden;
}

.lp-abertura__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--esp-16);
  align-items: start;
  padding-bottom: var(--esp-12);
}

.lp-abertura__rotulo {
  color: var(--co-tinta-suave);
}

.lp-abertura__manchete {
  max-width: 18ch;
  margin-top: var(--esp-4);
  text-wrap: balance;
}

.lp-abertura__lead {
  max-width: 56ch;
  margin-top: var(--esp-6);
  color: var(--co-tinta-suave);
}

.lp-ancora {
  margin-top: var(--esp-8);
  padding-inline-start: var(--esp-4);
  border-inline-start: var(--borda-forte);
}

.lp-ancora__frase {
  color: var(--co-sinal);
}

.lp-ancora__principio {
  margin-top: var(--esp-1);
  color: var(--co-tinta-suave);
}

.lp-abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-8);
}

/* Painel do dia de operação */
.lp-registro {
  border: var(--borda-fina);
  border-top: var(--borda-forte);
  padding: var(--esp-6);
}

.lp-registro__titulo {
  color: var(--co-tinta);
}

.lp-registro__contexto {
  margin-top: var(--esp-1);
  color: var(--co-tinta-suave);
}

.lp-registro__lista {
  margin-top: var(--esp-4);
  border-top: var(--borda-fina);
}

.lp-registro__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-3);
  border-bottom: var(--borda-fina);
}

.lp-registro__linha dt {
  color: var(--co-tinta-suave);
}

.lp-registro__linha dd {
  color: var(--co-tinta);
  font-weight: var(--tipo-registro-peso);
}

.lp-registro__nota {
  margin-top: var(--esp-4);
  color: var(--co-tinta-suave);
}

/* Marca d'água — o Trilho de Cinco, §6.4
   Alinhado à margem esquerda da faixa, sangrando pela direita. */
.lp-marca-dagua {
  line-height: 0;
  /* 1280px é a largura máxima de .faixa, definida em base.css.
     O cálculo apenas alinha a marca d'água à margem da faixa. */
  padding-inline-start: max(var(--esp-6), calc(50vw - 1280px / 2 + var(--esp-6)));
}

.lp-marca-dagua__trilho {
  height: calc(var(--esp-24) * 2.5);
}

.lp-marca-dagua__trilho .trilho__pessoa,
.lp-marca-dagua__trilho .trilho__vinculo,
.lp-marca-dagua__trilho .trilho__permissao,
.lp-marca-dagua__trilho .trilho__evento {
  fill: var(--co-linha);
}

@media (max-width: 1024px) {
  .lp-abertura__grade {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-12);
  }
  .lp-abertura__manchete {
    max-width: 22ch;
    font-size: var(--tipo-display);
    line-height: var(--tipo-display-lh);
    letter-spacing: var(--trilha-titulo);
  }
  .lp-marca-dagua__trilho {
    height: calc(var(--esp-24) * 1.5);
  }
}

@media (max-width: 640px) {
  .lp-abertura__manchete {
    max-width: none;
    font-size: var(--tipo-secao);
    line-height: var(--tipo-secao-lh);
  }
  .lp-abertura__acoes .botao {
    flex: 1 1 100%;
  }
  .lp-marca-dagua {
    padding-inline-start: var(--esp-4);
  }
  .lp-marca-dagua__trilho {
    height: var(--esp-24);
  }
}

/* ------------------------------------------------------------
   5. Trilho — variante de escala própria da landing
   Acompanha .trilho de base.css, sem redeclarar o componente.
   ------------------------------------------------------------ */

.lp-trilho-grande {
  height: var(--esp-24);
  margin-block: var(--esp-6) var(--esp-12);
}

.lp-cadeia__rotulo {
  color: var(--co-tinta-suave);
}

@media (max-width: 640px) {
  .lp-trilho-grande { height: var(--esp-16); }
}

/* ------------------------------------------------------------
   6. Blocos das grades
   ------------------------------------------------------------ */

.lp-problema,
.lp-peca,
.lp-bloco {
  padding: var(--esp-6);
  border: var(--borda-fina);
}

.lp-problema__indice,
.lp-peca__indice {
  color: var(--co-sinal);
}

.lp-problema__titulo,
.lp-peca__titulo,
.lp-bloco__titulo {
  margin-top: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.lp-bloco__titulo {
  margin-top: 0;
  padding-bottom: var(--esp-3);
  border-bottom: var(--borda-fina);
}

.lp-problema p:last-child,
.lp-peca p:last-child,
.lp-bloco p {
  color: var(--co-tinta-suave);
}

.lp-peca {
  border-top: var(--borda-enfase) solid var(--co-tinta);
}

.lp-bloco--alto {
  display: flex;
  flex-direction: column;
}

.lp-bloco__texto {
  margin-bottom: var(--esp-4);
}

/* ------------------------------------------------------------
   7. Motor de regras
   ------------------------------------------------------------ */

.lp-motor {
  margin-top: var(--esp-12);
  padding: var(--esp-8);
  border: var(--borda-forte);
}

.lp-motor__titulo {
  color: var(--co-tinta);
}

.lp-motor__intro {
  margin-top: var(--esp-2);
  margin-bottom: var(--esp-6);
  color: var(--co-tinta-suave);
}

.lp-veredito {
  display: grid;
  grid-template-columns: var(--trilho-caixa) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-4);
  padding-block: var(--esp-4);
  border-top: var(--borda-fina);
}

.lp-veredito__trilho {
  margin-top: var(--esp-1);
}

.lp-veredito__selo {
  margin-top: var(--esp-1);
  justify-self: start;
}

.lp-veredito__evento {
  margin-top: var(--esp-2);
  color: var(--co-tinta-suave);
}

.lp-motor__nota {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: var(--borda-fina);
  color: var(--co-tinta-suave);
}

@media (max-width: 640px) {
  .lp-motor { padding: var(--esp-4); }
  .lp-veredito {
    grid-template-columns: var(--trilho-caixa) minmax(0, 1fr);
  }
  .lp-veredito__texto { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   8. Economia
   ------------------------------------------------------------ */

.lp-lista {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  padding-top: var(--esp-3);
  list-style: none;
  border-top: var(--borda-fina);
}

.lp-lista li {
  padding-inline-start: var(--esp-4);
  border-inline-start: var(--borda-fina);
  color: var(--co-tinta-suave);
}

/* Linha de total da tabela de receita.
   A tabela em si é a de base.css; aqui só o destaque do total. */
.lp-total th,
.lp-total td {
  border-bottom: 0;
  border-top: var(--borda-forte);
  padding-top: var(--esp-3);
  color: var(--co-sinal);
  font-weight: var(--tipo-titulo-peso);
}

/* Painel de números do síndico.
   A grade é .indicadores de base.css. */
.lp-painel {
  margin-top: var(--esp-8);
  padding: var(--esp-8);
  border: var(--borda-fina);
  border-inline-start: var(--borda-forte);
}

.lp-painel__titulo {
  color: var(--co-tinta-suave);
  margin-bottom: var(--esp-6);
}

@media (max-width: 640px) {
  .lp-painel { padding: var(--esp-4); }
}

/* ------------------------------------------------------------
   9. Independência
   ------------------------------------------------------------ */

.lp-independencia {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--esp-16);
  align-items: start;
}

.lp-independencia__texto {
  display: grid;
  gap: var(--esp-4);
  max-width: 62ch;
}

.lp-independencia__texto p + p {
  color: var(--co-tinta-suave);
}

.lp-arquitetura {
  margin: 0;
  padding: var(--esp-8);
  border: var(--borda-fina);
}

.lp-arquitetura__legenda {
  color: var(--co-tinta-suave);
  margin-bottom: var(--esp-4);
}

.lp-arquitetura__topo {
  padding: var(--esp-4);
  border: var(--borda-forte);
}

.lp-arquitetura__nome { color: var(--co-sinal); }

.lp-arquitetura__papel {
  margin-top: var(--esp-1);
  color: var(--co-tinta-suave);
}

.lp-arquitetura__ramos {
  position: relative;
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-8);
  padding-top: var(--esp-6);
}

/* Tronco vertical: sai do bloco CondoOS e desce até o último ramo */
.lp-arquitetura__ramos::before {
  content: "";
  position: absolute;
  top: calc(var(--esp-8) * -1);
  bottom: 0;
  inset-inline-start: 0;
  width: 0;
  border-inline-start: var(--borda-fina);
}

.lp-arquitetura__ramo {
  position: relative;
  padding: var(--esp-3) var(--esp-4);
  margin-inline-start: var(--esp-6);
  border: var(--borda-fina);
}

.lp-arquitetura__ramo::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--esp-6) * -1);
  width: var(--esp-6);
  height: 0;
  border-top: var(--borda-fina);
}

/* O tronco termina no eixo do último ramo */
.lp-arquitetura__ramo:last-child::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: calc(var(--esp-3) * -1);
  inset-inline-start: calc(var(--esp-6) * -1);
  width: 1px;
  background-color: var(--co-base);
}

.lp-arquitetura__ramo-nome {
  color: var(--co-tinta);
}

.lp-arquitetura__ramo-detalhe {
  margin-top: var(--esp-1);
  color: var(--co-tinta-suave);
}

.lp-arquitetura__nota {
  margin-top: var(--esp-4);
  color: var(--co-tinta-suave);
}

@media (max-width: 1024px) {
  .lp-independencia {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-12);
  }
}

@media (max-width: 640px) {
  .lp-arquitetura { padding: var(--esp-4); }
}

/* ------------------------------------------------------------
   10. Chamada para o protótipo
   ------------------------------------------------------------ */

.lp-secao--prototipo {
  padding-bottom: var(--esp-24);
}

.lp-chamada {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--esp-12);
  align-items: center;
  padding: var(--esp-8);
  border: var(--borda-forte);
}

.lp-chamada__texto {
  display: grid;
  gap: var(--esp-4);
  max-width: 62ch;
}

.lp-chamada__texto p { color: var(--co-tinta-suave); }

.lp-chamada__acao {
  display: grid;
  justify-items: start;
  gap: var(--esp-2);
}

.lp-chamada__nota { color: var(--co-tinta-suave); }

@media (max-width: 640px) {
  .lp-chamada {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-6);
    padding: var(--esp-4);
  }
  .lp-chamada__acao { justify-items: stretch; }
}

/* ------------------------------------------------------------
   11. Rodapé
   ------------------------------------------------------------ */

.lp-rodape {
  padding-block: var(--esp-12) var(--esp-16);
  border-top: var(--borda-fina);
}

.lp-rodape__grade {
  display: grid;
  gap: var(--esp-4);
  margin-top: var(--esp-8);
  justify-items: start;
}

.lp-rodape__logo {
  width: calc(var(--esp-24) * 2);
  height: auto;
  color: var(--co-tinta);
}

.lp-rodape__frase { color: var(--co-tinta); }

.lp-rodape__versao { color: var(--co-tinta-suave); }