/* ==========================================================================
   Design tokens — fonte de verdade: Cores_Home.css / Design_tokens.json
   (não aproximar os valores).
   ========================================================================== */
:root {
  --better-bg-primary: #03091d;
  --better-bg-secondary: #07122b;
  --better-card-bg: rgba(8, 22, 52, 0.72);
  --better-text-primary: #f6f8ff;
  --better-text-secondary: #c5cbe0;
  --better-blue: #296bff;
  --better-violet: #7a4dff;
  --better-magenta: #d645e8;
  --better-border: rgba(115, 132, 190, 0.28);
  --better-gradient: linear-gradient(90deg, #296bff 0%, #7a4dff 55%, #d645e8 100%);
  --better-card-radius: 16px;
  --better-button-radius: 8px;

  --layout-max-width: 1440px;
  --layout-padding-desktop: 64px;
  --layout-padding-tablet: 32px;
  --layout-padding-mobile: 20px;

  --transition-fast: 200ms ease;
  --transition-base: 260ms ease;
}

/* TODO: trocar pelo arquivo oficial quando disponibilizado (WOFF2/WOFF da fonte Better). */
@font-face {
  font-family: "BetterBrand";
  src: url("/wp-content/themes/better-solutions/assets/fonts/better-brand.woff2") format("woff2"),
    url("/wp-content/themes/better-solutions/assets/fonts/better-brand.woff") format("woff");
  font-weight: 400 700;
  font-display: swap;
}

* { box-sizing: border-box; }

html { height: 100%; scroll-behavior: smooth; }
html, body { max-width: 100vw; overflow-x: hidden; }

body {
  min-height: 100%;
  color: var(--better-text-primary);
  font-family: "Inter", Manrope, Arial, sans-serif;
  background: var(--better-bg-primary);
  background-image:
    /* Estrelas: três "camadas" de tamanho/brilho diferente (bem pequenas e
       discretas, médias, e algumas poucas maiores/mais brilhantes como
       âncoras visuais) — é essa variação que lê como "galáxia" em vez de
       um padrão de pontos uniforme. Cada camada repete num tile de tamanho
       distinto pra não parecer uma grade mecânica ao rolar a página. */
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(246, 248, 255, 0.9), transparent 100%),
    radial-gradient(2px 2px at 82% 15%, rgba(197, 203, 224, 0.85), transparent 100%),
    radial-gradient(1.8px 1.8px at 45% 78%, rgba(246, 248, 255, 0.85), transparent 100%),
    radial-gradient(0.9px 0.9px at 10% 20%, rgba(246, 248, 255, 0.7), transparent 100%),
    radial-gradient(0.9px 0.9px at 32% 68%, rgba(246, 248, 255, 0.6), transparent 100%),
    radial-gradient(0.9px 0.9px at 58% 12%, rgba(197, 203, 224, 0.65), transparent 100%),
    radial-gradient(1.2px 1.2px at 78% 45%, rgba(246, 248, 255, 0.7), transparent 100%),
    radial-gradient(0.9px 0.9px at 92% 82%, rgba(197, 203, 224, 0.6), transparent 100%),
    radial-gradient(0.9px 0.9px at 15% 88%, rgba(246, 248, 255, 0.55), transparent 100%),
    radial-gradient(1.2px 1.2px at 45% 35%, rgba(197, 203, 224, 0.65), transparent 100%),
    radial-gradient(0.9px 0.9px at 70% 92%, rgba(246, 248, 255, 0.6), transparent 100%),
    radial-gradient(0.9px 0.9px at 25% 5%, rgba(197, 203, 224, 0.55), transparent 100%),
    radial-gradient(0.9px 0.9px at 88% 60%, rgba(246, 248, 255, 0.6), transparent 100%),
    radial-gradient(0.9px 0.9px at 5% 55%, rgba(197, 203, 224, 0.5), transparent 100%),
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(41, 107, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 900px 600px at 85% 10%, rgba(214, 69, 232, 0.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(197, 203, 224, 0.035) 0px, rgba(197, 203, 224, 0.035) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(0deg, rgba(197, 203, 224, 0.035) 0px, rgba(197, 203, 224, 0.035) 1px, transparent 1px, transparent 96px),
    linear-gradient(180deg, var(--better-bg-primary) 0%, var(--better-bg-secondary) 100%);
  background-size:
    340px 340px, 460px 460px, 400px 400px,
    420px 420px, 420px 420px, 560px 560px, 560px 560px,
    480px 480px, 380px 380px, 620px 620px, 500px 500px,
    300px 300px, 340px 340px, 380px 380px,
    auto, auto, auto, auto, auto;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, h1, h2, h3, h4, p, figure { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
main { position: relative; display: block; }

.bt-brandFont { font-family: "BetterBrand", "Orbitron", "Eurostile Extended", sans-serif; }

.bt-gradientText {
  background: var(--better-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bt-gradientGlow {
  text-shadow: 0 0 46px rgba(122, 77, 255, 0.4), 0 0 90px rgba(214, 69, 232, 0.18);
}

.bt-container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding-inline: var(--layout-padding-desktop);
}

@media (max-width: 1023px) {
  .bt-container { padding-inline: var(--layout-padding-tablet); }
}
@media (max-width: 767px) {
  .bt-container { padding-inline: var(--layout-padding-mobile); }
}

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

/* ==========================================================================
   Botões
   ========================================================================== */
.bt-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--better-button-radius);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}
.bt-button--primary { background: var(--better-gradient); color: var(--better-text-primary); border: 1px solid transparent; }
.bt-button--primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 8px 28px -6px rgba(122,77,255,0.55); transform: translateY(-1px); }
.bt-button--secondary { background: transparent; color: var(--better-text-primary); border: 1px solid var(--better-violet); }
.bt-button--secondary:hover { background: rgba(122,77,255,0.12); border-color: var(--better-magenta); transform: translateY(-1px); }
.bt-button__icon { transition: transform var(--transition-fast); }
.bt-button--primary:hover .bt-button__icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .bt-button--primary:hover, .bt-button--secondary:hover { transform: none; }
  .bt-button--primary:hover .bt-button__icon { transform: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.bt-header {
  /* position:sticky dependia do body não virar seu próprio contexto de
     rolagem — mas html/body têm overflow-x:hidden (pra impedir scroll
     horizontal), e isso força o overflow-y a "auto" por spec, o que em
     alguns navegadores quebra o sticky (ele passa a colar no body, não na
     viewport, e no fim das contas não gruda visualmente em lugar nenhum).
     position:fixed não depende disso — sempre relativo à viewport. Em troca,
     sai do fluxo normal, então main.php ganha padding-top compensando a
     altura do header (ver .bt-mainOffset). */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(3, 9, 29, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--better-border);
}
.bt-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }

/* Compensa o header ter saído do fluxo normal (position:fixed). O valor
   bate com a altura real do header fechado: padding-block 18+18 + logo 38 +
   borda 1 = 75px; arredondado com uma pequena folga. */
.bt-mainOffset { padding-top: 78px; }
@media (max-width: 767px) {
  .bt-mainOffset { padding-top: 70px; }
}
.bt-header__brand { display: flex; align-items: center; }
.bt-header__logo { height: 38px; width: auto; }
.bt-header__nav { display: flex; align-items: center; gap: 36px; }
.bt-header__navList { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.bt-header__navLink { position: relative; font-size: 14px; font-weight: 500; color: var(--better-text-secondary); padding-bottom: 6px; transition: color var(--transition-fast); }
.bt-header__navLink:hover { color: var(--better-text-primary); }
.bt-header__navLink--active { color: var(--better-text-primary); }
.bt-header__navLink--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--better-gradient); border-radius: 2px; }
.bt-header__actions { display: flex; align-items: center; gap: 20px; }
.bt-header__contactButton { padding: 10px 20px; border-radius: var(--better-button-radius); border: 1px solid var(--better-border); font-size: 14px; font-weight: 600; transition: border-color var(--transition-fast), color var(--transition-fast); }
.bt-header__contactButton:hover { border-color: var(--better-violet); color: var(--better-text-primary); }

.bt-langSelect { position: relative; }
.bt-langSelect__button { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--better-text-secondary); background: none; border: none; cursor: pointer; }
.bt-langSelect__button svg { transition: transform var(--transition-fast); }
.bt-langSelect.is-open .bt-langSelect__button svg { transform: rotate(180deg); }
.bt-langSelect__menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 160px; list-style: none; margin: 0; background: var(--better-bg-secondary); border: 1px solid var(--better-border); border-radius: 10px; padding: 6px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6); }
.bt-langSelect__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 6px; background: none; border: none; font-size: 14px; color: var(--better-text-primary); text-align: left; cursor: pointer; transition: background var(--transition-fast); }
.bt-langSelect__option:hover { background: rgba(122,77,255,0.14); }
.bt-langSelect__option[aria-selected="true"] { color: var(--better-blue); font-weight: 600; }

