/* ============================================================================
   site.css — CSS autoral compartilhado entre as páginas do site
   ----------------------------------------------------------------------------
   Extraído do <style> inline de index.html para ser reaproveitado pelas páginas
   institucionais (cases, sobre, parceiros, carreira, investidores, contato)
   sem duplicar ~1000 linhas em cada arquivo.

   ORDEM DE CARGA — obrigatória:
     fonts.css → styles.css (build) → site.css → responsive.css

   ARMADILHA DO BUILD: o preflight do Tailwind traz
     *,:after,:before,::backdrop { border; margin:0; padding:0 }
   com o hack :not(#\#) repetido 16x — especificidade (16,0,0). Qualquer
   padding, margin, border ou color declarado aqui sem !important é
   silenciosamente descartado. As utilities usam o mesmo hack 8x (8,1,0).
   ========================================================================== */

/* ============================================================================
   TOKENS DE SUPERFÍCIE — o card padrão do site
   ----------------------------------------------------------------------------
   Fundo e borda de TODO card: caixas de conteúdo, painéis do menu, banner de
   cookies, cards de case, de cultura, de ferramenta, do diagnóstico. Um valor
   sólido, e não branco translúcido: o card fica igual em qualquer fundo, e
   antes disso o mesmo componente mudava de tom conforme a seção.

   ATENÇÃO — ESTE BLOCO EXISTE EM DOIS ARQUIVOS. As páginas de marketing
   carregam site.css; o ambiente /ferramentas/ carrega ferramentas.css e NÃO
   carrega este arquivo. Mudou aqui, mude lá também (procure por --card-bg).
   Não vale criar um terceiro arquivo só para isso: seria mais uma requisição
   bloqueante em toda página, e o build_rules pede o contrário.

   NÃO se aplica a campo de formulário, pílula, tag e botão — essas peças têm
   os próprios tokens (ver css/form.css e o bloco de PILLS abaixo).
   ========================================================================== */

:root {
  --card-bg: #1c1c1c;
  --card-borda: #2b2b2b;
  /* Usado no hover dos cards que reagem ao mouse. */
  --card-bg-hover: #232323;
  --card-borda-hover: #3a3a3a;
}


/* Tailwind não compilou font-bold no build; Red Hat Text 700 está carregado */
.font-bold {
  font-weight: 700;
}
/* Rodapé: última coluna (Baixe o app) com o dobro da largura no desktop */
@media (min-width: 768px) {
  .footer-top-grid {
    grid-template-columns: 1fr 1fr 1fr 2fr !important;
  }
}
@keyframes clients-scroll {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-33.333%);
  }
}
.clients-mask {
  overflow: hidden;
}
.clients-track {
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: 18s linear infinite clients-scroll;
  display: flex;
}
.clients-track:hover {
  animation-play-state: paused;
}
.clients-item {
  color: #fff;
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity 0.2s;
  transform: scale(0.9);
}
.clients-item:hover {
  opacity: 1;
}
.tst-footer {
  min-height: 50px;
}
.tst-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.tst-brand {
  flex-shrink: 0;
}
.tst-brand svg {
  display: block;
  width: auto;
  height: 28px;
  opacity: 0.55;
  overflow: visible;
  transition: opacity 0.2s;
  will-change: opacity;
}
.tst-brand:hover svg {
  opacity: 1;
}
/* Optical sizing: normalize by visual weight (~area), not raw height.
   Wide wordmarks get less height; the compact emblem gets more. */
.tst-logos .tst-brand:nth-child(1) svg { height: 30px; } /* Valor */
.tst-logos .tst-brand:nth-child(2) svg { height: 22px; } /* O Globo */
.tst-logos .tst-brand:nth-child(3) svg { height: 26px; } /* terra */
.tst-logos .tst-brand:nth-child(4) svg { height: 34px; } /* iG */
/* Social icons */
.social-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  color: #e6e6e6;
  transition: color 0.2s;
}
.social-ico:hover {
  color: #f4f4f4;
}
.social-ico svg {
  width: 18px !important;
  height: 18px !important;
}
/* ERP integrations: unified grid, larger squares, black bg, border, blue hover */
.erp-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.erp-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 168px;
  height: 168px;
  padding: 28px 24px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* Colapsa bordas adjacentes em uma única linha (grid unificado) */
  margin-right: -1px;
  margin-bottom: -1px;
  background: transparent;
  color: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}
/* Pill tab identificando o tipo de sistema (ERP / Frete / Pagamento) */
.erp-cell::before {
  content: attr(data-type);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  /* !important obrigatório: o preflight do build zera padding e border
     também em ::before/::after, com especificidade (16,0,0). Sem isso
     estas duas linhas são descartadas — era o que acontecia antes, e o
     selo vinha sem borda e sem respiro. */
  padding: 4px 10px !important;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
  /* Padrão de pill escura do site — ver bloco "PILLS" abaixo */
  background: #111;
  border: 1px solid #2b2b2b !important;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.erp-cell:hover {
  z-index: 1;
  background: #161ba9;
  border-color: #2327a1 !important;
}
.erp-cell:hover::before {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  /* !important para vencer o border da regra base, que agora o tem */
  border-color: rgba(255, 255, 255, 0.28) !important;
}
.erp-cell svg {
  display: block;
  width: auto !important;
  height: 26px !important;
  max-width: 100%;
}
.hero-aio {
  text-underline-offset: 4px;
  cursor: default;
  font-style: italic;
  text-decoration: underline dotted;
  position: relative;
}
#hero-aio-tooltip {
  pointer-events: none;
  z-index: 9999;
  -webkit-backdrop-filter: blur(8px);
  color: #f4f4f4;
  white-space: nowrap;
  opacity: 0;
  background: #ffffff14;
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  transition: opacity 0.15s;
  position: fixed;
  transform: translate(14px, -50%);
}
#hero-aio-tooltip.visible {
  opacity: 1;
}

/* ============ ILUSTRAÇÕES DOS CARDS DE PRODUTO ============
   Os SVGs de assets/svg/ são quadrados (600x600) e já trazem um fundo
   preto sólido próprio, idêntico ao #000 do card — por isso não há
   emenda visível entre a arte e o card.

   A .product-card-media padrão é 1252/832 (paisagem). Encaixar um
   quadrado ali exigiria cortar ~33% da altura, e a arte do CRM
   (conteúdo de y=85 a y=514) seria decepada em cima e embaixo. Então
   esta variante usa proporção 1:1 e object-fit: contain — nada é
   cortado nem distorcido.

   !important: .product-card-media vem do build com o hack :not(#\#) x8
   (especificidade 8,1,0) e venceria estas regras. */

.product-card-media--art {
  aspect-ratio: 1 / 1 !important;
  background: #1c1c1c !important;
}

/* ============ CARDS DO CARROSSEL DE PRODUTOS ============
   Superfície #1C1C1C com borda #2B2B2B. Vai aqui e não nas classes do
   HTML porque `bg-[#1C1C1C]` / `border-[#2B2B2B]` são classes arbitrárias
   que não existem no css/styles.css já compilado — e não há build para
   regerá-lo (ver build_rules.md §0).
   Especificidade (1,1,1) vence as utilitárias `bg-[#000000]` e
   `border-white/8`, que são (0,1,0), sem precisar de !important. O azul do
   hover continua valendo: `#produtos .group:hover` já vem com !important. */
#produtos .products-carousel > li {
  background-color: #1c1c1c;
  border-color: #2b2b2b;
}

.product-card-media--art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===================== CABEÇALHO =====================
   Tokens herdados das seções, para bater exatamente:
     cor de fundo .... #080808  (mesma de section.bg-[#080808])
     divisória ....... 1px solid rgba(255,255,255,0.05)
                       (mesma de border-b border-white/5)
   São duas divisórias: uma separando as duas linhas do próprio
   cabeçalho e outra fechando o cabeçalho contra o conteúdo.

   !important em padding/margin: o preflight do build zera ambos com
   especificidade (16,0,0). Ver a nota no topo de css/responsive.css. */

/* Compensa a altura do cabeçalho fixo ao pular para uma âncora — sem
   isto o topo da seção alvo para escondido atrás dele. O valor do mobile
   está em css/responsive.css, onde o cabeçalho é mais alto. */
html {
  /* Cabeçalho fixo = linha de news (43) + barra (90) + divisórias = 134px,
     medido. Os 150 deixam 16px de folga entre o cabeçalho e o início da seção
     ancorada. Se a altura da barra mudar, este valor muda junto — sem isso o
     título da seção fica escondido atrás do cabeçalho ao clicar numa âncora. */
  scroll-padding-top: 150px;
}

.site-header {
  background: #000000;
  /* Fixo após a rolagem. `sticky` em vez de `fixed` para o cabeçalho
     continuar ocupando espaço no fluxo — com `fixed` o hero subiria por
     baixo dele e seria preciso compensar com padding no <main>. */
  position: sticky;
  top: 0;
  z-index: 40;
}

.hdr-news-row,
.hdr-main-row {
  background: #000000;
  /* Fecha o cabeçalho contra o conteúdo com a mesma divisória que separa as
     seções da página (`border-b border-white/5` no build). */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Divisória entre as duas linhas do cabeçalho (news → barra principal), igual
   à que fecha a barra principal acima.
   !important: o preflight aplica `border: 0 solid` com (16,0,0). */
.hdr-news-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* --- Linha 1: news rotativo --- */
/* Linha 1 = frase à esquerda | utilitários à direita */
.hdr-news-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}

.hdr-news {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.2;
  /* mesma cor dos links do menu (.hdr-nav a) */
  color: #c9c9c9;
  text-align: left;
}

