/* =============================================================================
 * Agente do Corretor — SITE INSTITUCIONAL
 * site.css — LAYOUT de pagina e de secao
 *
 * Documento irmao: site/DESIGN_SYSTEM.md
 * Contrato de marcacao: site/_ESQUELETO.md
 *
 * REGRA DE ESCOPO DESTE ARQUIVO
 * Os COMPONENTES (botao, link, card, moldura, chip, badge, pilula, campo,
 * acordeao, preco, depoimento, faixa de numeros, passo, recurso, video,
 * recorte de conversa, header, rodape, revelacao) ja existem em tokens.css e
 * NAO sao reescritos aqui. Este arquivo entrega o que faltava: a GRADE e o
 * ARRANJO — cabecalho, hero, secoes de recurso, vitrine de telas, grade de
 * precos, faixa de numeros, recorte de conversa, FAQ, fechamento, rodape — e
 * as utilidades de layout.
 *
 * Ordem de carregamento obrigatoria:
 *   <link rel="stylesheet" href="/assets/css/tokens.css">
 *   <link rel="stylesheet" href="/assets/css/site.css">
 *
 * Nenhum valor de cor, sombra, duracao, raio, espaco de layout ou tamanho de
 * fonte literal. Tudo por var(--site-*). Os unicos numeros crus sao:
 *   - larguras de ponto de quebra em @media (nao existe var() em media query);
 *   - dimensao de COMPONENTE (altura de controle, minmax de coluna, proporcao),
 *     que o DESIGN_SYSTEM secao 5.1 declara fora da escala por definicao.
 * Cada um deles vem comentado.
 *
 * Pontos de quebra do sistema (os mesmos de tokens.css, mais o 1024 do hero
 * definido no DESIGN_SYSTEM 7.13):
 *   480px   empilhamento de botao
 *   768px   fim do desktop compacto / barra de CTA fixa
 *   900px   gaveta de navegacao do celular
 *   1024px  divisao 55/45 do hero
 *
 * Mobile primeiro: a regra base e a do celular; os @media so ampliam.
 * Propriedades logicas (padding-inline etc.) NAO sao usadas aqui — este
 * arquivo escreve so o par fisico, que funciona em todo o parque de aparelhos
 * do publico (ver DESIGN_SYSTEM 5.6).
 * ========================================================================== */


/* =============================================================================
 * 1. UTILIDADES DE LAYOUT
 * ========================================================================== */

/* [hidden] precisa vencer qualquer display declarado por componente. O JS
 * esconde e mostra blocos por este atributo (seletor de cobranca, gaveta,
 * secao de prova social ainda nao publicada). Sem o !important, um elemento
 * com display: grid ignora o atributo e reaparece na tela. */
[hidden] { display: none !important; }

/* Empilhamento vertical. E o instrumento padrao de ritmo dentro de um bloco:
 * uma unica declaracao de gap em vez de margem em cada filho. */
.site-stack {
  display: grid;
  align-content: start;
  gap: var(--site-space-24);
}
.site-stack--tight { gap: var(--site-space-12); }
.site-stack--loose { gap: var(--site-space-32); }
.site-stack--wide  { gap: var(--site-space-48); }

/* Fileira que quebra sozinha. Serve para grupo de botoes, fileira de chips e
 * qualquer conjunto horizontal de elementos de larguras diferentes. */
.site-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-16);
}

/* Grupo de botoes. Abaixo de 480px o tokens.css ja transforma em grade de uma
 * coluna com 12px de calha; aqui fica so o comportamento de desktop.
 * O espaco de 16px cumpre com folga a separacao minima de 8px entre alvos. */
.site-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-16);
}

/* CORRECAO DE SISTEMA (consolidada da /crm/, vale para o site inteiro).
 * .site-btn e `white-space: nowrap` em tokens.css e, abaixo de 480px, o grupo
 * vira grade de uma coluna. Numa grade o min-width do item vale `auto`, ou
 * seja, o min-content — e com nowrap o min-content de um rotulo longo e a
 * linha inteira. Medido: "Conhecer o agente que atende por voce" = 372px
 * contra os 335px uteis de um aparelho de 375px; a coluna crescia, o container
 * crescia e a PAGINA INTEIRA ganhava rolagem horizontal.
 * Abaixo de 480px o botao ja ocupa a largura toda, entao o rotulo volta a
 * poder quebrar e o min-content zera. O par de padding vertical existe para o
 * rotulo de duas linhas nao encostar nas bordas; em 8px ele ainda cabe dentro
 * do min-height do componente, entao TODO botao de uma linha continua com a
 * mesma altura das outras paginas. O alvo de toque nunca diminui.
 * Alcance deliberadamente estreito: so .site-btn filho direto de
 * .site-btn-group. O botao do cabecalho e o da barra fixa nao sao tocados. */
@media (max-width: 480px) {
  .site-btn-group > .site-btn {
    min-width: 0;
    white-space: normal;
    padding-top: var(--site-space-8);
    padding-bottom: var(--site-space-8);
  }
}

/* MESMO MODO DE FALHA, num botao que NAO vive em .site-btn-group: o CTA de
 * checkout solto dentro de um <div> cru filho de .site-stack (home, secoes
 * "Apresentacao" e "O limite dele"). O <div> nao pode virar .site-btn-group
 * porque ele carrega o botao MAIS a microcopy obrigatoria, e o flex poria as
 * duas coisas lado a lado.
 * Medido em 320px, carga limpa: o rotulo "Assinar o Agente do Corretor" tem
 * min-content de 298px por causa do nowrap; como o <div> e item de grid, o
 * min-width: auto empurrava a trilha para 297,98px num container de 280px, e
 * arrastava junto o mount do video, a grade de recursos e a microcopy. O h2 da
 * mesma secao terminava em x=300 e a coluna de conteudo em x=318: 18px fora da
 * calha, a 2px da borda direita. Nao gerava rolagem horizontal — por isso
 * passou despercebido —, mas quebrava a coluna unica da 5.2, que e a principal
 * fonte de acabamento do sistema. */
@media (max-width: 480px) {
  .site-stack > div > .site-btn {
    min-width: 0;
    white-space: normal;
    padding-top: var(--site-space-8);
    padding-bottom: var(--site-space-8);
  }
}

/* Grade de auto-ajuste. O minmax e dimensao de OBJETO, nao espaco de layout.
 * --site-grid-2: blocos largos (cartao com print, depoimento).
 * --site-grid-3: blocos medios (recurso, passo).
 * --site-grid-4: blocos curtos (numero, item de lastro). */
.site-grid {
  display: grid;
  gap: var(--site-rhythm-grid-row) var(--site-rhythm-grid-col);
}
.site-grid > * { min-width: 0; }              /* impede vazamento horizontal */
/* O min() do --2 e correcao de defeito, nao enfeite: um minmax(320px, …) cru
 * forca uma trilha de 320px mesmo quando o container tem menos que isso. Em
 * 320px de viewport, com a calha de 20px do container, sobram 280px de
 * conteudo e a pagina ganhava 20px de rolagem horizontal. Com o min(), a
 * trilha nunca fica maior que o proprio container. Os pisos de 260px e 200px
 * do --3 e do --4 cabem nos 280px e dispensam a correcao. */
