@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/marca/poppins-300.643e38d8c288.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/marca/poppins-400.3dc5d0c52428.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/marca/poppins-500.289e0afc8be7.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/marca/poppins-600.872e86291859.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/marca/jetbrains-mono-400.14425ba9c695.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/marca/jetbrains-mono-500.cb182feeed4d.woff2") format("woff2"); }

:root {
  --navy: #0d1b2a;
  --navy-2: #122337;
  --navy-3: #1a3050;
  --accent: #2e5e9e;
  --accent-claro: #5b86ff;
  /* O fundo de um botão sob o ponteiro: o texto branco sobre ele passa de 4,5:1 (WCAG AA). */
  --accent-hover: #3a6fb5;
  --ciano: #35d0e0;
  --texto: #e8eef6;
  --texto-suave: #aebdd0;
  --borda: rgba(174, 189, 208, 0.18);
  --borda-forte: rgba(174, 189, 208, 0.34);
  --gutter: 16px;
  --largura: 1180px;
  --alinhamento: max(var(--gutter), calc((100% - var(--largura)) / 2));
  /*
   * A altura do cabeçalho fixo: a de RESERVA — uma linha, 67 px — até o script medir a de verdade
   * (cabecalho.ts). A de reserva é uma propriedade À PARTE: a imagem estática da entidade a usa
   * como base e corrige a diferença por transform, que não é deslocamento de layout (CLS).
   */
  --cabecalho-de-reserva: 67px;
  --altura-do-cabecalho: var(--cabecalho-de-reserva);
}

* { box-sizing: border-box; }

/* O atributo hidden TEM de vencer: os painéis declaram display (flex, grid),
   que sem esta regra anularia o hidden — e o chat ficaria à vista, morto, para
   quem não tem JavaScript. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--texto);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--accent-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
  border-radius: 2px;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  z-index: 10;
}
.pular-para-conteudo:focus { left: var(--gutter); }

/* ———— CABEÇALHO ———— */
header.topo {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px var(--alinhamento);
  background: rgba(13, 27, 42, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
header.topo img { display: block; }
header.topo .marca { display: block; flex: none; }

nav.ancoras {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-left: auto;
}
nav.ancoras a {
  color: var(--texto-suave);
  font-size: 0.92rem;
  font-weight: 400;
}
nav.ancoras a:hover { color: var(--texto); text-decoration: none; }

.topo-direita { display: flex; align-items: center; gap: 14px; }

.idiomas {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
}
.idiomas a, .idiomas span.atual {
  padding: 3px 8px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  color: var(--texto-suave);
}
.idiomas span.atual {
  color: var(--navy);
  background: var(--texto-suave);
  border-color: var(--texto-suave);
}
.idiomas a:hover { color: var(--texto); text-decoration: none; }

/* Os controles de áudio: dois botões redondos e discretos. O de parar só
   aparece enquanto a saudação toca — é o mecanismo de acessibilidade que o
   visitante precisa ter à mão, e some quando não há o que parar. */
.controles-de-audio { display: flex; align-items: center; gap: 6px; }
button.icone {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--borda-forte);
  color: var(--texto-suave);
  position: relative;
}
button.icone:hover { color: var(--texto); border-color: var(--accent-claro); }
button.icone.falando {
  color: var(--ciano);
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(53, 208, 224, 0.14);
}
/* Som desligado: o ícone ganha uma diagonal. */
button.icone.desligada::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 1.6px;
  background: currentColor;
  transform: rotate(-45deg);
  border-radius: 1px;
}
button.icone:disabled { opacity: 1; }
#audio-parar:disabled { display: none; }

/*
 * NO CELULAR (< 720 px) o cabeçalho quebra em duas linhas — a logo, o idioma e o
 * som em cima, as âncoras embaixo, na largura toda — e não estoura a janela.
 */
@media (max-width: 719px) {
  header.topo { flex-wrap: wrap; row-gap: 10px; }
  .topo-direita { margin-left: auto; }
  nav.ancoras {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: 6px 14px;
  }
}

