/* =====================================================================
   EXCELLENCE TRANSLATIONS — LANDING PAGE B2B
   styles.css — CSS próprio, mobile-first, sem framework e sem build.

   DIREÇÃO DE ARTE (v2): Swiss Modernism aplicado a um contexto documental.
   Grid modular de 12 colunas, composições assimétricas, espaçamento
   matemático, hierarquia tipográfica forte, fio como elemento estrutural
   e um único acento (ciano da marca) usado com parcimônia.

   A textura "documental" vem de índices numerados, numerais tabulares,
   microlabels em caixa alta espaçada e medianizes — vocabulário de
   documentação técnica e jurídica, que é exatamente o que a Excellence traduz.

   Índice
   01. Tokens
   02. Fonte
   03. Reset e base
   04. Layout: container, section, utilitários
   05. Tipografia editorial
   06. Botões
   07. Header e navegação
   08. Hero
   09. Faixa de credibilidade
   10. Demandas empresariais
   11. Módulos de serviço (três composições distintas)
   12. Contextos de aplicação
   13. Por que a Excellence (assimétrico)
   14. Como funciona (única área escura)
   15. Prova social (pronto, não renderizado)
   16. FAQ (compacto)
   17. Formulário (fechamento comercial em duas colunas)
   18. Footer
   19. CTA fixo mobile
   20. Movimento reduzido

   PROIBIDO por decisão de projeto: glassmorphism, glow, gradiente decorativo,
   blob, dashboard falso, card flutuante, 3D gratuito, badge em excesso,
   ícone dentro de quadrado colorido repetido, métrica fictícia.
   ===================================================================== */

/* ---------------------------------------------------------------------
   01. TOKENS
   Cores amostradas do arquivo oficial LogoExcellence.webp:
   #005596 (azul institucional) · #11B3E8 (ciano) · #A6A6A6 / #949CA1 /
   #DEE3E3 (neutros). Nenhuma cor de marca foi inventada.
   --------------------------------------------------------------------- */
