/* ==========================================================================
   AURE INFORMÁTICA — Sistema de design
   ==========================================================================
   Paleta extraída do papel de parede da marca (amostragem pixel a pixel das
   letras "AURE" e do triângulo do logo).

   REGRA DE OURO DESTE ARQUIVO
   O problema do site antigo não eram as cores, e sim a falta de hierarquia:
   ciano, azul, violeta e magenta apareciam todos com o mesmo peso, então
   nada se destacava. Aqui a regra é:

     • Gradiente da marca  → SÓ em detalhes pequenos (rótulo de seção,
                             uma palavra destacada, fio divisório)
     • Azul de ação        → SÓ em botões, sempre sólido
     • Ciano               → ícones e links
     • Violeta / magenta   → apoio, com parcimônia ao longo da página

   Contraste: todas as combinações usadas aqui passam em WCAG AA
   (verificado por cálculo, não por estimativa).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Fundos — espaço profundo, como no papel de parede */
  --bg:            #05070F;
  --bg-2:          #0A0F1F;
  --surface:       #0E1428;
  --surface-2:     #141B33;
  --border:        rgba(255, 255, 255, 0.08);
  --border-forte:  rgba(255, 255, 255, 0.16);

  /* Texto */
  --texto:         #E8EDF7;   /* contraste 17.1:1 sobre --bg */
  --texto-suave:   #9BA8BF;   /* contraste  8.4:1 sobre --bg */
  --texto-fraco:   #6B7891;

  /* Cores da marca (amostradas do wallpaper) */
  --azul:          #133699;
  --ciano:         #57DAFD;
  --violeta:       #8B7AFC;
  --magenta:       #D55CFA;

  /* Cor de ação — sólida, usada em TODOS os botões principais.
     Branco sobre ela: 5.01:1 (AA). Não clareie. */
  --acao:          #1E6AE0;
  --acao-hover:    #1758C4;
  --acao-clara:    #5B9BFF;

  /* WhatsApp — cor própria, reconhecível. Usada só no botão flutuante
     e nos CTAs de WhatsApp, onde a familiaridade aumenta o clique. */
  --zap:           #25D366;   /* verde oficial do WhatsApp — guardado só como referência */
  --zap-hover:     #1FB855;

  /* Gradiente dos botões de WhatsApp. Amostrado do que o dono escolheu:
     sai do azul-violeta, passa pelo violeta da marca e fecha no magenta.
     Com texto quase preto passa AA em TODOS os pontos (5,2:1 a 6,2:1).
     Com texto branco falharia feio (1,6:1 no ciano) — por isso o texto é escuro. */
  --gradiente-zap: linear-gradient(100deg, #6E7BE8 0%, var(--violeta) 45%, var(--magenta) 100%);
  --zap-texto:     #0B0616;

  /* Gradiente da marca — usar com moderação */
  --gradiente: linear-gradient(100deg, var(--azul) 0%, var(--ciano) 38%, var(--violeta) 68%, var(--magenta) 100%);
  --gradiente-texto: linear-gradient(100deg, var(--ciano) 0%, var(--violeta) 55%, var(--magenta) 100%);

  /* Tipografia */
  --fonte-titulo: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --fonte-texto:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espaçamento */
  --container:    1180px;
  --secao:        clamp(56px, 8vw, 104px);
  --raio:         16px;
  --raio-sm:      10px;

  /* Sombra e foco */
  --sombra:       0 12px 40px rgba(0, 0, 0, .45);
  --foco:         0 0 0 3px rgba(87, 218, 253, .55);

  /* Detalhes nativos do navegador que faltavam para o tema escuro:
     barra de rolagem, controles de formulário (checkbox/rádio) e widgets
     nativos deixavam de combinar com a página escura. */
  color-scheme: dark;
  accent-color: var(--ciano);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;

  /* ATENÇÃO: aqui é "clip", não "hidden".
     overflow-x: hidden faria o <body> virar um container de rolagem, e aí o
     position: sticky do cabeçalho passa a se ancorar no body em vez de na
     janela — na prática, o menu sobe junto com a página e some.
     "clip" corta o excesso sem criar esse container, então o menu fica fixo. */
  overflow-x: clip;
}

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

a { color: var(--ciano); text-decoration: none; transition: color .16s ease; }
a:hover { color: var(--acao-clara); }

/* Foco visível — acessibilidade por teclado */
:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: 6px;
}

/* Alvos de âncora não ficam escondidos atrás do cabeçalho fixo */
:target, [id] { scroll-margin-top: 92px; }

/* --------------------------------------------------------------------------
   2b. DETALHES NATIVOS (lapidação — não muda a identidade)
   -------------------------------------------------------------------------- */
/* Barra de rolagem do sistema no tom da superfície, em vez do branco padrão */
html { scrollbar-color: var(--surface-2) var(--bg); }

/* No toque, o navegador não pinta o retângulo cinza por cima do link */
html, body { -webkit-tap-highlight-color: transparent; }

/* Seleção de texto com o ciano da marca (antes era o azul do sistema) */
::selection { background: rgba(87, 218, 253, .30); color: #fff; }

/* Cursor de texto na cor da marca nos campos */
input, textarea, select { caret-color: var(--ciano); }

/* Autofill do Chrome pintava o campo de branco e quebrava o tema escuro.
   O box-shadow inset cobre o amarelo/branco do navegador sem alterar o layout. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  box-shadow: 0 0 0 1000px var(--bg-2) inset;
  caret-color: var(--ciano);
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.14;
  margin: 0 0 .5em;
  color: #fff;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { color: #fff; font-weight: 600; }

/* Palavra destacada com o gradiente da marca */
.grad {
  background: var(--gradiente-texto);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violeta); /* fallback se background-clip não for suportado */
}

/* Rótulo pequeno acima do título de cada seção */
.eyebrow {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--gradiente-texto);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ciano);
  margin-bottom: 12px;
}

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  color: var(--texto-suave);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   3b. LAPIDAÇÃO DE TIPOGRAFIA (detalhes — sem trocar fontes nem tamanhos)
   -------------------------------------------------------------------------- */
/* Evita a última palavra "sozinha" numa linha (viúvas) nos textos corridos */
li, blockquote { text-wrap: pretty; }

/* Palavras longas (URLs, e-mails) não estouram o container */
body { overflow-wrap: break-word; }

/* Números que se comparam ficam alinhados por dígito (horários, tabelas) */
.tabela-horario, .tabela-wrap table, .selo-aberto { font-variant-numeric: tabular-nums; }

/* Sublinhado de link com respiro e espessura consistentes */
a { text-underline-offset: .22em; text-decoration-thickness: 1px; }

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

.section { padding-block: var(--secao); }
.section--alt { background: var(--bg-2); }

/* Fio divisório com o gradiente da marca — um dos poucos usos do gradiente */
.section--alt { position: relative; }
.section--alt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--gradiente);
  opacity: .38;
}

.section__head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 52px); }
.section__head--center { margin-inline: auto; text-align: center; }

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

