/* ==========================================================================
   VIDRO — a camada que veste TODA tela do sistema.

   Carrega depois de components.css (nas telas internas) e depois de site.css
   (na home e no cadastro). Ela nao desenha componente nenhum: entrega o
   MATERIAL — a cena atras, o vidro por cima, o fio de luz na quina, o anel de
   foco e a barra de rolagem.

   ------------------------------------------------------------------------
   AS QUATRO REGRAS

   1. UMA FONTE DE LUZ, no alto a direita. O fio de luz de toda peca acende na
      quina virada para ela e apaga ao contornar. Nada na tela pode discordar.

   2. O VIDRO ESCURECE o que esta atras, nao clareia. Ele deixa passar; o
      pouco de claro que sobra e a luz raspando a quina de cima.

   3. POUCO BORRAO. Quem quebra a imagem e a REFRACAO — um feDisplacementMap
      empurrando o fundo em ondas largas. Borrao alto faz a media da cena e
      devolve um cinza liso, e ai nao ha vidro nenhum: ha um retangulo.

   4. NENHUMA COR. O que era verde, amarelo e azul virou degrau de opacidade.
      Vermelho fica, e so para alarme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. A CENA

   Fica FIXA atras de tudo e nao rola com a pagina: o conteudo passa na frente
   dela como quem anda diante de uma janela. Rolando junto, o efeito vira
   papel de parede.

   O veu quase nao modela — a cena ja tem gradiente proprio. Ele so abaixa o
   nivel para o texto ter onde pousar, e fecha as laterais.
   -------------------------------------------------------------------------- */
body { background: var(--pedra); }

.cena {
  position: fixed;
  inset: 0;
  /* z-index NEGATIVO, e nao zero.

     Com zero a cena e um elemento POSICIONADO, e elemento posicionado pinta
     acima de bloco estatico — ela cobria o texto de toda secao que nao
     tivesse position propria. A dobra da home sumiu inteira desse jeito.
     Em -1 ela vai para tras de tudo e nao depende de ninguem declarar
     z-index para aparecer. */
  z-index: -1;
  pointer-events: none;
  background-image: var(--cena);
  background-size: cover;
  background-position: 50% 50%;
}
.cena::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 78% at -6% 42%, rgba(0, 0, 0, 0.66), transparent 66%),
    radial-gradient(38% 74% at 106% 52%, rgba(0, 0, 0, 0.58), transparent 66%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.48) 46%, rgba(0, 0, 0, 0.64) 100%);
}
/* NO DIA NAO HA CENA, E POR ISSO NAO HA VEU.

   O veu existe para abaixar o nivel da imagem e o texto ter onde pousar. Com
   --cena: none (tokens.css) nao ha imagem, e o veu passaria a ser um filtro
   cinza sobre o chao liso — escurecendo justamente o branco que o tema claro
   foi refeito para ter.

   A regra fica aqui, e nao sumiu, porque `.cena::after` continua existindo no
   escuro: apagar o bloco de cima levaria a noite junto. */
:root[data-theme="light"] .cena::after { background: none; }

/* --------------------------------------------------------------------------
   O RAIL ESCURO DO DIA

   A unica massa escura do tema claro, e a unica parte do esquema que nao sai
   de token: a `.sidebar` nasce TRANSPARENTE (ela se apoiava na cena), entao
   dar cor a ela e recolorir o que mora dentro precisa de regra propria.

   O escopo e por PECA, e nao `.sidebar *`, por causa de uma so: a
   `.dropdown-menu` da conta abre para FORA do rail, sobre a pagina clara.
   Ela e peca do dia e continua clara — pintar tudo que esta dentro do rail
   deixaria aquele menu com texto branco sobre fundo claro.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] .sidebar { background: var(--rail); }

:root[data-theme="light"] :is(.sidebar-head, .sidebar-foot) { border-color: var(--rail-fio); }

:root[data-theme="light"] .sidebar :is(.brand-name, .user-chip-name) { color: var(--rail-t1); }

:root[data-theme="light"] .sidebar :is(.nav-item, .nav-sub-item, .nav-exp > summary),
:root[data-theme="light"] .sidebar .btn-icon,
:root[data-theme="light"] .sidebar .sidebar-lang a { color: var(--rail-t2); }

/* .sidebar-lang entra aqui pelo CONTAINER, e nao pelos <a> de dentro: o
   rotulo "Idioma" e um no de texto solto na div, entao pintar so os links
   deixava a palavra em tinta do dia — preta sobre o rail preto. */
:root[data-theme="light"] .sidebar :is(.nav-group-title, .nav-sub-sep, .user-chip-role, .sidebar-lang) { color: var(--rail-t3); }

:root[data-theme="light"] .sidebar :is(.nav-item, .nav-sub-item, .nav-exp > summary, .btn-icon, .user-chip):hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--rail-t1);
}

/* O FIO DA QUINA — o unico lugar do rail onde a cor cheia aparece, e o mesmo
   papel que o risco branco tem no tema escuro.

   Ele reaproveita o ::before que o skin.css ja desenha, em vez de um
   box-shadow proprio, e por um motivo concreto: aquele ::before existe, e
   pinta `var(--branco)` — que no dia e TINTA ESCURA. Sobre o rail preto ele
   sumia e ainda cobria qualquer sombra que se tentasse pintar por baixo.
   Recolorir o que ja esta la resolve as duas coisas de uma vez. */
:root[data-theme="light"] .sidebar :is(.nav-item, .nav-sub-item).is-active {
  background: var(--rail-2);
  color: var(--rail-t1);
}
:root[data-theme="light"] .sidebar :is(.nav-item, .nav-sub-item).is-active::before { background: var(--agua-3); }
:root[data-theme="light"] .sidebar .is-active :is(.icon, svg) { color: var(--agua-3); }

/* A marca e o avatar sao a ACAO dentro do rail, e por isso levam a agua
   cheia — a mesma do botao principal. Antes levavam o tom mais escuro da
   rampa, que sobre o rail novo (#0e1c24) ficava a 1,7:1: duas manchas quase
   invisiveis no unico lugar da tela onde a identidade aparece. */
