/* ==========================================================================
   SITES PB - Design System
   Um único arquivo, sem framework e sem build step.

   Por que não Tailwind: o destino é CyberPanel/LiteSpeed com PHP 8.2+, sem
   Node. Tailwind exigiria uma etapa de build e node_modules no fluxo de
   manutenção. Este arquivo, com brotli, fica em torno de 12 KB na rede -
   menor que o Tailwind purgado, e sem toolchain para o cliente manter.

   Índice
   01. Tokens
   02. Reset
   03. Tipografia
   04. Layout
   05. Animações
   06. Botões
   07. Componentes
   08. Header
   09. Hero
   10. Seções da home
   11. Portfólio
   12. Serviços
   13. Blog
   14. Formulários
   15. Footer
   16. Utilitários
   17. Responsivo
   ========================================================================== */

/* ==========================================================================
   00. TIPOGRAFIA - auto-hospedada

   A fonte fica no nosso servidor, não no Google Fonts. Três motivos:
   elimina duas conexões externas (DNS + TLS) do caminho crítico do LCP;
   evita enviar o IP de cada visitante para um terceiro, o que é exatamente
   o tipo de transferência que a LGPD pede para justificar; e garante que o
   site continue com a tipografia certa se o Google estiver indisponível.

   Inter variable, subset latin - cobre todo o português. O subset latin-ext
   está no servidor e só é baixado se a página tiver caracteres fora dele.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* Marca - cores da bandeira da Paraíba, sem reproduzir a bandeira */
  --red: #D71920;
  --red-600: #B8141A;
  --red-700: #8F0F14;
  --red-50: #FEF2F2;
  --red-100: #FDE4E5;

  --black: #090909;
  --graphite: #18181B;
  --white: #FFFFFF;
  --sand: #F5F1EA;
  --orange: #F97316;

  /* Neutros */
  --n-0: #FFFFFF;
  --n-25: #FCFCFD;
  --n-50: #F8F8F9;
  --n-100: #F1F1F3;
  --n-150: #E8E8EB;
  --n-200: #DEDEE3;
  --n-300: #C4C4CC;
  --n-400: #9A9AA5;
  --n-500: #71717A;
  --n-600: #52525B;
  --n-700: #3F3F46;
  --n-800: #27272A;
  --n-900: #18181B;
  --n-950: #09090B;

  /* Papéis semânticos */
  --bg: var(--n-0);
  --bg-soft: var(--n-50);
  --bg-sand: var(--sand);
  --bg-dark: var(--black);
  --text: var(--n-900);
  --text-soft: var(--n-600);
  --text-muted: var(--n-500);
  --border: var(--n-150);
  --border-strong: var(--n-200);

  --success: #16A34A;
  --warning: #D97706;
  --danger: var(--red);
  --info: #2563EB;

  /* Tipografia */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Escala fluida: cresce com a viewport sem media query */
  --t-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  --t-h1: clamp(2.125rem, 1.35rem + 3.4vw, 3.75rem);
  --t-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --t-h3: clamp(1.3rem, 1.08rem + 0.95vw, 1.875rem);
  --t-h4: clamp(1.1rem, 1rem + 0.45vw, 1.375rem);
  --t-body-lg: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --t-body: 1rem;
  --t-small: 0.9375rem;
  --t-caption: 0.8125rem;
  --t-micro: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-normal: 1.5;
  --lh-relaxed: 1.35;

  --ls-tight: -0.035em;
  --ls-snug: -0.02em;
  --ls-wide: 0.02em;
  --ls-caps: 0.14em;

  /* Espaçamento - escala de 4px */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;
  --s-32: 8rem;

  /* Ritmo vertical das seções, fluido */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --section-y-sm: clamp(3rem, 2rem + 4vw, 5rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* Formas */
  --r-sm: 6px;
  --r: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Sombras - discretas, como pede a direção visual */
  --sh-xs: 0 1px 2px rgba(9, 9, 9, .05);
  --sh-sm: 0 1px 3px rgba(9, 9, 9, .06), 0 1px 2px rgba(9, 9, 9, .04);
  --sh: 0 4px 12px rgba(9, 9, 9, .07), 0 1px 3px rgba(9, 9, 9, .04);
  --sh-md: 0 12px 28px rgba(9, 9, 9, .09), 0 2px 6px rgba(9, 9, 9, .04);
  --sh-lg: 0 24px 56px rgba(9, 9, 9, .13), 0 4px 12px rgba(9, 9, 9, .05);
  --sh-red: 0 8px 24px rgba(215, 25, 32, .26);

  /* Movimento */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: 160ms;
  --d: 260ms;
  --d-slow: 480ms;

  --header-h: 64px;

  /*
    Botões flutuantes: WhatsApp na direita, voltar ao topo na esquerda. A
    distância das bordas sai daqui para os dois ficarem na mesma altura do
    rodapé, um de cada lado.
  */
  --float-inset: clamp(1rem, 2vw, 1.75rem);
  --z-header: 100;
  --z-menu: 200;
  --z-float: 300;
  --z-modal: 400;
}

/* ==========================================================================
   02. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /*
    overflow-x mora aqui, não no body: em vários navegadores mobile,
    "overflow" diferente de visible no <body> faz um `position: fixed`
    passar a ser relativo ao body (que rola) em vez do viewport - o cabeçalho
    parecia "sumir" ao rolar por causa exatamente disso. No <html> não tem
    esse efeito colateral e ainda impede o scroll horizontal indesejado.
  */
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* Foco visível - requisito de acessibilidade (§35) */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--red); color: var(--white); }

/* Pular para o conteúdo */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  z-index: 999;
  padding: var(--s-3) var(--s-5);
  background: var(--red);
  color: var(--white);
  border-radius: var(--r);
  font-weight: 600;
  transition: top var(--d) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

/* ==========================================================================
   03. TIPOGRAFIA
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}

h1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--t-h2); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

.display {
  font-size: var(--t-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-soft);
}
/* Usado fora do banner das páginas internas (bloco de conteúdo, não hero) */
.lead--sm { font-size: var(--t-small); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--red);
}

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* Conteúdo editorial (blog, páginas legais, descrições) */
.prose {
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--n-700);
}
.prose > * + * { margin-top: 1.5em; }
.prose h2 {
  font-size: var(--t-h3);
  margin-top: 2.2em;
  margin-bottom: -0.4em;
  color: var(--text);
}
.prose h3 {
  font-size: var(--t-h4);
  margin-top: 1.8em;
  margin-bottom: -0.5em;
  color: var(--text);
}

/*
  Os títulos acima ganham um respiro grande para separar assuntos dentro do
  texto. Quando o bloco COMEÇA com um título, esse respiro vira um vazio no
  topo - e, ao lado de uma coluna que começa colada no topo (o card de números
  em /empresa), a diferença fica evidente. O primeiro elemento nunca precisa
  de margem acima: quem posiciona o bloco é o layout em volta.

  Fica depois das regras de título de propósito: já vence por especificidade
  (classe + pseudoclasse contra classe + elemento), mas vindo depois não
  depende disso para quem for ler o arquivo.
*/
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--text); font-weight: 650; }
.prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--d-fast);
}
.prose a:hover { color: var(--red-700); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 0.35em; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: -0.85em;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.6em; }
.prose blockquote {
  border-left: 3px solid var(--red);
  padding: var(--s-1) 0 var(--s-1) var(--s-6);
  font-size: 1.08em;
  color: var(--text);
  font-style: italic;
}
.prose img { border-radius: var(--r-md); margin: 2em 0; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--n-100);
  padding: 0.15em 0.4em;
  border-radius: var(--r-sm);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }
.prose table { font-size: var(--t-small); }
.prose th, .prose td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.prose th { font-weight: 650; background: var(--n-50); }

