/* Plus Jakarta Sans 400-800 (SIL OFL 1.1), npm @fontsource/plus-jakarta-sans 5.3.0, subconjunto latin, do vendor */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/vendor/fontes/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/vendor/fontes/plus-jakarta-sans/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/vendor/fontes/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/vendor/fontes/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/vendor/fontes/plus-jakarta-sans/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}
/* ---- motor.css ---- */
/* motor.css - CSS ESTRUTURAL da interface v2 "expanda - disparo" (dono: B0). Versao NAO edita este arquivo: redefine tokens e enfeita em
   versoes/vNN.css com todo seletor prefixado por [data-versao="vNN"]. Regras: nenhuma borda em card, nenhuma linha separadora, nada de verde,
   motion nunca desligada por reduced-motion (regra universal 18). Base de partida: CSS do gerar_bu_v4.py (A1 3.1) sem a borda e sem as linhas. */

/* 3D da Arteserv (r2.css 4-7): propriedades do giro SEM heranca, para nao recalcular os filhos a cada movimento */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: -14deg; }
@property --incl { syntax: '<angle>'; inherits: false; initial-value: 38deg; }
@property --k { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --tiltx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --tilty { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  /* paleta da Expanda (site oficial, distribuidores/expanda/expanda.md); NUNCA verde */
  --fundo: #051216; --fundo2: #08171c; --cartao: #0c1c21;
  --primaria: #67e9e2; --acento: #59b5bf; --sobre-primaria: #001218;
  --texto: #eff7f7; --texto2: #cad7d8; --texto3: #9db3b5;
  /* superficies: degraus de luminosidade OKLCH a partir de #051216 (L .172, C .021, h 219); "borda invisivel" = tom acima (A4 secao 5) */
  --s0: oklch(0.172 0.021 219);
  --s1: oklch(0.194 0.023 220);
  --s2: oklch(0.215 0.024 220);
  --s3: oklch(0.245 0.026 218);
  --s4: oklch(0.280 0.028 216);
  --s5: oklch(0.320 0.030 214);
  --poco: var(--s0);                                  /* campo rebaixado: cor da pagina dentro do card */
  /* escala da primaria (R-22), tirada de #67e9e2 (L .86 C .115 h 190) */
  --p-100: oklch(0.95 0.04 190); --p-300: oklch(0.90 0.09 190); --p-500: var(--primaria);
  --p-700: oklch(0.62 0.10 195); --p-800: oklch(0.42 0.07 200); --p-900: oklch(0.30 0.05 205);
  --p-suave: oklch(0.86 0.115 190 / 0.12);            /* chip/selecionado: fundo dessaturado e escuro (R-28) */
  /* semanticas fixas (R-24): sem verde; sucesso usa a primaria */
  --perigo: oklch(0.70 0.17 25); --perigo-suave: oklch(0.70 0.17 25 / 0.14);
  --alerta: oklch(0.85 0.14 90); --alerta-suave: oklch(0.85 0.14 90 / 0.14);
  --info: oklch(0.74 0.12 250); --sucesso: var(--primaria);
  /* lado B do login: grande contraste com o lado A */
  --lado-a: var(--s1);
  --lado-b: radial-gradient(120% 90% at 30% 20%, oklch(0.38 0.07 200), oklch(0.24 0.04 212) 55%, var(--s0));
  /* fonte: UMA familia por versao (Manrope, Inter, DM Sans, Geist ou Plus Jakarta Sans) */
  --fonte: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* tipos da landing e login (R-18): 64/42/32/20/16/14 */
  --l1: 64px; --l1-a: 72px; --l2: 42px; --l2-a: 48px; --l3: 32px; --l3-a: 40px; --l4: 20px; --l4-a: 28px; --l5: 16px; --l5-a: 24px; --l6: 14px; --l6-a: 20px;
  /* tipos do app (R-19): 24/20/18/16/14/12, nada acima de 24 */
  --a1: 24px; --a2: 20px; --a3: 18px; --a4: 16px; --a5: 14px; --a6: 12px;
  /* espacamento multiplo de 4 (R-15) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px; --e16: 64px; --e24: 96px;
  /* raios e sombras discretas, graduadas pela altura (R-31, R-33) */
  --raio: 16px; --raio-p: 12px; --raio-g: 24px; --raio-pill: 999px;
  --sombra-1: 0 1px 2px oklch(0 0 0 / 0.18), 0 8px 24px oklch(0 0 0 / 0.14);
  --sombra-2: 0 2px 4px oklch(0 0 0 / 0.2), 0 16px 40px oklch(0 0 0 / 0.22);
  --sombra-3: 0 4px 8px oklch(0 0 0 / 0.24), 0 28px 72px oklch(0 0 0 / 0.36);
  /* motion (README, Decisoes de design) */
  --curva: cubic-bezier(.45, 0, .2, 1); --t-micro: 240ms; --t-bloco: 720ms;
  --largura: 1200px;
  color-scheme: dark;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--s0); -webkit-text-size-adjust: 100%; }
body { font-family: var(--fonte); font-size: var(--l5); line-height: var(--l5-a); color: var(--texto); background: var(--s0);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; font-feature-settings: 'tnum' 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; border: 0; background: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 700; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--p-800); color: var(--texto); }
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* telas: uma visivel por vez */
.tela { display: none; min-height: 100vh; }
.tela.ativa { display: block; }

/* ---------- componentes ---------- */
/* botao: 4 estados + carregando (R-40); padding horizontal = 2x o vertical (R-37) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); position: relative; padding: 12px 24px; min-height: 48px;
  border-radius: var(--raio-p); font-size: var(--l5); line-height: var(--l5-a); font-weight: 700; white-space: nowrap; user-select: none;
  transition: background-color var(--t-micro) var(--curva), color var(--t-micro) var(--curva), transform var(--t-micro) var(--curva), box-shadow var(--t-micro) var(--curva), opacity var(--t-micro); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.btn-primario { background: var(--primaria); color: var(--sobre-primaria); box-shadow: 0 6px 20px oklch(0.86 0.115 190 / 0.18); }
.btn-primario:hover:not(:disabled) { background: var(--p-300); }
.btn-fantasma { background: transparent; color: var(--texto); }
.btn-fantasma:hover:not(:disabled) { background: var(--s3); }
.btn-suave { background: var(--s3); color: var(--texto); }
.btn-suave:hover:not(:disabled) { background: var(--s4); }
.btn-peq { padding: 8px 16px; min-height: 36px; font-size: var(--a5); line-height: 20px; }
.btn-grande { padding: 16px 32px; min-height: 56px; }
.btn.carregando { color: transparent !important; pointer-events: none; }
.btn.carregando::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; inset: 0; margin: auto;
  background: conic-gradient(from 0deg, transparent 0 25%, currentColor 25%); -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); mask: radial-gradient(circle, transparent 6px, #000 7px); animation: ed-gira .7s linear infinite; }
.btn-primario.carregando::after { background: conic-gradient(from 0deg, transparent 0 25%, var(--sobre-primaria) 25%); }
.btn-fantasma.carregando::after, .btn-suave.carregando::after { background: conic-gradient(from 0deg, transparent 0 25%, var(--texto) 25%); }
.btn.feito { background: var(--p-suave); color: var(--primaria); }
.btn.recusa { animation: ed-recusa .42s var(--curva); }
@keyframes ed-gira { to { transform: rotate(360deg); } }
@keyframes ed-recusa { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.icone-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-p); color: var(--texto2);
  transition: background-color var(--t-micro) var(--curva), color var(--t-micro), transform var(--t-micro) var(--curva); }
.icone-btn svg { width: 24px; height: 24px; }
.icone-btn:hover { background: var(--s2); color: var(--texto); }
.icone-btn:active { transform: scale(.94); }

/* campo: foco, erro e alerta (R-41); campo = poco rebaixado, sem borda */
.campo { display: grid; gap: var(--e2); }
.campo label, .campo .rotulo { font-size: var(--a5); line-height: 20px; color: var(--texto2); font-weight: 600; }
.campo input, .campo select { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--raio-p); background: var(--poco); color: var(--texto);
  font-size: var(--l5); transition: box-shadow var(--t-micro) var(--curva), background-color var(--t-micro); }
.campo input::placeholder { color: oklch(0.75 0.02 203 / 0.6); }
.campo input:hover { background: oklch(from var(--poco) calc(l + 0.015) c h); }
.campo input:focus { outline: 0; box-shadow: 0 0 0 2px var(--primaria); }
.campo .msg { font-size: var(--a6); line-height: 16px; color: var(--texto3); min-height: 16px; }
.campo.erro input { box-shadow: 0 0 0 2px var(--perigo); }
.campo.erro .msg { color: var(--perigo); }
.campo.alerta input { box-shadow: 0 0 0 2px var(--alerta); }
.campo.alerta .msg { color: var(--alerta); }
.a-definir { display: inline-block; margin-left: var(--e2); padding: 2px 8px; border-radius: var(--raio-pill); background: var(--alerta-suave); color: var(--alerta); font-size: var(--a6); line-height: 16px; font-weight: 600; }

/* chips (R-28): fundo dessaturado, texto claro; aria-pressed = escolhido */
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.chip { padding: 8px 16px; min-height: 40px; border-radius: var(--raio-pill); background: var(--s3); color: var(--texto2); font-size: var(--a5); font-weight: 600;
  transition: background-color var(--t-micro) var(--curva), color var(--t-micro), transform var(--t-micro) var(--curva); }
.chip:hover { background: var(--s4); color: var(--texto); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--p-suave); color: var(--primaria); }
.chip-campo { width: 112px; min-height: 40px; padding: 8px 16px; border-radius: var(--raio-pill); background: var(--s2); font-size: var(--a5); }
.camp-centro .campo input { background: var(--s2); }
.chip-campo:focus { outline: 0; box-shadow: 0 0 0 2px var(--primaria); }
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--raio-pill); font-size: var(--a6); line-height: 16px; font-weight: 700; background: var(--s4); color: var(--texto2); }
.selo.util { background: var(--p-suave); color: var(--primaria); }
.selo.mkt { background: var(--alerta-suave); color: var(--alerta); }

/* card e caixa: SEM borda. A borda e percebida pelo tom acima, padding uniforme e sombra suave (A4 secao 5) */
.card, .caixa, [data-card] { position: relative; background: var(--s2); border: 0; border-radius: var(--raio); padding: var(--e6); box-shadow: var(--sombra-1); }
.card.elevado { background: var(--s3); box-shadow: var(--sombra-2); }
/* SpotlightCard portado (gerar_bu_v4 linha 185): luz que segue o mouse */
.spot { overflow: hidden; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), oklch(0.86 0.115 190 / 0.12), transparent 60%); }
.spot:hover::before { opacity: 1; }
.w { display: inline-block; will-change: transform, filter, opacity; }