/* --------------------------------------------------------------------------
   5. CABEÇALHO
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--acao); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.header {
  /* O cabeçalho agora é uma PÍLULA FLUTUANTE, e não mais uma faixa colada
     no topo de ponta a ponta. Fica fixo enquanto o cliente rola.
     Depende de o <body> NÃO ter overflow-x: hidden — ver comentário lá em cima. */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Este padding é o "ar" em volta da pílula. O ponteiro ATRAVESSA essa área
     (pointer-events: none) para o vão não engolir cliques em quem passa por
     baixo — o conteúdo rola por trás do cabeçalho. O pointer-events volta a
     valer dentro da pílula, logo abaixo. */
  padding: 12px 22px 0;
  background: none;
  border-bottom: 0;
  pointer-events: none;
  /* Sem backdrop-filter DE PROPÓSITO — decisão mantida do original.
     O desfoque do fundo obriga o navegador a recompor o cabeçalho a cada quadro
     de rolagem — e como o submenu de serviços abre dentro dele, a rolagem da
     lista travava. Sobre um site escuro, um fundo quase opaco dá o mesmo
     resultado visual sem custo de renderização. */
}

.header__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 62px;
  /* A pílula em si. O padding sobrescreve o do .container (22px nas laterais),
     que aqui não é necessário: a pílula já é a caixa. */
  padding: 0 12px 0 24px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(10, 15, 31, .94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
}

.header__logo { flex-shrink: 0; }
.header__logo img { height: 38px; width: auto; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: 9px 14px;
  border-radius: var(--raio-sm);
  color: var(--texto);
  font-size: .95rem;
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease;
}
.nav__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav__link[aria-current="page"] { color: var(--ciano); }

/* Submenu de serviços (abre no hover e no teclado) */
.nav__item--sub { position: relative; }
.nav__sub {
  position: absolute;
  /* 14px abaixo do item: o suficiente para o painel não encostar na base da
     pílula do cabeçalho (que termina 9px abaixo do item de menu). */
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border-forte);
  border-radius: 14px;
  padding: 10px;
  list-style: none;
  margin: 0;
  /* Sombra enxuta de propósito: uma sombra de 40px de desfoque num elemento
     que rola obriga o navegador a redesenhar muito mais área por quadro. */
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  /* Quando a lista chega no fim, a rolagem para — não emenda na página */
  overscroll-behavior: contain;
  /* Isola o submenu: a rolagem dele não obriga o navegador a recalcular o resto */
  contain: layout paint style;
}
/* Ponte invisível sobre o vão entre o item e o painel.
   Sem ela, ao mover o mouse do link para o submenu a pessoa passa por 14px que
   não pertencem a nenhum dos dois — o :hover do item cai no meio do caminho e
   o painel fecha antes de ela chegar. A ponte é um retângulo transparente que
   cobre o vão e mantém o item sob o cursor. */
.nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav__item--sub:hover .nav__sub,
.nav__item--sub:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__sub a {
  display: block;
  padding: 9px 13px;
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  font-size: .92rem;
}
.nav__sub a:hover { background: rgba(87, 218, 253, .1); color: var(--ciano); }

/* Item que leva ao índice de serviços (o título "Serviços" só abre a lista) */
.nav__sub-todos a { color: var(--ciano); font-weight: 600; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Precisa do "auto" AQUI, não no .nav.
     No computador é o .nav (com margin-left:auto) que empurra tudo para a
     direita. No celular o .nav vira position:fixed e SAI do fluxo — sem isso,
     os botões ficariam colados na logo, com um vazio à direita. */
  margin-left: auto;
}

/* Botão hambúrguer (mobile) */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-forte);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block; width: 20px; height: 2px; background: var(--texto);
  position: relative; transition: background .2s;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--texto);
  transition: transform .24s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top:  6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  min-height: 48px;
  border: 1.5px solid transparent;
  /* Pílula: o raio passa da metade da altura, então a curva fecha nos cantos
     em vez de virar um retângulo de cantos macios. */
  border-radius: 100px;
  font-family: var(--fonte-titulo);
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: center;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }

/* Principal — sólido, cor de ação */
.btn--primary {
  background: var(--acao);
  color: #fff;
  box-shadow: 0 6px 22px rgba(30, 106, 224, .32);
}
.btn--primary:hover { background: var(--acao-hover); color: #fff; box-shadow: 0 9px 30px rgba(30, 106, 224, .46); }

/* WhatsApp */
.btn--zap {
  /* Cada propriedade declarada na mão, de propósito:
     O .btn tem uma borda transparente de 1,5px. Com o atalho `background`, a
     imagem é POSICIONADA pela caixa de preenchimento (dentro da borda) mas
     PINTADA até a caixa da borda. Sobrava uma faixa de 1,5px à esquerda sem
     imagem — e como o padrão é repetir, ali aparecia o FIM do ladrilho
     anterior: uma pontinha magenta em todos os botões.
     Com origin e clip na caixa da borda, a imagem começa na borda real e a
     faixa some. O no-repeat é a segunda trava, caso o tamanho mude um dia. */
  background-image: var(--gradiente-zap);
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  /* O gradiente é mais largo que o botão e desliza no hover: é o que dá o
     movimento sem precisar de duas imagens diferentes. */
  background-size: 150% 100%;
  background-position: 0% 50%;
  color: var(--zap-texto);
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(139, 122, 252, .34);
  transition: transform .16s ease, background-position .38s ease, box-shadow .25s ease;
}
.btn--zap:hover {
  background-position: 100% 50%;
  color: var(--zap-texto);
  box-shadow: 0 9px 30px rgba(213, 92, 250, .42);
}

/* Secundário — contorno */
.btn--ghost {
  background: transparent;
  border-color: var(--border-forte);
  color: var(--texto);
}
.btn--ghost:hover { border-color: var(--ciano); color: var(--ciano); background: rgba(87, 218, 253, .07); }

.btn--sm { padding: 10px 17px; min-height: 44px; font-size: .9rem; }
.btn--lg { padding: 16px 30px; min-height: 54px; font-size: 1.03rem; }
.btn--block { width: 100%; }

/* Botão só de ícone (ex.: acesso remoto no cabeçalho).
   Precisa de rótulo acessível — por isso leva .sr-only dentro. */
.btn-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-forte);
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.btn-icone:hover {
  color: var(--ciano);
  border-color: var(--ciano);
  background: rgba(87, 218, 253, .08);
}

/* Grupo de botões */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(64px, 10vw, 132px);
  background-color: var(--bg);
  overflow: hidden;
  isolation: isolate;
  /* Isola a repintura da placa animada: quando ela se redesenha, o navegador
     não precisa recalcular nada fora daqui. */
  contain: paint;
}

/* A placa virou SVG EMBUTIDO no HTML (não é mais imagem de fundo).
   Motivo: o CSS da página não consegue pausar uma animação que vive dentro de
   um arquivo .svg carregado como background-image. Embutida, o main.js pausa
   a animação quando o submenu de serviços abre — que era o momento em que a
   rolagem da lista travava. Gerada por _build/gerar_pcb.py. */
/* O VÍDEO DO TOPO — substituiu a placa de trilhas em SVG.
   MOTIVO: a placa animava com stroke-dashoffset, que roda na CPU (66 animações
   repintando traços por quadro). Vídeo é decodificado pela placa de vídeo:
   fica mais leve, mais fluido e ainda ocupa menos banda.
   O arquivo já vem com o enquadramento pronto (cortado em 88% da altura, para
   o chip ficar embaixo e a marca aparecer) e em laço ida-e-volta, que não tem
   emenda. Ver _build/gerar_video_topo.py. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A cena tem o fundo escuro do próprio site, então se funde com a página
     sem moldura. */
  z-index: 0;
  pointer-events: none;
}

