/* Solvewise Auto — estilo Apple, "liquid glass". Claro por padrão, com fundo explícito. */
:root {
  color-scheme: light;
  --cor: #0a84ff;
  --cor-2: #5e5ce6;
  --texto: #1d1d1f;
  --suave: #6e6e73;
  --fraco: #aeaeb2;
  --fundo: #eef1f7;
  --vidro: rgba(255, 255, 255, 0.62);
  --vidro-forte: rgba(255, 255, 255, 0.82);
  --borda: rgba(255, 255, 255, 0.75);
  --linha: rgba(60, 60, 67, 0.12);
  --verde: #30b158;
  --vermelho: #ff3b30;
  --laranja: #ff9500;
  --amarelo: #ffcc00;
  --roxo: #af52de;
  --sombra: 0 10px 40px rgba(30, 40, 90, 0.10), 0 1px 2px rgba(30, 40, 90, 0.06);
  --raio: 22px;
  --tab-h: 74px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--fundo); }
/* body transparente de propósito: o "céu" (z-index -1) fica atrás dele e aparece através do vidro */
html, body { margin: 0; min-height: 100%; color: var(--texto); font: 16px/1.45 var(--fonte); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cor); text-decoration: none; }
img { display: block; max-width: 100%; }
body { background: transparent; }
[hidden] { display: none !important; }

/* Céu de fundo: manchas de cor desfocadas que o vidro "refrata" */
.ceu { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #f4f6fb 0%, #e9edf6 100%); }
.ceu i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: flutua 22s ease-in-out infinite alternate; }
.ceu i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: radial-gradient(circle, color-mix(in srgb, var(--cor) 70%, white), transparent 70%); }
.ceu i:nth-child(2) { width: 40vmax; height: 40vmax; right: -14vmax; top: 18vh; background: radial-gradient(circle, #c58cff, transparent 70%); animation-delay: -7s; }
.ceu i:nth-child(3) { width: 44vmax; height: 44vmax; left: 20vw; bottom: -22vmax; background: radial-gradient(circle, #6fe0d0, transparent 70%); animation-delay: -13s; opacity: 0.4; }
@keyframes flutua { to { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .ceu i { animation: none; } * { transition: none !important; animation-duration: 0s !important; } }

.vidro {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid var(--borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--sombra);
  border-radius: var(--raio);
}

/* ---------- estrutura ---------- */
.app { display: flex; min-height: 100vh; overflow-x: clip; }
.lateral { display: none; }
main { flex: 1; min-width: 0; padding: 14px 16px calc(var(--tab-h) + 40px + var(--safe-b)); max-width: 1180px; margin: 0 auto; width: 100%; }
.barra-topo { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 4px; }
.barra-topo .loja { font-size: 13px; color: var(--suave); font-weight: 600; letter-spacing: 0.01em; display: flex; align-items: center; gap: 6px; }
.barra-topo .loja .bolinha { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); }
.barra-topo .dir { margin-left: auto; display: flex; gap: 8px; }
.titulo-g { font-family: var(--fonte-titulo); font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; margin: 4px 0 4px; }
.subtitulo { color: var(--suave); margin: 0 0 18px; font-size: 15px; }
.secao { margin: 26px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.secao h2 { font-family: var(--fonte-titulo); font-size: 21px; letter-spacing: -0.02em; margin: 0; }
.secao .extra { margin-left: auto; font-size: 15px; }

/* Barra de abas flutuante (celular) */
.abas {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); z-index: 40;
  display: flex; gap: 2px; padding: 6px; border-radius: 999px; width: min(560px, calc(100% - 24px));
}
.abas a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 6px; border-radius: 999px; color: var(--suave); font-size: 11px; font-weight: 600; transition: background 0.25s, color 0.25s; }
.abas a svg { width: 25px; height: 25px; }
.abas a.ativa { color: var(--cor); background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }

@media (min-width: 960px) {
  .abas { display: none; }
  .lateral { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; width: 248px; padding: 18px 14px; gap: 4px; flex-shrink: 0; }
  .lateral .vidro-l { position: absolute; inset: 12px; border-radius: 26px; z-index: -1; }
  .lateral .marca { display: flex; align-items: center; gap: 10px; padding: 14px 14px 18px; font-weight: 700; font-family: var(--fonte-titulo); letter-spacing: -0.02em; font-size: 18px; }
  .lateral .marca .logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--cor), var(--cor-2)); display: grid; place-items: center; color: #fff; }
  .lateral .marca small { display: block; font-size: 12px; color: var(--suave); font-weight: 500; letter-spacing: 0; }
  .lateral a.item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin: 0 6px; border-radius: 14px; color: var(--texto); font-weight: 550; font-size: 15px; }
  .lateral a.item svg { width: 21px; height: 21px; color: var(--suave); }
  .lateral a.item.ativa { background: rgba(255, 255, 255, 0.9); color: var(--cor); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); }
  .lateral a.item.ativa svg { color: var(--cor); }
  .lateral .rodape { margin-top: auto; padding: 12px 14px; font-size: 13px; color: var(--suave); }
  main { padding: 26px 34px 60px; }
  .titulo-g { font-size: 40px; }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--cor); color: #fff; font-weight: 650; font-size: 16px; cursor: pointer; transition: transform 0.15s, filter 0.2s, opacity 0.2s; text-align: center; line-height: 1.2;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cor) 35%, transparent);
}
.btn:active { transform: scale(0.97); }
.btn:hover { filter: brightness(1.05); }
.btn svg { width: 20px; height: 20px; }
.btn.sec { background: rgba(255, 255, 255, 0.75); color: var(--cor); box-shadow: inset 0 0 0 1px var(--linha); }
.btn.perigo { background: rgba(255, 59, 48, 0.1); color: var(--vermelho); box-shadow: none; }
.btn.verde { background: var(--verde); box-shadow: 0 6px 18px rgba(48, 177, 88, 0.35); }
.btn.peq { min-height: 38px; padding: 0 15px; font-size: 14px; }
.btn.bloco { width: 100%; }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn-icone { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, 0.75); color: var(--cor); box-shadow: inset 0 0 0 1px var(--linha); }
.btn-icone svg { width: 21px; height: 21px; }
.fab { white-space: nowrap; position: fixed; right: 18px; bottom: calc(var(--tab-h) + 26px + var(--safe-b)); z-index: 35; min-height: 56px; padding: 0 24px; font-size: 17px; }
@media (min-width: 960px) { .fab { bottom: 30px; right: 34px; } }

