/* ============================================================================
   infinity.ai — folha de estilo no idioma do IBM Carbon Design System
   Reescrita em 27/08/2026. A anterior está em styles.css.pre-carbon.

   O que muda em relação à anterior, e por quê:

   - Cantos retos em tudo (radius 0). Canto arredondado lê como "startup";
     canto reto lê como instrumento. A tese da marca é engenharia, não hype.
   - Sem sombra, sem glow, sem gradiente decorativo. Profundidade no Carbon
     vem de CAMADA (cinzas empilhados), não de sombra.
   - Grade de 8px. Nenhum espaçamento fora da escala.
   - Títulos grandes em peso 300. É a assinatura tipográfica do Carbon: o
     tamanho carrega a hierarquia, o peso não precisa gritar junto.
   - Separação por linha de 1px, com o fundo aparecendo entre os blocos —
     o padrão de "tile" do Carbon. Sem card flutuante.
   - O verde da marca vira ACENTO (texto, borda, ícone), não superfície.
     Preenchimento grande só no CTA principal. É o que resolve de vez a
     sensação de paleta agressiva: o problema não era o tom, era a área.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Escala de cinza g100 do Carbon */
  --g100:      #161616;   /* fundo */
  --layer-01:  #262626;
  --layer-02:  #393939;
  --layer-03:  #525252;
  --borda-sutil: #393939;
  --borda-forte: #525252;

  --texto-1:   #f4f4f4;
  --texto-2:   #c6c6c6;
  --texto-3:   #8d8d8d;   /* auxiliar / rótulo */

  /* Marca: mesma matiz, saturação contida (~48%) */
  --marca:       #45be8f;
  --marca-clara: #6fcba6;
  --marca-escura:#2f8a63;
  --sobre-marca: #05140e;

  /* Semânticas do Carbon */
  --erro:    #ff8389;
  --sucesso: #42be65;
  --aviso:   #f1c21b;

  /* Grade 2x — nada fora desta escala */
  --e01: 2px;  --e02: 4px;  --e03: 8px;  --e04: 12px;
  --e05: 16px; --e06: 24px; --e07: 32px; --e08: 40px;
  --e09: 48px; --e10: 64px; --e11: 80px; --e12: 96px; --e13: 160px;

  --largura: 1312px;   /* 16 colunas do grid Carbon em desktop largo */

  /* Movimento produtivo do Carbon */
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --dur-rapida: 110ms;
  --dur-media:  240ms;
  --dur-lenta:  400ms;

  --fonte: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--g100);
  color: var(--texto-1);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* rede de segurança contra vazamento lateral */
}

img, svg, canvas { max-width: 100%; display: block; }

::selection { background: var(--marca); color: var(--sobre-marca); }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- tipografia
   Escala do Carbon. Títulos grandes em 300; o tamanho faz a hierarquia. */
h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: 0; text-wrap: balance; }

.t-display {                       /* productiveHeading-07 */
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.11;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.t-h2 {                            /* productiveHeading-05 */
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  line-height: 1.19;
}
.t-h3 {                            /* productiveHeading-04 */
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.29;
}
.t-h4 { font-size: 1.125rem; line-height: 1.33; font-weight: 600; letter-spacing: .16px; }

.t-corpo   { font-size: 1rem; line-height: 1.5; color: var(--texto-2); }
.t-corpo-g { font-size: 1.125rem; line-height: 1.55; color: var(--texto-2); }
.t-aux     { font-size: .875rem; line-height: 1.43; color: var(--texto-3); letter-spacing: .16px; }

/* Rótulo monoespaçado — substitui o "// comentário" da versão anterior.
   No Carbon o rótulo é estrutural: diz que seção é, não decora. */
.rotulo {
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.33;
  letter-spacing: .32px;
  text-transform: uppercase;
  color: var(--texto-3);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--e03);
}
.rotulo::before {
  content: "";
  width: var(--e05); height: 1px;
  background: var(--marca);
  flex: 0 0 auto;
}

p { margin: 0; max-width: 68ch; }
strong { font-weight: 600; color: var(--texto-1); }
em {
  font-style: normal;
  background: linear-gradient(90deg, #36E24E, #37E0C0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

a { color: var(--marca); text-underline-offset: 3px; }
a:hover { color: var(--marca-clara); }

code, .mono { font-family: var(--mono); font-size: .875em; }

/* ------------------------------------------------------------------ layout */
.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e05);
}
@media (min-width: 672px)  { .wrap { padding-inline: var(--e06); } }
@media (min-width: 1056px) { .wrap { padding-inline: var(--e07); } }