.site-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.site-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.site-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Divisao texto + midia. Empilha no celular, duas colunas a partir de 1024px.
 * A midia vem DEPOIS do texto no DOM, sempre — e o que garante que o grupo de
 * CTA fique acima da dobra em 375px (DESIGN_SYSTEM 7.13). */
.site-split {
  display: grid;
  gap: var(--site-space-48) var(--site-rhythm-grid-col);
  align-items: center;
}
.site-split > * { min-width: 0; }

/* A regra de duas colunas estava prometida no comentario acima e nao existia:
 * a classe era uma coluna em qualquer largura. Reposta na consolidacao. */
@media (min-width: 1024px) {
  .site-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Terreno 3 sem gradiente. O gradiente e AMBIENTE de uma secao isolada; quando
 * duas faixas escuras precisam ler como UM bloco continuo (o fechamento e o
 * rodape, DESIGN_SYSTEM 3.7), as duas usam o solido — senao aparece uma emenda
 * entre a base do gradiente e o solido do rodape. */
.site-section--deep-solid { background-image: none; }

/* Centralizacao. Existe para exatamente dois lugares (DESIGN_SYSTEM 4.5):
 * o cartao de preco e a faixa de fechamento. Nao usar em secao de argumento. */
.site-center { text-align: center; }
.site-center .site-lead,
.site-center .site-body,
.site-center .site-display,
.site-center .site-h1,
.site-center .site-h2 {
  margin-left: auto;
  margin-right: auto;
}
.site-center .site-cluster,
.site-center .site-btn-group { justify-content: center; }

/* Bloco de prosa centralizado dentro de secao larga (FAQ, garantia). */
.site-narrow {
  max-width: var(--site-prose);
  margin-left: auto;
  margin-right: auto;
}

/* Nota de rodape de bloco: microcopy obrigatoria abaixo de todo botao de
 * checkout. Alinhada ao grupo de botoes, nunca solta no fim da secao. */
.site-microcopy {
  margin-top: var(--site-space-12);
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
  max-width: var(--site-measure-lead);
}
.site-section--deep .site-microcopy { color: var(--site-on-deep-3); }
.site-center .site-microcopy { margin-left: auto; margin-right: auto; }


/* =============================================================================
 * 2. CABECALHO
 *
 * A altura, o fundo e o estado rolado vivem em tokens.css (secao 26). Aqui
 * entra so o arranjo interno: marca a esquerda, navegacao ao centro, acoes a
 * direita.
 * ========================================================================== */

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--site-space-16);
  width: 100%;
}

/* A navegacao ocupa o espaco livre e encosta a direita, o que aproxima os
 * links dos botoes de acao e deixa a marca isolada no seu proprio respiro. */
.site-header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: var(--site-space-24);          /* bem acima dos 8px minimos entre alvos */
}

/* 44px de altura: o alvo de toque minimo do sistema (DESIGN_SYSTEM 9.3).
 * A cor de acao nao entra aqui — link de navegacao nao e botao. */
.site-header__link {
  display: inline-flex;
  align-items: center;
  height: 44px;                        /* altura de controle, nao espaco */
  font-size: var(--site-fs-small);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-2);
  border-bottom: 2px solid transparent;
  transition: color var(--site-dur-fast) var(--site-ease),
              border-color var(--site-dur-fast) var(--site-ease);
}
.site-header__link:hover { color: var(--site-text-1); }

/* Estado ativo: a pagina troca a classe. Nunca so cor — ha peso e fio, para a
 * informacao nao depender de percepcao cromatica. */
.site-header__link.is-active {
  color: var(--site-text-1);
  border-bottom-color: var(--site-accent-text);
}

/* margin-left: auto encosta o bloco de acoes na borda direita mesmo quando a
 * navegacao esta escondida (abaixo de 900px), onde nao ha mais um elemento
 * elastico entre a marca e os botoes. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--site-space-8);
  flex: 0 0 auto;
  margin-left: auto;
}

/* Abaixo de 900px os links recolhem na gaveta (regra em tokens.css) e os dois
 * botoes PERMANECEM no cabecalho (DESIGN_SYSTEM 7.11). Em 375px eles precisam
 * caber ao lado da marca e do gatilho do menu: por isso, e so aqui, o botao
 * assume a altura minima de alvo de toque e perde a largura minima de repouso
 * (que existe para o estado de carregamento, inexistente num link de topo).
 * Sem este bloco, a regra de <480px do tokens.css poria os dois botoes em
 * largura total dentro do cabecalho. */
@media (max-width: 900px) {
  .site-header .site-btn {
    width: auto;
    min-width: 0;
    min-height: 44px;                  /* alvo de toque minimo do sistema */
    padding-left: var(--site-space-12);
    padding-right: var(--site-space-12);
  }
  .site-header .site-btn--primary { font-size: var(--site-fs-body); }
  .site-header__nav { display: none; }
}

/* Em 320px, com o gutter no piso de 20px, sobram 280px uteis. A marca esta
 * travada em 36px (nao encolhe: distorcer o logo e proibido) e a calha minima
 * do cabecalho e 16px, entao as acoes precisam caber em 228px — e com 12px de
 * respiro lateral elas mediam 231,5px, o que espremia o logo em 32,5x36.
 * O alvo de toque de 44px de altura nao muda; so o respiro lateral do rotulo
 * cede. Medido depois: 51,8 + 103,7 + 44 + 2x8 = 215,5px. */
@media (max-width: 400px) {
  .site-header .site-btn {
    padding-left: var(--site-space-8);
    padding-right: var(--site-space-8);
  }
}

/* Gatilho da gaveta: as tres barras sao desenhadas em CSS, sem SVG e sem
 * dependencia de icone. currentColor herda a tinta do botao. */