.bt-menuToggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; }
.bt-menuToggle span { display: block; width: 22px; height: 2px; background: var(--better-text-primary); margin: 5px 0; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.bt-menuToggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bt-menuToggle.is-open span:nth-child(2) { opacity: 0; }
.bt-menuToggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.bt-mobilePanel__inner { display: flex; flex-direction: column; gap: 4px; padding-block: 12px 20px; border-top: 1px solid var(--better-border); }
.bt-mobilePanel__link { padding: 12px 4px; font-size: 15px; font-weight: 500; color: var(--better-text-secondary); border-bottom: 1px solid rgba(115,132,190,0.14); }
.bt-mobilePanel__link--active { color: var(--better-text-primary); }
.bt-mobilePanel__contact { margin-top: 12px; text-align: center; }

@media (max-width: 1023px) {
  .bt-header__nav, .bt-header__contactButton { display: none; }
  .bt-menuToggle { display: block; }
}

/* ==========================================================================
   Hero — cena cinematográfica full-bleed (a Katrina ocupa a largura toda
   atrás do texto, não uma coluna isolada) com scrim pra legibilidade.
   ========================================================================== */
.bt-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 96px 64px;
}

.bt-heroBackdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bt-heroBackdrop__svg { width: 100%; height: 100%; }
.bt-heroBackdrop__particle { animation: bt-particlePulse 3s ease-in-out infinite; }
.bt-heroBackdrop__particle:nth-child(3n) { animation-delay: .6s; }
.bt-heroBackdrop__particle:nth-child(4n) { animation-delay: 1.1s; }
@keyframes bt-particlePulse { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

.bt-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.bt-hero__katrinaImage {
  /* Largura amarrada ao viewport (não à altura do hero) — é isso que garante
     que o rosto dela nunca chegue perto do texto: em telas estreitas a
     imagem inteira encolhe junto, em vez de manter a largura e empurrar o
     rosto pra esquerda por baixo do texto. */
  width: min(72vw, 1080px);
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 30px 80px rgba(4, 10, 30, 0.5));
  /* katrina-hero-horizontal.png não é 100% transparente até a borda — sobra
     uma faixa opaca sólida perto do canto inferior esquerdo (checado pixel a
     pixel: alpha=255 na última linha, sem transição). A máscara funde essa
     borda com o fundo escuro da seção em vez de deixar um corte reto. */
  -webkit-mask-image:
    linear-gradient(to left, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
}

.bt-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, var(--better-bg-primary) 0%, rgba(3,9,29,0.94) 30%, rgba(3,9,29,0.55) 55%, rgba(3,9,29,0.1) 75%, transparent 90%);
}

.bt-hero__content {
  /* .bt-hero-scrim é position:absolute (z-index:2); sem position+z-index
     aqui, este bloco fica sem contexto de empilhamento próprio e o scrim
     pinta por cima do texto (elementos posicionados sempre pintam depois
     dos estáticos, independente da ordem no HTML) — daí o texto "lavado". */
  position: relative;
  z-index: 3;
  /* .bt-container traz margin:0 auto (pra centralizar o container de 1440px
     nas outras seções). Em telas >1568px isso desloca o texto delas ~39,5px
     além do padding — mas .bt-hero é flex, e "margin:auto" nesse contexto
     centraliza o item usando o espaço livre da LINHA INTEIRA do flex (bem
     mais que 39,5px), não o espaço livre do container de 1440px. Por isso
     não dá pra só devolver margin:0 auto — reproduz aqui o mesmo deslocamento
     que .bt-container aplicaria (via margin-left calculado, não "auto"), sem
     acionar essa centralização do flex. Resultado: alinha com as outras
     seções em qualquer largura, sem voltar a "pular" pro centro do hero. */
  margin: 0;
  /* % em margin de item flex resolve contra a largura real do .bt-hero (que
     já exclui a barra de rolagem) — usar 100vw aqui erra por ~metade da
     largura da scrollbar, porque a unidade vw a inclui em vários navegadores.
     50% desse container = metade da largura real da tela; -720px (metade do
     max-width:1440 do .bt-container) dá a mesma sobra que o margin:auto do
     .bt-container aplicaria nas outras seções. */
  margin-left: max(0px, calc(50% - 720px));
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  /* Medido contra a largura real da imagem: o cabelo dela começa a 27% da
     largura da foto (não ~44% como uma estimativa visual sugeriria), então
     a coluna de texto precisa ser mais estreita do que parece necessário
     à primeira vista pra nunca alcançar essa marca. Cada valor abaixo foi
     validado contra a largura renderizada de "TORNAMOS SIMPLES" / "O
     COMPLEXO." pra não quebrar linha de um jeito estranho. */
  max-width: 560px;
}

/* O headline fica sobre a foto/textura do hero, que varia bastante de brilho
   atrás das letras e derruba o contraste em alguns pontos. Em vez de mudar
   cor/paleta, um vinheta escura sutil (só --better-bg-primary, já existente)
   atrás do texto resolve sem introduzir nada novo na paleta. */
.bt-hero__titleGroup { position: relative; }
.bt-hero__titleGroup::before {
  content: "";
  position: absolute;
  inset: -20px -28px;
  z-index: -1;
  background: radial-gradient(ellipse 100% 100% at 25% 50%, rgba(3, 9, 29, 0.82) 0%, rgba(3, 9, 29, 0.5) 55%, transparent 85%);
  filter: blur(6px);
}
.bt-hero__eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.bt-hero__headline { font-size: clamp(36px, 4.8vw, 58px); line-height: 1.06; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.bt-hero__support { font-size: 16px; line-height: 1.6; color: var(--better-text-secondary); max-width: 46ch; }
.bt-hero__ctas { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

@media (max-width: 1279px) {
  .bt-hero__content { max-width: 500px; }
  .bt-hero__katrinaImage { width: min(52vw, 620px); }
}
@media (max-width: 1023px) {
  .bt-hero { min-height: 560px; padding-block: 80px 56px; }
  .bt-hero__content { max-width: 420px; }
  .bt-hero__katrinaImage { width: min(46vw, 460px); opacity: .8; }
  .bt-hero__scrim { background: linear-gradient(90deg, var(--better-bg-primary) 0%, rgba(3,9,29,0.94) 45%, rgba(3,9,29,0.7) 70%, rgba(3,9,29,0.35) 100%); }
}
@media (max-width: 767px) {
  /* Mobile: nada de imagem atrás do texto — ela vira um bloco próprio,
     abaixo do conteúdo, exatamente como no layout aprovado originalmente
     (texto primeiro, Katrina depois), pra nunca competir com a leitura. */
  .bt-hero { min-height: 0; flex-direction: column; align-items: stretch; padding-block: 40px 32px; }
  .bt-hero__visual {
    position: relative;
    inset: auto;
    order: 2;
    justify-content: center;
    opacity: 1;
    margin-top: 28px;
  }
  .bt-hero__katrinaImage { width: min(78vw, 340px); max-height: none; }
  .bt-hero__scrim { display: none; }
  .bt-hero__content { order: 1; }
  .bt-hero__content { max-width: none; }
  .bt-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .bt-hero__ctas > * { justify-content: center; }
}

/* ==========================================================================
   Presença Global
   ========================================================================== */
.bt-globalPresence { padding-block: 88px; position: relative; z-index: 1; }
.bt-globalPresence__grid { display: grid; grid-template-columns: 30% 70%; align-items: center; gap: 48px; }
.bt-globalPresence__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.bt-globalPresence__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--better-blue); margin: 0; }
.bt-globalPresence__headline { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2; font-weight: 700; color: var(--better-text-primary); }
.bt-globalPresence__body { font-size: 15px; line-height: 1.7; color: var(--better-text-secondary); max-width: 44ch; }

