/* ===================================================================
   Refúgio Tech — styles.css
   Boutique técnica · refúgio sólido e calmo para PMEs.
   Paleta oficial, grid 8px, tipografia Jost (títulos, fallback de Balgin —
   ver nota abaixo) + Roboto (corpo).
   =================================================================== */

/* ---------- Tipografia de destaque: Balgin substituída por Jost ----------
   Bug reportado pelo fundador (2026-10-03): fonte do header diferente da
   fonte da seção 1. Causa real, confirmada via `fc-query` nos dois arquivos
   recuperados (balgin-light.otf / balgin-extralight.otf): são builds
   "FONTSPRING DEMO" — o charset embutido cobre só ASCII básico (0x20–0x7E),
   ZERO glifos em Latin-1 Supplement (nenhum á/é/í/ó/ú/ã/õ/â/ê/ô/ç/ü). Ao
   renderizar "Refúgio", o navegador troca só o glifo "ú" para a próxima
   fonte da pilha (fallback por caractere), criando uma mistura visual
   dentro da própria palavra — isso é o que aparecia como "fonte diferente".
   Além do glifo faltante, a licença dessas builds é demo/trial, de uso
   pessoal (não comercial) — então mesmo que tivessem o glifo, não seriam
   servíveis num site de produção. Balgin é uma fonte real (Studio Sun,
   design de Cahya Sofyan, vendida em Fontspring/MyFonts/Creative Market),
   mas a versão completa/licenciada nunca foi comprada — ver
   docs/infra-site-dominio-hospedagem.md, seção 15, para a decisão completa
   e o aviso para o Agente 0 revisar ativos/marca/branding.md.
   Substituída por "Jost" (Google Fonts, SIL OFL, gratuita, subsets latin +
   latin-ext com cobertura total dos diacríticos do português), geométrica e
   com os mesmos pesos leves (200/300) já usados no layout — visualmente no
   mesmo registro (sans-serif geométrica, traço fino, caráter "90s/Kabel")
   que a Balgin original. Carregada via Google Fonts no <head> do
   index.html, junto com a Roboto. Os arquivos balgin-*.otf permanecem em
   assets/fonts/ apenas como referência histórica — não são mais
   referenciados em nenhum @font-face. */

/* ---------- Design tokens ---------- */
:root {
  /* Fixa o site no tema claro da marca, independente da preferência do
     sistema do visitante. Bug real (2026-10-06): sem este sinal, o Chrome/
     Android aplica a própria heurística de "force dark" (auto-darkening),
     invertendo cores e distorcendo a paleta — confirmado via CDP
     (Emulation.setAutoDarkModeOverride) nas páginas home e /bussola antes
     desta correção. `color-scheme: light` diz explicitamente ao navegador
     que esta página só suporta o tema claro, desligando a heurística.
     Decisão de ter um modo escuro de verdade fica para depois — ver
     docs/agente-conversacional-descoberta.md (repositório Consultoria). */
  color-scheme: only light;

  /* paleta oficial — hex exatos, não alterar */
  --verde-pastel: #B2C2B9;   /* primária — o refúgio, calma */
  --cinza-chumbo: #455259;   /* secundária — textos / estrutura, solidez */
  --amarelo-suave: #D9C583;  /* acento — CTA e destaques pontuais, uso moderado */
  --preto-antifragil: #262E33; /* títulos, contraste, fundo de seção escura */
  --off-white: #F2F2F2;      /* fundos de seção, respiro visual */

  /* tons de apoio derivados do próprio logo, só para ornamentos decorativos */
  --facet-1: #A8BFB0;
  --facet-2: #E8E6D8;
  --facet-3: #4A5759;
  --facet-4: #D8C079;
  --facet-5: #576165;
  --facet-6: #2C3639;
  --facet-7: #6B7A7F;

  /* tipografia */
  --font-display: "Jost", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
  /* Mono — elementos técnicos/de produto rodando (ver ativos/marca/branding.md
     e o novo site institucional em construção). Introduzido nesta rodada
     (redesenho visual do widget da Bússola) — direção híbrida aprovada:
     claro por padrão, com este token aplicado só nos momentos "de produto
     em ação" (status, rótulos técnicos), nunca no corpo da conversa em si. */
  --font-mono: "JetBrains Mono", "Roboto Mono", "Courier New", monospace;

  /* grid base 8px */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-15: 120px;

  --container-max: 1200px;
  --side-margin: 24px;

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

  /* raios — modernização rodada 6: cantos mais generosos (referência:
     produtos de chat de IA atuais), sombra leve em vez de borda dura */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 16px 40px rgba(38, 46, 51, 0.1);
  --shadow-lift: 0 24px 56px rgba(38, 46, 51, 0.14);
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, figure { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

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

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cinza-chumbo);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Acessibilidade: foco e utilidades ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amarelo-suave);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -60px;
  background: var(--preto-antifragil);
  color: var(--off-white);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: var(--sp-2);
}