section { padding-block: var(--e11); border-top: 1px solid var(--borda-sutil); }
@media (min-width: 1056px) { section { padding-block: var(--e12); } }

.cab-secao {
  display: flex; flex-direction: column; gap: var(--e05);
  margin-bottom: var(--e09);
  max-width: 46ch;
}

/* Padrão "tile" do Carbon: blocos separados por 1px, com o fundo aparecendo
   entre eles. Substitui o card com sombra e canto redondo. */
.tiles {
  display: grid;
  gap: 1px;
  background: var(--borda-sutil);
  border: 1px solid var(--borda-sutil);
}
.tile {
  background: var(--layer-01);
  padding: var(--e06);
  display: flex; flex-direction: column; gap: var(--e04);
  transition: background var(--dur-rapida) var(--ease);
}
.tile--acao:hover { background: var(--layer-02); }
.tiles--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tiles--3 { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.tiles--4 { grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }

/* Índice numérico — no Carbon, número é dado, não enfeite */
.indice {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .32px;
  color: var(--marca);
  font-weight: 600;
}

/* ------------------------------------------------------------------ botões
   Carbon: retângulo, sem radius, texto à esquerda e ícone à direita,
   altura 48px, transição curta. */
.btn {
  --cor-fundo: var(--marca);
  --cor-texto: var(--sobre-marca);
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--e10);
  min-height: 48px;
  padding: var(--e04) var(--e05);
  border: 1px solid transparent;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 1rem; line-height: 1.43; letter-spacing: .16px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.btn:hover  { --cor-fundo: var(--marca-clara); color: var(--sobre-marca); }
.btn:active { --cor-fundo: var(--marca-escura); }
.btn svg { flex: 0 0 auto; }

.btn--secundario {
  --cor-fundo: transparent;
  --cor-texto: var(--texto-1);
  border-color: var(--borda-forte);
}
.btn--secundario:hover { --cor-fundo: var(--layer-02); color: var(--texto-1); }

.btn--fantasma {
  --cor-fundo: transparent;
  --cor-texto: var(--marca);
  gap: var(--e05);
}
.btn--fantasma:hover { --cor-fundo: var(--layer-01); color: var(--marca-clara); }

.btn--bloco { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------------ cabeçalho
   Carbon UI Shell: 48px de altura, borda inferior, sem sombra. */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--g100);
  border-bottom: 1px solid var(--borda-sutil);
}
.topo__wrap {
  display: flex; align-items: center; gap: var(--e06);
  min-height: 48px;
}
.marca-logo {
  display: flex; align-items: center; gap: var(--e03);
  font-size: 1rem; font-weight: 600; letter-spacing: .1px;
  color: var(--texto-1); text-decoration: none;
  padding-inline: var(--e02);
  flex: 0 0 auto;
}
.marca-logo span { color: var(--marca); }

/* Nav rola em vez de vazar. O vazamento de 26px no mobile foi defeito real
   medido na versão anterior — nav não é lugar de esconder link. */