/* Sem card/fundo — o mapa fica direto na seção. Um glow radial (mesmas cores
   da marca) atrás dele é o que dá presença, no lugar da caixa/borda. */
.bt-globalPresence__mapWrap {
  position: relative;
  padding: 12px 0;
}
.bt-worldMap { position: relative; z-index: 1; }
.bt-worldMap__glow {
  position: absolute;
  inset: -15%;
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 55% at 30% 55%, rgba(41, 107, 255, 0.24), transparent 70%),
    radial-gradient(ellipse 30% 40% at 62% 30%, rgba(122, 77, 255, 0.16), transparent 70%);
  pointer-events: none;
}

.bt-worldMap__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Continentes preenchidos (silhueta real, não mais pontos) — tom neutro e
   discreto pra não competir com os pinos, que são o elemento de destaque. */
.bt-worldMap__land { fill: rgba(41, 107, 255, 0.16); stroke: rgba(115, 132, 190, 0.4); stroke-width: 1.5; }

.bt-worldMap__connections { fill: none; }
.bt-worldMap__connections path {
  stroke: url(#bt-pinFill);
  stroke-width: 3;
  opacity: 0.55;
  stroke-dasharray: 2 14;
  stroke-linecap: round;
}

.bt-worldMap__pinShadow { fill: rgba(0, 0, 0, 0.35); }
.bt-worldMap__pinBody { fill: url(#bt-pinFill); filter: drop-shadow(0 0 14px rgba(122, 77, 255, 0.65)); }
.bt-worldMap__pinDot { fill: var(--better-text-primary); }
.bt-worldMap__pinFloat { animation: bt-pinFloat 3s ease-in-out infinite; }
.bt-worldMap__pinFloat--hub { animation-duration: 2.4s; }
.bt-worldMap__node:nth-child(3n) .bt-worldMap__pinFloat { animation-delay: .4s; }
.bt-worldMap__node:nth-child(4n) .bt-worldMap__pinFloat { animation-delay: .8s; }
@keyframes bt-pinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 767px) {
  .bt-globalPresence__mapWrap { padding: 4px 0; }
}

.bt-worldMap__node { cursor: pointer; outline: none; }
.bt-worldMap__node:hover .bt-worldMap__pinBody,
.bt-worldMap__node:focus-visible .bt-worldMap__pinBody,
.bt-worldMap__node.is-active .bt-worldMap__pinBody {
  filter: drop-shadow(0 0 22px rgba(214, 69, 232, 0.85));
}
.bt-worldMap__node:focus-visible { outline: none; }
.bt-worldMap__node:focus-visible .bt-worldMap__pinBody { stroke: var(--better-text-primary); stroke-width: 3; }
.bt-worldMap__hit { pointer-events: all; }

.bt-worldMap__tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(0.92);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--better-bg-secondary);
  border: 1px solid var(--better-border);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--better-text-primary);
  white-space: nowrap;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 5;
}
.bt-worldMap__tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--better-bg-secondary);
}
.bt-worldMap__tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 20px)) scale(1);
}
.bt-worldMap__tooltipTag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--better-blue);
  background: rgba(41, 107, 255, 0.16);
  padding: 2px 7px;
  border-radius: 999px;
}

@media (max-width: 1023px) {
  .bt-globalPresence__grid { grid-template-columns: 44% 56%; gap: 24px; }
}
@media (max-width: 767px) {
  .bt-globalPresence { padding-block: 48px; }
  /* align-items:center do desktop (pra centralizar as duas colunas do grid
     verticalmente) sobrevive pro flex-column do mobile e vira "centralizar
     cada bloco horizontalmente" — por isso o texto saía descolado da borda
     esquerda. stretch devolve o comportamento de bloco normal. */
  .bt-globalPresence__grid { display: flex; flex-direction: column; align-items: stretch; }
  .bt-globalPresence__mapWrap { margin-top: 8px; }
}

/* ==========================================================================
   Barra de indicadores
   ========================================================================== */
.bt-statsBar { padding-block: 8px 0; position: relative; z-index: 1; }
.bt-statsBar__bar { display: flex; align-items: center; background: var(--better-card-bg); border: 1px solid var(--better-border); border-radius: var(--better-card-radius); padding: 22px 8px; }
.bt-statsBar__item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding-inline: 20px; text-align: left; }
.bt-statsBar__icon { flex-shrink: 0; color: var(--better-blue); }
.bt-statsBar__label { font-size: 14px; font-weight: 600; color: var(--better-text-primary); line-height: 1.3; }
.bt-statsBar__divider { width: 1px; align-self: stretch; background: var(--better-border); }

@media (max-width: 1023px) {
  .bt-statsBar__bar { flex-wrap: wrap; row-gap: 20px; }
  .bt-statsBar__item { flex: 1 1 45%; justify-content: flex-start; }
  .bt-statsBar__divider { display: none; }
}
@media (max-width: 767px) {
  .bt-statsBar__item { flex: 1 1 100%; padding-block: 6px; }
}

/* ==========================================================================
   Soluções
   ========================================================================== */
/* scroll-margin-top compensa o header fixo (78px, 70px no mobile) quando o
   link "Soluções" do menu faz um scroll de âncora até aqui. */
.bt-solutions { padding-block: 72px 64px; position: relative; z-index: 1; scroll-margin-top: 92px; }
@media (max-width: 767px) {
  .bt-solutions { scroll-margin-top: 84px; }
}
.bt-solutions__headline { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--better-text-primary); margin-bottom: 32px; }
.bt-solutions__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

.bt-solutionCard { position: relative; display: flex; flex-direction: column; gap: 18px; height: 100%; padding: 26px 22px 22px; background: var(--better-card-bg); border: 1px solid var(--better-border); border-radius: var(--better-card-radius); overflow: hidden; transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.bt-solutionCard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--better-gradient); opacity: .7; }
.bt-solutionCard:hover { transform: translateY(-4px); border-color: rgba(122,77,255,0.5); box-shadow: 0 16px 40px -18px rgba(41,107,255,0.4); }
.bt-solutionCard__iconSlot { display: flex; align-items: center; min-height: 44px; }
.bt-solutionCard__logoBadge { display: inline-flex; align-items: center; background: #f6f8ff; border-radius: 8px; padding: 7px 12px; }
.bt-solutionCard__iconFrame { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(122,77,255,0.12); border: 1px solid rgba(122,77,255,0.24); }
.bt-solutionCard__lineIcon { color: var(--better-blue); }
.bt-solutionCard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bt-solutionCard__name { font-size: 17px; font-weight: 700; color: var(--better-text-primary); }
.bt-solutionCard__description { font-size: 13.5px; line-height: 1.55; color: var(--better-text-secondary); }
.bt-solutionCard__arrow { align-self: flex-end; color: var(--better-text-secondary); transition: color var(--transition-fast), transform var(--transition-fast); }
.bt-solutionCard:hover .bt-solutionCard__arrow { color: var(--better-text-primary); transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .bt-solutionCard:hover { transform: none; }
  .bt-solutionCard:hover .bt-solutionCard__arrow { transform: none; }
}
@media (max-width: 1279px) { .bt-solutions__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1023px) { .bt-solutions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .bt-solutions { padding-block: 48px 56px; }
  .bt-solutions__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(var(--layout-padding-mobile) * -1); padding-inline: var(--layout-padding-mobile); }
  .bt-solutions__grid > * { scroll-snap-align: start; }
}

