/* =========================================================
   Asterum · Landing page v5
   Mesma base da v4 (css/style.css), com uma camada mais limpa por cima:
   fundo branco único, títulos de seção em serifa com a virada em cinza,
   painéis escuros recuados, mockups em molduras tracejadas e menos enfeite.
   ========================================================= */

:root {
  --f-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --soft-ink: #8d8d86;        /* segunda parte dos títulos no fundo claro */
  --card-line: #ebebe7;       /* borda dos cards */
  --frame: #f8f8f6;           /* fundo das molduras dos mockups */
  --dash: #cdd8d2;            /* tracejado das molduras, sálvia bem clara */
  --sec-y: clamp(88px, 9vw, 132px);
  --r-xl: 28px;               /* cards de seção e painéis */
}

/* ---------- base: um fundo só, mais respiro ---------- */
body { background: #fff; }
.hero, .sim, .how, .proof, .plans, .faq { background: #fff; }
.section { padding: var(--sec-y) 0; }
/* entre duas seções brancas seguidas o fundo não muda, então um respiro menor já separa */
.sim, .how, .proof, .plans, .faq { padding-block: calc(var(--sec-y) * .6); }

/* títulos de seção: serifa leve, a segunda parte em cinza (no escuro, sálvia) */
h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 4.1vw, 58px); line-height: 1.05; letter-spacing: -.022em; }
h2 .soft { color: var(--soft-ink); }
.dark h2 .accent { color: var(--accent); }
.head { max-width: 760px; margin-bottom: 64px; }
.head--center { margin-inline: auto; }
.head__lead { margin-top: 20px; max-width: 580px; font-size: clamp(var(--fs-16), 1.3vw, var(--fs-18)); line-height: 1.6; color: var(--muted); }

/* ---------- barra: sempre clara ---------- */
.nav { background: rgba(255, 255, 255, .94); }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--card-line); }
/* sem o WhatsApp flutuante, o da barra aparece também no celular */
@media (max-width: 600px) {
  .nav__wa { display: grid; }
}