/* ==========================================================================
   04. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

.section--soft { background: var(--bg-soft); }
.section--sand { background: var(--bg-sand); }
.section--dark {
  background: var(--bg-dark);
  color: var(--n-100);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark .lead { color: var(--n-400); }
.section--dark .eyebrow { color: #FF5A61; }

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head > * + * { margin-top: var(--s-4); }

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.section-head-row .section-head { margin-bottom: 0; }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   05. ANIMAÇÕES
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideRight {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* Revelação no scroll - o JS só adiciona .is-visible */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
[data-reveal='left']  { transform: translate3d(-32px, 0, 0); }
[data-reveal='right'] { transform: translate3d(32px, 0, 0); }
[data-reveal='scale'] { transform: scale(.95); }
[data-reveal='fade']  { transform: none; }

/* Atraso em cascata para grades */
[data-reveal-delay='1'] { transition-delay: 70ms; }
[data-reveal-delay='2'] { transition-delay: 140ms; }
[data-reveal-delay='3'] { transition-delay: 210ms; }
[data-reveal-delay='4'] { transition-delay: 280ms; }
[data-reveal-delay='5'] { transition-delay: 350ms; }
[data-reveal-delay='6'] { transition-delay: 420ms; }

/* §35 - respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   06. BOTÕES
   ========================================================================== */

.btn {
  --btn-bg: var(--red);
  --btn-color: var(--white);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.875rem 1.625rem;
  min-height: 50px;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--r-full);
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--d) var(--e-out),
    box-shadow var(--d) var(--e-out),
    background-color var(--d-fast),
    color var(--d-fast),
    border-color var(--d-fast);
}

/* Brilho que atravessa o botão no hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-100%);
  transition: transform var(--d-slow) var(--e-out);
}
.btn:hover::after { transform: translateX(100%); }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-red);
}
.btn:active { transform: translateY(0); transition-duration: 60ms; }

/*
  Bolinha verde pulsante dos CTAs.

  É a mesma animação do site de referência (temp/sitespb), que usa a classe
  `animate-ping` do Tailwind. O projeto não usa Tailwind e não valia instalar
  um framework inteiro por causa de uma animação de quatro linhas, então o
  keyframe foi replicado com os mesmos valores do original: cresce até o
  dobro do tamanho e some aos 75%, e fica invisível até o fim do ciclo. É
  essa pausa no fim que dá a batida de radar - diferente de um pulso que só
  vai e volta, que era o que estava aqui antes.
*/
@keyframes btn-pulse {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.btn .btn__pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: #34D399; /* emerald-400, a mesma cor da referência */
  animation: btn-pulse 1s cubic-bezier(0, 0, .2, 1) infinite;
}

/*
  Exceção deliberada à regra global de movimento reduzido.

  O site inteiro congela animações quando o sistema pede menos movimento
  (bloco `prefers-reduced-motion` lá em cima). Esta bolinha é a única
  exceção, a pedido do cliente: ela é o indicador de "estamos disponíveis"
  dos CTAs, tem 8px, não se desloca pela tela e pulsa uma vez por segundo -
  bem abaixo dos 3 flashes por segundo que a WCAG trata como risco.

  Sem esta exceção ela fica parada, que foi exatamente o que aconteceu na
  máquina do cliente (Windows com "efeitos de animação" desligado): o site
  de referência continuava pulsando por usar Tailwind, que ignora essa
  preferência, e o nosso não, por respeitá-la.

  O seletor tem especificidade maior que o `*` da regra global, então esta
  declaração vence mesmo as duas sendo `!important`.
*/
@media (prefers-reduced-motion: reduce) {
  .btn .btn__pulse-dot {
    animation: btn-pulse 1s cubic-bezier(0, 0, .2, 1) infinite !important;
  }
}

.btn--lg {
  padding: 1.0625rem 2.125rem;
  min-height: 58px;
  font-size: var(--t-body);
}
.btn--sm {
  padding: 0.625rem 1.125rem;
  min-height: 40px;
  font-size: var(--t-caption);
}

.btn--dark { --btn-bg: var(--black); --btn-color: var(--white); }
.btn--dark:hover { box-shadow: var(--sh-lg); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-color: var(--text);
  --btn-border: var(--border-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--text);
  --btn-color: var(--white);
  --btn-border: var(--text);
  box-shadow: var(--sh-md);
}

.btn--light {
  --btn-bg: var(--white);
  --btn-color: var(--black);
}
.btn--light:hover { box-shadow: 0 12px 32px rgba(0,0,0,.28); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-color: var(--white);
  --btn-border: rgba(255,255,255,.32);
}
.btn--outline-light:hover {
  --btn-bg: rgba(255,255,255,.1);
  --btn-border: rgba(255,255,255,.6);
  box-shadow: none;
}

.btn--whatsapp { --btn-bg: #25D366; --btn-color: var(--white); }
.btn--whatsapp:hover { box-shadow: 0 8px 24px rgba(37,211,102,.35); }

.btn--block { width: 100%; }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .55;
  pointer-events: none;
}

/* Link com seta que avança no hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 650;
  font-size: var(--t-small);
  color: var(--red);
  transition: gap var(--d) var(--e-out), color var(--d-fast);
}
.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--d) var(--e-out);
}
.link-arrow:hover { gap: var(--s-3); color: var(--red-700); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   07. COMPONENTES
   ========================================================================== */

.card {
  background: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    transform var(--d) var(--e-out),
    box-shadow var(--d) var(--e-out),
    border-color var(--d);
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
}
.card__body { padding: var(--s-6); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--n-100);
  color: var(--n-600);
  white-space: nowrap;
}
.badge--red { background: var(--red-50); color: var(--red-700); }
.badge--dark { background: var(--n-900); color: var(--n-100); }
.badge--success { background: #DCFCE7; color: #15803D; }
.badge--warning { background: #FEF3C7; color: #B45309; }
.badge--light { background: rgba(255,255,255,.14); color: var(--white); }

/* Indicador de site no ar */
.badge--online::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

/* Alertas e flash messages */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  border: 1px solid;
  animation: fadeUp var(--d) var(--e-out);
}
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.alert--success { background: #F0FDF4; border-color: #BBF7D0; color: #14532D; }
.alert--error   { background: var(--red-50); border-color: #FECACA; color: #7F1D1D; }
.alert--info    { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; }
.alert--warning { background: #FFFBEB; border-color: #FDE68A; color: #78350F; }

/* Acordeão (FAQ) */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  font-size: var(--t-body-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text);
  transition: color var(--d-fast);
}
.accordion__trigger:hover { color: var(--red); }
.accordion__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  transition: all var(--d) var(--e-out);
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--d) var(--e-out), opacity var(--d-fast);
}
.accordion__icon::before { width: 12px; height: 2px; }
.accordion__icon::after  { width: 2px; height: 12px; }
.accordion__trigger[aria-expanded='true'] .accordion__icon {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  transform: rotate(180deg);
}
.accordion__trigger[aria-expanded='true'] .accordion__icon::after {
  transform: scaleY(0);
  opacity: 0;
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d) var(--e-out);
}
.accordion__panel > div { overflow: hidden; }
.accordion__item:has(.accordion__trigger[aria-expanded='true']) .accordion__panel { grid-template-rows: 1fr; }
.accordion__content {
  padding-bottom: var(--s-6);
  padding-right: var(--s-10);
  color: var(--text-soft);
  line-height: 1.6;
}
/* Respostas da seção "Dúvidas frequentes" na home: fonte menor que o corpo */
.home-faq .accordion__content { font-size: 15px; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--t-caption);
  color: var(--text-muted);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--s-2); }