/* ---------- cartões e grades ---------- */
.cartao { padding: 18px; }
.grade-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .grade-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 112px; cursor: default; }
.kpi .rot { font-size: 13px; color: var(--suave); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi .rot svg { width: 16px; height: 16px; }
.kpi .val { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin-top: auto; }
.kpi .det { font-size: 13px; color: var(--suave); }
.kpi.clicavel { cursor: pointer; transition: transform 0.15s; }
.kpi.clicavel:active { transform: scale(0.98); }

.atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .atalhos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.atalho { padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; border: 0; text-align: left; transition: transform 0.15s; color: var(--texto); }
.atalho:active { transform: scale(0.97); }
.atalho .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.atalho .ic svg { width: 24px; height: 24px; }
.atalho b { font-size: 16px; }
.atalho span { font-size: 13px; color: var(--suave); margin-top: -6px; }

.lista { overflow: hidden; padding: 4px 0; }
.lista .linha-l { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; position: relative; }
.lista .linha-l + .linha-l::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--linha); }
.lista .linha-l:active { background: rgba(0, 0, 0, 0.03); }
.lista .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.lista .ic svg { width: 20px; height: 20px; }
.lista .meio { flex: 1; min-width: 0; }
.lista .meio b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.lista .meio small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--suave); font-size: 13.5px; line-height: 1.35; margin-top: 2px; }
.lista .fim { color: var(--suave); font-size: 14px; text-align: right; flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.lista .fim svg { width: 16px; height: 16px; color: var(--fraco); }
.vazio { padding: 28px 20px; text-align: center; color: var(--suave); }
.vazio svg { width: 44px; height: 44px; color: var(--fraco); margin-bottom: 8px; }
.vazio b { display: block; color: var(--texto); font-size: 17px; margin-bottom: 4px; }

/* chips e etiquetas */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; border: 0; padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--linha); font-weight: 600; font-size: 14px; cursor: pointer; color: var(--texto); display: inline-flex; gap: 6px; align-items: center; }
.chip .n { background: rgba(0, 0, 0, 0.07); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.chip.on { background: var(--texto); color: #fff; box-shadow: none; }
.chip.on .n { background: rgba(255, 255, 255, 0.22); }
.etq { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: rgba(0, 0, 0, 0.06); color: var(--suave); white-space: nowrap; }
.etq svg { width: 13px; height: 13px; }
.etq.verde { background: rgba(48, 177, 88, 0.14); color: #1e7e3c; }
.etq.vermelho { background: rgba(255, 59, 48, 0.12); color: #d70015; }
.etq.laranja { background: rgba(255, 149, 0, 0.15); color: #b25e00; }
.etq.azul { background: color-mix(in srgb, var(--cor) 14%, transparent); color: var(--cor); }
.etq.roxo { background: rgba(175, 82, 222, 0.14); color: #8e3fb5; }
.etq.vidro-e { background: rgba(255, 255, 255, 0.78); color: var(--texto); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* segmentado estilo iOS */
.seg { display: flex; padding: 3px; border-radius: 12px; background: rgba(118, 118, 128, 0.12); gap: 2px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 8px 10px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--texto); white-space: nowrap; }
.seg button.on { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

/* busca */
.busca { display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 46px; border-radius: 14px; background: rgba(118, 118, 128, 0.12); margin: 6px 0 12px; }
.busca svg { width: 18px; height: 18px; color: var(--suave); flex-shrink: 0; }
.busca input { border: 0; background: transparent; outline: 0; flex: 1; font-size: 16px; min-width: 0; }

/* ---------- carros ---------- */
.grade-carros { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.carro { overflow: hidden; cursor: pointer; transition: transform 0.18s; display: flex; flex-direction: column; }
.carro:active { transform: scale(0.985); }
.carro .foto { position: relative; aspect-ratio: 16 / 10; background: #dfe3ea; overflow: hidden; }
.carro .foto > img, .carro .foto > svg { width: 100%; height: 100%; object-fit: cover; }
.carro .foto .sobre { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.carro .info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.carro .nome { font-weight: 650; font-size: 16.5px; letter-spacing: -0.01em; }
.carro .ver { color: var(--suave); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carro .preco { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.carro .rodape-c { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; border-radius: var(--raio); scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria > * { scroll-snap-align: start; flex: 0 0 88%; aspect-ratio: 16 / 10; border-radius: var(--raio); overflow: hidden; background: #dfe3ea; position: relative; }
@media (min-width: 760px) { .galeria > * { flex-basis: 70%; } }
.galeria > * > img, .galeria > * > svg { width: 100%; height: 100%; object-fit: cover; }
.galeria .add { display: grid; place-items: center; text-align: center; cursor: pointer; color: var(--cor); font-weight: 650; background: rgba(255, 255, 255, 0.6); border: 2px dashed color-mix(in srgb, var(--cor) 40%, transparent); }
.galeria .add svg { width: 40px; height: 40px; margin: 0 auto 6px; }
.galeria .tirar { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; }

.acoes-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (min-width: 760px) { .acoes-g { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.acao { border: 0; padding: 12px 4px 10px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--texto); text-align: center; line-height: 1.2; }
.acao .ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.acao .ic svg { width: 21px; height: 21px; }
.acao:active { transform: scale(0.95); }

.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linha); border-radius: 16px; overflow: hidden; }
@media (min-width: 760px) { .ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ficha div { background: rgba(255, 255, 255, 0.72); padding: 11px 14px; }
.ficha span { display: block; font-size: 12px; color: var(--suave); font-weight: 600; }
.ficha b { font-weight: 600; font-size: 15px; }

.dinheiro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dinheiro div { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); }
.dinheiro span { font-size: 12px; color: var(--suave); font-weight: 600; display: block; }
.dinheiro b { font-family: var(--fonte-titulo); font-size: clamp(15px, 4.2vw, 19px); letter-spacing: -0.02em; }

/* ---------- funil ---------- */
.funil { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.coluna { flex: 0 0 270px; scroll-snap-align: start; padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; }
.coluna h3 { margin: 2px 4px 2px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.coluna h3 .pt { width: 10px; height: 10px; border-radius: 50%; }
.coluna h3 .n { margin-left: auto; color: var(--suave); font-weight: 600; }
.lead { background: rgba(255, 255, 255, 0.86); border-radius: 16px; padding: 12px 13px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 3px; }
.lead b { font-size: 15px; display: flex; gap: 6px; align-items: center; }
.lead small { color: var(--suave); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lead .pe { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.ponto-v { width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18); flex-shrink: 0; }

.etapas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.etapas::-webkit-scrollbar { display: none; }
.etapas button { flex-shrink: 0; border: 0; border-radius: 999px; padding: 10px 14px; font-weight: 650; font-size: 14px; cursor: pointer; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--linha); color: var(--suave); }
.etapas button.feita { color: var(--texto); }
.etapas button.on { background: var(--cor); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--cor) 35%, transparent); }

.perfil { display: flex; align-items: center; gap: 14px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 20px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--cor), var(--cor-2)); }
.avatar.p { width: 40px; height: 40px; font-size: 15px; }

.linha-tempo { display: flex; flex-direction: column; gap: 0; }
.linha-tempo .ev { display: flex; gap: 12px; padding: 10px 0; }
.linha-tempo .ev .bol { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.linha-tempo .ev .bol svg { width: 15px; height: 15px; }
.linha-tempo .ev p { margin: 0; font-size: 15px; }
.linha-tempo .ev small { color: var(--suave); font-size: 12.5px; }

/* barras simples */
.barras { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 10px 4px 0; }
.barras .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.barras .b i { display: block; width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--cor), color-mix(in srgb, var(--cor) 60%, var(--cor-2))); min-height: 4px; transition: height 0.6s cubic-bezier(.2, .8, .2, 1); }
.barras .b span { font-size: 12px; color: var(--suave); font-weight: 600; }
.barras .b em { font-style: normal; font-size: 11.5px; font-weight: 650; }
.progresso { height: 8px; border-radius: 999px; background: rgba(118, 118, 128, 0.16); overflow: hidden; }
.progresso i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cor), var(--cor-2)); }
.hbar { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; font-size: 14px; padding: 6px 0; }
.hbar .progresso { height: 10px; }

table.tab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.tab th { text-align: left; font-size: 12px; color: var(--suave); font-weight: 650; padding: 8px 10px; }
table.tab td { padding: 11px 10px; border-top: 1px solid var(--linha); }
table.tab td.n, table.tab th.n { text-align: right; font-variant-numeric: tabular-nums; }
.rolagem-x { overflow-x: auto; }

/* ---------- IA ---------- */
.ia-cartao { position: relative; overflow: hidden; padding: 18px; }
.ia-cartao::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--cor) 16%, transparent), rgba(191, 90, 242, 0.14), rgba(100, 210, 255, 0.12)); z-index: -1; }
.ia-cartao h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.ia-cartao h3 svg { width: 20px; height: 20px; color: #bf5af2; }
.ia-topicos { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ia-topicos li { background: rgba(255, 255, 255, 0.7); border-radius: 14px; padding: 11px 13px; }
.ia-topicos li b { display: block; font-size: 15px; font-weight: 600; }
.ia-topicos li span { font-size: 13.5px; color: var(--cor); font-weight: 600; }
.brilho { background: linear-gradient(90deg, #0a84ff, #bf5af2, #ff375f, #0a84ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: corre 4s linear infinite; font-weight: 700; }
@keyframes corre { to { background-position: 300% 0; } }
.pensando { display: inline-flex; gap: 5px; align-items: center; }
.pensando i { width: 8px; height: 8px; border-radius: 50%; background: #bf5af2; animation: pula 1.1s infinite ease-in-out; }
.pensando i:nth-child(2) { animation-delay: 0.15s; background: #0a84ff; }
.pensando i:nth-child(3) { animation-delay: 0.3s; background: #ff375f; }
@keyframes pula { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 120px; }
.bolha { max-width: 85%; padding: 12px 15px; border-radius: 20px; font-size: 15.5px; white-space: pre-wrap; line-height: 1.5; }
.bolha.eu { align-self: flex-end; background: var(--cor); color: #fff; border-bottom-right-radius: 6px; }
.bolha.ia { align-self: flex-start; background: rgba(255, 255, 255, 0.82); border-bottom-left-radius: 6px; box-shadow: var(--sombra); }
.compositor { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + 20px + var(--safe-b)); width: min(760px, calc(100% - 24px)); display: flex; gap: 8px; padding: 8px; border-radius: 999px; z-index: 30; }
.compositor input { flex: 1; border: 0; background: transparent; outline: 0; padding: 0 12px; font-size: 16px; min-width: 0; }
@media (min-width: 960px) { .compositor { bottom: 24px; left: calc(50% + 124px); } }

/* ---------- folhas (modais) ---------- */
.veu { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.28); z-index: 60; opacity: 0; transition: opacity 0.25s; }
.veu.on { opacity: 1; }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 92vh; display: flex; flex-direction: column;
  border-radius: 28px 28px 0 0; background: rgba(248, 249, 252, 0.92); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.18); transform: translateY(100%); transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.folha.on { transform: none; }
.folha .pega { width: 38px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.18); margin: 8px auto 0; flex-shrink: 0; }
.folha .cab { display: flex; align-items: center; gap: 10px; padding: 10px 18px 8px; flex-shrink: 0; }
.folha .cab h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 22px; letter-spacing: -0.02em; flex: 1; }
.folha .corpo { overflow-y: auto; padding: 6px 18px calc(24px + var(--safe-b)); }
@media (min-width: 760px) {
  .folha { left: 50%; right: auto; bottom: auto; top: 50%; width: min(620px, 94vw); max-height: 88vh; border-radius: 28px; transform: translate(-50%, -46%) scale(0.96); opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.25s; }
  .folha.on { transform: translate(-50%, -50%); opacity: 1; }
  .folha .pega { display: none; }
}

/* ---------- formulários ---------- */
.campos { display: flex; flex-direction: column; gap: 14px; }
.campo label { display: block; font-size: 13px; font-weight: 650; color: var(--suave); margin: 0 4px 6px; }
.campo .ajuda { font-size: 12.5px; color: var(--suave); margin: 5px 4px 0; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 14px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); font-size: 16px; outline: 0; transition: box-shadow 0.2s;
}
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus { box-shadow: inset 0 0 0 2px var(--cor); }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tripla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grupo { background: rgba(255, 255, 255, 0.7); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: inset 0 0 0 1px var(--linha); }
.grupo h4 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.grupo h4 svg { width: 18px; height: 18px; color: var(--cor); }
.opcao-g { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 20px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); cursor: pointer; text-align: left; width: 100%; transition: transform 0.15s; color: var(--texto); }
.opcao-g:active { transform: scale(0.98); }
.opcao-g .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.opcao-g .ic svg { width: 26px; height: 26px; }
.opcao-g b { display: block; font-size: 17px; }
.opcao-g small { color: var(--suave); font-size: 14px; }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.miniaturas div { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #ddd; position: relative; }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.passos { display: flex; gap: 6px; margin: 0 0 14px; }
.passos i { flex: 1; height: 4px; border-radius: 4px; background: rgba(118, 118, 128, 0.2); }
.passos i.on { background: var(--cor); }
.lista-escolha { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.lista-escolha button { display: flex; gap: 12px; align-items: center; border: 0; background: #fff; border-radius: 16px; padding: 8px; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px var(--linha); color: var(--texto); }
.lista-escolha button.on { box-shadow: inset 0 0 0 2px var(--cor); }
.lista-escolha .mini { width: 74px; height: 50px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #ddd; }
.lista-escolha .mini img, .lista-escolha .mini svg { width: 100%; height: 100%; object-fit: cover; }
.cores { display: flex; gap: 10px; flex-wrap: wrap; }
.cores button { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--linha); cursor: pointer; }
.cores button.on { box-shadow: 0 0 0 3px var(--texto); }

/* ---------- avisos ---------- */
.torradas { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.torrada { pointer-events: auto; padding: 13px 16px; border-radius: 18px; font-weight: 600; font-size: 15px; display: flex; gap: 10px; align-items: center; animation: desce 0.35s cubic-bezier(0.2, 0.9, 0.25, 1); }
.torrada svg { width: 20px; height: 20px; flex-shrink: 0; }
.torrada.ok svg { color: var(--verde); }
.torrada.erro svg { color: var(--vermelho); }
@keyframes desce { from { transform: translateY(-20px); opacity: 0; } }
.dica { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; margin: 0 0 14px; font-size: 14.5px; }
.dica svg { width: 20px; height: 20px; color: var(--cor); flex-shrink: 0; margin-top: 1px; }
.dica button { margin-left: auto; border: 0; background: transparent; color: var(--suave); cursor: pointer; padding: 0 2px; font-size: 20px; line-height: 1; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .caixa { width: min(400px, 100%); padding: 30px 24px; text-align: center; }
.login .logo { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0a84ff, #5e5ce6); box-shadow: 0 10px 30px rgba(10, 132, 255, 0.35); }
.login .logo svg { width: 34px; height: 34px; }
.login h1 { font-family: var(--fonte-titulo); font-size: 28px; margin: 0 0 4px; letter-spacing: -0.02em; }
.login p { color: var(--suave); margin: 0 0 22px; }
.login .campos { text-align: left; }

.carregando { display: grid; place-items: center; min-height: 50vh; }
.giro { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: var(--cor); animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.so-celular { display: initial; }
@media (min-width: 960px) { .so-celular { display: none; } }
.entra { animation: entra 0.4s cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.duas-col { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.duas-col > * { min-width: 0; }
@media (min-width: 1000px) and (max-width: 1499px) { .duas-col .grade-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi .val { white-space: nowrap; font-size: clamp(22px, 6vw, 28px); }
@media (min-width: 1000px) { .duas-col { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.mt { margin-top: 14px; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--suave); }
.peq-t { font-size: 13.5px; }
.verde-t { color: #1e7e3c; }
.galeria > *:only-child { flex-basis: 100%; }
.flutua .btn.sec { flex: 0 0 56px; padding: 0; }
.vermelho-t { color: #d70015; }