:root[data-theme="light"] .sidebar :is(.brand-mark, .avatar) {
  background: var(--action);
  color: var(--action-fg);
}
:root[data-theme="light"] .sidebar .segmented { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="light"] .sidebar .segmented a.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--rail-t1);
}
/* Sobre fundo escuro o aro do dia (cinza-claro) vira risco. */
:root[data-theme="light"] .sidebar :is(.avatar, .segmented, .btn-icon)::before { background: var(--rail-fio); }

/* A gaveta da conta volta a ser peca do dia. */
:root[data-theme="light"] .sidebar .dropdown-menu .dropdown-item { color: var(--t-2); }
:root[data-theme="light"] .sidebar .dropdown-menu .dropdown-item:hover { color: var(--t-1); }

/* --------------------------------------------------------------------------
   O CABECALHO DE COLUNA

   O problema dele no dia era um so: `.table th` pinta com --t-4, que aqui e
   preto a 42% num rotulo de 10px em CAIXA ALTA com 0.13em de espacamento. A
   linha de titulo das colunas praticamente sumia dentro do cartao claro.

   ELE NAO LEVA FUNDO ESCURO. Chegou a levar — a cor do rail — e o efeito
   dentro de um cartao era bom, mas na listagem de largura cheia (.table-flush,
   que ocupa a tela toda) aquilo virava uma faixa preta atravessando a pagina:
   peso de moldura numa peca que e so um rotulo. Uma decisao que funciona numa
   largura e nao funciona na outra nao e uma decisao boa.

   O que resolve sem pesar: a tinta sobe um degrau e a linha de baixo do
   cabecalho fica mais forte que a das linhas de dado. A separacao passa a
   vir da REGUA, que e o recurso que a tabela ja usa.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] :is(.table, .table-flush) th {
  color: var(--t-3);
  border-bottom-color: var(--l-2);
}

/* --------------------------------------------------------------------------
   O CHAO QUASE BRANCO E A CAIXA BRANCA

   O tokens.css entrega a paleta. Estas sao as pecas que nao saem de token,
   porque no tema escuro elas nunca foram problema: la o chao ja e escuro e
   tudo sobe dele. Cada regra abaixo esta amarrada a uma das quatro escritas
   em cima do bloco :root[data-theme="light"].
   -------------------------------------------------------------------------- */

/* REGRA 3 — A LINHA DE DENTRO DE UMA LISTA.
   .record, .info-row e .est-li sao SEMPRE linha de dentro, morem elas num
   cartao branco ou apoiadas no chao — e por isso saem da regra escopada
   abaixo e vem antes, sem escopo nenhum.

   O ganho e nos dois lugares ao mesmo tempo: dentro do cartao branco, --l-0
   e a linha certa (--l-1 riscaria a peca a cada item); apoiadas no chao, ele
   e claro o bastante para quase sumir, que e exatamente o peso que a coluna
   da direita pede — ali quem separa uma linha da outra e o respiro, nao a
   regua. */
:root[data-theme="light"] :is(.record, .info-row, .est-li) { border-color: var(--l-0); }

/* A COLUNA DA DIREITA VIROU CAIXA, E A TOPBAR GANHOU FUNDO PROPRIO.
   As duas nasceram sem fundo, apoiadas no painel de conteudo — a coluna era
   literalmente "a que nao e caixa". Agora ela e branca sobre o chao quase
   branco, separada pelo fio da esquerda, e a topbar declara o seu em vez de
   herdar por color-mix.

   O background-color da topbar e declarado aqui e nao no skin.css porque la
   ele vem de um color-mix com transparencia, pensado para o borrao do tema
   escuro. No dia nao ha borrao (--blur e 0), entao aquilo so encarecia o
   calculo para chegar na mesma cor. */
:root[data-theme="light"] .detail-side {
  background: var(--side-bg);
  border-left-color: var(--side-border);
}
:root[data-theme="light"] .topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--topbar-border);
}

/* AS FITAS DE AVISO PELA MESMA RAZAO DA TOPBAR.
   No skin.css elas ganharam chao de --pedra com transparencia, feito para o
   borrao do tema escuro. Aqui --blur e 0 e --pedra e o proprio chao da pagina:
   82% de uma cor opaca sem borrao nenhum continua deixando a tabela passar por
   tras. Entao no dia o chao vira chapa, exatamente como o da topbar.

   So o background-COLOR e trocado. O verniz da fita mora no background-image e
   sobrevive a esta regra — e ele que continua diferenciando "voce esta dentro
   de outra organizacao" de uma topbar comum. */
:root[data-theme="light"] :is(.impersonation-bar, .billing-bar) {
  background-color: var(--topbar-bg);
}

/* REGRA 3 — E A LINHA DE DENTRO DE UMA PECA.
   .card-head, .card-foot e a linha de tabela pedem --border, que e a linha
   do CHAO (#ebebeb): dentro de um cartao branco ela e forte demais e
   redesenha o contorno da peca a cada linha — uma lista de oito itens le
   como oito caixas empilhadas. Escopadas na peca, vao para --l-0.

   Fora do cartao a linha CONTINUA em --border, e isso e proposital: a
   listagem de largura cheia se apoia no chao, e ali a regua precisa do peso
   maior para vencer o fundo. E a regra 3 inteira num par de seletores — por
   dentro clareia, por fora escurece.

   `border-color` e nao o atalho: `.table tbody tr:last-child td` desliga a
   borda com `border-bottom: none`, e style:none nao pinta cor nenhuma — a
   ultima linha continua sem regua, como sempre esteve. */
:root[data-theme="light"] :is(.card, .kpi, .pane, .modal, .est-panel) :is(
  .card-head, .card-foot, .table td, .meta-table .fee-head, .est-panel-hd, .est-tot
) { border-color: var(--l-0); }

