/* Paleta da logo: azul-marinho #142654, verde #167033, amarelo #f2c705 e o
   branco do círculo. */
:root {
  --marinho: #142654;
  --amarelo: #f2c705;
  --amarelo-hover: #f7d849;
  --fundo: #eef1f6;
  /* Degradê diagonal: verde → branco do círculo → amarelo → azul-marinho. */
  --fundo-marca:
    radial-gradient(70% 60% at 0% 0%, rgba(22, 112, 51, 0.28), transparent 70%),
    radial-gradient(60% 55% at 100% 30%, rgba(242, 199, 5, 0.35), transparent 70%),
    radial-gradient(80% 60% at 30% 100%, rgba(20, 38, 84, 0.25), transparent 70%),
    linear-gradient(135deg, #d9ecdf 0%, #f4f5f4 38%, #fbf1c6 68%, #d7deef 100%);
  --superficie: #ffffff;
  --superficie-suave: #f5f7fa;
  --texto: #0f1834;
  --texto-suave: #5b6478;
  --texto-fraco: #8a91a2;
  --borda: #e3e7ee;
  --borda-forte: #cfd5df;
  --verde: #1d8a3c;
  --verde-forte: #167033;
  --verde-claro: #e5f2e8;
  --verde-vivo: #5cc26a;
  --dourado: #e2b30b;
  --dourado-forte: #7d6000;
  --dourado-claro: #fdf4d3;
  --areia: #d8d1af;
  --oliva: #565845;
  --escuro: #0e1a3d;
  --vermelho: #b42318;
  --vermelho-claro: #fdeceb;
  --azul-folga: #e7eef9;
  --azul-folga-texto: #2b4a7a;
  --raio: 20px;
  --raio-medio: 14px;
  --raio-pequeno: 10px;
  --fonte: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Sentient", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --foco: 0 0 0 3px rgba(22, 112, 51, 0.35);
  --destaque-fundo: #142654;
  --destaque-fundo-hover: #1e3572;
  --destaque-texto: #ffffff;
  --destaque-texto-suave: #b9c3dd;
  --destaque-borda: #2c3e74;
  --destaque-botao: var(--amarelo);
  --destaque-botao-hover: var(--amarelo-hover);
  --destaque-botao-texto: #142654;
  --destaque-realce: var(--amarelo);
  --celula-meio: #f6fbf7;
  color-scheme: light;
}

/* Tema escuro: só na tela (o PDF sai sempre claro). O tema é escolhido pelo
   botão no cabeçalho; sem escolha, segue o sistema (script no <head>). */
@media screen {
  :root[data-tema="escuro"] {
    --fundo: #0a1330;
    --fundo-marca:
      radial-gradient(70% 60% at 0% 0%, rgba(22, 112, 51, 0.55), transparent 70%),
      radial-gradient(55% 50% at 100% 35%, rgba(242, 199, 5, 0.18), transparent 70%),
      radial-gradient(80% 60% at 40% 100%, rgba(52, 84, 170, 0.45), transparent 70%),
      linear-gradient(135deg, #0d2f2a 0%, #0a1638 40%, #142654 75%, #1b2f66 100%);
    --superficie: #111d44;
    --superficie-suave: #172451;
    --texto: #eef1f8;
    --texto-suave: #aeb7cf;
    --texto-fraco: #8590ad;
    --borda: #22315f;
    --borda-forte: #34457b;
    --verde: #4cc163;
    --verde-forte: #7cd48b;
    --verde-claro: #123022;
    --dourado: #f2c705;
    --dourado-forte: #f7d849;
    --dourado-claro: #3a3110;
    --areia: #7a745a;
    --vermelho: #f2897c;
    --vermelho-claro: #3a1c22;
    --azul-folga: #1b2b5c;
    --azul-folga-texto: #b5c8f0;
    --destaque-fundo: #f4f5f4;
    --destaque-fundo-hover: #dde1ea;
    --destaque-texto: #142654;
    --destaque-texto-suave: #4c5670;
    --destaque-borda: #c5cbd8;
    --destaque-botao: #142654;
    --destaque-botao-hover: #1e3572;
    --destaque-botao-texto: #ffffff;
    --destaque-realce: #167033;
    --celula-meio: #12291f;
    --foco: 0 0 0 3px rgba(242, 199, 5, 0.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  /* "calt" desligado: a Inter troca o x de "5x2" por ×, e o nome da marca é "5x2". */
  font-feature-settings: "tnum" 1, "calt" 0;
}
/* Brilho nas cores da logo, preso à janela para não esticar em páginas longas. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--fundo-marca); pointer-events: none; }

a { color: var(--verde-forte); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; font-family: var(--fonte-titulo); }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 500; }
h2 { font-size: 1.2rem; font-weight: 500; }
h3 { font-size: 1.05rem; font-weight: 500; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.botao-principal { background: var(--destaque-fundo); color: var(--destaque-texto); }
.botao-principal:hover { background: var(--destaque-fundo-hover); }
.botao-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.botao-secundario:hover { border-color: var(--texto); }
.botao-texto { background: none; border: none; color: var(--verde-forte); font: inherit; font-weight: 600; cursor: pointer; padding: 8px; border-radius: 8px; }
.botao-texto:hover { background: var(--superficie-suave); }
.botao:focus-visible, .botao-texto:focus-visible, input:focus-visible, select:focus-visible, .etapas button:focus-visible, .abas button:focus-visible { outline: none; box-shadow: var(--foco); }

/* ---------- Cabeçalho das páginas públicas ---------- */
.topo { padding: 16px 0; }
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo-caixa { background: var(--superficie); border-radius: 999px; padding: 8px 8px 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.1rem; color: var(--texto); text-decoration: none; }
.marca-icone { width: 44px; height: 44px; display: block; }
/* Nome ao lado da logo, nas cores dela: o 5 verde e o 2 amarelo. */
.marca-nome { font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; color: var(--texto-suave); }
.marca-nome b { font-weight: 700; font-size: 1.15em; }
.marca-nome b:first-child { color: var(--verde-forte); }
.marca-nome b:last-child { color: var(--dourado-forte); }
:root[data-tema="escuro"] .marca-nome b:first-child { color: var(--verde); }
:root[data-tema="escuro"] .marca-nome b:last-child { color: var(--amarelo); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-texto small { font-family: var(--fonte); font-size: 0.72rem; font-weight: 600; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: 0.08em; }
.lateral-marca .marca-nome { font-size: 1.2rem; }
.topo nav { display: flex; align-items: center; gap: 8px; }
.topo nav a:not(.botao) { color: var(--texto-suave); text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.topo nav a:not(.botao):hover { background: var(--superficie-suave); color: var(--texto); }
.topo .botao { min-height: 40px; padding: 8px 18px; white-space: nowrap; }
@media (max-width: 640px) { .topo nav a:not(.botao) { display: none; } }

/* ---------- Página inicial ---------- */
.hero { padding: 32px 0 48px; }
.hero-grade { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .hero-grade { grid-template-columns: 1.05fr 1fr; } }
.hero p.subtitulo { font-size: 1.1rem; color: var(--texto-suave); max-width: 560px; }
.hero .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.selo { display: inline-flex; align-items: center; gap: 8px; background: var(--superficie); color: var(--texto); font-weight: 600; font-size: 0.8rem; padding: 6px 12px 6px 8px; border-radius: 999px; margin-bottom: 18px; }
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--verde-claro); }

.vitrine { background: var(--superficie); border-radius: 28px; padding: 18px; display: grid; gap: 12px; }
.vitrine-numeros { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.secao { padding: 32px 0; }
.secao-titulo { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.secao-titulo h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; margin: 0; }

.passos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: passo; padding: 0; margin: 0; list-style: none; }
.passos li { background: var(--superficie); border-radius: var(--raio); padding: 22px; }
.passos li::before { counter-increment: passo; content: counter(passo); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--fundo); font-weight: 600; margin-bottom: 14px; }
.passos p { color: var(--texto-suave); margin: 0; }

.duas-colunas { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .duas-colunas { grid-template-columns: 1.2fr 1fr; } }
.cartao { background: var(--superficie); border-radius: var(--raio); padding: 24px; }
.cartao-escuro { background: var(--destaque-fundo); color: var(--destaque-texto); }
.cartao-escuro .dica, .cartao-escuro p { color: var(--destaque-texto-suave); }
.cartao-escuro .botao-principal { background: var(--destaque-botao); color: var(--destaque-botao-texto); }
.cartao-escuro .botao-principal:hover { background: var(--destaque-botao-hover); }
.cartao-escuro label { color: var(--destaque-texto); }
.lateral-link { display: block; margin-top: 10px; text-align: center; color: inherit; font-size: 0.875rem; font-weight: 600; }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.lista-check li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d8a3c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }

.subtitulo-secao { color: var(--texto-suave); max-width: 680px; margin: 8px 0 0; }
.planos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plano { background: var(--superficie); border-radius: var(--raio); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.plano h3 { font-size: 1.2rem; font-weight: 600; margin: 4px 0 0; }
.plano p { margin: 0; }
.plano .lista-check { margin: 14px 0 18px; font-size: 0.9rem; }
.plano .lista-check li { font-weight: 500; align-items: flex-start; }
.plano .botao { margin-top: auto; }
.plano-preco { font-size: 0.95rem; color: var(--texto-suave); margin-top: 10px !important; }
.plano-preco span { font-family: var(--fonte-titulo); font-size: 2.4rem; font-weight: 600; color: var(--texto); letter-spacing: -0.03em; }
.plano-por-cliente { font-size: 0.85rem; font-weight: 600; color: var(--verde-forte); margin-top: 2px !important; }
.plano-degrau { display: inline-block; align-self: flex-start; font-size: 0.78rem; font-weight: 600; background: var(--dourado-claro); color: var(--dourado-forte); padding: 4px 10px; border-radius: 999px; margin: 6px 0 4px !important; }
.plano-destaque .plano-por-cliente { color: var(--destaque-realce); }
.plano-destaque { background: var(--destaque-fundo); color: var(--destaque-texto); }
.plano-para { font-size: 0.88rem; color: var(--texto-suave); }
.plano-limites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; }
.plano-limites span { font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--superficie-suave); border: 1px solid var(--borda); }
.plano-inclui { margin: 16px 0 -6px !important; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); }
.plano-destaque .plano-para, .plano-destaque .plano-inclui { color: var(--destaque-texto-suave); }
.plano-destaque .plano-limites span { background: transparent; border-color: var(--destaque-borda); }
.plano-destaque .dica, .plano-destaque .plano-preco { color: var(--destaque-texto-suave); }
.plano-destaque .plano-preco span { color: var(--destaque-texto); }
.plano-destaque .botao-principal { background: var(--destaque-botao); color: var(--destaque-botao-texto); }
.plano-destaque .botao-principal:hover { background: var(--destaque-botao-hover); }
.plano-destaque .lista-check li::before { background: rgba(242, 199, 5, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c705' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
:root[data-tema="escuro"] .plano-destaque .lista-check li::before { background: var(--verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23167033' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
.botao-inativo { cursor: default; color: var(--texto-suave); }
.plano-destaque .botao-inativo { background: transparent; color: var(--destaque-texto-suave); border-color: var(--destaque-borda); }
.garantia { margin: 14px 0 0; color: var(--texto-suave); font-size: 0.9rem; }

.demo-painel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 20px 24px; border-radius: var(--raio-medio); background: var(--superficie); }
.demo-painel h3 { margin: 0 0 4px; }
.demo-painel .dica { margin: 0; }

.faq details { background: var(--superficie); border-radius: var(--raio-medio); padding: 18px 22px; margin-bottom: 10px; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin: 12px 0 0; color: var(--texto-suave); }

.rodape { padding: 24px 0 40px; color: var(--texto-suave); font-size: 0.875rem; }
.rodape .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.rodape p { margin: 0; max-width: 640px; }

/* ---------- Números e gráficos (resultado e vitrine) ---------- */
.numeros { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
@media (min-width: 1100px) { .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numero-cartao { background: var(--superficie); border-radius: var(--raio); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vitrine .numero-cartao { background: var(--superficie-suave); }
.numero-rotulo { font-size: 0.8rem; color: var(--texto-suave); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.numero-valor { font-family: var(--fonte-titulo); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
.numero-nota { font-size: 0.8rem; color: var(--texto-fraco); }
.ponto-cor { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ponto-cor.verde { background: var(--verde); }
.ponto-cor.dourado { background: var(--dourado); }
.ponto-cor.escuro { background: var(--texto); }
.ponto-cor.areia { background: var(--areia); }

.grafico-barras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 200px; padding-top: 8px; }
.barra-coluna { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.barra-pilha { width: 100%; max-width: 44px; display: flex; flex-direction: column-reverse; border-radius: 12px; overflow: hidden; background: var(--superficie-suave); }
.barra-pilha span { display: block; }
.barra-coberta { background: var(--verde-vivo); }
.barra-falta { background: var(--dourado); }
.barra-fechado { background: repeating-linear-gradient(45deg, var(--superficie-suave), var(--superficie-suave) 6px, var(--borda) 6px, var(--borda) 8px); height: 12px; }
.barra-dia { font-size: 0.75rem; color: var(--texto-suave); font-weight: 600; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; color: var(--texto-suave); font-weight: 600; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cartao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cartao-cabecalho h2 { margin: 0; }

.barra-progresso { height: 10px; background: var(--superficie-suave); border-radius: 999px; overflow: hidden; }
.barra-progresso span { display: block; height: 100%; border-radius: 999px; background: var(--verde-vivo); }

/* ---------- Formulários ---------- */
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.dica { font-size: 0.85rem; color: var(--texto-suave); font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="time"], select {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 12px;
  font: inherit; color: var(--texto); background: var(--superficie-suave);
}
input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="time"]:hover, select:hover { border-color: var(--borda-forte); }
.campo { margin-bottom: 16px; }
.linha-form { display: flex; flex-wrap: wrap; gap: 12px; }
.linha-form > * { flex: 1 1 220px; }

/* ---------- Calculadora: estrutura de painel ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
@media (min-width: 960px) { .app { grid-template-columns: 260px minmax(0, 1fr); } }

.lateral { background: var(--superficie); padding: 16px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 960px) { .lateral { position: sticky; top: 0; height: 100vh; padding: 22px 16px; } }
.lateral-marca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lateral-titulo { font-size: 0.72rem; font-weight: 600; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: 0.08em; margin: 8px 8px 0; }
.lateral-cartao { margin-top: auto; }
@media (max-width: 959px) { .lateral-cartao, .lateral-titulo { display: none; } }

.etapas { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; overflow-x: auto; }
@media (min-width: 960px) { .etapas { flex-direction: column; overflow: visible; } }
.etapas li { flex: 0 0 auto; }
.etapas button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; border: none; border-radius: 14px; background: none; color: var(--texto-suave); font: inherit; font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap; }
.etapas button:hover { background: var(--superficie-suave); color: var(--texto); }
.etapa-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--superficie-suave); font-size: 0.85rem; font-weight: 600; flex: none; }
.etapas li.atual button { background: var(--fundo); color: var(--texto); }
.etapas li.atual .etapa-num { background: var(--destaque-fundo); color: var(--destaque-texto); }
.etapas li.feita .etapa-num { background: var(--verde-claro); color: var(--verde-forte); }

.principal { padding: 16px; min-width: 0; }
@media (min-width: 960px) { .principal { padding: 22px 28px 40px; } }
.barra-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.barra-topo h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.barra-topo p { margin: 2px 0 0; color: var(--texto-suave); font-size: 0.9rem; }
.barra-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.barra-acoes .botao { min-height: 40px; padding: 8px 16px; }

.painel { background: var(--superficie); border-radius: var(--raio); padding: 22px; }
.painel + .painel { margin-top: 12px; }
.navegacao { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.navegacao-direita { display: flex; flex-wrap: wrap; gap: 12px; }

.grade-resultado { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 12px; }
@media (min-width: 1100px) { .grade-resultado { grid-template-columns: 1.5fr 1fr; } }
.grade-resultado .painel + .painel { margin-top: 0; }

/* Etapa 1 */
.modelos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 20px; }
.modelo { position: relative; }
.modelo input { position: absolute; opacity: 0; }
.modelo label { margin: 0; height: 100%; padding: 18px; border: 1px solid var(--borda); border-radius: var(--raio-medio); cursor: pointer; background: var(--superficie-suave); font-size: 1rem; }
.modelo label span { display: block; font-weight: 400; color: var(--texto-suave); font-size: 0.85rem; margin-top: 2px; }
.modelo label:hover { border-color: var(--borda-forte); }
.modelo input:checked + label { border-color: var(--texto); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--texto); }
.modelo input:focus-visible + label { box-shadow: var(--foco); }
.subtitulo-passo { font-size: 1.05rem; margin: 22px 0 10px; }
.opcoes-jornada { margin-bottom: 4px; }
.regimes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 10px 0 14px; }
.regime { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-medio); background: var(--superficie-suave); color: var(--texto); font: inherit; cursor: pointer; }
.regime strong { font-size: 0.9rem; }
.regime span { font-size: 0.78rem; color: var(--texto-suave); }
.regime:hover { border-color: var(--borda-forte); }
.regime[aria-pressed="true"] { border-color: var(--texto); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--texto); }
.regime:focus-visible { outline: none; box-shadow: var(--foco); }
.campo-encargos { max-width: 360px; }

/* Etapa 2 */
.dias-funcionamento { display: grid; gap: 8px; }
.dias-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 12px; }
.botao-pequeno { min-height: 36px; padding: 6px 14px; font-size: 0.85rem; }
.dia-linha { display: grid; grid-template-columns: 120px 1fr 1fr 80px 96px; gap: 10px; align-items: end; padding: 10px 12px; background: var(--superficie-suave); border-radius: var(--raio-medio); }
.dia-linha.fechado .so-aberto { opacity: 0.4; }
.dia-linha label { font-size: 0.75rem; color: var(--texto-suave); margin-bottom: 4px; }
.dia-linha input[type="time"], .dia-linha input[type="number"] { background: var(--superficie); }
.dia-nome { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 44px; margin: 0; color: var(--texto) !important; font-size: 0.95rem !important; }
.dia-horas { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.dia-linha.fechado .dia-horas { color: var(--texto-fraco); }
.dia-nome input, .marcar input { width: 20px; height: 20px; accent-color: var(--verde); }
@media (max-width: 560px) {
  .dia-linha { grid-template-columns: 1fr 1fr; }
  .dia-nome { grid-column: 1 / -1; }
  .dia-horas { justify-content: flex-start; }
}
.marcar { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 14px 0 4px; }

/* Etapa 3 */
.funcionario { background: var(--superficie-suave); border-radius: var(--raio-medio); padding: 16px; margin-bottom: 10px; }
.funcionario input, .funcionario select { background: var(--superficie); }
.funcionario-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.funcionario-campos { display: grid; gap: 10px; grid-template-columns: 1.3fr 1fr 0.8fr 0.9fr; }
.funcionario-campos.sem-horas { grid-template-columns: 1.4fr 1fr; }
.funcionario-campos > div { display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 760px) { .funcionario-campos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .funcionario-campos, .funcionario-campos.sem-horas { grid-template-columns: 1fr; } }
.adicionar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.adicionar .botao { min-height: 40px; padding: 8px 16px; }
.funcionario-acoes { display: flex; gap: 2px; }
.previa { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 14px 16px; border-radius: var(--raio-medio); background: var(--superficie-suave); border-left: 4px solid var(--borda-forte); font-size: 0.9rem; }
.previa:empty { display: none; }
.previa span { color: var(--texto-suave); }
.previa.ok { background: var(--verde-claro); border-left-color: var(--verde); }
.previa.falta, .previa.atencao { background: var(--dourado-claro); border-left-color: var(--dourado); }
.previa-conta { color: var(--texto) !important; }
.previa-alertas, .lista-alertas { margin: 8px 0 0; padding-left: 18px; color: var(--dourado-forte); font-size: 0.85rem; }
.previa-alertas li + li, .lista-alertas li + li { margin-top: 4px; }

/* Páginas por tipo de negócio */
.pagina-setor .secao { padding-top: 28px; padding-bottom: 28px; }
.setor-topo { max-width: 860px; }
.setor-topo h1 { margin-top: 14px; }
.setor-topo .acoes { align-items: center; }
.trilha { font-size: 0.85rem; color: var(--texto-suave); margin: 0 0 14px; }
.trilha a { color: inherit; }
.lista-cuidados { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--texto-suave); }
.setor-exemplo { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 16px 0; }
@media (min-width: 900px) { .setor-exemplo { grid-template-columns: 1fr 1.6fr; } }
.setor-exemplo .tabela-dados th, .setor-exemplo .tabela-dados td { padding: 8px 10px; font-size: 0.9rem; }
/* No celular a tabela de resultado rola de lado em vez de espremer as colunas. */
.setor-exemplo .tabela-rolagem:last-child .tabela-dados { min-width: 560px; }
.setores-links { display: flex; flex-wrap: wrap; gap: 8px; }
.setores-cartoes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.setor-cartao { display: block; padding: 20px; border-radius: var(--raio); background: var(--superficie); color: var(--texto); text-decoration: none; border: 1px solid transparent; }
.setor-cartao:hover { border-color: var(--borda-forte); }
.setor-cartao strong { display: block; font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 500; }
.setor-cartao span { color: var(--texto-suave); font-size: 0.88rem; }

/* Painel: importação e ações da lista */
.clientes-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.importacao { margin: 12px 0; padding: 16px; border-radius: var(--raio-medio); background: var(--superficie-suave); }
.importacao h3 { margin-top: 0; }
.tabela-importacao { margin-top: 12px; font-size: 0.85rem; }
.tabela-importacao .linha-alerta td { color: var(--vermelho); }

.link-caixa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.link-caixa input { flex: 1 1 260px; min-width: 0; font-size: 0.85rem; }

/* Calculadora com a marca do escritório */
.indicacao-faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; padding: 14px 18px; border-radius: var(--raio-medio); background: var(--destaque-fundo); color: var(--destaque-texto); }
.indicacao-faixa p { margin: 0; color: var(--destaque-texto-suave); font-size: 0.9rem; }
.indicacao-faixa strong { color: var(--destaque-texto); }
.indicacao-faixa .botao-principal { background: var(--destaque-botao); color: var(--destaque-botao-texto); }

/* Resultado: serviços pagos */
.painel-ofertas { margin-bottom: 12px; }
.ofertas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 12px; }
.oferta { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--raio-medio); background: var(--superficie-suave); border: 1px solid var(--borda); }
.oferta h3 { margin: 0; font-size: 1.05rem; }
.oferta p { margin: 0; color: var(--texto-suave); font-size: 0.9rem; }
.oferta .oferta-preco { color: var(--texto); margin-top: 4px; }
.oferta .botao { margin-top: auto; align-self: flex-start; }
.oferta .oferta-preco + .botao { margin-top: 10px; }

