/* calculadora.css - base e telas da Calculadora de Economia Tributária (projeto v10, seção 0: fundo azul-marinho com o degradê parado e a pergunta num cartão branco).
 * A página de venda (efeitos, painel, cartões) está em css/pagina-nova-v11.css.
 * Identidade do site do escritório (azul-marinho, dourado e DM Sans; nenhuma fonte com serifa, ordem do Rogério de 03/11/2026), copiada de public/index.html.
 * Tamanhos: texto normal 16 a 18px no computador, 16px no celular, nada abaixo de 14px (bloco 10 dos parâmetros e PADRAO-MOBILE.md).
 * Celular = até 559px. Espaços na grade de 8px. Nenhum white-space: nowrap em linha de texto.
 * Só se anima posição e transparência (transform e opacity). A versão anterior está em previa-calculadora/antes-v11. */

:root {
  --marinho: #0c1b3a;
  --azul-forte: #123a82;
  --roxo: #5b3fd6;
  --ouro: #c9933a;
  --ouro-claro: #daa853;
  --ouro-borda: #a97618;
  --bege: #efeee9;
  --branco: #ffffff;
  /* Dentro do cartão branco das telas */
  --navy: #ffffff;
  --navy2: #ffffff;
  --navy3: #ffffff;
  --borda: #c3cde0;
  --borda-campo: #6f7f9f;
  --ouro-fundo: rgba(201, 147, 58, .16);
  --texto: #0c1b3a;
  --azul: #123a82;
  --cinza: #33425f;
  --erro: #b3261e;
  --desligado-fundo: #e4e8f0;
  --desligado-texto: #4a5875;
  /* Sobre o fundo escuro */
  --claro: #ffffff;
  --claro-suave: #dbe3f3;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --curva-entrada: cubic-bezier(0.05, 0.7, 0.1, 1);
  --curva-troca: cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; background: var(--marinho); }