/*
 * CELULAR (< 480 px): o cabeçalho de duas linhas ocupava um quarto da tela. A
 * logo, o idioma e o som cabem juntos numa linha, as âncoras em letra menor
 * numa segunda — e o herói encolhe o respiro, para que o texto, os dois botões e
 * a cabeça do Charlie, que emerge embaixo, caibam na primeira dobra.
 */
@media (max-width: 479px) {
  header.topo { gap: 6px 10px; padding-top: 10px; padding-bottom: 8px; }
  .topo-direita { gap: 10px; }
  nav.ancoras { gap: 4px 10px; }
  nav.ancoras a { font-size: 0.78rem; }
  .hero-conteudo { padding-top: 36px; padding-bottom: 104px; gap: 14px; }
  .hero p.sub { font-size: 1rem; margin: 0; }
  .chamada { padding: 11px 20px; font-size: 0.94rem; }
  .acoes { gap: 10px; }
}

/* Tablet em pé (720–899 px): as cinco âncoras, o idioma e o som cabem numa linha só. */
@media (min-width: 720px) and (max-width: 899px) {
  header.topo { gap: 14px; }
  nav.ancoras { gap: 6px 14px; flex-wrap: nowrap; }
  nav.ancoras a { font-size: 0.86rem; }
  .topo-direita { gap: 10px; }
}

/*
 * O cabeçalho é FIXO no topo e quebra em duas ou três linhas no celular. O
 * scroll-padding-top livra o cabeçalho para o foco e para os saltos por âncora
 * (WCAG 2.4.11, foco não obscurecido) com a altura MEDIDA (cabecalho.ts); sem
 * script, vale a de reserva — uma linha no desktop, três no celular.
 */
html { scroll-padding-top: calc(var(--altura-do-cabecalho) + 12px); }
@media (max-width: 719px) {
  :root { --cabecalho-de-reserva: 112px; }
}

main { display: block; position: relative; }

/* ———— O PALCO DO CHARLIE ———— */
.palco-do-charlie {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  /* A altura MAIOR da janela: a barra de endereço do celular que some e volta não redimensiona o palco (o buffer do canvas não é refeito a cada rolada). */
  height: 100lvh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.palco-do-charlie canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.palco-do-charlie.ativa canvas { opacity: 1; }
/* Falando: o halo é no desenho (a cena brilha); aqui, só o sinal que não depende de movimento. */
.palco-do-charlie[data-estado="falando"].ativa canvas { filter: drop-shadow(0 0 28px rgba(53, 208, 224, 0.18)); }

/* ———— SEÇÕES ———— */
section, footer.rodape {
  position: relative;
  z-index: 3;
  padding: clamp(40px, 5vw, 64px) var(--alinhamento);
}

h1, h2, h3 { font-weight: 500; line-height: 1.18; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 4.1rem); letter-spacing: -0.012em; }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.6rem); letter-spacing: -0.008em; }
h3 { font-size: 1.12rem; }

.rotulo {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ciano);
  margin: 0 0 14px;
}
.lead { color: var(--texto-suave); font-size: 1.1rem; max-width: 46em; margin: 0 0 8px; }

