/* Fin Farma — site institucional
   Identidade: brand/tokens.css (fonte única). Marinho é toda ação primária;
   dourado só marca e destaque, nunca botão. Mobile-first. */

:root {
  --marinho: #16305E;
  --marinho-escuro: #0F1B33;   /* tinta — não existe token próprio de hover */
  --tinta: #0F1B33;
  --dourado: #D1A13A;
  --cinza: #EDEFF3;
  --branco: #FFFFFF;

  --verde: #0E7C5A;
  --vermelho: #B3261E;
  --ambar: #B45309;

  --texto: #0F1B33;
  --texto-suave: #41506B;
  --texto-apoio: #6B7383;
  --borda: #E2E5EB;
  --fundo-app: #F7F8FA;

  --wrap: 1280px;
  --wrap-largo: 1440px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.6;
  color: var(--texto); background: var(--branco);
  /* nunca fabricar peso ou itálico: fonte sintética é o que "treme" na tela */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
/* suavização só sobre fundo escuro, onde o traço engorda naturalmente */
.hero, .rodape, .faixa-escura, .cta-final, .topo-fixo { -webkit-font-smoothing: antialiased; }

/* Três fontes, três papéis: Instrument Serif é a VOZ (título de display),
   Archivo é o TRABALHO (interface e texto), Jost é o DADO (número grande).
   A segunda metade do título vai em itálico dourado — o acento editorial. */
.titulo-display {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance;
  /* o descendente do itálico (g, j) passa da caixa da linha em 1.04 e
     encostava no lead logo abaixo — o respiro devolve o espaço do glifo */
  padding-bottom: .06em;
}
.titulo-display em { font-style: italic; color: var(--dourado-texto); }
.hero .titulo-display em, .on-navy.titulo-display em { color: var(--dourado); }
/* antialias também nas seções escuras do site */
.section-navy { -webkit-font-smoothing: antialiased; }

/* dourado escurecido só para TEXTO — o #D1A13A puro não tem contraste em
   fundo claro (2.2:1). Este tom mantém a cor da marca e passa em 4.5:1. */
:root { --dourado-texto: #8A6D1F; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 14px; font-weight: 700; letter-spacing: -0.015em; }
/* título que quebra, quebra em linhas parelhas — nunca "chat" ou
   "comissão" sozinhos na segunda linha */
h3 { text-wrap: balance; }
h1 { font-size: 32px; text-wrap: balance; }
h2 { font-size: 26px; text-wrap: balance; }
h3 { font-size: 18px; margin-bottom: 8px; }
p { margin: 0 0 16px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marinho); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
/* seções com painel e gráfico respiram mais: o dado ocupa a tela, não uma
   coluna estreita com ar sobrando dos dois lados */
.wrap-largo { max-width: var(--wrap-largo); }
.center { text-align: center; }

/* números sempre tabulares */
.kpi-val, .card-num, .bar-val, .phone, .preco, .painel-num, .tela-linhas b {
  font-variant-numeric: tabular-nums;
}

/* ---------- REVELAÇÃO AO ROLAR ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rv-2 { transition-delay: .12s; }
.rv-3 { transition-delay: .24s; }
.rv-4 { transition-delay: .36s; }
.rv.in { opacity: 1; transform: none; }

/* ---------- TOPO ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }

/* Lockup: símbolo plano + wordmark em Jost 600 (handoff §1.2) */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-symbol { width: 28px; height: 28px; flex: 0 0 auto; }
.brand-wordmark {
  font-family: var(--ff-fonte-marca, Jost, Archivo, sans-serif);
  font-weight: 600; font-size: 20px; line-height: 1;
  color: var(--marinho); letter-spacing: -0.01em;
}

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 13px 24px; border-radius: 10px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
  min-height: 48px;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--marinho); color: var(--branco); }
.btn-primary:hover { background: var(--marinho-escuro); }
.btn-sm { padding: 9px 18px; font-size: 15px; min-height: 42px; }
.btn-lg { padding: 16px 34px; font-size: 18px; min-height: 54px; }

/* sobre fundo escuro a ação continua sendo marinho — o botão claro carrega
   o marinho no texto; dourado segue nunca sendo botão */
.btn-claro { background: var(--branco); color: var(--marinho); }
.btn-claro:hover { background: var(--cinza); }
.btn-ghost-claro { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.35); }
.btn-ghost-claro:hover { border-color: var(--branco); }
/* contorno sobre fundo claro — a tecla da demonstração no topbar */
.btn-contorno { background: transparent; color: var(--marinho); border-color: var(--marinho); }
.btn-contorno:hover { background: rgba(22,48,94,.06); }
.topbar-acoes { display: flex; align-items: center; gap: 8px; }

/* ---------- HERO (escuro) ---------- */
.hero {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(22,48,94,.85), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(22,48,94,.55), transparent 60%),
    var(--tinta);
  color: var(--branco);
  padding: 52px 0 60px;
  overflow: hidden;
}
.hero-grid { display: grid; gap: 38px; }
.hero-grid > * { min-width: 0; }
.eyebrow {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; color: var(--dourado); margin-bottom: 16px;
}
.hero h1 { color: var(--branco); max-width: 21ch; }
/* O H1 atravessa a largura toda, acima do grid, e o conceito fica JUNTO:
   "O Sistema Operacional Inteligente" numa linha, "da sua Drogaria" fechando
   embaixo. Cada span é uma linha — a quebra nunca é do navegador. */
/* .hero .h1-hero para vencer o max-width:21ch de `.hero h1` — sem isso a
   primeira linha quebrava em "O Sistema / Operacional" por acidente */
.hero .h1-hero { max-width: none; font-size: clamp(34px, 4.9vw, 72px); line-height: 1.05; margin-bottom: 8px; }
.h1-hero > span { display: block; }
.h1-cima { margin-bottom: 14px; }
.h1-olho { display: inline-block; margin-bottom: 0; }
/* em tela estreita a primeira linha não cabe: "Inteligente" desce sozinho,
   em dourado — três linhas deliberadas, nunca "da / sua Drogaria". */
@media (max-width: 719px) { .h1-hero em { display: block; } }
/* a dor tem peso próprio: uma linha, maior que o lead, menor que o H1.
   Rebaixá-la a olho de 12px seria parede; dissolvê-la no lead a apagava. */
.hero-dor {
  margin: 4px 0 10px;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.4;
  color: #C7D0DE;
}
.hero-dor strong { color: var(--branco); }
.cta-row .btn { white-space: nowrap; }
/* as três provas da operação, embaixo dos botões — o resumo do que o dono
   admira na grande rede, em três linhas com o tique dourado */
.hero-provas { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 9px; }
.hero-provas li {
  position: relative; padding-left: 26px;
  font-size: 15px; color: #C7D0DE; line-height: 1.45;
}
.hero-provas li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--dourado); border-bottom: 2.5px solid var(--dourado);
  transform: rotate(-45deg);
}
.hl-ouro {
  background: linear-gradient(transparent 68%, rgba(209,161,58,.42) 68%);
}
.hero .lead { font-size: 18px; color: #C7D0DE; max-width: 54ch; }
.hero .lead strong { color: var(--branco); }

.cta-row { display: flex; flex-direction: column; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- o quadrado de KPI com o gráfico DENTRO ----------
   A mesma anatomia em toda fileira do site, como na plataforma: rótulo ·
   número · barra · legenda, nas mesmas alturas — quadrados vizinhos com
   anatomias diferentes é o que faz a fileira parecer torta. */
.qks { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .qks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .qks-4 { grid-template-columns: repeat(4, 1fr); } .qks-3 { grid-template-columns: repeat(3, 1fr); } }
.qk {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
  padding: 14px 16px 13px;
  /* minmax: rótulo que quebra em duas linhas cresce a própria faixa em vez
     de invadir o número de baixo */
  display: grid; grid-template-rows: minmax(18px, auto) auto 22px auto; gap: 4px;
  align-items: start;
}
.qk-rot {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--texto-apoio);
  align-self: center;
}
.qk-num {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 24px; line-height: 1.1;
  color: var(--marinho);
}
.qk-num small { font-size: 14px; font-weight: 600; color: var(--texto-suave, #5A6B85); }
/* a barra é sempre a PARTE dentro do todo escrito na legenda — e quando
   existe teto combinado, ele entra como marca dourada na mesma escala */
.qk-bar { position: relative; align-self: center; height: 7px; border-radius: 99px; background: var(--cinza); overflow: visible; }
.qk-bar i {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px;
  background: var(--marinho); transition: width .9s cubic-bezier(.2,.7,.3,1);
}
.qk-ok i { background: var(--verde); }
.qk-fora i { background: var(--vermelho); }
.qk-marca {
  position: absolute; top: -3px; bottom: -3px; width: 2.5px; border-radius: 2px;
  background: var(--dourado); transform: translateX(-50%);
}
/* balance: legenda que precisa quebrar quebra em duas linhas parelhas —
   nunca uma palavra órfã sozinha na segunda linha */
.qk-leg { font-size: 12.5px; line-height: 1.45; color: var(--texto-apoio); text-wrap: balance; }
/* a legenda reserva duas linhas: sem isso, o quadrado cuja legenda quebra
   empurra a própria barra e a fileira fica em alturas diferentes */
@media (min-width: 1000px) { .qk-leg { min-height: 36px; } }

/* ---------- Início: os cartões da demonstração — pergunta, gráfico e LEVA ----
   A mesma anatomia do Início da plataforma: aba + plano em cima, a pergunta
   da aba, o gráfico DELA no meio e uma linha embaixo. O cartão inteiro abre
   a seção. */
.cockpit-cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cockpit-cartoes a {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
  padding: 18px 20px 16px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cockpit-cartoes a:hover { border-color: var(--marinho); box-shadow: 0 10px 26px rgba(15,27,51,.10); transform: translateY(-2px); }
.ck-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ck-topo b {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dourado-texto);
}
.ck-plano { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-apoio); white-space: nowrap; }
.ck-q { margin: 0; font-size: 18px; line-height: 1.3; color: var(--tinta); }
/* o gráfico ocupa o meio e centra — cartões da mesma fileira ficam parelhos */
.ck-viz { flex: 1 1 auto; min-height: 128px; display: grid; align-content: center; justify-items: center; width: 100%; margin: 4px 0; }
.ck-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); text-wrap: balance; }
.ck-sub strong { color: var(--tinta); }
.ck-abrir { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--marinho); }