/* Resultado: observações do escritório */
.painel-observacoes { margin-bottom: 12px; }
.painel-observacoes textarea { width: 100%; margin-top: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--superficie); color: var(--texto); font: inherit; resize: vertical; }
.painel-observacoes textarea:focus { outline: none; box-shadow: var(--foco); }
.observacoes-impressas { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--dourado); background: var(--dourado-claro); }
.observacoes-impressas p { margin: 0; white-space: pre-wrap; }

/* Resultado: feriados */
.painel-feriados { margin-bottom: 12px; }
.painel-feriados > p { margin: 0 0 4px; }
.tabela-feriados { margin-top: 12px; font-size: 0.9rem; }
.tabela-feriados th, .tabela-feriados td { padding: 8px 10px; }

/* Resultado: ajustes automáticos dos avisos */
.ajustes { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borda-forte); }
.ajustes-titulo { margin: 0; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); }
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--raio-pequeno); background: var(--superficie-suave); }
.ajuste strong { display: block; font-size: 0.9rem; }
.ajuste .dica { display: block; margin-top: 2px; }
.ajuste .botao { flex: none; }
.ajustes > .botao-principal { justify-self: start; }
.ajuste-feito { margin: 0; padding: 8px 12px; border-radius: var(--raio-pequeno); background: var(--verde-claro); color: var(--verde-forte); font-size: 0.88rem; font-weight: 600; }
.ajustes .dica { margin: 0; }
.verificacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.85rem; color: var(--texto-suave); }
.verificacoes li { display: flex; gap: 8px; align-items: flex-start; }
.verificacoes li::before { content: "✓"; flex: none; font-weight: 700; color: var(--verde); }
.marcar-pequeno { margin: 4px 0 0; font-size: 0.82rem; font-weight: 500; color: var(--texto-suave); }
.marcar-pequeno input { width: 16px; height: 16px; }
@media (max-width: 520px) { .ajuste { flex-direction: column; align-items: flex-start; } }