/* Quando o main.js marca como pausado, o vídeo para de decodificar */
.hero__video.is-pausado { visibility: hidden; }

/* A CAPA que tampa o vídeo parado — e, com ele, o botão de play que o Safari
   desenha em cima quando recusa o autoplay. Quem esconde é o main.js, e só
   depois que o vídeo de fato começa a rodar (evento "playing"). */
.hero__midia { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__capa {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transition: opacity .5s ease;
}
.hero__capa--retrato { display: none; }
@media (max-width: 700px) {
  .hero__capa--paisagem { display: none; }
  .hero__capa--retrato { display: block; }
}

/* Uma versão do vídeo por formato de tela. Os dois elementos existem no HTML,
   mas só um é exibido — assim o navegador não baixa o que não vai usar. */
.hero__video--retrato { display: none; }
@media (max-width: 700px) {
  .hero__video--paisagem { display: none; }
  .hero__video--retrato { display: block; }
  /* No celular o topo é estreito e comprido: o corte retrato preenche a
     largura e sobra altura, então "cover" recorta em cima e embaixo — muito
     melhor que descartar as laterais, onde estava a marca. */
  .hero__video { object-position: center 32%; }
}
.hero__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/cena-poster.jpg") center / cover no-repeat;
  pointer-events: none;
}

/* O texto fica acima do vídeo */
.hero > .container { position: relative; z-index: 2; }

/* No celular, o parágrafo de abertura sai.
   MOTIVO: ele ocupa altura preciosa numa tela estreita, e as ideias dele já
   estão em outros lugares — título, descrição que aparece no Google, e mais
   15 repetições no corpo da página. Não é perda de conteúdo.
   ESCONDIDO COM CSS, e não apagado do HTML: o computador continua com o texto.
   Cuidado que vale registrar: o Google indexa pela versão de CELULAR, então
   esconder aqui É remover da visão principal dele. Só faço isso porque a
   informação é redundante — num texto que existisse só ali, seria perda. */
@media (max-width: 700px) {
  .hero__inner .lead { display: none; }

  /* Sobe o título reduzindo o respiro do topo.
     Só aumentar o vão de baixo não bastava: no celular o bloco já é mais alto
     que a altura mínima do topo, então NÃO sobra espaço para a centralização
     agir. Sem sobra, o bloco cresce para baixo e o título fica parado.
     Tirando daqui de cima, o título sobe de verdade. */
  .hero { padding-top: 18px; }

  /* Abre espaço ENTRE o título e os botões.
     O bloco do topo é centralizado na vertical, então aumentar este vão
     empurra o título para cima E os botões para baixo ao mesmo tempo — que é
     exatamente o pedido. Não dá para fazer isso mexendo no alinhamento do
     bloco: isso moveria os dois para o mesmo lado.
     O ganho é que a faixa do meio fica livre, e é ali que a marca aparece. */
  /* 92px: os botões E os selos descem juntos (os selos vêm logo depois dos
     botões, então o mesmo vão arrasta os dois). Isso libera mais altura da
     faixa do meio — que é onde a marca aparece. */
  .hero__inner .btn-row {
    /* O vão empurra os botões E os selos de uma vez, como se fossem um bloco
       só — os selos vêm logo depois, então a mesma margem arrasta os dois.
       Isso libera a faixa do meio, que é onde a marca aparece.

       VALOR PROPORCIONAL À ALTURA DA TELA, e não um número fixo.
       Com 170px fixos o topo ficava bonito num aparelho de 844px de altura,
       mas em tela mais baixa (667px, comum em iPhone menor) os selos eram
       empurrados para fora da primeira tela.
       A CONTA É "ALTURA DA TELA MENOS A ALTURA DO CONTEÚDO", e não uma
       porcentagem da tela. O conteúdo do topo ocupa cerca de 674px (título,
       botões, selos e respiros). O que sobra disso é o espaço livre — e é esse
       espaço que vira vão, até o teto de 170px.
         tela de 844px -> 844 - 674 = 170  (o valor que você aprovou)
         tela de 667px -> 667 - 674 = -7   (encosta no mínimo de 48px)
       Com porcentagem pura (20vh) a tela pequena ainda estourava 74px. */
    margin-top: clamp(48px, calc(100vh - 674px), 170px);
    /* GRADE de duas colunas iguais, e não flex: assim os dois botões ficam
       lado a lado com a MESMA largura, em vez de cada um do seu tamanho. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Botões menores para caberem lado a lado numa tela de 390px.
     A conta: 390 menos 44 de margem = 346 de espaço. Dois botões com 10 de
     vão dão 168 para cada. O rótulo mais longo ("Falar com a Lina", com ícone)
     pede uns 150 nesse corpo — então cabe com folga. */
  .hero .btn-row .btn {
    width: 100%;
    padding: 12px 10px;
    min-height: 46px;
    font-size: .86rem;
    gap: 7px;
  }
  .hero .btn-row .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

  /* Aproxima os selos dos botões — antes havia 30px de margem mais 24px de
     respiro, o que abria um vão grande demais entre eles. */
  .hero__selos { margin-top: 14px; padding-top: 0; }

  /* O botão do WhatsApp fica transparente no celular, igual ao "Ver serviços".
     MOTIVO: no celular já existe o botão flutuante do WhatsApp no canto, então
     dois botões verdes/destacados competindo é ruído. Sem o gradiente, os dois
     botões do topo ficam com o mesmo peso e a escolha fica clara.
     O gradiente e a sombra precisam ser desfeitos um por um — o btn--zap usa
     os dois. */
  .hero .btn--zap {
    background: transparent;
    border-color: var(--border-forte);
    color: var(--texto);
    box-shadow: none;
  }
  .hero .btn--zap:hover,
  .hero .btn--zap:active {
    background: rgba(87, 218, 253, .07);
    border-color: var(--ciano);
    color: var(--ciano);
    box-shadow: none;
  }
}
/* Recorta o vídeo no limite do topo — sem isso a borda dele pode aparecer */
.hero { overflow: hidden; }
@media (max-width: 700px) {
  .hero__pcb { display: none; }
  .hero__pcb--retrato { display: block; }
}

/* Sombra lateral: garante leitura do texto sobre a nebulosa, sem apagar a arte */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;   /* acima da placa (0), abaixo do texto (2) */
  background:
    linear-gradient(100deg, rgba(5,7,15,.965) 0%, rgba(5,7,15,.90) 32%, rgba(5,7,15,.46) 62%, rgba(5,7,15,.16) 100%),
    linear-gradient(to bottom, rgba(5,7,15,.5) 0%, rgba(5,7,15,0) 26%, rgba(5,7,15,.62) 100%);
}

.hero__inner { max-width: 660px; }
.hero h1 { margin-bottom: 18px; }
.hero .lead { margin-bottom: 30px; }

/* Selos de confiança abaixo do hero */
.hero__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  list-style: none;
}
.hero__selos li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  color: var(--texto-suave);
}
.hero__selos svg { flex-shrink: 0; color: var(--ciano); }