/* ---------- Container ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--side-margin);
}

/* ===================================================================
   Header
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 242, 242, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(69, 82, 89, 0.12);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand__mark { height: 44px; width: auto; flex-shrink: 0; }
/* Caixa alta igual ao lockup do hero (bug relatado pelo fundador em
   2026-10-03: header em Title Case, hero em CAIXA ALTA — texto HTML
   continua "Refúgio Tech", com acento correto; é o text-transform que
   padroniza a grafia visual, igual já era feito em .hero__mark-caption,
   não precisa retipar sem acento). Fonte aumentada para a altura da caixa
   alta (cap height) bater com a altura do símbolo ao lado (44px) — antes
   22px (~16px de cap height) ficava visualmente menor que o símbolo. */
.brand__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.75rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--preto-antifragil);
  white-space: nowrap;
  line-height: 1;
}

/* .site-header__nav nunca precisou de display:flex enquanto só existia 1
   link ("Fale com a gente") — um <a> inline já ficava bem sozinho. Rodada
   2026-10-07 (integração do reposicionamento) adicionou mais 3 links
   (Soluções/Bússola/Pilares) nas duas páginas (home e /bussola); sem
   flex, o <nav> (display:block por padrão) deixava os <a> empilharem
   verticalmente por cima da marca — bug real, pego em teste manual em
   390px antes do commit. */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.site-header__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--cinza-chumbo);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
  white-space: nowrap;
}

/* Links "extra" (Soluções/Pilares — âncoras de rolagem, não CTAs
   primários): escondidos abaixo de 700px para não competir por espaço
   com a marca e os 2 links que importam mais no mobile (Bússola e
   Contato, que levam a uma ação). Mesmo critério de priorização já
   usado no swap "Fale com a gente" -> "Contato" logo abaixo. */
.site-header__link--extra { display: inline; }
@media (max-width: 700px) {
  .site-header__link--extra { display: none; }
}

/* Telas muito estreitas (<480px): o link "Bússola" do nav também sai —
   a mesma ação já está coberta pelo CTA principal da hero ("Falar com a
   Bússola", visível sem rolar) e pela /bussola linkada no card de
   pré-visualização. Evita competir por espaço com a marca, que já
   encolhe bastante nessa faixa (ver .brand__name abaixo). */
.site-header__link--extra-narrow { display: inline; }
@media (max-width: 479px) {
  .site-header__link--extra-narrow { display: none; }
}
.site-header__link:hover {
  color: var(--preto-antifragil);
  background: rgba(69, 82, 89, 0.08);
}

/* Telas muito estreitas: o lockup horizontal (símbolo + nome) ocupa mais
   espaço que o símbolo sozinho de antes — reduz a marca e troca o link de
   contato pelo rótulo curto (achado real em teste em 390px/360px: mesmo
   reduzindo fonte, "Fale com a gente" ainda não cabia). */