body {
  background: var(--marinho); color: var(--texto); font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column;
}
/* Sem z-index no main: com z-index ele vira uma camada própria e prende a barra de AVANÇAR (z-index 20) dentro dela, e o rodapé, que vem depois, passava por cima e engolia o clique. */
main { flex: 1 0 auto; position: relative; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Fundo das telas da calculadora: azul-marinho com o degradê parado. Na página de venda ele fica escondido (cada bloco tem o seu fundo). Se o desenho falhar, fica o azul-marinho. */
.fundo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--marinho);
  background-image:
    radial-gradient(60% 55% at 12% 8%, rgba(18, 58, 130, .95), rgba(18, 58, 130, 0) 70%),
    radial-gradient(50% 50% at 92% 18%, rgba(91, 63, 214, .45), rgba(91, 63, 214, 0) 70%),
    radial-gradient(45% 40% at 78% 96%, rgba(18, 58, 130, .8), rgba(18, 58, 130, 0) 70%);
}
body:has(#venda:not([hidden])) .fundo { display: none; }

:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
.topo :focus-visible, .abertura :focus-visible, .fecho :focus-visible, .rodape :focus-visible, .acoes :focus-visible { outline-color: #ffffff; }

.ctr { max-width: 1288px; margin: 0 auto; padding: 0 16px; }   /* 1240 px de conteúdo mais 24 px de margem de cada lado */

/* ------------------------------------------------------------------ cabeçalho */
.topo { position: relative; z-index: 6; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.topo-in { max-width: 1288px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; }
.logo { text-decoration: none; display: flex; flex-direction: column; gap: 2px; min-height: 48px; justify-content: center; }
.logo-n { font-family: var(--sans); font-size: 20px; font-weight: 600; color: var(--claro); letter-spacing: .03em; line-height: 1; }
.logo-s { font-size: 14px; font-weight: 500; color: var(--ouro-claro); letter-spacing: .12em; text-transform: uppercase; line-height: 1; }

/* ------------------------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px;
  min-height: 48px; padding: 8px 20px; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.25; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-ouro { background: var(--ouro); color: var(--marinho); border-color: var(--ouro-borda); }
.btn-ouro:hover { background: var(--ouro-claro); }
.btn-fantasma { background: transparent; color: var(--texto); border-color: var(--borda-campo); }
.btn-fantasma:hover { border-color: var(--azul); color: var(--azul); }
.btn.desligado, .btn[aria-disabled="true"] { background: var(--desligado-fundo); color: var(--desligado-texto); border-color: transparent; cursor: not-allowed; }
.btn.ocupado { cursor: progress; }
.btn.ocupado::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .8s linear infinite; /* indicador de carregamento enquanto o servidor responde */
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ rodapé */
.rodape { position: relative; z-index: 0; background: var(--marinho); border-top: 1px solid rgba(255, 255, 255, .14); padding: 24px 0 24px; margin-top: 0; }
/* O aviso do rodapé fica na página de venda e na primeira pergunta (área de atuação). Nas telas seguintes, inclusive contato e resultado, some (ordem do Rogério, 04/11/2026). */
body:has(.app:not([hidden]):not(.na-primeira)) .rodape { display: none; }
.rodape p { font-size: 14px; line-height: 1.5; color: var(--claro-suave); max-width: 70ch; }

/* Rodapé tradicional do site, depois do aviso (ordem do Rogério, 04/11/2026). Mesmas colunas, ícones, Privacidade e Termos de public/index.html, em fonte sem serifa e com texto de 14px ou mais. Some junto com o aviso depois da primeira pergunta. */
.rodape .rodape-site { margin-top: 28px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.rodape .ft-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
.rodape .ft-name { font-family: var(--sans); font-size: 20px; font-weight: 600; color: var(--claro); letter-spacing: .03em; line-height: 1.2; }
.rodape .ft-sub { display: block; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-claro); margin-bottom: 14px; }
.rodape .ft-desc { font-size: 15px; font-weight: 400; color: var(--claro-suave); line-height: 1.6; max-width: 34ch; margin-bottom: 18px; }
.rodape .ft-soc { display: flex; gap: 8px; }
.rodape .sl { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--claro-suave); text-decoration: none; transition: color .2s, border-color .2s; }
.rodape .sl:hover { color: var(--ouro-claro); border-color: var(--ouro-claro); }
.rodape .ft-col h4 { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-claro); margin-bottom: 14px; }
.rodape .ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rodape .ft-col ul li, .rodape .ft-col ul li a { font-size: 15px; font-weight: 400; color: var(--claro-suave); text-decoration: none; line-height: 1.5; overflow-wrap: anywhere; }
.rodape .ft-col ul li a { display: inline-block; padding: 6px 0; }
.rodape .ft-col ul li a:hover, .rodape .ft-leg a:hover { color: var(--ouro-claro); }
.rodape .ft-bot { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rodape .ft-cp, .rodape .ft-leg { font-size: 14px; font-weight: 400; color: var(--claro-suave); max-width: none; }
.rodape .ft-leg { display: flex; gap: 8px; }
.rodape .ft-leg a { color: inherit; text-decoration: none; padding: 12px 8px; display: inline-block; }
@media (max-width: 899px) { .rodape .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .rodape .ft-grid { grid-template-columns: 1fr; gap: 24px; } .rodape .ft-bot { flex-direction: column; text-align: center; } }

/* ------------------------------------------------------------------ telas da calculadora */
.app { position: relative; z-index: 1; padding-bottom: 24px; }
/* Quando a barra de botões fica presa embaixo, a rolagem automática de um campo com foco deixa o campo acima dela. */
html:has(.app:not([hidden]):not(.sem-barra)) { scroll-padding-bottom: 88px; }
.progresso { height: 4px; background: rgba(255, 255, 255, .16); }
.progresso span { display: block; height: 100%; width: 0; background: var(--ouro); }
.caixa {
  max-width: 1120px; margin: 16px 16px 16px; padding: 20px 14px 16px; background: #ffffff; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(4, 10, 28, .35);
}
.tela { min-height: 120px; }
/* Tela sem título (só a caixa da exportação): sem altura mínima, para não sobrar branco maior que 24px entre a caixa e os botões. */
.tela:has(> .opcoes:first-child) { min-height: 0; }
.tela > .opcoes:first-child:has(+ .bloco-exporta[hidden]) { margin-bottom: 0; }
/* Cada pergunta nova entra com um movimento curto (transparência e posição). */
#tela > * { animation: tela-entra .24s var(--curva-entrada) both; }
@keyframes tela-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tela-entra-suave { from { opacity: 0; } to { opacity: 1; } }

.pergunta { font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.2; margin-bottom: 8px; outline: none; }
.tela-titulo { font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.2; margin-bottom: 8px; outline: none; }
.rotulo-pagina { font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--azul); margin-bottom: 12px; }
.ajuda { font-size: 15px; line-height: 1.4; color: var(--cinza); margin-bottom: 16px; max-width: 60ch; }
.subpergunta { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 16px; }
.aviso-tela { margin-top: 16px; }
.aviso-tela .btn { margin-top: 8px; }
.paragrafo { font-size: 16px; line-height: 1.5; color: var(--texto); margin-bottom: 16px; max-width: 60ch; }
.obrigatorios { font-size: 14px; line-height: 1.4; color: var(--cinza); margin-bottom: 16px; }

.harvey { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
.harvey p { font-size: 15px; line-height: 1.4; color: var(--cinza); max-width: 60ch; }
.esfera { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; margin-top: 2px; background: var(--ouro); border: 1px solid var(--ouro-borda); } /* bolinha dourada lisa de 24px, sem brilho nem borrão */

/* campos */
.campo { margin-bottom: 16px; }
.rotulo { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.entrada {
  display: block; width: 100%; height: 48px; padding: 0 14px; background: var(--navy); border: 1px solid var(--borda-campo); border-radius: 10px;
  font-size: 16px; line-height: 1.4; color: var(--texto); -webkit-appearance: none; appearance: none;
}
.entrada::placeholder { color: #5b6a88; }
.entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18, 58, 130, .22); }
.entrada[readonly] { background: #f2f3f6; color: var(--cinza); }
/* Campo de dinheiro bloqueado pelo botão de zero: cinza, sem cursor de digitar, para a pessoa ver que algo mudou. */
.entrada:disabled { background: var(--desligado-fundo); color: var(--desligado-texto); border-color: #c4ccdb; cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--desligado-texto); }
.campo.bloqueado .rotulo { color: var(--desligado-texto); }
.campo.vermelho .entrada { border-color: var(--erro); }
.msg-erro { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--erro); }
.msg-status { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--texto); overflow-wrap: break-word; }
.msg-status.ok { color: var(--azul); }
.msg-status.erro { color: var(--erro); }

.ligado-ao-campo { margin-top: 8px; }
.ligado-ao-campo .btn { width: 100%; }
.alternativa { background: transparent; color: var(--texto); border: 1px solid var(--borda-campo); }
.alternativa[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); }

.link { display: inline-flex; align-items: center; min-height: 48px; background: none; border: 0; padding: 0 8px; color: var(--azul); font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--texto); }