:root {
  /* marca */
  --brand-900: #04243F;
  --brand-800: #003A66;
  --brand-700: #005596;   /* azul oficial da logo */
  --brand-600: #0A69AF;
  --brand-100: #C7DDEE;
  --brand-050: #EFF5FA;

  --accent-500: #11B3E8;  /* ciano oficial — SOMENTE elemento gráfico */
  --accent-600: #0A8CBB;
  --accent-050: #E8F7FD;

  /* neutros */
  --ink-900: #101C27;
  --ink-700: #2F3D4A;
  --ink-500: #59646F;     /* 5,2:1 sobre branco — mínimo usado em corpo */
  --neutral-400: #A6A6A6;
  --neutral-300: #C9CFD3;

  --surface: #FFFFFF;
  --surface-alt: #F4F7F9;
  --surface-deep: #04243F; /* única área escura da página */

  --line-200: #DDE4E9;
  --line-100: #EBEFF2;

  --danger-600: #B3261E;
  --danger-050: #FDF2F1;

  /* espaçamento — base 4px */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* grid e layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --grid-gap: clamp(1.5rem, 3vw, 2.5rem);
  /* respiro generoso, mas não a ponto de blocos pequenos ficarem perdidos */
  --section-y: clamp(3.5rem, 7.5vw, 6rem);

  /* forma — apenas dois raios, apenas duas sombras */
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-1: 0 1px 2px rgba(4, 36, 63, .05), 0 2px 6px rgba(4, 36, 63, .05);
  --shadow-2: 0 2px 8px rgba(4, 36, 63, .06), 0 18px 40px rgba(4, 36, 63, .09);

  /* -------------------------------------------------------------------
     TIPOGRAFIA — Montserrat (display/interface) + Merriweather Sans (texto)

     A escala foi recalibrada, não apenas herdada: Montserrat é ~11% mais
     larga que a Arial e que a família usada antes, então os tamanhos de
     título caíram para manter o mesmo peso óptico e a mesma quebra de linha.
     Merriweather Sans tem x-height maior (0.5625 contra 0.5313 da Arial),
     então o corpo mantém 16px mas ganha entrelinha para não fechar demais.
     ------------------------------------------------------------------- */
  --font-display: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  --font-body: 'Merriweather Sans', 'Merriweather Sans Fallback', system-ui, sans-serif;

  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, .3vw + 1rem, 1.125rem);
  --fs-lg:   clamp(1.125rem, .7vw + .97rem, 1.3125rem);
  --fs-xl:   clamp(1.25rem, 1.15vw + .97rem, 1.625rem);
  --fs-2xl:  clamp(1.5625rem, 2.2vw + 1rem, 2.375rem);
  --fs-3xl:  clamp(2rem, 3.7vw + .9rem, 3.375rem);

  /* Montserrat tem ascendentes altas: 1.06 fechava demais nos títulos. */
  --lh-tight: 1.12;
  --lh-snug:  1.32;
  --lh-body:  1.7;

  /* tracking — Montserrat é geométrica e larga: pede tracking negativo em
     display e menos espacejamento nas caixas-altas do que antes */
  --ls-display: -.02em;
  --ls-label: .12em;

  /* Foco: outline, NUNCA box-shadow. box-shadow é uma propriedade que os
     próprios componentes usam (ex.: .btn--primary tem um shadow inset), então
     um anel feito com box-shadow é apagado pelo estilo do botão e o CTA fica
     sem indicação de foco. outline é imune a isso e ainda respeita o modo de
     alto contraste do sistema. */
  --focus-color: var(--brand-600);
  --focus-width: 2px;
  --focus-offset: 2px;
  --t-fast: 150ms;
  --t-base: 260ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------------
   02. FONTES — duas variáveis self-hosted, subset latin (acentuação PT-BR).
   Sem conexão a terceiros, um arquivo por família (eixo de peso completo em
   vez de vários arquivos estáticos).

   Os overrides das fallbacks NÃO são estimados: foram medidos no navegador
   comparando cada fonte real com a Arial (TextMetrics), pela mesma fórmula
   usada por next/font e Fontaine —
       size-adjust      = xHeight_web / xHeight_fallback
       ascent-override  = ascent_web  / size-adjust
       descent-override = descent_web / size-adjust
   Alvo Arial porque está presente em Windows/macOS/iOS e o Android a mapeia
   para a Roboto, cuja x-height é praticamente a mesma.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-var-latin.woff2') format('woff2');
  font-weight: 400 700;   /* usados: 500 nav · 600 labels/botões · 700 títulos */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('../assets/fonts/merriweather-sans-var-latin.woff2') format('woff2');
  font-weight: 400 700;   /* usados: 400 corpo · 600 labels de formulário */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* medido: xHeight idêntica à da Arial, daí size-adjust 100% */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  size-adjust: 100%;
  ascent-override: 96.8%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}
/* medido: x-height 5,9% maior que a da Arial */
@font-face {
  font-family: 'Merriweather Sans Fallback';
  src: local('Arial');
  size-adjust: 105.9%;
  ascent-override: 92.9%;
  descent-override: 25.8%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------------
   03. RESET E BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo [hidden] vale display:none apenas no stylesheet do navegador —
   qualquer regra de autor que defina `display` (como .step__body { display:grid })
   o sobrepõe silenciosamente. Este reforço garante que hidden sempre esconda,
   já que é ele que o JS usa para alternar etapas e blocos condicionais. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }

/* Foco visível e consistente em tudo que é interativo. Nunca removido.
   Usa azul escuro, nunca o ciano: contraste funcional não pode depender
   de uma cor de acento com 2,3:1 sobre branco. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

::selection { background: var(--brand-100); color: var(--brand-900); }

/* microlabels dentro dos SVGs autorais */
.art-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  fill: var(--neutral-400);
}
.art-label--brand { fill: var(--brand-700); }
.art-num {
  font-family: var(--font-display);
  font-size: 8px;
  fill: var(--neutral-400);
  text-anchor: end;
}

