/* ==========================================================================
   GTPLAN — Núcleo compartilhado
   Tokens, fonte e os dois componentes que toda página carrega: o chat e a
   barra de cookies. As páginas do site carregam este arquivo antes do
   style.css; as landing pages em HTML (CanvasLayout) carregam só ele.
   Por isso aqui só entram :root e seletores começando por .chat-barra ou
   .cookie-bar: uma regra genérica vazaria para dentro do HTML do marketing
   (tests/nucleo.test.ts).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Marca */
  --navy-900: #000b18;
  --navy-800: #001326;
  --navy-700: #001d3b;
  --navy-600: #05294f;
  --navy-500: #0d3a68;
  --cyan-600: #1f6e93;
  --cyan-500: #40aadb;
  --cyan-400: #6ec1e4;
  --cyan-300: #a5dcf2;
  --cyan-100: #e6f5fc;
  --blue-700: #0c4da2;

  /* Neutros */
  --ink: #0b1a2b;
  --ink-soft: #33455c;
  --muted: #5f7288;
  --muted-light: #617385;
  --line: #e2e9f1;
  --line-soft: #eef3f8;
  --bg: #ffffff;
  --bg-soft: #f5f9fc;
  --bg-tint: #eff6fb;

  /* Semânticos */
  --ok: #12a37a;
  --warn: #e5a13a;

  /* Tipografia */
  /* Familia unica: Inter (Google Fonts, eixo variavel 400..700 + opsz).
     Os dois tokens continuam existindo porque marcam PAPEIS distintos no
     codigo (corpo x titulos/UI) e permitem voltar a duas familias mudando
     uma linha; hoje ambos apontam para a mesma familia.
     Medido antes da troca: a x-height da Inter e +2% sobre a DM Sans e
     identica a da IBM Plex Sans, entao a escala nao precisou compensar. Em
     largura a Inter e 6,4% mais estreita que a DM Sans — e essa folga que
     dispensa os truques de encolher titulo para caber em uma linha. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --------------------------------------------------------------------
     ESCALA TIPOGRÁFICA — mexa aqui para ajustar os tamanhos de TODO o site.
     • Para aumentar/diminuir TUDO de uma vez: mude só --type-scale
       (1 = padrão · 1.1 = 10% maior · 0.9 = 10% menor).
     • Para ajustar UM nível só (ex.: subtítulos): edite a linha --fs-* dele.
     Cada clamp() é: clamp(MÍNIMO no celular, fluido, MÁXIMO no desktop).
     -------------------------------------------------------------------- */
  --type-scale: 1;
  /* --fs-hero e --fs-h1 sao DELIBERADAMENTE iguais: um H1 tem um tamanho so no
     site inteiro. Os dois tokens continuam separados para que dar um pico ao
     hero da home volte a ser uma linha, nao uma cacada por overrides.
     O teto de 2,625rem (42px) e a media das quatro alturas que conviviam antes
     (48px padrao, 43px home, 36px /sobre, 41px /solucoes): unifica sem que
     nenhuma pagina de um salto. */
  --fs-hero: calc(var(--type-scale) * clamp(1.75rem, 0.9rem + 2vw, 2.625rem));  /* título do hero (home) */
  --fs-h1:   calc(var(--type-scale) * clamp(1.75rem, 0.9rem + 2vw, 2.625rem));  /* H1 das páginas internas */
  /* O teto era 2rem (32px) contra 48px do H1: um passo de 1,5 que o olho lia
     como "quase o mesmo tamanho". No celular o piso de 20px ficava a 4px do
     corpo do texto. Subindo os dois, o título de seção volta a abrir bloco. */
  --fs-h2:   calc(var(--type-scale) * clamp(1.4rem, 0.95rem + 1.6vw, 2.1rem)); /* títulos de seção */
  --fs-h3:   calc(var(--type-scale) * clamp(1.25rem, 1rem + 0.9vw, 1.6rem));    /* subtítulos / cards */
  --fs-h4:   calc(var(--type-scale) * clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem));/* títulos menores */
  --fs-lead: calc(var(--type-scale) * clamp(1rem, 0.95rem + 0.25vw, 1.1rem));  /* parágrafo de destaque */
  --fs-body: calc(var(--type-scale) * 1rem);                                    /* texto corrido */
  --fs-sm:   calc(var(--type-scale) * 0.9375rem);                               /* texto pequeno */
  --fs-xs:   calc(var(--type-scale) * 0.8125rem);                               /* rótulos / legendas */
  --fs-2xs:  calc(var(--type-scale) * 0.75rem);                                  /* PISO legível — nada abaixo disto */

  /* Numeros em destaque. Ficavam como clamp() solto espalhado pelo arquivo;
     nomeados aqui, entram na mesma escala que todo o resto e obedecem ao
     --type-scale. Sao dois degraus INTENCIONAIS: o grande para faixas de
     resultado com poucos itens, o menor para grades densas de 4 colunas. */
  --fs-display:    calc(var(--type-scale) * clamp(2.4rem, 1.5rem + 3vw, 3.75rem)); /* numero grande */
  --fs-display-sm: calc(var(--type-scale) * clamp(2rem, 1.3rem + 2.2vw, 2.85rem)); /* numero em grade densa */
  --fs-stat:       calc(var(--type-scale) * clamp(1.35rem, 1rem + 1.5vw, 2.2rem)); /* contador de faixa */

  /* Espaço / forma */
  --wrap: 1200px;
  --wrap-narrow: 860px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --section-y: clamp(4rem, 2rem + 7vw, 7.5rem);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(0, 29, 59, 0.06), 0 2px 8px rgba(0, 29, 59, 0.04);
  --sh: 0 2px 6px rgba(0, 29, 59, 0.06), 0 12px 30px -8px rgba(0, 29, 59, 0.12);
  --sh-lg: 0 4px 12px rgba(0, 29, 59, 0.07), 0 32px 64px -20px rgba(0, 29, 59, 0.24);
  --sh-glow: 0 18px 48px -14px rgba(64, 170, 219, 0.55);
  /* Elevacao de hover para card que JA tem borda de 1px. Borda + sombra de 30px
     de blur (o --sh) e o "ghost card": dois sinais de elevacao competindo.
     Aqui o blur e menor e o alpha mais baixo — o lift continua, o halo sai. */
  --sh-card: 0 1px 3px rgba(0, 29, 59, 0.05), 0 8px 18px -10px rgba(0, 29, 59, 0.10);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Fonte ---------- */