/* ==========================================================================
   Clientes / Parceiros
   ========================================================================== */
.bt-clients { padding-block: 8px 72px; position: relative; z-index: 1; }
.bt-clients__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-align: center; color: var(--better-text-secondary); margin-bottom: 28px; }
.bt-clients__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; }
.bt-clients__logo { width: 76px; height: 76px; border-radius: 999px; overflow: hidden; opacity: .9; transition: opacity var(--transition-base), transform var(--transition-base); background: #f6f8ff; border: 1px solid var(--better-border); }
.bt-clients__logo:hover { opacity: 1; transform: translateY(-2px); }
.bt-clients__logo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  .bt-clients { padding-block: 0 48px; }
  .bt-clients__grid { gap: 18px; }
  .bt-clients__logo { width: 60px; height: 60px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.bt-footer { border-top: 1px solid var(--better-border); margin-top: 40px; padding-block: 56px 32px; position: relative; z-index: 1; }
.bt-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.bt-footer__brandCol { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.bt-footer__logo { height: 30px; width: auto; }
.bt-footer__tagline { font-size: 13.5px; line-height: 1.6; color: var(--better-text-secondary); max-width: 32ch; }
.bt-footer__social { display: flex; gap: 10px; margin-top: 6px; }
.bt-footer__socialLink { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--better-border); color: var(--better-text-secondary); transition: border-color var(--transition-fast), color var(--transition-fast); }
.bt-footer__socialLink:hover { border-color: var(--better-violet); color: var(--better-text-primary); }
.bt-footer__colTitle { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--better-text-primary); margin-bottom: 16px; }
.bt-footer__linkList { display: flex; flex-direction: column; gap: 12px; }
.bt-footer__link { font-size: 14px; color: var(--better-text-secondary); transition: color var(--transition-fast); }
.bt-footer__link:hover { color: var(--better-text-primary); }
.bt-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--better-border); flex-wrap: wrap; }
.bt-footer__copyright { font-size: 13px; color: var(--better-text-secondary); }
.bt-footer__legalLinks { display: flex; gap: 20px; }
.bt-footer__legalLink { font-size: 13px; color: var(--better-text-secondary); transition: color var(--transition-fast); }
.bt-footer__legalLink:hover { color: var(--better-text-primary); }

/* Aviso do reCAPTCHA — anexado pelo PHP (functions.php) logo após o
   conteúdo de qualquer página com formulário do WPForms. */
.bt-recaptchaNote {
  margin-top: 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--better-text-secondary);
  opacity: 0.7;
}
.bt-recaptchaNote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bt-recaptchaNote a:hover { color: var(--better-text-primary); }

@media (max-width: 1023px) {
  .bt-footer__top { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .bt-footer__brandCol { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .bt-footer { padding-block: 40px 24px; }
  .bt-footer__top { grid-template-columns: 1fr; }
  .bt-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Revelação ao rolar a página — só ativa se o JS confirmar que está rodando
   (classe .js no <html>), pra nunca deixar conteúdo escondido sem JS.
   Delay escalonado via --bt-i, setado inline em cada item pelo PHP.
   ========================================================================== */
.js [data-bt-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
  transition-delay: calc(var(--bt-i, 0) * 70ms);
}
.js [data-bt-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Contador animado da barra de indicadores
   ========================================================================== */
[data-bt-counter] { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Selo do Google reCAPTCHA v3 (.grecaptcha-badge) — injetado automaticamente
   pelo Google (via WPForms). Ocultado a pedido (ficava atrás do WhatsApp/
   pop-up de leads no canto). O Google permite ocultar via CSS DESDE QUE o
   texto de atribuição apareça em algum lugar visível do site — por isso o
   aviso "Este site é protegido por reCAPTCHA…" foi incluído no rodapé
   (ver footer.php). Removendo esse aviso, o selo tem que voltar a aparecer.
   ========================================================================== */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ==========================================================================
   Botão flutuante de WhatsApp — verde oficial (reconhecimento imediato),
   anel/glow nas cores da marca pra não destoar do resto do site. Pulsa bem
   devagar e para de vez em quando (não fica "gritando" a hora toda).
   ========================================================================== */
.bt-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), padding-right var(--transition-base);
}
.bt-whatsapp:hover,
.bt-whatsapp:focus-visible {
  padding-right: 18px;
}
.bt-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(122, 77, 255, 0.35);
}
.bt-whatsapp__icon {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}
.bt-whatsapp__ping {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #25d366;
  animation: bt-whatsappPing 2.8s cubic-bezier(0.2, 0.7, 0.4, 1) infinite;
}
@keyframes bt-whatsappPing {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
.bt-whatsapp__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: max-width var(--transition-base), opacity var(--transition-base);
}
.bt-whatsapp:hover .bt-whatsapp__label,
.bt-whatsapp:focus-visible .bt-whatsapp__label {
  max-width: 160px;
  opacity: 1;
}
.bt-whatsapp:focus-visible {
  outline: 2px solid var(--better-text-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bt-whatsapp__ping { animation: none; opacity: 0; }
  .bt-whatsapp:hover { transform: none; }
}

@media (max-width: 767px) {
  .bt-whatsapp { right: 16px; bottom: 16px; height: 52px; }
  .bt-whatsapp__icon { width: 52px; height: 52px; }
  /* No mobile o texto nunca aparece por hover (não existe hover de verdade
     em touch) — melhor nem reservar o espaço/transição. */
  .bt-whatsapp__label { display: none; }
}

/* ==========================================================================
   Estrelas com brilho pulsante — fixas na tela (não rolam com a página),
   atrás de tudo, só umas poucas unidades pra reforçar a sensação de galáxia
   junto com as estrelas estáticas do fundo (body). Nunca por cima do
   conteúdo, nunca chamando mais atenção que ele.
   ========================================================================== */
.bt-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bt-starfield__star {
  position: absolute;
  border-radius: 999px;
  background: var(--better-text-primary);
  box-shadow: 0 0 6px 1px rgba(246, 248, 255, 0.6);
  animation: bt-starTwinkle 3.6s ease-in-out infinite;
}
@keyframes bt-starTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.95; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-starfield__star { animation: none; opacity: 0.5; }
}

/* ==========================================================================
   Pop-up de geração de leads (carrossel Katrina / SMD / Webbie)
   Card ancorado no canto inferior direito (like totvs.com), sem backdrop —
   fica sobre a página sem bloquear o resto do conteúdo. Empilhado acima do
   botão de WhatsApp (24px + 56px + 16px de respiro = 96px do rodapé).
   ========================================================================== */
.bt-leadPopup {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 70;
  width: min(316px, calc(100vw - 32px));
}
.bt-leadPopup[hidden] { display: none; }

.bt-leadPopup__card {
  position: relative;
  overflow: hidden;
  background: var(--better-bg-secondary);
  border: 1px solid var(--better-border);
  border-radius: var(--better-card-radius);
  padding: 26px 20px 20px;
  box-shadow: 0 30px 70px -16px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.bt-leadPopup__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--better-gradient);
  border-radius: 2px;
}
/* Forma diagonal decorativa no canto, como no card da TOTVS — z-index
   negativo pra ficar atrás do texto sem precisar envolver o conteúdo
   inteiro numa camada própria (o card já cria contexto de empilhamento
   por causa do transform acima). */
.bt-leadPopup__accent {
  position: absolute;
  top: -25%;
  right: -15%;
  width: 65%;
  height: 130%;
  background: var(--better-gradient);
  opacity: 0.16;
  clip-path: polygon(38% 0%, 100% 0%, 100% 100%, 68% 100%);
  z-index: -1;
  pointer-events: none;
}

.bt-leadPopup.is-visible .bt-leadPopup__card { opacity: 1; transform: translateY(0) scale(1); }

.bt-leadPopup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(197, 203, 224, 0.08);
  border: 1px solid var(--better-border);
  color: var(--better-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.bt-leadPopup__close:hover { color: var(--better-text-primary); border-color: var(--better-violet); }

.bt-leadPopup__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--better-blue);
  margin: 0 26px 6px 0;
}
.bt-leadPopup__title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--better-text-primary);
  margin: 0 26px 18px 0;
}