/* --- Utilitários com dropdown --- */
.hdr-util {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.hdr-util-item {
  position: relative;
}

/* Sem fundo e sem borda, como pedido. O preflight já zera ambos em
   <button>; o padding é que precisa de !important para sobreviver. */
.hdr-util-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px !important;
  background: transparent;
  border: 0;
  border-radius: 12px;
  /* !important nos dois: o preflight aplica
     `button { font: inherit; color: inherit }` com (4,0,0) e venceria
     estas regras — sem isso o botão herda 16px e a cor slate-900 do
     body, ficando azul-escuro e ilegível sobre o #080808. */
  font-size: 12px !important;
  line-height: 1;
  /* mesma cor dos links do menu (.hdr-nav a) */
  color: #c9c9c9 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}

.hdr-util-btn:hover,
.hdr-util-btn[aria-expanded="true"] {
  color: #fff !important;
}

/* A frase curta do aviso só entra no mobile — ver css/responsive.css, bloco
   6e. No desktop fica oculta. (A sigla de idioma saiu junto com o seletor de
   idioma, removido do cabeçalho.) */
.hdr-news-short {
  display: none;
}

.hdr-chev {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.hdr-util-btn[aria-expanded="true"] .hdr-chev {
  transform: rotate(180deg);
}

/* Painel: mesma pílula escura do restante do site (#111 / #2b2b2b) */
.hdr-util-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 200px;
  padding: 6px !important;
  background: var(--card-bg);
  border: 1px solid var(--card-borda) !important;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.hdr-util-menu[hidden] {
  display: none;
}

.hdr-util-menu a {
  display: block;
  padding: 9px 12px !important;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
  color: #e6e6e6 !important;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.hdr-util-menu a:hover {
  background: #1c1c1c;
  color: #fff !important;
}

.hdr-util-menu a.is-secondary {
  color: #8f8f8f !important;
}

.hdr-util-menu a[aria-current="true"] {
  color: #fff !important;
  background: #1c1c1c;
}

/* Itens ainda sem destino: mesma caixa do <a> do painel, mas inertes —
   sem href, sem hover e sem foco. A tag "Em breve" é quem explica o
   porquê, então o rótulo fica esmaecido em vez de parecer um link morto. */
.hdr-util-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
  color: #8f8f8f;
  white-space: nowrap;
  cursor: default;
}

.hdr-tag-soon {
  flex: none;
  padding: 2px 7px;
  border: 1px solid #2b2b2b;
  border-radius: 999px;
  background: #1c1c1c;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #a8a8a8;
}

.hdr-util-sep {
  height: 1px;
  margin: 6px 8px !important;
  background: rgba(255, 255, 255, 0.08);
}

/* Botão de inscrição do webinar. Segue o padrão de botão do site —
   12px de padding e ícone 14x14 — no azul da marca, para ler como CTA
   dentro de uma barra de aviso.
   !important em padding, border e color pelos motivos de sempre: o
   preflight zera padding/border e aplica `a { color: inherit }` com
   especificidade maior que a de uma regra de classe. */
.hdr-news-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  /* position + overflow ancoram e recortam o brilho do ::after */
  position: relative;
  overflow: hidden;
  margin-left: 4px !important;
  /* Mini botão: fora do padrão de 12px dos demais, de propósito —
     é um aviso secundário numa barra de 39px de altura. */
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 12px;
  background: #161ba9;
  color: #f4f4f4 !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s;
}

.hdr-news-cta:hover {
  background: #2228cc;
}

/* Brilho cíclico: uma faixa clara atravessa o botão e some.
   O ciclo de 5s passa 68% do tempo parado — a varredura em si dura
   ~1,6s. Num cabeçalho sempre visível, um pulso contínuo vira ruído;
   o intervalo longo chama atenção sem cansar.
   Anima só `transform`, que roda no compositor e não dispara layout. */
.hdr-news-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  transform: translateX(-130%);
  animation: news-cta-brilho 5s ease-in-out infinite;
}

@keyframes news-cta-brilho {
  0%,
  68% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

/* Sem animação para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .hdr-news-cta::after {
    animation: none;
  }
}

.hdr-news-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2228cc;
  box-shadow: 0 0 0 3px rgba(34, 40, 204, 0.18);
}



/* --- Linha 2: barra de navegação --- */
.hdr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 90px;
}

.hdr-col {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Menu à esquerda, colado no logo.

   Antes as duas laterais tinham `flex: 1 1 0` e dividiam o espaço livre em
   partes iguais, jogando o <nav> no centro exato. Agora a coluna do logo não
   cresce, o nav vem logo depois dela, e é a coluna dos botões que absorve
   toda a sobra — `margin-left: auto` empurra Login e CTA para a direita.

   O nav precisa de `flex: 0 1 auto`: com `1 1 0` ele voltaria a esticar e os
   itens se espalhariam em vez de ficarem agrupados junto ao logo. */
.hdr-col-a {
  flex: 0 0 auto;
  min-width: 0;
}

.hdr-col-b {
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto !important;
}

/* Distância do logo até a palavra "Recursos" = 56px, o dobro do que era.
   Ela é a soma de três parcelas, e só a terceira é ajustável aqui:
     16px  gap da barra          (mexer nele afasta também os botões da direita)
     12px  padding do link       (é a área de clique, não deve encolher)
     28px  esta margem
   !important porque o preflight do build zera margin com especificidade
   (16,0,0). */
.hdr-nav {
  flex: 0 1 auto;
  margin-left: 28px !important;
}

.hdr-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* logo.svg é um lockup horizontal de 135x32 (~4.2:1), branco e com fundo
   transparente. Fixa-se a ALTURA e deixa a largura livre, para a
   proporção nunca depender do espaço disponível na barra. */
.hdr-logo img {
  display: block;
  /* !important: o preflight aplica `img, video { height: auto }` com
     especificidade (4,0,1) e venceria esta regra — sem isso o logo
     renderiza no tamanho intrínseco (135x32) e mudar o valor aqui não
     surte efeito nenhum. */
  height: 28px !important;
  width: auto !important;
}

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.hdr-nav a {
  font-size: 14px;
  line-height: 1;
  /* !important: o preflight aplica `a { color: inherit }` com (4,0,1) */
  color: #c9c9c9 !important;
  white-space: nowrap;
  transition: color 0.15s;
}

.hdr-nav a:hover {
  color: #fff !important;
}

/* Barra inferior animada, preenchendo da esquerda para a direita.
   scaleX em vez de animar `width`: transform não dispara layout, então a
   animação roda no compositor e não causa reflow a cada frame.
   O padding de 12px precisa de !important — o preflight zera padding
   em <a> com especificidade maior que a de uma regra de classe. */
.hdr-nav a {
  position: relative;
  padding: 12px !important;
}

.hdr-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #161ba9;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hdr-nav a:hover::after,
.hdr-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Quem passou a separar os itens é o próprio padding; o gap antigo de
   22px somado a ele deixaria o menu largo demais e comprometeria a
   centralização em telas menores. */
.hdr-nav {
  gap: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hdr-nav a::after {
    transition: none;
  }
}

/* ============ BOTÕES DO CABEÇALHO ============ */

.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}

/* Login: sem fundo e sem borda, com ícone. !important em border e color
   porque o preflight zera `border` e aplica `a { color: inherit }` com
   especificidade maior. */
.hdr-btn-plain {
  gap: 8px;
  background: transparent;
  border: 0 !important;
  color: #c9c9c9 !important;
}

.hdr-btn-plain:hover {
  color: #fff !important;
}

.hdr-btn-brand {
  background: #161ba9;
  border: 1px solid #161ba9 !important;
  color: #f4f4f4 !important;
}

.hdr-btn-brand:hover {
  background: #2228cc;
  border-color: #2228cc !important;
}

/* Página de demonstração: ali o cabeçalho fica sobre o #161BA9 da marca, que é
   a MESMA cor do botão — o "Voltar para o site" desaparecia no fundo e lia como
   texto solto. Preto devolve o contorno do botão sem introduzir cor nova.
   O !important na borda é obrigatório: a regra base declara `border` com
   !important, e sem ele a borda continuaria azul em volta do preto. */
.pagina-demo .hdr-btn-brand {
  background: #000000;
  border-color: #000000 !important;
}

.pagina-demo .hdr-btn-brand:hover {
  background: #1a1a1a;
  border-color: #1a1a1a !important;
}

.hdr-btn-ico {
  flex: 0 0 auto;
}

/* Seta dos CTAs "Comece agora" (cabeçalho, hero e seção #cta).
   margin-left em vez de gap: os três botões vêm de origens diferentes
   (um é classe própria, dois são utilities do build). */
.cta-ico {
  flex: 0 0 auto;
  margin-left: 8px !important;
}

/* Seta ANTES do rótulo (movimento de volta, não de avanço). A margem precisa
   trocar de lado: com o margin-left padrão, a seta fica colada no texto e
   afastada da borda — o oposto do pretendido. */