/* Inter hospedada no site (assets/fonts/, SIL OFL 1.1), mesmos arquivos
   variaveis (eixos opsz e wght) que o Google Fonts servia. Tirar o CSS externo
   do caminho critico valia ~0,9 s de bloqueio de renderizacao no Lighthouse
   mobile, e a home faz preload do subconjunto latino no <head>. O latin-ext so
   baixa se aparecer um caractere daquela faixa. URL relativa a esta folha para
   funcionar igual em https:// e em file://. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Base do chat e da barra de cookies ----------
   No site, estas regras repetem o que o reset do style.css já dá, com os mesmos
   valores. Na landing page em HTML o style.css não carrega: sem elas a barra do
   chat apareceria sempre (display: flex vence o [hidden] do navegador), o
   box-sizing desalinharia a barra da janela do Typebot e o texto cairia na fonte
   padrão do navegador. O reset de button fica de fora de propósito: com escopo,
   a especificidade subiria e apagaria a borda e o fundo de .chat-barra__botao. */
.chat-barra,
.chat-barra *,
.chat-barra *::before,
.chat-barra *::after,
.cookie-bar,
.cookie-bar *,
.cookie-bar *::before,
.cookie-bar *::after { box-sizing: border-box; }

.chat-barra[hidden],
.chat-barra [hidden],
.cookie-bar [hidden] { display: none !important; }