.bt-leadPopup__carousel { position: relative; overflow: hidden; }
.bt-leadPopup__track {
  display: flex;
  /* Cada slide é 100% DESTA largura, e essa largura é slide-count vezes a
     do carrossel visível — sem isso, "flex: 0 0 100%" resolve contra a
     largura do carrossel (não da trilha inteira) e os 3 slides ficam lado
     a lado, todos "cabendo" ao mesmo tempo em vez de empilhados pra rolar. */
  width: calc(var(--bt-slide-count, 3) * 100%);
  transition: transform var(--transition-base);
}
.bt-leadPopup__slide {
  flex: 0 0 calc(100% / var(--bt-slide-count, 3));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding-inline: 6px;
}

.bt-leadPopup__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
  border-radius: 999px;
}
.bt-leadPopup__media--avatar {
  background: linear-gradient(180deg, rgba(122, 77, 255, 0.25), rgba(41, 107, 255, 0.1));
  border: 1px solid var(--better-border);
  overflow: hidden;
}
.bt-leadPopup__media--avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bt-leadPopup__media--logo {
  background: #f6f8ff;
  padding: 11px;
}
.bt-leadPopup__media--logo img { width: 100%; height: 100%; object-fit: contain; }

.bt-leadPopup__slideEyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--better-text-secondary);
  margin: 0;
}
.bt-leadPopup__slideName {
  font-size: 15px;
  font-weight: 700;
  color: var(--better-text-primary);
  margin: 0;
}
.bt-leadPopup__slideDescription {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--better-text-secondary);
  margin: 0;
}

.bt-leadPopup__arrow {
  position: absolute;
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--better-card-bg);
  border: 1px solid var(--better-border);
  color: var(--better-text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.bt-leadPopup__arrow:hover { border-color: var(--better-violet); background: rgba(122, 77, 255, 0.14); }
.bt-leadPopup__arrow--prev { left: -4px; }
.bt-leadPopup__arrow--next { right: -4px; }

.bt-leadPopup__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}
.bt-leadPopup__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--better-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), width var(--transition-fast);
}
.bt-leadPopup__dot.is-active { width: 18px; background: var(--better-gradient); }

.bt-leadPopup__cta { width: 100%; justify-content: center; margin-top: 18px; }

@media (max-width: 767px) {
  .bt-leadPopup { right: 16px; bottom: 80px; width: min(288px, calc(100vw - 24px)); }
}

/* ==========================================================================
   Página Sobre Nós (page-sobre-nos.php) — card MIGRATION-1594
   ========================================================================== */
.bt-aboutHero {
  /* Propositalmente SEM display:flex aqui: .bt-aboutHero__content herda
     margin:0 auto de .bt-container, e isso só alinha certo com o resto da
     página em fluxo de bloco normal — dentro de flex, esse margin:auto
     centraliza contra a largura toda da flex-row (mesma armadilha já
     documentada no hero da home). Centralização vertical vem só do
     padding-block, sem precisar de flex. */
  position: relative;
  overflow: hidden;
  padding-block: 156px 64px;
}
/* Aurora do hero: 3 faixas de luz borradas, deriva lenta e independente
   entre elas, mix-blend-mode:screen pra se misturarem como luz de verdade
   em vez de "chapar" umas nas outras. Fica atrás do texto (z-index abaixo
   de .bt-aboutHero__content), concentrada na metade direita — onde não tem
   nenhum outro elemento nesse hero. */
.bt-aboutHero__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.bt-aboutHero__auroraBand {
  position: absolute;
  top: 50%;
  left: 68%;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.42;
  transform: translate(-50%, -50%);
}
.bt-aboutHero__auroraBand--blue {
  background: radial-gradient(circle, var(--better-blue) 0%, transparent 68%);
  transform: translate(-72%, -66%);
  animation: bt-auroraDriftA 16s ease-in-out infinite;
}
.bt-aboutHero__auroraBand--violet {
  background: radial-gradient(circle, var(--better-violet) 0%, transparent 68%);
  transform: translate(-38%, -40%);
  animation: bt-auroraDriftB 20s ease-in-out infinite;
}
.bt-aboutHero__auroraBand--magenta {
  background: radial-gradient(circle, var(--better-magenta) 0%, transparent 68%);
  width: 38vw;
  height: 38vw;
  max-width: 480px;
  max-height: 480px;
  transform: translate(-30%, -78%);
  animation: bt-auroraDriftC 18s ease-in-out infinite;
}
@keyframes bt-auroraDriftA {
  0%, 100% { transform: translate(-72%, -66%) scale(1); }
  50% { transform: translate(-62%, -58%) scale(1.12); }
}
@keyframes bt-auroraDriftB {
  0%, 100% { transform: translate(-38%, -40%) scale(1); }
  50% { transform: translate(-46%, -48%) scale(1.08); }
}
@keyframes bt-auroraDriftC {
  0%, 100% { transform: translate(-30%, -78%) scale(1); }
  50% { transform: translate(-22%, -70%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-aboutHero__auroraBand { animation: none; }
}
@media (max-width: 1023px) {
  .bt-aboutHero__aurora { opacity: 0.7; }
}
@media (max-width: 767px) {
  .bt-aboutHero__aurora { display: none; }
}

/* IMPORTANTE: nunca somar um max-width menor aqui — esse elemento já é
   .bt-container (margin:0 auto), então um max-width próprio faria o
   margin:auto recentralizar uma caixa mais estreita no meio da SEÇÃO
   inteira em vez de alinhar à esquerda junto com o resto da página (foi
   exatamente o bug relatado: hero "desalinhado" da home). A largura de
   leitura confortável já vem do max-width em ch nos parágrafos abaixo. */
.bt-aboutHero__content { position: relative; z-index: 1; }
.bt-aboutHero__headline {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.12;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  max-width: 16ch;
}
.bt-aboutHero__support { font-size: 17px; line-height: 1.6; color: var(--better-text-primary); max-width: 60ch; margin-bottom: 12px; }
.bt-aboutHero__lead { font-size: 15px; line-height: 1.7; color: var(--better-text-secondary); max-width: 62ch; margin-bottom: 32px; }
.bt-aboutHero__ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 767px) {
  .bt-aboutHero { padding-block: 96px 48px; }
  .bt-aboutHero__headline { max-width: none; }
  .bt-aboutHero__ctas { flex-direction: column; align-items: stretch; }
}

/* padding-block do bloco (não da section) já dá o respiro — a section em si
   fica sem padding próprio pra não somar espaçamento em dobro agora que
   Nosso propósito / Quem somos / Nossa trajetória viraram 3 sections
   separadas (a foto de Quem somos precisava do próprio layout). */
.bt-aboutText { position: relative; z-index: 1; }
.bt-aboutText__block { max-width: 760px; padding-block: 32px; border-top: 1px solid var(--better-border); }
.bt-aboutText__block:first-child { border-top: none; }
.bt-aboutText__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--better-blue); margin-bottom: 12px; }
.bt-aboutText__headline { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--better-text-primary); line-height: 1.25; margin-bottom: 16px; }
.bt-aboutText__body { font-size: 15px; line-height: 1.75; color: var(--better-text-secondary); }
.bt-aboutText__highlight { font-size: clamp(19px, 2vw, 24px); line-height: 1.4; margin-top: 20px; }