/* ———— HERO ———— */
.hero {
  min-height: min(92svh, 900px);
  display: grid;
  align-items: center;
  padding: 0;
  overflow: clip;
  /* O herói NÃO forma um contexto de empilhamento: o fundo (z 0), o palco do
     Charlie (z 1, fixo na página), a entidade estática e o texto (z 2–3) se
     empilham no mesmo nível — é isso que põe o Charlie ENTRE o fundo e o texto. */
  z-index: auto;
  isolation: auto;
}
.hero-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 70% 40%, var(--navy-3), var(--navy) 70%);
}
.hero-fundo .cena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  opacity: 0;
  transition: opacity 1.8s ease;
  filter: saturate(1.06) brightness(0.96);
}
.hero-fundo .cena.ativa { opacity: 1; }
.hero-vinheta {
  position: absolute;
  inset: 0;
  background:
    /* O halo do Charlie: a cena atrás dele escurece, e a entidade se lê sobre ela. */
    radial-gradient(ellipse 34% 74% at 76% 46%, rgba(13, 27, 42, 0.34) 0%, rgba(13, 27, 42, 0.18) 55%, rgba(13, 27, 42, 0) 100%),
    /* O véu do TEXTO: escurece onde o texto está (a coluna da esquerda, no meio do herói), e só ali — o resto da cena fica à vista. */
    radial-gradient(ellipse 58% 64% at 20% 54%, rgba(13, 27, 42, 0.72) 0%, rgba(13, 27, 42, 0.5) 48%, rgba(13, 27, 42, 0) 100%),
    linear-gradient(90deg, rgba(13, 27, 42, 0.66) 0%, rgba(13, 27, 42, 0.46) 24%, rgba(13, 27, 42, 0.2) 50%, rgba(13, 27, 42, 0.04) 76%, rgba(13, 27, 42, 0) 100%),
    linear-gradient(0deg, rgba(13, 27, 42, 0.96) 0%, rgba(13, 27, 42, 0) 20%),
    linear-gradient(180deg, rgba(13, 27, 42, 0.4) 0%, rgba(13, 27, 42, 0) 18%);
}
.hero-conteudo {
  position: relative;
  z-index: 3;
  padding: clamp(72px, 12vh, 128px) var(--alinhamento) clamp(88px, 13vh, 140px);
  display: grid;
  gap: 14px;
  justify-items: start;
}
.hero-conteudo > * { max-width: min(36em, 100%); }
/* O título não passa da metade esquerda da janela: a metade direita é do Charlie. */
.hero-conteudo h1 {
  margin: 0;
  text-wrap: balance;
  max-width: min(13.4em, 100%);
  /* A promessa fala com a imagem, e não por cima dela: menor, mais leve e mais justa que um título de seção. */
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 28px rgba(13, 27, 42, 0.5);
}
.hero p.sub { color: var(--texto); opacity: 0.92; font-size: clamp(1rem, 1.5vw, 1.18rem); margin: 2px 0 6px; max-width: 30em; text-shadow: 0 1px 18px rgba(13, 27, 42, 0.55); }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.chamada {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  border: 1px solid var(--accent);
}
.chamada:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.chamada.secundaria { background: rgba(13, 27, 42, 0.4); color: var(--texto); border-color: var(--borda-forte); backdrop-filter: blur(6px); }
.chamada.secundaria:hover { border-color: var(--accent-claro); background: rgba(13, 27, 42, 0.62); }

.hero-legenda {
  position: absolute;
  z-index: 3;
  left: var(--alinhamento);
  bottom: 30px;
  margin: 0;
  height: 1.4em;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.hero-legenda span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transition: opacity 0.9s ease; }
.hero-legenda span::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ciano); vertical-align: middle; margin-right: 12px; }
.hero-legenda span.ativa { opacity: 1; }

/*
 * A entidade estática: o que a página mostra enquanto — ou sem — o palco 3D.
 *
 * Ela fica EXATAMENTE onde o palco a põe: o tamanho, a posição da base do pescoço e
 * a altura saem da POSE do herói (as mesmas frações da janela de presenca.ts — um teste
 * as confere), e as constantes são as da imagem (1095 x 1050 px, a base do pescoço
 * em (555, 570), 242,4 px por unidade do modelo; a cena tem 4,95 de altura). Assim a
 * troca da imagem pelo 3D não tem salto, em qualquer janela. lvh é a altura do
 * palco; vh é a reserva de quem não o conhece.
 */