/* escolhas (uma, ou várias) */
.opcoes { display: grid; gap: 8px; margin-bottom: 16px; list-style: none; }
.opcao {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 14px; text-align: left;
  background: var(--navy2); border: 1px solid var(--borda-campo); border-radius: 10px; font-size: 16px; font-weight: 500; line-height: 1.3;
  transition: border-color .15s ease, background-color .15s ease;
}
.opcao:hover { border-color: var(--ouro); }
.opcao .marca { flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--borda-campo); border-radius: 50%; position: relative; }
.opcao.caixinha .marca { border-radius: 5px; }
.opcao[aria-checked="true"], .opcao[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); }
.opcao[aria-checked="true"] .marca, .opcao[aria-pressed="true"] .marca { border-color: var(--ouro); background: var(--ouro); box-shadow: inset 0 0 0 3px #ffffff; }
.opcao.caixinha[aria-checked="true"] .marca { box-shadow: inset 0 0 0 2px #ffffff; }
.opcoes-lado { display: grid; gap: 8px; margin-bottom: 16px; }
.opcoes-lado .opcao { justify-content: flex-start; text-align: left; font-weight: 700; }   /* opções sempre à esquerda, em todas as telas (ordem do Rogério, 03/11/2026) */
.regime-escolhido { font-size: 15px; color: var(--azul); margin-bottom: 16px; }

/* áreas (tela de abertura) */
.busca-area { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.busca-area .ajuda.busca-area-rotulo { display: block; margin-bottom: 0; max-width: 100%; overflow-wrap: break-word; }
.busca-area .busca-area-campo { width: 100%; }
.areas li[hidden] { display: none; }
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; }
.area {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; width: 100%; height: 100%; min-height: 88px;
  padding: 12px 10px; text-align: left; background: var(--navy2); border: 1px solid var(--borda-campo); border-radius: 12px;
  transition: border-color .15s ease, background-color .15s ease;
}
.area:hover { border-color: var(--ouro); }
.area svg { color: var(--azul); flex: 0 0 auto; }
.area-nome { font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; max-width: 100%; }
.area-linha { font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--cinza); overflow-wrap: break-word; max-width: 100%; }
.area[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); }