/* ---------------------------------------------------------------------
   04. LAYOUT
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-y); }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__title { font-size: var(--fs-2xl); margin-bottom: 0; }
/* Regra geral, não restrita a .section__head: o par título + apoio também
   aparece solto dentro de .contexts__intro e .quote__pitch. */
.section__title + .section__lead { margin-top: var(--sp-5); }
.section__lead {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-500);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

/* cabeçalho dividido: título à esquerda, apoio à direita (assimetria) */
@media (min-width: 900px) {
  .section__head--split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--grid-gap);
    align-items: end;
  }
  .section__head--split .section__lead { margin-top: 0; padding-bottom: .35em; }
}

/* eyebrow: microlabel documental com fio.
   Tracking e corpo um pouco menores que os demais microlabels: são as
   strings mais longas da página e, em Montserrat, quebravam em duas linhas
   no mobile com os valores padrão. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(.6875rem, .35vw + .64rem, .75rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent-500);
  flex: 0 0 auto;
}

.skip-link {
  position: absolute;
  left: var(--sp-4); top: -100px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand-700);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* honeypot: fora da tela e fora da ordem de foco */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* controles que só fazem sentido com JavaScript ativo */
.no-js .js-only { display: none !important; }

.notice {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--accent-500);
  background: var(--accent-050);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.notice--warn {
  border-left-color: var(--danger-600);
  background: var(--danger-050);
}

/* ---------------------------------------------------------------------
   05. TIPOGRAFIA EDITORIAL — listas de aplicação, três tratamentos
   Cada serviço recebe um vocabulário de lista diferente. É o que impede
   os três módulos de virarem a mesma coisa repetida três vezes.
   --------------------------------------------------------------------- */
.apps__title {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-900);
}

.applist li {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-700);
}

/* 01 — tabela de especificação: índice numerado + fio */
.applist--spec { counter-reset: spec; }
.applist--spec li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-100);
  counter-increment: spec;
}
.applist--spec li::before {
  content: counter(spec, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--accent-600);
  padding-top: .1em;
}

/* 02 — registro documental: medianiz contínua à esquerda */
.applist--register {
  border-left: 1px solid var(--line-200);
  padding-left: var(--sp-5);
}
.applist--register li {
  position: relative;
  padding-block: var(--sp-3);
}
.applist--register li + li { border-top: 1px solid var(--line-100); }
.applist--register li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) * -1 - 1px);
  top: 1.35em;
  width: 9px; height: 1px;
  background: var(--brand-700);
}

/* 03 — pares: duas colunas, sugere as duas partes da interlocução */
.applist--pairs {
  display: grid;
  gap: 0 var(--sp-8);
  border-top: 1px solid var(--line-100);
}
.applist--pairs li {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-100);
}
@media (min-width: 700px) {
  .applist--pairs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   06. BOTÕES
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 50px;
  padding: var(--sp-3) var(--sp-8);
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--brand-700);
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(4, 36, 63, .22);
}
.btn--primary:hover { background: var(--brand-800); color: #fff; }
.btn--primary:active { background: var(--brand-900); box-shadow: none; }

.btn--ghost {
  background: transparent;
  color: var(--brand-700);
  border-color: var(--line-200);
}
.btn--ghost:hover { border-color: var(--brand-700); background: var(--brand-050); }

.btn--sm { min-height: 44px; padding: var(--sp-2) var(--sp-5); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   07. HEADER E NAVEGAÇÃO
   Header não fixo: não rouba altura útil no mobile e o CTA fixo assume
   o papel de conversão após a rolagem.
   --------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line-200);
  background: var(--surface);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}

/* A logo oficial é um lockup empilhado (símbolo sobre o texto), proporção
   2.646:1. Dimensionada pela largura para manter o wordmark legível.
   width/height explícitos evitam CLS. */