/* ---------- 1. LANDING ---------- */
.lp-topo { display: flex; justify-content: center; align-items: center; padding: var(--e6) var(--e4); }
.marca { display: inline-flex; align-items: center; gap: var(--e3); }
.marca-logo { height: 40px; width: auto; }
.marca-sep { color: var(--texto3); font-size: var(--l4); }
.marca-nome { font-size: var(--l4); line-height: var(--l4-a); font-weight: 700; letter-spacing: -.01em; }
.bloco { max-width: var(--largura); margin: 0 auto; padding: var(--e24) var(--e8); }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e16); align-items: center; padding-top: var(--e12); min-height: min(680px, calc(100vh - 88px)); }
.hero-texto { display: grid; gap: var(--e8); align-content: center; }
.hero-titulo { font-size: var(--l1); line-height: var(--l1-a); letter-spacing: -.025em; font-weight: 800; max-width: 11.5em; }
.hero-legenda { font-size: var(--l4); line-height: var(--l4-a); color: var(--texto2); max-width: 32em; }
.hero-acoes { display: flex; gap: var(--e3); flex-wrap: wrap; }
.hero-visual { position: relative; min-height: 440px; display: grid; place-items: center; }
.secao-titulo { font-size: var(--l2); line-height: var(--l2-a); letter-spacing: -.02em; font-weight: 800; max-width: 18em; margin-bottom: var(--e12); }
.lp-casos { max-width: 1040px; }
.casos-lista { display: grid; gap: var(--e4); }
.caso { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--e8); align-items: center; min-height: 152px; padding: var(--e6) var(--e8) var(--e6) var(--e6); }
.caso-visual { min-height: 104px; border-radius: var(--raio-p); background: var(--s1); display: grid; place-items: center; padding: var(--e3); overflow: hidden; }
.caso-texto { display: grid; gap: var(--e2); }
.caso-nicho { font-size: var(--l6); line-height: var(--l6-a); color: var(--primaria); font-weight: 700; }
.caso-titulo { font-size: var(--l4); line-height: var(--l4-a); font-weight: 700; }
.caso-historia { font-size: var(--l5); line-height: var(--l5-a); color: var(--texto2); }
.mini-balao { max-width: 100%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--s4); font-size: var(--l6); line-height: var(--l6-a); color: var(--texto2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-momento { font-size: var(--l6); font-weight: 700; color: var(--primaria); margin-bottom: var(--e2); text-align: center; }
.autoridade-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); }
.prova { display: grid; gap: var(--e3); align-content: start; padding: var(--e8) var(--e6); }
.prova-icone { width: 48px; height: 48px; border-radius: var(--raio-p); display: grid; place-items: center; background: var(--p-suave); color: var(--primaria); }
.prova-icone svg { width: 24px; height: 24px; }
.prova h3 { font-size: var(--l4); line-height: var(--l4-a); }
.prova p { color: var(--texto2); font-size: var(--l6); line-height: var(--l6-a); }
.lp-contato { text-align: center; }
.contato-painel { display: grid; justify-items: center; gap: var(--e6); padding: var(--e16) var(--e8); border-radius: var(--raio-g); background: var(--s1); }
.contato-painel .secao-titulo { margin: 0; }
.contato-painel p { font-size: var(--l4); line-height: var(--l4-a); color: var(--texto2); max-width: 30em; }
.lp-rodape { display: flex; justify-content: center; gap: var(--e6); flex-wrap: wrap; padding: var(--e8) var(--e4) var(--e12); font-size: var(--l6); color: var(--texto3); }
.lp-rodape button { color: var(--texto3); font-size: var(--l6); }
.lp-rodape button:hover { color: var(--texto); }

/* ---------- 2. LOGIN (2 metades com grande contraste) ---------- */
.login-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.login-esq { background: var(--lado-a); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e8); padding: var(--e12) var(--e8); }
.login-logo { height: 48px; width: auto; }
.login-cartao { width: min(440px, 100%); display: grid; gap: var(--e6); padding: var(--e8); background: var(--s2); }
.login-abas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e1); padding: var(--e1); border-radius: var(--raio-p); background: var(--poco); }
.login-abas button { min-height: 40px; border-radius: 8px; font-weight: 700; font-size: var(--a5); color: var(--texto3); transition: background-color var(--t-micro) var(--curva), color var(--t-micro); }
.login-abas button[aria-selected="true"] { background: var(--s3); color: var(--texto); }
.login-titulo { font-size: var(--a1); line-height: 32px; letter-spacing: -.02em; font-weight: 800; }
.login-sub { color: var(--texto2); font-size: var(--l6); line-height: var(--l6-a); }
.form { display: grid; gap: var(--e4); }
.form .btn { width: 100%; margin-top: var(--e2); }
.onb-passos { display: flex; gap: var(--e2); align-items: center; }
.onb-passo { height: 6px; flex: 1; border-radius: 3px; background: var(--s4); transition: background-color var(--t-bloco) var(--curva); }
.onb-passo.feito, .onb-passo.atual { background: var(--primaria); }
.onb-rodape { display: flex; justify-content: space-between; gap: var(--e3); margin-top: var(--e2); }
.onb-rodape .btn { width: auto; margin: 0; }
/* 1933 (09/11/2026): saidas discretas do cartao de login (voltar ao inicio; sair da conta errada no onboarding) */
.login-saida, .login-voltar { text-align: center; font-size: var(--a6); line-height: 16px; color: var(--texto3); }
.login-saida .link, .login-voltar .link { padding: 0; min-height: 0; background: none; color: var(--texto3); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.login-saida .link:hover, .login-voltar .link:hover { color: var(--texto2); }
.login-dir { position: relative; background: var(--lado-b); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e8);
  padding: var(--e12) var(--e8); overflow: hidden; }
.login-loop { position: relative; width: min(420px, 100%); aspect-ratio: 1 / 1; display: grid; place-items: center; }
.login-frase { font-size: var(--l4); line-height: var(--l4-a); font-weight: 700; text-align: center; max-width: 22em; color: var(--texto); }

/* ---------- 3. DASHBOARD ---------- */
.app-largura { max-width: var(--largura); margin: 0 auto; padding: var(--e12) var(--e8) var(--e16); }
.dash-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e10); padding-top: var(--e4); }
.dash-nome { font-size: var(--a1); line-height: 32px; font-weight: 800; letter-spacing: -.01em; }
.dash-acoes { display: flex; gap: var(--e2); }
/* audio 3546 do Cassiano (14/11/2026; decisoes/2704): no painel o nome fica bem maior que o menu ("desproporcional"), cresce para
   cima e divide com o menu a linha de base; a logo da empresa (so do painel) fica colada a esquerda do nome, com a altura da linha
   do titulo. Nome comprido corta com reticencias e nunca empurra o menu. Admin e Clientes (mesma .dash-topo) nao mudam. */
.dash-topo-painel { --titulo: var(--l2); --titulo-a: var(--l2-a); align-items: baseline; }
.dash-marca { display: flex; align-items: center; gap: var(--e3); flex: 1 1 auto; min-width: 0; }
.dash-topo-painel .dash-nome { align-self: baseline; min-width: 0; font-size: var(--titulo); line-height: var(--titulo-a); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: var(--e2); margin-block: calc(-1 * var(--e2)); }   /* a folga so evita cortar acento e perna de letra */
.dash-logo { flex: none; height: var(--titulo-a); width: auto; max-width: 200px; object-fit: contain; border-radius: var(--e2); }
.dash-topo-painel .dash-acoes { flex: none; }
.dash-linha1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4); margin-bottom: var(--e4); }
.dash-linha2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--e4); align-items: stretch; }
.dash-cards4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--e4); }
.metrica { display: grid; align-content: space-between; gap: var(--e4); min-height: 136px; }
.metrica-rotulo { font-size: var(--a5); line-height: 20px; color: var(--texto2); font-weight: 600; }
.metrica-valor { font-size: var(--a1); line-height: 32px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.metrica-destaque .metrica-valor { color: var(--primaria); }
.metrica-sub { display: flex; gap: var(--e6); flex-wrap: wrap; font-size: var(--a5); line-height: 20px; color: var(--texto3); }
.metrica-sub b { color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.metrica.mudou .metrica-valor, .metrica-sub b.mudou { color: var(--primaria); }
/* 1916 (09/11/2026): card "Campanhas ativas" abre a lista de campanhas; os 4 cards pequenos tem grafico de 7 dias (faisca) */
.metrica-botao { cursor: pointer; transition: background-color var(--t-micro) var(--curva), transform var(--t-micro) var(--curva); }
.metrica-botao:hover { background: var(--s3); }
.metrica-botao:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.metrica-dica { display: block; font-size: var(--a6); line-height: 16px; color: var(--texto3); font-weight: 600; }
.metrica-mini { gap: var(--e2); }
.metrica-cab { display: grid; gap: 2px; }
.faisca { height: 40px; min-width: 0; }
.faisca svg { display: block; width: 100%; height: 40px; overflow: visible; }
.faisca-linha { fill: none; stroke: var(--texto3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faisca-atual { fill: none; stroke: var(--primaria); stroke-width: 2; stroke-linecap: round; }
.faisca-ponto { fill: var(--primaria); stroke: var(--s2); stroke-width: 2; }
.faisca-hit { fill: transparent; }
.camp-lista { display: grid; gap: var(--e2); }
.camp-item { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--raio-p); background: var(--s2); }
.camp-item b { display: block; font-size: var(--a5); line-height: 20px; }
.camp-acoes { display: flex; gap: var(--e2); flex: none; }
.pl-status.encerrada { color: var(--texto3); text-decoration: line-through; }
.planilha { display: grid; grid-template-rows: auto 1fr; gap: var(--e4); padding: var(--e6); min-width: 0; }
.planilha-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.planilha-cab h2 { font-size: var(--a3); line-height: 24px; }
.pl-grade { display: grid; align-content: start; font-size: var(--a5); line-height: 20px; min-width: 0; }
.pl-linha { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); gap: var(--e3); align-items: center; padding: 12px var(--e3); border-radius: 8px; }
.pl-linha > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.pl-linha.pl-cab { color: var(--texto3); font-size: var(--a6); font-weight: 700; padding-top: 0; }
.pl-linha:not(.pl-cab):nth-child(even) { background: oklch(1 0 0 / 0.025); }
.pl-nome { font-weight: 700; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-status { display: block; font-size: var(--a6); font-weight: 600; color: var(--texto3); }
.pl-status.ativa { color: var(--primaria); }
.pl-linha.nova { background: var(--p-suave) !important; }

/* ---------- 4. CAMPANHA (Ads Manager: indice fino | etapa atual | preview) ---------- */
.camp-grade { display: grid; grid-template-columns: 184px minmax(0, 1fr) minmax(0, 440px); min-height: 100vh; align-items: start; }
.camp-indice { position: sticky; top: 0; height: 100vh; background: var(--s1); padding: var(--e12) var(--e2) var(--e6); display: flex; flex-direction: column; gap: var(--e1); z-index: 2; }
.indice-sair { margin: 0 0 var(--e6) var(--e1); align-self: flex-start; }
.indice-item { display: flex; align-items: center; gap: var(--e3); width: 100%; padding: 10px var(--e3); border-radius: var(--raio-p); text-align: left; color: var(--texto3);
  font-size: var(--a5); line-height: 20px; font-weight: 600; transition: background-color var(--t-micro) var(--curva), color var(--t-micro); }
.indice-item:hover { background: var(--s2); color: var(--texto); }
.indice-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); font-size: var(--a6); font-weight: 800; color: var(--texto2);
  transition: background-color var(--t-micro) var(--curva), color var(--t-micro); }
.indice-item[aria-current="step"] { background: var(--s3); color: var(--texto); }
.indice-item[aria-current="step"] .indice-num { background: var(--primaria); color: var(--sobre-primaria); }
.indice-item.feita .indice-num { background: var(--p-suave); color: var(--primaria); }
.camp-centro { min-height: 100vh; padding: var(--e12) var(--e12) var(--e8); display: flex; flex-direction: column; min-width: 0; }
.etapa { flex: 1; display: flex; flex-direction: column; gap: var(--e8); }
.etapa-cab { display: grid; gap: var(--e2); }
.etapa-num { font-size: var(--a5); line-height: 20px; color: var(--primaria); font-weight: 800; font-variant-numeric: tabular-nums; }
.etapa-titulo { font-size: var(--a1); line-height: 32px; letter-spacing: -.01em; font-weight: 800; }
.etapa-instrucao { color: var(--texto2); font-size: var(--a4); line-height: 24px; }
.etapa-corpo { display: grid; gap: var(--e8); align-content: start; }
.bloco-etapa { display: grid; gap: var(--e3); }
.bloco-etapa > h3 { font-size: var(--a4); line-height: 24px; font-weight: 700; }
.etapa-pe { margin-top: auto; padding-top: var(--e8); display: flex; justify-content: space-between; align-items: center; gap: var(--e3); min-height: 80px; }
.etapa-pe .vazio { flex: 1; }
.upload { display: grid; justify-items: center; gap: var(--e3); padding: var(--e8) var(--e6); border-radius: var(--raio); background: var(--s2); text-align: center; color: var(--texto2);
  transition: background-color var(--t-micro) var(--curva), box-shadow var(--t-micro); cursor: pointer; }
.upload svg { width: 40px; height: 40px; flex: none; color: var(--primaria); }
.upload:hover, .upload.sobre { background: var(--s3); }
.upload.sobre { background: var(--p-suave); }
.upload b { color: var(--texto); }
.upload small { font-size: var(--a6); color: var(--texto3); }
.upload-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; justify-content: center; }
/* audio 3540 (14/11/2026): etapa 1, "Escolher clientes". A lista reusa .adm-lista/.adm-linha, a busca .cl-busca e o selo .selo.util;
   novo aqui e so a rolagem, as 2 colunas e a linha marcada (o fundo do chip escolhido, com o selo "escolhido" a vista) */