.breadcrumb li:not(:last-child)::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--n-300);
}
.breadcrumb a { transition: color var(--d-fast); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb [aria-current] { color: var(--text); font-weight: 550; }

/* Paginação */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-16);
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: var(--t-small);
  font-weight: 600;
  transition: all var(--d-fast);
}
.pagination a:hover {
  border-color: var(--text);
  background: var(--text);
  color: var(--white);
}
.pagination [aria-current='page'] {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* Estado vazio */
.empty {
  text-align: center;
  padding: var(--s-16) var(--s-6);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--text-muted);
}
.empty h3 { margin-bottom: var(--s-2); color: var(--text-soft); }

/* Moldura de placeholder - o cliente vê exatamente o que precisa enviar */
.placeholder {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding: var(--s-8);
  background:
    repeating-linear-gradient(45deg,
      var(--n-50) 0, var(--n-50) 12px,
      var(--n-100) 12px, var(--n-100) 24px);
  border: 2px dashed var(--n-300);
  border-radius: var(--r-md);
  color: var(--n-500);
  text-align: center;
  font-size: var(--t-caption);
  min-height: 180px;
}
.placeholder__label {
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--t-micro);
  color: var(--n-600);
}
.placeholder__spec {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  background: var(--n-0);
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* Botão flutuante de WhatsApp (§31 - discreto e persistente) */
.wa-float {
  position: fixed;
  right: var(--float-inset);
  bottom: var(--float-inset);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.8rem;
  background: #25D366;
  color: var(--white);
  border-radius: var(--r-full);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
  transform: translateY(120%);
  opacity: 0;
  transition:
    transform var(--d-slow) var(--e-spring),
    opacity var(--d) var(--e-out),
    box-shadow var(--d);
}
.wa-float.is-visible { transform: none; opacity: 1; }
.wa-float:hover { box-shadow: 0 12px 34px rgba(37, 211, 102, .45); }
.wa-float svg { width: 26px; height: 26px; }
.wa-float__label {
  font-size: var(--t-small);
  font-weight: 650;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width var(--d-slow) var(--e-out), padding var(--d-slow);
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label {
  max-width: 160px;
  padding-right: var(--s-2);
}
@media (hover: none) {
  .wa-float__label { display: none; }
}

/* --------------------------------------------------------------------------
   Voltar ao topo

   Fica no canto esquerdo, oposto ao botão do WhatsApp: os dois na mesma altura
   do rodapé, um de cada lado, sem disputar espaço.

   Ação secundária: menor que o do WhatsApp e sem cor de marca, para não
   competir com ele. O fundo é translúcido com desfoque - o conteúdo continua
   aparecendo por trás e o botão não vira uma mancha sólida sobre a página.

   Escondido com opacidade + `visibility`, e não com `display`: a opacidade dá
   a transição de entrada, e o `visibility` tira o botão da navegação por
   teclado enquanto ele está invisível (um botão focável que não se vê é uma
   armadilha para quem navega por Tab).
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  left: var(--float-inset);
  bottom: var(--float-inset);
  z-index: var(--z-float);

  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;

  color: var(--white);
  background: rgba(9, 9, 9, .42);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-full);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--d) var(--e-out),
    transform var(--d) var(--e-out),
    visibility var(--d),
    background-color var(--d-fast),
    border-color var(--d-fast);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: rgba(9, 9, 9, .62);
  border-color: rgba(255, 255, 255, .32);
}

.to-top:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.to-top svg { width: 20px; height: 20px; }

/*
  O aviso de cookies ocupa este mesmo canto e fica numa camada acima, então
  cobriria o botão. Enquanto ele estiver na tela, o botão sai de cena: decidir
  sobre cookies é a interação prioritária, e o aviso é temporário.

  `:has()` com combinador de irmão porque o aviso vem depois do botão no HTML -
  não há como selecioná-lo "para trás" de outro jeito.
*/
.to-top:has(~ .cookie-bar.is-visible) {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Mapa do site

   Colunas de links agrupados por seção. Cada grupo é um <nav> com título
   próprio, então quem usa leitor de tela pode pular de bloco em bloco em vez
   de percorrer a lista inteira.
   -------------------------------------------------------------------------- */
.sitemap-group__title {
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--red);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.sitemap-group__list {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin-top: var(--s-4);
}

.sitemap-group__list a {
  display: inline-block;
  font-size: var(--t-small);
  color: var(--text-soft);
  transition: color var(--d-fast), transform var(--d-fast);
}
.sitemap-group__list a:hover {
  color: var(--red);
  transform: translateX(3px);
}

/* Aviso de cookies (§48) */
.cookie-bar {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: var(--z-modal);
  max-width: 520px;
  padding: var(--s-5);
  background: var(--n-950);
  color: var(--n-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  transform: translateY(140%);
  transition: transform var(--d-slow) var(--e-spring);
}
.cookie-bar.is-visible { transform: none; }
.cookie-bar a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar__actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   08. HEADER
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0);
  transition:
    background-color var(--d) var(--e-out),
    box-shadow var(--d) var(--e-out),
    height var(--d) var(--e-out),
    border-color var(--d);
  border-bottom: 1px solid transparent;
}

/* Sobre o hero escuro, o header começa transparente e claro */
.header--over-hero .header__link,
.header--over-hero .header__brand-name { color: var(--white); }
.header--over-hero .header__toggle span { background: var(--white); }

/*
  "Orçamento" usa .btn--ghost, feito para fundo claro: texto escuro e borda
  cinza. Sobre o hero escuro (header ainda transparente) isso fica ilegível -
  texto quase preto e borda quase invisível no fundo preto. Clareia enquanto
  o header está sobre o hero; .is-stuck (mais abaixo) devolve as cores
  originais quando o fundo branco do header aparece.
*/
.header--over-hero .header__actions .btn--ghost {
  --btn-color: var(--white);
  --btn-border: rgba(255, 255, 255, .4);
}
.header--over-hero .header__actions .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, .12);
  --btn-color: var(--white);
  --btn-border: rgba(255, 255, 255, .7);
}

/*
  Ao rolar, o header ganha fundo preto translúcido em vez de branco: o
  conteúdo continua visível por trás, o contraste do texto branco se mantém
  igual ao estado sobre o hero (sem troca de cor no meio da rolagem) e a
  navegação nunca some da tela.
*/
.header.is-stuck {
  background: rgba(9, 9, 9, .78);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, .1);
  box-shadow: 0 1px 24px rgba(0, 0, 0, .28);
  height: 56px;
}
.header.is-stuck .header__link,
.header.is-stuck .header__brand-name { color: var(--white); }
.header.is-stuck .header__toggle span { background: var(--white); }

.header.is-stuck .header__actions .btn--ghost {
  --btn-color: var(--white);
  --btn-border: rgba(255, 255, 255, .4);
}
.header.is-stuck .header__actions .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, .12);
  --btn-color: var(--white);
  --btn-border: rgba(255, 255, 255, .7);
}

.header { transition: background-color var(--d), height var(--d), box-shadow var(--d); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
}

.header__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}
/*
  Nasce maior (topo da página, header ainda transparente/sobre o hero) e
  encolhe suavemente para uma versão compacta assim que o header gruda
  (.is-stuck) - mesmo efeito em mobile e desktop, só a barra em si é mais
  baixa no mobile (--header-h menor lá).
*/
.header__brand svg, .header__brand img {
  height: 50px;
  width: auto;
  transition: height var(--d) var(--e-out);
}
.header.is-stuck .header__brand svg,
.header.is-stuck .header__brand img { height: 34px; }

.header__nav { display: flex; align-items: center; gap: var(--s-1); }

.header__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-small);
  font-weight: 550;
  color: var(--text);
  border-radius: var(--r);
  transition: color var(--d-fast);
}
.header__link::after {
  content: '';
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 4px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d) var(--e-out);
}
.header__link:hover::after,
.header__link[aria-current]::after { transform: scaleX(1); }
.header__link[aria-current] { color: var(--red); }