.topo__nav {
  display: flex; align-items: stretch; gap: 0;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.topo__nav::-webkit-scrollbar { display: none; }
.topo__nav a {
  display: inline-flex; align-items: center;
  padding: 0 var(--e05);
  min-height: 48px;             /* alvo de toque cheio, não altura de texto */
  font-size: .875rem; letter-spacing: .16px;
  color: var(--texto-2); text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.topo__nav a:hover { color: var(--texto-1); border-bottom-color: var(--borda-forte); }
.topo__cta { flex: 0 0 auto; margin-left: var(--e03); }
@media (max-width: 671px) { .topo__cta { display: none; } }

/* ------------------------------------------------------------------- herói */
.hero { border-top: 0; padding-block: var(--e10) var(--e11); position: relative; isolation: isolate; }
@media (min-width: 1056px) { .hero { padding-block: var(--e12) var(--e13); } }

.hero__grade {
  display: grid; gap: var(--e09);
  align-items: start;
}
@media (min-width: 1056px) {
  .hero__grade { grid-template-columns: 7fr 5fr; gap: var(--e10); }
}

.hero__copy { display: flex; flex-direction: column; gap: var(--e06); }
.hero__acoes { display: flex; flex-direction: column; gap: var(--e04); align-items: flex-start; }

/* Malha de fundo: pura estrutura, no espírito do grid do Carbon.
   Substitui o glow radial da versão anterior. */
.hero__malha {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--borda-sutil) 1px, transparent 1px),
    linear-gradient(to bottom, var(--borda-sutil) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .28;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
}
.hero__cena { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; }
@media (max-width: 671px) { .hero__cena { opacity: .38; } }

/* ------------------------------------------- painel do agente (prova viva)
   Este bloco é a mudança estratégica: o agente REAL sobe para a primeira
   dobra. Antes, um terminal roteirizado ocupava meia tela enquanto o agente
   de verdade ficava num círculo de 58px no canto. */
/* Sem moldura fechada: a caixa em volta cortava a primeira dobra ao meio e a
   leitura tropecava na borda antes de chegar no conteudo. Agora o painel nasce
   da malha do fundo — borda so no topo e na base, onde ela separa funcao. */
.agente {
  border: 0;
  border-top: 1px solid var(--marca);
  background: linear-gradient(180deg, rgba(69,190,143,.05), transparent 40%), var(--layer-01);
  display: flex; flex-direction: column;
}
.agente__topo {
  display: flex; align-items: center; gap: var(--e03);
  padding: var(--e04) var(--e05);
  border-bottom: 1px solid var(--borda-sutil);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .32px;
  color: var(--texto-3);
}
.agente__pulso {
  width: 8px; height: 8px; background: var(--marca);
  flex: 0 0 auto;
  animation: pulso 2.4s var(--ease) infinite;
}
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.agente__corpo { padding: var(--e05); display: flex; flex-direction: column; gap: var(--e05); }
.agente__chamada { font-size: 1rem; line-height: 1.5; color: var(--texto-2); }
.agente__chamada strong { color: var(--texto-1); }

/* Perguntas sugeridas: cada uma abre o agente já com a pergunta.
   O visitante TESTA em vez de assistir — que é o que a pesquisa mostra
   converter (+63% para quem interage com demo). */
.agente__perguntas { display: flex; flex-direction: column; gap: 1px; background: var(--borda-sutil); }
.agente__pergunta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e05);
  width: 100%; min-height: 48px;
  padding: var(--e04) var(--e05);
  background: var(--layer-02);
  border: 0; color: var(--texto-1);
  font-family: var(--fonte); font-size: .875rem; letter-spacing: .16px;
  text-align: left; cursor: pointer;
  transition: background var(--dur-rapida) var(--ease);
}
.agente__pergunta:hover { background: var(--layer-03); }
.agente__pergunta span:last-child { color: var(--marca); font-family: var(--mono); flex: 0 0 auto; }

.agente__rodape {
  padding: var(--e04) var(--e05);
  border-top: 1px solid var(--borda-sutil);
  font-size: .75rem; color: var(--texto-3); line-height: 1.33;
}

/* Terminal — desce de "prova principal" para ilustração de apoio */
.terminal {
  border: 1px solid var(--borda-sutil);
  background: var(--g100);
  font-family: var(--mono); font-size: .8125rem; line-height: 1.6;
}
.terminal__barra {
  display: flex; align-items: center; gap: var(--e03);
  padding: var(--e03) var(--e04);
  border-bottom: 1px solid var(--borda-sutil);
  color: var(--texto-3); font-size: .75rem; letter-spacing: .32px;
}
.terminal__corpo { padding: var(--e04); min-height: 132px; color: var(--texto-2); overflow-x: auto; }
.terminal__corpo .ok { color: var(--marca); }
.terminal__corpo .hora { color: var(--texto-3); }
.term-cursor {
  display: inline-block; width: 7px; height: 14px;
  background: var(--marca); vertical-align: -2px;
  animation: piscar 1s steps(2) infinite;
}
@keyframes piscar { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ------------------------------------------------------------------ números */
.numeros .tile { gap: var(--e03); }
.numeros__valor {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; line-height: 1;
  letter-spacing: -.02em; color: var(--texto-1);
  font-variant-numeric: tabular-nums;
}
.numeros__valor em { color: var(--marca); }

/* ------------------------------------------------------------ dor / ofertas */
.lista-checks { list-style: none; margin: var(--e02) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e03); }
.lista-checks li {
  display: grid; grid-template-columns: var(--e05) 1fr; gap: var(--e04);
  font-size: .875rem; line-height: 1.43; color: var(--texto-2);
}
.lista-checks li::before { content: "—"; color: var(--marca); font-family: var(--mono); }