.cta-ico--antes {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

/* O .btn-transparent desliza o ícone 3px para a DIREITA no hover — leitura de
   seta de avanço, que fica no fim do botão. Com o ícone à esquerda o mesmo
   deslize o empurraria contra o rótulo, fechando o respiro de 8px acima. */
.btn-transparent:hover .cta-ico--antes {
  transform: none;
}

/* ============ PADRÃO DE BOTÕES ============
   12px de padding e ícones de 14x14 em todas as famílias.
   !important porque isto atravessa três origens: o preflight (que zera
   padding), as utilities do build (caso dos dois CTAs do corpo) e as
   regras do build para .copilot-feat-item / .btn-transparent. */

.hdr-btn,
.hdr-btn-plain,
.hdr-util-btn,
.cta-primary,
.btn-transparent,
.copilot-feat-item,
.feature-tabs-nav--pills .feature-tab {
  padding: 12px !important;
}

/* Raio padrão dos botões: 12px em todas as famílias — aqui e nos demais
   arquivos (.ck-btn, .diag-btn, .ferr-btn, .ferr-menu-btn, .form__botao,
   .form-nav__voltar, .parceiro-contato__btn, .hdr-burger).
   Ficam de fora só os botões de ícone redondos — .carousel-btn e
   .ajd-pergunta__botao — que são círculos por desenho.
   !important pelo mesmo motivo do padding acima: o preflight zera o
   border-radius de <button> e as utilities do build competem no corpo. */
.hdr-btn,
.cta-primary,
.btn-transparent {
  border-radius: 12px !important;
}

/* O X do modal nasce com 7px no build (.copilot-side-modal__close em
   styles.css). Override aqui para não editar a saída minificada. */
.copilot-side-modal__close {
  border-radius: 12px !important;
}

.hdr-btn-ico,
.cta-ico,
.hdr-chev,
.feat-icon,
.feature-tabs-nav--pills .feature-tab-icon,
.carousel-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* ============ FAQ ABERTO — fundo do card de depoimento ============
   Reaproveita o gradiente de .tst-card--light. Como o fundo vira claro,
   todo o texto do item inverte junto.
   .faq-q é um <h3> e o build tem `h1..h6 { color:#f4f4f4 }` global, por
   isso o h3 precisa ser alvo explícito — herança não basta. */

.faq-item[open] {
  background: linear-gradient(
    158deg,
    #dfe4ff 0%,
    #e9e6fb 52%,
    #f3eefb 100%
  ) !important;
  border-color: rgba(10, 10, 10, 0.12) !important;
}

.faq-item[open] > summary,
.faq-item[open] > summary:hover,
.faq-item[open] > summary .faq-q {
  color: #0a0a0a !important;
}

.faq-item[open] > summary .faq-chevron {
  color: rgba(10, 10, 10, 0.45) !important;
}

.faq-item[open] .faq-a p {
  color: rgba(10, 10, 10, 0.68) !important;
}

/* ============ GRID DE INTEGRAÇÕES (ERPs) ============
   Badges removidos, padding restaurado (o do build nunca aplicou por
   causa do preflight) e dimensionamento óptico: a largura de cada logo é
   calculada a partir da proporção do seu viewBox para igualar a área
   percebida — com altura fixa, a variação era de 3x. */

.erp-cell::before {
  content: none;
}

.erp-cell {
  padding: 24px 16px !important;
}

.erp-cell svg {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
}

.erp-cell:nth-child(1) svg {
  width: 66px !important;
} /* olist — proporção 2.12 */
.erp-cell:nth-child(2) svg {
  width: 76px !important;
} /* Bling — 2.62 */
.erp-cell:nth-child(3) svg {
  width: 86px !important;
} /* Omie — 3.30 */
.erp-cell:nth-child(4) svg {
  width: 134px !important;
} /* Conta Azul — 7.72, no limite da célula */
/* 5ª célula não tem logo: é o convite para solicitar integração. */
/* A célula do convite vale por duas: cresce em dobro e fica 2:1, mantendo a
   MESMA altura das quadradas.
   O efeito colateral é o pretendido — as cinco passam a dividir a largura em
   seis partes em vez de cinco, então o lado do quadrado (e com ele a altura
   do bloco inteiro) cai de W/5 para W/6, cerca de 17% menor. Os logos não
   mudam: continuam com as larguras fixas declaradas acima.
   flex declarado por inteiro porque a regra base usa `flex: 1 1 0 !important`
   e um flex-grow isolado não a venceria. */
.erp-cell--cta {
  text-align: center;
}

.erp-cta-text {
  /* Red Hat Text é a --font-sans do site; herdada, sem redeclarar */
  display: block;
  max-width: 15ch;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.65);
  text-wrap: balance;
  /* Mesmo pontilhado de .hero-aio: sinaliza "isto responde a um clique". */
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.erp-cell--cta:hover .erp-cta-text {
  color: #fff;
}

/* O grid ocupa toda a largura do conteúdo: as células deixam de ter
   168px fixos e passam a dividir o container em partes iguais,
   mantendo-se quadradas via aspect-ratio.
   flex-basis 0 (e não `width`) porque em flex container o basis é quem
   manda — por isso as larguras por breakpoint em responsive.css também
   precisam ser declaradas como flex-basis. */
.erp-cell {
  flex: 1 1 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  min-width: 0;
}

/* A célula do convite vale por duas: cresce em dobro e fica 2:1, mantendo a
   MESMA altura das quadradas.
   O efeito colateral é o pretendido — as cinco passam a dividir a largura em
   seis partes em vez de cinco, então o lado do quadrado (e com ele a altura
   do bloco inteiro) cai de W/5 para W/6, cerca de 17% menor. Os logos não
   mudam: seguem com as larguras fixas declaradas mais acima.

   Precisa de `.erp-grid` na frente: a regra `.erp-cell` logo acima usa
   `flex: 1 1 0 !important` e tem a mesma especificidade de uma classe só —
   por vir depois no arquivo, ela venceria. */
.erp-grid .erp-cell--cta {
  flex: 2 1 0 !important;
  aspect-ratio: 2 / 1 !important;
}

/* Moldura de 1px no próprio grid, com o raio padrão de card do site (16px).
   Antes a moldura vinha das bordas das células colapsadas por margin -1px,
   e o `overflow: hidden` recortava justamente o 1px que sobrava à direita
   e embaixo — o quadro ficava aberto nesses dois lados e os cantos
   arredondados nunca apareciam. */
.erp-grid {
  /* !important: o preflight aplica `border: 0 solid` com (16,0,0) */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px;
  overflow: hidden;
}

/* Divisórias internas como box-shadow, não como border: a sombra é pintada
   fora da caixa, então a da última coluna e a da última linha caem além do
   padding box e são recortadas pelo `overflow: hidden`. Assim a moldura
   nunca dobra para 2px, sem depender de quantas células existem por linha
   (que muda por breakpoint). */
.erp-cell {
  border: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.erp-cell:hover {
  box-shadow: 1px 0 0 #2327a1, 0 1px 0 #2327a1;
}

/* ============ LARGURA DA PÁGINA ============
   Medidas tiradas da referência (auth0.com), inspecionando o contêiner deles
   em cinco larguras de janela:

       até 1023px .... 16px de recuo
       1024–1279 ..... 64px
       1280 em diante  96px
       máximo ........ 1728px

   O build define .container-page com 1440px e 20/32/120px. Este arquivo
   carrega depois, então basta redeclarar — mesma especificidade, ordem
   decide. As media queries próprias existem porque as do build (640px e
   1024px) venceriam a regra base sozinhas. */
.container-page {
  max-width: 1728px;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 1024px) {
  .container-page {
    padding-left: 64px;
    padding-right: 64px;
  }
}

@media (min-width: 1280px) {
  .container-page {
    padding-left: 96px;
    padding-right: 96px;
  }
}

/* ============ DIAGNÓSTICO ============
   Seis sintomas em colunas, com o medidor numa barra no rodapé da seção.

   As colunas não são cards: não têm fundo nem raio. O que as separa são
   divisórias de 1px — uma linha no topo da fileira e uma à esquerda de cada
   coluna, menos a primeira. O peso visual vem do vazio entre o número (topo)
   e a frase (base), não de uma caixa. */
.diag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--card-borda);
}

@media (min-width: 640px) {
  .diag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Seis numa fileira só a partir de 1024px: abaixo disso cada coluna ficaria
   com menos de 130px e a frase quebraria em cinco ou seis linhas. */
@media (min-width: 1024px) {
  .diag-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* O <label> guarda o <input type="checkbox">: o estado de selecionado vive no
   HTML, funciona por teclado e leitor de tela e não precisa de JS.
   min-height alto de propósito — é o vão entre o número e a frase que dá o
   ritmo da fileira. */
.diag-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 24px 20px 28px !important;
  border-left: 1px solid var(--card-borda);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.18s;
}

.diag-card:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* A primeira de cada fileira não leva divisória: ela cairia sobre a borda da
   seção. O nth-child muda com o número de colunas, daí um por breakpoint. */
.diag-grid > li:first-child .diag-card {
  border-left: 0;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .diag-grid > li:nth-child(3n + 1) .diag-card {
    border-left: 0;
  }
}

@media (max-width: 639px) {
  .diag-card {
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--card-borda);
  }
  .diag-grid > li:first-child .diag-card {
    border-top: 0;
  }
}

/* O input some da vista mas continua no fluxo de foco — por isso opacity e
   não display:none, que o tiraria da navegação por teclado. */
.diag-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.diag-card__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.diag-card__num {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
}

.diag-card__check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: transparent;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

.diag-card__check svg {
  width: 13px;
  height: 13px;
}

.diag-card__texto {
  margin-top: auto !important;
  padding-top: 32px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  text-wrap: balance;
}

/* ---- Selecionado ---- */

/* Sem preenchimento na coluna: o único elemento que "enche" é o check.
   O número e a frase ainda clareiam — num vão de 235px por 300px, um círculo
   de 22px sozinho é fácil de não notar ao varrer a fileira. */
.diag-card:has(.diag-card__input:checked) .diag-card__num {
  color: rgba(255, 255, 255, 0.55);
}

.diag-card:has(.diag-card__input:checked) .diag-card__texto {
  color: #ffffff;
}

.diag-card:has(.diag-card__input:checked) .diag-card__check {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-brand-600, #161ba9);
}

.diag-card:has(.diag-card__input:focus-visible) {
  outline: 2px solid #9aa0ff;
  outline-offset: -2px;
}

/* ---- Medidor ---- */

.diag-medidor {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
  padding: 24px 32px !important;
  border-radius: 20px;
  /* Mesmo gradiente do depoimento claro (.tst-card--light, vindo do build). */
  background: linear-gradient(
    158deg,
    #dfe4ff 0%,
    #e9e6fb 52%,
    #f3eefb 100%
  );
  /* isola o preenchimento, que é absoluto e fica atrás do conteúdo */
  isolation: isolate;
}

@media (min-width: 768px) {
  .diag-medidor {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}

.diag-medidor__bloco {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

/* Mesma tipografia do eyebrow das seções ("Simplifique sua operação"):
   12px, peso 500, caixa alta e tracking de 0.1em. */
.diag-medidor__rotulo {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.5);
}

.diag-medidor__mensagem {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

/* Enquanto nada está marcado, a linha do resultado vira um esqueleto com
   brilho: sinaliza que ali vai aparecer algo, e que falta uma ação.

   `color: transparent` em vez de esvaziar o texto: a frase continua no DOM e
   é lida por leitor de tela, só não aparece. O overflow recorta o que passar
   da caixa. */
.diag-medidor__mensagem.is-carregando {
  position: relative;
  width: 190px;
  max-width: 100%;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(10, 10, 10, 0.08);
  color: transparent;
}

.diag-medidor__mensagem.is-carregando::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 10, 10, 0) 0%,
    rgba(10, 10, 10, 0.13) 50%,
    rgba(10, 10, 10, 0) 100%
  );
  transform: translateX(-100%);
  animation: diag-brilho 1.5s ease-in-out infinite;
}

@keyframes diag-brilho {
  to {
    transform: translateX(100%);
  }
}

/* Sem movimento: fica o esqueleto parado, que já comunica a espera. */
@media (prefers-reduced-motion: reduce) {
  .diag-medidor__mensagem.is-carregando::after {
    animation: none;
  }
}

/* A barra inteira se enche, da esquerda para a direita — sem trilha separada.
   --pct vem do script; scaleX em vez de width evita recalcular layout a cada
   marcação, e o transform-origin à esquerda dá o sentido da varredura. */