.header__link .chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--d) var(--e-out);
}
.header__item:hover .chevron,
.header__item:focus-within .chevron { transform: rotate(180deg); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Mega menu de serviços */
.header__item { position: relative; }

/*
  Sem espaço morto entre o link e o menu: o cursor precisa passar por essa
  faixa para alcançar o mega, e se ela não pertencer ao .header__item, o
  hover se perde no meio do caminho e o menu fecha antes da pessoa chegar lá.
  top: 100% (sem gap) elimina essa faixa; o afastamento visual do link vem do
  padding interno do próprio .mega, que já existe.
*/
/*
  Alinhado pela esquerda do item, não centralizado nele. Centralizado
  (left:50% + translateX(-50%)) o painel de 720px nascia em x = -100 numa
  janela de 1040px: "Serviços" fica perto da borda esquerda, e metade do menu
  caía fora da tela. Ancorado à esquerda, o crescimento é sempre para dentro
  da página.
*/
.mega {
  position: absolute;
  top: 100%;
  padding-top: calc(var(--s-5) + 10px);
  left: 0;
  transform: translateY(-8px);
  width: min(720px, calc(100vw - var(--gutter) * 2));
  padding-left: var(--s-4);
  padding-right: var(--s-4);
  padding-bottom: var(--s-4);
  background: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--d) var(--e-out),
    transform var(--d) var(--e-out),
    visibility var(--d);
  z-index: var(--z-menu);
}
.header__item:hover .mega,
.header__item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/*
  Lista plana em 3 colunas: o menu cresce para os lados, não para baixo. Com o
  catálogo agrupado em duas categorias e uma linha por serviço, a altura
  passava da tela; em 3 colunas, 9 serviços ocupam 3 linhas baixas.
*/
.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px var(--s-2);
}
/* Variante enxuta do mega menu, para submenus curtos (ex.: Ferramentas) */
.mega--simple { width: min(260px, calc(100vw - var(--gutter) * 2)); }
.mega__list { display: flex; flex-direction: column; gap: 2px; }

.mega__link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  line-height: 1.25;
  color: var(--text);
  transition: background-color var(--d-fast), color var(--d-fast);
}
.mega__link:hover { background: var(--n-50); color: var(--red); }
.mega__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--red-50);
  color: var(--red);
}
.mega__icon svg { width: 14px; height: 14px; }
.mega__name {
  font-size: var(--t-caption);
  font-weight: 600;
  color: inherit;
}
.mega__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* Botão do menu mobile */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
}
.header__toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--d) var(--e-out), opacity var(--d-fast);
}
.header__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */
/*
  Painel escuro, e não branco, por dois motivos concretos:
  1. o logotipo do cabeçalho é branco sobre escuro - sobre um painel branco
     metade dele (o "PB" e a assinatura) simplesmente sumia;
  2. o botão de fechar vive no cabeçalho, e suas barras são brancas.
  Com o painel escuro, cabeçalho e menu falam a mesma língua e o X continua
  legível por cima. Ver também a regra `body.is-locked .header` logo abaixo.
*/
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  color: var(--white);
  padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-out), visibility var(--d-slow);
}
.mobile-nav.is-open { transform: none; visibility: visible; }

/*
  Com o menu aberto, o cabeçalho sobe acima do painel: é onde fica o botão de
  fechar. Sem isto o painel cobre o X (z-menu 200 > z-header 100) e a pessoa
  fica presa no menu, sem saída além do ESC ou de clicar num link. Sobe só
  neste estado, para não passar na frente do WhatsApp flutuante e do aviso de
  cookies no uso normal.
*/
body.is-locked .header { z-index: calc(var(--z-menu) + 1); }

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mobile-nav__sub {
  padding: var(--s-2) 0 var(--s-4) var(--s-4);
  display: grid;
  gap: var(--s-1);
}
/*
  `display: grid` acima é regra de autor e vence o `[hidden] { display: none }`
  do navegador, que é regra de user agent. Sem esta linha o submenu de
  Serviços nasce aberto no mobile, por mais que o HTML traga o atributo
  `hidden` e o JS o alterne.
*/
.mobile-nav__sub[hidden] { display: none; }

/* A seta indica se o submenu está aberto ou fechado. */
.mobile-nav__link .chevron { transition: transform var(--d-fast) var(--e-out); }
.mobile-nav__link[aria-expanded='true'] .chevron { transform: rotate(180deg); }
.mobile-nav__sub a {
  padding: var(--s-2) 0;
  font-size: var(--t-small);
  color: var(--n-400);
}
.mobile-nav__sub a:hover { color: var(--white); }
.mobile-nav__footer { margin-top: auto; padding-top: var(--s-8); display: grid; gap: var(--s-3); }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   09. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 900px);
  padding-top: calc(var(--header-h) + var(--s-12));
  padding-bottom: var(--s-16);
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  O vídeo cobre o poster, mas só aparece quando tem quadro para mostrar. Sem
  isso a troca poster -> vídeo pisca: o elemento já ocupa a área antes de ter
  imagem decodificada. O poster fica embaixo o tempo todo, então em qualquer
  falha de carregamento a arte continua lá.
*/
.hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-out);
}
.hero__media video.is-ready { opacity: 1; }

/* Overlay em duas camadas: escurece o topo e cria contraste no texto */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg,
      rgba(9, 9, 9, .93) 0%,
      rgba(9, 9, 9, .82) 42%,
      rgba(9, 9, 9, .45) 75%,
      rgba(9, 9, 9, .55) 100%),
    radial-gradient(120% 90% at 12% 50%, rgba(215, 25, 32, .2), transparent 62%);
}

/* Grade sutil de fundo, para dar textura sem gradiente pesado */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 78%);
}

.hero__content { max-width: 780px; position: relative; }
.hero__content > * + * { margin-top: var(--s-6); }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-full);
  font-size: var(--t-caption);
  font-weight: 550;
  color: var(--n-200);
  backdrop-filter: blur(6px);
  animation: fadeUp var(--d-slow) var(--e-out) both;
}
.hero__eyebrow strong {
  padding: 0.2rem 0.6rem;
  background: var(--red);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
}

.hero__title {
  font-size: clamp(2.75rem, 1.6rem + 5.2vw, 65px);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--white);
  animation: fadeUp var(--d-slow) var(--e-out) 80ms both;
}
.hero__title-main { font-size: 35px; }

/*
  Trecho marcado com colchetes na configuração da frase de destaque
  (ex.: "[Sites profissionais] [para todo o Brasil.|#FFFFFF]"). Sem cor
  informada usa o vermelho padrão da marca; com "|cor" usa a cor definida
  inline pelo helper highlight_brackets(). Texto fora dos colchetes não
  passa por aqui - herda o branco padrão do título.
*/
.hero__accent {
  color: var(--red);
}

.hero__text {
  max-width: 560px;
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, .78);
  animation: fadeUp var(--d-slow) var(--e-out) 180ms both;
}

.hero__actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  animation: fadeUp var(--d-slow) var(--e-out) 280ms both;
}

.hero__stats {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid rgba(255, 255, 255, .12);
  animation: fadeUp var(--d-slow) var(--e-out) 380ms both;
}
.hero__stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__stat-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.hero__stat-label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-caption);
  color: rgba(255, 255, 255, .58);
}

/* Indicador de rolagem */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s-8);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  animation: fadeIn var(--d-slow) 1.2s both;
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(rgba(255,255,255,.5), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  width: 1px;
  height: 40px;
  background: linear-gradient(transparent, var(--red));
  animation: scrollDown 2s var(--e-in-out) infinite;
}
@keyframes scrollDown {
  to { transform: translateY(80px); }
}

/* Hero interno das páginas */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.75rem, 1.25rem + 2vw, 3rem));
  padding-bottom: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 130% at 88% 8%, rgba(215, 25, 32, .26), transparent 58%),
    radial-gradient(70% 100% at 8% 100%, rgba(249, 115, 22, .1), transparent 60%);
}