.site-header__link-short { display: none; }
@media (max-width: 479px) {
  .site-header__inner { height: 84px; }
  .brand { gap: var(--sp-1); }
  .brand__mark { height: 36px; }
  /* Mesma lógica da versão desktop (cap height bate com os 36px do
     símbolo), mas limitada por uma fórmula fluida: nesta faixa de tela o
     link de navegação ("Contato") disputa espaço na mesma linha, e um
     valor fixo de 36px (testado de verdade em 390px e 360px) sobrepunha o
     nome no botão de contato. calc() deriva o espaço realmente livre
     (viewport menos símbolo, gap, nav e margens, com folga de ~6px) e usa
     o menor entre isso e o alvo de 36px — bate com o símbolo sempre que
     houver espaço (perto de 479px) e reduz graciosamente em telas bem
     estreitas (320px) sem nunca sobrepor o botão de contato. */
  .brand__name { font-size: min(2.25rem, calc((100vw - 166px) / 6.694)); letter-spacing: 0.01em; }
  /* Auditoria de acessibilidade rodada 19 (achado 1, baixa-moderada
     severidade): era 0.8125rem (13px) neste breakpoint — igualado ao
     valor desktop (0.875rem/14px), já usado sem problema de espaço
     porque é exatamente aqui que o rótulo troca para "Contato" (curto,
     ver .site-header__link-short abaixo), então sobra espaço pro
     aumento. Confirmado visualmente em 390px/360px depois do ajuste. */
  .site-header__link { font-size: 0.875rem; padding: 6px 10px; }
  .site-header__link-full { display: none; }
  .site-header__link-short { display: inline; }
}

/* ===================================================================
   Hero
   =================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
  /* mobile-first: espaço compacto no topo para que título + CTA da Bússola
     caibam acima da dobra em 390px — o respiro generoso (sp-15) só entra
     em telas maiores, ver breakpoint ≥1024px mais abaixo. */
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

/* formas decorativas suaves, inspiradas nas facetas do logo — tons únicos, baixa opacidade */
.hero__facet {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hero__facet--one {
  width: 620px;
  height: 620px;
  top: -220px;
  right: -200px;
  background: var(--verde-pastel);
  opacity: 0.35;
  clip-path: polygon(30% 0%, 100% 0%, 100% 70%, 55% 100%, 0% 55%);
}
.hero__facet--two {
  width: 360px;
  height: 360px;
  bottom: -140px;
  left: -120px;
  background: var(--cinza-chumbo);
  opacity: 0.06;
  clip-path: polygon(0% 20%, 65% 0%, 100% 60%, 40% 100%);
}

/* Rodada 16 (decisão do fundador, registrada em
   docs/agente-conversacional-descoberta.md no repositório Consultoria):
   o elemento de fundo grande/decorativo (.hero__bussola-bg, rosa dos
   ventos em baixa opacidade atrás do card, criada na rodada 14 com as
   3 variações de refinamento visual) foi REMOVIDO -- nenhuma variação
   foi aceita e o fundador não quis mudança na arte do ícone, só na
   aplicação. .hero__bussola-bg não existe mais; ver .hero__cta-icon
   logo abaixo (ícone normal, 60px, visível, canto superior direito
   do card) para a substituição. */

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  /* ordem no DOM = ordem visual no mobile: título, depois card da Bússola
     (rodada 7: a marca grande que ficava por último foi removida da hero —
     ver comentário no index.html). */
  gap: var(--sp-4);
  align-items: start;
}

/* .kicker / .kicker__dot (rótulo "Bússola · agente de IA...") movidos
   para bussola.css na correção visual 2026-10-08 — são específicos da
   página /bussola (único lugar que os usa), não tokens genéricos.
   Redesenhados lá como pill mono com status-dot, substituindo o
   tratamento antigo (caixa alta grande + ícone de bússola/estrela). Ver
   bussola.css e o histórico de site/bussola/index.html antes desta
   data. */