.esc-lista { max-height: 336px; overflow-y: auto; }
.esc-linha { grid-template-columns: minmax(0, 1fr) auto; width: 100%; text-align: left; }
.esc-linha:hover:not(:disabled) { background: var(--s3); }
.esc-linha:disabled { opacity: .5; cursor: default; }
.esc-lista .esc-linha[aria-pressed="true"] { background: var(--p-suave); }
.esc-linha[aria-pressed="false"] .esc-marca { visibility: hidden; }
.provedores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.provedor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e3); padding: var(--e4); background: var(--s2); }
.provedor b { display: block; font-size: var(--a5); line-height: 20px; }
.provedor small { display: block; font-size: var(--a6); line-height: 16px; color: var(--texto3); }
.aviso-campo { font-size: var(--a5); line-height: 20px; padding: var(--e3) var(--e4); border-radius: var(--raio-p); }
.aviso-campo.erro { background: var(--perigo-suave); color: var(--perigo); }
.aviso-campo.alerta { background: var(--alerta-suave); color: var(--alerta); }
.aviso-campo.ok { background: var(--p-suave); color: var(--primaria); }
.base-n { font-size: var(--a2); line-height: 28px; font-weight: 700; }
.base-n b { color: var(--primaria); font-variant-numeric: tabular-nums; }
.linha-chips { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.linha-horario { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.linha-horario label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--a5); font-weight: 600; color: var(--texto2); }
.linha-horario .chip-campo { width: 168px; }   /* 1915 (09/11/2026): cabe "09:00 AM" em Chrome com relogio de 12 h */
/* 1915 (09/11/2026): "Criar meu modelo" (modal #modal-modelo) e os cards do cliente na galeria da E3 */
.modal-caixa.modal-modelo { width: min(640px, 100%); }
.modelo-form { display: grid; gap: var(--e4); }
.modelo-form .campo input { background: var(--s1); }
.campo textarea { width: 100%; min-height: 128px; padding: 12px 16px; border-radius: var(--raio-p); background: var(--s1); color: var(--texto);
  font-size: var(--l5); line-height: 22px; resize: vertical; transition: box-shadow var(--t-micro) var(--curva); }
.campo textarea::placeholder { color: oklch(0.75 0.02 203 / 0.6); }
.campo textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--primaria); }
.campo.erro textarea { box-shadow: 0 0 0 2px var(--perigo); }
.chip-var { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--a6); padding: 6px 12px; min-height: 32px; background: var(--p-suave); color: var(--primaria); }
.chip-var:hover { background: var(--primaria); color: var(--sobre-primaria); }
.modelo-previa { display: grid; gap: var(--e2); }
.modelo-previa .balao { max-width: 100%; white-space: pre-wrap; }
.modelo-previa .balao .var { color: var(--primaria); font-weight: 700; }
.modelo-previa .balao .falta { color: var(--alerta); font-weight: 700; }
.modelo.meu-cta { background: var(--p-suave); cursor: default; }
.modelo.meu-cta .modelo-texto { color: var(--texto); }
.modelo.pendente { cursor: default; opacity: .78; }
.modelo .selo.meu { background: var(--primaria); color: var(--sobre-primaria); }
.galeria > .etapa-instrucao { grid-column: 1 / -1; }
.contagem { font-size: var(--a5); color: var(--texto3); font-weight: 600; }
.contagem b { color: var(--primaria); }
.slots { display: grid; gap: var(--e2); }
/* 1932 (09/11/2026): na etapa 3 todos os grupos ficam na tela, um embaixo do outro; o da vez em destaque, os outros mais apagados (nada "some") */
.bloco-etapa.outro { opacity: .62; transition: opacity var(--t-micro) var(--curva); }
.bloco-etapa.outro:hover { opacity: .9; }
.slot { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--e3); align-items: center; min-height: 52px; padding: var(--e2) var(--e3); border-radius: var(--raio-p); background: var(--s2); font-size: var(--a5); }
.slot.vazio { background: oklch(1 0 0 / 0.02); color: var(--texto3); }
.slot-ordem { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--s4); font-size: var(--a6); font-weight: 800; }
.slot:not(.vazio) .slot-ordem { background: var(--primaria); color: var(--sobre-primaria); }
.slot-quando { font-size: var(--a6); color: var(--texto3); display: block; }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.modelo { display: grid; gap: var(--e2); align-content: start; padding: var(--e4); background: var(--s2); cursor: pointer; transition: background-color var(--t-micro) var(--curva), transform var(--t-micro) var(--curva), box-shadow var(--t-micro); }
.modelo:hover, .modelo.vendo { background: var(--s3); }
.modelo.vendo { background: var(--s4); box-shadow: var(--sombra-2); }
.modelo.escolhido { background: var(--s3); }
.modelo-topo { display: flex; justify-content: space-between; gap: var(--e2); align-items: center; }
.modelo-nome { font-size: var(--a5); line-height: 20px; font-weight: 700; }
.modelo-quando { font-size: var(--a6); line-height: 16px; color: var(--texto3); }
.modelo-texto { font-size: var(--a6); line-height: 16px; color: var(--texto2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modelo-acoes { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); margin-top: var(--e1); }
.revisao-cena { perspective: 1200px; }
.revisao-cam { display: grid; gap: var(--e3); transform-style: preserve-3d; transform: rotateX(var(--tiltx)) rotateY(var(--tilty)); }
.camada-rev { display: grid; gap: var(--e2); padding: var(--e5) var(--e6); transform: translateZ(var(--z, 0px)); }
.camada-rev h3 { font-size: var(--a5); line-height: 20px; color: var(--texto3); font-weight: 700; }
.camada-rev .grande { font-size: var(--a2); line-height: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.camada-rev .grande em { font-style: normal; color: var(--primaria); }
.seq { display: flex; flex-wrap: wrap; gap: var(--e2); }
.seq span { padding: 4px 12px; border-radius: var(--raio-pill); background: var(--s4); font-size: var(--a6); line-height: 16px; }
.seq span.depois { background: var(--alerta-suave); color: var(--alerta); }
.seq span.pago { background: var(--p-suave); color: var(--primaria); }

/* preview (direita): calculadora fixa a partir da E2 + a "peca" 3D */
.camp-preview { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--s1); padding: var(--e12) var(--e6) var(--e6); display: flex; flex-direction: column; gap: var(--e4); }
.preview-rotulo { font-size: var(--a6); line-height: 16px; color: var(--texto3); font-weight: 700; letter-spacing: .02em; }
.calc { display: grid; gap: var(--e3); padding: var(--e5); background: var(--s2); }
.calc-topo { display: flex; justify-content: space-between; align-items: center; }
.calc-topo h3 { font-size: var(--a5); line-height: 20px; color: var(--texto2); }
.calc-conta { font-size: var(--a5); line-height: 20px; color: var(--texto2); font-variant-numeric: tabular-nums; }
.calc-conta b { color: var(--texto); }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.calc-total .valor { font-size: var(--a1); line-height: 32px; font-weight: 800; color: var(--primaria); font-variant-numeric: tabular-nums; }
.calc-nota { font-size: var(--a6); line-height: 16px; color: var(--texto3); }
.calc.confirmou { animation: ed-pulso .6s var(--curva); }
@keyframes ed-pulso { 40% { box-shadow: var(--sombra-1), 0 0 0 4px var(--p-suave); } }
.resultado { display: grid; gap: var(--e3); padding: var(--e5); background: var(--s2); }
.resultado-nums { display: flex; gap: var(--e6); }
.resultado-nums b { display: block; font-size: var(--a1); line-height: 32px; font-weight: 800; color: var(--primaria); font-variant-numeric: tabular-nums; }
.resultado-nums span { font-size: var(--a6); color: var(--texto3); }
.venc-lista { display: grid; gap: var(--e1); font-size: var(--a6); line-height: 16px; }
.venc-lista div { display: flex; justify-content: space-between; gap: var(--e2); padding: 6px 8px; border-radius: 6px; }
.venc-lista div:nth-child(odd) { background: oklch(1 0 0 / 0.025); }
/* E3 (1915, 09/11/2026): a direita mostra SO os modelos do grupo da vez; sem previa flutuante nem projecao */
.camp-preview .galeria { grid-template-columns: minmax(0, 1fr); }
.galeria.chamar .modelo { animation: ed-pulso .6s var(--curva); }
.grupo-nav { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.grupo-nav .chip.feita::before { content: '✓ '; color: var(--primaria); }
.grupo-nav .chip[disabled] { opacity: .45; cursor: not-allowed; }
.camp-preview .modelo { padding: var(--e3) var(--e4); }
.camp-preview .modelo-texto { display: block; -webkit-line-clamp: unset; overflow: visible; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: oklch(0.30 0.03 205); color: var(--texto); }
.peca-cena { position: relative; flex: none; height: 460px; display: grid; place-items: center; perspective: 1500px; touch-action: pan-y; cursor: grab; user-select: none; overflow: visible; }
.peca-cena.girando { cursor: grabbing; }
.peca-tilt { transform-style: preserve-3d; transform: rotateX(var(--tiltx)) rotateY(var(--tilty)); }
.peca-cam { position: relative; transform-style: preserve-3d; transform: scale(var(--k, 1)) rotateX(var(--incl, 38deg)) rotateZ(var(--giro, -14deg)); }
.peca-cena { will-change: auto; }
.peca-cena.girando .peca-cam { will-change: transform; }
.fone { position: relative; width: 236px; height: 420px; border-radius: 36px; padding: 10px; background: oklch(0.13 0.01 220); box-shadow: var(--sombra-3); transform-style: preserve-3d; }
.fone-tela { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: oklch(0.21 0.02 200); display: flex; flex-direction: column; }
/* telefone na escala do app (R-19: nada abaixo de 12) e espacos multiplos de 4 (R-15); ajuste B0 08/11 apos o T1 */
.fone-cab { display: flex; align-items: center; gap: var(--e2); padding: 28px 12px 8px; background: oklch(0.26 0.03 205); font-size: var(--a6); line-height: 16px; }
.fone-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria); display: grid; place-items: center; font-weight: 800; font-size: var(--a6); line-height: 16px; }
.fone-cab small { display: block; color: var(--texto3); font-size: var(--a6); line-height: 16px; }
.fone-conversa { flex: 1; display: flex; flex-direction: column; gap: var(--e2); padding: 12px 8px; overflow: hidden; justify-content: flex-end; }
.balao { align-self: flex-start; max-width: 92%; padding: 8px 8px 4px; border-radius: 4px 12px 12px 12px; background: oklch(0.30 0.03 205); font-size: var(--a6); line-height: 16px; color: var(--texto); box-shadow: 0 1px 2px oklch(0 0 0 / 0.2); }
.balao small { display: block; font-size: var(--a6); line-height: 16px; color: var(--texto3); margin-bottom: 0; font-weight: 700; }
.balao .balao-botao { display: block; margin-top: 8px; text-align: center; color: var(--primaria); font-weight: 700; background: oklch(1 0 0 / 0.04); border-radius: 8px; padding: 4px; }
.balao.grande { font-size: var(--a5); line-height: 20px; max-width: 100%; padding: 12px 12px 8px; }
.balao.exemplo { opacity: .55; }
.camada { position: absolute; left: 50%; top: 50%; padding: 8px 12px; border-radius: var(--raio-p); background: var(--s4); box-shadow: var(--sombra-2); font-size: var(--a6); line-height: 16px; white-space: nowrap; transform-style: preserve-3d; pointer-events: none; }
.camada b { color: var(--primaria); font-variant-numeric: tabular-nums; }
.camada-clientes { transform: translate(-150%, -230%) translateZ(70px); }
.camada-orcamento { transform: translate(40%, -120%) translateZ(110px); }
.camada-custo { transform: translate(-120%, 210%) translateZ(90px); }
.convite { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--raio-pill); background: var(--s3); font-size: var(--a6); line-height: 16px; color: var(--texto2); pointer-events: none; white-space: nowrap; }
body.p3-arrastando { user-select: none; cursor: grabbing; }