/*
  Hero com imagem de fundo (páginas de serviço).

  O overlay é forte de propósito: o texto aqui é o conteúdo principal e precisa
  de contraste AA em qualquer imagem que venha a ser cadastrada no painel - não
  dá para confiar que a próxima foto será escura. A imagem entra como ambiente,
  não como protagonista.
*/
.page-hero--media { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero__media img,
.page-hero__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hero--media::before {
  background:
    linear-gradient(100deg,
      rgba(9, 9, 9, .96) 0%,
      rgba(9, 9, 9, .90) 45%,
      rgba(9, 9, 9, .66) 78%,
      rgba(9, 9, 9, .74) 100%),
    radial-gradient(85% 120% at 88% 6%, rgba(215, 25, 32, .22), transparent 60%);
}

/* Em telas estreitas a imagem some sob o texto: escurece por igual */
@media (max-width: 768px) {
  .page-hero--media::before {
    background:
      linear-gradient(180deg, rgba(9, 9, 9, .92) 0%, rgba(9, 9, 9, .88) 60%, rgba(9, 9, 9, .95) 100%),
      radial-gradient(90% 90% at 80% 0%, rgba(215, 25, 32, .2), transparent 62%);
  }
}
.page-hero__inner { max-width: 780px; }
.page-hero__inner > * + * { margin-top: var(--s-5); }
.page-hero h1 { color: var(--white); }
.page-hero .lead {
  color: rgba(255, 255, 255, .74);
  max-width: 620px;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
}
.page-hero .breadcrumb { color: rgba(255, 255, 255, .5); }
.page-hero .breadcrumb [aria-current] { color: var(--white); }
.page-hero .breadcrumb li:not(:last-child)::after { background: rgba(255,255,255,.3); }
.page-hero .breadcrumb a:hover { color: var(--white); }

/* ==========================================================================
   10. SEÇÕES DA HOME
   ========================================================================== */

/* Prova social */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.stat { text-align: center; padding: var(--s-4); }
.stat__value {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat__value span { color: var(--red); }
.stat__label {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--text-soft);
  line-height: 1.4;
}

/*
  Carrossel de logos de clientes: navegação real por arraste/swipe e pelos
  círculos abaixo (JS em `initMarquee()`), com avanço automático que pausa no
  hover ou foco. Cinza por padrão, cor e leve aumento no hover.
*/
/*
  Respiro nas laterais fica aqui, no elemento que NÃO rola - sem isso a
  primeira/última logo encostava na borda da tela e o carrossel parecia
  vazar para fora da página. Colocar esse padding no `.marquee__viewport`
  em vez daqui parece equivalente, mas não é: naquele elemento o padding
  também conta como ponto de encaixe do `scroll-snap`, e o navegador rola
  sozinho ao carregar para "cancelar" essa margem e encostar a primeira logo
  bem na borda - o oposto do que se quer.
*/
.marquee { position: relative; padding-inline: var(--gutter); }
.marquee__viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  /*
    `proximity`, não `mandatory`: com encaixe obrigatório o navegador só pode
    parar exatamente sobre um ponto de encaixe, e as últimas logos não têm
    largura sobrando depois delas para encostar no início da tela - o fim da
    faixa ficava inalcançável e os últimos círculos travavam todos na mesma
    posição. Com `proximity` o encaixe continua acontecendo quando a rolagem
    para perto de uma logo, mas o fim da lista deixa de ser proibido.
  */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-block: var(--s-3);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  /* Rolável de verdade (acessível via teclado e swipe), mas sem barra visível. */
  scrollbar-width: none;
}
.marquee__viewport::-webkit-scrollbar { display: none; }
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.75rem, 5vw, 4.75rem);
  width: max-content;
}
.marquee__item {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  height: 96px;
  scroll-snap-align: start;
}
.marquee__item img {
  /*
    Altura fixa em vez de `max-height: 100%`: dentro de um item de grid com
    `place-items: center`, o percentual não tinha uma altura definida para
    resolver contra e o navegador renderizava a logo no tamanho natural do
    arquivo (algumas com 300px+) - cortada pelo `overflow: hidden` acima, só a
    lasquinha do topo aparecia. Altura fixa elimina essa conta.
  */
  height: 60px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  /* Logos monocromáticos (§14), ganham cor e crescem um pouco no hover */
  filter: grayscale(1) opacity(.8);
  transition: filter var(--d) var(--e-out), transform var(--d) var(--e-out), opacity var(--d) var(--e-out);
}
.marquee__item:hover img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.12);
}

/*
  Círculos de navegação abaixo do carrossel. 30px de espaço entre eles: o
  Google recomenda alvos de toque com espaçamento generoso para evitar clique
  errado (WCAG 2.5.8 pede no mínimo 24px de lado ou espaçamento equivalente
  quando o alvo é menor - aqui ficou acima do mínimo, de propósito).
*/
.marquee__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: var(--s-5);
}
.marquee__dots[hidden] { display: none; }
.marquee__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--n-200);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out), width var(--d-fast) var(--e-out);
}
.marquee__dot:hover { background: var(--n-400); }
.marquee__dot.is-active { width: 22px; background: var(--red); }

/* Card de serviço */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--d) var(--e-out),
    box-shadow var(--d) var(--e-out),
    border-color var(--d);
}
/* Camada vermelha que sobe do rodapé no hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
}
.service-card:hover::before { transform: scaleX(1); }

/*
  Banda de imagem. O tratamento é de propósito diferente do card de portfólio:
  lá a imagem é o conteúdo (o site entregue ao cliente) e aparece limpa; aqui
  ela é atmosfera, escurecida por um degradê, e quem identifica o serviço
  continua sendo o ícone. Sem essa distinção, serviços e portfólio ficariam
  visualmente idênticos na home.
*/
.service-card__media {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--n-900);
}
.service-card__media img,
.service-card__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-card__media img {
  transition: transform 700ms var(--e-out), filter var(--d) var(--e-out);
  filter: saturate(.85);
}
.service-card:hover .service-card__media img {
  transform: scale(1.06);
  filter: saturate(1);
}
/* Degradê que amarra a imagem ao corpo do card e sustenta o contraste do ícone */
.service-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(9, 9, 9, .18) 0%,
    rgba(9, 9, 9, .05) 45%,
    rgba(9, 9, 9, .55) 100%);
  pointer-events: none;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  flex-grow: 1;
}
/* Com imagem, o corpo sobe e o ícone monta sobre a banda */
.service-card--media .service-card__body {
  padding-top: var(--s-5);
}

.service-card__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--red-50);
  color: var(--red);
  transition: background-color var(--d), color var(--d), transform var(--d) var(--e-spring);
}
.service-card--media .service-card__icon {
  margin-top: -46px;
  background: var(--n-0);
  box-shadow: 0 6px 18px rgba(9, 9, 9, .28);
}
.service-card:hover .service-card__icon {
  background: var(--red);
  color: var(--white);
  transform: scale(1.08) rotate(-4deg);
}
.service-card__icon svg { width: 24px; height: 24px; }

.service-card__title { font-size: var(--t-h4); }
.service-card__text {
  font-size: var(--t-small);
  color: var(--text-soft);
  line-height: var(--lh-relaxed);
  flex-grow: 1;
}
.service-card__link { margin-top: auto; }

/* Card de serviço usado como link inteiro (página de ferramentas) */
a.service-card { color: inherit; }