.site-nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;                         /* dimensao de icone */
  height: 2px;
  border-radius: 1px;                  /* ajuste optico da propria barra */
  background: currentColor;
}
.site-nav-toggle__bars::before,
.site-nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--site-dur-base) var(--site-ease);
}
.site-nav-toggle__bars::before { top: -6px; }   /* ajuste optico */
.site-nav-toggle__bars::after  { top:  6px; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars { background: transparent; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Ultimo item da gaveta sem fio, para o painel nao terminar numa linha solta */
.site-nav-drawer a:last-child { border-bottom: 0; }


/* =============================================================================
 * 3. HERO
 *
 * Nada anima aqui (DESIGN_SYSTEM 8.3): o H1 e o LCP da pagina.
 * ========================================================================== */

.site-hero {
  padding-top: var(--site-hero-top);
  padding-bottom: var(--site-section-y);
  background: var(--site-ground-1);
}

.site-hero__grid {
  display: grid;
  gap: var(--site-space-48);
  align-items: center;
}
.site-hero__grid > * { min-width: 0; }

/* Convite de indicacao (/convite/): o cabecalho so tem a marca e a pagina tem
 * um destino so. No celular o respiro do topo e a coluna mais curta poem o
 * botao de assinar na primeira tela (medido em 375x812); do desktop para cima
 * vale o respiro normal, o botao ja cabe ao lado do texto. */
.site-hero--convite { padding-top: var(--site-space-32); }
.site-hero--convite .site-hero__grid { gap: var(--site-space-32); }
@media (min-width: 1024px) {
  .site-hero--convite { padding-top: var(--site-hero-top); }
  .site-hero--convite .site-hero__grid { gap: var(--site-space-64); }
}

.site-hero__copy { display: grid; gap: var(--site-space-24); align-content: start; }

/* A linha de apoio abaixo dos botoes ("CRM completo incluido...") */
.site-hero__support {
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
  max-width: var(--site-measure-lead);
}

/* A midia do hero fica sobre plinto para nao flutuar em branco sobre branco
 * (DESIGN_SYSTEM 7.13). O plinto so aparece do desktop para cima: no celular
 * ele rouba largura util de um objeto que ja esta apertado. */
.site-hero__media { display: block; }

/* A divisao passou de 55/45 para 60/40 e o alinhamento de center para start.
 * Os dois valores vem de medicao no desktop, que a 7.13 nao tinha conferido —
 * a regra do CTA acima da dobra foi escrita pensando em 375px:
 *
 * 1) DOBRA. Em 1440x900 o fundo do botao primario ficava em 926px (26px
 *    cortados) e em 1280x800 em 913px — o botao inteiro invisivel, com o lead
 *    cortado no meio. Causa: --site-hero-top de 176px mais um h1 de 72px que
 *    caia em CINCO linhas (374px) numa coluna de 699px, enquanto a 4.2
 *    justifica o line-height de 1,04 "em titulos de 2-3 linhas". A soma das
 *    larguras de linha do h1 e 2.561px: com a coluna em 762px (1440) e 668px
 *    (1280) ele fecha em quatro linhas, -74,88px. Combinado com o teto menor do
 *    --site-hero-top (tokens.css), o CTA volta para dentro da tela nas duas.
 *
 * 2) VAZIO. Com align-items: center, a coluna de midia (plinto de 350px) ficava
 *    centralizada num grid de 740px: 195px de branco acima e 195px abaixo, ou
 *    seja, 45% da largura da pagina usada em 47% da propria altura. Nao ha
 *    regra de ritmo neste sistema que produza 195px de vazio interno; o
 *    align-items nunca foi decidido, foi herdado. Com start, o topo do plinto
 *    encosta na altura do eyebrow. */
@media (min-width: 1024px) {
  .site-hero__grid {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: var(--site-space-64);
    align-items: start;
  }
  .site-hero__media { padding: var(--site-space-32); }
  .site-hero__media--plinth {
    background: var(--site-mist);
    border-radius: var(--site-radius-lg);
  }
}

/* Hero vivo — painel de demonstracao dentro do .site-frame (emenda 8.3,
 * 2026-08-05). .site-chat/.site-ficha/.site-badge--ok ja existiam; aqui so
 * o arranjo dos tres empilhados e a extensao da progressao de passos de
 * .site-message-in (tokens.css ia so ate data-step="4", passos de secao 3;
 * este bloco precisa de 7). Mesma formula: dur-slow (250ms) x N. */
.site-hero-demo { display: grid; gap: var(--site-space-16); }
.site-hero-demo__badge { margin: 0 var(--site-space-24) var(--site-space-24); justify-self: start; }
.site-hero-demo__caption { margin-top: var(--site-space-12); color: var(--site-text-3); }

.site-message-in[data-step="5"] { animation-delay: calc(var(--site-dur-slow) * 14); }
.site-message-in[data-step="6"] { animation-delay: calc(var(--site-dur-slow) * 16); }
.site-message-in[data-step="7"] { animation-delay: calc(var(--site-dur-slow) * 19); }

/* Demo do painel — hero da /crm/ (mesma emenda 8.3). Tres indicadores assentam
 * com os valores JA PRONTOS (numeros contando de zero sao proibidos pela 8.4;
 * aqui o bloco entra inteiro, o numero nunca muda) e o climax e o .site-notify
 * reaproveitado da secao 3 da home: o lead qualificado chegando no painel. */
.site-crm-demo { display: grid; gap: var(--site-space-16); padding: var(--site-space-24); }
.site-crm-demo__head { display: flex; justify-content: space-between; align-items: baseline; }
.site-crm-demo__title { font-size: var(--site-fs-small); font-weight: var(--site-fw-semibold); color: var(--site-text-1); }
.site-crm-demo__period { font-size: var(--site-fs-legal); color: var(--site-text-3); }
.site-crm-demo__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-space-12); }
.site-crm-demo__stat {
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-sm);
  padding: var(--site-space-12) var(--site-space-16);
  display: grid;
  gap: var(--site-space-4);
}
.site-crm-demo__num {
  font-size: 1.75rem;                  /* dimensao de componente: menor que --site-fs-stat, e um tile de demo */
  line-height: 1.1;
  font-weight: var(--site-fw-bold);
  letter-spacing: -0.03em;
  color: var(--site-text-1);
  font-variant-numeric: tabular-nums;
}
.site-crm-demo__label { font-size: var(--site-fs-legal); line-height: var(--site-lh-small); color: var(--site-text-3); }
/* Ficha dentro do painel de demo: o container ja tem padding-24; sem este
 * zero a ficha somaria o proprio padding-24 e o conteudo afundaria 48px. */
.site-crm-demo .site-ficha { padding: 0; }
.site-crm-demo__badge { justify-self: start; margin: 0; }

/* Midia de hero que so existe do desktop para cima. Mesmo raciocinio do plinto
 * (7.13: "no celular ele rouba largura util") somado ao proposito da pagina de
 * precos: o cartao de preco e o conteudo — no celular, nada entra na frente
 * dele. E uma demo, nao conteudo: esconder nao tira informacao de ninguem. */
.site-hero__media--so-desktop { display: none; }
@media (min-width: 1024px) {
  .site-hero__media--so-desktop { display: block; }
}


/* =============================================================================
 * 4. SECOES DE ARGUMENTO — recurso, passo, vitrine de telas
 * ========================================================================== */