.hero__headline {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--preto-antifragil);
  /* mobile-first: tamanho mais compacto na base (tela pequena), cresce com
     a viewport; o teto grande (4.75rem) só é alcançado em telas largas. */
  font-size: clamp(1.875rem, 7vw, 4.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

/* ===================================================================
   Rodada 2026-10-07 (integração do reposicionamento): o card de CTA
   antigo (.hero__cta-card, kicker com ícone da Bússola, heading e botão
   único) foi REMOVIDO — a coluna da direita da hero agora usa o card de
   pré-visualização da Bússola (.hero__preview-link/.console, definidos
   em home.css) + os CTAs/slogan/pilares ficam na coluna de texto
   (.hero__eyebrow/.hero__lede/.hero__ctas/.hero__slogan/.hero__pillars-tag,
   também em home.css). As classes .hero__cta-card*, .hero__cta-kicker*,
   .hero__cta-heading, .hero__cta-button e .hero__cta-icon (este último já
   estava sem uso — a posição absoluta nunca foi aplicada à marcação real,
   só ao ícone inline em .hero__cta-kicker-icon) foram removidas daqui. O
   wrapper .hero__cta (área de grid) continua definido abaixo, só sem
   position:relative (não precisa mais ancorar ícone absoluto). Histórico
   completo de ambos (CSS e HTML) no git log deste arquivo e de
   site/index.html antes desta data.
   =================================================================== */
.hero__cta { }

/* ===================================================================
   Rodada 7 (2026-10-05): a marca grande (símbolo + legenda "Refúgio
   Tech") que ocupava a coluna da direita da hero no desktop foi
   REMOVIDA — pedido explícito do fundador, ela já aparece no header.
   As regras .hero__mark / .hero__mark-img / .hero__mark-caption que
   existiam aqui foram removidas junto com o bloco no index.html; se
   precisar recuperar o histórico, ver o git log deste arquivo
   (repositório Website) antes desta data. */

/* Rodada 2026-10-07 (integração do reposicionamento): a seção .intro
   (fundo escuro, 2 parágrafos institucionais "ponto firme em meio à
   tecnologia") foi REMOVIDA do fluxo da home — substituída pela seção
   .solutions (produto/Bússola, fundo escuro, ver home.css), que carrega
   o mesmo peso visual (única seção escura da página) com o novo
   reposicionamento de engenharia. O selo diagonal .hero::after também
   saiu — a transição clara->escura agora é o elemento .seam-to-dark
   (SVG, home.css + index.html), para não acoplar a cor de destino ao
   seletor .hero. Histórico de ambos (CSS e HTML) no git log deste
   arquivo e de site/index.html antes desta data. */

/* .intro::after (seam escuro -> verde pastel) removido junto com .intro —
   ver nota acima. A seção .contact agora vem depois de .pillars/.faq
   (fundo claro -> fundo claro, sem seam necessário entre eles; ver
   .seam-to-light em home.css para a transição .solutions -> .pillars). */

/* ===================================================================
   Contato — fundo Verde Pastel Suave
   =================================================================== */
.contact {
  position: relative;
  background: var(--verde-pastel);
  padding-top: var(--sp-15);
  padding-bottom: calc(var(--sp-15) + 56px);
  overflow: hidden;
  text-align: center;
  scroll-margin-top: 96px;
}

.contact__facet {
  position: absolute;
  width: 420px;
  height: 420px;
  left: -160px;
  bottom: -180px;
  background: var(--off-white);
  opacity: 0.4;
  clip-path: polygon(20% 0%, 100% 15%, 85% 100%, 0% 75%);
  pointer-events: none;
}

.contact__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
}

.contact__shard {
  width: 72px;
  height: 36px;
  margin-bottom: var(--sp-3);
}

.contact__heading {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--preto-antifragil);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.15;
  margin-bottom: var(--sp-2);
}

.contact__subtext {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  /* preto-antifragil em vez de cinza-chumbo: sobre o verde pastel claro,
     cinza-chumbo fica abaixo de 4.5:1 (falha AA em texto normal) */
  color: var(--preto-antifragil);
  margin-bottom: var(--sp-6);
}

.contact__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  width: 100%;
  max-width: 420px;
  text-align: left;
}

.contact__field { display: flex; }

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--preto-antifragil);
  background: var(--off-white);
  border: 1px solid rgba(38, 46, 51, 0.22);
  /* modernização rodada 6: cantos mais generosos, coerente com os cards e
     botões em pílula do resto do site. */
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact__form textarea { resize: vertical; min-height: 104px; }
.contact__form input::placeholder,
.contact__form textarea::placeholder {
  /* Correção 4 (2026-10-08, acessibilidade como premissa permanente):
     era rgba(...,0.5) — contraste real medido de 2.88:1 sobre
     --off-white, bem abaixo do mínimo AA (4.5:1). Subido para 0.72,
     medido e confirmado em 5.29:1. */
  color: rgba(38, 46, 51, 0.72);
}
.contact__form input:focus-visible,
.contact__form textarea:focus-visible {
  outline: none;
  border-color: var(--cinza-chumbo);
  box-shadow: 0 0 0 3px rgba(69, 82, 89, 0.18);
}