/* ---------- 5. MODAL (nao e tela): centro, margem em todos os lados, fundo desfocado ---------- */
.modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: var(--e8); background: oklch(0.172 0.021 219 / 0.42);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity var(--t-micro) var(--curva), visibility 0s linear var(--t-micro); }
.modal.aberto { opacity: 1; visibility: visible; transition: opacity var(--t-micro) var(--curva), visibility 0s; }
.modal-caixa { width: min(560px, 100%); max-height: calc(100vh - 64px); overflow-y: auto; display: grid; gap: var(--e6); padding: var(--e8); background: var(--s3); box-shadow: var(--sombra-3); border-radius: var(--raio-g); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.modal-cab h2 { font-size: var(--a2); line-height: 28px; }
.perfil-topo { display: flex; gap: var(--e4); align-items: center; }
.perfil-avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--primaria); color: var(--sobre-primaria); font-weight: 800; font-size: var(--a2); flex: none; }
.perfil-topo b { display: block; font-size: var(--a3); line-height: 24px; }
.perfil-topo > div > span { color: var(--texto3); font-size: var(--a5); }
.perfil-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.perfil-campos .campo input { background: var(--s1); }
.consumo { display: grid; gap: var(--e2); padding: var(--e4); border-radius: var(--raio-p); background: var(--s2); }
.consumo-topo { display: flex; justify-content: space-between; font-size: var(--a5); }
.consumo-barra { height: 8px; border-radius: 4px; background: var(--s0); overflow: hidden; }
.consumo-barra i { display: block; height: 100%; border-radius: 4px; background: var(--primaria); transform-origin: left; }
.modal-acoes { display: flex; justify-content: space-between; gap: var(--e3); }
/* 1915 (09/11/2026): modal de configuracoes (abas a esquerda, como o modal de conta do Claude) */
.modal-caixa.modal-config { width: min(860px, 100%); grid-template-columns: 216px minmax(0, 1fr); grid-template-areas: 'cab cab' 'nav pane'; column-gap: var(--e6); row-gap: var(--e5); }
.modal-config .modal-cab { grid-area: cab; }
.cfg-nav { grid-area: nav; display: grid; align-content: start; gap: 4px; }
.cfg-quem { display: grid; gap: 2px; padding: 4px 12px 12px; }
.cfg-quem b { font-size: var(--a5); line-height: 20px; }
.cfg-quem span { font-size: var(--a6); line-height: 16px; color: var(--texto3); overflow-wrap: anywhere; }
.cfg-item { text-align: left; padding: 10px 12px; border-radius: var(--raio-p); font-size: var(--a5); line-height: 20px; font-weight: 600; color: var(--texto2); transition: background-color var(--t-micro) var(--curva), color var(--t-micro); }
.cfg-item:hover { background: var(--s4); color: var(--texto); }
.cfg-item[aria-pressed="true"] { background: var(--p-suave); color: var(--primaria); }
.cfg-sair { margin-top: var(--e4); justify-self: start; }
.cfg-pane { grid-area: pane; display: grid; gap: var(--e3); align-content: start; min-height: 360px; }
.cfg-pane h3 { font-size: var(--a3); line-height: 24px; margin-bottom: var(--e2); }
.cfg-pane .perfil-campos { margin-top: var(--e2); }
.cfg-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding: 12px 0; border-bottom: 1px solid var(--s4); }
.cfg-linha:last-child { border-bottom: 0; }
.cfg-rot b { display: block; font-size: var(--a5); line-height: 20px; }
.cfg-rot span { display: block; font-size: var(--a6); line-height: 16px; color: var(--texto3); margin-top: 2px; }
.cfg-ctrl { flex: none; display: flex; align-items: center; gap: var(--e2); font-size: var(--a5); text-align: right; }
.cfg-ctrl b { font-variant-numeric: tabular-nums; }
.cfg-acoes { display: flex; justify-content: flex-end; }
@media (max-width: 640px) {
  .modal-caixa.modal-config { grid-template-columns: 1fr; grid-template-areas: 'cab' 'nav' 'pane'; }
  .cfg-nav { display: flex; flex-wrap: wrap; gap: var(--e2); }
  .cfg-quem { display: none; }
  .cfg-sair { margin-top: 0; }
  .cfg-linha { flex-wrap: wrap; }
}

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: var(--e6); transform: translateX(-50%); z-index: 950; display: grid; gap: var(--e2); width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--e3); align-items: start; padding: var(--e4); border-radius: var(--raio-p); background: var(--s4); box-shadow: var(--sombra-3); font-size: var(--a5); line-height: 20px; pointer-events: auto; }
.toast svg { width: 24px; height: 24px; color: var(--sucesso); }
.toast.erro svg { color: var(--perigo); }
.toast.alerta svg { color: var(--alerta); }
.toast b { display: block; }
.toast span { color: var(--texto2); }

/* ---------- barra do avaliador (NAO faz parte do produto) ---------- */
.avaliador { position: fixed; top: 8px; right: 8px; z-index: 1000; max-width: calc(100vw - 16px); font-size: var(--a6); line-height: 16px; color: var(--texto2);
  background: oklch(0.245 0.026 218 / 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--raio-p); box-shadow: var(--sombra-2); }
.avaliador-abre { display: flex; align-items: center; gap: var(--e2); padding: 6px 10px; font-size: var(--a6); color: var(--texto2); }
.avaliador-abre b { color: var(--primaria); }
.avaliador-corpo { display: none; padding: 4px 10px 10px; width: 300px; max-width: calc(100vw - 16px); }
.avaliador.aberto .avaliador-corpo { display: grid; gap: var(--e2); }
.avaliador-rotulo { color: var(--texto3); }
.avaliador-linha { display: flex; flex-wrap: wrap; gap: 4px; }
.avaliador-linha button { padding: 4px 8px; border-radius: 6px; background: var(--s2); font-size: var(--a6); color: var(--texto2); }
.avaliador-linha button:hover:not(:disabled) { background: var(--s4); color: var(--texto); }
.avaliador-linha button[aria-pressed="true"] { background: var(--primaria); color: var(--sobre-primaria); font-weight: 700; }
.avaliador-linha button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- breakpoint 1024 ---------- */
@media (max-width: 1024px) {
  .bloco { padding: var(--e16) var(--e6); }
  .lp-hero { gap: var(--e10); padding-top: var(--e8); }
  .hero-titulo { font-size: var(--l2); line-height: var(--l2-a); }
  .secao-titulo { font-size: var(--l3); line-height: var(--l3-a); }
  .autoridade-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caso { grid-template-columns: 200px minmax(0, 1fr); gap: var(--e6); }
  .camp-grade { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 340px); }
  .indice-tit { display: none; }
  .indice-item { justify-content: center; padding: 10px 0; }
  .indice-sair { margin-left: 0; align-self: center; }
  .indice-sair .txt { display: none; }
  .camp-centro { padding: var(--e10) var(--e8) var(--e6); }
  .galeria, .provedores { grid-template-columns: minmax(0, 1fr); }
  .dash-linha2 { grid-template-columns: minmax(0, 1fr); }
  .peca-cena { height: 420px; }
}

/* ---------- breakpoint 390 (vale de 320 a 640) ---------- */
@media (max-width: 640px) {
  .bloco { padding: var(--e12) var(--e4); }
  .lp-topo { padding: var(--e12) var(--e4) 0; }
  .avaliador-abre .av-rot, .avaliador-abre .av-tela { display: none; }
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--e8); padding-top: var(--e6); min-height: 0; }
  .hero-texto { gap: var(--e6); }
  .hero-titulo { font-size: var(--l2); line-height: var(--l2-a); }
  .hero-legenda { font-size: var(--l5); line-height: var(--l5-a); }
  .hero-acoes .btn { flex: 1; }
  .hero-visual { min-height: 340px; }
  .secao-titulo { font-size: var(--l3); line-height: var(--l3-a); margin-bottom: var(--e8); }
  .caso { grid-template-columns: minmax(0, 1fr); gap: var(--e4); padding: var(--e4); }
  .autoridade-grade { grid-template-columns: minmax(0, 1fr); }
  .contato-painel { padding: var(--e10) var(--e4); }
  .login-grade { grid-template-columns: minmax(0, 1fr); }
  .login-esq { padding: var(--e10) var(--e4); }
  .login-cartao { padding: var(--e6) var(--e4); }
  .login-dir { padding: var(--e10) var(--e4); }
  .login-loop { width: min(300px, 100%); }
  .app-largura { padding: var(--e12) var(--e4) var(--e12); }
  .dash-linha1, .dash-linha2 { grid-template-columns: minmax(0, 1fr); }
  .pl-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 4px; }
  .pl-linha > span:first-child { grid-column: 1 / -1; }
  .pl-linha > span:not(:first-child) { text-align: left; }
  .pl-linha.pl-cab { display: none; }
  .pl-linha > span[data-r]::before { content: attr(data-r) " "; color: var(--texto3); font-size: var(--a6); }
  .camp-grade { display: block; }
  .camp-indice { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: var(--e1); padding: var(--e12) var(--e3) var(--e2); overflow-x: auto; }
  .indice-sair { margin: 0 var(--e1) 0 0; }
  .indice-item { flex: none; width: auto; padding: 8px 10px; justify-content: flex-start; }
  .indice-item[aria-current="step"] .indice-tit { display: inline; }
  .camp-centro { min-height: 0; padding: var(--e6) var(--e4); }
  /* X-largura E2/E4 (T1, 08/11): a camada "orcamento" (nowrap, translate 40% + translateZ 110px) saia 8-15 px da direita em repouso.
     Em 320-640 ela nasce a partir do centro do celular (cabe em 320, 360 e 390); o clip so segura o giro livre por arrastar, quando a camada 3D sai do quadro de proposito */
  .camp-preview { position: static; height: auto; overflow: visible; overflow-x: clip; padding: var(--e6) var(--e4) var(--e12); }
  .camada-orcamento { transform: translate(0%, -120%) translateZ(110px); }
  .peca-cena { height: 400px; }
  .perfil-campos { grid-template-columns: minmax(0, 1fr); }
  .modal { padding: var(--e4); }
  .modal-caixa { padding: var(--e6) var(--e4); max-height: calc(100vh - 32px); }
}