.hero-entidade {
  --pose-x: 0.76;
  --pose-y: 0.6;
  --pose-altura: 1;
  position: absolute;
  z-index: 2;
  width: calc(var(--pose-altura) * 91.259vh);
  left: calc(var(--pose-x) * 100vw - var(--pose-altura) * 46.255vh);
  top: calc(var(--pose-y) * 100vh - var(--pose-altura) * 47.505vh - var(--cabecalho-de-reserva));
  width: calc(var(--pose-altura) * 91.259lvh);
  left: calc(var(--pose-x) * 100vw - var(--pose-altura) * 46.255lvh);
  top: calc(var(--pose-y) * 100lvh - var(--pose-altura) * 47.505lvh - var(--cabecalho-de-reserva));
  transform: translateY(calc(var(--cabecalho-de-reserva) - var(--altura-do-cabecalho)));
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  transition: opacity 0.9s ease;
}
.hero-entidade img { display: block; width: 100%; height: auto; }
/* As poses do herói por faixa de largura (as de presenca.ts). */
@media (max-width: 1279px) { .hero-entidade { --pose-x: 0.86; --pose-y: 0.63; --pose-altura: 0.78; } }
@media (max-width: 1023px) { .hero-entidade { --pose-x: 0.78; --pose-y: 0.74; --pose-altura: 0.66; } }
@media (max-width: 639px) { .hero-entidade { --pose-x: 0.74; --pose-y: 0.93; --pose-altura: 0.62; } }
/* Com o palco no ar a imagem sai — devagar, e depois de uma pausa: a entidade leva ~2,6 s para se montar. */
body.palco-ativo .hero-entidade { opacity: 0; transition: opacity 1.8s ease 0.9s; }

@media (max-width: 899px) {
  .hero { min-height: min(94svh, 760px); align-items: start; }
  .hero-conteudo { padding-top: 56px; padding-bottom: 150px; }
  .hero-vinheta {
    background:
      linear-gradient(180deg, rgba(13, 27, 42, 0.8) 0%, rgba(13, 27, 42, 0.64) 46%, rgba(13, 27, 42, 0.18) 74%, rgba(13, 27, 42, 0.78) 100%);
  }
  .hero-fundo .cena { object-position: 70% 50%; }
  .hero-legenda { bottom: 22px; }
}