.bt-aboutNumbers { padding-block: 72px; position: relative; z-index: 1; text-align: center; }
.bt-aboutNumbers__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--better-violet); margin-bottom: 12px; }
.bt-aboutNumbers__headline { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--better-text-primary); margin-bottom: 48px; }
.bt-aboutNumbers__grid { display: flex; align-items: flex-start; justify-content: center; gap: 88px; flex-wrap: wrap; }
.bt-aboutNumbers__value { font-size: clamp(56px, 7vw, 88px); line-height: 1; font-weight: 800; }
.bt-aboutNumbers__value--blue { color: var(--better-blue); }
.bt-aboutNumbers__value--violet { color: var(--better-violet); }
.bt-aboutNumbers__caption { font-size: 14px; color: var(--better-text-secondary); max-width: 26ch; margin: 12px auto 0; }
@media (max-width: 767px) {
  .bt-aboutNumbers__grid { gap: 48px; }
}

.bt-aboutEcosystem { padding-block: 72px; position: relative; z-index: 1; }
.bt-aboutEcosystem__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--better-blue); margin-bottom: 12px; }
.bt-aboutEcosystem__headline { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--better-text-primary); margin-bottom: 12px; max-width: 44ch; }
.bt-aboutEcosystem__body { font-size: 15px; color: var(--better-text-secondary); max-width: 56ch; margin-bottom: 36px; }
.bt-aboutEcosystem__grid { margin-bottom: 32px; }
.bt-aboutEcosystem__cta { display: inline-flex; }

.bt-aboutProcess { padding-block: 72px; position: relative; z-index: 1; }
.bt-aboutProcess__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--better-violet); margin-bottom: 12px; }
.bt-aboutProcess__headline { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--better-text-primary); margin-bottom: 12px; max-width: 44ch; }
.bt-aboutProcess__body { font-size: 15px; line-height: 1.7; color: var(--better-text-secondary); max-width: 62ch; margin-bottom: 44px; }
.bt-aboutProcess__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bt-aboutProcess__step { position: relative; padding: 26px 22px; background: var(--better-card-bg); border: 1px solid var(--better-border); border-radius: var(--better-card-radius); }
.bt-aboutProcess__index { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--better-text-secondary); opacity: 0.6; margin-bottom: 18px; }
.bt-aboutProcess__iconFrame { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(122,77,255,0.12); border: 1px solid rgba(122,77,255,0.24); margin-bottom: 16px; }
.bt-aboutProcess__icon { color: var(--better-blue); }
.bt-aboutProcess__name { font-size: 16px; font-weight: 700; color: var(--better-text-primary); margin-bottom: 8px; }
.bt-aboutProcess__description { font-size: 13.5px; line-height: 1.55; color: var(--better-text-secondary); }
@media (max-width: 1023px) { .bt-aboutProcess__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .bt-aboutProcess__grid { grid-template-columns: 1fr; } }

.bt-aboutDifferentials { padding-block: 72px; position: relative; z-index: 1; }
.bt-aboutDifferentials__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--better-blue); text-align: center; margin-bottom: 32px; }
.bt-aboutDifferentials__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.bt-aboutDifferentials__card { padding: 24px 20px; background: var(--better-card-bg); border: 1px solid var(--better-border); border-radius: var(--better-card-radius); text-align: center; transition: transform var(--transition-base), border-color var(--transition-base); }
.bt-aboutDifferentials__card:hover { transform: translateY(-4px); border-color: rgba(122,77,255,0.5); }
.bt-aboutDifferentials__iconFrame { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(122,77,255,0.12); border: 1px solid rgba(122,77,255,0.24); margin-bottom: 16px; }
.bt-aboutDifferentials__icon { color: var(--better-violet); }
.bt-aboutDifferentials__name { font-size: 15px; font-weight: 700; color: var(--better-text-primary); margin-bottom: 8px; }
.bt-aboutDifferentials__description { font-size: 13px; line-height: 1.55; color: var(--better-text-secondary); }
@media (prefers-reduced-motion: reduce) { .bt-aboutDifferentials__card:hover { transform: none; } }
@media (max-width: 1279px) { .bt-aboutDifferentials__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .bt-aboutDifferentials__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bt-aboutDifferentials__grid { grid-template-columns: 1fr; } }

/* "Quem somos" — texto + foto (about-who.php), inserida entre os blocos de
   Nosso propósito e Nossa trajetória em about-text-blocks.php. */
.bt-aboutWho { padding-block: 16px; position: relative; z-index: 1; }
.bt-aboutWho__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 56px; }
/* min-height:0 é necessário aqui: por padrão um item de grid não encolhe
   abaixo do tamanho intrínseco de um elemento substituído (a <img> com
   height="800" no HTML) mesmo com aspect-ratio no CSS — sem isso, a trilha
   do grid inteira ficava travada em 800px de altura, empurrando a imagem
   pra fora de proporção (e, dependendo do corte, some da tela). */
.bt-aboutWho__visual { position: relative; min-height: 0; }
.bt-aboutWho__glow {
  position: absolute;
  inset: -10%;
  background: var(--better-gradient);
  opacity: 0.22;
  filter: blur(48px);
  border-radius: var(--better-card-radius);
  z-index: 0;
}
.bt-aboutWho__image {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1100 / 1180;
  object-fit: cover;
  border-radius: var(--better-card-radius);
  border: 1px solid var(--better-border);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.6);
}
@media (max-width: 1023px) {
  .bt-aboutWho__grid { grid-template-columns: 1fr; gap: 32px; }
  .bt-aboutWho__visual { order: -1; max-width: 480px; margin-inline: auto; width: 100%; }
}

.bt-aboutGlobal__tagline { font-size: clamp(18px, 2vw, 22px); margin-top: 8px; }