/* --------------------------------------------------------------- método */
.metodo__passos { display: grid; gap: 1px; background: var(--borda-sutil); border: 1px solid var(--borda-sutil); }
@media (min-width: 672px)  { .metodo__passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1056px) { .metodo__passos { grid-template-columns: repeat(4, 1fr); } }
.metodo__passo { background: var(--layer-01); padding: var(--e06); display: flex; flex-direction: column; gap: var(--e04); }
.metodo__num {
  font-family: var(--mono); font-size: 2.5rem; font-weight: 300; line-height: 1;
  color: var(--layer-03);
}

/* --------------------------------------------------------------- projetos */
.projeto { display: flex; flex-direction: column; gap: var(--e04); }
.marcas { display: flex; flex-wrap: wrap; gap: var(--e02); margin-top: var(--e02); }
.marca-tag {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .32px;
  padding: var(--e02) var(--e03);
  border: 1px solid var(--borda-forte); color: var(--texto-3);
  white-space: nowrap;
}
.marca-tag--viva { border-color: var(--marca); color: var(--marca); }

/* --------------------------------------------------------------- verdades */
.verdade { background: var(--layer-01); padding: var(--e06); display: flex; flex-direction: column; gap: var(--e05); }
.verdade p { font-size: 1.0625rem; line-height: 1.45; color: var(--texto-1); }
.verdade cite { font-family: var(--mono); font-size: .75rem; color: var(--texto-3); font-style: normal; letter-spacing: .32px; }

/* ------------------------------------------------------------ investimento */
.plano { background: var(--layer-01); padding: var(--e06); display: flex; flex-direction: column; gap: var(--e05); }
.plano--destaque { background: var(--layer-02); border-top: 3px solid var(--marca); }
.plano__selo {
  align-self: flex-start;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .32px; text-transform: uppercase;
  color: var(--sobre-marca); background: var(--marca); padding: var(--e02) var(--e03);
}
.plano__preco { display: flex; flex-direction: column; gap: var(--e02); }
.plano__preco b { font-size: 2.25rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plano__acoes { display: flex; flex-direction: column; gap: var(--e03); margin-top: auto; }

/* ------------------------------------------------------------------- FAQ */
.faq__item { border-bottom: 1px solid var(--borda-sutil); }
.faq__item:first-child { border-top: 1px solid var(--borda-sutil); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e05);
  padding: var(--e05) 0; min-height: 48px;
  cursor: pointer; list-style: none;
  font-size: 1rem; line-height: 1.4; color: var(--texto-1);
  transition: color var(--dur-rapida) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--marca); }
.faq__item summary::after { content: "+"; font-family: var(--mono); color: var(--marca); font-size: 1.25rem; flex: 0 0 auto; }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { padding-bottom: var(--e06); font-size: .9375rem; color: var(--texto-2); max-width: 76ch; }

/* --------------------------------------------------------------- formulário
   Campos Carbon: fundo de camada, SEM borda em volta, só sublinhado.
   É a assinatura mais reconhecível do sistema. */
.form-grade { display: grid; gap: var(--e05); }
@media (min-width: 672px) { .form-grade { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; gap: var(--e02); }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: .75rem; letter-spacing: .32px; color: var(--texto-3); }
.campo label .obrig { color: var(--erro); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--e04) var(--e05);
  background: var(--layer-01);
  border: 0;
  border-bottom: 1px solid var(--borda-forte);
  color: var(--texto-1);
  font-family: var(--fonte); font-size: 1rem; letter-spacing: .16px;
  transition: background var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.campo textarea { min-height: 104px; resize: vertical; padding-top: var(--e04); }
.campo input:hover, .campo select:hover, .campo textarea:hover { background: var(--layer-02); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--marca); outline-offset: -2px; background: var(--layer-01);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.campo .invalid, .campo input.invalid, .campo textarea.invalid { border-bottom-color: var(--erro); }

.form-nota { font-size: .75rem; color: var(--texto-3); }
.form-msg { padding: var(--e05); border-left: 3px solid var(--erro); background: var(--layer-01); font-size: .875rem; }
.form-msg[hidden] { display: none; }
#form-success { border-left-color: var(--sucesso); display: flex; flex-direction: column; gap: var(--e04); }