/* --------------------------------------------------------------------------
   8. CARTÕES
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 26px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .26s cubic-bezier(.22,1,.36,1), border-color .26s ease, box-shadow .26s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(87, 218, 253, .4);
  box-shadow: var(--sombra);
}
.card__icone {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(87, 218, 253, .1);
  color: var(--ciano);
  margin-bottom: 16px;
  transition: transform .28s cubic-bezier(.22,1,.36,1), background-color .28s ease;
}
.card h3 { margin-bottom: 8px; font-size: 1.12rem; }
.card p { color: var(--texto-suave); font-size: .95rem; margin-bottom: 0; }

/* Cartão que é um link inteiro */
a.card { color: inherit; }
a.card:hover { color: inherit; }
.card__link {
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ciano);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.card:hover .card__link { gap: 10px; }

/* Micro-interações: só o cartão que É link reage — reforça que dá para clicar.
   O ícone cresce de leve e a seta desliza para a direita. */
a.card:hover .card__icone { transform: scale(1.08); background: rgba(87, 218, 253, .16); }
a.card:active { transform: translateY(-1px) scale(.997); }
.card__link .seta { display: inline-block; transition: transform .24s cubic-bezier(.22,1,.36,1); }
a.card:hover .card__link .seta { transform: translateX(3px); }

/* Nota de serviço extra, abaixo da grade de serviços */
.servicos__extra {
  margin: 34px 0 0;
  text-align: center;
  font-size: .95rem;
  color: var(--texto-suave);
}
.servicos__extra strong { color: var(--texto); }

/* --------------------------------------------------------------------------
   9. FLUXO DO ATENDIMENTO (diagrama)
   Cada etapa carrega DOIS ganhos: o funcional (o que o cliente resolve) e o
   emocional (como ele fica). O ganho funcional usa check em ciano; o emocional
   usa um losango em violeta. Sem rótulos — a cor e o ícone já separam.
   -------------------------------------------------------------------------- */
.fluxo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 8px;
}

.fluxo__etapa { position: relative; padding: 0 14px; }

/* Nó numerado */
.fluxo__num {
  position: relative;
  z-index: 1;
  width: 46px; height: 46px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border-forte);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ciano);
}

/* Linha que liga um nó ao seguinte */
.fluxo__etapa:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 23px;
  left: calc(50% + 32px);
  right: calc(-50% + 32px);
  height: 1.5px;
  background: linear-gradient(90deg, var(--border-forte), rgba(87, 218, 253, .3));
}

.fluxo__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 7px;
  line-height: 1.28;
  text-align: center;
}
.fluxo__texto {
  font-size: .875rem;
  color: var(--texto-fraco);
  line-height: 1.55;
  margin: 0 0 16px;
  text-align: center;
}

/* Os dois ganhos */
/* Nota de prazo abaixo do fluxo */
.fluxo__nota {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: .92rem;
  color: var(--texto-fraco);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.fluxo__nota strong { color: var(--texto); }

.fluxo__ganhos {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.ganho {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .845rem;
  line-height: 1.45;
  color: var(--texto-suave);
}
.ganho svg { flex-shrink: 0; margin-top: 2px; }
.ganho--func svg { color: var(--ciano); }
.ganho--emo  svg { color: var(--violeta); }
.ganho--emo  { color: var(--texto); }

/* --------------------------------------------------------------------------
   9-B. DESTAQUES ESTRATÉGICOS
   Três afirmações curtas, sem parágrafo em volta. O peso visual vem do
   tamanho da letra, não da quantidade de texto.
   -------------------------------------------------------------------------- */
.destaques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
}
.destaques__item { background: var(--bg); padding: 34px 28px; }
.destaques__marca {
  width: 34px; height: 3px;
  border-radius: 2px;
  background: var(--gradiente);
  margin-bottom: 18px;
}
.destaques__item p {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0;
}
.destaques__item span {
  display: block;
  margin-top: 10px;
  font-size: .86rem;
  color: var(--texto-fraco);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9-C. DIAGRAMA DE DECISÃO ("vale a pena consertar?")
   Árvore simples: uma pergunta no topo, três caminhos abaixo.
   -------------------------------------------------------------------------- */
.decisao { max-width: 940px; margin-inline: auto; }
.decisao__topo { text-align: center; }
.decisao__topo span {
  display: inline-block;
  padding: 13px 26px;
  border: 1.5px solid var(--border-forte);
  border-radius: 100px;
  background: var(--surface);
  font-family: var(--fonte-titulo);
  font-size: .98rem;
  font-weight: 600;
  color: #fff;
}

/* A barra horizontal que distribui para os três ramos */
.decisao__ramos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-top: 40px;
  margin-top: 26px;
}
.decisao__ramos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16.66%;
  right: 16.66%;
  height: 1.5px;
  background: var(--border-forte);
}
.decisao__ramos::after {
  content: "";
  position: absolute;
  top: -26px;
  left: 50%;
  width: 1.5px;
  height: 26px;
  background: var(--border-forte);
}
.ramo {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 24px 22px;
}
/* Descida da barra até cada cartão */
.ramo::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  width: 1.5px;
  height: 40px;
  background: var(--border-forte);
}
.ramo__cond {
  font-family: var(--fonte-titulo);
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}
.ramo__acao {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--texto-suave);
  margin: 0;
}
.ramo__acao svg { flex-shrink: 0; margin-top: 2px; }
.ramo--bom    { border-top: 2px solid var(--ciano); }
.ramo--bom    .ramo__acao svg { color: var(--ciano); }
.ramo--avalia { border-top: 2px solid var(--violeta); }
.ramo--avalia .ramo__acao svg { color: var(--violeta); }
.ramo--nao    { border-top: 2px solid var(--texto-fraco); }
.ramo--nao    .ramo__acao svg { color: var(--texto-fraco); }