/* Grade de itens de recurso (.site-feature vem de tokens.css) */
.site-feature-grid {
  display: grid;
  gap: var(--site-rhythm-grid-row) var(--site-rhythm-grid-col);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.site-feature-grid > * { min-width: 0; }

/* Vitrine: cartao com print real do produto. O print vive dentro de
 * .site-frame (tokens.css); aqui fica so o arranjo do par imagem + texto. */
.site-showcase {
  display: grid;
  gap: var(--site-rhythm-grid-row) var(--site-rhythm-grid-col);
  grid-template-columns: 1fr;
}
.site-showcase > * { min-width: 0; }
.site-showcase__item { display: grid; gap: var(--site-space-20); align-content: start; }
.site-showcase__body { display: grid; gap: var(--site-space-8); }

/* A virada e 1024px, e nao 768px. Medido em /crm/, na mesma pagina e no mesmo
 * scroll: a 768px os tres prints da secao "As telas" caiam para 330x186 —
 * 20,6% da fonte de 1600x900 — enquanto os prints das secoes vizinhas
 * (#funil, #mensagens-agendadas, hero) ficavam em 694x390, 43,4%. Duas
 * larguras de print diferentes para a mesma classe de conteudo, na mesma
 * pagina. A 20,6%, um rotulo de coluna do Kanban (13px na origem) renderiza
 * abaixo de 3px e a imagem deixa de ser prova: vira textura, que e exatamente
 * o que a 6.4 diz que a moldura existe para evitar. Em 320/375/414 os prints
 * ja ocupavam a largura inteira — o pior caso nao era o celular, era o tablet.
 * Com 1024px, em 768 eles passam a 694px (43,4%, igual aos vizinhos) e em
 * 1280/1440 nada muda. */
@media (min-width: 1024px) {
  .site-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* O <video> criado pelo JS no clique da fachada. A proporcao declarada aqui
 * reserva exatamente a mesma caixa que a fachada ocupava: a troca de um
 * elemento pelo outro nao move um pixel da pagina (zero CLS). */
.site-video__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--site-radius-sm);
  background: var(--site-deep-900);
}

/* Bloco de midia solto com legenda abaixo */
.site-media { display: grid; gap: var(--site-space-12); }
.site-media__caption {
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
}
.site-section--deep .site-media__caption { color: var(--site-on-deep-3); }

/* Faixa de regras curtas (as tres regras de seguranca da secao 5 da home).
 * Nao e card: e uma lista de texto sobre plinto, para nao virar mais uma
 * grade de cartoes numa pagina que ja tem muitas. */
.site-ruleset {
  display: grid;
  gap: var(--site-space-16);
  padding: var(--site-space-32);
  border-radius: var(--site-radius-lg);
  background: var(--site-mist);
}
.site-ruleset li {
  display: flex;
  gap: var(--site-space-12);
  color: var(--site-text-2);
  font-size: var(--site-fs-body);
  line-height: var(--site-lh-body);
}
.site-ruleset svg {
  flex: 0 0 auto;
  width: 20px; height: 20px;           /* dimensao de icone */
  margin-top: 3px;                     /* alinhamento optico com a 1a linha */
  color: var(--site-accent-text);
}
.site-section--mist .site-ruleset { background: var(--site-white); }
.site-section--deep .site-ruleset { background: var(--site-deep-card); }
.site-section--deep .site-ruleset li { color: var(--site-on-deep-2); }
.site-section--deep .site-ruleset svg { color: var(--site-accent-on-deep); }

/* Registro rotulo -> valor (a "ficha ja preenchida"). Consolidado da home.
 * O sistema tem listas com icone (.site-price-list, .site-ruleset) e nao tinha
 * par rotulo/valor: um print generico no lugar quebraria a continuidade de
 * dados com o recorte de conversa que vem logo acima.
 * Vive dentro de .site-frame, que ja da fundo, borda e raio.
 * Os dois valores crus sao dimensao de COMPONENTE (largura da coluna de rotulo
 * e o ponto de quebra em que a coluna cabe), fora da escala por definicao
 * (DESIGN_SYSTEM 5.1). */
.site-ficha {
  display: grid;
  gap: var(--site-space-16);
  padding: var(--site-space-24);
}
.site-ficha__row + .site-ficha__row {
  border-top: 1px solid var(--site-border);
  padding-top: var(--site-space-16);
}
.site-ficha__label {
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
}
.site-ficha__value {
  margin: 0;
  font-size: var(--site-fs-body);
  line-height: var(--site-lh-small);
  font-weight: var(--site-fw-medium);
  color: var(--site-text-1);
}
@media (min-width: 560px) {                /* largura em que a coluna de rotulo cabe */
  .site-ficha__row {
    display: grid;
    grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
    gap: var(--site-space-16);
    align-items: baseline;
  }
}
.site-section--deep .site-ficha__row + .site-ficha__row { border-top-color: var(--site-border-deep); }
.site-section--deep .site-ficha__label { color: var(--site-on-deep-3); }
.site-section--deep .site-ficha__value { color: var(--site-on-deep-1); }


/* =============================================================================
 * 5. RECORTE DE CONVERSA
 *
 * Os tokens --site-chat-* so existem dentro de .site-frame (regra dura do
 * DESIGN_SYSTEM 7.14). Este bloco NAO os usa: cuida so do arranjo em volta.
 * ========================================================================== */

.site-chat-layout {
  display: grid;
  gap: var(--site-space-32);
  align-items: start;
}
.site-chat-layout > * { min-width: 0; }

@media (min-width: 1024px) {
  .site-chat-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--site-rhythm-grid-col);
  }
}

/* Separador de linha unica: o miolo da conversa (cidade, operadora, hospital)
 * fica FORA dos baloes, senao a secao vira cinco telas de rolagem no celular. */
.site-chat__sep {
  display: block;
  text-align: center;
  font-size: var(--site-fs-legal);
  line-height: var(--site-lh-small);
  color: var(--site-chat-meta);
  padding-top: var(--site-space-4);
  padding-bottom: var(--site-space-4);
}

/* Encadeamento da entrada das mensagens. O DESIGN_SYSTEM 8.3 pede intervalo de
 * ~700ms entre mensagens; aqui ele e derivado do token de duracao lenta
 * (250ms x 3 = 750ms), para nao existir duracao literal no arquivo.
 * Roda UMA vez, nunca em loop, e o bloco de movimento reduzido do tokens.css
 * ja desliga a animacao inteira. */
.site-message-in[data-step="1"] { animation-delay: calc(var(--site-dur-slow) * 3); }
.site-message-in[data-step="2"] { animation-delay: calc(var(--site-dur-slow) * 6); }
.site-message-in[data-step="3"] { animation-delay: calc(var(--site-dur-slow) * 9); }
.site-message-in[data-step="4"] { animation-delay: calc(var(--site-dur-slow) * 12); }

/* Notificacao que chega no celular do corretor — o climax da secao 3 da home.
 * Nao e balao e nao pertence a paleta do WhatsApp: e superficie do site. */
.site-notify {
  display: flex;
  gap: var(--site-space-12);
  align-items: flex-start;
  padding: var(--site-space-16);
  border-radius: var(--site-radius-lg);
  background: var(--site-white);
  border: 1px solid var(--site-border-strong);
  box-shadow: var(--site-shadow-lift);
}
.site-notify__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;           /* dimensao de componente */
  display: grid;
  place-items: center;
  border-radius: var(--site-radius-sm);
  background: var(--site-brand-tint);
  color: var(--site-brand);
}
.site-notify__icon svg { width: 20px; height: 20px; }
.site-notify__body { display: grid; gap: var(--site-space-4); }
.site-notify__title {
  font-size: var(--site-fs-body);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-1);
}
.site-notify__text {
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-2);
}
.site-notify__time {
  font-size: var(--site-fs-legal);
  color: var(--site-text-3);
  font-variant-numeric: tabular-nums;
}
.site-section--deep .site-notify {
  background: var(--site-deep-card);
  border-color: var(--site-border-deep);
  box-shadow: none;
}
.site-section--deep .site-notify__icon { background: var(--site-deep-800); color: var(--site-accent-on-deep); }
.site-section--deep .site-notify__title { color: var(--site-on-deep-1); }
.site-section--deep .site-notify__text  { color: var(--site-on-deep-2); }
.site-section--deep .site-notify__time  { color: var(--site-on-deep-3); }