/* resultado: o valor vem do servidor e aparece grande, com entrada suave */
.resultado-frase { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 1.3; margin-bottom: 24px; max-width: 44ch; }
.valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.valores.empilhar { grid-template-columns: 1fr; }
.valor { background: #ffffff; border: 1px solid var(--borda-campo); border-radius: 12px; padding: 14px; min-width: 0; animation: tela-entra .32s var(--curva-entrada) both; }
.valor:nth-child(2) { animation-delay: .08s; }
/* nowrap permitido: valor em dinheiro curto, que não pode partir em duas linhas */
.valor-numero { font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: var(--azul); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Valor em milhões: o número fica grande e "milhões de reais" vem embaixo, em letra menor, podendo quebrar em duas linhas, para os dois cartões caberem lado a lado. */
.valor-unidade { display: block; white-space: normal; font-size: 16px; font-weight: 700; line-height: 1.25; margin-top: 2px; letter-spacing: 0; color: var(--azul); overflow-wrap: break-word; }
.bloco-tentar { margin-bottom: 16px; }
.bloco-tentar .btn { width: 100%; }
.valor-rotulo { font-size: 15px; color: var(--cinza); margin-top: 4px; }
.nota-resultado { font-size: 15px; line-height: 1.4; color: var(--cinza); margin-bottom: 16px; max-width: 60ch; }
.bloco-whatsapp { margin-top: 0; padding-top: 0; }
.bloco-whatsapp .paragrafo { margin-bottom: 16px; }
.bloco-whatsapp .btn { width: 100%; }

/* VOLTAR e AVANÇAR ficam logo abaixo do cartão da pergunta, no mesmo nível, alinhados às bordas do cartão (ordem do Rogério, 04/11/2026).
   Uma regra só: o bloco está no fluxo depois do cartão e só fica preso embaixo da janela (sticky) enquanto o fim do cartão ainda não chegou à tela.
   O programa põe a classe "preso" nesse caso; só então aparece a faixa de fundo, que mantém a leitura. Solto, não tem faixa. */
.acoes { position: sticky; bottom: 0; z-index: 20; padding: 0 0 calc(8px + env(safe-area-inset-bottom)); }
.acoes.preso { background: var(--marinho); box-shadow: 0 -8px 0 0 var(--marinho), 0 -9px 0 0 rgba(255, 255, 255, .18); }   /* a faixa estende para cima sem mexer no tamanho do bloco */
.acoes-total { max-width: 1120px; margin: 0 16px 8px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--claro); }
.detalhe-lista .campo { margin-bottom: 16px; }
.remover-despesa { min-height: 48px; margin-top: 4px; }
.socio-linha { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borda-campo); }
.acoes-in { display: flex; justify-content: space-between; align-items: stretch; gap: 8px; max-width: 1120px; margin: 0 16px; }
.acoes .btn { min-height: 48px; text-wrap: balance; }   /* texto de botão longo quebra em duas linhas parecidas, nunca com uma palavra sozinha */
.acoes .btn-fantasma { color: var(--claro); border-color: rgba(255, 255, 255, .55); }
.acoes .btn-fantasma:hover { border-color: var(--ouro-claro); color: var(--ouro-claro); }
.acoes .btn.desligado { background: #dfe5f1; color: #3d4b69; }
#btn-voltar { flex: 0 0 auto; min-width: 96px; }
#btn-avancar { flex: 1 1 auto; max-width: 280px; margin-left: auto; }
.acoes.sem-acoes { display: none; }

/* janela por cima da tela */
.janela { position: fixed; inset: 0; z-index: 40; background: rgba(12, 27, 58, .9); overflow-y: auto; padding: 16px; display: flex; align-items: flex-start; justify-content: center; }
.janela-caixa { width: 100%; max-width: 520px; margin: auto; background: var(--navy2); border: 1px solid var(--borda-campo); border-radius: 14px; padding: 16px 14px; box-shadow: 0 6px 24px rgba(4, 10, 28, .4); animation: tela-entra .24s var(--curva-entrada) both; }
.janela-titulo { font-size: 18px; font-weight: 700; line-height: 1.25; margin-bottom: 12px; outline: none; }
.janela-caixa .paragrafo { color: var(--cinza); }
.janela-botoes { display: grid; gap: 8px; margin-top: 8px; }
.janela-botoes .btn { width: 100%; }
/* Janela de retomar pelo CNPJ: botões com 16px (ordem do Rogério, 06/11/2026). O .btn das outras telas continua com 15px. */
.janela-retomar .btn { font-size: 16px; }

/* Janela das profissões (projeto v15, 00000.5). Celular: janela na tela inteira, grupos um embaixo do outro, botões de duas em duas colunas, Voltar sempre à vista (preso embaixo).
   Nenhuma caixa de rolagem dentro da janela: quem rola é a própria janela. */
.janela-profissoes { padding: 0; align-items: flex-start; }   /* a caixa tem a altura do que ela contém (e no mínimo a da tela): o fundo branco cobre tudo, mesmo quando a janela rola */
.janela-profissoes .janela-caixa { max-width: none; min-height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 16px 16px 0; display: flex; flex-direction: column; }
.janela-profissoes .janela-titulo { font-size: 22px; line-height: 1.2; margin-bottom: 16px; }
.profissoes { display: grid; gap: 16px; margin-bottom: 16px; }
.profissoes-grupo { min-width: 0; }
.profissoes-grupo-titulo { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; color: var(--azul); overflow-wrap: break-word; }
.profissoes-lista { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profissao {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; min-height: 48px; padding: 8px 10px; text-align: left;
  background: var(--navy2); border: 1px solid var(--borda-campo); border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.25;
  overflow-wrap: anywhere; hyphens: auto; transition: border-color .15s ease, background-color .15s ease;
}
.profissao:hover { border-color: var(--ouro); }
.profissao[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-fundo); }
.janela-profissoes .janela-botoes { position: sticky; bottom: 0; margin: auto -16px 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--branco); border-top: 1px solid var(--borda); }