/* ---------- admin na v04 (1934, 09/11/2026): destinatarios de teste + envios de teste numa pagina so; sem borda, sem linha ---------- */
.adm-sub { font-size: var(--a5); line-height: 20px; color: var(--texto3); margin-top: 2px; }
.adm-sub b { color: var(--texto); font-weight: 700; }
.dash-admin { align-self: center; }
.adm-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4); margin-bottom: var(--e4); align-items: start; }
.adm-card h2, .adm-caixa h2 { font-size: var(--a3); line-height: 24px; font-weight: 800; letter-spacing: -.01em; }
.adm-card h2 { margin-bottom: var(--e4); }
.adm-caixa h2 small { font-size: var(--a5); color: var(--texto3); font-weight: 700; margin-left: var(--e2); }
.adm-h3 { font-size: var(--a5); line-height: 20px; color: var(--texto3); font-weight: 700; margin: var(--e6) 0 var(--e2); }
.adm-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e3) var(--e4); }
.adm-form .adm-sim, .adm-form .adm-msg, .adm-form .adm-acoes { grid-column: 1 / -1; }
.adm-check { display: flex; align-items: center; gap: var(--e2); font-size: var(--a5); line-height: 20px; color: var(--texto2); font-weight: 600; cursor: pointer; }
.adm-check input { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--primaria); }
.adm-acoes { margin-top: var(--e2); }
.adm-caixa { margin-bottom: var(--e4); }
.adm-lista { display: grid; }
.adm-linha { display: grid; gap: var(--e3); align-items: center; padding: 10px var(--e3); border-radius: var(--raio-p); font-size: var(--a5); line-height: 20px; color: var(--texto2); }
.adm-linha:nth-child(even) { background: oklch(1 0 0 / 0.025); }
.adm-linha > span { min-width: 0; overflow-wrap: anywhere; }
.adm-linha b { color: var(--texto); font-weight: 700; }
.adm-linha small { display: block; font-size: var(--a6); line-height: 16px; color: var(--texto3); }
.adm-linha .selo { vertical-align: middle; }
.adm-aviso { grid-template-columns: 84px minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(0, 1.1fr); }
.adm-dest { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) 72px minmax(0, 1.4fr); }
.adm-conta { grid-template-columns: minmax(0, 1.8fr) 72px minmax(0, 1.2fr) 212px 96px; }
.adm-conta.atual { background: var(--p-suave); }
.adm-limite { display: flex; gap: var(--e2); align-items: center; }
.adm-limite input { width: 104px; min-height: 36px; padding: 6px 10px; border-radius: var(--raio-p); background: var(--poco); color: var(--texto); font-size: var(--a5); text-align: right; font-variant-numeric: tabular-nums; }
.adm-limite input:focus { outline: 0; box-shadow: 0 0 0 2px var(--primaria); }
.adm-parar { display: flex; gap: var(--e2); align-items: center; }
@media (max-width: 1024px) {
  .adm-grade { grid-template-columns: minmax(0, 1fr); }
  .adm-conta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 200px 80px; }
  .adm-conta > span:nth-child(2) { display: none; }
}
@media (max-width: 640px) {
  .adm .dash-topo { flex-direction: column; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e6); }
  .adm .dash-acoes { flex-wrap: wrap; }
  .adm-form { grid-template-columns: minmax(0, 1fr); }
  .adm-aviso, .adm-dest, .adm-conta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .adm-conta > span:nth-child(2) { display: block; }
  .adm-linha { padding-left: 0; padding-right: 0; }
  .adm-conta.atual { padding-left: var(--e2); padding-right: var(--e2); }
}

/* ---------- previa igual ao WhatsApp (1934, 09/11/2026) ----------
   Cores do WhatsApp (claro: fundo da conversa #efeae2, balao recebido branco, texto #111b21, cinza #667781, link #027eb5; escuro: fundo
   #0b141a, balao #202c33, texto #e9edef, cinza #8696a0, link #53bdeb). Fonte do sistema (Roboto/SF), 14,2 px, como no celular.
   O tema e do WhatsApp do cliente, nao do app: `html[data-wa-tema]` (botoes Claro/Escuro na galeria; fica no localStorage). */
.wa-tela { --wa-fundo: #efeae2; --wa-rabisco: rgba(60, 50, 40, .09); --wa-balao: #ffffff; --wa-texto: #111b21; --wa-texto2: #667781; --wa-link: #027eb5;
  --wa-filete: rgba(17, 27, 33, .08); --wa-topo: #008069; --wa-topo-texto: #ffffff; --wa-pill: #ffffff; --wa-pill-texto: #54656f; --wa-avatar: #dfe5e7; --wa-avatar-texto: #54656f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--wa-texto); background: var(--wa-fundo);
  border-radius: var(--raio-p); overflow: hidden; display: flex; flex-direction: column; text-align: left; }
html[data-wa-tema="escuro"] .wa-tela { --wa-fundo: #0b141a; --wa-rabisco: rgba(233, 237, 239, .05); --wa-balao: #202c33; --wa-texto: #e9edef; --wa-texto2: #8696a0; --wa-link: #53bdeb;
  --wa-filete: rgba(233, 237, 239, .1); --wa-topo: #202c33; --wa-topo-texto: #e9edef; --wa-pill: #182229; --wa-pill-texto: #8696a0; --wa-avatar: #6b7c85; --wa-avatar-texto: #cfd4d6; }
.wa-conversa { position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 12px 14px; }
.wa-conversa::before { content: ''; position: absolute; inset: 0; background: var(--wa-rabisco); pointer-events: none;
  -webkit-mask: url("/img/wa-rabisco.svg") 0 0 / 180px 180px repeat; mask: url("/img/wa-rabisco.svg") 0 0 / 180px 180px repeat; }   /* o rabisco do fundo, do proprio site (CSP) */
.wa-conversa > * { position: relative; }
.wa-msg { display: flex; }
.wa-balao { position: relative; max-width: 88%; min-width: 140px; background: var(--wa-balao); border-radius: 8px; border-top-left-radius: 0; padding: 6px 8px 8px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); font-size: 14.2px; line-height: 19px; color: var(--wa-texto); }
.wa-balao::before { content: ''; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: var(--wa-balao); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa-cab-txt { font-weight: 700; font-size: 15px; line-height: 20px; margin-bottom: 4px; }
.wa-cab-img { height: 110px; margin: -2px -4px 6px; border-radius: 6px; background: var(--wa-filete); display: grid; place-items: center; color: var(--wa-texto2); }
.wa-cab-img svg { width: 36px; height: 36px; fill: currentColor; opacity: .8; }
.wa-corpo { overflow-wrap: anywhere; }
.wa-corpo b { font-weight: 700; } .wa-corpo i { font-style: italic; } .wa-corpo s { text-decoration: line-through; }
.wa-corpo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.wa-corpo .var { font-weight: 700; color: var(--wa-link); }
.wa-rodape { margin-top: 4px; font-size: 13px; line-height: 17px; color: var(--wa-texto2); }
.wa-hora { display: block; text-align: right; font-size: 11px; line-height: 15px; color: var(--wa-texto2); margin-top: 2px; }
.wa-botoes { margin: 6px -8px -8px; border-top: 1px solid var(--wa-filete); }
.wa-botao { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 10px; color: var(--wa-link); font-size: 14px; line-height: 18px; font-weight: 500; }
.wa-botao + .wa-botao { border-top: 1px solid var(--wa-filete); }
.wa-botao svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.wa-pill { align-self: center; max-width: 100%; padding: 5px 12px; border-radius: 8px; background: var(--wa-pill); color: var(--wa-pill-texto); font-size: 12.5px; line-height: 16px; text-transform: uppercase; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-exemplo { display: flex; flex-direction: column; gap: 6px; opacity: .62; }
.wa-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--wa-topo); color: var(--wa-topo-texto); }
.wa-volta svg { width: 22px; height: 22px; display: block; stroke: currentColor; }
.wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--wa-avatar); color: var(--wa-avatar-texto); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.wa-quem { display: grid; line-height: 18px; min-width: 0; } .wa-quem b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-quem small { font-size: 12.5px; opacity: .85; }
/* onde ela aparece: galeria (so a conversa, compacta), previa do modal e o telefone da direita (tela inteira) */
.wa-tela.mini .wa-conversa { padding: 10px 8px 10px 14px; }
.wa-tela.mini .wa-balao, .wa-tela.previa .wa-balao { max-width: 100%; }
.wa-tela.mini .wa-hora { display: none; }
.wa-tela.previa .wa-conversa { padding: 14px 12px 14px 18px; min-height: 96px; }
.fone-tela.wa-fone .wa-tela { height: 100%; border-radius: 0; }
.wa-fone .wa-topo { padding-top: 30px; }
.wa-fone .wa-conversa { justify-content: flex-end; overflow: hidden; padding-bottom: 40px; }
.wa-fone .wa-balao { font-size: 12.5px; line-height: 17px; }
.wa-fone .wa-botao { min-height: 34px; font-size: 12.5px; }
.wa-fone .wa-pill { font-size: 11px; }
.preview-rotulo { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.wa-tema { display: inline-flex; gap: 4px; margin-left: auto; }
.chip-mini { min-height: 24px; padding: 2px 10px; font-size: var(--a6); line-height: 16px; }

/* bloco 5 (Cassiano 1932-1935 e 1939, 09/11/2026): cadastro e perfil da empresa; perfil do WhatsApp; plano em 2 blocos */
.campo label small, .campo .rotulo small { font-weight: 400; color: var(--texto3); }
.campo textarea.curta { min-height: 88px; }
.logo-ctrl { display: flex; align-items: center; gap: var(--e4); }
.logo-previa { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--primaria); color: var(--sobre-primaria); font-weight: 800; font-size: var(--a3); }
.logo-previa img, .perfil-avatar img, .wa-perfil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-avatar { overflow: hidden; }
/* audio 3546 (14/11/2026; decisoes/2703): a logo agora e a do painel; com logo, a previa mostra a imagem inteira, como no topo */
.logo-previa.com-logo { width: auto; max-width: 200px; height: 48px; border-radius: var(--e2); background: none; }
.logo-previa.com-logo img { width: auto; max-width: 200px; object-fit: contain; }
.logo-botoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.perfil-topo b small { font-size: var(--a5); font-weight: 500; color: var(--texto3); }
.logo-acoes { display: grid; gap: var(--e2); justify-items: start; }
.logo-acoes small { font-size: var(--a6); line-height: 16px; color: var(--texto3); }
.onb-nota { display: grid; gap: 4px; padding: var(--e4); border-radius: var(--raio-p); background: var(--s2); font-size: var(--a5); line-height: 20px; color: var(--texto2); }
.onb-nota b { color: var(--texto); }
.perfil-wa { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--e5); align-items: start; padding: var(--e3) 0; }
.perfil-campos-wa { grid-template-columns: minmax(0, 1fr); }
.perfil-wa-previa { display: grid; gap: var(--e2); }
.perfil-wa-previa .rotulo { font-size: var(--a6); line-height: 16px; color: var(--texto3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.wa-perfil { padding: 16px; border-radius: 12px; display: grid; gap: 12px; background: var(--wa-fundo); color: var(--wa-texto); }
.wa-perfil-topo { display: grid; justify-items: center; text-align: center; gap: 2px; }
.wa-perfil-foto { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--wa-avatar); color: var(--wa-avatar-texto); font-weight: 700; font-size: 24px; margin-bottom: 6px; }
.wa-perfil-topo b { font-size: 17px; line-height: 22px; color: var(--wa-texto); }
.wa-perfil-topo > span { font-size: 13px; line-height: 18px; color: var(--wa-texto2); }
.wa-perfil-sobre { text-align: center; color: var(--wa-texto); padding: 10px 0; border-top: 1px solid var(--wa-filete); border-bottom: 1px solid var(--wa-filete); overflow-wrap: anywhere; }
.wa-perfil-lista { display: grid; gap: 10px; }
.wa-perfil-item { display: grid; gap: 2px; }
.wa-perfil-item small { font-size: 12px; line-height: 16px; color: var(--wa-texto2); }
.wa-perfil-item span { color: var(--wa-texto); overflow-wrap: anywhere; }
.plano-blocos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e3); }
.plano-bloco { display: grid; gap: 2px; padding: var(--e4); border-radius: var(--raio-p); background: var(--s2); align-content: start; }
.plano-bloco small { font-size: var(--a6); line-height: 16px; color: var(--texto3); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.plano-bloco b { font-size: var(--a2); line-height: 32px; color: var(--texto); font-variant-numeric: tabular-nums; }
.plano-bloco > span { font-size: var(--a5); line-height: 20px; color: var(--texto2); }
.plano-bloco .calc-nota { margin-top: var(--e2); }
.adm-perfil { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.8fr) 84px auto; }
@media (max-width: 640px) {
  .perfil-wa, .plano-blocos { grid-template-columns: minmax(0, 1fr); }
  .adm-perfil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .logo-ctrl { flex-wrap: wrap; }
}