.diag-medidor__preenche {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-brand-600, #161ba9);
  transform-origin: left center;
  transform: scaleX(var(--pct, 0));
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Empurra a contagem para a outra ponta da barra. */
.diag-medidor__bloco {
  margin-right: auto;
}

/* ---- Inversão do texto conforme a faixa varre a barra ----
   O preenchimento passa POR TRÁS do texto; sobre o azul da marca, texto
   escuro fica em 1,6:1. Cada bloco vira branco quando a faixa alcança a SUA
   posição horizontal. Medido na barra de 1409px: com a palavra de resultado no
   lugar da frase, o bloco da esquerda termina em 11,4% e já está coberto com 1
   marcado (16,7%); a contagem termina em 97,7% e só é alcançada com os 6. */
.diag-medidor__rotulo,
.diag-medidor__mensagem,
.diag-medidor__contagem,
.diag-medidor__total {
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.diag-medidor.is-bloco-claro .diag-medidor__rotulo {
  color: rgba(255, 255, 255, 0.7);
}

.diag-medidor.is-bloco-claro .diag-medidor__mensagem {
  color: #ffffff;
}

.diag-medidor.is-contagem-clara .diag-medidor__contagem {
  color: #ffffff;
}

.diag-medidor.is-contagem-clara .diag-medidor__total {
  color: rgba(255, 255, 255, 0.55);
}

.diag-medidor__contagem {
  flex: none;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
}

.diag-medidor__total {
  color: rgba(10, 10, 10, 0.4);
}

/* ============ PRODUTOS EM DETALHE ============
   Trilho fixo à esquerda + coluna de cards à direita. Substituiu a cascata
   sticky das quatro seções (recuperável em _home-v1/, se precisar voltar).

   O trilho gruda; os cards rolam. Um script no fim do index.html marca o item
   ativo e preenche a barrinha conforme o card correspondente atravessa a tela.

   O recuo do sticky precisa ficar ABAIXO da base do cabeçalho, que é sticky e
   opaco. Com 120px contra um cabeçalho de 130px o trilho grudava 10px acima
   da base e o título "Nossos produtos" era comido por ele.
   Aqui: altura do cabeçalho (96px no celular, 130px a partir de 768px) mais
   40px de respiro. Na referência (Auth0) o trilho gruda 4px abaixo da base,
   mas lá existe um ícone acima do título abrindo o espaço — sem ele, o
   respiro precisa vir do próprio recuo. */
:root {
  --prod-trilho-topo: 136px;
}

@media (min-width: 768px) {
  :root {
    --prod-trilho-topo: 170px;
  }
}

.prod-layout {
  display: block;
}

@media (min-width: 1024px) {
  .prod-layout {
    display: grid;
    /* 300px é a largura do trilho; o resto fica para os cards. O gap grande
       separa as duas leituras — o índice e o conteúdo. */
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
  }

  .prod-trilho {
    position: sticky;
    top: var(--prod-trilho-topo);
  }
}

.prod-trilho__titulo {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #f4f4f4;
  margin-bottom: 32px !important;
}

.prod-trilho__nav {
  display: flex;
  flex-direction: column;
}

/* Cada item é um <button>: muda a rolagem, não a URL. O preflight zera
   background/borda/padding de <button>, então tudo aqui é explícito. */
.prod-trilho__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0 0 14px !important;
  margin-top: 18px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.2s;
}

.prod-trilho__item:first-child {
  margin-top: 0;
}

.prod-trilho__item:hover,
.prod-trilho__item.is-active {
  color: #f4f4f4;
}

/* Trilha de 1px sob o rótulo; a barra colorida cresce dentro dela. */
.prod-trilho__trilha {
  display: block;
  height: 1px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.prod-trilho__progresso {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2228cc 0%, #9aa0ff 100%);
  transform-origin: left center;
  /* --prog vai de 0 a 1 pelo script; scaleX evita reflow a cada quadro. */
  transform: scaleX(var(--prog, 0));
  transition: transform 0.12s linear;
}

/* ---------- Cards ---------- */

.prod-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.prod-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--card-borda);
  border-radius: 24px;
  background: #0a0a0a;
  /* O padding saiu do card e foi para .prod-card__texto: a arte precisa
     encostar nas bordas, e um padding aqui a afastaria delas.
     overflow hidden é quem arredonda os cantos da arte — ela é recortada
     pelo raio do próprio card, então bate exatamente com ele em vez de
     depender de um segundo valor que poderia dessincronizar. */
  padding: 0 !important;
  overflow: hidden;
  /* min-height, não height: 500px é o piso. Se algum card crescer (título
     mais longo, mais funcionalidades), ele acompanha em vez de vazar. */
  min-height: 500px;
  /* O cabeçalho gruda no topo; sem isto o link do mega-menu pararia com o
     título do card escondido atrás dele. */
  scroll-margin-top: 150px;
}

/* O padding saiu daqui e foi para os dois blocos internos: a divisória entre
   o texto e as funcionalidades precisa sangrar até as bordas da coluna, como
   faz a borda que separa a ilustração. Com o padding no pai, a linha ficaria
   recuada 40px de cada lado e não encontraria a borda vertical do painel. */
.prod-card__texto {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.prod-card__cabeca {
  padding: 40px 40px 32px;
}

/* margin-top auto encosta o bloco na base: os quatro cards têm 500px de
   altura mas descrições de tamanhos diferentes, e sem isto cada faixa de
   funcionalidades pararia numa altura. */
.prod-card__feats {
  margin-top: auto;
  padding: 28px 40px 32px;
  border-top: 1px solid var(--card-borda);
}

@media (min-width: 768px) {
  .prod-card {
    /* 40% para a arte, o resto para o texto. */
    grid-template-columns: minmax(0, 1fr) 40%;
    /* stretch, não center: é o que faz a arte ocupar a altura toda. */
    align-items: stretch;
  }
}

.prod-card__titulo {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #f4f4f4;
  margin-bottom: 12px !important;
}

.prod-card__desc {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 46ch;
  margin-bottom: 0 !important;
}

.prod-card__rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 14px !important;
}

/* Duas colunas como na referência. Em telas estreitas vira uma só. */
.prod-card__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 32px;
}

@media (min-width: 640px) {
  .prod-card__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.prod-feat {
  position: relative;
  padding-left: 28px !important;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}

/* Marcador: arrow-right-circle.svg no lugar do ponto.
   Entra como máscara, e não como background-image, porque o arquivo tem
   stroke="#757575" fixo — por background ele ficaria preso nesse cinza,
   destoando do texto da lista. Como máscara, quem pinta é o
   background-color, então o ícone herda a cor do item.
   O -webkit-mask acompanha por causa do Safari. */
.prod-feat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  opacity: 0.55;
  -webkit-mask: url("../assets/icons/arrow-right-circle.svg") no-repeat center /
    contain;
  mask: url("../assets/icons/arrow-right-circle.svg") no-repeat center / contain;
}

/* As funcionalidades com ficha no modal continuam clicáveis: o handler do
   bundle escuta .copilot-feat-item[data-feat]. As da loja virtual não têm
   ficha, então são .prod-feat--inerte e ficam como texto puro.
   Escopado em .prod-card__lista (0,2,0) e não só na classe: o bloco
   "PILLS — padrão único", mais abaixo neste arquivo, aplica
   `.copilot-feat-item { background: #111 !important }`. Mesma
   especificidade e vindo depois, ele venceria até o !important daqui. */
.prod-card__lista .prod-feat__btn {
  display: inline !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: inherit !important;
  text-align: left;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color 0.15s, text-decoration-color 0.15s;
}

.prod-card__lista .prod-feat__btn:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.prod-card__lista .prod-feat__btn .feat-label {
  font-size: inherit;
  color: inherit;
}

/* ---------- Ilustração ---------- */

/* Painel da ilustração: fundo próprio sangrando até as bordas do card.
   No empilhado (< 768px) fica abaixo do texto, então a divisa é em cima; a
   partir de 768px vira coluna à direita e a divisa passa para a esquerda —
   sempre a mesma borda do card. */
.prod-card__arte {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--card-bg);
  border-top: 1px solid var(--card-borda);
}

@media (min-width: 768px) {
  .prod-card__arte {
    border-top: 0;
    border-left: 1px solid var(--card-borda);
  }
}

/* A ilustração passa a preencher o painel em vez de ficar travada em 240px.
   object-fit: contain com largura e altura em 100% deixa o lado mais curto do
   painel mandar — os SVGs são quadrados (600x600), então quem limita é a
   altura do card. Sem o contain, um painel não quadrado esticaria o desenho. */
.prod-card__arte img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============ RITMO DAS SEÇÕES DE PRODUTO ============
   Loja virtual, CRM, Force e Copiloto: 20px entre o cabeçalho e a faixa de
   pills, e 40px entre as pills e a tela da plataforma. Antes cada seção usava
   um mb-* diferente do build (40, 48 ou 64px) para a mesma função.

   Classes próprias em vez de utilitárias: o styles.css é um build pré-compilado,
   não JIT — só existe nele a classe que já foi usada em algum HTML no momento
   do build. Um `mt-12` escrito à mão, por exemplo, não tem regra nenhuma e não
   faz nada. Por isso o espaçamento mora aqui.

   !important: o preflight do build zera margin em (16,0,0). */
.sec-cabecalho {
  margin-bottom: 20px !important;
}

/* Teto de 750px para a tela da plataforma.

   O corte vai AQUI, no wrapper, e não na .preview-frame — de propósito. A
   moldura é `position: relative` e serve de referência para as porcentagens
   da digitação (.previa-anim), que foram medidas sobre o copilot_home.svg
   inteiro. Cortar a moldura muda a altura dessa referência e desloca a
   digitação: com max-height nela, a linha caía em 45,09% da imagem em vez
   dos 46,78% medidos. Cortando um nível acima, a moldura mantém a altura
   natural e a geometria da animação continua válida.

   O raio de 16px é repetido aqui porque quem passa a recortar é este
   elemento; sem ele os cantos da base sairiam quadrados.
   Telas MAIS BAIXAS que 750 não são esticadas — max-height só limita. */
.sec-tela {
  margin-top: 40px !important;
  max-height: 750px;
  overflow: hidden;
  border-radius: 16px;
}

/* ============ SUBMENU DE "RECURSOS" ============
   Estrutura em duas zonas, como na referência: coluna larga com os
   produtos à esquerda e uma coluna lateral de apoio à direita.

   Fundo e borda são os mesmos do dropdown de idioma/Suporte/Empresa
   (.hdr-util-menu): #111 com borda #2b2b2b e raio de 12px. O painel é um
   card limitado à largura da página, não uma faixa de ponta a ponta —
   por isso o inner usa o mesmo max-width e padding do .container-page. */

.hdr-main-row {
  position: relative;
}

.hdr-nav-drop {
  display: flex;
  align-items: center;
}

/* Chevron do "Recursos": mesma peça dos dropdowns de idioma/Suporte/
   Empresa (.hdr-chev), inclusive o giro de 180° ao abrir. A regra de giro
   do build é escopada em .hdr-util-btn, então o item de menu precisa da
   sua própria. */
.hdr-nav-drop > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hdr-nav-drop > a[aria-expanded="true"] .hdr-chev {
  transform: rotate(180deg);
}

.hdr-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 8px 0 0 !important;
}

.hdr-mega[hidden] {
  display: none;
}

/* Faixa invisível que cobre o vão entre o item do menu e o card, para o
   mouse não sair da área durante o trajeto. */
.hdr-mega::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
}

.hdr-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-borda) !important;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.hdr-mega__main {
  padding: 24px 28px 28px !important;
  min-width: 0;
}

/* Linha de produto: ícone + nome + descrição + soluções */
/* A linha do produto é um <div>, não um <a>: os chips de solução são
   links e não podem ficar aninhados dentro de outro link — o parser
   quebrava a âncora externa em cópias vazias. O link do produto é o
   .hdr-mega__prod-head. */
.hdr-mega__prod {
  padding: 14px 12px !important;
  margin: 0 -12px !important;
  border-radius: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: background-color 0.15s;
}

.hdr-mega__prod-head {
  display: flex;
  gap: 14px;
}

.hdr-mega__prod:first-child {
  border-top: 0 !important;
}

.hdr-mega__prod:hover {
  background: rgba(255, 255, 255, 0.035);
}

.hdr-mega__prod-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid #2b2b2b !important;
  background: #0d0d0d;
  color: rgba(255, 255, 255, 0.75);
}

.hdr-mega__ico {
  width: 16px !important;
  height: 16px !important;
}

.hdr-mega__prod-txt {
  display: block;
  min-width: 0;
}

.hdr-mega__prod-nome {
  display: block;
  color: #f4f4f4;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 3px !important;
}

.hdr-mega__prod-desc {
  display: block;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Coluna lateral */
.hdr-mega__aside {
  padding: 24px 24px 20px !important;
  border-left: 1px solid #2b2b2b !important;
  /* Área aninhada, não é um card: fica um degrau mais escura que o painel
     (--card-bg) para o olho separar as duas colunas. Com as duas no mesmo tom,
     sobrava só o fio da esquerda e o menu virava uma chapa só. */
  background: #161616;
  display: flex;
  flex-direction: column;
}

.hdr-mega__aside-desc {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 14px !important;
}

.hdr-mega__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13px;
  transition: color 0.15s;
}