/* Explicação curta embaixo do veredito */
.ramo__nota {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .855rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

@media (max-width: 1024px) {
  .fluxo { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .fluxo__etapa:nth-child(3)::after { display: none; }
  .destaques { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Fluxo vira lista vertical: a linha passa para a esquerda */
  .fluxo { grid-template-columns: 1fr; row-gap: 0; }
  .fluxo__etapa { padding: 0 0 30px 58px; }
  .fluxo__etapa:not(:last-child)::after {
    top: 46px; bottom: 0;
    left: 22px; right: auto;
    width: 1.5px; height: auto;
    background: linear-gradient(180deg, var(--border-forte), rgba(87, 218, 253, .3));
  }
  .fluxo__num { position: absolute; left: 0; top: 0; margin: 0; }
  .fluxo__titulo, .fluxo__texto { text-align: left; }
  .fluxo__texto { margin-bottom: 12px; }

  .decisao__ramos { grid-template-columns: 1fr; padding-top: 0; gap: 16px; }
  .decisao__ramos::before, .decisao__ramos::after, .ramo::before { display: none; }
  .decisao__topo { margin-bottom: 22px; }
}

/* --------------------------------------------------------------------------
   10. DEPOIMENTOS
   -------------------------------------------------------------------------- */
.depoimento {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ciano);
  border-radius: var(--raio);
  padding: 24px;
  margin: 0;
}
.depoimento blockquote { margin: 0 0 14px; font-size: .97rem; color: var(--texto); }
.depoimento figcaption {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .87rem;
  color: var(--texto-suave);
}
.depoimento cite { font-style: normal; font-weight: 600; color: var(--texto); display: block; }
.depoimento__quem { display: grid; gap: 1px; }
.depoimento__data { font-size: .79rem; color: var(--texto-fraco); }
/* Avatar com as iniciais — evita depender das fotos hospedadas no Google */
.depoimento__avatar {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gradiente);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.depoimento__foto {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.estrelas { color: #FFC53D; letter-spacing: 2px; font-size: .92rem; margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   CARROSSEL DE AVALIAÇÕES

   Por que rolagem nativa e não transform/translateX:
   com scroll-snap o arrasto do dedo no celular, a rolagem do trackpad e as
   setas do teclado funcionam SEM JavaScript. O JS só acrescenta o avanço
   automático e os botões — se ele falhar, o carrossel continua utilizável.
   -------------------------------------------------------------------------- */
.carrossel__moldura {
  display: flex;
  align-items: center;
  gap: 10px;
}

.carrossel__trilha {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* Esconde a barra de rolagem: os botões e o arrasto já indicam que rola */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 4px de folga para o contorno de foco dos cartões não ser cortado */
  padding: 4px;
  margin: -4px;
}
.carrossel__trilha::-webkit-scrollbar { display: none; }
.carrossel__trilha:focus-visible { outline: 2px solid var(--ciano); outline-offset: 4px; border-radius: var(--raio); }

/* 3 avaliações por vez no computador */
.carrossel__trilha .depoimento {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  margin: 0;
}

.carrossel__btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-forte);
  color: var(--texto);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.carrossel__btn:hover { border-color: var(--ciano); color: var(--ciano); transform: scale(1.06); }
.carrossel__btn:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.carrossel__btn[disabled] { opacity: .3; cursor: default; transform: none; }
.carrossel__btn[disabled]:hover { border-color: var(--border-forte); color: var(--texto); }

@media (max-width: 1024px) {
  .carrossel__trilha .depoimento { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 620px) {
  /* No celular os botões descem para baixo do carrossel: em cima deles
     sobraria pouca largura para o cartão, e o dedo já rola por conta própria. */
  .carrossel__moldura { flex-wrap: wrap; justify-content: center; }
  .carrossel__trilha { order: -1; flex-basis: 100%; }
  .carrossel__trilha .depoimento { flex-basis: 100%; }
  .carrossel__btn { width: 46px; height: 46px; }
}

/* --------------------------------------------------------------------------
   11. FAIXA DE MARCAS
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   CARROSSEL DE MARCAS

   As logos desfilam sem parar. São DUAS listas iguais lado a lado: quando a
   primeira sai pela esquerda, a segunda já tomou o lugar e o olho não vê a
   emenda — por isso o deslocamento é de exatamente -50%.

   O espaço entre as logos é margin-right em cada uma, e NÃO gap no flex.
   Com gap, o vão entre a última da primeira lista e a primeira da segunda
   não entra na conta dos 50%, e o carrossel dá um pulinho a cada volta.
   -------------------------------------------------------------------------- */
.marcas-carrossel {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}

/* O esmaecimento nas bordas, feito com DUAS CAMADAS DE FUNDO — e não com
   mask-image.
   A máscara funcionava, mas custa caro: o container tem uma animação dentro, e
   a máscara precisa ser RECOMPOSTA a cada quadro do movimento. Com a faixa
   animando sem parar, isso é trabalho de pintura em cima de trabalho de
   pintura. As duas camadas de gradiente são pintadas uma vez e não mudam. */
.marcas-carrossel::before,
.marcas-carrossel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
  /* z-index 2, e não 1: o trilho ganhou camada de composição própria por
     causa do will-change, e uma camada promovida pinta acima do conteúdo
     normal. Sem subir as bordas, as logos apareciam por cima do esmaecimento
     e a faixa ficava cortada seca nas pontas. */
  z-index: 2;
}
.marcas-carrossel::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 20%, transparent);
}
.marcas-carrossel::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 20%, transparent);
}

.marcas-carrossel__trilha {
  display: flex;
  align-items: center;
  width: max-content;
  position: relative;
  z-index: 0;
  animation: desfilar 42s linear infinite;
  /* Avisa o navegador de que este elemento vai se mover por transform, para
     ele ganhar a própria camada de composição e deslizar na placa de vídeo,
     sem repintar a faixa a cada quadro. */
  will-change: transform;
}

.marca-logo {
  flex: 0 0 auto;
  /* A altura vem da variável --h, definida logo no HTML de cada logo: cada
     marca tem a SUA, calculada para todas ficarem com o mesmo tamanho
     visual. Fixar uma altura única aqui desfaz o equilíbrio. */
  height: var(--h, 40px);
  width: auto;
  margin-right: 58px;
  opacity: .78;
  transition: opacity .25s ease;
}
.marca-logo:hover { opacity: 1; }

/* Com o mouse em cima, para — quem quer ler uma marca consegue. */
.marcas-carrossel:hover .marcas-carrossel__trilha { animation-play-state: paused; }

@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 620px) {
  /* Encolhe todas na mesma proporção — assim a relação de tamanho entre elas
     continua a mesma do computador. */
  .marca-logo { height: calc(var(--h, 40px) * .76); margin-right: 42px; }
}

/* Bloco de links internos no fim de uma página.
   Usado nas páginas institucionais, que antes não recebiam nenhum link do
   conteúdo — só do menu e do rodapé. */
.veja-tambem {
  max-width: 760px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 26px 28px;
}
.veja-tambem h3 { margin: 0 0 18px; font-size: 1.1rem; }
.veja-tambem ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
}
.veja-tambem li { display: grid; gap: 3px; }
.veja-tambem li a {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem;
}
.veja-tambem li span { font-size: .92rem; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
}
.faq summary {
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background-color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(255, 255, 255, .04); }
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ciano);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq__corpo { padding: 18px 22px 22px; color: var(--texto-suave); }
.faq__corpo p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   13. CONTEÚDO LONGO (páginas de serviço)
   -------------------------------------------------------------------------- */
.prosa { max-width: 74ch; }
.prosa h2 { margin-top: 1.9em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.6em; color: var(--ciano); }
.prosa ul, .prosa ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.prosa li { margin-bottom: .55em; color: var(--texto-suave); }
.prosa li strong { color: var(--texto); }

/* Lista com marcador em ciano */
.lista-check { list-style: none; padding-left: 0; }
.lista-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: .6em;
}
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 16px; height: 9px;
  border-left: 2px solid var(--ciano);
  border-bottom: 2px solid var(--ciano);
  transform: rotate(-45deg);
}