.contact__form button[type="submit"] {
  border: 0;
  cursor: pointer;
  font: inherit;
}
.contact__form button[type="submit"]:disabled {
  opacity: 0.65;
  cursor: wait;
}

.contact__form-status {
  font-family: var(--font-body);
  /* Correção 4 (2026-10-08): era 0.9375rem (15px) — mensagem de status
     real (sucesso/erro do envio), corpo de texto nunca abaixo de 16px
     (decisão de acessibilidade permanente). */
  font-size: 1rem;
  color: var(--preto-antifragil);
  min-height: 1.3em;
}
.contact__form-status[data-state="error"] { color: #7a2f2f; }

.contact__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--preto-antifragil);
  background: var(--amarelo-suave);
  padding: var(--sp-2) var(--sp-5, 40px);
  /* modernização rodada 6: botão em pílula, no mesmo registro visual das
     referências (CTA único, cantos bem arredondados) em vez do raio de
     4px anterior. */
  border-radius: var(--radius-pill);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
  box-shadow: 0 1px 2px rgba(38, 46, 51, 0.1);
}
.contact__cta:hover {
  background: #e4d39a;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(38, 46, 51, 0.18);
}

/* seam diagonal: contato (claro) -> rodapé (escuro) */
.contact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(32px, 5vw, 72px);
  background: var(--preto-antifragil);
  clip-path: polygon(0 100%, 100% 40%, 100% 100%);
}

/* ===================================================================
   Rodapé
   =================================================================== */
.site-footer {
  background: var(--preto-antifragil);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.site-footer__mark {
  height: 32px;
  opacity: 0.6;
}

.site-footer__text {
  font-family: var(--font-body);
  font-weight: 300;
  /* Auditoria de acessibilidade rodada 19 (achado 1, baixa severidade):
     era 0.8125rem (13px). Subiu para 0.875rem (14px). */
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: rgba(242, 242, 242, 0.6);
  text-align: center;
}

/* ===================================================================
   Reveal on scroll (JS adiciona .reveal-ready na raiz e depois .is-visible
   em cada item). Sem JS ou se o script falhar ao carregar, os elementos
   .reveal permanecem com a aparência normal (opacity/posição padrão) —
   a ocultação só é ativada quando o próprio script confirma que rodou.
   =================================================================== */
html.reveal-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   Breakpoints — mobile first
   =================================================================== */

/* Tablet ≥ 600px */
@media (min-width: 600px) {
  :root { --side-margin: 32px; }

  .contact__shard { width: 96px; height: 48px; }

  .hero__cta-card-body { padding: var(--sp-5, 40px) var(--sp-4); }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  :root { --side-margin: 40px; }

  .hero {
    padding-top: var(--sp-15);
    padding-bottom: calc(var(--sp-15) + 72px);
  }

  /* desktop: título na coluna da esquerda, card da Bússola na coluna da
     direita — rodada 7 (2026-10-05): antes a coluna da direita era
     ocupada pela marca grande (removida, ver nota acima e no index.html);
     o card da Bússola passou a ocupar o espaço dela, não foi só
     adicionado abaixo do título. No mobile a ordem é o fluxo natural do
     DOM (título, depois card). */
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas: "content cta";
    column-gap: var(--sp-12);
    align-items: center;
  }
  .hero__content { grid-area: content; }
  .hero__cta { grid-area: cta; }

  .hero__cta-card-body { padding: var(--sp-6) var(--sp-4); }
  .hero__cta-heading { font-size: clamp(1.5rem, 3vw, 2.25rem); }

  .intro__inner { padding-left: var(--sp-6); }
}

/* Nota: .hero__headline já usa max-width: 18ch desde a base (mobile-first,
   ver regra acima) — o que antes era um ajuste específico de telas ≥1440px
   passou a valer em qualquer largura, então o breakpoint extra foi
   removido. */