/* o mini chat do cartão de Atendimento — bolhas claras, evento no meio */
.ck-chat { width: 100%; display: grid; gap: 7px; }
.ck-b {
  margin: 0; max-width: 88%; padding: 8px 12px; font-size: 13px; line-height: 1.4;
  border-radius: 12px;
}
.ck-b-cliente { justify-self: start; background: var(--fundo-app, #F4F6FA); border: 1px solid var(--borda); border-bottom-left-radius: 4px; color: var(--texto); }
.ck-b-loja { justify-self: end; background: #E8EDF5; border: 1px solid #CFD9E8; border-bottom-right-radius: 4px; color: var(--marinho); }
.ck-ev { margin: 2px 0 0; justify-self: center; font-size: 11.5px; color: var(--texto-apoio); }
.ck-ev strong { color: var(--verde); }

/* a série do cartão de Vendas: a mesma leitura da seção — linha contra a régua */
.ck-serie { width: 100%; height: 82px; display: block; }
.ck-serie-area { fill: rgba(14,124,90,.14); }
.ck-serie-linha { fill: none; stroke: var(--verde); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ck-serie-regua { stroke: var(--dourado); stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }

/* o anel do cartão de Estoque, menor que o do case e com legenda curta */
.ck-anel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; }
.ck-anel .anel svg { width: 148px; height: 148px; }
.ck-anel-leg { width: auto; }
.ck-anel-leg li { padding: 3px 6px; }
.ck-anel-leg .leg-rot, .ck-anel-leg .leg-val { font-size: 12.5px; }

/* o funil do cartão de Marketing, mais compacto que o da seção */
.ck-funil .funil-passo { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 9px; }
.ck-funil .funil-trilha { height: 24px; }
.ck-funil .funil-val { font-size: .95rem; }

/* as colunas do saldo no cartão do Financeiro — descendo até o dia 29 */
.ck-caixa { width: 100%; }
.ck-cols { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.ck-cols i { flex: 1 1 0; height: var(--h); background: var(--marinho); border-radius: 3px 3px 0 0; min-height: 3px; }
.ck-cols .ck-col-fim { background: var(--ambar, #B45309); }
.ck-cols-rot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--texto-apoio); }
.ck-dia29 { color: var(--ambar, #B45309); font-weight: 700; }

@media (min-width: 640px) { .cockpit-cartoes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cockpit-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* a pipa do funcionário do mês: moldura dourada — reconhecimento, o uso
   legítimo do dourado — e os indicadores em linhas curtas embaixo */
.pipa-ouro { border-color: var(--dourado) !important; border-top-width: 3px !important; }
.pipa-ouro .destaque-rot { margin-bottom: 6px; }
.pil-mini { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--borda); display: grid; gap: 6px; text-align: left; }
.pil-mini li { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 8px; font-size: 12px; line-height: 1.4; }
/* nowrap + coluna de 132px: "Relacionamento ✎" é o rótulo mais largo e tem de
   caber inteiro — o lápis sozinho na segunda linha se lê como sujeira */
.pil-mini b { color: var(--marinho); font-weight: 700; white-space: nowrap; }
.pil-mini span { color: var(--texto-apoio); }
.pil-manual b::after { content: " ✎"; color: var(--dourado-texto); }

/* ---------- Meu Fin Farma: a regra dos sete dentro do celular ----------
   Um quadrado principal em largura cheia e depois três e três — o mesmo
   painel da plataforma, em miniatura. */
/* minmax(0,1fr): `1fr` sozinho é minmax(auto,1fr) e o conteúdo empurra a
   coluna para fora do celular — o defeito de sempre, registrado no projeto */
.mf7 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* no celular os seis viram dois por linha: "Relacionamento" não cabe em
   coluna de 78px, e rótulo vazando sobre o vizinho é sobreposição */
@media (max-width: 599px) { .mf7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mf7 .qk-main { grid-column: 1 / -1; }
.mf7 .qk { padding: 11px 12px 10px; border-radius: 12px; }
/* o rótulo pode quebrar em duas linhas (rótulo cortado não informa), e o
   número não quebra nunca — "R$ 15,4 mil" em três linhas se lê como erro */
.qk-mini { grid-template-rows: minmax(24px, auto) auto 14px; gap: 3px; }
.qk-mini .qk-rot { font-size: 9.5px; letter-spacing: .05em; line-height: 1.15; align-self: start; }
.qk-mini .qk-num { font-size: 15px; white-space: nowrap; }
/* o quadrado que depende de plano: o nome do plano vai em dourado no rótulo */
.qk-plano { border-style: dashed; }
.qk-plano .qk-rot em { font-style: normal; color: var(--dourado-texto); font-weight: 700; }

/* a série de 7 dias dentro do quadrado — a mesma da demonstração */
.spark { display: block; width: 100%; height: 22px; align-self: end; }
.spark polygon { fill: rgba(22,48,94,.10); }
.spark polyline { fill: none; stroke: var(--marinho); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.qk-mini .spark { height: 15px; }

/* o quadro da escala, como na demonstração: cabeçalho navy, VOCÊ aceso */
.eq-quadro { border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; background: var(--branco); }
.eq-cab {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--tinta); color: #fff;
}
.eq-cab b { font-size: 14px; display: block; }
.eq-cab small { display: block; font-size: 11px; color: rgba(255,255,255,.65); }
.eq-cab em { margin-left: auto; font-style: normal; font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .1em; color: var(--dourado); }
.eq-cab .ff-simbolo { width: 22px; height: 22px; flex: none; }
.eq-rolo { overflow-x: auto; }
.eq-quadro table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.eq-quadro th {
  text-align: center; font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 10px; letter-spacing: .08em; color: var(--texto-apoio);
  padding: 8px 6px; background: var(--cinza); text-transform: uppercase;
}
.eq-quadro th:first-child, .eq-quadro td:first-child { text-align: left; padding-left: 12px; min-width: 96px; }
.eq-quadro td { text-align: center; padding: 7px 6px; border-top: 1px solid var(--borda); font-variant-numeric: tabular-nums; color: var(--texto-suave, #5A6B85); white-space: nowrap; }
.eq-quadro td b { display: block; font-size: 12px; color: var(--marinho); }
.eq-quadro td i { display: block; font-style: normal; font-size: 10px; color: var(--texto-apoio); }
.eq-voce td { background: #FBF6EA; }
.eq-voce td:first-child b::after { content: " · VOCÊ"; color: var(--dourado-texto); font-size: 10px; letter-spacing: .06em; }
.eq-folga { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--cinza); border: 1px solid var(--borda); font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--texto-apoio); }
@media (max-width: 479px) { .qk-mini .qk-num { font-size: 13.5px; } }
.qk-mini .qk-num small { font-size: 11px; }
.qk-mini .qk-bar { height: 5px; }
.mf7 .qk-main .qk-num { font-size: 22px; }
.mf7 .qk-leg { min-height: 0; }

/* ---------- a escala na Equipe: a tira da semana da plataforma ---------- */
.escala-bloco {
  /* minmax(0,1fr): a tira de 7 dias tem min-content largo e, com `1fr`
     puro, empurrava o bloco para fora do celular pequeno */
  margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 18px; align-items: center;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
  padding: 22px;
}
.escala-texto h3 { color: var(--marinho); margin-bottom: 6px; }
.escala-texto p { font-size: 14.5px; color: var(--texto-apoio); margin: 0; max-width: 46ch; }
/* o lado do "você lança": a lista crua que entra, e a seta para o que sai */
.esc-in { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.esc-in li {
  font-size: 13.5px; color: var(--texto-apoio);
  background: var(--cinza); border: 1px dashed var(--borda); border-radius: 8px;
  padding: 7px 12px; font-variant-numeric: tabular-nums;
}
.esc-in b { color: var(--marinho); }
.esc-seta { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--dourado-texto); letter-spacing: .03em; }
.escala-bloco > div > .qk-rot { display: block; margin-bottom: 8px; }
.escala-tira { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.et-dia {
  border: 1px solid var(--borda); border-radius: 10px; padding: 9px 4px 8px;
  text-align: center; background: var(--cinza);
}
.et-dia b { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--marinho); }
.et-dia i { display: block; font-style: normal; font-size: 11.5px; color: var(--texto-apoio); margin-top: 3px; font-variant-numeric: tabular-nums; }
.et-folga { background: transparent; opacity: .55; }
.et-folga i { letter-spacing: .04em; }
.et-hoje { background: var(--branco); border-color: var(--dourado); box-shadow: 0 0 0 1px var(--dourado); }
.et-dom { border-style: dashed; background: transparent; }
@media (min-width: 900px) { .escala-bloco { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 30px; } }

/* ---------- Marketing: a grade de canais do balcão digital ---------- */
.canais {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
.canais li {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
  padding: 16px 18px;
}
.canais svg { width: 22px; height: 22px; fill: none; stroke: var(--marinho); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.canais b { display: block; font-size: 15.5px; color: var(--marinho); }
.canais li > span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--texto-apoio); }
@media (min-width: 640px) { .canais { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .canais { grid-template-columns: repeat(5, 1fr); } }

/* ---------- a fila omnichannel: 1 número → fila única → equipe ---------- */
.fila-flow {
  display: flex; align-items: stretch; gap: 14px;
  margin: 6px 0 30px;
}
.fq-no {
  flex: 1; background: var(--branco); border: 1px solid var(--borda);
  border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.fq-numero svg { width: 22px; height: 22px; fill: none; stroke: var(--verde); stroke-width: 1.7; margin-bottom: 6px; }
.fq-no b { font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 17px; color: var(--marinho); }
.fq-no > span { font-size: 13px; color: var(--texto-apoio); line-height: 1.4; }
.fq-seta { align-self: center; flex: 0 0 26px; height: 2px; position: relative; background: var(--dourado); opacity: .75; }
.fq-seta::after {
  content: ""; position: absolute; right: -1px; top: -4px;
  border-left: 8px solid var(--dourado); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.fq-time { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.fq-pessoa {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--marinho);
}
.fq-entrega { border-style: dashed; }
@media (max-width: 719px) {
  .fila-flow { flex-direction: column; gap: 10px; }
  .fq-seta { align-self: flex-start; margin-left: 26px; transform: rotate(90deg); transform-origin: left center; flex-basis: 18px; }
  .fq-time { flex-direction: row; flex-wrap: wrap; }
}

/* a categoria escrita acima do título — o mesmo nome da aba na plataforma.
   Quem vê o site e depois abre a demonstração encontra a mesma sequência. */
.cat-rot {
  display: flex; align-items: center; gap: 10px;
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dourado-texto); margin-bottom: 12px;
}
.cat-rot::after { content: ""; flex: 0 0 44px; height: 2px; background: var(--dourado); border-radius: 2px; opacity: .55; }
.cat-rot.on-navy { color: var(--dourado); }

/* ---------- COCKPIT ---------- */
.cockpit {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--branco);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.cockpit-bar {
  display: flex; align-items: center; gap: 6px;
  background: var(--marinho); padding: 11px 14px;
}
.cockpit-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); }
.cockpit-title {
  margin-left: 8px; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.78); letter-spacing: .02em;
}
.cockpit-live {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.66);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dourado); animation: pulsar 2s ease infinite; }
@keyframes pulsar { 50% { opacity: .35; } }

.cockpit-body { padding: 18px; background: var(--fundo-app); }
.cockpit-flag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ambar); margin: 0 0 14px;
}
.cockpit-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 13px; }
.kpi-wide { grid-column: 1 / -1; }
.kpi-rot {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-apoio); margin-bottom: 6px;
}
.kpi-val {
  display: block; font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 25px; line-height: 1.1; color: var(--tinta); letter-spacing: -0.02em;
}
.kpi-sub { display: block; margin-top: 5px; font-size: 12px; color: var(--texto-apoio); }
.kpi-trilha {
  display: block; height: 6px; margin-top: 10px;
  background: var(--cinza); border-radius: 3px; overflow: hidden;
}
.kpi-fill {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--marinho);
  transition: width 1.1s cubic-bezier(.2,.7,.3,1);
}
.in .kpi-fill, .cockpit.in .kpi-fill { width: var(--w); }