/* Caixa de destaque */
.caixa {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--violeta);
  border-radius: var(--raio);
  padding: 22px 24px;
  margin: 1.8em 0;
}
.caixa h3 { margin-top: 0; color: #fff; }
.caixa p:last-child { margin-bottom: 0; }

/* Tabela de sintomas → causa (páginas de serviço) */
.tabela-wrap { overflow-x: auto; margin: 1.6em 0; border-radius: var(--raio); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
th {
  background: var(--surface-2);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
td { color: var(--texto-suave); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255, 255, 255, .025); }

/* Migalhas de pão */
.migalhas { font-size: .87rem; color: var(--texto-fraco); padding-block: 18px; }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.migalhas li::after { content: "/"; margin-left: 8px; opacity: .45; }
.migalhas li:last-child::after { content: ""; }
.migalhas a { color: var(--texto-suave); }
.migalhas a:hover { color: var(--ciano); }

/* Cabeçalho das páginas internas */
.page-hero {
  padding-block: clamp(38px, 6vw, 68px);
  background:
    radial-gradient(ellipse 70% 130% at 12% 0%, rgba(19, 54, 153, .5) 0%, transparent 62%),
    radial-gradient(ellipse 60% 120% at 92% 10%, rgba(213, 92, 250, .16) 0%, transparent 60%),
    var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.7rem); }
.page-hero .lead { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. CONTATO E FORMULÁRIO
   -------------------------------------------------------------------------- */
.contato-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: start; }

.info-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.info-lista li { display: flex; gap: 14px; align-items: flex-start; }
.info-lista svg { flex-shrink: 0; color: var(--ciano); margin-top: 3px; }
.info-lista strong { display: block; color: #fff; font-family: var(--fonte-titulo); font-size: .95rem; }
.info-lista span, .info-lista a { color: var(--texto-suave); font-size: .95rem; }

form { display: grid; gap: 16px; }
.campo { display: grid; gap: 7px; }
label {
  font-family: var(--fonte-titulo);
  font-size: .9rem;
  font-weight: 600;
  color: var(--texto);
}
input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg);
  border: 1.5px solid var(--border-forte);
  border-radius: var(--raio-sm);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(87, 218, 253, .18);
}
textarea { resize: vertical; min-height: 130px; }
select { cursor: pointer; }
.obrigatorio { color: var(--magenta); }

/* Selo de "aberto agora" / "fechado agora" — calculado no main.js usando o
   fuso de Recife, não o do visitante (senão fica errado para quem acessa
   de outro estado ou país). */
.selo-aberto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-family: var(--fonte-titulo);
  font-size: .88rem;
  font-weight: 600;
}
.selo-aberto--aberto {
  background: rgba(37, 211, 102, .14);
  border-color: rgba(37, 211, 102, .42);
  color: #6BE39B;              /* contraste 10.3:1 sobre o fundo do selo */
}
.selo-aberto--fechado {
  background: rgba(255, 255, 255, .05);
  border-color: var(--border-forte);
  color: var(--texto-suave);   /* contraste 7.6:1 */
}

/* Tabela de horários */
.tabela-horario { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tabela-horario th,
.tabela-horario td {
  padding: 12px 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: none;
}
.tabela-horario th { color: var(--texto); font-weight: 600; width: 46%; white-space: normal; }
.tabela-horario td { color: var(--texto-suave); text-align: right; }
.tabela-horario tr:last-child th,
.tabela-horario tr:last-child td { border-bottom: none; }
/* Destaca o dia de hoje */
.tabela-horario tr.hoje th,
.tabela-horario tr.hoje td { color: var(--ciano); font-weight: 600; }
.tabela-horario tr.hoje th::after {
  content: "hoje";
  margin-left: 9px;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(87, 218, 253, .14);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   15. RODAPÉ
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding-block: clamp(44px, 6vw, 68px) 26px;
  margin-top: 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--border);
}
.footer img { height: 40px; width: auto; margin-bottom: 14px; }
.footer p { color: var(--texto-suave); font-size: .93rem; }
.footer h3 {
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   RODAPÉ EM SANFONA
   No computador os blocos são colunas normais, sempre abertas — nada muda.
   No celular cada bloco vira uma sanfona: o título é clicável e a lista só
   aparece quando a pessoa toca. Assim o rodapé deixa de ser uma parede de
   links no fim da página.
   -------------------------------------------------------------------------- */
.footer__bloco { border: 0; }

.footer__bloco > summary {
  list-style: none;      /* tira o triângulo padrão do navegador */
  cursor: default;
}
.footer__bloco > summary::-webkit-details-marker { display: none; }
.footer__bloco > summary::marker { content: ""; }

/* No computador o título NÃO é clicável: os blocos ficam sempre abertos */
@media (min-width: 861px) {
  .footer__bloco > summary { pointer-events: none; }
  /* Mantém o respiro que existia entre os grupos da mesma coluna */
  .footer__bloco + .footer__bloco { margin-top: 32px; }
}


/* No celular, vira sanfona de verdade */
@media (max-width: 860px) {
  .footer__bloco > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .footer__bloco > summary h3 { margin-bottom: 0; color: var(--texto); }

  /* O sinal de + que vira × quando abre */
  .footer__bloco > summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ciano);
    transition: transform .2s ease;
  }
  .footer__bloco[open] > summary::after { transform: rotate(45deg); }

  .footer__bloco > ul { padding: 14px 0 8px; }
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul a { color: var(--texto-suave); font-size: .93rem; }
.footer ul a:hover { color: var(--ciano); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  font-size: .86rem;
  color: var(--texto-fraco);
}
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border-forte);
  border-radius: 10px;
  color: var(--texto-suave);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.social a:hover { color: var(--ciano); border-color: var(--ciano); background: rgba(87, 218, 253, .08); }

/* --------------------------------------------------------------------------
   16. BOTÃO FLUTUANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
/* Círculo só com o ícone, igual ao do celular — antes era uma pílula com
   texto no computador, o que ocupava espaço e repetia o que o ícone já diz. */
.zap-flutuante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  background-image: var(--gradiente-zap);
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  color: var(--zap-texto);
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 0 0 rgba(139, 122, 252, .6);
  animation: pulsar 2.6s ease-out infinite;
  transition: transform .16s ease;
}
.zap-flutuante:hover { transform: translateY(-2px) scale(1.06); color: var(--zap-texto); }

@keyframes pulsar {
  0%   { box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(139,122,252,.6); }
  70%  { box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 18px rgba(213,92,250,0); }
  100% { box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(213,92,250,0); }
}

/* --------------------------------------------------------------------------
   17. CTA FINAL
   -------------------------------------------------------------------------- */
.cta-final {
  /* Antes era uma faixa de ponta a ponta, com fio em cima e embaixo. Agora é
     um BANNER ARREDONDADO dentro do container — o brilho fica contido numa
     caixa, em vez de escorrer pela largura toda da tela. */
  background: none;
  border-block: 0;
  text-align: center;
}
.cta-final .container {
  max-width: 1080px;
  /* O .container é width:100%, que num bloco ARREDONDADO encosta nas duas
     bordas da tela — e as quinas curvas ficam cortadas. Aqui ele abre 22px de
     cada lado, o mesmo respiro da pílula do cabeçalho. */
  width: calc(100% - 44px);
  margin-inline: auto;
  border-radius: 22px;
  padding: clamp(44px, 6vw, 76px) clamp(26px, 5vw, 64px);
  border: 1px solid var(--border);
  background:
    radial-gradient(700px 320px at 82% 10%, rgba(213, 92, 250, .20), transparent 68%),
    radial-gradient(620px 300px at 14% 90%, rgba(87, 218, 253, .16), transparent 68%),
    linear-gradient(135deg, var(--surface-2), var(--bg-2));
}
.cta-final .btn-row { justify-content: center; }