/* ———— ABORDAGEM ———— */
.pilares {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pilares { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.pilar { border-top: 1px solid var(--borda-forte); padding-top: 22px; }
.pilar-indice, .fase-indice, .cartao-letra {
  font-family: "JetBrains Mono", monospace;
  color: var(--ciano);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
}
.pilar h3 { font-size: 1.35rem; margin: 10px 0 8px; }
.pilar p { color: var(--texto-suave); margin: 0; font-size: 0.98rem; }

/* ———— JORNADA ———— */
.fases { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 900px) { .fases { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.fase {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 28px 26px 26px;
  background: linear-gradient(180deg, rgba(26, 48, 80, 0.55), rgba(18, 35, 55, 0.7));
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.fase::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ciano));
  opacity: 0.85;
}
.fase[data-fase="grow"]::before { background: linear-gradient(90deg, var(--ciano), var(--accent-claro)); }
.fase[data-fase="transform"]::before { background: linear-gradient(90deg, var(--accent-claro), #c3a8ff); }
.fase h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 8px 0 2px; }
.fase-sub { color: var(--accent-claro); font-weight: 400; margin: 0 0 12px; }
.fase p { color: var(--texto-suave); margin: 0 0 14px; }
.fase ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fase li { color: var(--texto); font-size: 0.95rem; padding-left: 20px; position: relative; opacity: 0.92; }
.fase li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--ciano); }

/* ———— CAPACIDADES ———— */
.cartoes { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 640px) { .cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cartoes { grid-template-columns: repeat(4, 1fr); } }
.cartao {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 22px 20px 20px;
  background: var(--navy-2);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.cartao:hover { border-color: var(--accent-claro); transform: translateY(-2px); }
.cartao h3 { font-size: 1.02rem; margin: 22px 0 8px; padding-right: 8px; }
.cartao p { color: var(--texto-suave); font-size: 0.92rem; margin: 0; }
.cartao-letra { position: absolute; top: 16px; left: 20px; font-size: 0.72rem; opacity: 0.9; }
/* O apoio LIMITADO (jurídico e contábil): mesma grade, outro traço — o limite é visível. */
.cartao[data-categoria="I"], .cartao[data-categoria="J"] {
  background: transparent;
  border-style: dashed;
  border-color: var(--borda-forte);
}
@media (min-width: 1040px) {
  .cartao[data-categoria="I"], .cartao[data-categoria="J"] { grid-column: span 2; }
}
p.ressalva { color: var(--texto-suave); font-size: 0.9rem; margin-top: 24px; max-width: 52em; }

/* ———— CHARLIE / CHAT ———— */
.chat {
  border: 1px solid var(--borda-forte);
  border-radius: 18px;
  background: rgba(18, 35, 55, 0.94);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin-top: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.chat-cabeca {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borda);
}
.orbe {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #bdf4fb 0%, var(--ciano) 22%, var(--accent) 62%, var(--navy-3) 100%);
  box-shadow: 0 0 22px rgba(53, 208, 224, 0.28);
  animation: orbe 4.6s ease-in-out infinite;
}
.orbe::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(53, 208, 224, 0.32);
  opacity: 0.6;
}
@keyframes orbe {
  0%, 100% { box-shadow: 0 0 18px rgba(53, 208, 224, 0.22); transform: scale(1); }
  50% { box-shadow: 0 0 30px rgba(53, 208, 224, 0.42); transform: scale(1.04); }
}
.chat[data-estado="pensando"] .orbe { animation-duration: 1.4s; }
.chat-identidade { display: grid; line-height: 1.25; }
.chat-nome {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ciano);
}
.chat-papel { font-size: 0.8rem; color: var(--texto-suave); }
.chat-aviso {
  margin: 0;
  padding: 10px 18px;
  font-size: 0.82rem;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
  background: rgba(13, 27, 42, 0.35);
}
.chat-mensagens {
  min-height: 160px;
  max-height: 440px;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mensagem {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.96rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mensagem.visitante { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.mensagem.charlie { align-self: flex-start; background: var(--navy-3); border-bottom-left-radius: 4px; }
.mensagem.nota { color: var(--texto-suave); font-style: italic; }
/* Charlie pensando: três pontos que pulsam; sem movimento, ficam parados. */
.mensagem.pensando { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.mensagem.pensando span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--texto-suave);
  animation: pulsar 1.2s ease-in-out infinite;
}
.mensagem.pensando span:nth-child(2) { animation-delay: 0.15s; }
.mensagem.pensando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulsar {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.chat-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
button.sugestao {
  font-weight: 400;
  font-size: 0.85rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  border-color: var(--borda-forte);
  color: var(--texto);
}
button.sugestao:hover { border-color: var(--ciano); color: var(--ciano); }
.chat-controles {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--borda);
}
.chat-controles input {
  flex: 1;
  min-width: 0;
  background: var(--navy);
  border: 1px solid var(--borda);
  border-radius: 10px;
  color: var(--texto);
  padding: 11px 14px;
  font: inherit;
  font-size: 0.96rem;
}
/* Os links dentro de TEXTO corrido (o aviso do chat e o do resumo) se distinguem pelo sublinhado, e não só pela cor (WCAG 1.4.1), e a cor tem contraste de sobra sobre o fundo do painel. */
.chat-aviso a, .oferta-aviso a { color: #8fb0ff; text-decoration: underline; text-underline-offset: 2px; }
.chat-aviso a:hover, .oferta-aviso a:hover { color: #b7cdff; }
.chat-estado { padding: 0 20px 12px; margin: 0; color: var(--texto-suave); font-size: 0.85rem; min-height: 1.4em; }
.chat-estado.erro { color: #e09a9a; }

/* A OFERTA DO RESUMO: a pergunta, os dois botões, e — só depois do sim — a explicação e o e-mail. */
.chat-oferta {
  margin: 0 14px 14px;
  padding: 16px 18px;
  border: 1px solid rgba(53, 208, 224, 0.34);
  border-radius: 14px;
  background: rgba(53, 208, 224, 0.06);
  display: grid;
  gap: 12px;
}
.oferta-pergunta { margin: 0; font-weight: 400; color: var(--texto); }
.oferta-pergunta:focus { outline: none; }
.oferta-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.chat-oferta, .oferta-form, .oferta-form label { min-width: 0; }
.oferta-form { display: grid; gap: 12px; }
.oferta-titulo { margin: 0; font-weight: 500; font-size: 0.92rem; }
.oferta-explicacao { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.oferta-explicacao li { position: relative; padding-left: 22px; color: var(--texto-suave); font-size: 0.9rem; }
.oferta-explicacao li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 5px; border-left: 2px solid var(--ciano); border-bottom: 2px solid var(--ciano); transform: rotate(-45deg); }
.oferta-form label { display: grid; gap: 5px; font-size: 0.86rem; color: var(--texto-suave); }
.oferta-form input {
  width: 100%;
  min-width: 0;
  background: var(--navy);
  border: 1px solid var(--borda);
  border-radius: 10px;
  color: var(--texto);
  padding: 10px 13px;
  font: inherit;
  font-size: 0.95rem;
}
.oferta-form input[aria-invalid="true"] { border-color: #c96a6a; }
.oferta-aviso { margin: 0; font-size: 0.8rem; color: var(--texto-suave); }
.oferta-estado { margin: 0; font-size: 0.88rem; min-height: 1.3em; }
.oferta-estado.erro { color: #e09a9a; }

button, .botao {
  font: inherit;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--texto);
  background: var(--navy-3);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
}
button:hover { border-color: var(--accent-claro); }
button.primario { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primario:hover { background: var(--accent-hover); }
button:disabled { opacity: 0.55; cursor: default; }
button.falando { border-color: var(--ciano); color: var(--ciano); }

/* ———— FORMULÁRIO ———— */
/* minmax(0, 1fr): a coluna cabe na janela mesmo onde o campo, de largura intrínseca, não cabe (320 px) — sem rolagem horizontal. */
form.contato { max-width: 620px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
form.contato label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 0.92rem; color: var(--texto-suave); }
form.contato input, form.contato textarea {
  background: var(--navy-2);
  border: 1px solid var(--borda);
  border-radius: 10px;
  color: var(--texto);
  padding: 11px 14px;
  font: inherit;
  font-size: 0.96rem;
}
form.contato textarea { min-height: 140px; resize: vertical; }
form.contato input:invalid:not(:placeholder-shown),
form.contato textarea:invalid:not(:placeholder-shown),
form.contato [aria-invalid="true"] { border-color: #c96a6a; }
.form-estado { font-size: 0.92rem; min-height: 1.4em; }
.form-estado.sucesso { color: #7fd6a2; }
.form-estado.erro { color: #e09a9a; }

/* ———— LEGAL ———— */
/* overflow-wrap: «(Datenschutzerklärung)» (390 px) e o e-mail do Impressum (360 px) são palavras só: sem quebrar, empurram a página para os lados. */
.pagina-legal { max-width: 760px; margin: 0 auto; overflow-wrap: anywhere; }
.pagina-legal .nota { color: var(--texto-suave); font-size: 0.9rem; font-style: italic; }
.pagina-legal h2 { font-size: 1.15rem; margin-top: 2em; }
.pagina-legal p { color: var(--texto-suave); }

/* ———— RODAPÉ ———— */
footer.rodape {
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 1px solid var(--borda);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  color: var(--texto-suave);
  font-size: 0.88rem;
}
footer.rodape nav { display: flex; gap: 18px; flex-wrap: wrap; }
.rodape-imagens { margin-left: auto; font-size: 0.8rem; opacity: 0.8; }