/* Verificação "sou humano" (Turnstile) da tela de contato: o desafio é montado pela Cloudflare dentro deste espaço. */
.verificacao { margin: 0 0 16px; max-width: 100%; min-height: 65px; }   /* o espaço do desafio fica reservado desde o começo: a tela não pula quando a Cloudflare termina de carregar */
.verificacao.liberada { display: none; }
.verificacao iframe { max-width: 100%; }

/* Link dentro de texto (política de privacidade na tela de contato): azul e sublinhado. inline-block para não partir em duas linhas. */
.link-texto { display: inline-block; color: var(--azul); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link-texto:hover { color: var(--texto); }
.janela-caixa .verificacao { margin-top: 8px; }

/* ------------------------------------------------------------------ computador */
@media (min-width: 560px) {
  .ctr, .topo-in { padding-left: 24px; padding-right: 24px; }
  .topo-in { height: 72px; }
  .logo-n { font-size: 22px; }
  .caixa { margin: 24px auto; padding: 32px 32px; }
  .acoes-in { margin: 0 auto; }
  .acoes-total { margin-left: auto; margin-right: auto; }
  .pergunta, .tela-titulo { font-family: var(--sans); font-size: 32px; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 12px; }
  .ajuda { font-size: 16px; }
  .harvey p { font-size: 16px; }
  .btn { font-size: 16px; padding: 8px 28px; }
  .entrada { max-width: 100%; }
  .ligado-ao-campo .btn { width: auto; min-width: 220px; }
  .areas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .busca-area { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
  .busca-area .ajuda.busca-area-rotulo { flex: 0 1 auto; }
  .busca-area .busca-area-campo { flex: 1 1 240px; width: auto; max-width: 360px; }
  .resultado-frase { font-size: 26px; max-width: 40ch; }
  .valor-numero { font-size: 56px; }
  .valor-unidade { font-size: 20px; }
  .bloco-tentar .btn { width: auto; min-width: 280px; }
  .valor { padding: 24px; }
  .bloco-whatsapp .btn { width: auto; min-width: 280px; }
  .janela { align-items: center; }
  .janela-caixa { padding: 24px; }
  .janela-titulo { font-size: 22px; }
  .janela-botoes { grid-template-columns: 1fr 1fr; grid-auto-flow: column; }
  /* Janela das profissões no computador: janela grande no meio da tela, grupos em colunas, profissões como botões. */
  .janela-profissoes { padding: 24px; align-items: flex-start; }   /* a caixa fica no meio da altura (margin auto) e, quando não cabe, começa no topo */
  .janela-profissoes .janela-caixa { max-width: 1180px; min-height: 0; margin: auto; border: 1px solid var(--borda-campo); border-radius: 14px; box-shadow: 0 6px 24px rgba(4, 10, 28, .4); padding: 24px 24px 0; }
  .janela-profissoes .janela-titulo { font-size: 26px; }
  .profissoes { display: block; column-count: 2; column-gap: 24px; }
  .profissoes-grupo { break-inside: avoid; margin-bottom: 16px; }
  .profissoes-lista { grid-template-columns: minmax(0, 1fr); }
  .profissao { font-size: 16px; }
  .janela-profissoes .janela-botoes { grid-template-columns: minmax(0, 240px); grid-auto-flow: row; justify-content: start; margin: auto -24px 0; padding: 12px 24px 24px; }
}
@media (min-width: 900px) { .profissoes { column-count: 4; } }
@media (min-width: 1200px) { .profissoes { column-count: 5; } }
/* No computador a pergunta fica à esquerda em letra grande e os campos à direita (as duas colunas são montadas por js/pagina-nova-v11.js). */
@media (min-width: 900px) {
  .tela.duas-colunas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
  .pergunta, .tela-titulo { font-size: 40px; line-height: 1.1; }
  .subpergunta { font-size: 20px; }
  .ajuda { font-size: 18px; }
  .rotulo { font-size: 16px; }
  .paragrafo { font-size: 18px; }
  .valor-numero { font-size: 72px; }
}
@media (min-width: 560px) and (max-height: 820px) {
  .areas .area { min-height: 80px; padding: 8px 10px; }
  .harvey { margin-bottom: 16px; }
}

/* "Reduzir movimento" ligado no aparelho: nada se desloca, só a transparência muda. */
@media (prefers-reduced-motion: reduce) {
  #tela > *, .valor, .janela-caixa { animation-name: tela-entra-suave; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------------ v25: efeito ao passar o mouse e texto de espera da consulta do CNPJ (ordem do Rogério, 04/11/2026)
 * Efeito igual em .area, .opcao, .profissao, .alternativa, .btn-ouro, .btn-fantasma e VOLTAR/AVANÇAR: sobe 2px, sombra suave, borda dourada, fundo com leve tom dourado, 180 ms.
 * Só em quem tem mouse. Não vale para a página de venda (#venda) nem para o .res-palco, que têm o efeito próprio. Desligado não reage; marcado continua marcado (só sobe e ganha sombra). */
@media (hover: hover) and (pointer: fine) {
  .area, .opcao, .profissao, .btn-ouro, .btn-fantasma, .alternativa {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
  }
  .area:where(:not(#venda *, .res-palco *)):hover,
  .opcao:where(:not(#venda *, .res-palco *)):hover,
  .profissao:where(:not(#venda *, .res-palco *)):hover,
  .btn.btn-ouro:where(:not(#venda *, .res-palco *, .desligado, [aria-disabled="true"], :disabled)):hover,
  .btn.btn-fantasma:where(:not(#venda *, .res-palco *, .desligado, [aria-disabled="true"], :disabled)):hover,
  .btn.alternativa:where(:not(#venda *, .res-palco *, .desligado, [aria-disabled="true"], :disabled)):hover,
  .area:where(:not(#venda *, .res-palco *)):focus-visible,
  .opcao:where(:not(#venda *, .res-palco *)):focus-visible,
  .profissao:where(:not(#venda *, .res-palco *)):focus-visible,
  .btn.btn-ouro:where(:not(#venda *, .res-palco *, .desligado, [aria-disabled="true"], :disabled)):focus-visible,
  .btn.btn-fantasma:where(:not(#venda *, .res-palco *, .desligado, [aria-disabled="true"], :disabled)):focus-visible,
  .btn.alternativa:where(:not(#venda *, .res-palco *, .desligado, [aria-disabled="true"], :disabled)):focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(12, 27, 58, .18);
    border-color: var(--ouro);
    background-color: #f8f0e1;   /* branco com 14% do dourado: o texto azul-marinho (#0c1b3a) continua com contraste acima de 14 */
  }
  /* Quem já é dourado ou já é marcado não troca de cor de forma errada */
  .btn.btn-ouro:where(:not(#venda *, .res-palco *, .desligado, [aria-disabled="true"], :disabled)):hover,
  .btn.btn-ouro:where(:not(#venda *, .res-palco *, .desligado, [aria-disabled="true"], :disabled)):focus-visible { background-color: var(--ouro-claro); }
  .area[aria-pressed="true"]:hover, .opcao[aria-checked="true"]:hover, .opcao[aria-pressed="true"]:hover,
  .profissao[aria-pressed="true"]:hover, .alternativa[aria-pressed="true"]:hover,
  .area[aria-pressed="true"]:focus-visible, .opcao[aria-checked="true"]:focus-visible, .opcao[aria-pressed="true"]:focus-visible,
  .profissao[aria-pressed="true"]:focus-visible, .alternativa[aria-pressed="true"]:focus-visible { background-color: var(--ouro-fundo); }
  /* VOLTAR sobre o fundo escuro: fica branco, com leve tom dourado e borda dourada */
  .acoes .btn.btn-fantasma:where(:not(.desligado, [aria-disabled="true"], :disabled)):hover,
  .acoes .btn.btn-fantasma:where(:not(.desligado, [aria-disabled="true"], :disabled)):focus-visible {
    color: var(--claro); background-color: rgba(201, 147, 58, .22); border-color: var(--ouro); box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .area:hover, .opcao:hover, .profissao:hover, .btn:hover, .area:focus-visible, .opcao:focus-visible, .profissao:focus-visible, .btn:focus-visible { transform: none !important; }
}

/* Texto de espera da consulta do CNPJ: 18px, peso 600, cor forte, com indicador de carregamento ao lado. A altura fica reservada para a tela não pular quando entra "Encontramos a empresa". */
.msg-status.espera { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--texto); }
.msg-status.espera::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  border: 3px solid var(--borda); border-top-color: var(--azul); animation: girar .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .msg-status.espera::before { animation: none; } }
#s-cnpj { min-height: 120px; }

/* Botão "Calcular ECONOMIA DE TRIBUTOS": sempre duas linhas, "Calcular" e "ECONOMIA DE TRIBUTOS" inteiro na segunda, em todas as larguras. */
#btn-avancar .rot-linha { display: block; }
/* nowrap permitido: a ordem do Rogério é que ECONOMIA DE TRIBUTOS nunca parta; o botão se ajusta (letra e espaço) para a linha caber */
#btn-avancar .rot-sem-quebra { white-space: nowrap; }
#btn-avancar:has(.rot-linha) { padding-left: 8px; padding-right: 8px; }
#btn-avancar:has(.rot-linha) { flex-direction: column; gap: 0; }

/* v21: as perguntas de detalhe podem ser puladas (COPY-PULAR-PERGUNTA-v3.md, Partes 1 e 2). A linha de ajuda fica logo embaixo da ajuda da pergunta; o botão de pular usa o mesmo estilo dos botões alternativos. */
.ajuda-pular { margin-top: 0; }
.pular-bloco { margin-top: 16px; }
.pular-bloco .botao-pular { width: 100%; white-space: normal; }
@media (min-width: 560px) { .pular-bloco .botao-pular { width: auto; min-width: 240px; } }

/* Pergunta da exportação (07/11/2026): "Marque a opção abaixo se:" fica acima da caixa, em 16px e peso 600, na cor do texto da pergunta. */
/* Telas de escolha em coluna única (11/11/2026): a frase sobre a empresa, um espaço, a pergunta, as opções, a explicação e a frase de pular junto do botão.
   No computador a coluna tem largura de leitura; no celular ocupa a largura toda do cartão. Nenhum texto abaixo de 15px. */
.tela.coluna-unica { display: block; max-width: 720px; }
.tela.coluna-unica .ajuda, .tela.coluna-unica .paragrafo, .tela.coluna-unica .pergunta, .tela.coluna-unica .subpergunta { overflow-wrap: break-word; }
.tela.coluna-unica .opcao { white-space: normal; overflow-wrap: anywhere; }
.contexto-empresa { margin-bottom: 24px; }
.pular-bloco .ajuda-pular { margin-bottom: 4px; }
.chamada-exporta { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--texto); margin-bottom: 8px; max-width: none; }

/* ------------------------------------------------------------------ 08/11/2026: botões de marcar ("Não possui empregados", "Não retira lucro" e iguais)
 * Quadradinho antes do texto: vazio quando desmarcado, com o sinal de certo quando marcado. Marcado, o botão inteiro vai para a cor de destaque (a mesma do botão dourado:
 * fundo #c9933a com texto #0c1b3a, contraste 6,5 para 1). Um clique marca e outro desmarca. */
.caixa-zero { justify-content: flex-start; text-align: left; gap: 12px; }
.caixa-zero .quadrado { flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--borda-campo); border-radius: 5px; background: #ffffff; position: relative; }
.caixa-zero[aria-pressed="true"],
.btn.alternativa.caixa-zero[aria-pressed="true"]:hover,
.btn.alternativa.caixa-zero[aria-pressed="true"]:focus-visible { background: var(--ouro); border-color: var(--ouro-borda); color: var(--marinho); }
.caixa-zero[aria-pressed="true"] .quadrado { border-color: var(--marinho); background: #ffffff; }
.caixa-zero[aria-pressed="true"] .quadrado::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--marinho); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* ------------------------------------------------------------------ 08/11/2026: janela das três frases durante o cálculo (PROJETO-AJUSTES-PERGUNTAS-v3.md, seção 2)
 * Sem botão e sem como fechar. A frase troca a cada 3 segundos; o indicador de carregamento tem 24px e fica acima do texto, nunca por cima dele.
 * Pedido de menos movimento: a frase troca sem animação e o indicador fica parado. */
.janela-calculando .janela-caixa { max-width: 420px; text-align: center; padding: 24px 16px; }
.janela-calculando .janela-caixa::before { content: ""; display: block; width: 24px; height: 24px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--borda); border-top-color: var(--azul); animation: girar .8s linear infinite; }
.janela-calculando .janela-titulo { font-size: 20px; line-height: 1.35; margin-bottom: 0; overflow-wrap: break-word; }
.janela-calculando .janela-titulo.troca { animation: tela-entra-suave .24s var(--curva-entrada) both; }
@media (prefers-reduced-motion: reduce) {
  .janela-calculando .janela-caixa::before { animation: none; }
  .janela-calculando .janela-titulo.troca { animation: none; }
}

/* ------------------------------------------------------------------ 08/11/2026: botão "Calcular ECONOMIA DE TRIBUTOS" (seção 6)
 * Letra de 16px (era 15px), altura fixa de 56px (limite do padrão: 48 a 56px) e uma luz que gira em volta do botão no sentido do relógio.
 * A luz é um anel de 3px que fica ATRÁS do botão (o fundo dourado cobre o miolo): nunca passa por cima do texto. Só gira com o botão ligado.
 * Pedido de menos movimento: sem a luz girando (o anel fica parado e dourado). Navegador sem suporte a @property: anel parado. */
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes luz-gira { to { --giro: 360deg; } }
#btn-avancar.btn-calcular { height: 56px; min-height: 56px; padding: 6px 8px; font-size: 16px; line-height: 1.2; position: relative; isolation: isolate; }
#btn-avancar.btn-calcular:not(.desligado)::before {
  /* 09/11/2026: luz só na borda. O anel tem 3px, fica fora do botão (inset -3px) e a máscara esvazia o miolo; antes o degradê enchia o botão inteiro e passava por cima do fundo, como uma faixa clara no meio. */
  content: ""; position: absolute; inset: -3px; padding: 3px; border-radius: 13px; pointer-events: none;
  background: conic-gradient(from var(--giro), rgba(218, 168, 83, .25) 0deg, rgba(218, 168, 83, .25) 230deg, #daa853 300deg, #ffffff 350deg, rgba(218, 168, 83, .25) 360deg);
  -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 exclude, linear-gradient(#000 0 0);
  animation: luz-gira 3.5s linear infinite;
}
#btn-avancar.btn-calcular:not(.desligado) { box-shadow: 0 0 14px 3px rgba(218, 168, 83, .45); }
@media (prefers-reduced-motion: reduce) {
  #btn-avancar.btn-calcular:not(.desligado)::before { animation: none; }
}

/* ------------------------------------------------------------------ 08/11/2026: caixa da verificação da Cloudflare no tamanho padrão (seção 7): 300px de largura, alinhada à esquerda, em vez da largura inteira. */
.verificacao { width: 300px; max-width: 100%; margin-left: 0; margin-right: auto; }

/* ------------------------------------------------------------------ 08/11/2026: "salvar e continuar depois" em destaque (seção 8)
 * Cor de destaque da própria calculadora (o roxo do degradê do fundo), com letra branca (contraste 6,3 para 1). Fica logo abaixo do botão principal e é menor que ele:
 * largura só do conteúdo e letra de 14px, contra o botão principal de largura inteira. Altura de 48px para o toque. */
:root { --destaque: #5b3fd6; --destaque-claro: #6f55e2; }
.btn-destaque { background: var(--destaque); color: #ffffff; border: 1px solid var(--destaque); font-size: 14px; }
.btn-destaque:hover, .btn-destaque:focus-visible { background: var(--destaque-claro); border-color: var(--destaque-claro); color: #ffffff; }
.janela-botoes .btn-destaque { width: auto; justify-self: center; min-width: 50%; padding: 8px 24px; }
.rn .btn-destaque, .rn .btn-destaque:hover { color: #ffffff; border: 1px solid var(--destaque-claro); }
.rn .rn-botao.rn-botao-salvar { width: auto; min-width: 0; max-width: none; min-height: 48px; padding: 8px 24px; font-size: 14px; }

/* ------------------------------------------------------------------ 08/11/2026: "salvar e continuar depois" em todas as telas de perguntas (seção 3)
 * Fica logo abaixo de AVANÇAR, à direita (a mesma ponta do AVANÇAR), com largura só do conteúdo e letra de 14px (menor que o botão principal), 48px de altura.
 * Mesmo roxo de destaque da janela "Precisamos dessa informação" e da tela de resultado. O texto vem de textos.js (T.essencial.secundario). */
.acoes-salvar { display: flex; justify-content: flex-end; max-width: 1120px; margin: 8px 16px 0; }
.acoes-salvar[hidden] { display: none; }
.acoes-salvar .btn-destaque { width: auto; min-width: 0; min-height: 48px; padding: 8px 24px; font-size: 14px; }
@media (min-width: 560px) { .acoes-salvar { margin-left: auto; margin-right: auto; } }

/* v31: tela do pró-labore sócio por sócio (COPY-RELATORIO-PDF-v3.md, 10a). Espaço entre um sócio e o seguinte e entre as opções do fim da lista. */
.socios-corpo .ligado-ao-campo { margin-bottom: 20px; }
.socios-corpo .ligado-ao-campo:last-child { margin-bottom: 12px; }

/* Bloco de cada sócio: rótulo, valor e caixa juntos; traço fino e espaço maior entre um bloco e o seguinte */
.socios-corpo .socio-bloco { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--borda-campo); }
.socios-corpo .socio-bloco .ligado-ao-campo { margin: 8px 0 0; }
.socios-corpo .socio-bloco:last-of-type { margin-bottom: 12px; }
.socios-corpo .socio-linha { margin-bottom: 24px; padding-bottom: 24px; }