/* honeypot — invisível para gente, visível para robô bobo */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- rodapé */
.rodape { border-top: 1px solid var(--borda-sutil); padding-block: var(--e09); }
.rodape__grade { display: flex; flex-wrap: wrap; gap: var(--e06) var(--e09); justify-content: space-between; }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--e05); }
.rodape__links a { color: var(--texto-2); font-size: .875rem; text-decoration: none; }
.rodape__links a:hover { color: var(--marca); }
.rodape__copy { font-size: .75rem; color: var(--texto-3); }

/* ------------------------------------------------------- chat e flutuantes
   UM flutuante só. Na versão anterior havia dois empilhados, e eles cobriam
   o conteúdo do herói no mobile — defeito medido, não suposto. */
.wa-float {
  position: fixed; right: var(--e05); bottom: var(--e05); z-index: 60;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--marca); color: var(--sobre-marca);
  border: 0; cursor: pointer; text-decoration: none;
  transition: background var(--dur-rapida) var(--ease);
}
.wa-float:hover { background: var(--marca-clara); color: var(--sobre-marca); }

/* O app.js controla a visibilidade por `panel.hidden`, nao por classe.
   Na primeira reescrita eu usei `.chat.show` e o painel nunca abria — o CSS e o
   JS falavam linguas diferentes. CSS se adapta ao JS testado, nao o contrario. */
.chat {
  position: fixed; right: var(--e05); bottom: calc(var(--e05) + 48px + var(--e03));
  z-index: 61;
  width: min(384px, calc(100vw - var(--e05) * 2));
  max-height: min(560px, calc(100vh - var(--e11)));
  display: flex; flex-direction: column;
  background: var(--layer-01);
  border: 1px solid var(--borda-forte);
}
.chat[hidden] { display: none; }
.chat__topo {
  display: flex; align-items: center; gap: var(--e03);
  padding: var(--e04) var(--e05);
  border-bottom: 1px solid var(--borda-sutil);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .32px; color: var(--texto-3);
}
.chat__topo button {
  margin-left: auto; background: none; border: 0; color: var(--texto-2);
  cursor: pointer; font-size: 1.125rem; line-height: 1;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.chat__topo button:hover { color: var(--texto-1); background: var(--layer-02); }
.chat__log { flex: 1; overflow-y: auto; padding: var(--e05); display: flex; flex-direction: column; gap: var(--e04); }
.chat-msg { font-size: .875rem; line-height: 1.5; padding: var(--e04); max-width: 92%; }
.chat-msg.bot  { background: var(--layer-02); color: var(--texto-1); align-self: flex-start; }
.chat-msg.user { background: var(--marca); color: var(--sobre-marca); align-self: flex-end; }
.chat-msg.pending::after { content: "▍"; animation: piscar 1s steps(2) infinite; }
.chat-msg.erro { border-left: 3px solid var(--erro); background: var(--layer-02); }
.chat__chips { display: flex; flex-wrap: wrap; gap: var(--e02); padding: 0 var(--e05) var(--e04); }
.chat__chips button {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .32px;
  padding: var(--e02) var(--e03);
  background: transparent; border: 1px solid var(--borda-forte); color: var(--texto-2);
  cursor: pointer; transition: border-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.chat__chips button:hover { border-color: var(--marca); color: var(--marca); }
.chat__form { display: flex; gap: 1px; background: var(--borda-sutil); border-top: 1px solid var(--borda-sutil); }
.chat__form input {
  flex: 1; min-height: 48px; padding: var(--e04) var(--e05);
  background: var(--layer-01); border: 0; color: var(--texto-1);
  font-family: var(--fonte); font-size: .875rem;
}
.chat__form input:focus { outline: 2px solid var(--marca); outline-offset: -2px; }
.chat__form button {
  width: 48px; background: var(--marca); color: var(--sobre-marca);
  border: 0; cursor: pointer; font-size: 1rem;
}
.chat__form button:hover { background: var(--marca-clara); }
.chat__nota { padding: var(--e03) var(--e05); font-size: .6875rem; color: var(--texto-3); border-top: 1px solid var(--borda-sutil); }

/* --------------------------------------------------------------- revelação
   Entrada discreta, curva produtiva do Carbon. Sem deslocamento grande:
   movimento aqui é confirmação de que a seção chegou, não espetáculo. */
.reveal { opacity: 0; transform: translateY(var(--e04)); }
.js .reveal { transition: opacity var(--dur-lenta) var(--ease), transform var(--dur-lenta) var(--ease); }
.reveal.in, .no-js .reveal { opacity: 1; transform: none; }
[data-entra] { opacity: 0; transform: translateY(var(--e04)); transition: opacity var(--dur-lenta) var(--ease), transform var(--dur-lenta) var(--ease); }
[data-entra].entrou { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-entra] { opacity: 1 !important; transform: none !important; }
}

/* Sem JS, nada fica escondido */
.no-js .reveal, .no-js [data-entra] { opacity: 1; transform: none; }

/* pular para o conteúdo */
.pular {
  position: absolute; left: -9999px;
  background: var(--marca); color: var(--sobre-marca); padding: var(--e04) var(--e05); z-index: 100;
}
.pular:focus { left: var(--e05); top: var(--e05); }

/* Alvo de toque no rodape e na marca. Medido em 390x844: os links do rodape
   ficavam com 21px de altura — abaixo dos 44px que o dedo precisa. Altura de
   texto nao e altura de alvo. */
.rodape__links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--e02);
}
.marca-logo { min-height: 44px; }