.cockpit-acao {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; padding: 12px 14px;
  background: #E8EDF5; border: 1px solid #CFD9E8; border-radius: 10px;
}
.acao-ponto { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--marinho); }
.cockpit-acao p { margin: 0; font-size: 13.5px; color: var(--marinho); font-weight: 500; }

/* Estado nunca é só cor (handoff §2.1): cor + palavra, nos pares documentados. */
.badge {
  display: inline-block; margin-top: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px;
}
.badge-erro { color: var(--vermelho); background: #FBEAE9; border: 1px solid #F2D3D1; }
.badge-ok   { color: var(--verde);    background: #E7F3EE; border: 1px solid #CBE4DA; }
/* projeção é etiqueta neutra: nem boa nem má — ainda não aconteceu */
.badge-proj { color: #5A6B85; background: #EDF0F5; border: 1px solid #D5DCE7; }

/* ---------- SEÇÕES ---------- */
.section { padding: 56px 0; }
.section-cinza { background: var(--fundo-app); }
.section-lead { font-size: 17px; color: var(--texto-suave); max-width: 62ch; margin-bottom: 30px; }

.grid { display: grid; gap: 16px; }
.grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }

.cards .card {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--radius); padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cards .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,27,51,.08); border-color: #CFD9E8; }
.cards .card h3 { color: var(--marinho); }
.cards .card p { color: var(--texto-suave); margin: 0; font-size: 16px; }
.card-num {
  display: block; font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 30px; line-height: 1.1; color: var(--marinho);
  letter-spacing: -0.02em; margin-bottom: 10px;
}
.cards-suave .card { background: transparent; border-style: dashed; }
.cards-suave .card:hover { box-shadow: none; transform: none; border-color: var(--texto-apoio); }

/* ---------- CASE (dashboard sobre marinho) ---------- */
.section-navy { background: var(--marinho); color: var(--branco); }
.on-navy { color: var(--branco); }
.section-navy .section-lead { color: rgba(255,255,255,.80); }
.tag {
  display: inline-block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--dourado);
  border: 1px solid rgba(209,161,58,.55); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 18px;
}

.dash { display: grid; gap: 14px; }
.painel {
  margin: 0; background: var(--branco); border-radius: var(--radius);
  padding: 20px; color: var(--texto);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.painel-titulo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 15px; font-weight: 700; color: var(--tinta); margin-bottom: 4px;
}
.painel-titulo .badge { margin-top: 0; }
.painel-sub { font-size: 13px; color: var(--texto-apoio); margin-bottom: 16px; }
.painel-num {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 38px; line-height: 1; letter-spacing: -0.02em;
  color: var(--tinta); margin: 6px 0 14px;
}
.painel-num small { font-size: 17px; color: var(--texto-apoio); font-family: Archivo, sans-serif; font-weight: 600; }
.painel-nota { font-size: 12.5px; color: var(--texto-apoio); margin: 12px 0 0; text-wrap: balance; }

/* barras — série única em marinho, rótulo direto, sem legenda */
.bars li { margin-bottom: 14px; }
.bars li:last-child { margin-bottom: 0; }
.bar-rot { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); margin-bottom: 5px; }
.bar-rot .badge { margin-top: 0; }
.bar-trilha { display: block; height: 12px; background: #DEE5F0; border-radius: 4px; overflow: hidden; }
.bar-fill {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: var(--marinho);
  transition: width .7s cubic-bezier(.2,.7,.3,1);
}
.in .bar-fill { width: var(--w); }
.bar-val { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.bar-val small { font-weight: 400; color: var(--texto-apoio); }

/* medidor com marca de meta */
.metro { position: relative; height: 14px; background: var(--cinza); border-radius: 4px; margin: 4px 0 26px; }
.metro-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px;
  transition: width .7s cubic-bezier(.2,.7,.3,1);
}
.metro-ruim { background: var(--vermelho); }
.metro-bom  { background: var(--verde); }
/* dourado no medidor só no contexto de reconhecimento (funcionário do mês) */
.metro-ouro { background: var(--dourado); }
.in .metro-fill { width: var(--w); }
.metro-meta {
  position: absolute; top: -4px; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--texto-suave); white-space: nowrap;
}
.metro-meta i {
  display: block; width: 2px; height: 22px; margin: 0 auto 3px;
  background: var(--tinta); border-radius: 1px;
}

/* a cor base é a de fundo claro; a seção navy REAFIRMA a dela — a regra da
   ilha. Antes era branca fixa: em Vendas e Financeiro o texto sumia e
   sobrava só o traço dourado no vazio. */
.disclaimer {
  font-size: 14.5px; line-height: 1.65; color: var(--texto-apoio);
  border-left: 3px solid var(--dourado); padding-left: 16px; margin: 26px 0 0;
  max-width: 72ch;
}
.section-navy .disclaimer { color: rgba(255,255,255,.72); }

/* ---------- CADEIA ---------- */
.cadeia { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cadeia li { display: flex; align-items: center; gap: 8px; }
.cadeia li::after { content: "→"; color: var(--texto-apoio); font-size: 14px; }
.cadeia li:last-child::after { content: none; }
.cadeia span {
  display: inline-block; font-size: 14px; font-weight: 600;
  background: var(--cinza); color: var(--marinho);
  border-radius: 999px; padding: 7px 14px;
  border: 2px solid transparent;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.cadeia li.ativo span {
  background: var(--marinho); color: var(--branco);
  border-color: var(--dourado); transform: translateY(-2px);
}
.cadeia-fim span { background: var(--marinho); color: var(--branco); }
.cadeia-nota { color: var(--texto-suave); max-width: 68ch; }

/* ---------- OPERAÇÃO (prévia) ---------- */
.op-grid { display: grid; gap: 26px; }
.op-pontos { display: grid; gap: 18px; }
.op-pontos li { display: flex; gap: 14px; align-items: flex-start; }
.op-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--branco); border: 1px solid var(--borda);
}
.op-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--marinho); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.op-pontos h3 { margin-bottom: 4px; color: var(--marinho); font-size: 16.5px; }
.op-pontos p { margin: 0; font-size: 15px; color: var(--texto-suave); }

.op-demo { display: grid; gap: 14px; }
.fone {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(15,27,51,.10);
  max-width: 400px;
}
.fone-topo {
  display: flex; align-items: center; gap: 9px;
  background: var(--marinho); color: var(--branco);
  padding: 12px 16px; font-size: 13.5px; font-weight: 600;
}
.fone-topo svg { width: 20px; height: 20px; fill: none; stroke: var(--branco); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fone-chat { padding: 16px; display: grid; gap: 9px; background: var(--fundo-app); min-height: 190px; align-content: start; }
.bolha {
  margin: 0; max-width: 82%; padding: 9px 13px;
  font-size: 14px; line-height: 1.45; border-radius: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.bolha.vista { opacity: 1; transform: none; }
.b-cliente { justify-self: start; background: var(--branco); border: 1px solid var(--borda); border-bottom-left-radius: 4px; color: var(--texto); }
.b-loja { justify-self: end; background: #E8EDF5; border: 1px solid #CFD9E8; border-bottom-right-radius: 4px; color: var(--marinho); }
.fone-nota { margin: 0; padding: 9px 16px; font-size: 11.5px; color: var(--texto-apoio); border-top: 1px solid var(--cinza); }

.passos { display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: 400px; }
/* ---------- o ciclo do pedido: linha do tempo conectada ---------- */
.ciclo { margin: 30px 0 0; }
.ciclo-trilha { display: flex; justify-content: space-between; position: relative; }
/* a trilha atravessa de nó a nó, atrás deles */
.ciclo-trilha::before {
  content: ""; position: absolute; left: 9px; right: 9px; top: 8px; height: 2px;
  background: var(--borda); border-radius: 2px;
}
.ciclo .passo { display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; }
.ciclo .passo i {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--branco); border: 2px solid var(--borda);
  transition: background-color .3s, border-color .3s, transform .3s;
}
.ciclo .passo.feito i { border-color: var(--verde); background: var(--verde); }
.ciclo .passo.ativo i { border-color: var(--verde); background: var(--verde); transform: scale(1.35); box-shadow: 0 0 0 5px rgba(14,124,90,.15); }
.ciclo .passo b {
  font-size: 13px; font-weight: 600; color: var(--texto-apoio); white-space: nowrap;
  transition: color .3s;
}
.ciclo .passo.ativo b, .ciclo .passo.feito b { color: var(--verde); }
/* o nome grande da etapa acesa — só no celular, onde os cinco não cabem */
.ciclo-atual { display: none; margin: 14px 0 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--verde); }
@media (max-width: 599px) {
  .ciclo .passo b { display: none; }
  .ciclo-atual { display: block; }
}

.passos-nota { margin-top: 10px; font-size: 13px; color: var(--texto-apoio); max-width: 34ch; }
/* a conversão do balconista, em número — não em parágrafo */
.passos li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--texto-apoio); }
.passo i {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--borda); background: var(--branco);
  transition: background-color .3s, border-color .3s;
}
.passo.ativo i { border-color: var(--marinho); background: var(--marinho); box-shadow: 0 0 0 3px #CFD9E8; }
.passo.ativo { color: var(--marinho); }
.passo.feito i { border-color: var(--verde); background: var(--verde); }
.passo.feito { color: var(--verde); }

/* ---------- EQUIPE / FUNCIONÁRIO DO MÊS ---------- */
.equipe-grid { display: grid; gap: 22px; }
.pilares { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pilares li {
  font-size: 13.5px; font-weight: 600; color: var(--marinho);
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 999px; padding: 8px 16px;
}
.equipe-nota { color: var(--texto-suave); font-size: 15.5px; max-width: 56ch; margin: 0; }

/* dourado aqui é reconhecimento — o único uso além da marca */
.destaque-mes {
  background: var(--branco);
  border: 1px solid #F0DCC0;
  border-top: 4px solid var(--dourado);
  border-radius: var(--radius); padding: 24px;
  box-shadow: 0 14px 34px rgba(15,27,51,.08);
}
.destaque-rot {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ambar); margin-bottom: 12px;
}
.destaque-nome {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 30px; line-height: 1.1; color: var(--tinta); margin: 0 0 2px;
}
.destaque-funcao { font-size: 13.5px; color: var(--texto-apoio); margin-bottom: 18px; }
.destaque-numeros { display: flex; gap: 28px; margin-bottom: 14px; }
.destaque-val {
  display: block; font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 30px; line-height: 1.1; color: var(--tinta); letter-spacing: -0.02em;
}
.destaque-sub { display: block; font-size: 12.5px; color: var(--texto-apoio); margin-top: 3px; }
.metro-nota { margin: 0 0 10px; height: 10px; }
.destaque-fonte { margin: 0; font-size: 12px; color: var(--texto-apoio); }

/* ---------- MEU FIN FARMA ---------- */
.papeis-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.aba {
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: var(--branco); color: var(--texto-suave);
  border: 1px solid var(--borda);
  transition: background-color .2s, color .2s, border-color .2s;
  min-height: 42px;
}
.aba:hover { border-color: var(--marinho); color: var(--marinho); }
.aba.ativa { background: var(--marinho); color: var(--branco); border-color: var(--marinho); }

.tela {
  display: grid; grid-template-columns: 56px 1fr;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 14px 34px rgba(15,27,51,.08);
}
.tela-lateral {
  background: var(--tinta); padding: 14px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tela-simbolo { width: 26px; height: 26px; }
.ff-barra-branca { stroke: #FFFFFF; }
.tela-quem {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #A9B2C2;
}
.tela-conteudo { padding: 20px; min-height: 250px; }
.papel-tela { display: none; }
.papel-tela.ativa { display: block; animation: surgir .35s ease; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }
.tela-titulo { font-size: 16px; font-weight: 700; color: var(--tinta); margin-bottom: 12px; }
.tela-linhas li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--cinza);
  font-size: 14.5px; color: var(--texto-suave);
}
.tela-linhas b {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 18px;
  color: var(--tinta); letter-spacing: -0.01em; text-align: right;
}
.tela-linhas b.mini { font-family: Archivo, sans-serif; font-size: 12.5px; font-weight: 500; color: var(--texto-apoio); max-width: 55%; }
/* dourado: destaque do funcionário do mês — uso legítimo de marca/reconhecimento */
.tela-destaque {
  margin: 14px 0 0; padding: 10px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--tinta);
  background: #FBF0E4; border: 1px solid #F0DCC0; border-radius: 10px;
}
.estrela { color: var(--dourado); margin-right: 4px; }
.tela-nota { margin: 12px 0 0; font-size: 12.5px; color: var(--texto-apoio); }