/* E O RISCO QUE SEPARA O "X" DO CHIP DE FILTRO.
   .chip-x pede --border para o fio vertical que separa o valor do botao de
   remover. Sobre o branco do chip aquela linha e fraca demais e o "x" passa
   a parecer parte do texto — justo no unico ponto clicavel de dentro da
   peca. Ele sobe para a borda de controle. */
:root[data-theme="light"] .chip-f .chip-x { border-left-color: var(--l-2); }

/* REGRA 1 — A LINHA EXPANDIDA DA TABELA VOLTA A SER TINTA.
   tr.row-detail pinta --card para ficar um degrau acima da tabela. Com
   --card virando BRANCO neste esquema, a linha aberta ficava da cor exata do
   cartao em volta: ela abria e nao aparecia. --surface-2 e o degrau que ela
   sempre quis — o mesmo --n-2 de antes, agora sem o apelido que mudou de
   natureza. */
:root[data-theme="light"] tr.row-detail > td,
:root[data-theme="light"] tr.row-detail:hover > td { background: var(--surface-2); }

/* REGRA 3 — O FIO DO SUBMENU MORA NO RAIL, E O RAIL E ESCURO.
   .nav-sub pede --l-1 para a guia vertical dos sub-itens — uma linha clara
   pensada para correr sobre o chao do dia. Dentro da faixa preta ela vira um
   risco aceso do lado do menu; --rail-fio e o mesmo fio de 10% que o resto
   do rail ja usa. */
:root[data-theme="light"] .nav-sub { border-left-color: var(--rail-fio); }

/* REGRA 1 — O CARTAO DO QUADRO E UMA CAIXA, ENTAO ELE E BRANCO.
   O skin.css pinta .board-card com --n-2 e esta certo no escuro: la a coluna
   e o chao e o cartao sobe um degrau de branco. Aqui a coluna JA e o chao, e
   o mesmo degrau desceu — o cartao ficava mais ESCURO que a coluna que o
   segura, que e o contrario do que o quadro inteiro quer dizer.

   E o hover nao muda a cor: ele LEVANTA. Escurecer no hover suja um cartao
   branco; crescer a sombra e o gesto que combina com uma peca que se
   arrasta — e neste esquema a sombra ja e quem desenha tudo. */
:root[data-theme="light"] .board-card {
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .board-card:hover {
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

/* REGRA 1 — E O CHIP DE FILTRO E UM CONTROLE, ENTAO ELE E BRANCO TAMBEM.
   .chip-f nao carrega a classe .chip, entao ele escapava da regra do botao
   secundario mais abaixo e continuava com o preenchimento da escada: numa
   barra de filtros ele ficava sendo a unica peca tingida no meio de chips
   brancos. */
:root[data-theme="light"] .chip-f { background: var(--btn-secondary-bg); }

/* REGRA 2 — OS DOIS BOX-SHADOW ESCRITOS NA MAO.
   Os outros onze saem de --shadow-*, entao seguem a sombra leve do tema sem
   fazer nada. Estes dois tem o valor cru na regra: o print da home
   (site.css) carrega 0.7 de preto e o menu de busca (components.css) 0.55 —
   os dois desenhados para uma tela escura. Aqui eles viram a mesma sombra
   das outras pecas. */
:root[data-theme="light"] :is(.shot, .menu) { box-shadow: var(--shadow-lg); }

/* O QUE FLUTUA GANHA BORDA, E E A UNICA EXCECAO DA REGRA 2.
   O cartao nao tem contorno porque ele esta APOIADO — ele nao precisa provar
   que esta na frente de nada. .dropdown-menu e .combo-list abrem POR CIMA de
   uma lista, e as duas sao brancas: abertas sobre um cartao branco, sobra so
   a sombra para dizer onde uma acaba e a outra comeca, e nessa faixa de
   opacidade ela nao da conta. As duas sobem para a borda de controle, que e
   a mesma que o .menu ao lado delas ja usa. */
:root[data-theme="light"] :is(.dropdown-menu, .combo-list)::before {
  background: var(--btn-secondary-border);
}

/* --------------------------------------------------------------------------
   BOTAO SECUNDARIO: BORDA DE VERDADE

   `.btn-secondary` nasce com `border: 0` (skin.css) e conta com o aro de
   luz do ::before para ter contorno. Sobre um chao escuro isso basta. Sobre
   o dia, um preenchimento de 5% com um aro quase branco em volta virava uma
   mancha sem forma — era o que fazia "Edit", "Delete" e "Apply template"
   lerem como texto solto em vez de botao.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] :is(.btn-secondary, .btn-icon, .chip) {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
}
:root[data-theme="light"] :is(.btn-secondary, .btn-icon, .chip):hover:not(:disabled) {
  background: var(--btn-secondary-bg);
  border-color: var(--l-3);
}
/* Com borda propria, o aro do vidro vira uma segunda linha em cima da
   primeira — duas bordas de 1px na mesma peca. */
:root[data-theme="light"] :is(.btn-secondary, .btn-icon, .chip)::before { display: none; }

/* E O QUE ESTA LIGADO TEM QUE CONTINUAR ACESO.
   A regra acima pega `.chip` inteiro e leva ele para o branco — inclusive o
   chip LIGADO, que se acende com --surface-3 la no components.css e perdia
   por especificidade. O efeito na tela era o pior tipo de defeito silencioso:
   "Este mes" ficava identico a "Ativos", ou seja, o filtro aplicado deixava
   de aparecer como aplicado. O mesmo valia para o .btn-icon.is-active.

   O degrau aceso e o mesmo do sistema (--surface-3, que aqui e o azul da
   escada a 14%): nao e uma cor nova, e o degrau que o resto da tela ja usa
   para dizer "isto esta ativo". */
:root[data-theme="light"] :is(.chip.is-on, .btn-icon.is-active) {
  background: var(--surface-3);
  border-color: var(--l-3);
  color: var(--t-1);
}

/* MENOS O QUE MORA NO RAIL.
   A regra de cima vale para a pagina clara, e o rail e a excecao escura
   dentro dela: aplicada la, ela desenhava um botao BRANCO no meio do preto —
   o recolher da marca e o "..." da conta viravam duas bolas acesas. Peca
   escura pede contorno claro, e nao o contrario. */
:root[data-theme="light"] .sidebar :is(.btn-icon, .chip) {
  background: transparent;
  border-color: transparent;
}
:root[data-theme="light"] .sidebar :is(.btn-icon, .chip):hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--rail-fio);
}