/* Faixa de diferenciais */
.feature {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
}
.feature__num {
  flex-shrink: 0;
  font-size: var(--t-h3);
  font-weight: 800;
  line-height: 1;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  opacity: .35;
}
.feature__title { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.feature__text {
  font-size: var(--t-small);
  color: var(--text-soft);
  line-height: var(--lh-relaxed);
}
.stack .feature:first-child .feature__text {
  line-height: 1.35;
}

/* Processo (§28) */
/*
  Duas colunas de 3: 01-03 na esquerda, 04-06 na direita. `grid-auto-flow:
  column` com exatamente 3 linhas explícitas é o que garante esse corte certo
  - preenche a coluna 1 inteira (linhas 1-3) antes de começar a coluna 2, ao
  contrário de `column-count`, que balanceia por altura de conteúdo e podia
  devolver 2+4 se os textos tivessem tamanhos diferentes.
*/
.process {
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: var(--s-10);
}
.process__item {
  position: relative;
  padding: var(--s-6) 0 var(--s-6) clamp(3.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--border);
  transition: background-color var(--d);
}
/* Item 03 fecha a coluna esquerda, item 06 fecha a direita - as duas colunas
   terminam com a mesma linha embaixo, não só a última do HTML. */
.process__item:nth-child(3), .process__item:last-child {
  border-bottom: 1px solid var(--border);
}
.process__item::before {
  counter-increment: step;
  content: '0' counter(step);
  position: absolute;
  left: 0;
  top: var(--s-6);
  font-size: var(--t-h4);
  font-weight: 800;
  color: var(--n-300);
  font-variant-numeric: tabular-nums;
  transition: color var(--d) var(--e-out);
}
.process__item:hover::before { color: var(--red); }
.process__title { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.process__text { color: var(--text-soft); font-size: var(--t-small); line-height: var(--lh-relaxed); max-width: 60ch; }

.section--dark .process__item { border-color: rgba(255,255,255,.1); }
.section--dark .process__item::before { color: rgba(255,255,255,.22); }
.section--dark .process__item:hover::before { color: #FF5A61; }
.section--dark .process__text { color: rgba(255,255,255,.62); }

/*
  Depoimentos - carrossel de uma avaliação por vez (§22).

  Layout de referência aprovada em `.agents/avaliacoes-google.jpg`: seção
  escura, card branco com avatar + nome + selo do Google, estrelas + selo de
  verificado, texto e link para a avaliação original. Avança sozinho a cada
  5s (`initReviews()` no site.js), pausa no hover/foco/aba em segundo plano,
  e tem setas para navegar na mão a qualquer momento.
*/
.reviews-sub {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--t-small);
  color: var(--n-400);
}
.reviews-sub strong { color: var(--white); font-weight: 700; }

.reviews {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.reviews__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--white);
  transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.reviews__arrow:hover { background: var(--red); border-color: var(--red); }
.reviews__arrow svg { width: 20px; height: 20px; }
/* Regra de autor vence o [hidden] do navegador - só some com um único depoimento. */
.reviews__arrow[hidden] { display: none; }

.reviews__viewport { flex: 1; overflow: hidden; }
.reviews__track {
  display: flex;
  align-items: stretch;
  transition: transform var(--d-slow) var(--e-out);
}
/*
  Cada avaliação vive num "slide" de largura cheia, que centraliza o card com
  `justify-content` - não com `margin: auto` no próprio card. Margem
  automática em item de flex só funciona quando sobra espaço na linha inteira
  para distribuir; com 5+ avaliações lado a lado a linha nunca cabe no
  visor (é assim que o carrossel funciona), a soma dá negativa, e a
  especificação manda zerar as margens automáticas nesse caso - cada card
  colava à esquerda do próprio slide, sobrando uma faixa vazia (o fundo escuro
  da seção) depois dele. `justify-content: center` no slide não depende de
  espaço sobrando na linha toda: cada slide centraliza o próprio conteúdo
  sozinho, então o problema não existe mais.
*/
.reviews__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding-inline: var(--s-2);
}

.review-card {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-8);
  background: var(--n-0);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.review-card__head { display: flex; align-items: center; gap: var(--s-3); }
.review-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--n-100);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--red);
  flex-shrink: 0;
}
.review-card__who { flex-grow: 1; min-width: 0; }
.review-card__name { font-weight: 650; font-size: var(--t-small); color: var(--text); }
.review-card__brand { flex-shrink: 0; line-height: 0; }
.review-card__brand svg { width: 20px; height: 20px; }

.review-card__rating { display: flex; align-items: center; gap: var(--s-2); }
.review-card__stars { display: flex; gap: 2px; color: var(--orange); }
.review-card__stars svg { width: 15px; height: 15px; }
.review-card__verified {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--info);
  color: var(--white);
  flex-shrink: 0;
}
.review-card__verified svg { width: 10px; height: 10px; }

.review-card__text { font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--n-700); }

/* CTA final */
.cta {
  position: relative;
  padding: clamp(2rem, 1.5rem + 3.5vw, 3.75rem) clamp(1.5rem, 1rem + 4vw, 4.5rem);
  background: var(--black);
  color: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(215, 25, 32, .38), transparent 62%),
    radial-gradient(60% 90% at 92% 100%, rgba(249, 115, 22, .16), transparent 60%);
}
.cta__inner { max-width: 640px; margin-inline: auto; }
.cta__inner > * + * { margin-top: var(--s-5); }
.cta h2 { color: var(--white); }
.cta p { color: rgba(255, 255, 255, .74); font-size: var(--t-body-lg); line-height: var(--lh-relaxed); }
.cta__actions { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }
.cta__note { font-size: var(--t-caption); color: rgba(255, 255, 255, .48); }

/* --------------------------------------------------------------------------
   Comparativo lado a lado (página de hospedagem)

   Duas colunas: o cenário atual e o proposto. A da direita é a recomendada e
   por isso ganha borda vermelha e um leve brilho - a diferença é de ênfase,
   não de cor de texto, para o contraste continuar AA nas duas.
   -------------------------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.compare__col {
  padding: var(--s-8);
  background: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.compare__col--best {
  border-color: var(--red);
  box-shadow: var(--sh-red);
}

.section--dark .compare__col {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .12);
}
.section--dark .compare__col--best {
  background: rgba(215, 25, 32, .07);
  border-color: var(--red);
}

.compare__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  margin-bottom: var(--s-4);
  border-radius: var(--r-full);
  background: var(--n-100);
  color: var(--n-700);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare__col--best .compare__tag { background: var(--red); color: var(--white); }
.section--dark .compare__col:not(.compare__col--best) .compare__tag {
  background: rgba(255, 255, 255, .1);
  color: var(--n-200);
}

.compare__text {
  margin-bottom: var(--s-5);
  color: var(--text-soft);
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
}
.section--dark .compare__text { color: rgba(255, 255, 255, .6); }

.compare__list { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
}
.compare__list svg { flex-shrink: 0; margin-top: 3px; }
.compare__list--no  { color: var(--text-soft); }
.compare__list--no svg { color: var(--n-400); }
.compare__list--yes svg { color: var(--red); }
.section--dark .compare__list--no { color: rgba(255, 255, 255, .55); }
.section--dark .compare__list--no svg { color: rgba(255, 255, 255, .35); }
.section--dark .compare__list--yes { color: var(--n-100); }
.section--dark .compare__list--yes svg { color: #FF5A61; }

/* Aviso que fecha uma seção, centralizado e discreto */
.section-note {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  font-size: var(--t-small);
  color: var(--text-soft);
}
.section--dark .section-note {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .72);
}
.section-note strong { color: var(--red); font-weight: 650; }
.section--dark .section-note strong { color: #FF5A61; }

/* Lista de públicos: cartões pequenos, só ícone e rótulo */
.audience {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}
.audience__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  font-weight: 550;
}
.audience__item svg { flex-shrink: 0; color: var(--red); }