/* =============================================================================
 * 6. FAIXA DE NUMEROS E LASTRO
 *
 * .site-stat-row, .site-stat e .site-trust vem de tokens.css. Aqui entra so a
 * variante com separador e o arranjo das tres linhas de ancoragem de preco.
 * ========================================================================== */

/* Separador dourado entre numeros. USO CONDICIONAL: em secao escura o eyebrow
 * ja e dourado por regra de CSS e a regua tambem, o que consome os dois slots
 * do orcamento (DESIGN_SYSTEM 3.6). Se esta variante for usada, a secao NAO
 * leva regua dourada. Contar antes de aplicar. */
.site-stat-row--divided .site-stat { position: relative; }
@media (min-width: 768px) {
  .site-section--deep .site-stat-row--divided .site-stat + .site-stat::before {
    content: "\00B7";
    position: absolute;
    left: calc(var(--site-rhythm-grid-col) / -2);
    top: 0;
    transform: translateX(-50%);
    color: var(--site-gold);
    font-size: var(--site-fs-stat);
    line-height: 1.1;
    pointer-events: none;
  }
}

/* Ancoragem de preco: tres linhas grandes, sem tabela e sem coluna de
 * comparacao (arquitetura da home, secao 6). */
.site-anchor-list { display: grid; gap: var(--site-space-24); }
.site-anchor-list li {
  font-size: var(--site-fs-h3);
  line-height: var(--site-lh-h3);
  letter-spacing: var(--site-ls-h3);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-1);
  max-width: var(--site-measure-lead);
}
.site-anchor-list .site-num { color: inherit; }
.site-section--deep .site-anchor-list li { color: var(--site-on-deep-1); }


/* =============================================================================
 * 7. PRECOS
 *
 * O cartao, o seletor segmentado e a lista de beneficios vem de tokens.css.
 * Aqui entra o arranjo da secao e a degradacao sem JavaScript.
 * ========================================================================== */

/* Cabecalho da secao de precos: o seletor fica centralizado, com respiro
 * proprio, e nunca colado no primeiro cartao. */
.site-price-head {
  display: grid;
  justify-items: center;
  gap: var(--site-space-16);
  margin-bottom: var(--site-rhythm-head-content);
  text-align: center;
}

/* CORRECAO DE SISTEMA (consolidada da /planos/). O piso de 320px do
 * .site-price-grid de tokens.css fica maior que o container em telas de
 * 320-340px: com justify-content: center o cartao encosta nas duas bordas e
 * come a calha inteira. Sem tocar em tokens.css, o min() limita a trilha a
 * largura real disponivel. O teto de 480px e a legibilidade do cartao e nao
 * muda. */
.site-price-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 480px)); }

.site-price-card__name {
  font-size: var(--site-fs-h3);
  line-height: var(--site-lh-h3);
  letter-spacing: var(--site-ls-h3);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-1);
}
/* Rotulo textual obrigatorio do destaque. NAO declara display: o badge e
 * inline-block por definicao e o cartao ja e centralizado; forcar block
 * esticaria o fundo tingido do badge de ponta a ponta do cartao. */
.site-price-card__tag { margin-bottom: var(--site-space-12); }
.site-price-card__block { margin-top: var(--site-space-24); }
.site-price-card__block--wide { margin-top: var(--site-space-32); }

/* O CTA do cartao ocupa a largura do cartao: e o unico botao ali dentro e a
 * largura total elimina a duvida de onde clicar. */
.site-price-card .site-btn { width: 100%; }

/* Subtitulo interno do cartao ("O que esta incluido" / "O que nao esta
 * incluido"). O cartao e centralizado e .site-price-list e alinhada a
 * esquerda: sem esta regra o rotulo ficaria centralizado sobre uma lista a
 * esquerda. Consolidado da /planos/. */
.site-price-card__heading {
  margin-bottom: var(--site-space-12);
  text-align: left;
  font-size: var(--site-fs-small);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-1);
}

/* Lista do que o plano NAO inclui.
 *
 * MUDANCA DE 2026-08-01, por decisao do dono: o X passa a --site-danger. A
 * versao anterior rebaixava o icone a --site-text-3 com o argumento de que
 * "ausencia de recurso nao e erro". O argumento e bom em UI de produto e ruim
 * aqui: esta lista e argumento de venda declarado — a distancia entre o plano
 * CRM e o plano completo precisa ser vista, nao lida com esforco. O texto do
 * item, o titulo "O que nao esta incluido" e o rotulo oculto de cada linha
 * carregam a informacao; o vermelho carrega so a atencao, que e o unico papel
 * que a cor tem direito de ter sozinha.
 *
 * O TEXTO continua em --site-text-3 (5,72:1 sobre o branco do cartao): pintar
 * seis linhas inteiras de vermelho transformaria a lista num alerta de erro e
 * derrubaria a leitura.
 * --site-danger #be123c sobre o branco do cartao = 6,28:1. */
.site-price-list--ausente li  { color: var(--site-text-3); }
.site-price-list--ausente svg { color: var(--site-danger); }

/* A microcopy obrigatoria do checkout dentro do cartao de preco. A regra de
 * autocentragem da secao 1 so vale dentro de .site-center, e o cartao de preco
 * nao e .site-center — sem isto a caixa de 38ch fica encostada a esquerda com
 * o texto centralizado dentro dela. Consolidado da /planos/. */
.site-price-card .site-microcopy { margin-left: auto; margin-right: auto; }

/* Quebra de linha no rotulo de checkout. .site-btn e nowrap por padrao e aqui
 * o rotulo carrega preco e ciclo ("Assinar o CRM anual — 12x de R$ 59,90"):
 * em 320px ele estourava o cartao e a pagina inteira ganhava rolagem
 * horizontal. Nestes dois lugares o botao ja ocupa a largura toda, entao
 * quebrar em duas linhas e o comportamento correto. Consolidado da /planos/. */
.site-price-card .site-btn,
.site-final__actions .site-btn { white-space: normal; }

/* Linha de apoio abaixo dos cartoes (cota inclusa, forma de pagamento,
 * arrependimento de 7 dias). Texto normal, sem letra miuda. */
.site-price-foot {
  margin-top: var(--site-rhythm-head-content);
  text-align: center;
}
.site-price-foot .site-body {
  margin-left: auto;
  margin-right: auto;
}

/* --- degradacao sem JavaScript -------------------------------------------
 * Sem JS o seletor nao existe e a pagina exibe os DOIS valores, como manda o
 * DESIGN_SYSTEM 9.6. Com JS, o script esconde os blocos do ciclo nao escolhido
 * pelo atributo [hidden]. O gate e a classe .js no <html>. */