.bt-aboutCta {
  margin-top: 40px;
  padding-block: 64px;
  background: var(--better-gradient);
  position: relative;
  z-index: 1;
}
.bt-aboutCta__inner { max-width: 700px; margin: 0 auto; text-align: center; }
.bt-aboutCta__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.bt-aboutCta__body { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.92); margin-bottom: 28px; }
.bt-aboutCta__headline { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: #ffffff; margin-bottom: 32px; }
.bt-aboutCta__buttons { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.bt-aboutCta__buttons .bt-button--primary { background: #ffffff; color: var(--better-bg-primary); }
.bt-aboutCta__buttons .bt-button--primary:hover { box-shadow: 0 8px 28px -6px rgba(0,0,0,0.35); }
.bt-aboutCta__buttons .bt-button--secondary { border-color: rgba(255,255,255,0.6); color: #ffffff; }
.bt-aboutCta__buttons .bt-button--secondary:hover { background: rgba(255,255,255,0.14); border-color: #ffffff; }
@media (max-width: 767px) {
  .bt-aboutCta__buttons { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Página Soluções (page-solucoes.php) — card MIGRATION-1607
   ========================================================================== */
.bt-solutionsHero { position: relative; overflow: hidden; padding-block: 140px 72px; }
.bt-solutionsHero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.85fr; align-items: center; gap: 40px; }
.bt-solutionsHero__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--better-blue); margin-bottom: 14px; }
.bt-solutionsHero__headline { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; max-width: 14ch; margin-bottom: 20px; }
.bt-solutionsHero__support { font-size: 16px; line-height: 1.65; color: var(--better-text-secondary); max-width: 46ch; margin-bottom: 32px; }
.bt-solutionsHero__ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Diagrama "hub e satélites" — a Better no centro, as 6 soluções ao redor,
   ligadas por linhas que pulsam devagar (opacidade, não posição — mais
   discreto que um movimento de translação constante). */
.bt-solutionsHero__diagram { min-height: 0; }
.bt-ecoDiagram { width: 100%; height: auto; overflow: visible; }
.bt-ecoDiagram__line {
  stroke: url(#bt-ecoLine);
  stroke-width: 2;
  stroke-dasharray: 4 6;
  /* Piso de opacidade bem mais alto que antes (era 0.25 no mínimo do pulso
     — fino, tracejado e nesse mínimo ficava quase invisível contra o
     fundo, e como cada linha pulsa numa fase diferente, sempre tinha
     alguma "desconectada" no momento do print). Agora nunca cai muito
     longe de legível, só varia entre "visível" e "mais visível". */
  opacity: 0.6;
  animation: bt-ecoLinePulse 3.6s ease-in-out infinite;
  animation-delay: calc(var(--bt-i, 0) * 0.25s);
}
@keyframes bt-ecoLinePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}
.bt-ecoDiagram__hub { fill: var(--better-bg-secondary); stroke: url(#bt-ecoLine); stroke-width: 1.5; }
.bt-ecoDiagram__nodeCircle { fill: var(--better-card-bg); stroke: var(--better-border); stroke-width: 1.5; transition: stroke var(--transition-base); }
.bt-ecoDiagram__nodeCircle--logo { fill: #f6f8ff; }
.bt-ecoDiagram__nodeIcon { color: var(--better-blue); }
.bt-ecoDiagram__node { transition: transform var(--transition-base); }

@media (max-width: 1023px) {
  .bt-solutionsHero__grid { grid-template-columns: 1fr; gap: 8px; }
  .bt-solutionsHero__diagram { max-width: 380px; margin: 24px auto 0; }
  .bt-solutionsHero__headline { max-width: none; }
}

.bt-solutionsIntro { padding-top: 8px; }

/* Reaproveita .bt-solutions (mesma grade de cards da home); só o scroll-
   margin-top muda, porque agora ela também é alvo de âncora (cards de
   outras páginas e o "Ver todas as soluções" do próprio hero apontam
   pra cá). */
.bt-solutionsList { scroll-margin-top: 92px; }
@media (max-width: 767px) {
  .bt-solutionsList { scroll-margin-top: 84px; }
}

.bt-solutionsDetail { padding-block: 24px; position: relative; z-index: 1; }
.bt-solutionsDetail__row {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  align-items: center;
  gap: 56px;
  padding-block: 56px;
  border-top: 1px solid var(--better-border);
  scroll-margin-top: 92px;
}
.bt-solutionsDetail__row:first-child { border-top: none; }
.bt-solutionsDetail__row--reverse { grid-template-columns: 0.6fr 0.4fr; }
.bt-solutionsDetail__row--reverse .bt-solutionsDetail__visual { order: 2; }
.bt-solutionsDetail__visual { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
.bt-solutionsDetail__glow {
  position: absolute;
  inset: 10%;
  background: var(--better-gradient);
  opacity: 0.18;
  filter: blur(60px);
  border-radius: 50%;
  z-index: 0;
}
.bt-solutionsDetail__badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: var(--better-card-radius);
  background: var(--better-card-bg);
  border: 1px solid var(--better-border);
}
.bt-solutionsDetail__badge--logo { background: #f6f8ff; padding: 30px; }
.bt-solutionsDetail__badge--logo img { width: 100%; height: 100%; object-fit: contain; }
.bt-solutionsDetail__badgeIcon { width: 64px; height: 64px; color: var(--better-blue); }
.bt-solutionsDetail__category { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--better-blue); margin-bottom: 10px; }
.bt-solutionsDetail__name { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--better-text-primary); margin-bottom: 8px; }
.bt-solutionsDetail__tagline { font-size: 15px; color: var(--better-text-secondary); margin-bottom: 24px; max-width: 48ch; }
.bt-solutionsDetail__benefits { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bt-solutionsDetail__benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--better-text-primary); }
.bt-solutionsDetail__benefitIcon { flex-shrink: 0; margin-top: 3px; color: var(--better-blue); }
.bt-solutionsDetail__application { font-size: 13.5px; line-height: 1.6; color: var(--better-text-secondary); max-width: 52ch; margin-bottom: 24px; }
.bt-solutionsDetail__application strong { color: var(--better-text-primary); font-weight: 600; }

@media (max-width: 1023px) {
  .bt-solutionsDetail__row,
  .bt-solutionsDetail__row--reverse { grid-template-columns: 1fr; gap: 28px; padding-block: 40px; }
  .bt-solutionsDetail__row--reverse .bt-solutionsDetail__visual { order: -1; }
  .bt-solutionsDetail__badge { width: 120px; height: 120px; }
}

.bt-solutionsIntegration { padding-block: 64px; position: relative; z-index: 1; }
.bt-solutionsIntegration__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--better-violet); text-align: center; margin-bottom: 12px; }
.bt-solutionsIntegration__headline { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--better-text-primary); text-align: center; max-width: 34ch; margin: 0 auto 40px; }
.bt-solutionsIntegration__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bt-solutionsIntegration__card { padding: 28px 22px; background: var(--better-card-bg); border: 1px solid var(--better-border); border-radius: var(--better-card-radius); text-align: center; }
.bt-solutionsIntegration__combo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 20px; }
.bt-solutionsIntegration__node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(122, 77, 255, 0.12);
  border: 1px solid rgba(122, 77, 255, 0.24);
  color: var(--better-blue);
}
.bt-solutionsIntegration__node--logo { background: #f6f8ff; padding: 10px; }
.bt-solutionsIntegration__node--logo img { width: 100%; height: 100%; object-fit: contain; }
.bt-solutionsIntegration__linkIcon { flex-shrink: 0; color: var(--better-text-secondary); }
.bt-solutionsIntegration__names { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--better-text-secondary); margin-bottom: 8px; }
.bt-solutionsIntegration__result { font-size: 15px; font-weight: 600; color: var(--better-text-primary); }

@media (max-width: 767px) {
  .bt-solutionsIntegration__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contato (page-contato.php) — card MIGRATION-1608
   ========================================================================== */
.bt-contactHero {
  /* Mesma ressalva do hero da Sobre Nós: sem display:flex aqui, senão o
     margin:0 auto herdado de .bt-container centraliza contra a flex-row
     inteira em vez de alinhar com o resto da página. */
  position: relative;
  overflow: hidden;
  padding-block: 156px 56px;
}
.bt-contactHero__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.bt-contactHero__auroraBand {
  position: absolute;
  top: 50%;
  left: 68%;
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.38;
  transform: translate(-50%, -50%);
}
.bt-contactHero__auroraBand--blue {
  background: radial-gradient(circle, var(--better-blue) 0%, transparent 68%);
  transform: translate(-72%, -66%);
  animation: bt-auroraDriftA 16s ease-in-out infinite;
}
.bt-contactHero__auroraBand--violet {
  background: radial-gradient(circle, var(--better-violet) 0%, transparent 68%);
  transform: translate(-38%, -40%);
  animation: bt-auroraDriftB 20s ease-in-out infinite;
}
.bt-contactHero__auroraBand--magenta {
  background: radial-gradient(circle, var(--better-magenta) 0%, transparent 68%);
  width: 32vw;
  height: 32vw;
  max-width: 420px;
  max-height: 420px;
  transform: translate(-30%, -78%);
  animation: bt-auroraDriftC 18s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bt-contactHero__auroraBand { animation: none; }
}
@media (max-width: 1023px) {
  .bt-contactHero__aurora { opacity: 0.7; }
}
@media (max-width: 767px) {
  .bt-contactHero__aurora { display: none; }
}
.bt-contactHero__content { position: relative; z-index: 1; }
.bt-contactHero__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--better-blue); margin-bottom: 14px; }
.bt-contactHero__headline {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin-bottom: 18px;
}
.bt-contactHero__support { font-size: 16px; line-height: 1.6; color: var(--better-text-secondary); max-width: 52ch; margin-bottom: 28px; }
@media (max-width: 767px) {
  .bt-contactHero { padding-block: 96px 40px; }
  .bt-contactHero__headline { max-width: none; }
}