.site-header__brand { display: block; flex-shrink: 0; }
.site-header__brand img { width: 132px; height: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px; height: 2px;
  background: var(--ink-900);
  content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after  { position: absolute; top: 5px; }

.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  position: absolute;
  left: 0; right: 0;
  z-index: 30;
  padding: var(--sp-4) var(--container-pad) var(--sp-6);
  background: var(--surface);
  border-bottom: 1px solid var(--line-200);
  box-shadow: var(--shadow-2);
}
.site-nav__list { margin-bottom: var(--sp-4); }
.site-nav__list a {
  display: block;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-100);
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 500;
  text-decoration: none;
}
.site-nav__list a:hover { color: var(--brand-700); }
.site-nav__cta { display: inline-flex; width: 100%; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav,
  .site-nav.is-open {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--sp-8);
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .site-header__brand img { width: 168px; }
  .site-nav__list { display: flex; gap: var(--sp-6); margin: 0; }
  .site-nav__list a {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid transparent;
    font-size: var(--fs-sm);
    transition: border-color var(--t-fast) var(--ease);
  }
  .site-nav__list a:hover { border-bottom-color: var(--accent-500); }
  .site-nav__cta { width: auto; }
}

/* ---------------------------------------------------------------------
   08. HERO — principal momento visual da página
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--brand-050);
  border-bottom: 1px solid var(--line-200);
  overflow: hidden;
}
/* medianiz vertical sutil: ancora a composição ao grid, sem decoração */
.hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 1px;
  background: var(--line-200);
  opacity: 0;
}
@media (min-width: 1100px) { .hero::before { opacity: .7; } }

.hero__inner { position: relative; display: grid; gap: var(--sp-12); }

.hero__title {
  font-size: var(--fs-3xl);
  letter-spacing: -.028em;
  margin-bottom: var(--sp-6);
  max-width: 15ch;
}
/* "para empresas" não é decoração: é o filtro B2B da página inteira */
.hero__title em {
  font-style: normal;
  color: var(--brand-700);
  display: block;
}

.hero__lead {
  font-size: var(--fs-lg);
  color: var(--ink-700);
  line-height: 1.5;
  max-width: 46ch;
  margin-bottom: var(--sp-8);
  text-wrap: pretty;
}

.hero__contexts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-200);
  max-width: 30rem;
}
.hero__contexts li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-200);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-900);
}
.hero__ctx-idx {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--accent-600);
}

.hero__art { display: none; margin: 0 0 var(--sp-8); }

/* Seletor de serviço — entrada de baixa fricção do Hero */
.service-picker {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-200);
  border-top: 2px solid var(--brand-700);
  box-shadow: var(--shadow-2);
}
.service-picker fieldset { margin: 0 0 var(--sp-4); padding: 0; border: 0; }
.service-picker__title {
  padding: 0;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}
.service-picker__options { display: grid; gap: var(--sp-2); }
.service-picker__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-align: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas:
      "copy  panel"
      "ctx   panel";
    align-content: center;
    gap: var(--sp-8) var(--sp-16);
  }
  .hero__copy     { grid-area: copy; }
  .hero__contexts { grid-area: ctx; margin-top: var(--sp-2); }
  .hero__panel    { grid-area: panel; align-self: center; }
  .hero__art { display: block; }
  .service-picker { padding: var(--sp-6); }
}

/* ---------------------------------------------------------------------
   09. FAIXA DE CREDIBILIDADE
   Régua fina com índices numerados — não é tabela, não são cards.
   --------------------------------------------------------------------- */
.credibility {
  border-bottom: 1px solid var(--line-200);
  background: var(--surface);
}
.credibility__list {
  display: grid;
  gap: 0;
  padding-block: var(--sp-8);
}
.credibility__list li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: start;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-100);
}
.credibility__list li:last-child { border-bottom: 0; }
.credibility__idx {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--accent-600);
  padding-top: .15em;
}
.credibility__text {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.45;
}

@media (min-width: 860px) {
  .credibility__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
  }
  .credibility__list li {
    display: block;
    padding-block: 0;
    padding-top: var(--sp-4);
    border-bottom: 0;
    border-top: 1px solid var(--ink-900);
  }
  .credibility__idx { display: block; margin-bottom: var(--sp-3); }
}

/* ---------------------------------------------------------------------
   10. DEMANDAS EMPRESARIAIS
   Índice editorial: número grande, fio contínuo, hover discreto.
   --------------------------------------------------------------------- */