/* --------------------------------------------------------------------------
   O BOTAO PRINCIPAL, EM AGUA

   `.btn-primary` pinta `var(--branco)` cravado no skin.css — nao `--action` —,
   e a razao esta escrita la em cima: no escuro o primario e "a unica massa
   OPACA da tela; ele nao tem cor, so e o mais claro que existe". Trazido para
   o dia, --branco vira tinta quase preta, e a acao principal ficava um
   retangulo preto — a mesma coisa que um botao desabilitado escuro.

   Aqui ele ganha a agua. O gesto continua o mesmo (uma massa cheia, sozinha
   na tela), so que agora ela diz de que sistema e.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] .btn-primary { background: var(--action); color: var(--action-fg); }
:root[data-theme="light"] .btn-primary:hover:not(:disabled) { background: var(--action-hover); color: var(--action-fg); }

/* --------------------------------------------------------------------------
   CAMPO BRANCO

   base.css pinta input/select/textarea com --surface-2, que no dia e tinta a
   5% — ou seja, a MESMA cor do cartao em que o campo esta. O contorno ficava
   sozinho segurando a leitura de "aqui se escreve".

   Branco resolve e ainda cria a terceira camada que faltava: chao (#f7f9fa),
   cartao (#eef2f3), campo (#ffffff). Checkbox e radio ficam de fora — eles
   tem desenho proprio e ja tem override no skin.css.

   background-COLOR, e NAO o atalho `background`: o <select> desenha a setinha
   com um background-image (base.css), e o atalho zera a imagem junto — o
   campo fica branco e perde o chevron. Foi exatamente o que aconteceu na
   primeira tentativa, e so apareceu olhando a tela renderizada.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea
) { background-color: var(--field); }

/* E A BORDA DELE E A DE CONTROLE, NAO A DO CARTAO.
   skin.css fecha input/select/textarea em --l-1, que aqui e a borda do
   CARTAO (1,37:1 sobre o branco) — a linha mais fraca do sistema em volta
   justamente da peca que precisa dizer "aqui se escreve". --l-2 e a borda de
   controle, a mesma do botao secundario e do chip que ficam na mesma fila.

   Os tres estados vem juntos de proposito. So a primeira regra deixaria as
   outras duas do skin.css valendo com os valores antigos, e ali o hover
   caia em --l-2 — que agora e a borda de REPOUSO: o campo passaria a nao
   reagir ao ponteiro. E o foco vai para --focus-ring, e nao para mais um
   cinza: o campo desliga o anel de fora (skin.css), entao a borda dele e o
   unico aviso de foco que existe. */
:root[data-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, .chip-f
) { border-color: var(--input-border); }
:root[data-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, .chip-f
):hover { border-color: var(--l-3); }
:root[data-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea
):focus { border-color: var(--focus-ring); }

/* Nenhum container precisa de position: com a cena em z-index -1, ela ja esta
   atras de tudo.

   E era importante NAO por: `position: relative` num container que segura uma
   peca com backdrop-filter faz o navegador amostrar o fundo dentro do novo
   bloco de contencao, e sobra uma emenda de 1px na borda do container. Na home
   isso desenhava uma moldura em volta da coluna inteira.
   */

/* O filtro de refracao mora no HTML (cena_html(), em lib/helpers.php) e nao
   deve ocupar espaco nenhum. */