/* Botao de reabrir o agente. O app.js alterna `openBtn.hidden`, entao ele
   precisa ter aparencia propria — na primeira versao Carbon eu o deixei
   permanentemente oculto e o visitante ficava sem como reabrir a conversa
   depois de fechar. Fica ACIMA do WhatsApp, empilhado com folga, e some
   quando o painel esta aberto (o proprio JS cuida disso). */
#chat-open {
  position: fixed; right: var(--e05); bottom: calc(var(--e05) + 48px + var(--e03));
  z-index: 60;
  min-height: 48px; padding: 0 var(--e05);
  display: inline-flex; align-items: center; gap: var(--e03);
  background: var(--layer-01); color: var(--texto-1);
  border: 1px solid var(--marca);
  font-family: var(--fonte); font-size: .875rem; letter-spacing: .16px;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease);
}
#chat-open:hover { background: var(--layer-02); }
#chat-open[hidden] { display: none; }
#chat-open .ponto { width: 7px; height: 7px; background: var(--marca); flex: 0 0 auto; }

/* Com o painel aberto o WhatsApp sai da frente, para nao empilhar dois
   flutuantes sobre o conteudo — que foi o defeito medido na versao anterior. */
.chat:not([hidden]) ~ .wa-float { display: none; }

/* Botao do agente: icone, nao rotulo. Pulsa de leve e de vez em quando —
   chama atencao sem virar banner piscando. A animacao tem pausa longa entre
   os pulsos de proposito: movimento continuo no canto da tela cansa e vira
   ruido que o olho aprende a ignorar. */
#chat-open {
  width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--layer-01); color: var(--marca);
  border: 1px solid var(--marca);
}
#chat-open::after {
  content: ""; position: absolute; inset: -1px;
  border: 1px solid var(--marca);
  opacity: 0; pointer-events: none;
  animation: chamada 9s var(--ease) infinite;
}
#chat-open:hover { background: var(--layer-02); }
#chat-open:hover::after { animation-play-state: paused; opacity: 0; }

@keyframes chamada {
  0%, 88%   { transform: scale(1);    opacity: 0; }
  91%       { transform: scale(1);    opacity: .9; }
  100%      { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #chat-open::after { animation: none; }
}

/* ── Painel do diagnostico ao vivo ────────────────────────────────────────
   Resultado de ferramenta dentro da conversa. Visualmente distinto da fala do
   agente de proposito: e dado calculado, nao texto gerado, e a diferenca tem
   que ser obvia para o visitante. */
.diag {
  border: 1px solid var(--marca);
  background: var(--layer-01);
  margin: var(--e02) 0;
}
.diag__top {
  padding: var(--e03) var(--e04);
  background: var(--marca);
  color: var(--sobre-marca);
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .32px; text-transform: uppercase; font-weight: 600;
}
.diag__corpo { padding: var(--e03) var(--e04); display: flex; flex-direction: column; gap: 1px; }
.diag__l {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e04);
  padding: var(--e02) 0;
  font-size: .8rem; color: var(--texto-2);
  border-bottom: 1px solid var(--borda-sutil);
}
.diag__l:last-child { border-bottom: 0; }
.diag__l b { font-variant-numeric: tabular-nums; color: var(--texto-1); font-weight: 600; white-space: nowrap; }
.diag__l--forte { font-size: .9rem; }
.diag__l--forte b { color: var(--marca); font-size: 1.05rem; }
.diag__prem {
  padding: var(--e03) var(--e04);
  border-top: 1px solid var(--borda-sutil);
  font-size: .68rem; line-height: 1.45; color: var(--texto-3);
}