.demands { background: var(--surface); }

.demands__list { border-top: 1px solid var(--ink-900); }

.demand {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--line-200);
  transition: background-color var(--t-base) var(--ease);
}
.demand:hover { background: var(--brand-050); }

.demand__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-600);
  letter-spacing: .04em;
}
.demand__title {
  font-size: var(--fs-xl);
  margin: 0;
  letter-spacing: var(--ls-display);
}
.demand__text {
  color: var(--ink-500);
  margin: 0;
  max-width: 58ch;
  text-wrap: pretty;
}

@media (min-width: 860px) {
  .demand {
    grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--grid-gap);
    align-items: start;
    padding-inline: var(--sp-4);
    margin-inline: calc(var(--sp-4) * -1);
  }
  .demand__num { padding-top: .5em; }
}

/* ---------------------------------------------------------------------
   11. MÓDULOS DE SERVIÇO — três composições deliberadamente distintas
   01 intro à esquerda · 02 espelhado · 03 largura ampla + lista em pares
   --------------------------------------------------------------------- */
.service { border-top: 1px solid var(--line-200); }
.service--juramentada { background: var(--surface-alt); }

.service__grid { display: grid; gap: var(--sp-10); }

.service__index {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
}
.service__index span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem; height: 2rem;
  border: 1px solid var(--brand-700);
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.service__lead {
  font-size: var(--fs-lg);
  color: var(--ink-900);
  font-weight: 500;
  line-height: 1.42;
  margin: var(--sp-5) 0 var(--sp-5);
  max-width: 40ch;
  text-wrap: pretty;
}
.service__intro > p { color: var(--ink-500); max-width: 54ch; }
.service__intro .btn { margin-top: var(--sp-8); }

.service__support {
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-500);
  font-size: var(--fs-sm);
}

.service__art { margin: 0; }
.service__art svg { width: 100%; height: auto; }

@media (min-width: 940px) {
  /* 01 TÉCNICA — intro à esquerda, arte e lista à direita */
  .service--tecnica .service__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas:
      "intro art"
      "intro apps";
    gap: var(--sp-8) var(--sp-16);
    align-content: start;
  }
  .service--tecnica .service__intro { grid-area: intro; align-self: center; }
  .service--tecnica .service__art   { grid-area: art; }
  .service--tecnica .service__apps  { grid-area: apps; }

  /* 02 JURAMENTADA — composição espelhada */
  .service--juramentada .service__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "art   intro"
      "apps  intro";
    gap: var(--sp-8) var(--sp-16);
    align-content: start;
  }
  .service--juramentada .service__intro { grid-area: intro; align-self: center; }
  .service--juramentada .service__art   { grid-area: art; }
  .service--juramentada .service__apps  { grid-area: apps; }

  /* 03 SIMULTÂNEA — intro ampla no topo, lista em pares abaixo */
  .service--simultanea .service__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-areas:
      "intro art"
      "apps  apps";
    gap: var(--sp-12) var(--sp-16);
  }
  .service--simultanea .service__intro { grid-area: intro; }
  .service--simultanea .service__art   { grid-area: art; align-self: center; }
  .service--simultanea .service__apps  { grid-area: apps; }
}

/* ---------------------------------------------------------------------
   12. CONTEXTOS DE APLICAÇÃO
   Matriz editorial: enunciado principal + índice de contextos.
   --------------------------------------------------------------------- */
.contexts {
  border-top: 1px solid var(--line-200);
  background: var(--surface);
}
.contexts__grid { display: grid; gap: var(--sp-10); }

.contexts__list { border-top: 1px solid var(--ink-900); }
.contexts__list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-100);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-900);
  transition: color var(--t-fast) var(--ease);
}
.contexts__list li:hover { color: var(--brand-700); }
.contexts__idx {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--accent-600);
}

@media (min-width: 900px) {
  .contexts__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-16);
    align-items: start;
  }
  .contexts__intro { position: sticky; top: var(--sp-8); }
}

