/* Página de venda para escritórios de contabilidade (decisão 0033): o azul-marinho do livro-caixa, o papel e o laranja do carimbo. Sem fonte externa: a CSP não deixa. */
:root {
  --quadro: #15283d; --quadro-2: #1e3652; --quadro-3: #2c4a6b;
  --giz: #f4f1ea; --giz-suave: #c3cdd8;
  --papel: #f4f2ec; --papel-2: #e8e4da;
  --tinta: #12202e; --tinta-suave: #4b5a6a;
  --lapis: #e8862e; --lapis-forte: #d0731f;
  --andamento: #7cc4dc; --pessoa: #f2b07a; --erro: #a8321b; --ok: #14663f;
  --margem: clamp(16px, 2.2vw, 32px);
  --titulo: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", "DejaVu Serif", serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.55 var(--texto); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 5.2vw, 5rem); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lapis-forte); outline-offset: 2px; }
section { scroll-margin-top: 4rem; }

/* ---- barra de cima ---------------------------------------------------------------------------- */
.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.5rem; padding: .6rem var(--margem); background: var(--quadro); color: var(--giz); }
.marca { font-family: var(--titulo); font-weight: 700; font-size: 1.15rem; text-decoration: none; white-space: nowrap; }
.topo nav { display: flex; gap: 1.25rem; margin-left: auto; font-size: .95rem; }
.topo nav a { text-decoration: none; padding: .3rem 0; transition: color .15s ease; }
.acao { display: inline-block; padding: .55rem 1rem; background: var(--lapis); color: var(--tinta); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .15s var(--curva), background-color .15s ease; }
.acao:active { transform: scale(.97); }
.acao.grande { padding: .9rem 1.5rem; font-size: 1.1rem; }
.acao.escura { background: var(--tinta); color: var(--giz); padding: .9rem 1.5rem; font-size: 1.05rem; white-space: normal; }
@media (hover: hover) and (pointer: fine) {
  .acao:hover { background: var(--lapis-forte); }
  .acao.escura:hover { background: var(--quadro-3); }
  .topo nav a:hover { color: var(--lapis); }
}
@media (max-width: 900px) { .topo nav { display: none; } .topo .acao { margin-left: auto; padding: .45rem .75rem; font-size: .9rem; } .marca { font-size: 1.02rem; } }
@media (max-width: 400px) { .topo { gap: .5rem; } .topo .acao { padding: .4rem .55rem; font-size: .8rem; } .marca { font-size: .92rem; white-space: normal; line-height: 1.05; } }

/* ---- abertura: o argumento, o quadro de fechamento e o celular --------------------------------------------------- */
.abertura { background: var(--quadro); color: var(--giz); padding: clamp(1.25rem, 3vw, 2.5rem) var(--margem) clamp(2.5rem, 5vw, 5rem); }
.abertura h1 { font-size: clamp(2.2rem, 5.4vw, 5.8rem); max-width: 16.5em; }
.palco { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.2fr) minmax(320px, 400px); gap: clamp(1.5rem, 3vw, 3.5rem); margin-top: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start; }
.lide { font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.42; margin-bottom: 1.4rem; }
.ao-lado { display: block; margin-top: .9rem; font-weight: 600; text-underline-offset: 3px; }
.ao-lado.escuro { color: var(--tinta); margin-top: clamp(2rem, 4vw, 3.5rem); font-size: 1.1rem; }
.aviso-demo { margin-top: 1.5rem; padding: .85rem 1rem; background: var(--quadro-2); font-size: .95rem; line-height: 1.45; }