.hdr-mega__link span {
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.15s, color 0.15s;
}

.hdr-mega__link:hover {
  color: #fff !important;
}

.hdr-mega__link:hover span {
  color: #fff;
  transform: translateX(3px);
}

.hdr-mega__rodape {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto !important;
  padding-top: 16px !important;
  color: #6b71e8 !important;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}

.hdr-mega__rodape:hover {
  color: #fff !important;
}

/* ===================== PILLS — padrão único =====================
   Fundo #111, borda #2b2b2b para toda pill escura do site:
     .copilot-feat-item  (10) — abas de Force e Copiloto
     .sec-eyebrow         (4) — rótulos "Loja virtual", "Force", "CRM",
                                "Copiloto" acima de cada H2
     .erp-cell::before        — selos ERP / FRETE / PAGAMENTO
                                (aplicado direto na regra, mais acima)

   Fora do padrão de propósito: .product-pill, que é branca sobre as
   imagens de produto — #111 a inverteria.

   Por que !important: as utilities do build carregam o hack
   :not(#\#) x8 (especificidade 8,1,0) e venceriam estas regras.

   ATENÇÃO ao mexer: como a regra base usa !important, os estados
   precisam de !important também, senão param de funcionar —
   hover e .is-active (azul da marca) ficariam sem efeito. */

.copilot-feat-item,
.sec-eyebrow {
  background: #111 !important;
  border-color: #2b2b2b !important;
}

/* Realce de hover derivado do novo par base (o original era branco
   translúcido sobre #1c1c1c e ficava invisível sobre #111). */
.copilot-feat-item:hover {
  background: #181818 !important;
  border-color: #3a3a3a !important;
}

/* Estado selecionado permanece no azul da marca. */
.copilot-feat-item.is-active,
.copilot-feat-item.is-active:hover {
  background: #161ba9 !important;
  border-color: #161ba9 !important;
}


/* ============ DICA DE ARRASTAR (canvas de integrações) ============
   Um ponteiro demonstra o gesto: encosta, aperta a bolinha, leva até a
   Sellum, solta — e a bolinha volta ao lugar para a pessoa repetir.

   O ciclo tem 6s e quatro atos:
     0–14%   o ponteiro entra em cena e encosta na bolinha
     14–20%  o ponteiro "aperta" (encolhe na ponta) e a bolinha levanta
     20–56%  os dois viajam até a caixa da Sellum, com a linha pontilhada junto
     56–64%  a bolinha é absorvida e o ponteiro solta
     64–78%  mão some; nada visível
     78–88%  a bolinha REAPARECE na origem — é o que fecha o ciclo e mostra
             que a peça continua ali para ser arrastada de verdade
     88–100% respiro antes de recomeçar

   O fantasma é um CLONE do item real, criado no script: idêntico por
   construção, sem uma segunda cópia da marcação para manter em dia. O item
   original fica oculto enquanto a dica roda — com os dois visíveis, a mesma
   bolinha apareceria duas vezes.

   pointer-events: none em tudo — a dica nunca rouba o clique de quem for
   arrastar de verdade. */
.integ-dica {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  animation: integ-dica-percurso 6s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

.integ-card.is-dica .integ-item--dica-origem {
  visibility: hidden;
}

.integ-dica__fantasma.integ-item {
  position: static !important;
  animation: integ-dica-fantasma 6s ease-in-out infinite !important;
}

/* Ponteiro do sistema. O contorno branco já separa a seta de qualquer fundo;
   a sombra é só o descolamento do plano, bem mais discreta do que era preciso
   com a mão vazada.
   transform-origin na PONTA (21% 10% da viewBox, onde o path começa): é ela
   que encosta na bolinha, então o aperto tem de encolher a seta em torno dela,
   e não em torno do meio do desenho — senão a ponta escorrega no clique. */
.integ-dica__seta {
  position: absolute;
  top: 52%;
  left: 48%;
  width: 27px;
  height: 27px;
  transform-origin: 21% 10%;
  filter: drop-shadow(0 2px 5px rgba(10, 10, 10, 0.32));
  animation: integ-dica-seta 6s ease-in-out infinite;
}

/* --dx e --dy vêm do script: a distância entre o centro da bolinha e o centro
   da caixa da Sellum, medida no card e refeita no resize.
   A volta ao ponto de partida é instantânea (dois passos em 64%), e acontece
   enquanto o fantasma está invisível — ninguém vê o salto. */
@keyframes integ-dica-percurso {
  0%,
  20% {
    transform: translate(0, 0);
  }
  56%,
  64% {
    transform: translate(var(--dx, 0px), var(--dy, 0px));
  }
  64.01%,
  100% {
    transform: translate(0, 0);
  }
}

@keyframes integ-dica-fantasma {
  0%,
  14% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
  /* levantou: cresce e ganha sombra, como algo tirado da mesa */
  20%,
  52% {
    opacity: 1;
    transform: scale(1.08);
    filter: drop-shadow(0 10px 18px rgba(10, 10, 10, 0.28));
  }
  /* absorvida pela caixa da Sellum */
  62% {
    opacity: 0;
    transform: scale(0.25);
    filter: none;
  }
  77% {
    opacity: 0;
    transform: scale(0.9);
  }
  /* de volta à origem, pronta para a pessoa repetir */
  88%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes integ-dica-seta {
  /* chega deslizando, como um cursor que entra em cena */
  0% {
    opacity: 0;
    transform: translate(7px, 7px) scale(1);
  }
  10%,
  14% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  /* aperta: encolhe na ponta no mesmo quadro em que a bolinha levanta (14%
     no keyframe do fantasma) e segue apertada por todo o percurso */
  17%,
  56% {
    opacity: 1;
    transform: translate(0, 0) scale(0.85);
  }
  /* solta sobre o logo */
  62%,
  70% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  78%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
}

/* Sem movimento: a dica não roda. Quem depende disso costuma navegar por
   teclado ou toque, onde o gesto não se aplica do mesmo jeito. */
@media (prefers-reduced-motion: reduce) {
  .integ-dica {
    display: none;
  }
  .integ-card.is-dica .integ-item--dica-origem {
    visibility: visible;
  }
}

/* ============ FADE DAS ILUSTRAÇÕES DE PRODUTO ============
   Véu que funde a borda da ilustração no fundo da seção. São 5 usos, um por
   ilustração: prévia da plataforma, loja virtual, CRM, Force e Copiloto.

   O build aplica o gradiente NAS DUAS PONTAS:
     linear-gradient(#080808 0%, transparent 40% 60%, #080808 100%)
   Ou seja, os 40% de cima da imagem também eram apagados — comia o cabeçalho
   das telas (barra de título, abas, botões de ação) justamente onde está a
   informação que identifica o produto.

   Aqui fica só o rodapé. O ponto de partida sobe de 60% para 55% para o
   degradê ter o mesmo comprimento visual de antes agora que é um só.

   !important porque a regra do build carrega o hack `:not(#\#)` repetido e
   venceria por especificidade uma regra de classe simples.

   --fade-cor permite a cada seção terminar na SUA cor de fundo. Quatro seções
   são #080808, mas a da prévia é #000 puro — com uma cor fixa, sobrava ali uma
   faixa levemente mais clara na base da imagem. */

/* --fade-topo controla o véu de CIMA: 0% (padrão) desliga, 33% escurece o
   primeiro terço, 50% metade. --fade-cor define a cor de chegada, para cada
   seção terminar no próprio fundo.

   A regra é !important porque a versão do build vem com o hack de
   especificidade. Consequência a lembrar: !important aqui vence até estilo
   INLINE sem !important — foi o que aconteceu quando tentei ajustar o
   gradiente direto no elemento e nada mudou. Por isso a variação por
   instância entra por variável, não por style=. */
.crm-screenshot-fade {
  background: linear-gradient(
    to bottom,
    var(--fade-cor, #080808) 0%,
    rgba(0, 0, 0, 0) var(--fade-topo, 0%),
    rgba(0, 0, 0, 0) 55%,
    var(--fade-cor, #080808) 100%
  ) !important;
}

/* ============ ESPAÇO ENTRE OS BOTÕES DO HERO E A PRÉVIA ============
   Alvo: 40px entre a base dos botões e o topo da moldura da tela.

   Os 298px anteriores não eram margem — a moldura começa exatamente onde o
   hero termina. Eram três folgas somadas DENTRO do hero:
     186px  sobra do min-h-[600px] no bloco de conteúdo (o texto e os botões
            preenchem só ~286px, o resto ficava vazio embaixo)
      64px  padding inferior do md:py-16 desse bloco
      48px  padding inferior do md:pb-12 da <section id="hero">

   Zerando os dois primeiros e fixando o terceiro em 40, o vão passa a ser
   exatamente 40px.

   CONSEQUÊNCIA: o hero encolhe de 776px para ~528px de altura. A foto de fundo
   é object-cover e acompanha — ela não distorce, mas mostra menos. Não há como
   ter 40px aqui e manter a foto na altura de antes, porque era justamente o
   vazio abaixo dos botões que dava altura ao hero.

   !important em tudo: são utilities do build (8,1,0). */

/* ============ FAIXA DO HERO ============
   O hero é uma faixa de ponta a ponta: fica FORA de .container-page no HTML,
   sem raio e sem borda, para o fundo encostar nas bordas da janela. A prévia
   da plataforma que emergia da base migrou para a seção Copiloto. */
.hero-card {
  position: relative;
  overflow: hidden;
  /* Fundo: sofa-computer-hero. Foto em azul de marca, com a metade esquerda
     limpa e o sofá/notebook à direita.

     Volta ao `center / cover`: aqui a área vazia é a ESQUERDA, ao contrário
     da imagem anterior, então não há motivo para ancorar à direita.

     O véu é moderado — a foto é de meio-tom, e o texto branco precisa de
     algum escurecimento para se sustentar sobre as partes claras do sofá.
     A base ainda fecha em preto: o hero encosta numa seção preta logo
     abaixo, e o degradê evita a emenda. */
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.8) 85%,
      #000000 100%
    ),
    url("../assets/sofa-computer-hero.jpg") center / cover no-repeat;
  /* !important: o preflight do build zera padding com especificidade (16,0,0). */
  padding-bottom: 96px !important;
}

/* Conteúdo do card (fica acima da imagem/gradiente via z-10 no HTML).
   O respiro em cima e embaixo é o que dá altura ao hero: não há min-height,
   a faixa cresce com o conteúdo. */
.hero-card__body {
  padding: 176px 48px 96px !important;
}

/* Todo o conteúdo do hero centralizado horizontalmente. */
.hero-card__body {
  text-align: center;
}
.hero-card__body .max-w-3xl {
  margin-left: auto !important;
  margin-right: auto !important;
  /* O max-w-3xl do build são 768px, apertados para um título de 72px: a
     rotativa mais longa ("com força de vendas") encostaria nas bordas e
     quebraria em três linhas. 960px dá folga sem esticar a medida de leitura,
     que continua limitada pelo max-w-lg do parágrafo. */
  max-width: 960px !important;
}
.hero-card__body p {
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-card__body .flex {
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 767px) {
  .hero-card__body {
    padding: 72px 24px 32px !important;
  }
}

/* A prévia que emergia do hero foi removida na reestruturação; com ela saíram
   --previa-sobre, .previa-sobreposta e .home-preview-inset, que só existiam
   para aquele encaixe e ainda carregavam a largura antiga da página
   (1440px / 240px de recuo) nos seus calc. Estão em _home-v1/ se precisar. */

/* ============ SEÇÃO DE INTEGRAÇÕES — canvas em caixa ============
   A <section> volta a ser só espaçamento: fundo, malha e recorte migraram
   para .integ-canvas. Sem isso o bloco azul não teria como parar na largura
   do conteúdo nem ter cantos arredondados — o fundo de uma section vai de
   ponta a ponta da tela por definição.

   A seção mantém o bg-[#080808] do build, igual às vizinhas. Só removo a
   borda inferior, que somaria um risco logo abaixo do canto arredondado. */

.secao-integracoes {
  border-bottom-color: transparent !important;
}

/* A caixa. Largura = a do conteúdo (é filha do .container-page, então herda
   os 1200px do content box dele).

   O fundo é o MESMO gradiente do card de depoimento (.tst-card--light), o
   único bloco claro recorrente do site. Reaproveitar em vez de inventar um
   quarto tom mantém a paleta fechada. */
.integ-canvas {
  position: relative;
  border-radius: 24px;
  /* O recorte vive aqui. A borda é visível — é o próprio canto arredondado —,
     então nada é cortado por uma caixa invisível. */
  overflow: hidden;
  padding: 32px 40px !important;
  background: linear-gradient(
    158deg,
    #dfe4ff 0%,
    #e9e6fb 52%,
    #f3eefb 100%
  );
}

/* A malha vive numa camada própria, MASCARADA nas pontas.
   Antes o fade era um véu da cor do fundo por cima dos pontos. Isso só
   funciona com fundo chapado: com gradiente, um véu de cor única deixaria
   mancha no topo e na base. A máscara apaga os pontos sem precisar saber que
   cor está atrás. */
.integ-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(10, 10, 10, 0.13) 1px,
    transparent 0
  );
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 82%,
    transparent 100%
  );
}

/* Acima da malha, senão os pontos ficam por cima dos ícones. */
.integ-canvas .integ-card {
  position: relative;
  z-index: 1;
}

@media (max-width: 639px) {
  .integ-canvas {
    border-radius: 16px;
    padding: 40px 20px !important;
  }
}

/* ============ RODAPÉ NO AZUL DA MARCA ============
   A classe é gancho: o <footer> só tinha utilities do build, e prender a
   regra ao aria-label quebraria em silêncio se o rótulo mudasse.

   O tile do logo virou #000000 direto no SVG, e não por CSS: o <rect> tem
   fill próprio, e um `fill` de fora só o alcançaria com seletor no elemento.
   Sem essa troca o tile — que era #161BA9 — desapareceria dentro do rodapé,
   restando a marca branca solta.

   A borda superior branca a 10% fica: sobre o azul ela ainda separa o rodapé
   do CTA, e é o que marca onde uma seção termina e a outra começa. */

.rodape-azul {
  background: #161ba9 !important;

  /* Altura fixa de 600px. O conteúdo do rodapé mede 313px, então sobram ~190px
     de folga: a coluna flex empurra essa sobra para um lugar só, em vez de
     espalhá-la e deixar o divisor boiando no meio do nada. */
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

/* A sobra inteira cai aqui. Resultado: links no topo, divisor + barra de
   copyright colados na base. `!important` porque o preflight zera margin de
   todo elemento com especificidade maior que a das utilities. */
/* --marca-recuo = quanto o divisor e a barra de baixo sobem por cima da marca.
   Um valor fixo em px não serve: a marca tem altura variável (é largura/4), e
   -110px que valem 37% dela no desktop virariam 130% no celular — a barra
   subiria até dentro dos links. Então o recuo é derivado da mesma largura de
   conteúdo que define a altura da marca, no mesmo formato já usado por
   --previa-sobre: 0,0925 = 37% da altura ÷ 4 da proporção do logo.
   Os subtraendos são o padding lateral do .container-page em cada faixa
   (2x 16 / 64 / 96px) — se a largura da página mudar, estes números mudam
   junto, senão a barra descola da marca. */
:root {
  --marca-recuo: calc((100vw - 32px) * 0.0925);
}
@media (min-width: 1024px) {
  :root {
    --marca-recuo: calc((min(1728px, 100vw) - 128px) * 0.0925);
  }
}
@media (min-width: 1280px) {
  :root {
    --marca-recuo: calc((min(1728px, 100vw) - 192px) * 0.0925);
  }
}

/* Substitui o `margin-top: auto`, que antes empurrava este bloco para a base —
   com a sobreposição não há mais folga para distribuir. */
.rodape-divisor {
  margin-top: calc(-1 * var(--marca-recuo)) !important;
  position: relative;
  z-index: 1;
}

/* Sobe junto com o divisor e fica por cima da marca — agora tapando, não
   deixando ver através. O fundo opaco precisa alcançar a borda de baixo do
   rodapé: o padding de 48px do <footer> fica fora desta caixa, e sem o
   padding/margin negativo a marca reapareceria nessa faixa. */
.rodape-base {
  position: relative;
  z-index: 1;
  background: #161ba9 !important;
  padding-bottom: 48px !important;
  margin-bottom: -48px !important;
}

/* O logo em toda a largura do conteúdo, no vão que sobrou entre os links e a
   barra de baixo.
   O arquivo tem fill="black" fixo, e preto sobre o azul da marca ficaria
   pesado demais. Em vez de editar o SVG ou lavar a cor com filter(), uso ele
   como máscara: o desenho define só o recorte, e a cor vem do
   background-color — assim dá para calibrar a intensidade numa linha só.
   viewBox 400x100 = 4:1; aspect-ratio mantém a proporção em qualquer largura. */
.rodape-marca {
  width: 100%;
  aspect-ratio: 4 / 1;
  /* Preenchimento do logo mascarado: gradiente vertical #000000 (topo) →
     #161ba9 (base). */
  background: linear-gradient(to bottom, #000000 0%, #161ba9 100%);
  -webkit-mask: url("../assets/svg/logo_footer.svg") center / contain no-repeat;
  mask: url("../assets/svg/logo_footer.svg") center / contain no-repeat;
}

/* ============ DIAGRAMA SOBRE O CANVAS CLARO ============
   O fundo virou o lavanda do card de depoimento. Tudo que estava calibrado
   para o azul precisa inverter junto — é a terceira vez que este bloco muda de
   base, e a lista é sempre a mesma: ligadores, texto final, rótulos e
   círculos. */

/* Transparente para a malha correr por baixo, e overflow visível para o card
   não recortar nada — quem recorta é a caixa. */
.integ-card {
  background: transparent !important;
  overflow: visible !important;
}

/* O estado de finalização NÃO muda o fundo, como pedido. A conclusão é
   comunicada pelo logo subindo ao centro, pelos ícones sendo absorvidos e pela
   frase que aparece.
   A regra precisa existir mesmo assim: sem ela o #dde0f5 do build voltaria a
   valer e a caixa mudaria de tom no fim. */
.integ-card.is-complete {
  background: transparent !important;
}

/* Azul da marca sobre o lavanda. O preto anterior dava mais contraste bruto,
   mas o azul identifica o alvo como sendo a Sellum — e sobre este fundo claro
   ele ainda fica em 10,4:1, folgado.
   A sombra que o script aplica no arraste já é rgba(22,29,169,…), então agora
   o realce e o quadrado falam a mesma cor. */
.integ-sellum__box {
  background: #161ba9 !important;
}

/* Ligadores voltam ao azul da marca — o branco de 38% que servia no fundo
   azul é invisível sobre o claro. */
.integ-line {
  stroke: #161ba9 !important;
  opacity: 0.42 !important;
}

.integ-complete-text {
  color: #161ba9 !important;
}

/* Rótulos e círculos são brancos. Sobre o lavanda o branco sozinho quase
   desaparece; a borda é o que os recorta do fundo e da malha. */
.integ-label {
  border: 1px solid rgba(10, 10, 10, 0.1) !important;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.12) !important;
}

/* Os logos saíram do HTML para assets/logos/*.svg e viraram <img>. A regra do
   build que os encolhia — .integ-circle svg { transform: scale(.75) } — não
   alcança um <img>, então ela é espelhada aqui. Mantém o tamanho exatamente
   como estava; sem isto os seis apareceriam 33% maiores dentro do círculo. */
.integ-circle img {
  display: block;
  transform: scale(0.75);
}

.integ-circle {
  border-color: rgba(10, 10, 10, 0.14) !important;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.14) !important;
}

/* ============ CONVITE À INTERAÇÃO DO DIAGRAMA ============ */


/* ============ DIGITAÇÃO NA PRÉVIA DO HERO ============
   Mesma ideia da animação da seção Force, mas com geometria própria: as
   porcentagens abaixo foram medidas no copilot_home.svg desenhando o arquivo
   num canvas 1440x932 e varrendo os pixels, não estimadas por cima do
   screenshot.
     caixa da mensagem ....... x 381→1140   y 404→560
     placeholder ............. x 406→554    y 430→442
     linha de chips .......... y 506→542   (a máscara para antes dela)
   A máscara começa em y=418, e não no topo da caixa: em 404–417 estão os
   cantos arredondados da borda, e um retângulo branco ali quadraria o canto. */
.previa-anim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* referência das unidades cqw abaixo */
  container-type: inline-size;
}