/* Resultado: o que muda para a equipe */
.painel-mudanca { margin-bottom: 12px; }
.conta-horas { margin: 0 0 4px; font-weight: 600; }
.lista-alertas { background: var(--dourado-claro); border-radius: var(--raio-pequeno); padding: 10px 12px 10px 30px; }
.tabela-mudanca { margin-top: 12px; font-size: 0.9rem; }
.tabela-mudanca th, .tabela-mudanca td { padding: 8px 10px; }
.tabela-mudanca td:last-child { color: var(--texto-suave); white-space: nowrap; }
.tabela-mudanca .linha-alerta td:nth-child(2) { color: var(--vermelho); font-weight: 600; }
.tipo-aviso { font-size: 0.85rem; background: var(--superficie); border-radius: var(--raio-pequeno); padding: 10px 12px; margin: 12px 0 0; color: var(--texto-suave); }
.painel > .tipo-aviso { background: var(--dourado-claro); color: var(--dourado-forte); }
.tipo-aviso ul { margin: 0 0 6px; padding-left: 18px; }
.tipo-aviso p { margin: 0; }
.tipo-tag { font-size: 0.72rem; color: var(--texto-suave); font-weight: 600; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip label { margin: 0; padding: 6px 12px; border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.chip input:checked + label { background: var(--vermelho-claro); border-color: var(--vermelho); color: var(--vermelho); }
.chips.cobre .chip input:checked + label { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-forte); }
.chip input:focus-visible + label { box-shadow: var(--foco); }

.erros { background: var(--vermelho-claro); color: var(--vermelho); border-radius: var(--raio-medio); padding: 14px 18px; margin-bottom: 12px; }
.erros ul { margin: 0; padding-left: 20px; }

/* ---------- Resultado ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.status.ok { background: var(--verde-claro); color: var(--verde-forte); }
.status.falta { background: var(--dourado-claro); color: var(--dourado-forte); }
.resumo-texto { font-size: 1.05rem; font-weight: 600; margin: 10px 0 6px; }

.opcoes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 4px 0 8px; }
.opcao { border-radius: var(--raio-medio); padding: 18px; background: var(--superficie-suave); display: flex; flex-direction: column; gap: 6px; }
.opcao h3 { margin: 4px 0 0; font-size: 0.95rem; }
.opcao.recomendada { background: var(--destaque-fundo); color: var(--destaque-texto); }
.opcao.recomendada .dica { color: var(--destaque-texto-suave); }
.opcao.inviavel { opacity: 0.55; }
.opcao.arriscada { background: var(--dourado-claro); }
.opcao .valor { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.03em; }
.opcao .valor small { font-size: 0.8rem; font-weight: 600; color: inherit; opacity: 0.7; }
.etiqueta { align-self: flex-start; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; border-radius: 8px; }
.etiqueta.verde { background: var(--verde-vivo); color: var(--escuro); }
.etiqueta.amarela { background: var(--dourado); color: var(--escuro); }
.etiqueta.cinza { background: var(--borda); color: var(--texto-suave); }
.alerta-texto { color: var(--vermelho); font-size: 0.85rem; }
.opcao.arriscada .alerta-texto { color: var(--dourado-forte); }

.tabela-rolagem { overflow-x: auto; margin: 8px 0 18px; border-radius: var(--raio-medio); background: var(--superficie-suave); padding: 4px; }
table.escala { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 760px; font-size: 0.8rem; }
table.escala th, table.escala td { padding: 8px; text-align: center; vertical-align: top; border-radius: 10px; }
table.escala thead th { color: var(--texto-suave); font-weight: 600; font-size: 0.75rem; }
table.escala th:first-child, table.escala td:first-child { text-align: left; position: sticky; left: 0; background: var(--superficie-suave); font-weight: 600; }
table.escala td:last-child { font-weight: 600; color: var(--texto-suave); }
.celula-trabalho { background: var(--superficie); }
.celula-trabalho b { display: block; font-size: 0.78rem; }
.celula-meio { background: var(--celula-meio); box-shadow: inset 3px 0 0 var(--verde-vivo); }
.celula-folga { color: var(--texto-fraco); }
.celula-livre { color: var(--texto-fraco); opacity: 0.6; }
.celula-fechado { color: var(--texto-fraco); opacity: 0.7; }
.celula-domingo-folga { background: var(--azul-folga); color: var(--azul-folga-texto); }
.linha-falta td { background: var(--dourado-claro); color: var(--dourado-forte); font-weight: 600; }
.linha-falta td:first-child { background: var(--superficie-suave); }
.linha-falta td:empty { background: transparent; }
.nova { font-size: 0.72rem; color: var(--verde-forte); font-weight: 600; display: block; }

.abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.abas button { min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--texto-suave); }
.abas button[aria-pressed="true"] { background: var(--destaque-fundo); color: var(--destaque-texto); border-color: var(--destaque-fundo); }

.regras-usadas { padding-left: 18px; font-size: 0.85rem; color: var(--texto-suave); }
.regras-usadas li { margin-bottom: 6px; }
.a-confirmar { display: inline-block; font-size: 0.68rem; font-weight: 600; background: var(--dourado-claro); color: var(--dourado-forte); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.aviso-legal { font-size: 0.8rem; color: var(--texto-suave); background: var(--superficie-suave); border-radius: var(--raio-pequeno); padding: 10px 12px; }
.so-impressao { display: none; }

/* ---------- Painel do escritório ---------- */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.etapa-link { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; border-radius: 14px; color: var(--texto-suave); font-weight: 600; text-decoration: none; white-space: nowrap; }
.etapa-link:hover { background: var(--superficie-suave); color: var(--texto); }
.etapa-link:focus-visible { outline: none; box-shadow: var(--foco); }
.aviso-painel { border-radius: var(--raio-medio); padding: 12px 16px; margin-bottom: 12px; font-weight: 600; }
.aviso-painel.ok { background: var(--verde-claro); color: var(--verde-forte); }
.aviso-painel.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.novo-cliente { display: flex; gap: 8px; flex: 1 1 360px; max-width: 520px; }
.novo-cliente input { flex: 1; }
.novo-cliente .botao { min-height: 44px; padding: 8px 18px; }
.erro-campo { color: var(--vermelho); font-size: 0.85rem; font-weight: 600; margin: 0 0 10px; }
.cliente-linha { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.6fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: var(--raio-medio); background: var(--superficie-suave); margin-bottom: 8px; }
.cliente-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cliente-nome strong { font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.05rem; }
.cliente-recomendacao { font-size: 0.88rem; min-width: 0; }
.cliente-acoes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.cliente-acoes .botao { min-height: 38px; padding: 6px 14px; }
.botao-excluir { color: var(--vermelho); }
.status.neutro { background: var(--borda); color: var(--texto-suave); }
@media (max-width: 1180px) {
  .cliente-linha { grid-template-columns: 1fr auto; }
  .cliente-recomendacao, .cliente-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}
.vazio { text-align: center; padding: 28px 16px; background: var(--superficie-suave); border-radius: var(--raio-medio); }
.vazio p { margin: 0; }
.linha-regra { align-items: flex-end; }
.campo-acao { flex: 0 0 auto !important; }
.tudo-certo-painel { background: var(--verde-claro); color: var(--verde-forte); border-radius: var(--raio-pequeno); padding: 10px 12px; font-weight: 600; margin: 0; }
.logo-previa { display: flex; align-items: center; gap: 12px; }
.logo-previa img { max-width: 160px; max-height: 80px; border-radius: 10px; background: #fff; padding: 6px; border: 1px solid var(--borda); }
.navegacao label.botao { margin: 0; }

/* ---------- Relatório em PDF ---------- */
.cabecalho-relatorio img { width: 44px; height: 44px; flex: none; }
.dados-grade { display: grid; gap: 12px; grid-template-columns: 1fr 2fr; align-items: start; }
.tabela-dados { width: 100%; border-collapse: collapse; }
.tabela-dados th { text-align: left; font-weight: 600; color: var(--texto-suave); }
.tabela-dados th, .tabela-dados td { padding: 4px 6px; border-bottom: 1px solid var(--borda); vertical-align: top; }

@page {
  size: A4;
  margin: 12mm 11mm 15mm;
  /* Rodapé em Arial: a Inter troca o x de "5x2" por × e a margem da página não aceita desligar isso. */
  @bottom-left { content: "5 por 2 · Simulação: não substitui orientação jurídica ou contábil"; font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; color: #63645d; }
  @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; color: #63645d; }
}

/* A escala completa sai em folha deitada, para caber melhor e ir para o mural. */
@page paisagem { size: A4 landscape; margin: 10mm 11mm 14mm; }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Resumo executivo (primeira página) */
  .resumo-executivo { display: block; border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; margin-bottom: 8px; break-inside: avoid; }
  .decisao { background: var(--verde-claro); padding: 14px 16px; }
  .decisao h2 { font-size: 15pt; font-weight: 600; margin: 8px 0 4px; }
  .decisao p { margin: 0; font-size: 9pt; color: var(--texto-suave); }
  .executivo-grade { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; padding: 12px 16px 14px; }
  .executivo-grade h3 { font-size: 9.5pt; margin: 0 0 6px; }
  .antes-depois td:first-child { color: var(--texto-suave); }
  .antes-depois td:last-child, .antes-depois th:last-child { background: var(--verde-claro); }
  .custos-barras { margin-top: 12px; }
  .custo-linha { display: grid; grid-template-columns: 44% 1fr auto; gap: 8px; align-items: center; font-size: 7.5pt; margin-bottom: 4px; }
  .custo-trilho { height: 8px; background: var(--superficie-suave); border-radius: 999px; overflow: hidden; }
  .custo-trilho span { display: block; height: 100%; background: var(--borda-forte); border-radius: 999px; }
  .custo-linha.recomendada .custo-trilho span { background: var(--verde-vivo); }
  .custo-linha.recomendada .custo-nome, .custo-linha.recomendada .custo-valor { font-weight: 600; }
  .custo-linha.arriscada .custo-trilho span { background: var(--dourado); }
  .custo-valor { white-space: nowrap; font-weight: 500; }
  .proximos-passos { margin: 0; padding-left: 18px; font-size: 8.5pt; display: grid; gap: 6px; }
  .proximos-passos li::marker { font-weight: 600; color: var(--verde-forte); }

  /* Escala completa em folha deitada */
  .painel-escala { page: paisagem; }
  .painel-escala table.escala { font-size: 8pt; }
  .painel-escala .celula-trabalho b { font-size: 7.5pt; }

  /* Escala individual para recortar */
  .escala-individual { break-before: page; }
  .cartoes-individuais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cartao-individual { border: 1.5px dashed var(--borda-forte); border-radius: 10px; padding: 8px 10px; break-inside: avoid; }
  .cartao-individual-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .cartao-individual-topo strong { font-family: var(--fonte-titulo); font-size: 10.5pt; font-weight: 600; }
  .cartao-individual-topo span { font-size: 7pt; color: var(--texto-suave); text-align: right; }
  .cartao-individual table { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; font-size: 6.5pt; }
  .cartao-individual th { font-weight: 600; color: var(--texto-suave); text-align: center; }
  .cartao-individual tbody th { text-align: left; width: 13%; }
  .cartao-individual td { text-align: center; padding: 3px 1px; border-radius: 4px; }
  .ind-trabalho { background: var(--verde-claro); color: var(--verde-forte); font-weight: 600; }
  .ind-folga { background: var(--azul-folga); color: var(--azul-folga-texto); }
  .ind-fechado { color: var(--texto-fraco); }
  html, body { background: #fff; }
  body::before { display: none; }
  body { font-size: 8.5pt; line-height: 1.4; }
  .painel, .numero-cartao { border: 1px solid var(--borda); }
  .a-confirmar { font-size: 6.5pt; padding: 0 4px; }
  .lateral, .topo, .barra-topo, .navegacao, .nao-imprimir, .abas, #erros { display: none !important; }
  .app { display: block; min-height: 0; }
  .principal { padding: 0; }
  .so-impressao { display: block; }
  /* Painel: só o relatório da carteira vai para o papel. */
  .imprimindo-carteira main > :not(#relatorio-carteira) { display: none !important; }
  .tabela-carteira th, .tabela-carteira td { font-size: 7.5pt; padding: 4px 5px; }
  .tabela-carteira .numero { text-align: right; white-space: nowrap; }

  .cabecalho-relatorio { display: flex; align-items: center; gap: 12px; background: var(--escuro); color: #fff; border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; }
  .cabecalho-relatorio img { width: 40px; height: 40px; border-radius: 9px; }
  .cabecalho-relatorio h1 { font-size: 16pt; font-weight: 600; margin: 0; }
  .cabecalho-relatorio p { margin: 2px 0 0; font-size: 8pt; color: #c9cac2; }
  .relatorio-marca { margin-left: auto !important; text-align: right; max-width: 140px; }

  h2 { font-size: 10.5pt; margin-bottom: 6px; }
  .dica { font-size: 7.5pt; }
  .painel { border-radius: 12px; padding: 10px 12px; }
  .painel + .painel { margin-top: 8px; }

  .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
  .numero-cartao { border-radius: 12px; padding: 10px 12px; }
  .numero-rotulo { font-size: 7.5pt; }
  .numero-valor { font-size: 15pt; white-space: normal; }
  .numero-nota { font-size: 7pt; }

  .grade-resultado { grid-template-columns: 1.35fr 1fr; gap: 8px; margin-bottom: 8px; }
  .grafico-barras { height: 110px; gap: 8px; }
  .barra-pilha { border-radius: 7px; max-width: 32px; }
  .resumo-texto { font-size: 9.5pt; }

  .opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .opcao { padding: 10px 12px; border-radius: 10px; gap: 3px; }
  .opcao h3 { font-size: 9pt; }
  .opcao .valor { font-size: 13pt; }
  .opcao .dica, .alerta-texto { font-size: 7.5pt; }
  .etiqueta { font-size: 6.5pt; padding: 2px 6px; }

  .numeros, .grade-resultado, .opcoes, .opcao, .painel-opcoes, .semana-impressao, .dados-informados, .painel-regras { break-inside: avoid; }
  .painel-escala { break-before: page; }
  .painel-escala h3 { font-size: 9pt; margin: 6px 0 2px; }
  .tabela-rolagem { overflow: visible; padding: 3px; margin: 0 0 6px; border-radius: 10px; }
  table.escala { min-width: 0; table-layout: fixed; font-size: 7pt; border-spacing: 2px; }
  table.escala th, table.escala td { padding: 4px 2px; border-radius: 5px; }
  table.escala th:first-child, table.escala td:first-child { width: 15%; position: static; }
  table.escala th:last-child, table.escala td:last-child { width: 7%; }
  .celula-trabalho b { font-size: 6.5pt; }
  .tipo-aviso { font-size: 7.5pt; padding: 6px 8px; }

  .dados-informados { break-before: page; }
  .tabela-dados { font-size: 7.5pt; }
  .regras-usadas { font-size: 7pt; columns: 2; column-gap: 16px; margin: 0 0 6px; }
  .regras-usadas li { break-inside: avoid; margin-bottom: 3px; }
  .aviso-legal { font-size: 7pt; }
}

/* ---------- Botão de tema ---------- */
.botao-tema { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); cursor: pointer; flex: none; }
.botao-tema:hover { border-color: var(--borda-forte); background: var(--superficie-suave); }
.botao-tema:focus-visible { outline: none; box-shadow: var(--foco); }
.botao-tema svg { width: 18px; height: 18px; }
.botao-tema .icone-sol { display: none; }
:root[data-tema="escuro"] .botao-tema .icone-sol { display: block; }
:root[data-tema="escuro"] .botao-tema .icone-lua { display: none; }
@media print { .botao-tema { display: none !important; } }

/* ---------- Animações dos botões ----------
   Sobe ao passar o mouse, afunda no clique, brilho que atravessa o botão
   principal e uma onda a partir do ponto clicado (js/animacoes.js).
   Quem pede menos movimento no sistema fica só com as mudanças de cor. */
:root { --mola: cubic-bezier(0.34, 1.56, 0.64, 1); --suave: cubic-bezier(0.22, 1, 0.36, 1); }

.botao, .botao-tema, .regime, .abas button, .setor-cartao, .modelo label, .chip label, .etapas button, .etapa-link, .botao-texto {
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.25s var(--suave), transform 0.25s var(--mola);
}
.botao, .regime, .abas button, .botao-tema { position: relative; overflow: hidden; isolation: isolate; }

.botao:hover { transform: translateY(-2px); }
.botao-principal:hover { box-shadow: 0 10px 22px -10px var(--destaque-fundo); }
.botao-secundario:hover { box-shadow: 0 8px 18px -12px rgba(15, 24, 52, 0.45); }
.botao:active, .regime:active, .abas button:active, .botao-tema:active, .botao-texto:active, .chip label:active { transform: translateY(0) scale(0.96); transition-duration: 0.08s; }
.botao-inativo:hover, .botao-inativo:active { transform: none; box-shadow: none; }

/* Brilho que atravessa o botão principal ao passar o mouse. */
.botao-principal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.botao-principal:hover::after { transform: translateX(120%); transition: transform 0.7s var(--suave); }

/* Cartões clicáveis sobem um pouco. */
.regime:hover, .modelo label:hover, .setor-cartao:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -16px rgba(15, 24, 52, 0.4); }
.regime[aria-pressed="true"], .modelo input:checked + label { animation: escolhido 0.35s var(--mola); }
@keyframes escolhido { 0% { transform: scale(0.97); } 100% { transform: scale(1); } }

.abas button:hover, .chip label:hover { transform: translateY(-1px); }
.etapas button:hover, .etapa-link:hover { transform: translateX(3px); }

/* Botão de tema: o ícone gira ao entrar e balança ao passar o mouse. */
.botao-tema:hover svg { transform: rotate(-15deg) scale(1.1); }
.botao-tema svg { transition: transform 0.3s var(--mola); animation: icone-entra 0.45s var(--mola); }
@keyframes icone-entra { from { transform: rotate(-120deg) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Onda do clique. */
.onda { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.25; transform: scale(0); animation: onda 0.6s var(--suave) forwards; }
@keyframes onda { to { transform: scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .botao, .botao-tema, .regime, .abas button, .setor-cartao, .modelo label, .chip label, .etapas button, .etapa-link, .botao-texto, .botao-tema svg { transition: background-color 0.2s, border-color 0.2s, color 0.2s; animation: none; }
  .botao:hover, .botao:active, .regime:hover, .regime:active, .modelo label:hover, .setor-cartao:hover, .abas button:hover, .abas button:active, .chip label:hover, .chip label:active, .etapas button:hover, .etapa-link:hover, .botao-tema:active, .botao-texto:active, .botao-tema:hover svg { transform: none; }
  .regime[aria-pressed="true"], .modelo input:checked + label { animation: none; }
  .botao-principal::after, .onda { display: none; }
}
@media print { .onda, .botao-principal::after { display: none; } }