/* ==========================================================================
   FORMULÁRIO DE PRÉ-CADASTRO (próprio — substituiu o iframe da JotForm)
   --------------------------------------------------------------------------
   TUDO AQUI ESTÁ SOB #formulario DE PROPÓSITO: o formulário usa classes com
   nomes que já existem no site — "card", "field", "input", "intro". Sem o
   prefixo, as duas folhas se atropelariam. O prefixo também resolve a
   precedência: "#formulario .card" (id + classe) ganha de ".card" (só classe).

   ⚠️ A PELE É A DO SITE, e não a que veio junto do formulário.
   O arquivo original trazia um tema CLARO próprio (cartão branco), que destoa
   completamente do site escuro. Em vez de tentar remendar as cores dele, as
   regras abaixo vestem o formulário com a paleta da Aure desde o começo.
   Foi por isso que o cartão apareceu BRANCO na primeira tentativa.
   ========================================================================== */
#formulario .wrap { width: min(100%, 720px); margin: 0 auto; }
#formulario .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(22px, 3.4vw, 36px);
}
#formulario .intro { margin-bottom: 26px; }
#formulario .intro h2, #formulario .intro__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 700; margin: 0 0 8px; color: var(--texto);
}
#formulario .intro p { color: var(--texto-suave); font-size: .93rem; margin: 0 0 4px; }

#formulario .field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
/* ⚠️ OBRIGATÓRIA: o display:flex acima ANULA o atributo "hidden" do HTML.
   Sem ela, o bloco de Inscrição Estadual aparece sempre, até para CPF. */
#formulario [hidden] { display: none !important; }
#formulario .field label, #formulario .grupo-label {
  font-family: var(--fonte-titulo); font-size: .89rem; font-weight: 600; color: var(--texto);
}
#formulario .obrig { color: var(--magenta); }
#formulario .sub-label { font-size: .8rem; color: var(--texto-fraco); font-weight: 400; }

#formulario .input, #formulario textarea, #formulario select {
  width: 100%; padding: 12px 14px; min-height: 46px;
  background: var(--bg-2); color: var(--texto);
  border: 1.5px solid var(--border-forte); border-radius: 12px;
  font-family: var(--fonte-texto); font-size: .95rem;
  transition: border-color .18s, box-shadow .18s;
}
#formulario .input:focus, #formulario textarea:focus, #formulario select:focus {
  outline: none; border-color: var(--violeta);
  box-shadow: 0 0 0 3px rgba(139,122,252,.18);
}
#formulario .input::placeholder { color: var(--texto-fraco); }
#formulario textarea { min-height: 104px; resize: vertical; }
#formulario select.input {
  appearance: none;
  /* appearance:none tira o chevron nativo — sem isto o campo ficava mudo,
     sem nenhuma pista de que abre uma lista. Chevron em SVG no ciano. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2357DAFD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px 15px;
  padding-right: 44px;
}

#formulario .dica { font-size: .8rem; color: var(--texto-fraco); margin: 0; }
#formulario .erro { font-size: .8rem; color: #FF8FA3; display: none; margin-top: 4px; }
/* O formulário marca o PAI com "campo-erro" — não o erro com "ativo". */
#formulario .campo-erro .erro { display: block; }
#formulario .campo-erro .input,
#formulario .campo-erro textarea,
#formulario .campo-erro select { border-color: #FF8FA3; }

#formulario .cep-linha { display: flex; gap: 12px; align-items: flex-start; }
#formulario .cep-status { font-size: .8rem; color: var(--ciano); }
#formulario .cep-status.bad { color: #FF8FA3; }

#formulario .radios { display: flex; flex-wrap: wrap; gap: 10px; }
#formulario .radios label {
  display: flex; align-items: center; gap: 8px; padding: 10px 15px;
  background: var(--bg-2); border: 1.5px solid var(--border); border-radius: 100px;
  font-size: .88rem; cursor: pointer; transition: border-color .18s;
}
#formulario .radios label:hover { border-color: var(--border-forte); }

#formulario .termos {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .86rem; color: var(--texto-suave);
}
/* O CSS global de "input" define width:100%. Sem largura/altura explícitas, o
   rádio e o checkbox esticam, empurram o texto do aceite para fora do cartão e
   criam rolagem horizontal no celular (a largura ia a 434px numa tela de 390px). */
#formulario .radios input,
#formulario .termos input { width: 18px; height: 18px; flex: 0 0 auto; }
#formulario .termos input { margin-top: 3px; }
#formulario .card a { color: var(--ciano); }

#formulario button[type="submit"] {
  width: 100%; margin-top: 6px; padding: 15px 24px; min-height: 52px;
  border: 0; border-radius: 100px; cursor: pointer;
  background: var(--gradiente-texto); color: #0B0616;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1rem;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 8px 26px rgba(139,122,252,.28);
}
#formulario button[type="submit"]:hover {
  transform: translateY(-2px); box-shadow: 0 12px 32px rgba(139,122,252,.42);
}
#formulario .status {
  display: none; margin-top: 14px; padding: 12px 14px;
  border-radius: 12px; font-size: .9rem; text-align: center;
}
#formulario .status.ok { display: block; background: rgba(87,218,253,.10); color: var(--ciano); border: 1px solid rgba(87,218,253,.3); }
#formulario .status.erro { display: block; background: rgba(255,143,163,.10); color: #FF8FA3; border: 1px solid rgba(255,143,163,.3); }
#formulario .honeypot { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
   18. 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;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