/* ---------- MÓDULOS ---------- */
.modulos-bloco { margin-bottom: 38px; }
.modulos-bloco:last-child { margin-bottom: 0; }
.status-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  display: inline-block; border-radius: 999px; padding: 5px 12px; margin-bottom: 16px;
}
.status-hoje { color: var(--verde); background: #E7F3EE; border: 1px solid #CBE4DA; }
.status-proximo { color: var(--texto-apoio); background: var(--cinza); border: 1px solid var(--borda); }
.nota-construcao, .nota-preco { margin-top: 18px; font-size: 14.5px; color: var(--texto-apoio); max-width: 64ch; }

/* ---------- PARCEIRAS ---------- */
.parceira { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; }
.parceira h3 { color: var(--marinho); margin-bottom: 4px; }
.parceira-loja { font-size: 13px; color: var(--texto-apoio); margin-bottom: 10px; }
.parceira-chip {
  align-self: flex-start; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  color: var(--texto-apoio); background: var(--cinza); border: 1px solid var(--borda);
}
.parceira-chip-ok { color: var(--verde); background: #E7F3EE; border-color: #CBE4DA; }
.parceira-link {
  margin-top: auto; padding-top: 12px;
  font-size: 14px; font-weight: 600; color: var(--marinho); text-decoration: none;
}
.parceira-link:hover { text-decoration: underline; }
.parceira p:last-child { margin: 0; font-size: 15px; color: var(--texto-suave); }

/* ---------- PLANOS ---------- */
.plano {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--radius); padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plano:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,27,51,.08); }
.plano h3 { color: var(--marinho); }
.preco {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--marinho); margin-bottom: 14px;
}
.preco small { font-size: 14px; font-weight: 600; color: var(--texto-apoio); margin-left: 2px; }
.plano-itens li {
  font-size: 15px; color: var(--texto-suave);
  padding: 6px 0 6px 20px; position: relative; border-top: 1px solid var(--borda);
}
.plano-itens li:first-child { border-top: none; }
.plano-itens li::before {
  content: ""; position: absolute; left: 4px; top: 14px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--marinho);
}
.phone { margin-top: 16px; font-size: 16px; font-weight: 600; color: var(--marinho); }

/* ---------- RODAPÉ ---------- */
.footer { background: var(--tinta); color: var(--branco); padding: 34px 0; }
.footer-inner { display: grid; gap: 20px; }
.signature {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 17px; line-height: 1.45; margin: 0; color: var(--branco);
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--dourado); }

.footer-extra {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: 18px;
}
.redes { display: flex; flex-wrap: wrap; gap: 10px; }
.redes a {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85);
  transition: color .2s, border-color .2s, transform .2s, background-color .2s;
}
.redes a:hover {
  color: var(--dourado); border-color: var(--dourado);
  background: rgba(209,161,58,.10); transform: translateY(-3px);
}
.redes svg {
  width: 22px; height: 22px; fill: none;
  stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.redes .cheio { fill: currentColor; stroke: none; }
.endereco {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14px; color: rgba(255,255,255,.66);
}
.endereco svg {
  width: 19px; height: 19px; fill: none;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}

/* ---------- CTA FIXA (celular) ---------- */
.cta-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--borda);
  transform: translateY(110%); transition: transform .3s ease;
}
.cta-fixa.visivel { transform: none; }
.cta-fixa .btn { width: 100%; }

/* ---------- TELEFONE PEQUENO (ate 379px) ----------
   O pente fino de 320px: botão com nowrap estourava a janela, a tira da
   escala (7 colunas de conteúdo fixo) empurrava o container, e a legenda
   do anel com nowrap alargava o painel inteiro do case. */