/* ---------- bloco 6 (09/11/2026): verificacao em duas etapas (login em 2 etapas, Configuracoes > Seguranca, admin) ---------- */
.sf-passo { display: grid; gap: var(--e3); }
.sf-texto { margin: 0; font-size: var(--a5); line-height: 20px; color: var(--texto2); }
.sf-texto b { color: var(--texto); }
.sf-qr { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.sf-qr img { width: 188px; height: 188px; flex: none; background: #fff; border-radius: var(--raio-p); padding: 8px; box-sizing: border-box; }
.sf-chave { display: grid; gap: 6px; min-width: 0; flex: 1 1 200px; }
.sf-chave small, .sf-reservas small { font-size: var(--a6); color: var(--texto2); }
.sf-chave code, .sf-reservas code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--a5); letter-spacing: 0.06em; line-height: 22px; padding: 6px 10px; border-radius: var(--raio-p); background: var(--s3); color: var(--texto); overflow-wrap: anywhere; }
.sf-form .campo input { max-width: 220px; font-size: 22px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.sf-acoes { gap: var(--e2); }
.sf-reservas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sf-reservas code { text-align: center; }
.sf-desligar { display: flex; gap: var(--e2); align-items: flex-end; flex-wrap: wrap; margin-top: var(--e2); }
.sf-desligar .campo { flex: 1 1 260px; margin: 0; }
.sf-desligar .campo input { max-width: 240px; letter-spacing: 0.12em; }
.adm-conta .adm-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
@media (max-width: 640px) {
  .sf-reservas { grid-template-columns: 1fr; }
  .sf-qr img { width: 160px; height: 160px; }
}

/* ---------- bloco 7 (Cassiano 1932, 09/11/2026): pagina Clientes (lista no padrao .adm-linha) + modal do cliente (dados, faturas, historico) ---------- */
.cl-barra { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-bottom: var(--e4); }
.cl-busca { flex: 1 1 320px; max-width: 520px; }
.cl-busca input { min-height: 44px; padding: 10px 16px; }
.cl-busca .msg { display: none; }
.cl-barra .chip b, .cl-cats .chip b { font-weight: 800; margin-left: 4px; color: var(--texto3); }
.cl-barra .chip[aria-pressed="true"] b, .cl-cats .chip[aria-pressed="true"] b { color: inherit; }
.cl-cats { margin-bottom: var(--e4); }
.cl-cats .chip { min-height: 32px; padding: 6px 12px; font-size: var(--a6); }
.cl-lista { margin-top: var(--e2); }
.cl-linha { grid-template-columns: minmax(0, 1.8fr) 112px minmax(0, 1.2fr) 120px 136px; width: 100%; text-align: left; color: var(--texto2); font: inherit; }
button.cl-linha { cursor: pointer; transition: background-color var(--t-micro) var(--curva); }
button.cl-linha:hover { background: var(--s3); }
button.cl-linha:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--primaria); }
.cl-linha.cl-cab, .cl-linha.cl-cab:nth-child(even) { background: transparent; color: var(--texto3); font-size: var(--a6); font-weight: 700; padding-top: 0; padding-bottom: 4px; }
.cl-valor { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texto); }
.cl-vazio { padding: var(--e6) 0; }
div.cl-vazio { display: grid; justify-items: start; gap: var(--e3); }   /* Cassiano 2011: frase + "Adicionar cliente" no estado vazio */
.cl-pag { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); margin-top: var(--e4); }
.cl-pag-btns { display: flex; gap: var(--e2); }
.selo.perigo { background: var(--perigo-suave); color: var(--perigo); }
.modal-caixa.modal-cliente { width: min(760px, 100%); }
.modal-cliente .modal-cab .adm-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.modal-cliente h3 { font-size: var(--a3); line-height: 24px; }
.modal-cliente h3 small { font-size: var(--a5); color: var(--texto3); font-weight: 700; margin-left: var(--e2); }
.cl-form { display: grid; gap: var(--e3); }
.cl-form .perfil-campos .campo input { background: var(--s1); }
.cl-acoes { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.cl-acoes > div { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.cl-sec { display: grid; gap: var(--e3); }
.cl-sec-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.fat-lista { display: grid; gap: var(--e2); }
.fat-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); border-radius: var(--raio-p); background: var(--s2); }
.fat-item.corrente { box-shadow: inset 3px 0 0 var(--primaria); }
.fat-item.fechada .fat-info b, .fat-item.fechada .fat-valor { color: var(--texto3); }
.fat-info b { font-size: var(--a5); line-height: 20px; margin-right: 6px; }
.fat-info small { display: block; font-size: var(--a6); line-height: 16px; color: var(--texto3); margin-top: 2px; }
.fat-info .selo { vertical-align: middle; margin-right: 4px; }
.fat-valor { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--texto); white-space: nowrap; }
.fat-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; justify-content: flex-end; }
.fat-form { display: grid; gap: var(--e3); padding: var(--e4); border-radius: var(--raio-p); background: var(--s2); }
.fat-form-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.fat-form .campo input, .fat-form .campo select { background: var(--s1); min-height: 44px; padding: 10px 14px; }   /* select: modelo do envio unitario (3540) */
.fat-form .modelo-previa .wa-tela { max-width: 420px; }   /* envio unitario (audio 3540, 14/11/2026): a previa na largura de um celular */
.fat-form-acoes { display: flex; justify-content: flex-end; gap: var(--e2); }
.hist { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.hist li { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: var(--e3); padding: 8px var(--e3); border-radius: 8px; font-size: var(--a5); line-height: 20px; }
.hist li:nth-child(even) { background: oklch(1 0 0 / 0.025); }
.hist-quando { color: var(--texto3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-texto { color: var(--texto); overflow-wrap: anywhere; }
.hist-quem { color: var(--texto3); font-size: var(--a6); white-space: nowrap; }
@media (max-width: 1024px) {
  .cl-linha { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 110px 128px; }
  .cl-linha > span:nth-child(2) { display: none; }
}
@media (max-width: 640px) {
  .cl .dash-topo { flex-direction: column; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e6); }
  .cl .dash-acoes { flex-wrap: wrap; }
  .cl-busca { max-width: none; }
  .cl-linha { grid-template-columns: minmax(0, 1fr) auto; padding-left: 0; padding-right: 0; row-gap: 4px; }
  .cl-linha.cl-cab { display: none; }
  .cl-linha > span:nth-child(4) { order: 2; text-align: right; }
  .cl-linha > span:nth-child(3) { order: 3; }
  .cl-linha > span:nth-child(5) { order: 4; text-align: right; }
  .fat-item { grid-template-columns: minmax(0, 1fr) auto; }
  .fat-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .fat-form-campos { grid-template-columns: 1fr; }
  .hist li { grid-template-columns: 1fr; gap: 2px; }
  .cl-pag { flex-direction: column; align-items: flex-start; }
}

/* ---- v04.css ---- */
/* v04 "Profundidade" (dono: B2). Duas alturas: ELEVADO = luz difusa por dentro (sombra interna larga, vinda de cima) + sombra externa em duas
   camadas (contato curto + ambiente longo); AFUNDADO = poco mais escuro que o entorno com sombra interna larga. Nenhuma sombra inset fina
   imitando borda (todo inset aqui tem desfoque >= 8 px). Fonte: Plus Jakarta Sans. Hero = telefone em CSS 3D girando por arrastar (Arteserv) +
   inclinacao leve com o mouse; login = faturas voando para a pilha "pagas"; motion = tilt 3D em todos os cards do preview e da E4.
   Nenhuma borda, nenhuma linha, nada de verde; motion nunca sai por reduced-motion (regra 18). */

[data-versao="v04"] {
  --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s0: oklch(0.165 0.021 219);
  --s1: oklch(0.188 0.023 220);
  --s2: oklch(0.218 0.025 219);
  --s3: oklch(0.250 0.027 217);
  --s4: oklch(0.288 0.029 215);
  --s5: oklch(0.330 0.031 213);
  --poco: oklch(0.150 0.020 220);
  --raio: 20px; --raio-p: 14px; --raio-g: 28px;
  /* elevado: luz por dentro (larga) + contato + ambiente */
  --v04-luz: inset 0 20px 32px -20px oklch(1 0 0 / 0.08);
  --sombra-1: var(--v04-luz), 0 2px 6px oklch(0 0 0 / 0.26), 0 20px 44px -12px oklch(0 0 0 / 0.46);
  --sombra-2: var(--v04-luz), 0 4px 10px oklch(0 0 0 / 0.28), 0 28px 60px -14px oklch(0 0 0 / 0.52);
  --sombra-3: inset 0 24px 40px -24px oklch(1 0 0 / 0.09), 0 6px 14px oklch(0 0 0 / 0.30), 0 40px 90px -18px oklch(0 0 0 / 0.60);
  /* afundado: poco com sombra interna larga (topo mais escuro) */
  --v04-fundo: inset 0 10px 24px oklch(0 0 0 / 0.40), inset 0 -12px 24px -12px oklch(1 0 0 / 0.035);
  --v04-campo: inset 0 6px 14px oklch(0 0 0 / 0.42);
  --v04-cartao: linear-gradient(180deg, oklch(from var(--s2) calc(l + 0.022) c h), var(--s2) 60%);
  --lado-a: var(--s0);
  --lado-b: radial-gradient(110% 90% at 70% 8%, oklch(0.54 0.090 196), oklch(0.36 0.062 204) 48%, oklch(0.22 0.036 214));
}

/* ---------- elevado x afundado (vale em todas as telas) ---------- */
[data-versao="v04"] .card { background: var(--v04-cartao); box-shadow: var(--sombra-1); }
[data-versao="v04"] .card.elevado, [data-versao="v04"] .modelo.vendo { box-shadow: var(--sombra-2); }
[data-versao="v04"] .caixa.planilha { background: var(--s1); box-shadow: var(--v04-fundo); }
[data-versao="v04"] .pl-linha:not(.pl-cab):nth-child(even) { background: oklch(1 0 0 / 0.03); }
[data-versao="v04"] .campo input, [data-versao="v04"] .campo select, [data-versao="v04"] .chip-campo,
[data-versao="v04"] .camp-centro .campo input, [data-versao="v04"] .perfil-campos .campo input { background: var(--poco); box-shadow: var(--v04-campo); }
[data-versao="v04"] .campo input:focus, [data-versao="v04"] .chip-campo:focus,
[data-versao="v04"] .camp-centro .campo input:focus, [data-versao="v04"] .perfil-campos .campo input:focus { box-shadow: var(--v04-campo), 0 0 0 2px var(--primaria); }
[data-versao="v04"] .campo.erro input { box-shadow: var(--v04-campo), 0 0 0 2px var(--perigo); }
[data-versao="v04"] .campo.alerta input { box-shadow: var(--v04-campo), 0 0 0 2px var(--alerta); }
[data-versao="v04"] .login-abas, [data-versao="v04"] .upload, [data-versao="v04"] .caso-visual, [data-versao="v04"] .consumo-barra { background: var(--poco); box-shadow: var(--v04-fundo); }
[data-versao="v04"] .upload:hover { background: var(--s1); }
[data-versao="v04"] .login-abas button[aria-selected="true"] { background: var(--s3); box-shadow: var(--sombra-1); }
/* chip: em relevo; escolhido = afundado (apertado na superficie) */
[data-versao="v04"] .chip { background: var(--s3); box-shadow: 0 2px 4px oklch(0 0 0 / 0.26), 0 8px 16px -8px oklch(0 0 0 / 0.40); }
[data-versao="v04"] .chip[aria-pressed="true"] { background: oklch(0.20 0.04 205); color: var(--primaria); box-shadow: inset 0 4px 10px oklch(0 0 0 / 0.45); }
/* botao tatil (R-32): luz por dentro + sombra por fora */
[data-versao="v04"] .btn-primario { box-shadow: inset 0 12px 18px -10px oklch(1 0 0 / 0.40), 0 4px 10px oklch(0 0 0 / 0.30), 0 14px 28px -10px oklch(0.86 0.115 190 / 0.40); }
[data-versao="v04"] .btn-primario:active:not(:disabled) { box-shadow: inset 0 6px 12px oklch(0 0 0 / 0.25); }
[data-versao="v04"] .btn-suave { background: var(--s3); box-shadow: 0 2px 6px oklch(0 0 0 / 0.26); }

/* ---------- landing ---------- */
[data-versao="v04"] .caso { transition: transform var(--t-micro) var(--curva), box-shadow var(--t-micro) var(--curva); }
[data-versao="v04"] .caso:hover { box-shadow: var(--sombra-2); }
[data-versao="v04"] .mini-balao { background: var(--s3); box-shadow: 0 6px 14px -6px oklch(0 0 0 / 0.5); }
[data-versao="v04"] .prova-icone { background: var(--s3); box-shadow: var(--sombra-1); }
[data-versao="v04"] .contato-painel { background: radial-gradient(90% 120% at 50% 0%, oklch(0.30 0.05 203), var(--s2) 70%); box-shadow: var(--sombra-2); }

/* hero: telefone em CSS 3D (Arteserv: perspective 1500, rotateX(incl) rotateZ(giro), arrastar gira) */
[data-versao="v04"] .v04-palco { position: relative; width: 100%; display: grid; place-items: center; }
[data-versao="v04"] .v04-cena { position: relative; width: 100%; height: 580px; display: grid; place-items: center; perspective: 1500px;
  touch-action: pan-y; cursor: grab; user-select: none; }
[data-versao="v04"] .v04-cena.girando { cursor: grabbing; }
[data-versao="v04"] .v04-tilt { transform-style: preserve-3d; transform: rotateX(var(--v04-tx, 0deg)) rotateY(var(--v04-ty, 0deg)); }
[data-versao="v04"] .v04-cam { position: relative; transform-style: preserve-3d;
  transform: scale(var(--v04-k, 1)) rotateX(var(--v04-incl, 36deg)) rotateZ(var(--v04-giro, -12deg)); transition: transform .85s cubic-bezier(.45, 0, .2, 1); }
[data-versao="v04"] .v04-cena.girando .v04-cam { transition: none; will-change: transform; }
[data-versao="v04"] .v04-sombra { position: absolute; left: 50%; top: 50%; width: 324px; height: 564px; margin: -282px 0 0 -162px; border-radius: 48px;
  background: radial-gradient(closest-side, oklch(0 0 0 / 0.55), transparent); filter: blur(18px); transform: translateZ(-40px); pointer-events: none; }
[data-versao="v04"] .v04-espessura { position: absolute; inset: 0; border-radius: 36px; background: oklch(0.11 0.012 220); pointer-events: none; }
[data-versao="v04"] .v04-fone { box-shadow: inset 0 18px 30px -18px oklch(1 0 0 / 0.10); }
[data-versao="v04"] .v04-fone .fone-tela { background: radial-gradient(120% 80% at 50% 0%, oklch(0.25 0.03 202), oklch(0.19 0.02 205)); }
[data-versao="v04"] .v04-fone .balao { box-shadow: 0 6px 12px -6px oklch(0 0 0 / 0.5); }
/* R-18: o telefone do hero usa so a escala da landing (16 nome, 14 o resto); o do motor tem 9/10/11/12 px. Fone maior para caber a conversa. */
[data-versao="v04"] .v04-fone { width: 300px; height: 540px; }
/* B2c 08/11: pe da conversa com folga; em 3D a borda de baixo da tela comia o "Pagar com Pix" do 2o balao */
[data-versao="v04"] .v04-fone .fone-conversa { padding-bottom: 40px; }
[data-versao="v04"] .v04-fone .fone-cab { font-size: var(--l5); line-height: var(--l5-a); padding: 28px 14px 10px; }
[data-versao="v04"] .v04-fone .fone-avatar { width: 36px; height: 36px; flex: none; font-size: var(--l6); line-height: var(--l6-a); }
[data-versao="v04"] .v04-fone .fone-cab small { font-size: var(--l6); line-height: var(--l6-a); }
[data-versao="v04"] .v04-fone .balao { flex: none; max-width: 96%; font-size: var(--l6); line-height: var(--l6-a); }
[data-versao="v04"] .v04-fone .balao small { font-size: var(--l6); line-height: var(--l6-a); }
[data-versao="v04"] .v04-fone .balao .balao-botao { font-size: var(--l6); line-height: var(--l6-a); }
[data-versao="v04"] .v04-flutua { position: absolute; left: 50%; padding: 8px 12px; border-radius: var(--raio-p); white-space: nowrap; pointer-events: none;
  font-size: var(--l6); line-height: var(--l6-a); font-weight: 700; background: var(--s4); color: var(--texto); box-shadow: var(--sombra-2); }
[data-versao="v04"] .v04-flutua b { color: var(--primaria); }
[data-versao="v04"] .v04-flutua.pago { top: 14%; transform: translate(-6%, 0) translateZ(90px); background: var(--primaria); color: var(--sobre-primaria); }
[data-versao="v04"] .v04-flutua.pago b { color: var(--sobre-primaria); }
[data-versao="v04"] .v04-flutua.base { bottom: -5%; transform: translate(-122%, 0) translateZ(60px); }
[data-versao="v04"] .v04-convite { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: var(--raio-pill);
  background: var(--s3); box-shadow: var(--sombra-1); font-size: var(--l6); line-height: var(--l6-a); color: var(--texto2); pointer-events: none; white-space: nowrap; }
/* 1933 (09/11/2026, Cassiano): o titulo do hero fica numa linha so ("O WhatsApp cobra." nao quebra); o texto pode chegar mais perto do 3D,
   contanto que nao encoste. Em tela larga a coluna do texto mede o proprio conteudo (680 px, a largura da legenda) e o telefone fica com o resto.
   Medido na previa local (shots/previa/medir.js, 09/11): o telefone projetado em 3D ocupa ~409 px, logo a coluna dele precisa de
   largura interna >= 1129 px (viewport >= 1210); a 1100 ele invadia o titulo. Abaixo de 1210 fica o layout de antes (titulo em 2 linhas).
   overflow-x: clip corta so a sombra desfocada do telefone (filter: blur), que a 1200-1300 empurrava a pagina para o lado sem nada visivel. */
@media (min-width: 1210px) {
  [data-versao="v04"] .lp-hero { grid-template-columns: max-content minmax(0, 1fr); gap: var(--e10); overflow-x: clip; }
  [data-versao="v04"] .hero-titulo { white-space: nowrap; max-width: none; font-size: clamp(34px, 3vw, 44px); line-height: 1.12; }
  [data-versao="v04"] .hero-legenda { max-width: 34em; }
}

/* ---------- login: faturas voando para a pilha "pagas" ---------- */
[data-versao="v04"] .login-cartao { box-shadow: var(--sombra-2); }
[data-versao="v04"] .login-frase { text-shadow: 0 2px 12px oklch(0 0 0 / 0.30); }
[data-versao="v04"] .v04-voo { width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: var(--e4); }
[data-versao="v04"] .v04-placar { position: relative; z-index: 0; display: flex; align-items: baseline; justify-content: center; gap: var(--e3); color: var(--texto); }
[data-versao="v04"] .v04-placar b { font-size: var(--l2); line-height: var(--l2-a); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
[data-versao="v04"] .v04-placar span { font-size: var(--l5); line-height: var(--l5-a); font-weight: 600; color: var(--texto2); }
[data-versao="v04"] .v04-mesa { position: relative; perspective: 900px; }
[data-versao="v04"] .v04-pilha { position: absolute; top: 12%; bottom: 8%; width: 46%; border-radius: var(--raio);
  background: oklch(0.16 0.03 212 / 0.42); box-shadow: inset 0 12px 28px oklch(0 0 0 / 0.38); }
[data-versao="v04"] .v04-pilha.abertas { left: 2%; }
[data-versao="v04"] .v04-pilha.pagas { right: 2%; }
[data-versao="v04"] .v04-pilha span { position: absolute; left: 0; right: 0; bottom: var(--e3); text-align: center; font-size: var(--l6); line-height: var(--l6-a);
  font-weight: 700; color: var(--texto2); }
[data-versao="v04"] .v04-pilha.pagas span { color: var(--p-100); }
[data-versao="v04"] .v04-fatura { position: absolute; left: 4%; top: 34%; width: 42%; display: grid; gap: 2px; padding: var(--e3) var(--e4); border-radius: var(--raio-p);
  background: var(--v04-cartao); box-shadow: var(--sombra-1); color: var(--texto); will-change: transform; }
[data-versao="v04"] .v04-fatura small { font-size: var(--l6); line-height: var(--l6-a); color: var(--texto3); font-weight: 600; }
[data-versao="v04"] .v04-fatura b { font-size: var(--l5); line-height: var(--l5-a); font-weight: 800; font-variant-numeric: tabular-nums; }
[data-versao="v04"] .v04-fatura em { font-style: normal; font-size: var(--l6); line-height: var(--l6-a); color: var(--texto2); }
[data-versao="v04"] .v04-selo { position: absolute; top: var(--e2); right: var(--e2); padding: 2px 8px; border-radius: var(--raio-pill); font-style: normal;
  font-size: var(--l6); line-height: var(--l6-a); font-weight: 800; background: var(--primaria); color: var(--sobre-primaria); opacity: 0; }

/* ---------- dashboard ---------- */
[data-versao="v04"] .metrica-destaque { background: radial-gradient(120% 120% at 0% 0%, oklch(0.32 0.06 200), var(--s2) 62%); }
[data-versao="v04"] .icone-btn:hover { background: var(--s2); box-shadow: var(--sombra-1); }

/* ---------- campanha: preview e E4 com tilt 3D por card ---------- */
[data-versao="v04"] .camp-indice { background: var(--s1); box-shadow: inset -16px 0 32px -16px oklch(0 0 0 / 0.35); }
[data-versao="v04"] .indice-item[aria-current="step"] { background: var(--s3); box-shadow: var(--sombra-1); }
[data-versao="v04"] .camp-preview { perspective: 1000px; box-shadow: inset 16px 0 32px -16px oklch(0 0 0 / 0.35); }
[data-versao="v04"] .camp-preview .card, [data-versao="v04"] .camada-rev { transform-style: flat; }
[data-versao="v04"] .camp-preview .card::after, [data-versao="v04"] .camada-rev::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--v04-lx, 50%) var(--v04-ly, -20%), oklch(1 0 0 / var(--v04-la, 0)), transparent 70%); }
[data-versao="v04"] .revisao-cena { perspective: 900px; }
[data-versao="v04"] .camada-rev:first-child { box-shadow: var(--sombra-3); }
[data-versao="v04"] .slot { background: var(--poco); box-shadow: var(--v04-campo); }
[data-versao="v04"] .slot:not(.vazio) { background: var(--v04-cartao); box-shadow: var(--sombra-1); }