.refracao-def { position: absolute; width: 0; height: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   2. O VIDRO

   Uma receita, aplicada a tudo que e MOLDURA: cartao, KPI, modal, menu,
   painel de proposta. Nunca embaixo de tabela ou de texto corrido.

   O `backdrop-filter` aparece DUAS vezes de proposito. A primeira linha e o
   borrao puro; a segunda acrescenta a refracao. Navegador que nao entende
   filtro SVG em backdrop-filter fica com a primeira e continua tendo vidro —
   uma linha so, com o url() dentro, cairia inteira.
   -------------------------------------------------------------------------- */
.card,
.kpi,
.modal,
.dropdown-menu,
.menu,
.combo-list,
.pane,
.shot,
.preco,
.plan,
.cta-fim,
.est-panel,
.summary-box,
.savings-box,
.lock-notice {
  position: relative;
  background: var(--vidro);
  border: 0;
  -webkit-backdrop-filter: blur(var(--blur-alto)) saturate(112%);
  backdrop-filter: blur(var(--blur-alto)) saturate(112%);
  backdrop-filter: blur(var(--blur)) saturate(112%) url(#refracao);
  box-shadow: var(--shadow-lg);
}

/* NO DIA A PECA E OPACA, ENTAO NAO HA FUNDO PARA FILTRAR.
   O --vidro do tema claro e uma cor chapada: ela cobre o box inteiro, e o
   backdrop-filter fica invisivel — mas continua rodando o feTurbulence da
   refracao em CADA cartao da tela. Desligar aqui nao muda um pixel e devolve
   a GPU. Fica junto da receita, e nao no fim do arquivo, para quem mexer no
   vidro ver as duas coisas de uma vez. */
:root[data-theme="light"] :is(
  .card, .kpi, .modal, .dropdown-menu, .menu, .combo-list, .pane, .shot,
  .preco, .plan, .cta-fim, .est-panel, .summary-box, .savings-box, .lock-notice
) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* OS TRES QUE FLUTUAM.
   A regra acima poe position: relative em todas as pecas de vidro — ela
   precisa de um bloco de contencao para o ::before que desenha o aro. Para
   .dropdown-menu, .menu e .combo-list isso era um estrago: os tres nascem
   position: absolute no components.css justamente para ABRIR POR CIMA, e
   devolvidos ao fluxo passaram a EMPURRAR o que esta em volta — o menu de um
   filtro esticava a barra inteira em vez de descer sobre ela, e o mesmo valia
   para todo dropdown e todo combo do sistema.

   absolute tambem estabelece bloco de contencao, entao o aro continua certo.
   Esta regra vem depois de proposito: e ela que tem a ultima palavra. */
.dropdown-menu,
.menu,
.combo-list {
  position: absolute;
  /* E TAMBEM O UNICO GRUPO QUE PRECISA OCULTAR.
     O --vidro do tema escuro e quase transparente (0.035 de branco por cima,
     0.15 de preto por baixo) e o borrao e de 2.5px de proposito: quem quebra
     a imagem e a refracao, nao o borrao. Isso funciona para uma peca apoiada
     na CENA — atras dela ha um predio fora de foco, e ver o predio e o ponto.

     Atras de um menu ha TEXTO. Enquanto os tres viviam no fluxo (o bug de
     position acima) nunca havia nada por baixo e a transparencia nao
     aparecia; assim que passaram a flutuar de verdade, a lista de baixo
     comecou a atravessar o menu e as duas viraram uma so, ilegivel.

     Entao aqui a base e OPACA — sem color-mix, sem alfa, sem depender de o
     backdrop-filter ter pegado — e o --vidro fica so como verniz por cima: o
     degrade e o aro de luz continuam, o material continua o mesmo, mas o que
     esta atras para de ser assunto. Menu e a unica peca do sistema em que
     legibilidade ganha de transparencia, porque atras dela nunca ha cena:
     ha a lista que a pessoa esta tentando filtrar. */
  background-image: var(--vidro);
  background-color: var(--pedra);
  -webkit-backdrop-filter: blur(var(--blur-alto)) saturate(112%);
  backdrop-filter: blur(var(--blur-alto)) saturate(112%);

  /* ACIMA DA TABELA, SEMPRE.
     .table-wrap e .table th sao position: relative e vem DEPOIS na marcacao;
     entre elementos posicionados, quem vem depois pinta por cima. O z-index
     de 20 que o menu tinha empatava com a topbar e perdia dessa disputa em
     parte das telas — e o resultado era o texto da tabela atravessando o
     menu, nitido (nitido porque ele estava por CIMA: se estivesse por baixo,
     o backdrop-filter o teria borrado). 40 fica acima da tabela e da gaveta
     do celular (35), e abaixo do modal (50), que tem que cobrir tudo. */
  z-index: 40;
}

/* E o ENVELOPE do menu sobe junto. Um ancestral posicionado com z-index
   automatico deixa o filho preso na ordem de marcacao; com z-index proprio
   ele vira uma camada, e o menu inteiro sobe com ele. Sem isto, elevar so o
   menu resolve numa tela e falha na seguinte, conforme o que estiver
   posicionado em volta. */
.add-filtro,
.chip-f,
.dropdown,
.combo { z-index: 40; }

/* E O ABERTO SOBE MAIS UM DEGRAU.
   Os quatro acima empatam em 40, e empate se resolve pela ordem da marcacao:
   quem vem depois pinta por cima. Enquanto a barra de filtros cabe numa linha
   isso nao aparece — os controles ficam lado a lado e o menu desce para baixo
   de todos eles. Quando a barra QUEBRA (.toolbar-filtros e flex-wrap: wrap, e
   tres ou quatro chips ja bastam), o chip da linha de baixo cai exatamente em
   cima do menu aberto do chip da linha de cima, e rouba o clique do primeiro
   item — o item fica visivel e nao responde.

   45 poe o aberto acima dos irmaos e continua abaixo do modal (50), que tem
   que cobrir tudo. So um deles fica aberto por vez, entao nao ha empate novo
   a resolver aqui. */
.chip-f.is-aberto,
.add-filtro.is-aberto,
.dropdown.is-open,
.combo.is-open { z-index: 45; }

/* O SINO E OS OUTROS MENUS DA TOPBAR PRECISAM QUE A TOPBAR SUBA JUNTO.
   Aqui esta o motivo de o painel de notificacoes "vazar" em toda tela de
   listagem: a .topbar e um CONTEXTO DE EMPILHAMENTO fechado (z-index 20 no
   layout.css, e o backdrop-filter do vidro criaria um mesmo sem ele). Dentro
   de um contexto fechado, z-index de filho nao vale para fora: o 45 da regra
   acima ordena o menu do sino em relacao aos irmaos dele DENTRO da topbar, e
   perante o resto da pagina o painel inteiro continua valendo 20.

   E logo abaixo da topbar mora a barra de filtros, cujos chips, combos e
   dropdowns valem 40 e 45. O painel do sino desce 300px por cima deles e
   perde de todos — o texto dos chips atravessa o painel e as duas coisas
   viram uma so, ilegivel. Nao e transparencia: o painel e opaco. E ordem.

   Entao quem sobe e a topbar, e so enquanto ha menu aberto nela. 46 passa a
   frente do aberto da barra (45) e continua atras do modal e do voo da
   lateral (50), que tem que cobrir tudo. Fechou o menu, ela volta para 20 e
   o conteudo volta a rolar por cima dela como sempre.

   O :focus-within acompanha o fallback sem JavaScript do components.css — la
   o menu abre pelo foco do botao, e sem esta metade ele abriria vazando de
   novo justamente onde nao ha script para consertar nada. */
.topbar:has(.dropdown.is-open),
.topbar:has(.dropdown:focus-within) { z-index: 46; }

/* PAINEL SOLIDO — as telas de estimativa.

   Ali convivem duas pecas: a tabela de taxas (.fee-table), que nunca entrou
   na familia do vidro e por isso e opaca, e os cartoes normais, que sao
   translucidos. Lado a lado, o cartao de vidro ao lado de uma tabela opaca
   nao le como "outro material": le como cartao SEM FUNDO, defeito e nao
   escolha. Aquela tela e a mais densa do sistema — dez blocos de numeros
   empilhados —, e densidade e onde a transparencia cobra mais caro.

   O QUE A .fee-table TEM E O CARTAO NAO: um realce CLARO. Ela usa --card,
   que e branco a 6.2% — uma superficie levantada acima do fundo. O --vidro do
   cartao vai no sentido contrario (3.5% de branco no topo descendo para 15%
   de preto), e sobre a cena escura esse degrade desaparece. Nao e questao de
   opacidade: e que uma peca sobe e a outra desce.

   Entao aqui o cartao passa a usar a mesma superficie da tabela de taxas. O
   aro de luz, a sombra e o borrao continuam — muda so o sentido do degrau.

   Vale so nesta tela (a classe esta no <main> de estimate.php e
   estimate_new.php). Para valer no sistema inteiro, e tirar o prefixo
   .painel-solido daqui. */
.painel-solido .card,
.painel-solido .kpi,
.painel-solido .est-panel,
.painel-solido .summary-box,
.painel-solido .savings-box {
  background-image: none;
  background-color: var(--card);
}

/* Navegador sem backdrop-filter recebe superficie opaca: sem ele, um cartao
   quase transparente sobre a cena vira texto solto em cima de um predio. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, .kpi, .modal, .dropdown-menu, .menu, .combo-list,
  .pane, .shot, .preco, .plan, .cta-fim,
  .est-panel, .summary-box, .savings-box, .lock-notice {
    background: color-mix(in srgb, var(--pedra) 84%, transparent);
  }
  /* Os tres que flutuam seguem opacos aqui tambem: sem borrao nenhum, 84%
     deixaria a lista de baixo ainda mais legivel atraves do menu. */
  .dropdown-menu, .menu, .combo-list {
    background-image: var(--vidro);
    background-color: var(--pedra);
  }
}

/* --------------------------------------------------------------------------
   3. O FIO DE LUZ

   O que faz a peca existir. Sem preenchimento claro, ele e a UNICA coisa que
   a desenha — e por isso ele nao pode ser um traco de opacidade igual nos
   quatro lados: isso e um retangulo contornado, nao uma peca iluminada.

   O truque das duas mascaras e o que permite um degrade de 1px acompanhando
   o canto arredondado: a de fora pinta a peca inteira, a de dentro recorta o
   miolo, e o que sobra e exatamente o aro. `border-image` nao serve — ele
   ignora border-radius.
   -------------------------------------------------------------------------- */
.card::before,
.kpi::before,
.modal::before,
.dropdown-menu::before,
.menu::before,
.combo-list::before,
.pane::before,
.shot::before,
.preco::before,
.plan::before,
.cta-fim::before,
.est-panel::before,
.summary-box::before,
.savings-box::before,
.lock-notice::before,
.btn-secondary::before,
.chip::before,
.seg::before,
.segmented::before,
.avatar::before,
.tema-btn::before,
.topbar-actions .btn-icon::before,
.pilula::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--fio);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Peca pequena reflete menos: superficie curta, fio fraco. */
.btn-secondary::before,
.chip::before,
.seg::before,
.segmented::before,
.avatar::before,
.tema-btn::before,
.topbar-actions .btn-icon::before,
.pilula::before { background: var(--fio-curto); }