/* ---------------------------------------------------------------------
   13. POR QUE A EXCELLENCE — assimétrico: 1 principal + 3 de apoio
   --------------------------------------------------------------------- */
.why { background: var(--surface-alt); border-top: 1px solid var(--line-200); }

.why__grid { display: grid; gap: var(--sp-10); }

.why__lead-item {
  padding: var(--sp-8) 0 0;
  border-top: 2px solid var(--brand-700);
}
.why__lead-item h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
  letter-spacing: var(--ls-display);
}
.why__lead-item p {
  font-size: var(--fs-md);
  color: var(--ink-700);
  margin: 0;
  max-width: 44ch;
  text-wrap: pretty;
}

.why__support { display: grid; gap: var(--sp-8); }
.why__item { padding-top: var(--sp-5); border-top: 1px solid var(--line-200); }
.why__item h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.why__item p  { color: var(--ink-500); margin: 0; font-size: var(--fs-sm); }

@media (min-width: 900px) {
  .why__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-16);
    align-items: start;
  }
  .why__support { gap: var(--sp-6); }
}

/* ---------------------------------------------------------------------
   14. COMO FUNCIONA — única área escura da página
   Timeline com fio contínuo ligando as etapas.
   --------------------------------------------------------------------- */
.process {
  background: var(--surface-deep);
  color: #C6D3DE;
}
.process .section__title { color: #fff; }
.process .section__lead  { color: #A2B5C5; }
.process .eyebrow { color: var(--accent-500); }
.process .eyebrow::before { background: var(--accent-500); }

.process__steps { display: grid; gap: 0; }

.pstep {
  position: relative;
  padding: var(--sp-6) 0 var(--sp-6) var(--sp-10);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
/* fio vertical de progressão no mobile */
.pstep::before {
  content: "";
  position: absolute;
  left: 15px; top: var(--sp-6);
  bottom: calc(var(--sp-6) * -1);
  width: 1px;
  background: rgba(255, 255, 255, .14);
}
.pstep:last-child::before { display: none; }

.pstep__num {
  position: absolute;
  left: 0; top: var(--sp-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px; height: 31px;
  background: var(--surface-deep);
  border: 1px solid var(--accent-500);
  color: var(--accent-500);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pstep__title {
  color: #fff;
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
  letter-spacing: var(--ls-display);
}
.pstep p { color: #A2B5C5; margin: 0; font-size: var(--fs-sm); }

@media (min-width: 940px) {
  .process__steps { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
  .pstep {
    padding: var(--sp-12) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  /* no desktop o fio vira horizontal: a régua superior já conecta as etapas */
  .pstep::before { display: none; }
  .pstep__num { top: calc(var(--sp-12) * -1 + .5rem); left: 0; }
}

/* ---------------------------------------------------------------------
   15. PROVA SOCIAL — estrutura pronta, seção NÃO renderizada.
   Só ativar com material real e autorizado. Ver comentário no index.html.
   --------------------------------------------------------------------- */
.proof { border-top: 1px solid var(--line-200); }
.proof__list { display: grid; gap: var(--sp-8); }
.proof__item { padding-top: var(--sp-5); border-top: 2px solid var(--brand-700); }
.proof__item blockquote { margin: 0 0 var(--sp-4); }
.proof__item blockquote p { font-size: var(--fs-md); color: var(--ink-900); }
.proof__author { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.proof__name { font-weight: 600; color: var(--ink-900); }
.proof__role { color: var(--ink-500); }
@media (min-width: 760px) { .proof__list { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------
   16. FAQ — compacto, título à esquerda, perguntas à direita
   6 perguntas. Fechado, ocupa fração de tela: o formulário chega antes.
   --------------------------------------------------------------------- */
.faq { background: var(--surface-alt); border-top: 1px solid var(--line-200); }

.faq__grid { display: grid; gap: var(--sp-8); }

.faq__list { border-top: 1px solid var(--ink-900); }

.faq__item { border-bottom: 1px solid var(--line-200); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand-700); }

.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--brand-700);
  border-bottom: 1.5px solid var(--brand-700);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq__answer { padding-bottom: var(--sp-5); }
.faq__answer p {
  color: var(--ink-500);
  max-width: 64ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* Abertura suave onde o navegador suportar; degrada para instantâneo. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--t-base) var(--ease),
                content-visibility var(--t-base) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

@media (min-width: 900px) {
  .faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--sp-16);
    align-items: start;
  }
  .faq__head { position: sticky; top: var(--sp-8); }
}

/* ---------------------------------------------------------------------
   17. FORMULÁRIO — fechamento comercial em duas colunas
   Argumento final à esquerda, formulário à direita. Resolve o vazio da v1.
   --------------------------------------------------------------------- */
.quote {
  border-top: 1px solid var(--line-200);
  background: var(--brand-050);
}

.quote__grid { display: grid; gap: var(--sp-10); }

.quote__pitch .section__title { margin-bottom: var(--sp-5); }
.quote__pitch .section__lead { max-width: 38ch; }

.quote__flow {
  margin: var(--sp-8) 0 0;
  border-top: 1px solid var(--line-200);
}
.quote__flow li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-200);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-900);
}
.quote__flow span {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--accent-600);
}

.quote__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  max-width: 40ch;
}

.quote__panel {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-200);
  border-top: 2px solid var(--brand-700);
  box-shadow: var(--shadow-2);
}
@media (min-width: 760px) { .quote__panel { padding: var(--sp-8); } }

@media (min-width: 940px) {
  .quote__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--sp-16);
    align-items: start;
  }
  .quote__pitch { position: sticky; top: var(--sp-8); }
}