.chat-barra,
.cookie-bar {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.chat-barra :focus-visible,
.cookie-bar :focus-visible {
  outline: 3px solid var(--navy-700);
  outline-offset: 2px;
}
/* O anel de foco global do style.css traz border-radius: 4px e agora vem depois
   deste arquivo; os botões mantêm o próprio raio. */
.chat-barra__icone:focus-visible,
.chat-barra__botao:focus-visible { border-radius: var(--r-sm); }

/* ==========================================================================
   Chat — barra de controles
   ========================================================================== */
/* O embed do Typebot não tem chrome de fechar nem de recomeçar: aberta, a bolha
   só vira um chevron discreto, e a conversa não tem como voltar ao início. A
   janela do embed vive num shadow root — dá para ler, não para vestir —, então
   a barra é HTML nosso (src/components/site/ChatTypebot.astro) empilhado logo
   acima dela.

   Empilhar exige saber onde a janela termina, e para isso nós ditamos o tamanho
   dela: as medidas abaixo vão ao `initBubble` em public/assets/js/chat.js como
   theme.chatWindow.maxWidth/maxHeight. Custom properties atravessam o shadow
   boundary, então a janela obedece a estes mesmos valores e a conta fecha dos
   dois lados. Trocar um nome aqui sem trocar lá descola a barra; a paridade
   está coberta em tests/dist/chat.test.ts.

   Preferimos isto a mirar as classes internas do bundle, que são minificadas e
   mudam a cada versão do @typebot.io/js. */
:root {
  --chat-largura: 400px;
  /* distância da janela até a borda inferior: 20px do container + 48px do botão
     médio + 12px de gap, os três defaults que o chat.js passa explícitos */
  --chat-recuo: 80px;
  --chat-barra-altura: 56px;
  /* O header encaixa SOBRE o topo da janela em vez de flutuar acima dela. Os 8px
     são o raio do `rounded-lg` do embed: cobri-los é o que faz as duas peças
     lerem como um painel só, sem duas frestas de página nos cantos de cima. */
  --chat-barra-encaixe: 8px;
  /* a janela cede a faixa do header (menos o encaixe) em vez de ficar sob ele:
     assim o header nunca cobre mensagem, e num viewport curto quem encolhe é a
     janela, não o header */
  --chat-altura: min(
    704px,
    calc(100dvh - var(--chat-recuo) - var(--chat-barra-altura) + var(--chat-barra-encaixe))
  );
}
.chat-barra {
  position: fixed;
  right: 20px;
  bottom: calc(var(--chat-recuo) + var(--chat-altura) - var(--chat-barra-encaixe));
  width: var(--chat-largura);
  max-width: 100vw;
  height: var(--chat-barra-altura);
  /* o container do embed é z-index 424242; o header tem de vir por cima */
  z-index: 424243;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* só o topo arredonda: a base é reta porque encaixa sobre a janela */
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--navy-700);
  padding: 0 0.5rem 0 0.75rem;
}
.chat-barra__identidade {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
/* a marca já desenha os próprios cantos arredondados; forçar um círculo cortaria o "gt" */
.chat-barra__avatar { width: 32px; height: 32px; flex: none; }
.chat-barra__textos { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.chat-barra__nome {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-barra__estado {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.2;
}
.chat-barra__estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.chat-barra__acoes { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.chat-barra__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  /* sem texto: o rótulo acessível vem do aria-label, e o title dá a dica no hover */
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chat-barra__icone:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.chat-barra__confirmacao {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}
.chat-barra__pergunta {
  margin-right: auto;
  font-size: var(--fs-2xs);
  font-weight: 650;
  color: #fff;
}
.chat-barra__botao {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 650;
  line-height: 1;
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chat-barra__botao:hover { background: rgba(255, 255, 255, 0.14); }
.chat-barra__botao--forte { background: #fff; border-color: #fff; color: var(--navy-700); }
.chat-barra__botao--forte:hover { background: var(--cyan-100); color: var(--navy-700); }
@media (max-width: 639.98px) {
  /* abaixo do breakpoint do Tailwind o embed troca sm:right-0 por -right-5 com
     w-screen, colando a janela na borda direita; a barra acompanha para as duas
     continuarem alinhadas */
  .chat-barra {
    right: 0;
    width: min(var(--chat-largura), 100vw);
  }
}

/* ==========================================================================
   Cookies
   ========================================================================== */
/* Barra inferior de largura total: cobre apenas uma faixa fina, nunca os CTAs. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px -16px rgba(0, 29, 59, 0.35);
  padding: 1rem var(--gutter);
  /* espaço à direita para não passar sob o botão do WhatsApp */
  padding-right: calc(var(--gutter) + 4.5rem);
  /* visibility, e nao so transform: transform desloca o pixel mas mantem os tres
     botoes no tab order e na arvore de acessibilidade — inclusive para quem ja
     decidiu e nunca mais vera a barra. visibility ja esta na lista branca de
     transition-property do bloco de reduced-motion, entao a saida continua suave. */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform 0.4s var(--ease), visibility 0.4s var(--ease);
}
.cookie-bar.is-visible { visibility: visible; transform: none; }
.cookie-bar p { font-size: var(--fs-xs); color: var(--muted); margin: 0; max-width: 46rem; }
.cookie-bar :is(h4, h5) {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

.cookie-bar :is(h4, h5) {
  /* line-height e letter-spacing vinham das regras de h4 do style.css */
  line-height: 1.14;
  letter-spacing: -0.012em;
}
/* O link do texto vinha da regra de a do style.css. */
.cookie-bar p a { color: var(--cyan-600); text-decoration: none; transition: color 0.2s var(--ease); }
.cookie-bar p a:hover { color: var(--navy-700); }
.cookie-bar p a:focus-visible { border-radius: 4px; }

/* flex: none impedia a fileira de encolher: com justify-content: center no
   .cookie-bar, os 58px de excesso em 375px eram centralizados e cortavam 10px
   do botao "Aceitar" na borda esquerda. "0 1 auto" deixa encolher, e o
   flex-wrap: wrap quebra os botoes em duas linhas. */
.cookie-bar__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  flex: 0 1 auto;
}

/* Botões da barra. Eram .btn .btn--sm com as variantes primary, reject e ghost,
   que ficam no style.css porque o site inteiro usa e que não carregam na landing
   page em HTML. Mesma aparência, com seletores próprios. */
.cookie-bar__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: -0.005em;
  padding: 0.62rem 1.15rem;
  /* piso de alvo de toque: 44px */
  min-height: 2.75rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.cookie-bar__botao:hover { transform: translateY(-2px); }
.cookie-bar__botao:active { transform: translateY(0); }
.cookie-bar__botao:focus-visible { border-radius: var(--r-pill); }
.cookie-bar__botao--aceitar {
  /* gradiente escurecido: texto branco passa em WCAG AA nas duas pontas
     (#1F6E93 = 5,66:1 · #16536F = 8,40:1) */
  background: linear-gradient(135deg, #1f6e93, #16536f);
  color: #fff;
  box-shadow: var(--sh-glow);
}
.cookie-bar__botao--aceitar:hover { color: #fff; box-shadow: 0 22px 54px -12px rgba(64, 170, 219, 0.7); }
/* "Recusar" com o mesmo peso visual de "Aceitar" (ANPD) */
.cookie-bar__botao--recusar { background: #fff; color: var(--navy-700); border-color: var(--navy-700); }
.cookie-bar__botao--recusar:hover { background: var(--bg-tint); color: var(--navy-700); }
.cookie-bar__botao--config { border-color: var(--line); color: var(--navy-700); background: #fff; }
.cookie-bar__botao--config:hover { border-color: var(--cyan-500); color: var(--cyan-600); box-shadow: var(--sh-sm); }
@media (max-width: 42rem) {
  .cookie-bar__botao { white-space: normal; text-wrap: balance; }
}

@media (prefers-reduced-motion: reduce) {
  /* No site, o bloco global do style.css já faz isto com os mesmos valores; na
     landing page em HTML ele não carrega. Some o deslocamento, fica a resposta
     de cor, sombra e contorno. */
  .chat-barra,
  .chat-barra *,
  .cookie-bar,
  .cookie-bar * {
    transition-property: opacity, color, background-color, border-color,
      box-shadow, outline-color, visibility !important;
    transition-duration: 0.16s !important;
  }
  .cookie-bar__botao:hover { transform: none; }
}