/* Tapa o placeholder "Escreva uma mensagem". O miolo da caixa é #ffffff puro
   (amostrado em 8 pontos), então o retângulo some no fundo. */
.previa-anim__mascara {
  position: absolute;
  left: 27.08%;
  top: 44.85%;
  width: 51.46%;
  height: 8.8%;
  background: #ffffff !important;
}

/* left = borda esquerda do placeholder; top = centro vertical dele. */
.previa-anim__linha {
  position: absolute;
  left: 28.19%;
  top: 46.78%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-sans);
  /* o placeholder tem 12px de altura de caixa-alta no SVG; convertido para a
     largura do container dá 1,16cqw */
  font-size: 1.16cqw;
  line-height: 1;
}

/* #2b2b2b é a tinta mais escura do próprio SVG (o título "O que posso fazer
   por você, João?"), para o texto digitado parecer conteúdo real e não
   placeholder — que é #a5a5a5. */
.previa-anim__texto {
  color: #2b2b2b !important;
  white-space: nowrap;
}

/* Sem min-width/min-height de propósito. Com eles o cursor travava em 12px
   enquanto o texto encolhia para 3,9px no celular — uma barra azul três vezes
   mais alta que a frase. Proporcional ao texto em qualquer largura: some junto
   com o resto da interface da imagem, que também é ilegível nesse tamanho. */