/* indicador de etapa */
.stepbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.stepbar__track {
  flex: 1;
  height: 2px;
  background: var(--line-200);
  overflow: hidden;
}
.stepbar__fill {
  display: block;
  height: 100%;
  width: 33.33%;
  background: var(--brand-700);
  transition: width var(--t-base) var(--ease);
}

/* grupos do formulário de TELA ÚNICA
   Substituem as antigas etapas: mesma linguagem visual, sem navegação.
   Fio superior separando os grupos, espaçamento vertical enxuto para o
   formulário não parecer longo. */
.formgroup { margin: 0; padding: 0; border: 0; }
.formgroup + .formgroup,
.formgroup + .formgroup__submit {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-100);
}
.formgroup__title {
  padding: 0;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}
.formgroup__body { display: grid; gap: var(--sp-4); }
.formgroup__body + .formgroup__body { margin-top: var(--sp-4); }
.formgroup__submit { display: grid; gap: var(--sp-4); }

/* etapas */
.step { margin: 0; padding: 0; border: 0; }
.step__title {
  padding: 0;
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  transition: box-shadow var(--t-base) var(--ease);
}

/* Foco PROGRAMÁTICO: form.js move o foco para o título ao trocar de etapa e
   ao concluir o envio — é isso que leva leitor de tela e cursor de teclado ao
   ponto certo. Como são headings com tabindex="-1" (fora da ordem do Tab, não
   operáveis), o anel de 4px dos controles reais lê aqui como defeito visual.
   O indicador vira um fio da marca sob o título: discreto, coerente com a
   linguagem de fios da página e sem deslocar o layout. O foco em si continua
   existindo — só o desenho mudou. */
.step__title:focus,
.step__title:focus-visible,
.quote__success h3:focus,
.quote__success h3:focus-visible {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--brand-700);
}
.step__body { display: grid; gap: var(--sp-5); }
.step__body + .step__body { margin-top: var(--sp-5); }

/* contexto da etapa 2: serviço já escolhido + atalho para trocar */
.step__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: calc(var(--sp-5) * -1) 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand-050);
  border-left: 2px solid var(--brand-700);
}
.step__context-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-800);
}
.step__context-change {
  margin-left: auto;
  padding: var(--sp-1) var(--sp-2);
  min-height: 32px;
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.step__context-change:hover { color: var(--brand-900); }

.step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-100);
}
.step__actions .btn--primary { flex: 1 1 auto; }

/* sem JS todas as etapas ficam visíveis e separadas por fio */
.no-js .step + .step {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-200);
}