html:not(.js) .site-toggle { display: none; }
html:not(.js) [data-ciclo-so] { display: block; }


/* =============================================================================
 * 7.1 TABELA COMPARATIVA
 *
 * Consolidada da /planos/: o sistema nao tinha componente de tabela e a
 * comparacao dos dois planos exige uma. Sem largura minima e sem container de
 * rolagem de proposito — as celulas de valor sao curtas ("Sim", "Nao") e a
 * coluna de recurso quebra em varias linhas, o que faz a tabela caber em 320px
 * sem estourar o container.
 * ========================================================================== */

.site-compare {
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  text-align: left;
}
/* Os 14px sao o piso do celular, onde as duas colunas de valor tem 67-73px e
 * o rotulo ja quebra em ate 5 linhas. Do tablet para cima ha espaco e a tabela
 * volta ao corpo do sistema: a 4.1 fixa o body em 17px com a nota "nunca
 * menor" e reserva --site-fs-small para "legenda, atribuicao, nota de preco".
 * Esta tabela nao e legenda — e o argumento comparativo da pagina de venda,
 * para um publico que a propria 4.2 descreve como "usa o celular na rua, e nao
 * tem 25 anos". Efeito colateral desejado: rotulos mais largos encurtam o vao
 * horizontal ate o icone. */
@media (min-width: 768px) {
  .site-compare {
    font-size: var(--site-fs-body);
    line-height: var(--site-lh-small);
  }
}
.site-compare th,
.site-compare td {
  padding: var(--site-space-12) var(--site-space-8);
  border-bottom: 1px solid var(--site-border);
  vertical-align: top;
  overflow-wrap: break-word;
}
/* Cabecalho grudado sob o header. A tabela tem 22 linhas e mede 1.058px em
 * 1440, 1.184px em 768 e 2.045px em 320, contra viewports de 900/1024/720: com
 * o thead estatico, o leitor rolava ate 2,8 telas de marcadores identicos com
 * os rotulos "Agente do Corretor" e "CRM" fora da tela, e a POSICAO da coluna
 * virava o unico portador da informacao — o oposto do que a 9.1 exige.
 * O box-shadow inset substitui o border-bottom porque, com border-collapse
 * (bloco 8 deste arquivo... na verdade `table` em tokens.css), a borda nao
 * acompanha a celula grudada e some na rolagem.
 * z-index 1 fica muito abaixo de --site-z-header (100): o header continua por
 * cima da tabela. */
.site-compare thead th {
  position: sticky;
  top: var(--site-header-h);
  z-index: 1;
  background: var(--site-white);
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 var(--site-border-strong);
  color: var(--site-text-1);
  font-weight: var(--site-fw-semibold);
}
/* Faixa alternada. Sem ela, o unico guia de linha era o fio de --site-border
 * (1,32:1 sobre branco) e o olho precisava atravessar um vao medido de 240px
 * no minimo, 499px de mediana e 582px no maximo entre o fim do rotulo e o
 * icone, em 1440px. A 6.2 autoriza esse fio como divisao "sempre com texto
 * adjacente carregando a separacao" — aqui nao ha texto adjacente, ha meio
 * metro de branco. Contrastes medidos sobre --site-mist #f3f6f8: check
 * #047857 = 5,05:1, X #be123c = 5,79:1, texto #152127 = 15,13:1 e #49555b =
 * 7,08:1. Nenhum encosta no piso. So em terreno claro: em nevoa e em petroleo
 * a faixa nao teria contra o que alternar. */
.site-section:not(.site-section--mist):not(.site-section--deep) .site-compare tbody tr:nth-child(even) th,
.site-section:not(.site-section--mist):not(.site-section--deep) .site-compare tbody tr:nth-child(even) td {
  background: var(--site-mist);
}
.site-compare thead th + th {
  width: 24%;                            /* proporcao de coluna, nao espaco */
  text-align: center;
}
.site-compare tbody th {
  font-weight: var(--site-fw-medium);
  color: var(--site-text-1);
}
.site-compare tbody td {
  text-align: center;
  color: var(--site-text-2);
  font-variant-numeric: tabular-nums;
}
/* As celulas de "Sim"/"Nao" viraram icone (.site-mark, em tokens.css) e
 * passaram a ter largura constante, o que e o ponto: a coluna inteira agora se
 * le em varredura vertical, e nao palavra por palavra. As celulas que
 * continuam texto ("200", "Nao se aplica", os precos) nao mudaram nada.
 * Cada .site-mark vem obrigatoriamente com um .site-visually-hidden dizendo
 * "Incluido" ou "Nao incluido" — sem ele a celula fica muda para leitor de
 * tela e a cor vira a unica portadora do dado. */
/* O fundo do cabecalho grudado tem de ser o do terreno, senao ele aparece como
 * uma faixa branca deslizando sobre a secao. Hoje a unica tabela do site esta
 * em terreno claro; as duas linhas abaixo existem para a proxima nao nascer
 * errada. */
.site-section--mist .site-compare thead th { background: var(--site-mist); }
.site-section--deep .site-compare thead th { background: var(--site-ground-3-solid); }
.site-section--deep .site-compare th,
.site-section--deep .site-compare td { border-bottom-color: var(--site-border-deep); }
.site-section--deep .site-compare thead th,
.site-section--deep .site-compare tbody th { color: var(--site-on-deep-1); }
.site-section--deep .site-compare tbody td { color: var(--site-on-deep-2); }


/* =============================================================================
 * 8. FAQ
 *
 * O acordeao inteiro esta em tokens.css. Aqui so a coluna e o fecho.
 * ========================================================================== */

.site-faq {
  max-width: var(--site-prose);
  margin-left: auto;
  margin-right: auto;
}
.site-faq__foot {
  margin-top: var(--site-space-32);
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
}
.site-section--deep .site-faq__foot { color: var(--site-on-deep-3); }


/* =============================================================================
 * 8.1 DOCUMENTO LEGAL — /termos-de-uso/ e /politica-privacidade/
 *
 * Duas classes, aplicadas so nessas duas paginas. Nao ha componente novo, nao
 * ha token novo e nao ha uma palavra alterada no texto dos documentos, que sao
 * transcricao fiel de frontend/src/legal/termosConteudo.js (DECISOES item 15).
 * ========================================================================== */

/* --- indice ---------------------------------------------------------------
 * O alvo de toque era 22px, nao 44px. O comentario do HTML calculava "altura
 * do link + calha" e chegava a 44, mas o dedo tem de pousar dentro do <a>: com
 * display: inline a caixa media 20px e o hit-test com elementFromPoint, de 2
 * em 2px, devolvia uma faixa util de 22px. Fora dela o alvo e o <li>, que nao
 * e clicavel. A 9.3 exige 44x44 e dispensa apenas "links de texto DENTRO de
 * paragrafo" — estes estao dentro de uma <nav> e sao a navegacao principal de
 * um documento de 20,5 telas em 320px.
 * A altura do indice nao muda: o passo era 28 (linha) + 24 (calha) = 52px e
 * passa a 28 + 2x8 (padding) + 8 (calha) = 52px. Medido depois: alvo de 44px
 * de altura por 630px de largura, contra os 22 x 176px de antes.
 * O recuo pendente (padding-left + text-indent negativo) existe porque em 320px
 * seis das treze entradas quebram em 2 ou 3 linhas e as continuacoes alinhavam
 * rente ao numero, apagando o unico sinal de inicio de entrada.
 * Par fisico, nunca a propriedade logica: a 5.6 lista alvo de toque como caso
 * catastrofico se o navegador antigo do publico ignorar o logico. */