/* --------------------------------------------------------------------------
   19. RESPONSIVIDADE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 860px) {
  /* Menu vira gaveta */
  .burger { display: inline-flex; }
  .nav {
    /* ABSOLUTE, e não fixed: a gaveta se posiciona a partir do CABEÇALHO, e
       não da tela.
       Com "fixed" + "inset: 88px" ela ficava a 88px do topo da JANELA, enquanto
       a pílula vive no fluxo da página — basta qualquer coisa acima do
       cabeçalho (a faixa de prévia, por exemplo) para a pílula descer e a
       gaveta passar a cobri-la. Amarrada ao cabeçalho, ela acompanha a pílula
       esteja ela onde estiver. */
    position: absolute;
    top: calc(100% + 12px);
    left: 22px;
    right: 22px;
    margin: 0;
    background: var(--bg-2);
    border: 1px solid var(--border-forte);
    border-radius: 20px;
    padding: 14px 22px 24px;
    max-height: calc(100vh - 118px);
    overflow-y: auto;
    /* Fechada: some da tela.
       O "translateY(-120%)" sozinho NÃO bastava. Ele sobe 120% da altura da
       própria gaveta, mas ela parte de uma posição que não é alta o bastante —
       resultado: sobravam uns 100px dela aparecendo ACIMA do cabeçalho, como um
       segundo menu fantasma. Confiar só no deslocamento é frágil: depende da
       altura da gaveta, que muda com o número de itens.
       Com opacity e visibility, ela fica de fato invisível, e o deslocamento
       continua ali só para dar o deslizar da animação. */
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform .28s ease, opacity .2s ease, visibility .28s;
    box-shadow: var(--sombra);
  }
  .nav[data-aberto="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 13px 12px; font-size: 1.02rem; }
  /* No celular a lista deixa de ser painel flutuante e vira lista dentro da
     gaveta. Aqui a gente DESFAZ tudo que valia no computador — inclusive
     "left: 50%", "min-width" e o "contain" — porque são regras de um painel
     posicionado e atrapalham quando o item passa a ser estático. */
  .nav__sub {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    min-width: 0;
    width: 100%;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 2px 0 10px 12px;
    margin: 0;
    max-height: none;
    overflow: visible;
    contain: none;
    display: none;
  }
  /* ESTA REGRA É A CORREÇÃO DO CORTE À ESQUERDA.
     Lá em cima existe ".nav__item--sub:focus-within .nav__sub" com
     "transform: translateX(-50%)" — que é o centralizador do painel flutuante
     do computador. Como ela tem especificidade maior (3 classes contra 1), ela
     VENCE o "transform: none" do bloco acima. E no celular, ao tocar em
     "Serviços", o link recebe foco e o :focus-within dispara: a lista era
     empurrada metade da própria largura para a esquerda, cortando os nomes.
     Aqui a gente anula isso com a MESMA especificidade, e por vir depois,
     ganha. */
  .nav__item--sub:hover .nav__sub,
  .nav__item--sub:focus-within .nav__sub {
    transform: none;
  }

  .nav__item--sub[data-aberto="true"] .nav__sub { display: block; }
  .nav__item--sub > .nav__link::after { content: " ▾"; color: var(--ciano); }

  /* No celular o topo fica SÓ com a logo e o hambúrguer.
     O botão de WhatsApp saía três vezes na mesma tela (topo fixo + hero +
     botão flutuante), o que poluía. O flutuante continua ali, sempre à mão,
     e agora existe também um botão no meio do conteúdo — que aparece na hora
     certa, em vez de ficar fixo o tempo todo. */
  .header__actions .btn--ghost,
  .header__actions .btn--zap,
  .header__actions .btn-icone { display: none; }

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .contato-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }

  /* CARTÕES DE SERVIÇO COMPACTOS.
     No computador cada serviço é um cartão com ícone, título e duas linhas de
     descrição. No celular, 11 cartões desses viram uma rolagem sem fim — o
     site "parece que não acaba". Aqui cada serviço vira UMA LINHA: ícone e
     nome. Continua tudo visível e na mesma ordem, mas a seção fica cerca de
     70% mais curta. A descrição completa continua na página de cada serviço. */
  .grid--servicos .card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    min-height: 62px;
  }
  .grid--servicos .card__icone {
    margin-bottom: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
  }
  .grid--servicos .card h3 { margin-bottom: 0; font-size: 1rem; }
  /* As linhas ficam mais juntas do que os cartões grandes ficavam */
  .grid--servicos { gap: 10px; }
  /* A descrição e o "Ver detalhes" saem, mas o cartão inteiro continua levando
     para a página do serviço. Sem nenhuma pista visual a pessoa não sabe que
     pode tocar. Esta setinha — feita só com borda, sem imagem — devolve a pista. */
  .grid--servicos .card::after {
    content: "";
    flex: 0 0 auto;
    width: 8px; height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--texto-suave);
    border-bottom: 2px solid var(--texto-suave);
    transform: rotate(-45deg);
    opacity: .5;
  }
  .grid--servicos .card p,
  .grid--servicos .card .card__link { display: none; }

  /* TABELA DE SINTOMAS VIRA CARTÕES.
     No computador ela tem duas colunas: "o que você percebe" e "o que costuma
     ser". No celular, duas colunas de texto longo ficam apertadas e obrigam a
     rolar de lado. Aqui cada LINHA vira um cartão: o sintoma em destaque em
     cima, a causa embaixo. Fica muito mais fácil de ler no telefone. */
  .tabela-wrap { border: 0; overflow-x: visible; }
  .tabela-wrap table,
  .tabela-wrap tbody,
  .tabela-wrap tr,
  .tabela-wrap td { display: block; width: 100%; }
  .tabela-wrap thead { display: none; }        /* o cabeçalho não é mais necessário */
  .tabela-wrap tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    padding: 4px 2px;
    margin-bottom: 12px;
  }
  .tabela-wrap tr:last-child { margin-bottom: 0; }
  .tabela-wrap td {
    border: 0;
    padding: 11px 15px;
    text-align: left;
  }
  .tabela-wrap td:first-child {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }
  .tabela-wrap td:last-child { padding-top: 9px; }

  /* No celular o carrossel mostra um cartão por vez, então ele ocupa a
     largura toda. Um respiro menor deixa mais texto visível por tela. */
  .depoimento { padding: 18px; }
  .depoimento blockquote { font-size: .93rem; }

  /* CABEÇALHO EM CELULAR PEQUENO.
     Fiz a conta: logo (102px) + ícone do RustDesk (44) + botão do WhatsApp
     (122) + hambúrguer (44) + espaçamentos e margens = 388px. Num celular de
     360px isso estoura, e num de 320px estoura feio.
     Solução: logo menor, espaços menores, e o ícone do RustDesk sai do topo.
     Ele continua no rodapé e na página de suporte remoto. */
  .header__inner { gap: 10px; }
  .header__logo img { height: 28px; }
  .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__inner { max-width: 100%; }
  .hero__selos { gap: 8px 16px; }
  .btn-row .btn { width: 100%; }
  .passo { flex-direction: column; gap: 12px; }
}

/* --------------------------------------------------------------------------
   20. ACESSIBILIDADE — respeita quem pediu menos animação no sistema
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   APARÊNCIA SUAVE AO ROLAR

   Adaptado de uma referência que o dono gostou (notehelp.com.br). Lá também
   é código próprio, sem biblioteca.

   A CURVA É O PONTO. `ease` (o padrão do CSS) acelera e freia de forma
   simétrica. A cubic-bezier(.4,0,.2,1) sai rápida e POUSA DEVAGAR — é o que
   faz o conteúdo parecer deslizar em vez de pular.

   O deslocamento de 28px e a duração de .65s também vêm da referência:
   mexer mais devagar lê como "suave"; mexer pouco e rápido lê como "tremida".

   A classe .surgir é adicionada pelo main.js. Sem JavaScript, nada aqui se
   aplica e o conteúdo aparece normalmente — o site não depende disto.
   -------------------------------------------------------------------------- */
.surgir {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .65s cubic-bezier(.4, 0, .2, 1),
    transform .65s cubic-bezier(.4, 0, .2, 1);
}
.surgir--visivel { opacity: 1; transform: none; }

/* Cascata: cada item de uma mesma grade entra um pouco depois do anterior */
.surgir--d1 { transition-delay: .08s; }
.surgir--d2 { transition-delay: .16s; }
.surgir--d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  /* Quem pediu menos animação no sistema vê tudo direto, sem espera */
  .surgir { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* O carrossel de marcas precisa de regra própria. Sem ela, o "animation-
     duration: .001ms" acima faria a faixa pular direto para o fim e ficar
     parada lá. Aqui ele simplesmente para de desfilar e vira uma lista que
     a pessoa arrasta com o dedo. */
  .marcas-carrossel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
  .marcas-carrossel::-webkit-scrollbar { display: none; }
  .marcas-carrossel__trilha { animation: none; transform: none; }
}

/* Impressão — às vezes o cliente imprime a página de serviço */
@media print {
  .header, .footer, .zap-flutuante, .cta-final { display: none; }
  /* No papel o carrossel não rola: sem isto sairia só o primeiro cartão.
     Aqui as 10 avaliações viram uma grade comum. */
  .carrossel__trilha { overflow: visible; flex-wrap: wrap; }
  .carrossel__trilha .depoimento { flex-basis: calc((100% - 20px) / 2); }
  .carrossel__btn { display: none; }
  .depoimento { background: #fff; border: 1px solid #ccc; border-left: 3px solid #999; }
  body { background: #fff; color: #000; }
}