/* campos */
.field { display: grid; gap: var(--sp-2); }
.field-row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, 1fr); } }

.field label,
.field__legend {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
}
.field__opt { font-weight: 400; color: var(--ink-500); }
.field__hint { margin: 0; font-size: var(--fs-xs); color: var(--ink-500); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;                 /* >=44px: alvo de toque e evita zoom no iOS */
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--fs-base);        /* 16px evita auto-zoom no iOS */
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--neutral-400);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { min-height: auto; resize: vertical; line-height: 1.55; }
/* Seta nativa preservada: esconder appearance sem desenhar substituta fazia
   os selects parecerem campos de texto. Sem necessidade forte de
   customizacao, o controle nativo e o mais claro e o mais acessivel. */
.field select { padding-right: var(--sp-3); }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-500); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--brand-700); }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger-600); border-width: 2px; }

.field-error {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--danger-600);
}
.field-error:empty { display: none; }

/* opções (radio) — o input permanece visível e nativo:
   estado de seleção não depende de :has() nem de JavaScript */
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.option:hover { border-color: var(--brand-600); background: var(--brand-050); }
.option input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: .28em 0 0;
  accent-color: var(--brand-700);
  cursor: pointer;
}
.option__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.35;
}
.option__hint {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-500);
  line-height: 1.4;
}
.option:has(input:checked) {
  border-color: var(--brand-700);
  background: var(--brand-050);
  box-shadow: inset 2px 0 0 var(--brand-700);
}
.option:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.option--lg { flex-wrap: wrap; padding: var(--sp-4); }
.option--lg > span:not(.option__hint) { flex: 1; }
.option--lg .option__hint {
  flex-basis: 100%;
  padding-left: calc(18px + var(--sp-3));
  margin-top: var(--sp-1);
}

.option-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .option-grid { grid-template-columns: repeat(2, 1fr); } }

.option-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.option--sm { flex: 1 1 auto; min-width: 8rem; }

/* consentimento */
.field--check { gap: var(--sp-2); }
.field .check,
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-700);
  line-height: 1.5;
  cursor: pointer;
}
.check input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: .2em 0 0;
  accent-color: var(--brand-700);
  cursor: pointer;
}

/* status de envio */
.form-status {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--danger-050);
  border-left: 2px solid var(--danger-600);
  color: var(--ink-900);
}
.form-status[data-tone="info"] {
  background: var(--accent-050);
  border-left-color: var(--accent-600);
}

/* conclusão */
.quote__success h3 {
  font-size: var(--fs-xl);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--brand-700);
}
.quote__success p { color: var(--ink-500); }

/* ---------------------------------------------------------------------
   18. FOOTER — institucional, centrado, sem elementos clicáveis
   Fundo claro porque a logo oficial é azul #005596 e não tem versão
   em negativo. Uma coluna só, muito respiro, tipografia discreta.
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--line-200);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-16);
  text-align: center;
}
.site-footer__logo {
  width: 168px;
  height: auto;
}
.site-footer__legal {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink-500);
}

@media (min-width: 760px) {
  .site-footer__inner { gap: var(--sp-8); padding-block: var(--sp-20); }
}

/* ---------------------------------------------------------------------
   19. CTA FIXO MOBILE — uma barra apenas, ação principal
   --------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: var(--sp-3) var(--container-pad);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line-200);
  box-shadow: var(--shadow-2);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--t-base) var(--ease), visibility var(--t-base);
}
.sticky-cta.is-visible { transform: translateY(0); visibility: visible; }

/* reserva de espaço para o conteúdo não ficar sob a barra */
/* altura real: 1px de borda + 12px + botao 50px + 12px = 75px, mais a
   safe area do aparelho (34px num iPhone com notch). O 86px fixo anterior
   deixava o rodape por baixo da barra. */
body:has(.sticky-cta.is-visible) {
  padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  .sticky-cta { display: none; }
  body:has(.sticky-cta.is-visible) { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------
   20. MOVIMENTO REDUZIDO
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sticky-cta { transition: none; }
}