.site-doc-index { gap: var(--site-space-8); }
.site-doc-index a {
  display: block;
  padding-top: var(--site-space-8);
  padding-bottom: var(--site-space-8);
  padding-left: var(--site-space-24);
  text-indent: calc(-1 * var(--site-space-24));
}

/* --- corpo ----------------------------------------------------------------
 * --site-measure-body vale 65ch e o CSS o cumpre a risca: a coluna trava em
 * 697,1px = 64,9ch. Mas `ch` em Inter e a largura do "0" (10,734px a 17px) e o
 * caractere medio deste texto em portugues mede 8,61px — contando com Range em
 * 104 linhas de corpo, a mediana real e 81 caracteres por linha, p90 86,
 * maximo 88. A 4.4 declara a intencao em caracteres ("em 1440px o paragrafo
 * vira uma faixa de 110 caracteres"), e 81 esta acima da faixa de conforto de
 * leitura longa. Para contrato — texto denso, sem imagem, sem respiro — cansa.
 * 56ch entrega 602px, cerca de 70 caracteres reais. Escopado as duas paginas:
 * o token global continua servindo FAQ e paginas comerciais sem mudanca. */
.site-doc .site-body { max-width: 56ch; }

/* --- impressao ------------------------------------------------------------
 * Termos de Uso e a pagina do site com maior chance de ser impressa ou salva
 * em PDF, e nao havia UMA ocorrencia de break-inside, break-after,
 * page-break ou @page em todo o CSS. Sem isso, um contrato de 13 clausulas sai
 * com titulo orfao no pe da folha. */
@media print {
  /* `avoid` e nao `avoid-page`: nao ha colunas nestas paginas, os dois fazem a
   * mesma coisa no papel, e `avoid` e o valor com suporte mais antigo. */
  .site-doc > section { break-inside: avoid; }
  .site-doc .site-h3 { break-after: avoid; }
}


/* =============================================================================
 * 9. PROVA SOCIAL
 *
 * A secao existe no HTML e fica OCULTA ate os depoimentos reais chegarem.
 * Suporta depoimento em TEXTO e em VIDEO no mesmo arranjo.
 * ========================================================================== */

.site-quote-grid {
  display: grid;
  gap: var(--site-rhythm-grid-row) var(--site-rhythm-grid-col);
  /* min() pelo mesmo motivo do .site-grid--2: em 320px o container util e de
   * 270px e uma trilha com piso cru de 280px nao cabe — o depoimento estouraria
   * 10px para fora. Hoje o defeito e latente (a secao esta oculta ate os textos
   * reais chegarem, DECISOES item 6) e por isso nao pode ser medido renderizado;
   * corrigido agora para nao nascer com a secao. */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: start;
}
.site-quote-grid > * { min-width: 0; }

/* Um depoimento so: largura total e destaque, sem grade de uma coluna solta. */
.site-quote-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--site-prose);
  margin-left: auto;
  margin-right: auto;
}

.site-quote-card { display: grid; gap: var(--site-space-16); }
.site-quote-card .site-quote { max-width: var(--site-measure-quote); }

/* Identificacao com foto real. Sem foto real, o bloco simplesmente nao leva
 * a imagem — nunca um avatar generico (DESIGN_SYSTEM 7.18). */
.site-quote__id {
  display: flex;
  align-items: center;
  gap: var(--site-space-12);
}

/* Depoimento em video: reaproveita a fachada de video de tokens.css, em
 * proporcao vertical, que e como o corretor grava no celular. */
.site-quote__media .site-video__facade { aspect-ratio: 9 / 16; }
.site-quote__media .site-video__play {
  width: 56px; height: 56px;           /* dimensao de componente, menor que a do player principal */
}


/* =============================================================================
 * 10. GARANTIA E FECHAMENTO
 * ========================================================================== */

/* Faixa unica da garantia: texto grande e curto, sem cartao e sem icone. */
.site-guarantee {
  max-width: var(--site-prose);
  margin-left: auto;
  margin-right: auto;
}
.site-guarantee .site-lead { max-width: var(--site-measure-body); }
.site-guarantee__note {
  margin-top: var(--site-space-20);
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
  max-width: var(--site-measure-body);
}

/* Fechamento: o segundo e ultimo lugar do site onde centralizar esta certo. */
.site-final {
  max-width: var(--site-prose);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.site-final .site-h2,
.site-final .site-lead { margin-left: auto; margin-right: auto; }
.site-final .site-rule-gold { margin-left: auto; margin-right: auto; }
.site-final__actions {
  display: grid;
  justify-items: center;
  gap: var(--site-space-16);
  margin-top: var(--site-space-32);
}


/* =============================================================================
 * 11. RODAPE
 *
 * Petroleo, CONTINUO com o fechamento: sao um bloco so, nao duas faixas.
 * O elemento carrega .site-section--deep (para herdar tinta, foco, impressao e
 * todos os overrides de terreno escuro do tokens.css) mais esta classe, que
 * troca o ritmo vertical e apaga o gradiente. O fechamento imediatamente acima
 * usa .site-section--deep-solid pelo mesmo motivo.
 * SEM razao social, SEM CNPJ, SEM endereco (DECISOES.md item 15).
 * ========================================================================== */

/* Tres blocos, nesta ordem, com peso decrescente:
 *   1. marca + navegacao  (o rodape util)
 *   -- fio de divisao --
 *   2. bloco legal        (encarregado de dados + copyright)
 *   3. fecho de marca     (a assinatura, centralizada)
 * A divisao 1/2 e feita pelo fio; a 2/3, por espaco. Dois fios seguidos
 * zebrariam o fim da pagina, que e exatamente o que o rodape antigo fazia com
 * uma unica faixa indiferenciada de links, contato e copyright. */
.site-footer-section {
  padding-top: var(--site-section-y-tight);
  padding-bottom: var(--site-space-48);
  background-image: none;              /* nao repete o gradiente do fechamento */
}

.site-footer-top {
  display: grid;
  gap: var(--site-rhythm-grid-row) var(--site-rhythm-grid-col);
}
.site-footer-top > * { min-width: 0; }

.site-footer__brand { display: grid; gap: var(--site-space-20); align-content: start; }
/* 64px, e nao 56px: o minimo do sistema para o lockup e 48px (a altura em que
 * a tagline e legivel) e este e o unico lugar do site onde a marca tem espaco
 * para presenca. 2041x516 -> 253x64 (proporcao 3,953 contra 3,955 reais). */
.site-footer__logo {
  height: 64px;                        /* dimensao de componente */
  width: auto;
}
.site-footer__about {
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-on-deep-2);        /* 9,22:1 sobre o solido do rodape */
  max-width: var(--site-measure-lead);
}