.previa-anim__cursor {
  flex: none;
  width: 0.12cqw;
  height: 1.3cqw;
  background: #161ba9 !important;
  animation: previa-cursor-pisca 1.05s step-end infinite;
}

@keyframes previa-cursor-pisca {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Sem movimento: fica a primeira frase parada, sem piscar. */
@media (prefers-reduced-motion: reduce) {
  .previa-anim__cursor {
    animation: none;
  }
}

/* ============ LOJA VIRTUAL: NAVEGAÇÃO EM PILLS ============
   Mesma linguagem das pills da seção Force (.copilot-feat-item), mas sem
   reaproveitar aquela classe de propósito: o handler dela no bundle faz
   querySelectorAll(".copilot-feat-item") SEM escopo, então clicar aqui
   apagaria o estado ativo das pills do Force. Ficando em .feature-tab, o
   handler correto — que busca dentro de .feature-tabs-nav — continua valendo.

   Valores lidos de .copilot-feat-item no build: fundo #1c1c1c, borda branca a
   8%, raio 999px, padding 8/14, ativo #161ba9.

   TUDO !important, e não só padding/border/background: .feature-tab e
   .feature-tabs-nav são componentes do build e vêm com o hack :not(#\#) x8
   (especificidade 8,1,0). Sem !important, width, border-radius, display,
   flex-direction e font-size também são descartados — foi o que aconteceu na
   primeira tentativa, em que as pills continuaram empilhadas em 100% de
   largura. */
.feature-tabs-nav--pills {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.feature-tabs-nav--pills .feature-tab {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  /* padding 12px e ícone 14x14 vêm do bloco "PADRÃO DE BOTÕES", onde esta
     variante foi somada às demais famílias — é o que iguala a altura à das
     pills do Force. */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: #1c1c1c !important;
  transition: background 0.15s, border-color 0.15s;
}

.feature-tabs-nav--pills .feature-tab:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* A regra do build dá raio 10px ao .feature-tab.is-active; aqui continua
   redondo. */
.feature-tabs-nav--pills .feature-tab.is-active {
  border-radius: 999px !important;
  background: #161ba9 !important;
  border-color: #161ba9 !important;
  box-shadow: 0 0 0 1px #161ba9;
}

.feature-tabs-nav--pills .feature-tab-header {
  gap: 7px !important;
}

.feature-tabs-nav--pills .feature-tab-icon {
  color: rgba(255, 255, 255, 0.35) !important;
}

.feature-tabs-nav--pills .feature-tab:hover .feature-tab-icon,
.feature-tabs-nav--pills .feature-tab.is-active .feature-tab-icon {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Na pill o rótulo é sempre branco e nunca quebra linha — é o que diferencia
   do tab vertical, onde o inativo ficava esmaecido. */
.feature-tabs-nav--pills .feature-tab-title {
  font-size: 14px !important;
  font-weight: 400 !important;
  /* 1.5 = 21px, exatamente o line-height computado do .feat-label do Force, e é
     daí que sai a altura de 47px da pill. Nem 1 (pill 7px mais baixa), nem o
     1.4 do build, nem `normal` — que no Red Hat Text dá 19px e deixava 2px de
     diferença para as pills de lá. */
  line-height: 1.5 !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}


/* Alvo de toque de 44px: no layout vertical ele mora no .feature-tab-header
   (bloco 8 de responsive.css). Dentro de uma pill isso somaria com o padding e
   daria 60px de altura — o dobro do desenho. Aqui o alvo passa para o próprio
   botão, igual às pills do Force. */
@media (pointer: coarse) {
  .feature-tabs-nav--pills .feature-tab {
    min-height: 44px !important;
  }
  .feature-tabs-nav--pills .feature-tab-header {
    min-height: 0 !important;
  }
}

/* ============================================================================
   PÁGINA DE OBRIGADO — obrigado.html
   Tela de retorno dos formulários. Cabeçalho e rodapé são os da home; o miolo
   é uma coluna única centrada: anel, título, frase, card do consultor e um CTA.

   REGRA HERDADA DE js/form.js: o envio vai em mode:"no-cors", a resposta é
   opaca e um 500 do servidor chega ao JS como sucesso — ou seja, esta tela
   aparece mesmo quando o lead não chegou. Daí o WhatsApp do card do consultor
   ser obrigatório: é o caminho que salva um envio perdido. O prazo de 10
   minutos foi decisão do cliente, ciente disso.
   ========================================================================== */

.obg-secao {
  padding: 80px 0 !important;
}

.obg-bloco {
  max-width: 620px;
  margin: 0 auto !important;
  text-align: center;
}

/* 28px porque o elemento de cima voltou a ser um selo (o check), que termina
   numa borda dura — o anel, que ficava aqui antes, já trazia ar no próprio
   desenho e pedia 24px. */
.obg-h1 {
  margin-top: 28px !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff !important;
}

.obg-sub {
  margin-top: 16px !important;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ---------- CHECK DE SUCESSO ----------
   Primeiro elemento do bloco. Azul da marca com o traço branco — o mesmo par
   do rodapé desta página (.rodape-azul, #161ba9 com texto branco), para o selo
   ler como Sellum e não como aviso genérico de sistema.

   36px: metade do tamanho da primeira versão. Confirmação não precisa gritar,
   e o título logo abaixo é que carrega o peso da tela.

   A entrada é curta de propósito: um selo que demora a aparecer atrasa a
   leitura da própria confirmação. */
.obg-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #161ba9 !important;
  border: 0 !important;
  color: #ffffff;
  animation: obg-check-entra 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.obg-check svg {
  width: 16px;
  height: 16px;
}

/* O traço é riscado, não revelado por opacidade: o gesto de "marcar" é o que
   dá a sensação de conclusão. 26 cobre o comprimento do path com folga. */
.obg-check__traco {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: obg-check-risca 0.35s ease 0.18s forwards;
}

@keyframes obg-check-entra {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes obg-check-risca {
  to {
    stroke-dashoffset: 0;
  }
}

/* Quem pediu menos movimento vê o check já pronto — o estado final é o mesmo. */
@media (prefers-reduced-motion: reduce) {
  .obg-check {
    animation: none;
  }
  .obg-check__traco {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- CONTAGEM REGRESSIVA (ANEL) ----------
   Mora dentro do card do consultor, abaixo do separador. Sem caixa e sem
   fundo: o peso vem do arco, em branco — o #1b1ba9 da primeira versão só
   funcionava sobre bloco claro; sobre o #080808 do fundo dá 1,5:1 e some.

   Anel de 56px, e não os 80px de quando ele era o selo do topo: aqui ele é
   informação de apoio, não o assunto da tela. */
/* Só o anel: a frase que ficava ao lado saiu. O relógio conta 10 minutos e o
   que ele significa já está dito na linha acima do card. */
.obg-espera {
  flex: none;
}

.obg-anel__grafico {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
}
.obg-anel__grafico svg {
  width: 56px;
  height: 56px;
  /* -90deg põe o início do arco no topo, e não às 3 horas. */
  transform: rotate(-90deg);
}

/* stroke-width 3 no viewBox de 80 desenhado a 56px dá ~2,1px na tela — a mesma
   espessura que os 2 davam quando o anel tinha 80px. */
.obg-anel__trilho,
.obg-anel__arco {
  fill: none;
  stroke-width: 3;
}
.obg-anel__trilho {
  stroke: rgba(255, 255, 255, 0.12);
}
.obg-anel__arco {
  stroke: #ffffff;
  stroke-linecap: round;
  /* 1s linear casa com o passo do setInterval: o arco escorre em vez de pular
     de degrau em degrau a cada segundo. */
  transition: stroke-dashoffset 1s linear;
}

/* font-variant-numeric: tabular-nums trava a largura dos dígitos. Sem isso o
   número dança dentro do anel, porque o 1 é mais estreito que o 8. */
.obg-anel__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #ffffff !important;
}


/* ---------- CARD DO CONSULTOR ---------- */
/* Duas colunas: o relógio à esquerda, quem atende à direita, separadas por um
   fio vertical. Empilha abaixo de 768px, e aí o fio vira horizontal. */
.obg-consultor {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 520px;
  margin: 32px auto 0 !important;
  padding: 14px !important;
  border-radius: 14px;
  border: 1px solid var(--card-borda) !important;
  background: var(--card-bg) !important;
  text-align: left;
}

/* Coluna da esquerda: foto · nome · botão. Fica com a folga que sobrar —
   min-width:0 para o nome poder truncar em vez de empurrar o contador. */
.obg-consultor__pessoa {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Fio no mesmo valor da borda do card. A margem negativa no eixo transversal
   o faz cortar o padding de 14px e ir de ponta a ponta — um separador que pára
   antes da borda parece erro de alinhamento. */
/* height:auto com !important porque o preflight do Tailwind aplica
   `hr { height: 0 }` — sem isto o fio fica com 0px de altura e some, mesmo com
   align-self:stretch. */
.obg-consultor__sep {
  align-self: stretch;
  width: 0;
  height: auto !important;
  margin: -14px 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--card-borda) !important;
}
.obg-consultor__foto {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}
.obg-consultor__txt {
  flex: 1;
  min-width: 0;
}
.obg-consultor__nome {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff !important;
}
.obg-consultor__cargo {
  margin-top: 2px !important;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45) !important;
}
.obg-wa {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px !important;
  border-radius: 999px;
  background: #25d366 !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.obg-wa:hover {
  background: #20be5a !important;
}
.obg-wa svg {
  width: 16px !important;
  height: 16px !important;
}

/* ---------- AÇÕES ---------- */
.obg-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px !important;
}

@media (max-width: 899px) {
  .obg-secao {
    padding: 56px 0 !important;
  }
  .obg-h1 {
    font-size: 32px !important;
  }
  /* Lado a lado só até 768px: abaixo disso as duas colunas não cabem sem
     espremer o nome ou o botão. Empilhado, o fio volta a ser horizontal.

     A ordem também inverte: quem atende volta para cima e o relógio para
     baixo. Empilhado, um anel sozinho no topo lê como carregamento; ao lado da
     pessoa, lê como prazo dela. */
  .obg-consultor {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 460px;
  }

  .obg-consultor__pessoa {
    order: 1;
  }
  .obg-consultor__sep {
    order: 2;
  }
  .obg-espera {
    order: 3;
  }

  .obg-consultor__sep {
    align-self: auto;
    width: auto;
    height: 0 !important;
    margin: 14px -14px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--card-borda) !important;
  }

}

/* ============================================================================
   CENTRAL DE AJUDA · DESENVOLVEDORES · STATUS
   Três páginas novas, mesmo cabeçalho e rodapé da home.
   ========================================================================== */

/* ---------------- CENTRAL DE AJUDA ---------------- */
.ajd-topo {
  padding: 72px 0 48px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.ajd-h1 {
  max-width: 780px;
  margin: 0 auto !important;
  text-align: center;
  font-size: 44px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff !important;
}
/* ---------- CAMPO DE PERGUNTA ----------
   Uma caixa só, com ícone à esquerda e botão à direita — o campo é o assunto
   da página, então ele é maior e mais alto que o .campo__entrada padrão do
   site (56px contra 44px) e usa o azul da marca no foco.

   O botão só acende quando há texto: um seta ligada num campo vazio promete
   uma ação que não acontece. */

.ajd-pergunta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 28px auto 0 !important;
  padding: 0 8px 0 18px !important;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--card-borda) !important;
  background: var(--card-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* :focus-within e não :focus — quem recebe o foco é o input lá dentro. */
.ajd-pergunta:focus-within {
  border-color: var(--color-brand-500, #2228cc) !important;
  box-shadow: 0 0 0 3px rgba(34, 40, 204, 0.18);
}

.ajd-pergunta__ico {
  flex: none;
  display: flex;
  width: 18px;
  height: 18px;
  color: var(--color-brand-400, #4f55d4);
}

.ajd-pergunta__ico svg {
  width: 100%;
  height: 100%;
}

/* Fundo transparente e sem borda: a moldura é do .ajd-pergunta, não do input.
   Os !important cobrem o preflight do Tailwind (ver o topo do arquivo). */
.ajd-pergunta__campo {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: #ffffff !important;
}

.ajd-pergunta__campo::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.ajd-pergunta__campo:focus {
  outline: none;
}

/* O X nativo do type=search destoa do tema escuro */
.ajd-pergunta__campo::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* border-radius com !important: o preflight do Tailwind aplica
   `button { border-radius: 0 }` com especificidade alta — sem isso a pílula
   sai quadrada. Mesma armadilha descrita no topo deste arquivo. */
.ajd-pergunta__botao {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--color-brand-500, #2228cc) !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}

.ajd-pergunta__botao svg {
  width: 18px;
  height: 18px;
}

.ajd-pergunta__botao:hover:not(:disabled) {
  background: #2f36e0 !important;
}

.ajd-pergunta__botao:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- SUGESTÕES ----------
   Pílulas de pergunta. Mesma pílula das abas do site, em tamanho menor. */

.ajd-sugestoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
  margin: 14px auto 0 !important;
}

.ajd-sugestao {
  padding: 7px 14px !important;
  border: 1px solid var(--card-borda) !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ajd-sugestao:hover {
  border-color: var(--card-borda-hover) !important;
  background: var(--card-bg) !important;
  color: #ffffff !important;
}

.ajd-secao {
  padding: 56px 0 88px !important;
}
.ajd-h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #f4f4f4 !important;
}

/* 3 colunas fixas, não auto-fit: com auto-fit a última fila fica órfã quando o
   número de grupos não divide certo — foi o que aconteceu no grid de
   Investidores. Abaixo de 1024px cai para 2, e para 1 no celular. */
.ajd-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px !important;
  /* start, não stretch: um card não estica para acompanhar o vizinho mais alto.
     Com 4, 5 e 7 itens por grupo, esticar deixaria vãos brancos no fim das
     listas curtas. */
  align-items: start;
}

.ajd-grupo {
  padding: 22px !important;
  border-radius: 16px;
  border: 1px solid var(--card-borda) !important;
  background: var(--card-bg) !important;
  transition: border-color 0.2s, background-color 0.2s;
}
.ajd-grupo:hover {
  border-color: var(--card-borda-hover) !important;
  background: var(--card-bg-hover) !important;
}

.ajd-grupo__tit {
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--card-borda) !important;
  font-size: 15px;
  font-weight: 600;
  color: #f4f4f4 !important;
}
.ajd-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px !important;
}
/* Área clicável cheia dentro do card: com o texto solto, só a palavra era
   alvo, e num card a linha inteira parece clicável. */
.ajd-item {
  display: block;
  padding: 7px 10px !important;
  margin: 0 -10px !important;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color 0.15s, background-color 0.15s;
}
.ajd-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}
.ajd-vazio {
  margin-top: 32px !important;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45) !important;
}

@media (max-width: 1023px) {
  .ajd-grade {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  .ajd-grade {
    grid-template-columns: 1fr;
  }
  .ajd-pergunta {
    height: 50px;
    padding-left: 14px !important;
  }

  .ajd-h1 {
    font-size: 32px !important;
  }
}

/* ---------------- DESENVOLVEDORES ---------------- */

/* Cabeçalho próprio, no lugar do cabeçalho do site. 64px contra os 134px de lá:
   numa página que é índice, a altura vale mais como conteúdo. */
.dev-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #080808 !important;
}
.dev-topo__esq {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dev-topo__marca img {
  display: block;
  width: auto !important;
  height: 22px !important;
}
.dev-topo__risco {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.16) !important;
}
.dev-topo__rotulo {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6) !important;
  white-space: nowrap;
}

.dev-topo__voltar {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 36px;
  padding: 0 14px !important;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7) !important;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.dev-topo__voltar:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* O scroll-padding-top global é 150px, calibrado para o cabeçalho do site.
   Aqui a barra tem 64px, e manter os 150 deixaria um buraco ao pular para uma
   âncora. Escopo pelo body via :has, para não vazar para as outras páginas. */
body:has(.dev-topo) {
  scroll-padding-top: 80px;
}


.dev-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  align-items: start;
}