/* ---------- modal ---------- */
[data-versao="v04"] .modal-caixa { background: linear-gradient(180deg, oklch(from var(--s3) calc(l + 0.02) c h), var(--s3) 50%); box-shadow: var(--sombra-3); }
[data-versao="v04"] .consumo { background: var(--s2); box-shadow: var(--sombra-1); }

/* ---------- 390 ---------- */
@media (max-width: 640px) {
  [data-versao="v04"] .hero-visual { overflow: hidden; }
  [data-versao="v04"] .v04-cena { height: 600px; }
  [data-versao="v04"] .v04-flutua.base { bottom: -17%; transform: translate(-70%, 0) translateZ(60px); }
  [data-versao="v04"] .v04-fatura { padding: var(--e2) var(--e3); }
  [data-versao="v04"] .v04-selo { top: 4px; right: 4px; }
}

/* ---- mobile.css ---- */
/* mobile.css - bloco 9 (Cassiano 1939, 09/11/2026): PWA responsiva "menos e mais" para celular (ate 640) e tablet (641 a 1024).
   Acima de 1024 NADA muda (ordem 1868: identico ao HTML v04); por isso toda regra fica dentro de media query.
   Regras do pedido dele: 1 coluna, respiro, nenhuma borda nem linha, sombra so de tom, menos coisas na tela; alvo de toque >= 44 px;
   campo com 16 px (o iOS nao da zoom); area segura do notch e da barra de status (viewport-fit=cover + env(safe-area-inset-*), WebKit);
   no celular o modal vira folha que sobe do rodape, o telefone 3D e o lado direito do login ficam para tablet e desktop.
   Motion nunca sai por pedido do sistema (regra universal 18). Seletores com [data-versao="v04"] vencem os de v04.css (mesma forca, depois). */