/* --------------------------------------------------------------------------
   4. FOCO — uma regra, valendo em toda a tela
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Dentro de tabela e de menu o anel de fora e cortado pelo overflow do
   container — ali ele vira uma borda por dentro. */
.table tbody tr:focus-visible,
.dropdown-item:focus-visible,
.menu-item:focus-visible,
.combo-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--foco);
}
::selection { background: rgba(255, 255, 255, 0.16); color: var(--t-1); }
:root[data-theme="light"] ::selection { background: rgba(29, 92, 122, 0.16); }

/* --------------------------------------------------------------------------
   5. BARRA DE ROLAGEM

   Fina e sem trilho. A barra grossa e cinza do padrao e o detalhe que mais
   entrega interface velha — e ela rouba 15px de largura de toda tabela.
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--l-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--l-3);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--t-4); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* --------------------------------------------------------------------------
   6. O BOTAO DE TEMA

   O tamanho vem escrito aqui porque .btn-icon mora no components.css, e as
   telas sem shell nao carregam aquele arquivo — o botao sairia sem forma
   nenhuma justamente onde ele e o unico controle da barra.

   Os dois icones ficam no HTML e o CSS acende um. Trocar o desenho por
   JavaScript faria o icone errado piscar em toda carga da pagina.
   -------------------------------------------------------------------------- */
/* Mesmo degrau do .btn-icon (--ctl-sm): na topbar ele fica na mesma fila que
   o botao da gaveta e o menu da linha, e 32 contra 28 fazia o unico botao
   sem rotulo da barra parecer o mais importante dela. */
.tema-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--ctl-sm);
  height: var(--ctl-sm);
  border: 0;
  border-radius: var(--r-md);
  background: var(--n-2);
  color: var(--t-2);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.tema-btn:hover { background: var(--n-3); color: var(--t-1); }

/* OS TRES DA DIREITA SAO A MESMA PECA, E AGORA SE PARECEM.
   Sino, calculadora e tema ficam lado a lado no fim da topbar e sao a mesma
   coisa: um icone sem rotulo, do sistema e nao da tela. So o de tema tinha
   fundo e fio; os outros dois nasciam transparentes e so apareciam no hover.
   Tres botoes vizinhos com dois acabamentos diferentes leem como um botao
   ligado e dois desligados — o que nenhum deles e.

   A regra e no .topbar-actions e nao no .btn-icon inteiro de proposito: o
   mesmo .btn-icon serve o gatilho da gaveta e o menu da linha da tabela, e
   esses continuam sem caixa, apoiados no que esta em volta. */
.topbar-actions .btn-icon {
  position: relative;
  background: var(--n-2);
  color: var(--t-2);
}
.topbar-actions .btn-icon:hover { background: var(--n-3); color: var(--t-1); }
/* O contador fica ACIMA do fio de luz (z-index 4 do ::before), senao a quina
   da bolinha some por baixo dele. */
.sino-marca { z-index: 5; }
.tema-btn .tema-sol { display: none; }
.tema-btn .tema-lua { display: block; }
:root[data-theme="light"] .tema-btn .tema-sol { display: block; }
:root[data-theme="light"] .tema-btn .tema-lua { display: none; }
.split-tema { margin-left: auto; }