/* sticky logo abaixo da barra de 64px desta página — não dos 134px do
   cabeçalho do site, que aqui não existe. */
.dev-side {
  position: sticky;
  top: 64px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 32px 20px 32px 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.dev-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dev-nav__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px !important;
  border-radius: 8px;
  background: transparent !important;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.dev-nav__cab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}
.dev-nav__chev {
  width: 14px !important;
  height: 14px !important;
  flex: none;
  transition: transform 0.15s;
}
.dev-nav__cab[aria-expanded="true"] .dev-nav__chev {
  transform: rotate(90deg);
}
.dev-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 8px 10px !important;
}
.dev-nav__sub a {
  display: block;
  padding: 6px 10px !important;
  border-radius: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45) !important;
  transition: background-color 0.15s, color 0.15s;
}
.dev-nav__sub a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.dev-conteudo {
  padding: 48px 0 88px 48px !important;
  max-width: 860px;
}
.dev-h1 {
  font-size: 40px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff !important;
}
.dev-sub {
  margin-top: 14px !important;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55) !important;
}
.dev-h2 {
  margin-top: 48px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #f4f4f4 !important;
}
.dev-nota {
  margin-top: 8px !important;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Aviso do que falta. Mesma cor de "a definir" usada na página de obrigado. */
.dev-alerta {
  margin-top: 28px !important;
  padding: 16px 18px !important;
  border-radius: 12px;
  border: 1px dashed rgba(216, 178, 94, 0.35) !important;
  background: rgba(216, 178, 94, 0.06) !important;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6) !important;
}
.dev-alerta strong {
  color: #d8b25e !important;
  font-weight: 600;
}

.dev-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px !important;
}
.dev-card {
  padding: 20px !important;
  border-radius: 16px;
  border: 1px solid var(--card-borda) !important;
  background: var(--card-bg) !important;
  transition: border-color 0.2s;
}
.dev-card:hover {
  border-color: var(--card-borda-hover) !important;
}
.dev-card--pendente {
  border-style: dashed !important;
  background: transparent !important;
}
.dev-card__ico {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.dev-card__ico svg {
  width: 16px !important;
  height: 16px !important;
}
.dev-card__tit {
  margin-top: 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f4f4f4 !important;
}
.dev-card__desc {
  margin-top: 6px !important;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5) !important;
}
.dev-card__desc--pendente strong {
  color: #d8b25e !important;
  font-weight: 600;
}

.dev-mods {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 20px !important;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  overflow: hidden;
}
.dev-mod {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 20px !important;
  background: var(--card-bg) !important;
}
.dev-mod__nome {
  font-size: 14px;
  font-weight: 600;
  color: #f4f4f4 !important;
}
.dev-mod__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dev-tag {
  padding: 4px 10px !important;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 899px) {
  .dev-layout {
    grid-template-columns: 1fr;
  }
  .dev-side {
    position: static;
    max-height: none;
    padding: 24px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .dev-conteudo {
    padding: 32px 0 64px !important;
  }
  .dev-grade,
  .dev-mod {
    grid-template-columns: 1fr;
  }
  .dev-h1 {
    font-size: 30px !important;
  }
}

/* ---------------- STATUS ---------------- */
.st-secao {
  padding: 64px 0 88px !important;
}
.st-largura {
  max-width: 760px !important;
}

.st-banner {
  display: flex;
  gap: 14px;
  padding: 18px 20px !important;
  border-radius: 14px;
  border: 1px solid rgba(216, 178, 94, 0.35) !important;
  background: rgba(216, 178, 94, 0.06) !important;
}
.st-banner__ico {
  flex: none;
  color: #d8b25e !important;
}
.st-banner__ico svg {
  width: 20px !important;
  height: 20px !important;
}
.st-banner__tit {
  font-size: 15px;
  font-weight: 600;
  color: #f4f4f4 !important;
}
.st-banner__txt {
  margin-top: 4px !important;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55) !important;
}

.st-caixa {
  margin-top: 20px !important;
  border-radius: 16px;
  border: 1px solid var(--card-borda) !important;
  background: var(--card-bg) !important;
  overflow: hidden;
}
.st-caixa__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--card-borda) !important;
}
.st-h1 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #f4f4f4 !important;
}
.st-h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #f4f4f4 !important;
}
.st-periodo {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4) !important;
}

.st-comps {
  display: flex;
  flex-direction: column;
}
.st-comp {
  padding: 18px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.st-comp:first-child {
  border-top: 0 !important;
}
.st-comp__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.st-comp__nome {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: #f4f4f4 !important;
}
.st-ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
/* Cinza, não verde: sem sonda não há o que afirmar. */
.st-ponto--sem {
  background: rgba(255, 255, 255, 0.25) !important;
}
.st-comp__uptime {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.4) !important;
}
.st-comp__desc {
  margin-top: 4px !important;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* 90 barras em flex com min-width 0: elas encolhem juntas em vez de estourar a
   caixa em telas estreitas. */
.st-barras {
  display: flex;
  gap: 2px;
  margin-top: 12px !important;
  height: 28px;
}
.st-barra {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08) !important;
}

.st-vazio {
  padding: 20px !important;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45) !important;
}

.st-nota {
  margin-top: 20px !important;
  padding: 16px 18px !important;
  border-radius: 12px;
  border: 1px dashed rgba(216, 178, 94, 0.35) !important;
  background: rgba(216, 178, 94, 0.06) !important;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6) !important;
}
.st-nota strong {
  color: #d8b25e !important;
  font-weight: 600;
}
.st-nota code {
  padding: 1px 5px !important;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08) !important;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75) !important;
}

.st-rodape {
  margin-top: 24px !important;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45) !important;
}
.st-rodape a {
  color: #9aa0ff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 639px) {
  .st-barras {
    height: 22px;
  }
  .st-comp__linha {
    flex-wrap: wrap;
  }
}