/* toque: sem o flash cinza do Android e do iOS ao tocar num botao */
html { -webkit-tap-highlight-color: transparent; }

/* ---------- celular e tablet: area segura (no app instalado o conteudo comeca embaixo da barra de status) ---------- */
@media (max-width: 1024px) {
  .lp-topo { padding-top: calc(var(--e8) + env(safe-area-inset-top, 0px)); }
  .app-largura { padding-top: calc(var(--e8) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--e12) + env(safe-area-inset-bottom, 0px)); }
  .login-esq, .login-dir { padding-top: calc(var(--e10) + env(safe-area-inset-top, 0px)); }
  .toasts { bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- tablet (641 a 1024: iPad retrato 768/820/834, paisagem 1024) ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .app-largura { padding-left: var(--e6); padding-right: var(--e6); }
  [data-versao="v04"] .lp-hero { overflow-x: clip; }   /* a sombra desfocada do telefone 3D empurrava a pagina 17 px para o lado (medido em 1024, ja era assim antes) */
  .dash-cards4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; }
  .galeria, .provedores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camp-preview .galeria { grid-template-columns: minmax(0, 1fr); }
  .modal-caixa { max-width: 92vw; }
}

/* audio 3546 (14/11/2026; decisoes/2704): em tablet estreito (641 a 900) o titulo do painel fica em 32/40 e a logo mais curta, para
   o nome nao ser cortado cedo ao lado do menu */
@media (min-width: 641px) and (max-width: 900px) {
  .dash-topo-painel { --titulo: var(--l3); --titulo-a: var(--l3-a); }
  .dash-logo { max-width: 140px; }
}

/* ---------- campanha em celular e tablet retrato (ate 900): barra de etapas no topo, a etapa, a previa embaixo ---------- */
@media (max-width: 900px) {
  .camp-grade { display: block; }
  [data-versao="v04"] .camp-indice { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: var(--e1); overflow-x: auto;
    padding: calc(var(--e4) + env(safe-area-inset-top, 0px)) var(--e4) var(--e2); background: var(--s0); box-shadow: none; scrollbar-width: none; }
  .camp-indice::-webkit-scrollbar { display: none; }
  .indice-sair { margin: 0 var(--e1) 0 0; align-self: center; }
  .indice-sair .txt { display: none; }
  .indice-item { flex: none; width: auto; padding: 8px 10px; justify-content: flex-start; }
  .indice-tit { display: none; }
  .indice-item[aria-current="step"] .indice-tit { display: inline; }
  .camp-centro { min-height: 0; padding: var(--e6) var(--e4) var(--e4); }
  [data-versao="v04"] .camp-preview { position: static; height: auto; overflow: visible; overflow-x: clip; box-shadow: none;
    padding: var(--e4) var(--e4) calc(var(--e12) + env(safe-area-inset-bottom, 0px)); }
  .camada-orcamento { transform: translate(0%, -120%) translateZ(110px); }
  .etapa-pe { min-height: 0; padding-top: var(--e6); }
}
@media (min-width: 641px) and (max-width: 900px) {
  .camp-centro { padding: var(--e8) var(--e6) var(--e6); }
  [data-versao="v04"] .camp-preview { padding-left: var(--e6); padding-right: var(--e6); }
  .camp-preview .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- celular (ate 640): menos e mais ---------- */
@media (max-width: 640px) {
  /* sombra so de tom: nenhuma borda, nenhum traco, quase nenhuma sombra */
  [data-versao="v04"] { --sombra-1: 0 1px 2px oklch(0 0 0 / 0.22); --sombra-2: 0 2px 6px oklch(0 0 0 / 0.26); --sombra-3: 0 6px 18px oklch(0 0 0 / 0.34); }
  .card, .caixa, [data-card] { padding: var(--e5); }
  .planilha { padding: var(--e5); }
  .cfg-linha { border-bottom: 0; padding: var(--e3) 0; }
  /* alvo de toque >= 44 px; campo com 16 px (abaixo disso o iOS da zoom ao focar) */
  .btn-peq, .chip, .cfg-item, .indice-item, .login-abas button { min-height: 44px; }
  .cl-cats .chip, .chip-mini { min-height: 36px; }
  .chip-campo, .adm-limite input, .campo select { font-size: 16px; }
  /* painel: nome em cima, acoes embaixo (como Clientes e Admin ja fazem) */
  .dash-topo { flex-direction: column; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e6); padding-top: 0; }
  .dash-acoes { flex-wrap: wrap; }
  /* audio 3546 (14/11/2026; decisoes/2704): titulo do painel 32/40 em ate 2 linhas (aqui o menu ja fica embaixo); logo de 40 px */
  .dash-topo-painel { --titulo: var(--l3); --titulo-a: var(--l3-a); }
  .dash-marca { align-self: stretch; }
  .dash-topo-painel .dash-nome { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-block: 2px 0; margin-block: -2px 0; }
  .dash-logo { max-width: 140px; }
  .dash-linha1 { gap: var(--e3); margin-bottom: var(--e3); }
  .dash-linha2, .dash-cards4 { gap: var(--e3); }
  .metrica { min-height: 0; gap: var(--e3); }
  .metrica-destaque .metrica-valor { font-size: 28px; line-height: 36px; }
  /* login: so o cartao, sem caixa; o lado das faturas voando fica para tablet e desktop */
  .login-dir { display: none; }
  .login-grade { min-height: 100vh; min-height: 100dvh; }
  .login-esq { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--e10) + env(safe-area-inset-bottom, 0px)); }
  [data-versao="v04"] .login-cartao { background: none; box-shadow: none; padding: 0; width: 100%; }
  /* campanha: o telefone 3D nao entra no celular (a galeria e a previa ja mostram o aviso); etapa com mais ar */
  .peca { display: none; }
  .etapa, .etapa-corpo { gap: var(--e6); }
  .etapa-titulo { font-size: var(--a2); line-height: 28px; }
  .etapa-pe .vazio { display: none; }
  .etapa-pe .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; }   /* "Proximo: no dia do vencimento" passava 15 px da borda em 390 (ja era assim antes) */
  .sr { left: 0; top: 0; }   /* o campo escondido do upload ficava a direita da tela e criava rolagem lateral */
  /* modal vira folha que sobe do rodape (a entrada anima em ED.abrirModal) */
  .modal { place-items: end stretch; padding: 0; }
  [data-versao="v04"] .modal-caixa { width: 100%; max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: var(--raio-g) var(--raio-g) 0 0;
    padding: var(--e5) var(--e4) calc(var(--e6) + env(safe-area-inset-bottom, 0px)); }
  .modal-caixa.modal-config, .modal-caixa.modal-cliente, .modal-caixa.modal-modelo { width: 100%; }
  .cfg-pane { min-height: 0; }
  .cfg-nav { gap: var(--e1); }
  .cfg-item { padding: 8px 12px; }
  /* listas: respiro, sem traco */
  .cl-barra { gap: var(--e2); }
  .cl-linha { padding-top: var(--e3); padding-bottom: var(--e3); }
  .adm-linha { padding-top: var(--e3); padding-bottom: var(--e3); }
  .toasts { width: calc(100vw - 32px); }
}