/* ---------- hero ---------- */
.hero { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 64px; }   /* o respiro que a faixa de ferramentas dava antes de ir para baixo do problema */
.hero__sub { color: var(--muted); }
.hero__ctas { padding-bottom: 20px; }   /* espaço que o Elisson abriu no editor (v4) */
/* furos do romaneio na cor do fundo */
.src--paper::before { background: radial-gradient(circle at 5px 3px, #fff 2.3px, transparent 2.8px) 0 0 / 11px 6px; }
/* faixa de ferramentas: depois da seção do problema, solta entre os blocos (pedido do editor) */
.tools { margin-top: 40px; border-top: 0; }
/* a sombra da vitrine passa por baixo das abas, sem escurecer o menu */
.show__tabs { position: relative; z-index: 1; }
/* bilhete um pouco mais largo à direita: "procedimento" cabia só até a borda (pedido do editor) */
.chaos .src--note { width: 130px; }

/* ---------- painéis escuros recuados (problema e contato) ---------- */
.inset { margin-inline: 16px; border-radius: 32px; overflow: hidden; }
.problem2.inset { margin-top: 16px; }
.cta.inset { margin-bottom: 16px; padding-block: calc(var(--sec-y) * .75); }   /* sem o bloco do WhatsApp: painel mais baixo */
.problem2 h2, .cta h2 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.022em; line-height: 1.04; }
.problem2 h2 { font-size: clamp(40px, 4.6vw, 64px); }
.cta h2 { font-size: clamp(36px, 4.2vw, 58px); }
.problem2__lead, .cta__lead { color: #a8a8a3; }
.losses, .losses li { border-color: #1f1f1f; }
.losses__ico { background: transparent; border-color: #2a2a2a; }

/* o widget vermelho da tela de bloqueio, como o Elisson ajustou no editor (v4) */
.ios__widget { background: var(--red); padding-top: 3px; padding-bottom: 3px; border-radius: var(--r-lg); }

/* ---------- simulador: sem caixas dentro de caixas ---------- */
/* contorno visível e sombra leve: a parte branca não se mistura com o fundo da página */
.sim__box { border-radius: var(--r-xl); border-color: #dcdcd6; box-shadow: 0 2px 6px -2px rgba(11,11,11,.08), 0 22px 50px -16px rgba(11,11,11,.26); }
.sim__inputs { gap: 26px; padding: 40px 36px; }
.sim__out { justify-content: space-between; gap: 26px; padding: 40px 48px 34px; }   /* sem as perdas: o botão desce para o pé do painel */
.field__scale { font-family: var(--f); }
.sim__out::before { display: none; }
.sim__duo { gap: 0; padding-top: 4px; }
.sim__card { padding: 0; border: 0; border-radius: 0; background: none; }
.sim__card:first-child { padding-right: 28px; }
.sim__card + .sim__card { padding-left: 28px; border-left: 1px solid #262626; }
.sim__card small { font: 500 var(--fs-13)/1.2 var(--f); letter-spacing: 0; text-transform: none; color: #9a9a9a; }

/* ---------- Como funciona: o mesmo pedido nas três etapas ----------
   Cada etapa é um quadro com o fluxo da operação no alto (pedido, aprovação, separação, entrega)
   e, embaixo, o que a Asterum faz naquela etapa. O fluxo muda de um quadro para o outro: trava em
   você, passa pela aprovação automática e segue rodando enquanto a revisão do mês avança. */
.trilha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 24px; }
.etapa { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.etapa__quadro { position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 380px; padding: 28px 20px 20px; border: 1px dashed var(--dash); border-radius: var(--r-xl); background: var(--frame); }
/* seta entre um quadro e o próximo, na altura do fluxo */
.etapa + .etapa .etapa__quadro::before { content: ""; position: absolute; z-index: 2; left: -25px; top: 38px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--card-line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 6px 14px -8px rgba(11,11,11,.35); }
.etapa__txt { padding: 24px 6px 0; }
.etapa__txt h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-20); font-weight: 500; letter-spacing: -.02em; }
.etapa__n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 500 var(--fs-12)/1 var(--f-mono); letter-spacing: 0; }
.etapa__txt p { margin-top: 10px; max-width: 36ch; font-size: var(--fs-16); line-height: 1.55; color: var(--muted); }

/* o fluxo: quatro etapas em colunas iguais, ligadas por uma linha; os pedidos são bolinhas que
   entram em cada etapa (passam por baixo do ícone) */
.fluxo { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.fluxo__linha { position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 2px; border-radius: 2px; background: #dde1dd; }
.fluxo__pontos { position: absolute; inset: 0; pointer-events: none; }
.fluxo__pontos i { position: absolute; left: 0; top: 23px; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--frame); will-change: transform; }
.fluxo__pontos i.is-ok { background: #5a7466; }
.fluxo__pontos i.is-exc { background: var(--amber); }
.no { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; text-align: center; }
.no__ico { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid var(--card-line); box-shadow: 0 1px 2px rgba(11,11,11,.04), 0 10px 20px -14px rgba(11,11,11,.35); color: var(--ink-2); }
.no__ico .ico, .no__ico .bi { width: 20px; height: 20px; }
.no small { min-height: 2.6em; font-size: 11.5px; line-height: 1.3; font-weight: 500; color: var(--ink-2); }   /* duas linhas sempre: os três fluxos ficam na mesma altura */
/* etapas paradas depois do gargalo: o ícone apaga, o nome continua legível */
.no--parado .no__ico { opacity: .45; }
.no--parado small { color: var(--muted); }
/* o gargalo: você, com a fila de pedidos parados */
.no--trava .no__ico { color: var(--red); border-color: #f2caca; background: #fff7f7; box-shadow: 0 0 0 5px rgba(220,38,38,.07), 0 10px 20px -14px rgba(220,38,38,.45); }
.no--trava small { color: #b91c1c; }
.no__fila { position: absolute; top: -8px; right: -10px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--red); color: #fff; font: 600 11px/1 var(--f); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--frame); opacity: 0; scale: .5; transition: opacity .25s, scale .35s var(--ease); }
.no__fila.on { opacity: 1; scale: 1; }
.no__fila.pop { animation: fila-pop .45s var(--ease); }
@keyframes fila-pop { 40% { scale: 1.3; } }
/* a aprovação automática: o mesmo bloco escuro da IA no resto da página */
.no--auto .no__ico { background: var(--ink); border-color: var(--ink); color: var(--accent); box-shadow: 0 12px 22px -12px rgba(11,11,11,.55); transition: box-shadow .3s; }
.no--auto .no__ico.confere { box-shadow: 0 0 0 6px rgba(126,153,139,.3), 0 12px 22px -12px rgba(11,11,11,.55); }

/* a lente: o que a Asterum faz em cada etapa, num cartão branco */
.lente { flex: 1; display: flex; flex-direction: column; padding: 15px 16px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--card-line); box-shadow: 0 1px 2px rgba(11,11,11,.04), 0 16px 30px -22px rgba(11,11,11,.32); }
.lente__top { display: flex; align-items: center; gap: 7px; font-size: var(--fs-13); font-weight: 500; color: #4f6b5d; }
.lente__top .ico { width: 15px; height: 15px; }
.lente__nota { margin-top: auto; padding-top: 12px; font-size: var(--fs-12); line-height: 1.4; color: var(--muted); }

/* 1 · prioridades com a barra de impacto, que enche quando o quadro entra na tela */
.prior { display: grid; gap: 13px; margin-top: 16px; }
.prior li { display: grid; grid-template-columns: 8px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: var(--fs-13); color: var(--ink-2); }
.prior i { width: 8px; height: 8px; border-radius: 50%; background: #b9bdb9; }
.prior span { line-height: 1.35; }
.prior b { position: relative; height: 6px; border-radius: var(--r-pill); background: #eef0ee; color: #b9bdb9; overflow: hidden; }
.prior b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w, .5) * 100%); border-radius: inherit; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease) calc(.5s + var(--d, 0s)); }
.etapa.in .prior b::after, :root:not(.js) .prior b::after, .reduce .prior b::after { transform: none; }
.prior--red i { background: var(--red); }
.prior--red b { color: var(--red); }
.prior--red span { color: var(--ink); font-weight: 500; }
.prior--amber i { background: var(--amber); }
.prior--amber b { color: var(--amber); }

/* 2 · as regras da aprovação automática, conferidas pedido a pedido */
.regras { display: grid; gap: 9px; margin-top: 14px; }
.regras li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-13); color: var(--ink-2); transition: color .25s; }
.regras i { position: relative; flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #d6dad6; background: #fff; transition: background-color .25s, border-color .25s; }
.regras i::after { content: ""; position: absolute; left: 4.6px; top: 2.2px; width: 4px; height: 7.5px; border: solid #fff; border-width: 0 1.8px 1.8px 0; rotate: 45deg; opacity: 0; transition: opacity .2s; }
.regras .ok i { background: #5a7466; border-color: #5a7466; }
.regras .ok i::after { opacity: 1; }
.regras .nao { color: #b45309; }
.regras .nao i { background: var(--amber); border-color: var(--amber); }
.regras .nao i::after { left: 50%; top: 50%; width: 7px; height: 1.8px; border: 0; background: #fff; rotate: 0deg; translate: -50% -50%; opacity: 1; }
.veredito { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding: 7px 7px 7px 11px; border-radius: 11px; background: var(--frame); font-size: var(--fs-12); }
.veredito b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.veredito em { padding: 4px 9px; border-radius: var(--r-pill); background: #ecedea; color: var(--muted); font-style: normal; font-weight: 500; white-space: nowrap; transition: background-color .25s, color .25s; }
.veredito.is-ok em { background: var(--accent-bg); color: var(--accent-ink); }
.veredito.is-exc em { background: #fff1de; color: #b45309; }

/* 3 · revisão do mês: o que foi conferido, o que entrou no ar e a próxima prioridade */
.meses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.meses span { padding: 5px 0; border-radius: 8px; background: var(--frame); color: var(--muted); font-size: var(--fs-12); text-align: center; transition: background-color .35s, color .35s; }
.meses .ok { background: var(--accent-bg); color: var(--accent-ink); }
.meses .agora { background: var(--ink); color: #fff; }
.revisao { display: grid; gap: 9px; margin: 14px 0; }
.revisao li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-13); line-height: 1.4; color: var(--ink-2); }
.revisao .ico { width: 15px; height: 15px; margin-top: 2px; color: #5a7466; stroke-width: 2.2; }
.proximo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 8px 11px; border-radius: 11px; background: var(--frame); font-size: var(--fs-12); }
.proximo span { color: var(--muted); white-space: nowrap; }
.proximo b { font-weight: 500; color: var(--ink-2); text-align: right; }

/* ---------- Projetos: o que está em construção e como medimos ---------- */
/* os três projetos num painel só, separados por linhas finas, como um quadro de acompanhamento */
.projs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 0 28px; border: 1px dashed var(--dash); border-radius: var(--r-xl); background: var(--frame); }
.proj { min-width: 0; }
.proj + .proj { border-left: 1px solid var(--card-line); }
/* cada projeto: as frentes em construção ligadas ao centro, com o movimento indo para dentro */
.proj__mapa { position: relative; height: 236px; overflow: hidden; }
.proj__fios { position: absolute; inset: 0; width: 100%; height: 100%; }
.proj__fios path { fill: none; stroke: #d2d8d3; stroke-width: 1.25; }
.proj__fios circle { fill: #5a7466; }
.proj__item { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--card-line); box-shadow: 0 1px 2px rgba(11,11,11,.04), 0 10px 22px -16px rgba(11,11,11,.35); font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.proj__item .ico { width: 15px; height: 15px; color: #5a7466; }
.proj__item--a { left: 18px; top: 26px; }
.proj__item--b { right: 18px; top: 26px; }
.proj__item--c { left: 50%; bottom: 22px; translate: -50% 0; }
.proj__centro { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; background: var(--ink); color: var(--accent); box-shadow: 0 0 0 6px rgba(248,248,246,.85), 0 18px 30px -16px rgba(11,11,11,.55); }
.proj__centro .ico { width: 26px; height: 26px; stroke-width: 1.6; }
.proj__txt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 20px 0; text-align: center; }
.proj__txt h3 { font-size: var(--fs-18); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }


/* ---------- Como contratar ---------- */
.plans__grid { gap: 24px; }
.plan { padding: 36px 32px 32px; border-color: var(--card-line); border-radius: var(--r-xl); }
.plan__price { border-color: var(--card-line); }
.security { margin-top: 56px; padding: 40px 0 0; border: 0; border-top: 1px solid var(--card-line); border-radius: 0; background: none; }

/* ---------- Dúvidas ---------- */
.faq__wrap { align-items: start; }
.faq__list { border-top-color: var(--card-line); }
.faq details { border-bottom-color: var(--card-line); }
.faq summary { padding: 24px 0; font-family: var(--f-display); font-size: 21px; font-weight: 400; letter-spacing: -.01em; }
.faq summary::after { width: 22px; height: 22px; border: 0; background-color: transparent; }
.faq summary:hover::after { background-color: transparent; }
/* ---------- Athena: um chat de IA de verdade, no jeito dos apps de IA (referência: whirl.chat) ----------
   Abre com a saudação, a caixa de pergunta em destaque e sugestões. A primeira pergunta vira conversa:
   a Athena "pensa" e escreve a resposta; a caixa desce para o pé e as sugestões viram uma fileira. */
.faq__ai { position: sticky; top: calc(var(--nav-h) + 24px); }
.athena { display: flex; flex-direction: column; height: 600px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; overflow: hidden; }
.athena__head { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--card-line); }
.athena__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--bg-3); color: var(--ink); }
.athena__av .core-mark { width: 16px; height: 15px; }
.athena__id { display: grid; gap: 2px; line-height: 1.15; }
.athena__id b { font-size: var(--fs-14); font-weight: 600; color: var(--ink); }
.athena__id span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--muted); }
.athena__id i { width: 7px; height: 7px; border-radius: 50%; background: #5a7466; animation: ping-g 1.8s infinite; }
.athena__id em { font-style: normal; }
.athena__nova { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: var(--fs-13); font-weight: 500; cursor: pointer; transition: border-color .2s; }
.athena__nova:hover { border-color: var(--ink); }
.athena__nova .ico { width: 14px; height: 14px; }
.athena__nova[hidden] { display: none; }

/* saudação: a marca da Athena com raios que giram devagar e correm quando você começa a escrever */
.athena__oi { order: 1; display: flex; flex-direction: column; align-items: center; margin-top: auto; padding: 0 28px; text-align: center; }
.athena__marca { position: relative; display: grid; place-items: center; width: 84px; height: 84px; }
.athena__raios { position: absolute; inset: 0; animation: athena-giro 18s linear infinite; }
.athena__raios i { position: absolute; left: 50%; top: 50%; width: 3px; height: 10px; margin: -5px 0 0 -1.5px; border-radius: 3px; background: var(--ink); opacity: calc(.12 + var(--k) * .065); transform: rotate(calc(var(--k) * 30deg)) translateY(-35px); }
.athena:has(.athena__form:focus-within) .athena__raios i, .athena:has(.athena__form.tem-texto) .athena__raios i { animation: athena-raio 1.2s linear infinite; animation-delay: calc(var(--k) * .1s - 1.2s); }
.athena__nucleo { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--ink); color: var(--accent); box-shadow: 0 14px 26px -14px rgba(11,11,11,.6); }
.athena__nucleo .core-mark { width: 22px; height: 20px; }
.athena__ola { margin-top: 18px; font-family: var(--f-display); font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.athena__sub { margin-top: 10px; max-width: 36ch; font-size: var(--fs-14); line-height: 1.55; color: var(--muted); }
@keyframes athena-giro { to { rotate: 360deg; } }
@keyframes athena-raio { from { opacity: 1; } to { opacity: .1; } }

/* caixa de pergunta: grande, em pílula; o botão acende quando há texto. Enquanto ninguém escreve,
   perguntas de exemplo se digitam sozinhas no lugar do placeholder */
.athena__form { order: 2; position: relative; display: flex; align-items: center; gap: 6px; margin: 24px 20px 0; padding: 7px 7px 7px 20px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; box-shadow: 0 1px 2px rgba(11,11,11,.04), 0 14px 30px -20px rgba(11,11,11,.35); transition: border-color .2s, box-shadow .2s; }
.athena__form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(168,191,179,.35), 0 14px 30px -20px rgba(11,11,11,.35); }
.athena__form input { flex: 1; min-width: 0; height: 42px; padding: 0; border: 0; background: transparent; font-size: var(--fs-16); color: var(--ink); outline: none; }
.athena__form input::placeholder { color: var(--muted); }
.athena__form.dica-on input::placeholder { color: transparent; }
.athena__form.dica-on:focus-within input::placeholder { color: var(--muted); }
.athena__dica { position: absolute; left: 20px; right: 104px; top: 50%; translate: 0 -50%; overflow: hidden; white-space: nowrap; font-size: var(--fs-16); color: var(--muted); pointer-events: none; }
.athena__dica::after { content: ""; display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -3px; background: var(--muted); animation: athena-cursor 1s steps(1) infinite; }
.athena__form:not(.dica-on) .athena__dica, .athena__form:focus-within .athena__dica, .athena__form.tem-texto .athena__dica, .athena--conversa .athena__dica { display: none; }
/* na conversa, a caixa volta ao placeholder simples */
.athena--conversa .athena__form.dica-on input::placeholder { color: var(--muted); }
.athena__ia { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; font-size: var(--fs-12); font-weight: 500; color: var(--muted); }
.athena__ia .ico { width: 13px; height: 13px; }
.athena__form button { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--bg-3); color: #8d8d86; cursor: pointer; transition: background-color .2s, color .2s, transform .15s; }
.athena__form.tem-texto button { background: var(--ink); color: #fff; }
.athena__form button:active { transform: scale(.94); }
.athena__form button:disabled { opacity: .5; cursor: default; }
.athena__form button .ico { width: 17px; height: 17px; rotate: -90deg; }
@keyframes athena-cursor { 50% { opacity: 0; } }

/* sugestões: cartões em duas colunas na abertura */
.athena__chips { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 20px auto; padding-bottom: 20px; }
.athena__chips button { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--card-line); background: var(--frame); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, translate .2s var(--ease); }
.athena__chips button:hover { border-color: var(--line-2); background: #fff; translate: 0 -1px; }
.athena__chips button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.athena__chips button:disabled { opacity: .5; cursor: default; }
.athena__chips .ico { flex: none; width: 15px; height: 15px; color: #5a7466; }
.athena__chips button[hidden], .athena:not(.athena--conversa) .athena__chips button:nth-child(n+5) { display: none; }

/* conversa: a saudação sai, as mensagens entram; as sugestões que sobram viram uma fileira */
.athena__log { display: none; }
.athena--conversa .athena__oi { display: none; }
.athena--conversa .athena__log { order: 1; display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 20px; padding: 22px 20px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.athena__log:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -4px; border-radius: var(--r-md); }
.athena--conversa .athena__chips { order: 2; display: flex; gap: 8px; margin: 0; padding: 2px 16px 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.athena--conversa .athena__chips::-webkit-scrollbar { display: none; }
.athena--conversa .athena__chips button { flex: none; min-height: 34px; padding: 0 13px 0 11px; border-radius: var(--r-pill); border-color: var(--line-2); background: #fff; white-space: nowrap; }
.athena--conversa .athena__form { order: 3; margin: 10px 16px 16px; }
.amsg.enter { animation: athena-msg .45s var(--ease) both; }
@keyframes athena-msg { from { opacity: 0; translate: 0 8px; } }
.amsg--user { align-self: flex-end; max-width: 84%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: var(--ink); color: #fff; font-size: var(--fs-14); line-height: 1.5; }
/* resposta da Athena: avatar e texto solto, sem balão, como nos apps de IA */
.amsg--ai { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; align-items: start; }
.amsg__av { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: var(--accent); }
.amsg__av .core-mark { width: 13px; height: 12px; }
.amsg--pensando .amsg__av::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 1.5px solid rgba(90,116,102,.55); animation: athena-onda 1.3s ease-out infinite; }
@keyframes athena-onda { from { opacity: 1; scale: .85; } to { opacity: 0; scale: 1.25; } }
.amsg__body { min-width: 0; padding-top: 4px; font-size: var(--fs-14); line-height: 1.6; color: var(--ink-2); }
.amsg__body > * + * { margin-top: 10px; }
.amsg__body b { font-weight: 600; color: var(--ink); }
.amsg__body ul { display: grid; gap: 6px; }
.amsg__body li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.amsg__body li::before { content: ""; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--accent-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a7466' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") no-repeat center / 10px; }
.amsg__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.amsg__acts a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-size: var(--fs-13); font-weight: 500; text-decoration: none; transition: border-color .2s, background-color .2s; }
.amsg__acts a:hover { border-color: var(--ink); }
.amsg__acts a.pri { border-color: var(--ink); background: var(--ink); color: #fff; }
.amsg__acts a.pri:hover { background: #262624; }
.amsg__acts .ico, .amsg__acts .bi { width: 15px; height: 15px; }
.amsg__acts .bi { --bc: #25d366; }
.amsg__fmt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.amsg__fmt div { padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--card-line); background: #fff; }
.amsg__fmt div:first-child { border-color: #c9d8cf; background: var(--accent-bg); }
.amsg__fmt b { display: block; font-size: var(--fs-13); line-height: 1.3; }
.amsg__fmt span { display: block; margin-top: 4px; font-size: var(--fs-12); line-height: 1.4; color: var(--muted); }
/* pensando: o texto pulsa enquanto a Athena prepara a resposta; escrevendo: um cursor no fim da linha */
.atyping { display: inline-flex; align-items: center; height: 22px; font-size: var(--fs-14); color: var(--muted); }
.atyping span { animation: athena-pensa 1.2s ease-in-out infinite; }
@keyframes athena-pensa { 50% { opacity: .4; } }
.amsg--escrevendo .amsg__body > p:last-of-type::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 5px; vertical-align: 1px; border-radius: 50%; background: #5a7466; animation: athena-pensa .9s ease-in-out infinite; }

/* ---------- Contato ---------- */
.form { box-shadow: none; }

/* ---------- Rodapé ---------- */
.footer2 { padding-top: 88px; border-top: 0; }
.footer2__col b { font: 400 var(--fs-13)/1.4 var(--f-mono); color: var(--ink); }
.footer2__fine { font-size: var(--fs-13); }      /* dados da empresa menores, como no editor (v4) */
.footer2__social a.ph { background: var(--line); }
.footer2__social a.ph .ico { color: var(--ink); }
.footer2__legal { border-top-color: var(--card-line); }

/* =========================================================
   Vitrine do hero · cenas 3D (js/cenas3d.js)
   ========================================================= */
.g3d { position: absolute; inset: 0; overflow: hidden; }
.g3d__canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; }
/* vinheta: a cidade se dissolve nas bordas, sem fim aparente */
.g3d::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 105% at 46% 52%, rgba(251,251,250,0) 60%, rgba(251,251,250,.95) 100%); }
.g3d__ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* posição vinda do JS em --x/--y, somada à âncora de cada marcador (--ax/--ay); o "scale" do estalo age em volta dele */
:where(.g3d__ui > div) { --ax: -50%; --ay: -50%; }
.g3d__ui > div { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s; translate: calc(var(--x, 0px) + var(--ax)) calc(var(--y, 0px) + var(--ay)); will-change: translate; }
.g3d__ui > div.on { opacity: 1; }

/* placa do veículo: pílula escura com a cor do veículo e o estado, presa por uma haste */
.g3d-tag { display: flex; align-items: center; gap: 5px; height: 19px; padding: 0 3px 0 8px; border-radius: 999px; background: var(--rc); color: #fff; font: 600 8.5px/1 var(--f-mono); letter-spacing: .02em; white-space: nowrap; --ay: -100%; margin-top: -9px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.g3d-tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 9px; margin-left: -.75px; background: var(--rc); opacity: .7; }
.g3d-dot { display: none; }
.g3d-st { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: background-color .3s; }
.g3d-st svg { width: 10px; height: 10px; fill: none; stroke: #3f6b57; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.g3d-st .i-warn, .g3d-st .i-rota { display: none; }
.g3d-tag.is-warn .g3d-st { background: #fff3e0; }
.g3d-tag.is-warn .g3d-st svg { stroke: #b45309; }
.g3d-tag.is-warn .i-ok, .g3d-tag.is-route .i-ok { display: none; }
.g3d-tag.is-warn .i-warn, .g3d-tag.is-route .i-rota { display: inline; }
.g3d-tag.is-route .g3d-st svg { stroke: #0b0b0b; }

/* entregas: marcador no meio-fio; feita, ganha o check na cor da rota */
.g3d-stop { width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.6px var(--rc), 0 3px 6px -2px rgba(0,0,0,.3); display: grid; place-items: center; }
.g3d-stop svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s; }
.g3d-stop.done { background: var(--rc); }
.g3d-stop.done svg { opacity: 1; }
.g3d-stop.pop { animation: g3dpop .6s var(--ease); }
@keyframes g3dpop { 40% { scale: 1.8; } }

/* trânsito parado e ganho do desvio */
.g3d-jam { width: 18px; height: 18px; --ay: -100%; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 2px #fff, 0 6px 14px -4px rgba(220,38,38,.6); display: grid; place-items: center; }
.g3d-jam svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.g3d-jam::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(220,38,38,.55); animation: g3dping 1.5s ease-out infinite; }
@keyframes g3dping { from { opacity: 1; scale: .7; } to { opacity: 0; scale: 1.6; } }
.g3d-jam.pop { animation: g3dpop .6s var(--ease); }
.g3d-save { padding: 4px 8px; border-radius: 999px; background: #4f6b5d; color: #fff; font: 600 9.5px/1 var(--f); white-space: nowrap; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 14px -6px rgba(0,0,0,.4); }
.g3d-pin { --ay: -100%; padding: 3px 6px; border-radius: 6px; background: #0b0b0b; color: #fff; font: 700 8.5px/1 var(--f-mono); letter-spacing: .06em; box-shadow: 0 6px 12px -6px rgba(0,0,0,.5); }

/* painel da logística em cartões de vidro sobre a cidade */
.scn--map.is-3d { background: #fbfbfa; }
.scn--map.is-3d .mp { display: none; }
.scn--map.is-3d .mp-panel { inset: 0; width: auto; padding: 0; display: block; background: none; border: 0; pointer-events: none; z-index: 3; }
.scn--map.is-3d .mp-panel > * { position: absolute; }
.scn--map .vidro, .scn--map.is-3d .mp-card, .scn--map.is-3d .mp-alert { background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(20,24,22,.06), 0 14px 32px -16px rgba(20,24,22,.4); }
.scn--map.is-3d .mp-card { top: 12px; right: 12px; width: 182px; padding: 11px 12px 10px; border-radius: 14px; }
.scn--map.is-3d .mp-kpi { margin-top: 7px; padding: 0; background: none; }
.scn--map.is-3d .mp-alert { top: 12px; left: 12px; width: 206px; border-radius: 13px; }
.scn--map.is-3d .mp-alert--warn { background: rgba(255,248,236,.86); border-color: rgba(245,223,185,.95); }
.scn--map.is-3d .mp-sugg { right: 12px; bottom: 12px; width: 190px; border-radius: 14px; background: rgba(11,11,11,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); }
.scn--map.is-3d .mp-alert--ok { top: 12px; left: 12px; }
.scn--map.is-3d #mp-alert.saiu { opacity: 0; transform: translateY(-6px); }
.mp-fleet { margin: 8px 0 0; padding: 7px 0 0; border-top: 1px solid rgba(11,11,11,.08); list-style: none; }
.mp-fleet li { grid-template-columns: 8px 44px minmax(0, 1fr) auto; }
.mp-fleet span { transition: color .3s; }
.mp-fleet li.is-warn span, .mp-fleet li.is-warn em { color: #b45309; }
.mp-fleet li.is-ok span { color: #3f6b57; }
.mp-hora { font: 500 9.5px var(--f-mono); color: #8a8a84; font-variant-numeric: tabular-nums; }
/* estoque em 3D: a estante do item em risco à direita, de perto; a cobertura no alto e a compra sugerida embaixo, à esquerda */
.st-card { display: none; }
.scn--stock.is-3d { display: block; padding: 0; background: #fbfbfa; }
.scn--stock.is-3d .st-chart, .scn--stock.is-3d .st-table { display: none; }
.scn--stock.is-3d .st-card { display: block; position: absolute; top: 12px; left: 12px; width: 196px; padding: 11px 12px 8px; border-radius: 14px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(20,24,22,.06), 0 14px 32px -16px rgba(20,24,22,.4); z-index: 3; }
.scn--stock.is-3d .st-sugg { position: absolute; left: 12px; bottom: 12px; width: 196px; z-index: 3; border-radius: 14px; background: rgba(11,11,11,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); }
.scn--stock.espera-3d > :not(.g3d) { visibility: hidden; }
.scn--stock.espera-3d { background: #fbfbfa; }
.st-card__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.st-card__h b { display: block; font-size: 11.5px; font-weight: 600; }
.st-card__h b .nw { font-size: inherit; color: inherit; white-space: nowrap; }
.st-card__h span { font-size: 9.5px; color: #6b6b66; }
.st-card__n { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; }
.st-card__n b { font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.st-card__n span { font-size: 10px; color: #6b6b66; }
.st-card__h em { flex: none; padding: 3px 7px; border-radius: 999px; background: #fff1de; color: #b45309; font: 600 9px/1 var(--f); font-style: normal; white-space: nowrap; transition: background-color .4s, color .4s; }
.scn--stock.ordered .st-card__h em { background: #e3ece6; color: #33483d; }
.st-mini { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.st-mini__grid { stroke: #e4e4df; stroke-width: 1; }
.st-mini__rop { stroke: #d9a35b; stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.st-mini__antes { fill: none; stroke: #d97706; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.st-mini__depois { fill: none; stroke: #4f7a66; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.st-mini__area { fill: rgba(111,154,132,.16); opacity: 0; transition: opacity .6s .5s; }
.st-mini__zero { fill: #fff; stroke: #d97706; stroke-width: 2; opacity: 0; transition: opacity .3s; }
.st-mini__chega { fill: #4f7a66; stroke: #fff; stroke-width: 1.5; opacity: 0; transition: opacity .3s .4s; }
.st-mini__t { font: 500 7.5px var(--f); fill: #8a8a84; }
.st-mini__t--risco { fill: #b45309; }
.st-mini__t--ok { fill: #3f6b57; opacity: 0; transition: opacity .3s .6s; }
.scn--stock.analisado .st-mini__zero { opacity: 1; }
.scn--stock.ordered .st-mini__area, .scn--stock.ordered .st-mini__chega, .scn--stock.ordered .st-mini__t--ok { opacity: 1; }
.scn--stock.ordered .st-mini__antes { opacity: .3; transition: opacity .5s; }
.scn--stock.ordered .st-mini__zero { opacity: 0; }

.scn--map.espera-3d .mp { visibility: hidden; }
.scn--map.espera-3d { background: #fbfbfa; }

/* cartões das cenas 3D: vidro claro para dados, vidro escuro para a IA */
.scn .vidro { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(20,24,22,.06), 0 14px 32px -16px rgba(20,24,22,.4); }
.scn .ia { background: rgba(11,11,11,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  /* colunas mais estreitas: as frentes dos projetos ficam menores para caberem lado a lado */
  .proj__item { gap: 6px; height: 30px; padding: 0 10px 0 8px; font-size: var(--fs-12); }
  .proj__item .ico { width: 13px; height: 13px; }
  .proj__item--a { left: 12px; top: 22px; }
  .proj__item--b { right: 12px; top: 22px; }
  .proj__item--c { bottom: 20px; }
  /* Dúvidas em uma coluna: a Athena embaixo das perguntas, sem ficar presa na tela */
  .faq__ai { position: static; }
  .athena { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .head { margin-bottom: 48px; }
  /* etapas, projetos e régua em uma coluna, na largura de um celular grande */
  .trilha { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 44px; max-width: 520px; margin-inline: auto; }
  .etapa { display: flex; flex-direction: column; grid-row: auto; }
  .etapa__quadro { min-height: 0; }
  .etapa + .etapa .etapa__quadro::before { display: none; }
  .projs { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; padding-bottom: 0; }
  .proj { padding-bottom: 28px; }
  .proj + .proj { border-left: 0; border-top: 1px solid var(--card-line); }
}
@media (max-width: 600px) {
  .inset { margin-inline: 8px; border-radius: 24px; }
  .problem2.inset { margin-top: 8px; }
  .cta.inset { margin-bottom: 8px; padding-top: 52px; }
  .hero { padding-top: calc(var(--nav-h) + 36px); padding-bottom: 40px; }
  .sim__inputs { padding: 28px 22px; }
  .sim__out { padding: 28px 22px; }
  .sim__card:first-child { padding: 0 0 18px; }
  .sim__card + .sim__card { padding: 18px 0 0; border-left: 0; border-top: 1px solid #262626; }
  .etapa__quadro { padding: 24px 14px 14px; border-radius: 22px; }
  .etapa__txt { padding-top: 20px; }
  .projs { border-radius: 22px; }
  .proj__mapa { height: 214px; }
  .plan { padding: 28px 24px 24px; }
  .faq summary { font-size: 19px; }
  /* no celular a abertura cresce com o conteúdo; a conversa tem altura fixa, para rolar por dentro */
  .athena { height: auto; min-height: 540px; }
  .athena--conversa { height: 560px; }
  .athena__ola { font-size: 26px; }
  .athena__form { margin-inline: 14px; padding-left: 16px; }
  .athena__dica { left: 16px; right: 58px; }
  .athena__ia { display: none; }
  .athena__chips { grid-template-columns: minmax(0, 1fr); margin-inline: 14px; }
  .athena:not(.athena--conversa) .athena__chips button:nth-child(n+4) { display: none; }
  .athena--conversa .athena__log { padding-inline: 16px; }
  .amsg__fmt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .athena__id em { display: none; }
  .athena__ola { font-size: 24px; }
}
@media (max-width: 340px) {
  /* celulares bem estreitos: o título do contato em três linhas, para as opções do formulário caberem na tela */
  .cta h2 { font-size: 30px; }
}

/* ---------- Contato: etapa 4, escolher dia e horário da conversa (agenda do Google) ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* campo-isca contra robôs */
.agd__dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.agd__dia, .agd__hora { position: relative; }
.agd__dia input, .agd__hora input { position: absolute; opacity: 0; pointer-events: none; }
.agd__dia span { display: grid; place-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.agd__dia small { font-size: var(--fs-12); color: var(--muted); }
.agd__dia b { font-size: var(--fs-14); font-weight: 600; white-space: nowrap; }
.agd__dia span:hover, .agd__hora span:hover { border-color: var(--ink); }
.agd__dia input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.agd__dia input:checked + span small { color: #c9c9c3; }
.agd__dia input:disabled + span { opacity: .4; cursor: not-allowed; border-style: dashed; }
.agd__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; margin-top: 14px; }
.agd__hora span { display: grid; place-items: center; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; font-size: var(--fs-14); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.agd__hora input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.agd__dia input:focus-visible + span, .agd__hora input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.agd__aviso { margin-top: 14px; font-size: var(--fs-14); color: var(--muted); }
@media (max-width: 420px) {
  .agd__dias { gap: 6px; }
  .agd__dia span { padding: 9px 2px; border-radius: 12px; }
  .agd__dia b { font-size: var(--fs-13); }
}