/* ==========================================================================
   7. A TELA PARTIDA — login, cadastro, telas de senha e boas-vindas

   Metade formulario, metade cena. A cena ja esta no fundo da pagina inteira;
   o que esta metade faz e ABRIR uma janela nela — tirar o veu e deixar a
   cidade aparecer inteira de um lado so.
   ========================================================================== */
.split {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
}

.split-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-8) clamp(var(--s-6), 6vw, 72px);
  min-width: 0;
}
.split-in { width: 100%; max-width: 460px; margin: 0 auto; }

/* --- o lado da cena ------------------------------------------------------ */
.split-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-image: var(--cena);
  background-size: cover;
  background-position: 50% 62%;
}
/* Escurecimento vindo do lado do formulario: sem ele a emenda entre as duas
   metades e um corte duro no meio da tela. */
.split-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--pedra) 0%, color-mix(in srgb, var(--pedra) 45%, transparent) 12%, transparent 38%),
    linear-gradient(0deg, color-mix(in srgb, var(--pedra) 78%, transparent) 0%, transparent 44%);
}

/* A legenda que flutua sobre a cena. E o unico texto desse lado. */
.split-legenda {
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  margin: var(--s-8);
  max-height: calc(100vh - var(--s-10) * 2);
  overflow-y: auto;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--vidro);
  -webkit-backdrop-filter: blur(var(--blur-alto)) saturate(112%);
  backdrop-filter: blur(var(--blur-alto)) saturate(112%);
  backdrop-filter: blur(var(--blur)) saturate(112%) url(#refracao);
}
.split-legenda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--fio);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.split-legenda p {
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--t-1);
}
.split-legenda .lbl { display: block; margin-bottom: 10px; }

.lbl {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-4);
}

/* --- o resumo da compra, dentro do mesmo painel --------------------------- */
.resumo-plano {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--l-1);
}
.resumo-nome { font-size: var(--fs-16); font-weight: 500; color: var(--t-1); }
.resumo-valor {
  margin-left: auto;
  font-size: var(--fs-22);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--t-1);
  font-variant-numeric: tabular-nums;
}
.resumo-valor .plan-period { font-size: var(--fs-11); font-weight: 400; color: var(--t-3); margin-left: 3px; }

.resumo-benef { margin: var(--s-4) 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.resumo-benef li { display: flex; gap: 9px; font-size: var(--fs-12); line-height: 1.45; color: var(--t-2); }
.resumo-benef svg { flex: none; margin-top: 2px; color: var(--t-3); }

.resumo-total { padding-top: var(--s-4); border-top: 1px solid var(--l-1); }
.resumo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-13); color: var(--t-1); }
.resumo-linha strong { font-size: var(--fs-22); font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.resumo-depois { margin-top: 7px; font-size: var(--fs-12); color: var(--t-4); }

/* --- a marca acima do formulario ----------------------------------------- */
.split-marca { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-8); }
.split-marca-n { font-size: var(--fs-16); font-weight: 500; letter-spacing: -0.01em; color: var(--t-1); }
.split-selo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  background: var(--n-3);
  color: var(--t-1);
}

/* A frase e a UNICA serifa da tela: e o sistema falando com quem abriu. */
.split-h {
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--t-1);
}
.split-p { margin-top: var(--s-3); font-size: var(--fs-14); line-height: 1.6; color: var(--t-2); }
.split-nota { margin-top: var(--s-4); font-size: var(--fs-11); line-height: 1.6; color: var(--t-4); }
.split-rodape {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--l-1);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-12);
  color: var(--t-4);
}
.split-rodape a { color: var(--t-2); }
.split-rodape a:hover { color: var(--t-1); }

/* --- os campos -----------------------------------------------------------
   Duas colunas. `.e-largo` devolve o campo para a linha inteira — endereco e
   e-mail sao longos e ficam ilegiveis cortados ao meio. */
.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-5);
}
.campos > .e-largo { grid-column: 1 / -1; }
.campo label { display: block; margin-bottom: 7px; font-size: var(--fs-12); color: var(--t-2); }
.campo input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  background: var(--field);
  border: 1px solid var(--l-1);
  border-radius: var(--r-md);
  color: var(--t-1);
  font: inherit;
  font-size: var(--fs-14);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.campo input:hover { border-color: var(--l-2); }
.campo input:focus {
  outline: none;
  background: var(--field-2);
  border-color: var(--l-3);
}
/* O campo nao ganha o anel de foco da secao 4: aqui quem avisa e a borda, e
   os dois juntos desenhariam dois aneis concentricos. */
.campo input:focus-visible { outline: none; }
.campo input::placeholder { color: var(--t-4); }
.campo-dica { margin-top: 6px; font-size: var(--fs-11); color: var(--t-4); }

/* "Confiar neste dispositivo", na tela do segundo fator.
   O <label> envolve o checkbox inteiro para a area clicavel ser a frase, e
   nao o quadradinho de 16px — num celular, acertar so o quadrado e o tipo de
   alvo que faz a pessoa desistir e digitar o codigo todo dia. */
.campo-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: var(--s-4) 0;
  font-size: var(--fs-13);
  color: var(--t-2);
  cursor: pointer;
}
.campo-check input { flex: none; margin: 0; }
.campo-check:hover { color: var(--t-1); }

.btn-vidro { background: var(--n-2); border: 0; color: var(--t-1); }
.btn-vidro:hover { background: var(--n-3); }

.split-erro {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: var(--s-5);
  background: var(--alarme-bg);
  border: 1px solid color-mix(in srgb, var(--alarme) 42%, transparent);
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--t-1);
}
.split-erro svg { flex: none; margin-top: 2px; color: var(--alarme); }
/* O aviso nao e erro: ele volta para o cinza do sistema. */
.split-aviso { background: var(--n-2); border-color: var(--l-2); }
.split-aviso svg { color: var(--t-2); }