/* Etapas em 2x2 (a variante padrão do .process é 3x2, para seis itens) */
.process--quad { grid-template-rows: repeat(2, auto); }
.process--quad .process__item:nth-child(3) { border-bottom: 0; }
.process--quad .process__item:nth-child(2),
.process--quad .process__item:last-child {
  border-bottom: 1px solid var(--border);
}
.section--dark .process--quad .process__item:nth-child(2),
.section--dark .process--quad .process__item:last-child {
  border-bottom-color: rgba(255, 255, 255, .1);
}

@media (max-width: 860px) {
  .compare { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. PORTFÓLIO
   ========================================================================== */

.filters {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--t-small);
  font-weight: 550;
  color: var(--text-soft);
  background: var(--n-0);
  transition: all var(--d) var(--e-out);
}
.filter:hover {
  border-color: var(--text);
  color: var(--text);
  transform: translateY(-1px);
}
.filter[aria-current] {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.filter__count {
  font-size: var(--t-micro);
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

/*
  Card de projeto - visual de mockup de navegador (barra de endereço falsa +
  captura de tela), no formato de temp/sitespb/components/portfolio.php. O
  badge "No ar" é a única peça que não veio de lá: continua no verde já usado
  no resto do site, a pedido do cliente.
*/
.project {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--n-0);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--d) var(--e-out), border-color var(--d);
}
.project:hover {
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
}

/* Moldura clara ao redor do "navegador", como na referência */
.project__frame { padding: var(--s-3) var(--s-3) 0; background: var(--n-25); }
.project__browser {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.6rem var(--s-4);
  background: var(--n-0);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.project__browser-dots { display: flex; gap: 5px; flex-shrink: 0; }
.project__browser-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--n-200);
}
.project__browser-dots i:nth-child(1) { background: #F87171; }
.project__browser-dots i:nth-child(2) { background: #FBBF24; }
.project__browser-dots i:nth-child(3) { background: #34D399; }
.project__browser-url {
  flex: 1;
  padding: 0.3rem var(--s-3);
  background: var(--n-50);
  border-radius: var(--r-sm);
  font-size: var(--t-micro);
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--n-100);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 500ms var(--e-out);
}
.project:hover .project__media img { transform: scale(1.05); }

.project__body {
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-5) var(--s-4);
  flex-grow: 1;
}
.project__kicker {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--red);
  margin-bottom: var(--s-2);
}
.project__title {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  transition: color var(--d-fast);
}
.project:hover .project__title { color: var(--red); }
.project__desc {
  font-size: var(--t-caption);
  color: var(--text-soft);
  line-height: 1.55;
  margin-top: var(--s-2);
}

.project__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.project__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  font-size: var(--t-caption);
  font-weight: 700;
  color: var(--red);
  transition: gap var(--d) var(--e-out), color var(--d-fast);
}
.project__link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--d) var(--e-out);
}
/*
  Mesma animação do `.link-arrow` dos cards de serviço: o espaço cresce e a
  seta desliza. Disparada pelo card inteiro (e não só pelo link) para
  acompanhar os outros efeitos de hover do card - o zoom da captura e o
  título ficando vermelho.
*/
.project:hover .project__link { gap: var(--s-3); color: var(--red-700); }
.project:hover .project__link svg { transform: translateX(3px); }

/* Cobre o card inteiro sem aninhar links: clicar em qualquer ponto navega */
.project__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Página do projeto */
.project-detail__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  background: var(--n-100);
}
.project-detail__specs {
  display: grid;
  gap: var(--s-5);
}
.spec { padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
.spec:last-child { border-bottom: 0; padding-bottom: 0; }
.spec__label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.spec__value { font-size: var(--t-small); color: var(--text); line-height: var(--lh-normal); }

.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  padding: 0.35rem 0.75rem;
  background: var(--n-100);
  border-radius: var(--r-sm);
  font-size: var(--t-caption);
  font-weight: 550;
  color: var(--n-700);
}

/* Navegação anterior/próximo */
.project-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-16);
  padding-top: var(--s-10);
  border-top: 1px solid var(--border);
}
.project-nav__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--d) var(--e-out);
}
.project-nav__item:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--sh);
}
.project-nav__item--next { flex-direction: row-reverse; text-align: right; }
.project-nav__thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--n-100);
}
.project-nav__label {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.project-nav__title { font-size: var(--t-small); font-weight: 650; }

/* ==========================================================================
   12. SERVIÇOS E PREÇOS
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 2rem + 4vw, 5rem);
  align-items: center;
}
.split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 2rem); }

.benefit {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
}
.benefit:last-child { border-bottom: 0; }
.benefit__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red-50);
  color: var(--red);
}
.benefit__icon svg { width: 15px; height: 15px; }
.benefit__title { font-weight: 650; margin-bottom: var(--s-1); }
.benefit__text { font-size: var(--t-small); color: var(--text-soft); line-height: var(--lh-relaxed); }

/* Card de preço */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-8) var(--s-6);
  background: var(--n-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--d) var(--e-out), box-shadow var(--d), border-color var(--d);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.price-card--featured {
  border-color: var(--red);
  box-shadow: var(--sh-md);
}
.price-card--featured::before {
  content: attr(data-badge);
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 1rem;
  background: var(--red);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.price-card__name { font-size: var(--t-h4); }
.price-card__note { font-size: var(--t-caption); color: var(--text-muted); }
.price-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.price-card__currency { font-size: var(--t-body); font-weight: 600; color: var(--text-soft); }
.price-card__value {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-tight);
}
.price-card__period { font-size: var(--t-small); color: var(--text-muted); }
.price-card__original {
  font-size: var(--t-small);
  color: var(--text-muted);
  text-decoration: line-through;
}
.price-card__features { display: grid; gap: var(--s-3); flex-grow: 1; }
.price-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-small);
  color: var(--n-700);
}
.price-card__feature svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--success);
}

/* ==========================================================================
   13. BLOG
   ========================================================================== */

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  transition: transform var(--d) var(--e-out), box-shadow var(--d), border-color var(--d);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
}
.post-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--n-100);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--e-out);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  flex-grow: 1;
}
.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-caption);
  color: var(--text-muted);
}
.post-card__title {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  transition: color var(--d-fast);
}
.post-card:hover .post-card__title { color: var(--red); }
.post-card__excerpt {
  font-size: var(--t-small);
  color: var(--text-soft);
  line-height: var(--lh-relaxed);
  flex-grow: 1;
}
.post-card__link::after { content: ''; position: absolute; inset: 0; }

.article-header { max-width: var(--container-narrow); margin-inline: auto; }
.article-body { max-width: var(--container-narrow); margin-inline: auto; }
.article-cover {
  max-width: var(--container-narrow);
  margin: clamp(2rem, 4vw, 3.5rem) auto;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ==========================================================================
   14. FORMULÁRIOS
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }

.field { display: grid; gap: var(--s-2); }

.field__label {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text);
}
.field__label .req { color: var(--red); }
.field__hint { font-size: var(--t-caption); color: var(--text-muted); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 50px;
  background: var(--n-0);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r);
  font-size: var(--t-body);
  color: var(--text);
  transition: border-color var(--d-fast), box-shadow var(--d-fast), background-color var(--d-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--n-400); }

.input:hover, .textarea:hover, .select:hover { border-color: var(--n-300); }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-100);
}

.textarea { min-height: 130px; resize: vertical; line-height: var(--lh-normal); }

.select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--red); background: var(--red-50); }