.site-footer__rule { margin-top: var(--site-space-56); }

/* Bloco legal. Tinta rebaixada de proposito: e informacao de obrigacao, nao de
 * navegacao, e a hierarquia do rodape agora e visivel em tres degraus
 * (on-deep-1 na marca, on-deep-2 nos links, on-deep-3 aqui). */
.site-footer__bottom {
  margin-top: var(--site-space-32);
  display: grid;
  gap: var(--site-space-24);
  font-size: var(--site-fs-legal);
  line-height: var(--site-lh-small);
  color: var(--site-on-deep-3);        /* 6,57:1 sobre o solido do rodape */
}
.site-footer__contact-title {
  font-size: var(--site-fs-eyebrow);
  letter-spacing: var(--site-ls-caps);
  text-transform: uppercase;
  font-weight: var(--site-fw-semibold);
  color: var(--site-on-deep-3);
  margin-bottom: var(--site-space-8);
}
.site-footer__contact-lines { color: var(--site-on-deep-2); }
.site-footer__sep { padding: 0 var(--site-space-8); color: var(--site-on-deep-3); }

/* Identificacao da contratada. O Decreto 7.962/2013, art. 2o, I, exige nome
 * empresarial e CNPJ "em local de destaque e de facil visualizacao" em site
 * que vende ao consumidor — e este vende, pelos botoes que levam ao checkout
 * do Asaas. Ate 2026-09-20 os dois so existiam dentro dos documentos legais,
 * que e o texto do contrato, nao "local de destaque".
 *
 * Sem endereco, de proposito: o endereco da sede e fiscal e de encomendas, nao
 * ha escritorio aberto ao publico la, e o decreto pede a identificacao do
 * fornecedor, nao a publicacao de uma residencia. O endereco permanece no
 * contrato (item 1 dos Termos), onde identifica a parte e ancora o foro.
 *
 * A razao social vai EXATAMENTE como registrada no cartao CNPJ, em caixa alta,
 * para bater com o que o corretor aceita no gate da plataforma. Divergencia de
 * grafia entre o rodape e o contrato e ruido que so gera duvida.
 * `text-wrap: balance` existe porque o nome tem 63 caracteres: sem ele a
 * quebra na coluna da direita deixa uma orfa de uma palavra. */
.site-footer__empresa {
  margin-bottom: var(--site-space-8);
  color: var(--site-on-deep-3);
  /* 46ch: a razao social tem 63 caracteres e o par com o CNPJ chega a 95. Sem
   * teto, a linha ocupa a largura inteira disponivel e deixa o rodape com uma
   * regua de texto atravessada. Com o teto ela quebra em duas linhas curtas.
   * `balance` distribui as duas em vez de deixar uma orfa de uma palavra. */
  max-width: 46ch;
  text-wrap: balance;
}

/* Fecho de marca. A assinatura da marca, centralizada, fechando o documento.
 * NAO e dourada: em terreno escuro o eyebrow e a regua douradas ja consomem o
 * orcamento de dourado do fechamento imediatamente acima (DESIGN_SYSTEM 3.6),
 * e uma terceira peca dourada na mesma tela estoura o orcamento sem que
 * ninguem tenha decidido nada. --site-on-deep-3 = 6,57:1. */
.site-footer__signature {
  margin-top: var(--site-space-48);
  text-align: center;
  font-size: var(--site-fs-eyebrow);
  letter-spacing: var(--site-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--site-fw-semibold);
  color: var(--site-on-deep-3);
}

@media (min-width: 900px) {
  /* 300px na coluna da marca: e a largura que o lockup a 64px (253px) pede
   * para nao encostar na calha. */
  .site-footer-top { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  /* `minmax(0, auto)` e nao `auto` na segunda coluna: com `auto` a coluna se
   * dimensiona pelo CONTEUDO e nao aceita encolher, e a linha de 95 caracteres
   * da razao social + CNPJ estourava a calha do rodape para fora da tela
   * (visto em 2026-09-20, na largura de 1200px). Com o minmax ela pode
   * encolher e o texto quebra em duas linhas, como deve. */
  .site-footer__bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: end;
  }
  .site-footer__bottom > :last-child { text-align: right; }
  /* O teto de 46ch encolhe a caixa; sem isto ela ficaria colada a esquerda da
   * propria coluna, desalinhada do copyright que esta alinhado a direita. */
  .site-footer__empresa { margin-left: auto; }
}


/* =============================================================================
 * 12. BARRA DE CTA FIXA DO CELULAR
 *
 * A visibilidade e o terreno estao em tokens.css. Aqui: o arranjo interno e o
 * espaco reservado no corpo, para a barra nunca cobrir o rodape.
 * ========================================================================== */

.site-cta-sticky__inner {
  display: flex;
  align-items: center;
  gap: var(--site-space-12);
}
.site-cta-sticky .site-btn { flex: 1 1 auto; width: 100%; }

/* O JS aplica a classe no <body> junto com data-visible na barra.
 * 52px e a altura do botao (dimensao de componente); o resto vem da escala. */
@media (max-width: 768px) {
  body.site-cta-space {
    padding-bottom: calc(52px + 2 * var(--site-space-12) + env(safe-area-inset-bottom, 0px));
  }
}


/* =============================================================================
 * 13. AJUSTES DE IMPRESSAO — complemento ao bloco de tokens.css
 * ========================================================================== */

/* O reset de terreno escuro no papel ja e feito pelo bloco @media print do
 * tokens.css, que alcanca o rodape porque ele carrega .site-section--deep. */
@media print {
  .site-hero { padding-top: var(--site-space-32); }
  .site-notify { box-shadow: none !important; }
}

/* ─────────────────────────────────────────────────────────────
 * PAR DE NOTAS — duas frases curtas que exemplificam um comportamento,
 * apresentadas lado a lado no desktop e empilhadas no celular.
 * Usado na home, abaixo de "Duas coisas que ele nunca faz", para mostrar
 * o que o cliente ouve dentro e fora do horário de atendimento.
 * Fio à esquerda em vez de caixa: e um aparte do texto acima, nao um card
 * novo — caixa dentro de caixa e o que faz secao parecer remendo.
 * ───────────────────────────────────────────────────────────── */
.site-note-pair {
  display: grid;
  gap: var(--site-space-12);
  margin-top: var(--site-space-20);
}
.site-note-pair > p {
  margin: 0;
  padding-left: var(--site-space-16);
  border-left: 2px solid var(--site-border-strong);
  color: var(--site-text-2);
}
.site-note-pair strong { color: var(--site-text-1); font-weight: 600; }

/* Sobre petroleo, o fio e a tinta acompanham o terreno escuro. */
.site-section--deep .site-note-pair > p {
  border-left-color: var(--site-border-deep-strong);
  color: var(--site-on-deep-2);
}
.site-section--deep .site-note-pair strong { color: var(--site-on-deep-1); }

@media (min-width: 768px) {
  .site-note-pair { grid-template-columns: 1fr 1fr; gap: var(--site-space-24); }
}