/* --- as duas etapas do cadastro ------------------------------------------- */
.passos {
  display: flex;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-4);
}
.passos li { display: flex; align-items: center; gap: var(--s-3); }
.passos li + li::before { content: ""; width: 20px; height: 1px; background: var(--l-2); }
.passos li.is-agora { color: var(--t-1); }
.passos li.is-feito { color: var(--t-2); }

/* --- a entrada da tela ---------------------------------------------------- */
@keyframes vidro-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.split-in > * { animation: vidro-sobe 0.55s cubic-bezier(0.22, 0.68, 0.3, 1) both; }
.split-in > *:nth-child(2) { animation-delay: 0.06s; }
.split-in > *:nth-child(3) { animation-delay: 0.12s; }
.split-in > *:nth-child(4) { animation-delay: 0.18s; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-art { order: -1; min-height: 190px; }
  .split-legenda { margin: var(--s-5); padding: var(--s-4) var(--s-5); }
  /* No celular o resumo da compra vai para DEPOIS do formulario: uma lista de
     sete beneficios acima dos campos empurra o primeiro campo para fora da
     dobra, que e o defeito que esta tela veio consertar. */
  .split-art:has(.resumo-total) { order: 1; min-height: 0; }
  .split-art:has(.resumo-total) .split-legenda { max-height: none; }
  .split-form { justify-content: flex-start; padding: var(--s-8) var(--s-5) var(--s-10); }
}
@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; }
  .split-art:not(:has(.resumo-total)) .split-legenda { display: none; }
}

/* ==========================================================================
   8. A HOME
   ========================================================================== */
.nav {
  background: color-mix(in srgb, var(--pedra) 52%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-alto)) saturate(115%);
  backdrop-filter: blur(var(--blur-alto)) saturate(115%);
  backdrop-filter: blur(var(--blur)) saturate(115%) url(#refracao);
  border-bottom: 1px solid var(--l-1);
}
.nav-brand { font-weight: 500; letter-spacing: -0.01em; }

/* A frase da dobra e a UNICA serifa da home. */
.hero h1, .site-hero h1 {
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.sec-h, .cta-fim h2 { font-weight: 500; letter-spacing: -0.02em; }

.sec-tag, .site-section-title, .preco-titulo-grupo, .mk-kpi-t, .shot-url {
  font-weight: 400;
  letter-spacing: 0.13em;
}

/* Todo numero grande e peso 300 e tabular. Corpo alto com peso baixo e o que
   da o ar de calma; tabular e o que impede a coluna de dancar. */
.faixa-n, .preco-n, .plan-amount, .mk-kpi-v, .resumo-valor, .pay-plano-v {
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.shot-bar { background: var(--n-2); border-bottom-color: var(--l-1); }
.mk-kpi, .mk-card { background: var(--n-1); border-color: var(--l-1); }

/* O tique de "incluso" e a barra de "bateu a meta" do print eram verde de
   STATUS. Verde ali nao e status coisa nenhuma — e afirmacao — e agora ela
   se diz em branco, como o resto da tela. */
.mk-bar { background: var(--n-3); }
.mk-bar.bateu { background: var(--branco); opacity: 0.9; }
.mk-kpi-d { color: var(--t-2); }
.mk-pill.ok { background: var(--n-3); color: var(--t-1); }
.duo-li svg, .preco-li svg, .resumo-benef svg, .plan-li svg { color: var(--t-3); }
.preco-trial, .plan-trial { color: var(--t-2); }
.preco-selo { background: var(--n-3); border-color: var(--l-2); color: var(--t-1); top: var(--s-5); left: auto; right: var(--s-6); }
.preco-li.mudo svg { color: var(--t-4); }
.preco { overflow: hidden; }

.site-foot { border-top-color: var(--l-1); }

/* ==========================================================================
   9. A PROPOSTA DO CLIENTE (public.css)

   A unica tela que uma pessoa de fora abre. Mesmo material, mesma disciplina:
   moldura de vidro, numero opaco. Quem esta lendo ali esta conferindo
   dinheiro.
   ========================================================================== */
.est-panel-hd, .est-tot { border-color: var(--l-1); }
.est-li { border-bottom-color: var(--l-1); }
.container .kpi-highlight { background: var(--n-2); }

.kpi-val, .savings-val, .est-tot span:last-child, .sched-row-val {
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kpi-tag, .savings-tag {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-4);
}
.savings-val { color: var(--t-1); }
.sched-row-val.free, .sched-row-val.is-free { color: var(--t-1); }
.sched-detail-li span.is-credit { color: var(--t-1); }
.sched-free-tag { background: var(--n-3); color: var(--t-1); }

.lang-bar { background: var(--n-2); border: 0; }
.lang-btn.active, .lang-btn[aria-pressed="true"] { background: var(--n-3); }

.public-header { border-color: var(--l-1); }
.public-header h1, .public-community { font-weight: 500; letter-spacing: -0.015em; }
.access-gate .access-title {
  font-family: var(--serifa);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   10. QUEM PEDIU MENOS MOVIMENTO, E QUEM PEDIU MENOS TRANSPARENCIA
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Transparencia e preferencia de acessibilidade em macOS, iOS e Windows, e
   quem a desliga faz isso porque camada sobre camada atrapalha a leitura.
   Aqui o vidro sai inteiro e as superficies viram opacas — a escada de
   opacidade continua valendo, so que ja resolvida. */
@media (prefers-reduced-transparency: reduce) {
  .cena { display: none; }
  /* Quem desligou transparencia no sistema pediu justamente para nao ter
     camada sobre camada: o menu e o caso mais gritante disso, entao ele fica
     100% opaco em vez dos 94% do resto. */
  .dropdown-menu, .menu, .combo-list { background: var(--pedra) !important; }
  .card, .kpi, .modal, .dropdown-menu, .menu, .combo-list, .pane, .shot,
  .preco, .plan, .cta-fim, .est-panel, .summary-box, .savings-box,
  .lock-notice, .split-legenda, .nav, .topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--pedra) 88%, var(--t-1) 6%);
  }
}