@media (max-width: 379px) {
  .cta-row .btn { white-space: normal; }
  /* (regra movida para 599px — ver abaixo) */
  /* e a etiqueta do slot da faixa não encosta no título */
  .faixa-foto[data-sem-foto="1"] > .wrap { padding-top: 58px; }
  .escala-tira { grid-template-columns: repeat(7, minmax(42px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .leg-val { white-space: normal; }
  .leg-val small { display: block; }
  .dre-l { grid-template-columns: 1fr; gap: 2px; }
  .fq-time .fq-pessoa { font-size: 13px; padding: 7px 12px; }
}

/* ---------- FOCO VISÍVEL ---------- */
a:focus-visible, .btn:focus-visible, .aba:focus-visible {
  outline: 3px solid var(--dourado); outline-offset: 2px;
}

/* ---------- TABLET ---------- */
@media (min-width: 640px) {
  .cta-row { flex-direction: row; }
  .footer-links { flex-direction: row; gap: 24px; }
  .footer-inner { grid-template-columns: 1fr auto; align-items: center; }
  .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
  .dash { grid-template-columns: 1fr 1fr; }
  .painel-grande { grid-column: 1 / -1; }
  h1 { font-size: 42px; }
  h2 { font-size: 30px; }
  .brand-symbol { width: 32px; height: 32px; }
  .brand-wordmark { font-size: 22px; }
  .tela-conteudo { padding: 26px; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .equipe-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer-extra { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- DESKTOP ---------- */
@media (min-width: 900px) {
  .op-pontos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .op-pontos li { flex-direction: column; gap: 10px; }
  .equipe-grid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 44px; }
  .footer-extra { flex-direction: row; align-items: center; justify-content: space-between; }
  body { font-size: 18px; }
  .hero { padding: 74px 0 84px; }
  /* alinhado pelo TOPO: com o fio completo a coluna da direita é alta, e
     centrar a esquerda abria um vazio entre o H1 e a dor */
  .hero-grid { grid-template-columns: 1.02fr .98fr; align-items: start; gap: 52px; }
  .section { padding: 78px 0; }
  h1 { font-size: 52px; }
  h2 { font-size: 34px; }
  .hero .lead { font-size: 20px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  /* cinco planos: o Fin é o último degrau, e a fileira precisa caber inteira
     numa linha — plano que quebra para a linha de baixo parece adendo. */
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
  .dash { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .kpi-val { font-size: 28px; }
  .cta-fixa { display: none; }
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .rv { opacity: 1; transform: none; }
  .kpi-fill, .bar-fill, .metro-fill, .qk-bar i { width: var(--w) !important; }
  .cursor { display: none; }
}


/* ---------- tooltip de valor exato (mesmo componente da plataforma) ---------- */
.bars li, .metro { cursor: pointer; }
.bars li { border-radius: 8px; transition: background-color .15s; padding: 4px 6px; margin-left: -6px; margin-right: -6px; }
.bars li:hover { background: rgba(22,48,94,.06); }
.section-navy .bars li:hover { background: rgba(255,255,255,.08); }
.viz-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--tinta); color: #fff;
  border-radius: 10px; padding: 9px 12px; max-width: 260px;
  font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(15,27,51,.35);
}
.viz-tip p { margin: 0; }
.viz-tip strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.viz-tip-titulo { font-weight: 600; opacity: .8; font-size: 11.5px; }

/* estrela do carro-chefe no card de área */
.card-estrela { color: var(--dourado); font-size: .8em; vertical-align: 2px; }


/* ---------- MEDIDOR REDONDO (o mesmo componente do produto) ---------- */
.painel-medidor {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* badge sempre na própria linha: os quatro cartões alinham o medidor na mesma altura */
.painel-medidor .painel-titulo { flex-direction: column; gap: 6px; align-items: center; }
.painel-medidor .painel-nota { text-align: center; text-wrap: balance; }

.medidor { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; }
.medidor svg { display: block; overflow: visible; }
.med-trilha { fill: none; stroke: #DEE5F0; stroke-width: 13; stroke-linecap: round; }
/* a zona boa é fundo, não dado: fica atrás e discreta */
.med-zona { fill: none; stroke: rgba(14, 124, 90, .18); stroke-width: 13; stroke-linecap: butt; }
.med-fill { fill: none; stroke-width: 13; stroke-linecap: round; }
.med-tick { stroke: var(--dourado); stroke-width: 3; stroke-linecap: round; }

.med-meio {
  position: absolute; left: 0; right: 0; top: 34%;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 0 2px; pointer-events: none;
}
.med-meio strong {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 30px;
  line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.med-un { font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 19px; color: var(--tinta); }
.med-rot {
  flex: 0 0 100%; margin-top: 3px; text-align: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-apoio);
}
.med-leg {
  margin: -6px 0 10px; font-size: 12.5px; color: var(--texto-apoio);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.med-leg i { display: inline-block; width: 2px; height: 12px; background: var(--dourado); border-radius: 1px; }

/* ---------- os quatro indicadores numa linha só ---------- */
.dash-medidores { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 620px) { .dash-medidores { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .dash-medidores { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- ANEL (donut) — composição do capital parado ---------- */
.anel-bloco { display: grid; gap: 18px; align-items: center; justify-items: center; }
.anel { position: relative; display: inline-flex; }
.anel svg { display: block; }
.anel-trilha { fill: none; stroke: #EDF1F7; stroke-width: 22; }
.anel-fatia { fill: none; stroke-width: 22; }
.anel-meio {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; pointer-events: none;
}
.anel-meio strong {
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 27px;
  line-height: 1; letter-spacing: -0.01em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.anel-pre { font-size: 12px; font-weight: 600; color: var(--texto-apoio); }
.anel-rot {
  margin-top: 4px; max-width: 92px; text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-apoio); line-height: 1.3;
}

.anel-leg { list-style: none; margin: 0; padding: 0; width: 100%; }
.anel-leg li {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: baseline;
  gap: 4px 10px; padding: 6px; margin: 0 -6px; border-radius: 8px;
  cursor: pointer; transition: background-color .15s;
}
.anel-leg li:hover { background: rgba(22,48,94,.06); }
.leg-cor { width: 10px; height: 10px; border-radius: 3px; background: var(--c); align-self: center; }
.leg-rot { font-size: 13.5px; color: var(--texto-suave); }
.leg-val {
  font-size: 13.5px; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.leg-val small { font-weight: 400; color: var(--texto-apoio); }

@media (min-width: 560px) {
  .anel-bloco { grid-template-columns: auto 1fr; justify-items: start; gap: 26px; }
}

/* medidor dourado: reconhecimento do mês, dentro do cartão de destaque */
.destaque-baixo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}
.destaque-numeros { margin-bottom: 0; }
.medidor-ouro .med-zona { stroke: rgba(209,161,58,.20); }
.medidor-ouro .med-leg i { background: var(--dourado); }
.medidor-ouro svg { width: 136px; height: 84px; }
.medidor-ouro .med-meio strong { font-size: 24px; }
.medidor-ouro .med-rot { letter-spacing: .05em; }
.medidor-ouro .med-leg { margin-bottom: 0; font-size: 11.5px; }

/* ---------- desktop: os dois painéis grandes lado a lado ---------- */
@media (min-width: 900px) {
  .dash { grid-template-columns: 1fr 1fr; }
  .dash .painel-grande { grid-column: auto; }
}

/* ---------- os quatro pilares: o que o sistema lança e o que o gestor lança ---------- */
.pilares-grade { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.pilares-grade li {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 12px; padding: 14px 16px;
}
.pilar-nome { display: block; font-size: 15.5px; font-weight: 700; color: var(--tinta); }
.pilar-fonte {
  display: inline-block; margin: 6px 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-apoio); background: var(--cinza);
  border-radius: 999px; padding: 4px 10px;
}
.pilar-auto { color: var(--marinho); background: rgba(22,48,94,.09); }
.pilar-como { display: block; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }
@media (min-width: 560px) { .pilares-grade { grid-template-columns: 1fr 1fr; } }

/* medidor compacto dentro do cockpit do hero */
.kpi-anelado { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kpi-anelado .kpi-rot { text-align: center; }
.medidor-mini svg { width: 118px; height: 73px; }
.medidor-mini .med-meio { top: 36%; }
.medidor-mini .med-meio strong { font-size: 21px; }
.medidor-mini .med-un { font-size: 14px; }
.medidor-mini .med-leg { margin: -4px 0 6px; font-size: 11px; }

/* a cadeia cabe numa linha só no desktop largo: o sinal se lê de ponta a ponta */
@media (min-width: 1200px) {
  .cadeia { gap: 6px; }
  .cadeia li { gap: 6px; }
  .cadeia span { font-size: 13.5px; padding: 7px 12px; }
}

/* ---------- desktop largo: nada de coluna solta com vazio ao lado ---------- */
@media (min-width: 1200px) {
  .op-demo { justify-self: center; width: 100%; max-width: 440px; }
  .equipe-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
}

/* a prévia da tela é uma tela de app, não uma faixa: não estica com o monitor */
@media (min-width: 1200px) { .tela { max-width: 880px; } }

/* ---------- as seis abas do produto, numeradas na ordem do trabalho ---------- */
.abas-produto .card { position: relative; padding-top: 26px; }
.card-ordem {
  position: absolute; top: 14px; right: 16px;
  font-family: Jost, Archivo, sans-serif; font-weight: 600; font-size: 22px;
  line-height: 1; color: var(--borda);
}
.card-chefe { border-color: var(--dourado); }
.card-chefe .card-ordem { color: var(--dourado); }
.card-plano {
  margin: 12px 0 0; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texto-apoio);
}
.card-chefe .card-plano { color: var(--dourado-texto); }

/* o destaque mora no GROWTH — é o plano que a maioria escolhe, e o selo
   dourado é reconhecimento, o único papel do dourado fora da marca */
.plano-chefe { border-color: var(--dourado); position: relative; }
.plano-selo {
  position: absolute; top: -11px; right: 14px;
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--dourado); color: var(--tinta);
  padding: 3px 10px; border-radius: 999px;
}
/* o topo da escada leva o dourado da marca: é o Fin de Fin Farma */
.plano-topo { border-color: var(--dourado); background: #0F1B33; color: #fff; }
.plano-topo h3, .plano-topo .preco { color: #fff; }
.plano-topo .plano-promessa { color: rgba(255,255,255,.82); }
.plano-topo .plano-promessa em { color: var(--dourado); font-style: normal; font-weight: 600; }
.plano-topo .plano-itens li { color: rgba(255,255,255,.9); }
.plano-promessa {
  margin: -6px 0 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--texto-suave); text-wrap: balance;
}

/* ---------- ENTERPRISE: a faixa da rede ---------- */
/* Horizontal de propósito: quinta coluna espremeria a grade de quatro. O
   fundo é o mesmo navy do plano-topo — é o degrau acima dele. */
.plano-enterprise {
  margin-top: 14px;
  background: var(--tinta); color: #fff; border-color: var(--dourado);
  display: grid; gap: 8px 34px; align-items: center;
}
.plano-enterprise h3 { color: #fff; }
.plano-enterprise .preco { color: #fff; margin-bottom: 6px; }
.plano-enterprise .plano-promessa { color: rgba(255,255,255,.82); margin-bottom: 0; }
.ent-itens { display: grid; gap: 0 26px; }
.plano-enterprise .plano-itens li { color: rgba(255,255,255,.9); border-top-color: rgba(255,255,255,.14); }
.plano-enterprise .plano-itens li::before { background: var(--dourado); }
.ent-cta { justify-self: start; }
@media (min-width: 900px) {
  .plano-enterprise { grid-template-columns: 1fr 1.5fr auto; }
  .ent-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* com duas colunas, a primeira linha de cada uma perde o traço */
  .ent-itens li:nth-child(2) { border-top: none; }
  .ent-cta { justify-self: end; }
}

/* ---------- IA DE BALCÃO: adicional, não é plano ---------- */
.ia-balcao {
  margin-top: 14px; background: var(--branco);
  border: 1px solid var(--dourado); border-radius: var(--radius);
  padding: 22px;
}
.iab-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.iab-cab h3 { color: var(--marinho); margin: 0; }
.iab-cab .preco { margin-bottom: 0; }
.iab-selo {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dourado-texto); border: 1px solid var(--dourado);
  padding: 3px 10px; border-radius: 999px;
}
.iab-texto { margin: 10px 0 6px; font-size: 15px; color: var(--texto-suave); max-width: 72ch; }
.iab-regras { max-width: 72ch; }
@media (min-width: 900px) {
  /* texto à esquerda, regras à direita: caixa larga sem corredor vazio */
  .ia-balcao { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2px 38px; }
  .iab-cab { grid-column: 1 / -1; }
  .iab-regras li:first-child { border-top: none; }
}

/* as duas IAs, explicadas na língua do balcão — discreto de propósito */
.duas-ias {
  margin-top: 14px; display: grid; gap: 8px 26px;
  font-size: 14px; color: var(--texto-suave);
}
.duas-ias p { margin: 0; line-height: 1.55; }
.duas-ias strong { color: var(--marinho); }
@media (min-width: 900px) { .duas-ias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- a pipa dos quatro pilares ---------- */
/* MENTALIDADE começa em x negativo do viewBox: com o svg na largura exata do
   desenho (o cartão do Início) o clip padrão do svg cortava o rótulo — na
   Equipe só não cortava porque o letterbox dava folga */
.radar svg { overflow: visible; }
.rad-grade { fill: none; stroke: #DCE2EC; stroke-width: 1; }
.rad-area { fill: rgba(22, 48, 94, .14); stroke: var(--marinho); stroke-width: 2; stroke-linejoin: round; }
.rad-raio { stroke: var(--marinho); stroke-width: 1.5; opacity: .5; }
.rad-ponto { fill: var(--marinho); stroke: #fff; stroke-width: 1.5; }
.rad-rotulo {
  font-family: Archivo, sans-serif; font-size: 8.5px; font-weight: 700;
  letter-spacing: .06em; fill: var(--texto-apoio);
}
.rad-rotulo.apagado { fill: #B8BFCC; }

.pipas { margin-top: 34px; }
.pipas-titulo {
  margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--tinta);
  text-wrap: balance;
}
.pipas-sub { margin: 0 0 18px; font-size: 15.5px; color: var(--texto-suave); max-width: 62ch; }
.pipas-par { display: grid; gap: 18px; }
.pipas-par figure {
  margin: 0; background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--radius); padding: 16px;
}
.pipas-par figcaption {
  margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--texto-suave);
  text-wrap: pretty;
}
.pipas-par figcaption strong { color: var(--tinta); }
.pipas-nota { margin: 14px 0 0; font-size: 12.5px; color: var(--texto-apoio); }
@media (min-width: 700px) { .pipas-par { grid-template-columns: 1fr 1fr; } }

/* ---- Estoque vivo: uma pergunta por vez, com o gráfico redondo ---------- */
.estoque-vivo { margin-top: 28px; }
.abas-estoque { flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }
.ev-palco { position: relative; }
.ev-painel {
  margin: 0; display: grid; gap: 28px; align-items: center;
  grid-template-columns: minmax(230px, 340px) 1fr;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 18px; padding: 28px 30px;
  box-shadow: 0 1px 2px rgba(15, 27, 51, .04);
}
.ev-painel[hidden] { display: none; }
.ev-painel.ativa { animation: evEntra .38s cubic-bezier(.2,.7,.3,1) both; }
@keyframes evEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ev-viz { display: grid; justify-items: center; gap: 10px; }
.ev-viz.anel-bloco { justify-items: stretch; }
.ev-ref {
  margin: 0; font-size: 12.5px; color: var(--texto-apoio);
  display: inline-flex; align-items: center; gap: 6px;
}
.ev-ref::before {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 6px solid var(--dourado);
}
.ev-texto h3 { margin: 0 0 10px; font-size: 21px; color: var(--tinta); }
.ev-texto p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--texto-suave); }
.ev-conta {
  font-size: 13px !important; color: var(--texto-apoio) !important;
  background: var(--cinza); border-radius: 10px; padding: 8px 12px;
  font-variant-numeric: tabular-nums;
}
.ev-aviso {
  font-size: 14px !important; color: var(--texto-suave) !important;
  border-left: 3px solid var(--dourado); padding-left: 12px; margin-bottom: 0 !important;
}
.anel-leg-curta li { font-size: 13.5px; }
.anel-leg-curta .leg-val { font-weight: 700; color: var(--tinta); }
@media (max-width: 860px) {
  .ev-painel { grid-template-columns: 1fr; padding: 22px 18px; gap: 20px; }
  .ev-texto h3 { font-size: 19px; }
}

/* ==========================================================================
   FOTO REAL DA LOJA — a faixa que sangra até a borda
   ==========================================================================
   Discussão com Gabriel em 24/08: o site vivia todo dentro de um container
   centrado, e isso dá cara de folheto. Usar a borda dá cara de plataforma.
   A regra que a referência (G4) usa e que a gente adota: o TEXTO continua no
   grid, alinhado dentro da margem, e só a IMAGEM sangra. Esticar tudo daria
   linha de texto larga demais, que cansa de ler.

   As fotos são da Drogaria Mais Barato, Estrada da Posse, Santíssimo, Zona
   Oeste do Rio — loja real, cliente real, autorizada por ele. A marca fica:
   é case, não ilustração. Foto de banco de imagens de farmácia é o gênero
   mais batido que existe e apaga a diferença; a loja de verdade não.

   Cada faixa recebe a foto por --foto. Enquanto o arquivo não chega, o slot
   desenha o marinho da marca e diz qual foto vai ali — nunca uma foto
   inventada no lugar de uma real.
   ------------------------------------------------------------------------ */
.faixa-foto {
  position: relative;
  min-height: clamp(300px, 46vw, 520px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--tinta, #0F1B33);
  isolation: isolate;
}
.faixa-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--foto, none);
  background-size: cover;
  background-position: var(--foco, center);
  /* a foto da loja é colorida e barulhenta (balão, bandeirinha, cartaz) e a
     nossa identidade é sóbria. Sem tratamento ela briga; com o marinho por
     cima ela vira BASE da identidade e continua reconhecível.
     `--sat` é o botão por foto: fachada de toldo amarelo inteiro pede menos
     saturação do que corredor de gôndola, senão o amarelo grita por cima do
     marinho e a página deixa de ser a nossa. */
  filter: saturate(var(--sat, .82)) contrast(1.05);
}
.faixa-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(15,27,51,.94) 0%, rgba(15,27,51,.72) 42%, rgba(15,27,51,.30) 100%),
    linear-gradient(to right, rgba(22,48,94,.55) 0%, rgba(22,48,94,0) 60%);
}
.faixa-foto > .wrap { position: relative; z-index: 2; padding-block: 36px 34px; }
.faixa-foto-texto { max-width: 44ch; }
.faixa-foto h2, .faixa-foto p { color: #fff; }
.faixa-foto .titulo-display { margin: 0 0 12px; }
.faixa-foto .titulo-display em { color: var(--dourado, #D1A13A); }
.faixa-foto p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.86); }
/* o crédito da loja: é case, e case tem nome e endereço */
.faixa-credito {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
  font-size: .8rem; color: rgba(255,255,255,.8);
}
.faixa-credito strong { color: #fff; font-weight: 600; }
/* enquanto a foto não chega: o slot diz o que vai ali, em vez de inventar */
.faixa-foto[data-sem-foto="1"]::before {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px);
  filter: none;
}
.faixa-slot {
  position: absolute; z-index: 3; right: 16px; top: 16px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px dashed rgba(209,161,58,.55); background: rgba(15,27,51,.72);
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dourado, #D1A13A);
}
@media (max-width: 720px) {
  /* no celular o texto ocupa a faixa inteira e a foto sumia debaixo dele —
     e foto que não se reconhece deixa de ser case e vira textura. A faixa
     cresce o bastante para sobrar uma banda de foto acima do título, e o
     topo do gradiente clareia junto. */
  .faixa-foto { min-height: 430px; }
  /* o `min-height` sozinho não resolve: no celular o texto já é mais alto do
     que ele, então quem tem de abrir espaço é o padding de cima. Só onde há
     foto — na faixa que ainda espera arquivo isso seria 132px de marinho
     vazio. */
  .faixa-foto:not([data-sem-foto="1"]) > .wrap { padding-block: 132px 30px; }
  .faixa-foto::after {
    background: linear-gradient(to top, rgba(15,27,51,.96) 0%, rgba(15,27,51,.80) 52%, rgba(15,27,51,.28) 100%);
  }
  .faixa-slot { right: 10px; top: 10px; font-size: .68rem; }
}

/* ---- HERO com a foto atrás -------------------------------------------- */
.hero-foto { position: relative; overflow: hidden; isolation: isolate; }
.hero-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--foto, none);
  background-size: cover; background-position: var(--foco, center 42%);
  filter: saturate(.78) contrast(1.06);
}
.hero-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(15,27,51,.97) 0%, rgba(15,27,51,.92) 38%, rgba(15,27,51,.62) 68%, rgba(15,27,51,.42) 100%);
}
.hero-foto > .wrap { position: relative; z-index: 2; }
.hero-foto[data-sem-foto="1"]::before {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 16px, transparent 16px 32px);
  filter: none;
}

@media (min-width: 900px) {
  /* o hero preenche a primeira tela: conteúdo centrado, régua no pé */
  .hero {
    min-height: max(620px, calc(100svh - 64px));
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* ---- a moldura de celular do hero -------------------------------------- */
/* O fio é o app na mão do cliente — a moldura diz isso sem uma palavra.
   PROPORÇÃO REAL de smartphone (9:19): a conversa não estica o aparelho;
   ela acontece AO VIVO dentro da tela e o chat rola por dentro.
   Só as cores que já existem: corpo em tinta, tela descendo de marinho
   para tinta (o mesmo fundo do hero, para as bolhas translúcidas do fio
   continuarem legíveis por cima). */
.cel-moldura {
  position: relative;
  max-width: 360px; margin: 0 auto;
  aspect-ratio: 9 / 19;
  display: flex;
  background: var(--tinta, #0F1B33);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px; padding: 9px;
  box-shadow: 0 26px 48px rgba(0,0,0,.38), 0 6px 14px rgba(0,0,0,.24);
}
.cel-notch {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; border-radius: 999px;
  background: var(--tinta, #0F1B33);
  border: 1px solid rgba(255,255,255,.1);
  z-index: 2;
}
.cel-tela {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, var(--marinho, #16305E), var(--tinta, #0F1B33) 88%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 0 8px 8px;
}
.cel-status {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 8px;
}
.cel-hora {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: .78rem; color: #fff;
}
.cel-icones { display: inline-flex; color: rgba(255,255,255,.85); }
.cel-icones svg { width: 34px; height: 12px; fill: currentColor; }
/* dentro da tela o fio perde a própria moldura: cartão com borda dentro de
   celular com borda seria duas molduras contando a mesma coisa */
.cel-tela .fio-hero {
  background: none; border: 0; border-radius: 0; padding: 6px 8px 10px;
  backdrop-filter: none;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.cel-tela .fio-hero-topo { flex-shrink: 0; }
/* o chat rola POR DENTRO da tela, como num celular de verdade — sem barra
   de rolagem aparente (é o JS quem rola, mensagem a mensagem) */
.cel-tela .fio-linhas {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cel-tela .fio-linhas::-webkit-scrollbar { display: none; }
/* a legenda do fio mora EMBAIXO do aparelho, não dentro da tela */
.hero-vis > .fio-hero-pe { max-width: 360px; margin: 14px auto 0; }

/* ---- a conversa ao vivo: mensagem escondida, chegando, digitando ------- */
.fio-oculto { display: none; }
.fio-chega { animation: fio-chega .4s ease both; }
@keyframes fio-chega { from { opacity: 0; transform: translateY(10px); } }
/* quem é GENTE digita antes de falar; o automático entra direto — mensagem
   de sistema não pode passar por alguém digitando */
.fio-digita { min-width: 58px; }
.fio-pontos { display: flex; gap: 5px; padding: 4px 0 2px; }
.fio-pontos i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.75);
  animation: pulso 1s ease-in-out infinite;
}
.fio-pontos i:nth-child(2) { animation-delay: .18s; }
.fio-pontos i:nth-child(3) { animation-delay: .36s; }
/* a virada do loop: o fio some suave antes de recomeçar */
.fio-linhas.fio-refaz { opacity: 0; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .fio-pontos i { animation: none; }
  .fio-chega { animation: none; }
}
@media (max-width: 560px) {
  .cel-moldura { max-width: 322px; box-shadow: 0 14px 26px rgba(0,0,0,.28); }
  .hero-vis > .fio-hero-pe { max-width: 322px; }
}

/* ---- o fio da conversa no hero: cliente, balconista e entregador ------- */
/* É o que explica o produto em dois segundos. Nenhum gráfico faz isso tão
   rápido quanto quatro balões: o cliente pergunta, a loja responde, o pedido
   nasce, o entregador sai. */
.fio-hero {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 16px 16px 14px;
  backdrop-filter: blur(6px);
}
.fio-hero-topo {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.fio-hero-topo svg { width: 18px; height: 18px; fill: none; stroke: var(--dourado, #D1A13A); stroke-width: 1.7; }
.fio-hero-topo span { color: #fff; font-size: .85rem; font-weight: 600; }
.fio-hero-vivo {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: rgba(255,255,255,.66);
}
.fio-hero-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #27C08A; animation: pulso 2s ease-in-out infinite; }
@keyframes pulso { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.fio-linhas { display: flex; flex-direction: column; gap: 8px; }
/* com o fio completo (10 linhas) a bolha aperta um ponto para o hero caber */
.fio-hero .fio-msg { padding: 8px 12px; font-size: .84rem; }
.fio-msg { max-width: 86%; padding: 9px 13px; font-size: .87rem; line-height: 1.5; border-radius: 14px; }
.fio-quem { display: block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; opacity: .72; }
/* o link de avaliação dentro da bolha automática — sublinhado de link, mas
   sem navegar: é prévia, não botão */
.fio-link { display: inline-block; margin-top: 4px; color: var(--dourado); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fio-cliente { align-self: flex-start; background: rgba(255,255,255,.13); color: #fff; border-bottom-left-radius: 4px; }
.fio-loja { align-self: flex-end; background: var(--marinho, #16305E); color: #fff; border-bottom-right-radius: 4px; border: 1px solid rgba(255,255,255,.14); }
/* a mensagem que o SISTEMA escreveu se identifica — ela não pode passar por
   alguém digitando */
.fio-auto { align-self: flex-end; background: rgba(209,161,58,.14); border: 1px dashed rgba(209,161,58,.6); color: #fff; border-bottom-right-radius: 4px; }
.fio-evento {
  align-self: center; font-size: .74rem; color: rgba(255,255,255,.62);
  padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.06);
}
.fio-evento strong { color: var(--dourado, #D1A13A); font-weight: 600; }
.fio-hero-pe { margin: 12px 0 0; font-size: .74rem; color: rgba(255,255,255,.55); line-height: 1.5; }

/* ---- funil: os degraus do dia ------------------------------------------ */
/* O dia fecha em cada degrau, e é isso que o desenho prova: conversa vira
   pedido, pedido vira entrega, entrega vira concluída. Onde o número cai, cai
   por um motivo — e o motivo vai escrito embaixo. */
.funil { display: grid; gap: 10px; width: 100%; min-width: 0; }
.funil-passo { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.funil-rot { font-size: .84rem; color: var(--texto-suave, #5A6B85); }
.funil-trilha { height: 30px; border-radius: 8px; background: rgba(22,48,94,.09); overflow: hidden; }
.funil-fill {
  height: 100%; border-radius: 8px; width: 0;
  background: linear-gradient(90deg, var(--marinho, #16305E), #2C5596);
  transition: width 1.1s cubic-bezier(.2,.7,.3,1);
}
.funil-passo:last-child .funil-fill { background: linear-gradient(90deg, #0E7C5A, #17A06F); }
.funil-val { font-family: Jost, system-ui, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.funil-perda { grid-column: 2 / -1; margin: -4px 0 2px; font-size: .78rem; color: var(--texto-suave, #5A6B85); }
@media (max-width: 620px) {
  .funil-passo { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 9px; }
  .funil-rot { font-size: .78rem; }
}

/* ---- fileira de números que abre a seção ------------------------------- */
.numeros-linha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 22px 0 26px;
}
.numero-bloco { padding: 14px 16px; border-left: 3px solid var(--dourado, #D1A13A); background: rgba(22,48,94,.04); border-radius: 0 10px 10px 0; }
.section-navy .numero-bloco { background: rgba(255,255,255,.05); border-left-color: var(--dourado, #D1A13A); }
.numero-rot { display: block; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave, #5A6B85); margin-bottom: 4px; }
.section-navy .numero-rot { color: rgba(255,255,255,.6); }
.numero-val { display: block; font-family: Jost, system-ui, sans-serif; font-weight: 600; font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.section-navy .numero-val { color: #fff; }
.numero-sub { display: block; margin-top: 3px; font-size: .78rem; color: var(--texto-suave, #5A6B85); }
.section-navy .numero-sub { color: rgba(255,255,255,.62); }

/* ---- série diária contra a régua --------------------------------------- */
/* A régua do faturamento é o RITMO DIÁRIO (meta ÷ dias do mês), não a meta
   cheia: no dia 15 de 31, metade da meta É o ritmo certo. A linha tracejada
   dourada é essa régua, e a série cruza ela literalmente. */
/* SEM padding vertical: a altura em % das colunas resolve contra o content
   box e o bottom da régua contra o padding box — com padding, a coluna
   "acima do ritmo" desenhava ABAIXO da linha */
.serie-dia {
  display: flex; align-items: flex-end; gap: 3px; height: 130px;
  position: relative;
  width: 100%; min-width: 0;
}
.serie-col { flex: 1 1 0; min-width: 5px; border-radius: 3px 3px 0 0; background: var(--marinho, #16305E); opacity: .82; transition: height .8s cubic-bezier(.2,.7,.3,1); height: 0; cursor: pointer; }
.serie-col:hover { opacity: 1; }
.serie-col.acima { background: #0E7C5A; }
.serie-regua { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--dourado, #D1A13A); pointer-events: none; }
/* a etiqueta da régua mora ACIMA do gráfico — em cima das colunas ela
   sobrepunha o dia mais alto */
.serie-cab { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.serie-etq { font-size: .74rem; font-weight: 600; color: var(--dourado-texto, #8A6D1F); }
.serie-pe { width: 100%; display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: .74rem; color: var(--texto-suave, #5A6B85); }

/* ---- a mensagem do Marketing e a varredura ----------------------------- */
.msg-bloco { display: grid; gap: 12px; width: 100%; min-width: 0; }
.msg-balao {
  padding: 13px 15px; border-radius: 14px 14px 14px 4px;
  background: #fff; border: 1px solid var(--linha, #E4E8EF);
  font-size: .92rem; line-height: 1.6;
}
.section-cinza .msg-balao { background: #fff; }
.msg-marca { background: #FBF0C4; border-radius: 4px; padding: 1px 4px; box-shadow: 0 0 0 1px rgba(180,83,9,.25); }
.varr-linha { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 11px; background: #fff; border: 1px solid var(--linha, #E4E8EF); }
.varr-linha + .varr-linha { margin-top: 8px; }
.varr-x { border-left: 3px solid var(--vermelho, #B3261E); }
.varr-i { border-left: 3px solid var(--ambar, #B45309); }
.varr-selo { flex: 0 0 auto; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.varr-x .varr-selo { background: rgba(179,38,30,.1); color: var(--vermelho, #B3261E); }
.varr-i .varr-selo { background: rgba(180,83,9,.12); color: var(--ambar, #B45309); }
.varr-txt { min-width: 0; font-size: .84rem; line-height: 1.55; }
.varr-txt strong { display: block; margin-bottom: 2px; }
.varr-txt span { color: var(--texto-suave, #5A6B85); }

/* ---- o Copiloto: a conversa da aba ------------------------------------- */
.cop-caixa { border: 1px solid var(--linha, #E4E8EF); border-radius: 16px; overflow: hidden; background: #fff; }
.cop-topo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 15px; background: var(--cinza, #EDEFF3); border-bottom: 1px solid var(--linha, #E4E8EF); }
.cop-topo strong { font-size: .92rem; }
.cop-topo small { color: var(--texto-suave, #5A6B85); font-size: .8rem; }
.cop-fio2 { padding: 16px 15px; display: flex; flex-direction: column; gap: 11px; }
.cop-p { align-self: flex-end; max-width: 86%; background: var(--marinho, #16305E); color: #fff; padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: .88rem; line-height: 1.5; }
.cop-r { align-self: flex-start; max-width: 92%; background: var(--cinza, #EDEFF3); border: 1px solid var(--linha, #E4E8EF); padding: 12px 14px; border-radius: 14px 14px 14px 4px; font-size: .88rem; line-height: 1.6; }
.cop-r-quem { display: flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave, #5A6B85); margin-bottom: 6px; }
.cop-r-quem i { color: var(--dourado, #D1A13A); font-style: normal; }
.cop-r p { margin: 0 0 8px; }
.cop-r p:last-child { margin-bottom: 0; }
.cop-fonte2 { margin-top: 9px !important; padding-top: 8px; border-top: 1px dashed var(--linha, #E4E8EF); font-size: .76rem; color: var(--texto-suave, #5A6B85); }
.cop-clipes { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 15px 14px; }
.cop-clipe2 { font-size: .78rem; padding: 5px 11px; border-radius: 9px; border: 1px dashed var(--linha, #E4E8EF); color: var(--texto-suave, #5A6B85); }

/* ---- DRE: a conta que fecha o mês -------------------------------------- */
/* painel que atravessa as duas colunas do dash — vem DEPOIS da regra que
   devolve grid-column:auto ao painel-grande do case, e por isso vence */
.dash .painel-cheio { grid-column: 1 / -1; }

/* a foto do case: moldura fina, tamanho natural — nunca fundo esticado */
.case-topo { display: grid; gap: 26px; align-items: center; margin-bottom: 26px; }
.case-topo .section-lead { margin-bottom: 0; }
.foto-case { margin: 0; }
.foto-case img {
  display: block; width: 100%; max-width: 822px; height: auto;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.foto-case figcaption { margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.62); }
@media (min-width: 900px) {
  .case-topo { grid-template-columns: 1.05fr .95fr; gap: 40px; }
}

.dre { border: 1px solid var(--linha, #E4E8EF); border-radius: 14px; overflow: hidden; background: #fff; }
.dre-l { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: baseline; padding: 12px 16px; }
.dre-l + .dre-l { border-top: 1px solid var(--linha, #E4E8EF); }
.dre-nome { font-size: .9rem; }
.dre-de { display: block; font-size: .75rem; color: var(--texto-suave, #5A6B85); margin-top: 2px; }
.dre-v { font-family: Jost, system-ui, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.02rem; white-space: nowrap; }
.dre-menos .dre-v { color: var(--vermelho, #B3261E); }
.dre-sub { background: rgba(22,48,94,.045); }
.dre-fim { background: var(--tinta, #0F1B33); }
.dre-fim .dre-nome, .dre-fim .dre-v { color: #fff; }
.dre-fim .dre-v { font-size: 1.3rem; color: var(--dourado, #D1A13A); }
.dre-fim .dre-de { color: rgba(255,255,255,.6); }

/* ---- respiro entre seções e sangria ------------------------------------ */
.section-solta { padding-top: 54px; padding-bottom: 54px; }
@media (min-width: 900px) { .section-solta { padding-top: 78px; padding-bottom: 78px; } }

/* ---- duo: gráfico largo + explicação ao lado ---------------------------- */
.duo { display: grid; gap: 26px; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 900px) { .duo { grid-template-columns: 1.12fr .88fr; gap: 34px; } }
.duo > * { min-width: 0; }
.duo .ev-texto h3 { margin: 0 0 10px; }
.duo .ev-texto p { margin: 0 0 12px; }
.duo .ev-texto p:last-child { margin-bottom: 0; }
/* a série de 15 dias fica em largura cheia: cada coluna é um dia, e espremer
   15 dias em meia tela transforma coluna em fio. */
.serie-cheia { margin-bottom: 30px; }
.serie-cheia .serie-pe { margin-bottom: 0; }

/* ---- ilha clara dentro de seção escura ---------------------------------
   Defeito real achado na revisão: a .cop-caixa é branca, mas mora dentro de
   .section-navy — e herdou a cor CLARA do texto da seção. Resultado: texto
   quase branco sobre fundo quase branco.

   A regra que fica: ilha clara dentro de seção escura reafirma as próprias
   cores. Herdar é o comportamento certo do CSS e o errado para o olho. */
.section-navy .cop-caixa,
.section-navy .cop-caixa strong,
.section-navy .cop-caixa p,
.section-navy .cop-caixa small { color: var(--tinta); }
.section-navy .cop-r { color: var(--tinta); }
.section-navy .cop-r-quem,
.section-navy .cop-fonte2,
.section-navy .cop-topo small,
.section-navy .cop-clipe2 { color: var(--texto-apoio, #5A6B85); }
.section-navy .cop-caixa .cop-p { color: #fff; }

/* e a coluna de texto em fundo escuro precisa de contraste de leitura, não
   de um cinza que "combina": 70% de branco sobre marinho cansa em parágrafo
   longo. */
.section-navy .ev-texto h3 { color: #fff; }
.section-navy .ev-texto p { color: rgba(255,255,255,.88); }
.section-navy .ev-texto strong { color: #fff; }
.section-navy .ev-texto .ev-aviso {
  color: rgba(255,255,255,.88) !important;
  border-left-color: var(--dourado);
  background: rgba(255,255,255,.05); padding: 10px 12px; border-radius: 0 8px 8px 0;
}
.section-navy .ev-texto .ev-aviso strong { color: #fff; }

/* âncora não pode nascer atrás da topbar fixa */
section[id] { scroll-margin-top: 78px; }

/* ---------- as abas do app da equipe: cartão clicável por PLANO ----------
   Ordem dos planos (Essencial → Pro → Growth → Fin Intelligence), funções na
   ordem da hierarquia fechando no gerente. O cartão ativo fica marinho e
   troca o celular abaixo para a tela de uma função da aba. */
.fabas { display: grid; gap: 10px; margin: 0 0 22px; }
.faba {
  display: grid; gap: 5px; text-align: left; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 14px;
  background: var(--branco); padding: 12px 15px;
  font: inherit; font-size: 13px;
  transition: border-color .18s ease, background .18s ease;
}
.faba:hover { border-color: var(--marinho); }
.faba-topo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.faba-topo b { font-size: 14px; color: var(--marinho); }
.faba-plano {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dourado-texto);
}
.faba-funcoes { font-size: 13px; color: var(--texto-suave); line-height: 1.45; }
.faba.ativo { background: var(--marinho); border-color: var(--marinho); }
.faba.ativo .faba-topo b { color: #fff; }
.faba.ativo .faba-plano { color: var(--dourado); }
.faba.ativo .faba-funcoes { color: rgba(255,255,255,.78); }
@media (min-width: 900px) { .fabas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* sem valor o número não desmonta o cartão: traço cinza no lugar */
.qk-sem { color: var(--texto-suave); }
/* .tela tem display próprio, que venceria o [hidden] do user-agent */
.tela[hidden] { display: none; }

/* ---------- V3.4: o Copiloto do site é AO VIVO ---------- */
.cop-fio2 { min-height: 252px; }
/* balão que chega entra suave — a mesma entrada do fio do hero */
.cop-fio2 .cop-p, .cop-fio2 .cop-r { animation: fio-chega .35s ease both; }
@media (prefers-reduced-motion: reduce) {
  .cop-fio2 .cop-p, .cop-fio2 .cop-r { animation: none; }
}
.cop-sugs { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 15px 4px; }
.cop-sug2 {
  font: inherit; font-size: .8rem; padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--linha, #E4E8EF); border-radius: 999px;
  background: #fff; color: var(--texto, #24344D);
  transition: border-color .15s, background-color .15s, color .15s;
}
.cop-sug2:hover { border-color: var(--marinho, #16305E); }
.cop-sug2.ativo { background: var(--marinho, #16305E); border-color: var(--marinho, #16305E); color: #fff; }
.cop-clipes-rot { width: 100%; font-size: .78rem; color: var(--texto-suave, #5A6B85); }
/* font-size reafirmado: o shorthand `font: inherit` zera o .78rem da regra base */
button.cop-clipe2 { font: inherit; font-size: .78rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
button.cop-clipe2:hover { border-color: var(--marinho, #16305E); }
button.cop-clipe2.ativo { border-color: var(--marinho, #16305E); background: #EDF1F7; }
/* o documento dentro do balão da pergunta */
.cop-doc {
  display: flex; flex-direction: column; gap: 1px; margin-bottom: 7px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px; padding: 7px 11px;
}
.cop-doc b { font-size: .82rem; overflow-wrap: anywhere; }
.cop-doc small { font-size: .72rem; opacity: .82; font-variant-numeric: tabular-nums; }
/* o Copiloto digitando */
.cop-pontos2 { display: flex; gap: 5px; padding: 3px 0 1px; }
.cop-pontos2 i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--texto-suave, #5A6B85);
  animation: cop-pulso2 1s ease-in-out infinite;
}
.cop-pontos2 i:nth-child(2) { animation-delay: .18s; }
.cop-pontos2 i:nth-child(3) { animation-delay: .36s; }
@keyframes cop-pulso2 {
  0%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .cop-pontos2 i { animation: none; } }

/* ==========================================================================
   V3.9 — o NOTEBOOK: a situação na tela de quem trabalha
   ========================================================================== */
.note-moldura { max-width: 640px; width: 100%; margin: 0 auto; }
.note-tela {
  background: #fff; border: 10px solid var(--tinta);
  border-bottom-width: 22px; border-radius: 16px 16px 4px 4px;
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(15,27,51,.22);
}
.note-base {
  height: 12px; margin: 0 -4.5%; position: relative;
  background: linear-gradient(180deg, #2A3A57, var(--tinta));
  border-radius: 0 0 14px 14px;
}
.note-base::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 96px; height: 5px; border-radius: 0 0 8px 8px; background: rgba(255,255,255,.16);
}
.note-top {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #EDEFF3; border-bottom: 1px solid var(--borda);
}
.note-pontos { display: flex; gap: 5px; }
.note-pontos i { width: 8px; height: 8px; border-radius: 50%; background: #C9D1DE; }
.note-url {
  flex: 1; min-width: 0; text-align: center;
  font-size: 11.5px; color: var(--texto-apoio);
  background: #fff; border-radius: 999px; padding: 3px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-app { display: grid; grid-template-columns: 44px minmax(0, 1fr); min-height: 300px; }
.note-lateral {
  background: var(--tinta); display: flex; justify-content: center; padding-top: 12px;
}
.note-lateral .ff-simbolo { width: 22px; height: 22px; }
.note-conteudo { padding: 14px 16px 16px; min-width: 0; }
.ntela[hidden] { display: none; }
.nt-rot {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-apoio); margin: 0 0 10px;
}
.nt-chip {
  margin: 12px 0 0; display: inline-block;
  font-size: 12.5px; font-weight: 600; color: var(--marinho);
  background: rgba(22,48,94,.07); border-radius: 999px; padding: 4px 12px;
}
/* a fila de conversas do Atendimento */
.nt-fila { display: grid; gap: 6px; }
.nt-conv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 0; padding: 8px 11px; border-radius: 9px;
  background: var(--cinza, #EDEFF3); font-size: 13px;
}
.nt-conv span { font-weight: 600; color: var(--tinta); }
.nt-conv em { font-style: normal; font-size: 11.5px; color: var(--texto-apoio); text-align: right; }
.nt-alerta { box-shadow: inset 3px 0 0 var(--ambar, #B45309); }
.nt-alerta em { color: var(--ambar, #B45309); font-weight: 600; }
.nt-fora { box-shadow: inset 3px 0 0 var(--vermelho, #B3261E); }
.nt-fora em { color: var(--vermelho, #B3261E); font-weight: 600; }
.nt-serie { width: 100%; height: 120px; }
.nt-radar { max-width: 220px; margin: 0 auto; }
.nt-anel { max-width: 210px; margin: 0 auto; }

/* o palco do Copiloto: notebook + a solução ao lado */
.cabas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.caba {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 7px 15px; transition: background .18s ease, color .18s ease;
}
.caba:hover { border-color: #fff; }
.caba.ativo { background: #fff; color: var(--marinho); border-color: #fff; }
.cop-palco { display: grid; gap: 22px; align-items: start; }
@media (min-width: 980px) { .cop-palco { grid-template-columns: 1.25fr 1fr; gap: 34px; } }
/* trilho de grid é minmax(auto,1fr): sem o mínimo zero, o conteúdo do
   notebook empurra a coluna além da janela no celular — o defeito de sempre */
.cop-palco > *, .iab-palco > * { min-width: 0; }
.cop-fio-aba { min-height: 0; }
.cop-lado { display: grid; gap: 14px; min-width: 0; }
.cop-plano-nota { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.cop-plano-nota strong { color: var(--dourado); }
/* dentro da seção navy, o clipe se apresenta em claro */
.section-navy .cop-clipes-rot { color: rgba(255,255,255,.66); }

/* ==========================================================================
   V3.9 — IA DE BALCÃO: o cliente pede, a sugestão aparece, gente envia
   ========================================================================== */
.iab-palco { display: grid; gap: 26px; align-items: center; }
@media (min-width: 980px) { .iab-palco { grid-template-columns: 1.25fr 1fr; gap: 40px; } }
.iab-chat {
  /* a altura da CENA COMPLETA (medida): o chat não cresce durante o loop —
     as mensagens sobem dentro dele, e a página embaixo não pula */
  min-height: 700px; padding: 14px 16px; display: flex; flex-direction: column;
  gap: 9px; justify-content: flex-end;
}
@media (min-width: 700px) { .iab-chat { min-height: 528px; } }
.iab-b {
  margin: 0; max-width: 86%; padding: 8px 12px; border-radius: 13px;
  font-size: 13.5px; line-height: 1.5;
}
.iab-cliente { align-self: flex-start; background: var(--cinza, #EDEFF3); color: var(--tinta); border-bottom-left-radius: 4px; }
.iab-loja { align-self: flex-end; background: var(--marinho); color: #fff; border-bottom-right-radius: 4px; }
.iab-quem { display: block; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; opacity: .72; margin-bottom: 2px; }
/* a sugestão se identifica: borda dourada tracejada, como todo automático */
.iab-sug {
  align-self: flex-end; max-width: 90%;
  background: rgba(209,161,58,.10); border: 1px dashed var(--dourado);
  border-radius: 13px; padding: 9px 12px;
}
.iab-sug p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--tinta); }
.iab-sug-rot {
  display: block; font-family: Jost, Archivo, sans-serif; font-weight: 600;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dourado-texto); margin-bottom: 4px;
}
.iab-sug-btn {
  display: inline-block; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--marinho); border-radius: 8px; padding: 5px 12px;
}
.iab-ev {
  align-self: center; margin: 0; font-size: 11.5px; color: var(--texto-apoio);
  background: var(--cinza, #EDEFF3); border-radius: 999px; padding: 3px 11px;
}
.iab-ev strong { color: var(--dourado-texto); }
.iab-compor {
  display: flex; align-items: center; gap: 10px;
  margin: 0 12px 12px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--borda); background: #fff;
  font-size: 13px; color: var(--texto-apoio);
}
.iab-compor span { flex: 1; }
.iab-compor i { font-style: normal; color: var(--marinho); }
.iab-provas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.iab-provas li {
  position: relative; padding-left: 30px;
  font-size: 15.5px; line-height: 1.5; color: var(--texto-suave);
}
.iab-provas li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: rgba(209,161,58,.16); color: var(--dourado-texto);
}
.iab-provas strong { color: var(--marinho); }
.iab-preco-nota { margin: 16px 0 0; font-size: 14px; color: var(--texto-apoio); }
.iab-preco-nota a { color: var(--marinho); font-weight: 600; }
/* a cena ao vivo: cada peça entra quando o JS manda — display none para o
   chat crescer de baixo para cima (o justify-end ancora no rodapé) */
.iab-oculto { display: none; }
.iab-chega { animation: fio-chega .4s ease both; }
.iab-usada .iab-sug-btn { background: var(--verde, #0E7C5A); }
@media (prefers-reduced-motion: reduce) { .iab-chega { animation: none; } }

/* ==========================================================================
   V3.9 — Marketing com menos texto: travas em uma linha e chips de bloqueio
   ========================================================================== */
.travas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.travas li {
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  padding: 12px 15px; display: grid; gap: 2px;
}
.travas b { font-size: 14.5px; color: var(--marinho); }
.travas span { font-size: 13px; color: var(--texto-suave); }
.varr-chips { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.varr-chips li {
  font-size: 12.5px; font-weight: 600; color: var(--vermelho, #B3261E);
  background: rgba(179,38,30,.08); border: 1px solid rgba(179,38,30,.25);
  border-radius: 999px; padding: 4px 11px;
}
/* a varredura acende em sequência quando o bloco entra na janela */
.rv.in .msg-marca { animation: marca-acende .45s ease both; }
.rv.in .msg-marca:nth-of-type(2) { animation-delay: .4s; }
.rv.in .msg-marca:nth-of-type(3) { animation-delay: .8s; }
.rv.in .varr-linha { animation: fio-chega .45s ease both; animation-delay: 1.1s; }
.rv.in .varr-linha + .varr-linha { animation-delay: 1.5s; }
@keyframes marca-acende {
  from { background: transparent; box-shadow: 0 0 0 1px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .rv.in .msg-marca, .rv.in .varr-linha { animation: none; }
}