.field__error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-caption);
  color: var(--red-700);
  font-weight: 550;
}
.field__error svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Checkbox e radio */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--text-soft);
}
.check input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--red);
  cursor: pointer;
}
.check a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* Grade de opções em cartão (tipo de projeto no orçamento) */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-3);
}
.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r);
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 550;
  transition: all var(--d) var(--e-out);
}
.option:hover { border-color: var(--n-300); background: var(--n-50); }
.option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.option__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all var(--d) var(--e-out);
}
.option__check::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white);
  transform: scale(0);
  transition: transform var(--d) var(--e-spring);
}
.option input:checked ~ .option__check {
  background: var(--red);
  border-color: var(--red);
}
.option input:checked ~ .option__check::after { transform: scale(1); }
.option:has(input:checked) {
  border-color: var(--red);
  background: var(--red-50);
  color: var(--red-700);
}
.option input:focus-visible ~ .option__check {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
/* Variante quadrada, para múltipla escolha */
.option--check .option__check { border-radius: var(--r-sm); }
.option--check .option__check::after { border-radius: 1px; }

/* Etapas do formulário de orçamento */
.steps {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}
.step-dot {
  flex: 1;
  height: 4px;
  background: var(--n-200);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.step-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.step-dot.is-done::after, .step-dot.is-active::after { transform: scaleX(1); }

.form-step { display: none; animation: fadeUp var(--d) var(--e-out); }
.form-step.is-active { display: grid; gap: var(--s-5); }

/* Honeypot - invisível para humanos, visível para bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.footer {
  background: var(--black);
  color: var(--n-400);
  padding-top: var(--section-y);
  font-size: var(--t-small);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--s-16);
}
.footer__brand svg, .footer__brand img { height: 50px; width: auto; margin-bottom: var(--s-5); }
.footer__about { line-height: var(--lh-relaxed); max-width: 34ch; }
.footer__title {
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--s-5);
}
.footer__list { display: grid; gap: var(--s-3); }
.footer__list a {
  color: var(--n-400);
  transition: color var(--d-fast), transform var(--d-fast);
  display: inline-block;
}
.footer__list a:hover { color: var(--white); transform: translateX(3px); }

.footer__contact { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
/*
  `flex-start`, não `center`: o horário de atendimento é longo e quebra em
  duas ou três linhas na coluna do rodapé. Centralizado, o ícone flutuava no
  meio do bloco de texto, longe da linha a que se refere - era o que parecia
  desalinhado. Alinhado ao topo, ele acompanha sempre a primeira linha.
*/
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  line-height: 1.5;
  color: var(--n-300);
  transition: color var(--d-fast);
}
.footer__contact-item:hover { color: var(--white); }
.footer__contact-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--red);
  /* Centra o ícone na primeira linha: (15px x 1.5 - 18px) / 2 = 2,25px. */
  margin-top: 2px;
}

/* Só o ícone, sem círculo nem borda ao redor - o espaçamento maior entre eles
   (antes 12px) é o que agora separa um do outro, no lugar do contorno. */
.footer__social { display: flex; gap: var(--s-6); margin-top: var(--s-6); }
.footer__social a {
  display: grid;
  place-items: center;
  padding: var(--s-1);
  color: var(--red);
  transition: color var(--d) var(--e-out), transform var(--d) var(--e-out);
}
.footer__social a:hover {
  color: var(--white);
  transform: translateY(-3px);
}
.footer__social svg { width: 20px; height: 20px; }
/*
  Marcas largas (YouTube) precisam de mais largura para ter o mesmo peso
  visual de uma marca quadrada (Instagram) dentro do mesmo círculo. Com o
  mesmo tamanho de caixa para as duas, a do YouTube - que é 1,42x mais larga
  que alta - encolhia para caber na largura e ficava baixinha, sobrando muito
  espaço acima e abaixo dela. Renderizei as duas para calibrar: a 24px a
  marca do YouTube fica com 24x16px, peso equivalente ao Instagram a 20px.
*/
.footer__social .icon--wide { width: 24px; height: 24px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding: var(--s-6) 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--t-caption);
  color: var(--n-500);
}
.footer__legal { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.footer__legal a:hover { color: var(--n-200); }

/* ==========================================================================
   16. UTILITÁRIOS
   ========================================================================== */

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

.text-center { text-align: center; }
.text-red { color: var(--red); }
.text-soft { color: var(--text-soft); }
.text-muted { color: var(--text-muted); }
.text-white { color: var(--white); }

.mt-auto { margin-top: auto; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.mt-12 { margin-top: var(--s-12); }
.mt-16 { margin-top: var(--s-16); }
/* `.mb-2` já era usada nos cards (título coladinho no texto sem ela), mas não
   existia no CSS - o utilitário faltava na escala. */
.mb-2 { margin-bottom: var(--s-2); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }
.mb-10 { margin-bottom: var(--s-10); }

.w-full { width: 100%; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.justify-between { justify-content: space-between; }
.items-start { align-items: flex-start; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }

.hide { display: none !important; }

/* ==========================================================================
   17. RESPONSIVO
   ========================================================================== */

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  :root { --header-h: 58px; }

  .header__nav, .header__actions .btn--ghost { display: none; }
  .header__toggle { display: flex; flex-shrink: 0; }

  /*
    Com o nome do serviço/WhatsApp por extenso, logo + botão + hambúrguer não
    cabiam num celular estreito - o hambúrguer era empurrado para fora da
    tela (cortado do lado direito). Vira um botão redondo só com o ícone: o
    número continua acessível pelo aria-label do próprio link, e sobra
    espaço de verdade para a logo maior e para o hambúrguer respirar.
  */
  .header__actions .btn--whatsapp {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }
  .header__actions .btn--whatsapp span { display: none; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; }
  .split--sticky > :first-child { position: static; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-4); }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 4rem); padding-bottom: 4rem; }
  .hero__scroll { display: none; }
}

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--auto, .grid--auto-lg { grid-template-columns: 1fr; }

  .section-head-row { flex-direction: column; align-items: flex-start; gap: var(--s-5); }

  .project-nav { grid-template-columns: 1fr; }
  .project-nav__item--next { flex-direction: row; text-align: left; }

  .cta { border-radius: var(--r-lg); }

  .hero__actions .btn { width: 100%; }
  /*
    "Segmentos atendidos" some no mobile por pedido do cliente - as outras
    três estatísticas cabem numa linha só; com quatro, a última sobrava
    sozinha numa segunda linha, desalinhada com o resto do hero.
    justify-content: center centraliza o que sobra na tela estreita, em vez
    de ficar alinhado à esquerda como o resto do texto do hero.
  */
  .hero__stats { gap: var(--s-6) var(--s-8); justify-content: center; }
  /*
    Precisa ser ".hero__stats .hero__stat--segments", não só
    ".hero__stat--segments": a regra ".hero__stats > div" (fora de media
    query, lá em cima) tem mais especificidade que uma classe sozinha -
    "display: flex" dela vencia o "display: none" daqui, mesmo esta regra
    vindo depois no arquivo. Especificidade decide, não ordem no CSS.
  */
  .hero__stats .hero__stat--segments { display: none; }

  .footer__grid { grid-template-columns: 1fr; }

  .accordion__content { padding-right: 0; }

  /* Duas colunas de 3 (§28) não cabem lado a lado numa tela estreita - volta
     a ser uma lista só, na ordem 01 a 06 de cima a baixo. */
  .process {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .process__item:nth-child(3) { border-bottom: 0; }

  /* Empilhado, só o último item fecha a lista: a linha que separava as duas
     colunas no desktop viraria um risco solto no meio da leitura. */
  .process--quad .process__item:nth-child(2) { border-bottom: 0; }
  .process--quad .process__item:last-child { border-bottom: 1px solid var(--border); }
  .section--dark .process--quad .process__item:last-child {
    border-bottom-color: rgba(255, 255, 255, .1);
  }
}

@media (max-width: 480px) {
  :root { --gutter: 1.125rem; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: var(--s-2); }

  .btn { width: 100%; }
  .btn--sm, .filter { width: auto; }

  .cta__actions .btn { width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* ==========================================================================
   IMPRESSÃO
   ========================================================================== */

@media print {
  .header, .footer, .wa-float, .cookie-bar, .hero__media, .btn { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 1rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 10px; color: #555; }
}