/* scroll-margin-top compensa o header fixo (78px, 70px no mobile) quando o
   CTA do hero pula pra #bt-contato-formulario — mesmo padrão de .bt-solutions
   (ver comentário lá). Sem isso, os primeiros campos do formulário ficam
   escondidos atrás do header depois do salto. */
.bt-contactForm { padding-block: 32px 96px; position: relative; z-index: 1; scroll-margin-top: 92px; }
@media (max-width: 767px) {
  .bt-contactForm { scroll-margin-top: 84px; }
}
/* align-items: start (voltou atrás de propósito): já tentamos "stretch" +
   margin-top:auto pra igualar a altura das 2 colunas, mas com o formulário
   de verdade (8 campos, bem mais alto que os 3 itens de contato direto) isso
   criava um vão vazio enorme no meio da barra lateral — pior visualmente do
   que a barra simplesmente terminando mais cedo, que é normal em layout de
   2 colunas. Bug relatado pelo cliente com screenshot do site real, ver
   CLAUDE.md. */
.bt-contactForm__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.bt-contactForm__card,
.bt-contactForm__side {
  padding: 32px;
  background: var(--better-card-bg);
  border: 1px solid var(--better-border);
  border-radius: var(--better-card-radius);
}

.bt-contactForm__sideEyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--better-violet); margin-bottom: 12px; }
.bt-contactForm__sideText { font-size: 14px; line-height: 1.6; color: var(--better-text-secondary); margin-bottom: 24px; }
.bt-contactForm__channels { display: flex; flex-direction: column; gap: 12px; }
.bt-contactForm__channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--better-border);
  border-radius: 12px;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.bt-contactForm__channel:hover { border-color: rgba(122,77,255,0.5); background: rgba(122,77,255,0.08); transform: translateY(-2px); }
.bt-contactForm__channelIcon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(122,77,255,0.12);
  border: 1px solid rgba(122,77,255,0.24);
  color: var(--better-violet);
}
.bt-contactForm__channelLabel { display: block; font-size: 14px; font-weight: 700; color: var(--better-text-primary); }
.bt-contactForm__channelValue { display: block; font-size: 13px; color: var(--better-text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .bt-contactForm__channel:hover { transform: none; }
}
@media (max-width: 1023px) {
  .bt-contactForm__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .bt-contactForm__card, .bt-contactForm__side { padding: 24px 20px; }
}

/* Formulário construído no tema (não é mais WPForms — ver comentário no
   topo de template-parts/contact-form.php). */
.bt-contactForm__form { display: flex; flex-direction: column; gap: 18px; }
.bt-contactForm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bt-contactForm__field { display: flex; flex-direction: column; gap: 8px; }
.bt-contactForm__field label { font-size: 13px; font-weight: 600; color: var(--better-text-primary); }
.bt-contactForm__field input,
.bt-contactForm__field select,
.bt-contactForm__field textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(3,9,29,0.5);
  border: 1px solid var(--better-border);
  border-radius: 8px;
  color: var(--better-text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}
.bt-contactForm__field input::placeholder,
.bt-contactForm__field textarea::placeholder { color: var(--better-text-secondary); }
.bt-contactForm__field input:focus,
.bt-contactForm__field select:focus,
.bt-contactForm__field textarea:focus { outline: none; border-color: var(--better-violet); }
.bt-contactForm__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23c5cbe0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.bt-contactForm__field select option { background: var(--better-bg-secondary); color: var(--better-text-primary); }
.bt-contactForm__field textarea { resize: vertical; min-height: 110px; }
.bt-contactForm__submit { align-self: flex-start; margin-top: 4px; }

/* Honeypot: existe de verdade no DOM e na ordem de tab normal pro
   navegador, só fica fora da tela — bots que apenas checam
   display:none/visibility:hidden ainda preenchem isso. tabindex="-1" no
   input evita que uma pessoa usando teclado pare nele por engano. */
.bt-contactForm__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.bt-contactForm__notice { padding: 14px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.bt-contactForm__notice--ok { background: rgba(41,107,255,0.12); border: 1px solid rgba(41,107,255,0.4); color: var(--better-text-primary); }
.bt-contactForm__notice--erro { background: rgba(214,69,232,0.12); border: 1px solid rgba(214,69,232,0.4); color: var(--better-text-primary); }

@media (max-width: 600px) {
  .bt-contactForm__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Conteúdos (page-conteudos.php) — feed do Instagram no lugar do blog,
   que ainda não existe. Hero clonado do Contato, mesmo motivo de sempre
   (página institucional leve, sem elemento gráfico próprio).
   ========================================================================== */
.bt-contentHero {
  position: relative;
  overflow: hidden;
  padding-block: 156px 56px;
}
.bt-contentHero__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.bt-contentHero__auroraBand {
  position: absolute;
  top: 50%;
  left: 68%;
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.38;
  transform: translate(-50%, -50%);
}
.bt-contentHero__auroraBand--blue {
  background: radial-gradient(circle, var(--better-blue) 0%, transparent 68%);
  transform: translate(-72%, -66%);
  animation: bt-auroraDriftA 16s ease-in-out infinite;
}
.bt-contentHero__auroraBand--violet {
  background: radial-gradient(circle, var(--better-violet) 0%, transparent 68%);
  transform: translate(-38%, -40%);
  animation: bt-auroraDriftB 20s ease-in-out infinite;
}
.bt-contentHero__auroraBand--magenta {
  background: radial-gradient(circle, var(--better-magenta) 0%, transparent 68%);
  width: 32vw;
  height: 32vw;
  max-width: 420px;
  max-height: 420px;
  transform: translate(-30%, -78%);
  animation: bt-auroraDriftC 18s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bt-contentHero__auroraBand { animation: none; }
}
@media (max-width: 1023px) {
  .bt-contentHero__aurora { opacity: 0.7; }
}
@media (max-width: 767px) {
  .bt-contentHero__aurora { display: none; }
}
.bt-contentHero__content { position: relative; z-index: 1; }
.bt-contentHero__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--better-blue); margin-bottom: 14px; }
.bt-contentHero__headline {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin-bottom: 18px;
}
.bt-contentHero__support { font-size: 16px; line-height: 1.6; color: var(--better-text-secondary); max-width: 56ch; margin-bottom: 28px; }
@media (max-width: 767px) {
  .bt-contentHero { padding-block: 96px 40px; }
  .bt-contentHero__headline { max-width: none; }
}

.bt-contentFeed { padding-block: 32px 96px; position: relative; z-index: 1; }
.bt-contentFeed__card {
  padding: 32px;
  background: var(--better-card-bg);
  border: 1px solid var(--better-border);
  border-radius: var(--better-card-radius);
}
.bt-contentFeed__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; padding: 40px 8px; text-align: center; }
.bt-contentFeed__placeholderEyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--better-blue); margin-bottom: 10px; }
.bt-contentFeed__placeholderText { font-size: 14px; line-height: 1.6; color: var(--better-text-secondary); max-width: 46ch; margin-inline: auto; }
@media (max-width: 767px) {
  .bt-contentFeed__card { padding: 24px 20px; }
}