.quadro-bloco h2 { font-size: clamp(1.7rem, 2.7vw, 2.8rem); }
.quadro-bloco h2 span { display: inline-block; }
.quadro-mes { margin-top: .4rem; color: var(--giz-suave); font-size: .97rem; }
.quadro { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.35rem, .8vw, .7rem); margin-top: .75rem; }
.empresa { aspect-ratio: 5 / 4; min-height: 42px; padding: 0; border: 0; font: 700 .86rem/1 var(--texto); cursor: pointer; transition: transform .18s var(--curva), background-color .25s ease; }
.empresa:active { transform: scale(.94); }
.e-completa { background: var(--giz); color: var(--tinta); }
.e-andamento { background: var(--andamento); color: var(--tinta); }
.e-pessoa { background: var(--pessoa); color: var(--tinta); }
.e-silencio { background: var(--quadro-3); color: var(--giz); }
.e-pedida { background: #b7c6ea; color: var(--tinta); }
.e-reuniao { background: #d3b3ea; color: var(--tinta); }
.e-abertura { background: #9fd9a8; color: var(--tinta); }
.e-livre { background: var(--quadro-2); color: var(--giz-suave); }
.empresa.destaque { box-shadow: 0 0 0 3px var(--quadro), 0 0 0 6px var(--lapis); animation: empresa-muda .45s var(--curva); }
@keyframes empresa-muda { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) { .empresa:hover { transform: translateY(-2px); } }
/* a proporção com altura mínima alargaria o quadro além da coluna */
@media (max-width: 1000px) { .empresa { aspect-ratio: auto; height: 42px; min-height: 0; } }
.quadro-detalhe { margin-top: .75rem; min-height: 1.5em; font-weight: 600; }
.legenda { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem .9rem; font-size: .93rem; }
.legenda li { display: flex; align-items: center; gap: .5rem; }
.amostra { flex: none; width: .95rem; height: .8rem; }

.abas { display: flex; gap: 2px; background: var(--quadro-2); padding: 2px; }
.abas button { flex: 1; padding: .5rem .3rem; border: 0; background: transparent; color: var(--giz); font: 600 .93rem/1.15 var(--texto); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.abas button[aria-pressed="true"] { background: var(--lapis); color: var(--tinta); }
.conversa-resumo { margin: .7rem 0; font-size: .95rem; line-height: 1.4; color: var(--giz-suave); min-height: 2.8em; }
.aparelho { display: flex; flex-direction: column; height: clamp(440px, 52vh, 560px); overflow: hidden; border: 6px solid #0a1512; border-radius: 26px; background: #e7dfd5; color: #111b21; }
.aparelho-topo { flex: none; display: grid; padding: .5rem .85rem; background: #075e54; color: #fff; line-height: 1.25; }
.aparelho-topo strong { font-size: .98rem; }
.aparelho-topo span { font-size: .76rem; opacity: .85; }
.tela { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding: .7rem; overscroll-behavior: contain; }
.tela:focus-visible { outline-offset: -3px; }
.bolha { max-width: 88%; padding: .4rem .6rem; border-radius: 9px; font-size: .92rem; line-height: 1.34; display: grid; gap: .12rem; overflow-wrap: anywhere; animation: bolha-entra .22s var(--curva); }
.bolha.deles { align-self: flex-start; background: #fff; }
.bolha.minha { align-self: flex-end; background: #d9fdd3; }
.bolha small { font-size: .72rem; font-weight: 700; color: #0b6a5e; }
.bolha small.humano { color: #9a4a12; }
.bolha img { width: 100%; display: block; border-radius: 6px; }
.arquivo { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: 7px; background: #f0f2f5; font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; }
.arquivo-icone { flex: none; padding: .25rem .4rem; border-radius: 4px; background: #c62828; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.bolha-texto { white-space: pre-wrap; }
.bolha-hora { justify-self: end; font-size: .68rem; color: #667781; }
@keyframes bolha-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.marco { align-self: center; margin: .25rem 0; padding: .15rem .6rem; border-radius: 6px; background: #fff3c4; font-size: .76rem; color: #54656f; }
.digitando { align-self: flex-start; font-size: .82rem; font-style: italic; color: #54656f; }
.opcoes { flex: none; display: grid; gap: .3rem; padding: .5rem; background: #f7f7f3; min-height: 3.2rem; }
.opcao, .recomecar { width: 100%; min-height: 40px; padding: .4rem .6rem; border: 0; border-radius: 8px; background: #fff; color: #0b6a5e; font: 600 .92rem/1.2 var(--texto); cursor: pointer; transition: transform .12s var(--curva), background-color .15s ease; }
.opcao:active, .recomecar:active { transform: scale(.98); }
.recomecar.forte { background: #0b6a5e; color: #fff; }
@media (hover: hover) and (pointer: fine) { .opcao:hover, .recomecar:hover { background: #e6f3f1; } .recomecar.forte:hover { background: #075e54; } }
.resumo-curto { display: none; margin-top: .75rem; padding: .5rem .75rem; background: var(--giz); color: var(--tinta); font-weight: 700; }
.no-painel { margin-top: .75rem; font-size: .95rem; line-height: 1.42; }
.custo-conversa { margin-top: .5rem; font-size: .88rem; line-height: 1.4; color: var(--giz-suave); }
.recomecar-tudo { margin-top: .6rem; padding: .3rem 0; border: 0; background: none; color: var(--giz); font: 600 .9rem var(--texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 1180px) {
  .palco { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .argumento { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; align-items: start; }
  .argumento .lide { grid-row: span 3; }
  .argumento .aviso-demo { margin-top: 1rem; }
  .argumento .acao { justify-self: start; }
}
@media (max-width: 760px) {
  .abertura h1 { font-size: 7.9vw; }
  .palco { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .argumento { display: block; }
  .conversa-bloco { order: 1; }
  .quadro-bloco { order: 2; }
  .aparelho { height: 470px; }
  .conversa-resumo { min-height: 0; }
  .resumo-curto { display: block; }
  .abas button { font-size: .88rem; }
  .empresa { font-size: .78rem; }
}

/* ---- onde o fechamento emperra -------------------------------------------------------------------------------- */
.emperra { padding: clamp(4rem, 10vw, 9rem) var(--margem); }
.emperra-lista { margin: clamp(2rem, 4vw, 3.5rem) 0 0; display: grid; gap: 4px; }
.emperra-lista > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(.75rem, 4vw, 4rem); padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2.5vw, 2.25rem); background: var(--papel-2); }
.emperra-lista dt { font-family: var(--titulo); font-weight: 700; font-size: clamp(1.5rem, 2.7vw, 2.6rem); line-height: 1.1; letter-spacing: -.015em; }
.emperra-lista dd { margin: 0; font-size: clamp(1.03rem, 1.3vw, 1.2rem); align-self: center; max-width: 62ch; }
@media (max-width: 760px) { .emperra-lista > div { grid-template-columns: minmax(0, 1fr); } }

/* ---- empresa nova: o campo de laranja --------------------------------------------------------------- */
.nova { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); padding: clamp(4rem, 9vw, 8rem) var(--margem); background: var(--lapis); color: var(--tinta); align-items: start; }
.nova-texto p { margin: 1.5rem 0 1.75rem; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.45; max-width: 36em; }
.caminho { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.caminho li { padding: 1rem 1.15rem; background: var(--giz); line-height: 1.42; }
.caminho li:nth-child(2) { margin-left: 4%; }
.caminho li:nth-child(3) { margin-left: 8%; }
.caminho li:nth-child(4) { margin-left: 12%; }
.caminho li:nth-child(5) { margin-left: 16%; background: var(--tinta); color: var(--giz); }
.caminho strong { display: block; font-family: var(--titulo); font-size: 1.3rem; line-height: 1.15; margin-bottom: .15rem; }
@media (max-width: 860px) {
  .nova { grid-template-columns: minmax(0, 1fr); }
  .caminho li:nth-child(n) { margin-left: 0; }
}

/* ---- a conta ----------------------------------------------------------------------------------------- */
.conta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7rem); padding: clamp(4rem, 10vw, 9rem) var(--margem); }
.conta-entrada p { margin: 1.25rem 0 1.75rem; font-size: 1.15rem; max-width: 34em; }
.conta label { display: grid; gap: .3rem; margin-top: 1.05rem; font-weight: 600; max-width: 24rem; }
.conta input, .conta select { width: 100%; padding: .75rem .85rem; border: 2px solid var(--tinta); border-radius: 0; background: #fff; color: var(--tinta); font: 600 1.15rem var(--texto); font-variant-numeric: tabular-nums; }
.conta-saida { padding: clamp(1.5rem, 4vw, 3.25rem); background: var(--quadro); color: var(--giz); }
.valor-rotulo { font-size: 1.02rem; }
.valor { font-family: var(--titulo); font-weight: 700; font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 1.1rem; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.valor.destaque { color: var(--lapis); }
.vezes { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; line-height: 1.25; margin-bottom: 1.25rem; }
.nota { font-size: .92rem; line-height: 1.45; color: var(--giz-suave); margin-top: .55rem; }
@media (max-width: 860px) { .conta { grid-template-columns: minmax(0, 1fr); } }

/* ---- setores ------------------------------------------------------------------------------------------ */
.setores { padding: clamp(4rem, 9vw, 8rem) var(--margem); background: var(--papel-2); }
.setores-grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 7vw, 8rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.setor:nth-child(3) { grid-column: 1; }
.setor h3 { font-size: clamp(1.8rem, 3.2vw, 3.2rem); margin-bottom: .55rem; }
.setor p { font-size: clamp(1.05rem, 1.35vw, 1.22rem); max-width: 40em; }
@media (max-width: 760px) { .setores-grade { grid-template-columns: minmax(0, 1fr); } .setor:nth-child(3) { grid-column: auto; } }

/* ---- cuidado com os dados --------------------------------------------------------------------------- */
.cuidado { padding: clamp(4rem, 10vw, 9rem) var(--margem); background: var(--quadro); color: var(--giz); }
.cuidado-lide { margin-top: 1.25rem; font-size: clamp(1.2rem, 2.1vw, 1.9rem); line-height: 1.32; max-width: 34em; }
.cuidado-lista { list-style: none; margin: clamp(2rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem clamp(2rem, 6vw, 6rem); }
.cuidado-lista strong { display: block; font-family: var(--titulo); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.18; margin-bottom: .25rem; color: var(--lapis); }
@media (max-width: 760px) { .cuidado-lista { grid-template-columns: minmax(0, 1fr); } }

/* ---- o que está pronto ------------------------------------------------------------------------------- */
.pronto { padding: clamp(4rem, 10vw, 9rem) var(--margem) clamp(2.5rem, 5vw, 5rem); }
.pronto-lide { margin-top: 1.1rem; font-size: 1.2rem; max-width: 42em; }
.tabela-rolagem { margin-top: 2rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1.03rem; }
th { text-align: left; padding: .5rem .9rem; background: var(--tinta); color: var(--giz); }
td { padding: .8rem .9rem; border-bottom: 1px solid #c4cdc6; vertical-align: top; line-height: 1.4; }
td:last-child { width: 36%; font-weight: 700; }
.s-ok { color: var(--ok); }
.s-falta { color: var(--erro); }
@media (max-width: 520px) { table { font-size: .95rem; } td, th { padding: .6rem .5rem; } }

/* ---- perguntas -------------------------------------------------------------------------------------- */
.perguntas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 5vw, 6rem); padding: clamp(3rem, 7vw, 6rem) var(--margem) clamp(4rem, 10vw, 9rem); }
.perguntas h2 { font-size: clamp(2rem, 4vw, 4rem); }
.perguntas-lista { display: grid; gap: 4px; }
details { background: var(--papel-2); }
summary { padding: 1rem 1.15rem; font-weight: 700; font-size: 1.08rem; line-height: 1.3; cursor: pointer; }
details p { padding: 0 1.15rem 1.1rem; max-width: 62ch; }
@media (max-width: 760px) { .perguntas { grid-template-columns: minmax(0, 1fr); } }

/* ---- o fim ------------------------------------------------------------------------------------------- */
.fim { padding: clamp(4rem, 9vw, 8rem) var(--margem) 2rem; background: var(--tinta); color: var(--giz); }
.fim-frase { font-family: var(--titulo); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.2; margin-bottom: 1.5rem; max-width: 26em; }
.fim-nome { margin-top: clamp(3rem, 7vw, 6rem); font-family: var(--titulo); font-weight: 700; font-size: clamp(1.5rem, 9.5vw, 13rem); line-height: 1; letter-spacing: -.03em; white-space: nowrap; color: var(--lapis); }
.fim-nota { margin-top: 1.5rem; font-size: .9rem; color: var(--giz-suave); max-width: 62em; }

/* ---- entradas: só com JavaScript e sem pedido de menos movimento ------------------------------------ */
.com-entrada [data-entra] { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .6s var(--curva); }
.com-entrada [data-entra].entrou { opacity: 1; transform: none; }
.emperra-lista > [data-entra]:nth-child(2), .setor:nth-child(2), .cuidado-lista li:nth-child(even) { transition-delay: .07s; }
.emperra-lista > [data-entra]:nth-child(3), .setor:nth-child(3) { transition-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}