/* ==========================================================================
   Prime Systems — folha de estilo base
   Paleta restrita: branco #FFFFFF · azul royal #0000FF · preto #000000
   ========================================================================== */

:root {
  --branco: #ffffff;
  --preto: #000000;
  --azul: #0000ff;

  /* Prata — quarta cor da marca, vinda do cromado do logo.
     Só existe sobre fundo escuro: em fundo claro ela some. */
  --prata: #c7ced6;
  --prata-claro: #f2f5f8;
  --prata-escuro: #8a929b;
  --prata-cromo: linear-gradient(
    177deg,
    #ffffff 0%,
    #e9eef3 26%,
    #9aa3ad 50%,
    #7f8790 57%,
    #dfe5eb 74%,
    #ffffff 100%
  );
  /* painel prateado escovado — preenchimento de card (não é texto) */
  --prata-painel: linear-gradient(
    155deg,
    #f6f8fb 0%,
    #e1e7ee 46%,
    #eef2f6 70%,
    #d4dce5 100%
  );
  /* cinza prateado — prata médio com presença, para o thumbnail se destacar */
  --cinza-prata: linear-gradient(
    155deg,
    #cdd4dd 0%,
    #9aa3ad 55%,
    #bcc4cd 100%
  );

  /* azul-marinho (navy) — cor de destaque NOVA, aprovada pelo cliente para o
     formulário de contato. Fora da paleta royal/preto/branco/prata original. */
  --navy: #0c2a45;
  --navy-claro: #103055;
  /* base das seções escuras — navy tão escuro que lê como preto (23/07/2026).
     Substituiu o #060910 chapado de quando o fundo era metal cromado. */
  --navy-noite: #07101c;

  /* tints derivados da paleta — sem cores novas, só opacidade */
  --preto-70: rgba(0, 0, 0, 0.7);
  --preto-45: rgba(0, 0, 0, 0.45);
  --preto-12: rgba(0, 0, 0, 0.12);
  --preto-06: rgba(0, 0, 0, 0.06);
  --azul-12: rgba(0, 0, 255, 0.12);
  --azul-30: rgba(0, 0, 255, 0.3);
  --branco-70: rgba(255, 255, 255, 0.7);
  --branco-15: rgba(255, 255, 255, 0.15);

  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --max: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --transicao: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--branco);
  color: var(--preto);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  letter-spacing: -0.011em;
}

img {
  max-width: 100%;
  display: block;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

p {
  margin: 0;
}

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

/* --------------------------------------------------------------------------
   Preloader — contador + cortina que sobe
   -------------------------------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--preto);
  display: grid;
  place-items: center;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader.is-pronto {
  transform: translateY(-101%);
}

.preloader-conteudo {
  position: relative;
  text-align: center;
  color: var(--branco);
  width: min(880px, 92vw);
}

/* Sequência de frases — uma substitui a outra, como uma contagem */

.preloader-frases {
  position: relative;
  height: 1.3em;
  /* Maior e mais pesada — a abertura é o primeiro contato com a marca.
     O piso é limitado pelo nowrap: "Mais credibilidade" (a frase mais longa)
     tem que caber em uma linha até em tela de 320px. Medido, com folga. */
  font-size: clamp(1.75rem, 6.4vw, 4.3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 2.4rem;
}

.frase {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.frase.is-ativa {
  opacity: 1;
  transform: none;
}

.frase.is-saindo {
  opacity: 0;
  transform: translateY(-0.45em);
}

/* o span existe para o cromado ser recortado no texto, e não na caixa toda */
.frase span {
  display: inline-block;
  white-space: nowrap; /* a frase nunca quebra em duas linhas */
  color: var(--branco); /* sem cromado, cai para branco sólido */
}

/* o cromado só entra onde o recorte no texto é suportado — senão o
   texto ficaria invisível */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .frase span {
    background: var(--prata-cromo);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.frase b {
  font-weight: 700;
  /* a palavra em destaque escapa do cromado e volta ao azul da marca */
  -webkit-text-fill-color: var(--azul);
  color: var(--azul);
  text-shadow: 0 0 28px rgba(0, 0, 255, 0.55);
}

/* Revelação final da marca */

.preloader-nome {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.preloader.is-revelando .preloader-nome {
  opacity: 1;
}

/* o símbolo cromado só aparece aqui: fundo preto é onde ele foi desenhado */
.preloader-simbolo {
  width: clamp(84px, 17vw, 124px);
  margin: 0 auto 1.7rem;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.preloader.is-revelando .preloader-simbolo {
  opacity: 1;
  transform: none;
}

.preloader-nome-texto {
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.4em;
  line-height: 1.1;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  color: var(--branco);
}

/* mesmo cromado das frases, para casar com o símbolo do logo acima */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .preloader-nome-texto {
    background: var(--prata-cromo);
    /* o cromo ocupa 3x a altura do texto para sobrar curso ao escorrimento
       do metal (varrerCromo); em 100% não haveria para onde deslizar */
    background-size: 100% 300%;
    background-position: 50% 4%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* assinatura da marca, como aparece na arte original do logo */
.preloader-assinatura {
  margin-top: 1.3rem;
  font-size: clamp(0.6rem, 1.6vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--prata-escuro);
  opacity: 0;
  transition: opacity 0.8s ease 0.75s;
}

.preloader.is-revelando .preloader-assinatura {
  opacity: 1;
}

/* Duas animações ao mesmo tempo: a cortina que descobre as letras e o metal
   escorrendo por dentro delas. O escorrimento é o gesto da marca (o mesmo
   metal líquido do hero), agora recortado no nome. */
.preloader.is-revelando .preloader-nome-texto {
  animation: revelarNome 1.1s cubic-bezier(0.76, 0, 0.24, 1) forwards,
    varrerCromo 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

@keyframes varrerCromo {
  from {
    background-position: 50% 4%;
  }
  to {
    background-position: 50% 82%;
  }
}

@keyframes revelarNome {
  0% {
    clip-path: inset(0 100% 0 0);
    letter-spacing: 0.4em;
  }
  100% {
    clip-path: inset(0 0 0 0);
    letter-spacing: -0.035em;
  }
}

.preloader-regua {
  width: 0;
  height: 3px;
  background: var(--azul);
  margin: 1.4rem auto 0;
}

.preloader.is-revelando .preloader-regua {
  animation: abrirRegua 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

@keyframes abrirRegua {
  to {
    width: min(200px, 45vw);
  }
}

/* estado inicial: mostra as frases, esconde o nome */
.preloader-nome {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 92vw;
}

.preloader.is-revelando .preloader-frases {
  opacity: 0;
  transition: opacity 0.25s ease;
}

body.is-carregando {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Cromado — utilitário de texto prateado
   Só funciona sobre fundo escuro. Em fundo claro o prata some.
   -------------------------------------------------------------------------- */

.cromo {
  color: var(--branco); /* sem suporte ao recorte, cai para branco sólido */
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .cromo {
    background: var(--prata-cromo);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   Navegação
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--gutter);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, padding 0.3s ease;
}

.nav.is-scrolled {
  border-bottom-color: var(--preto-12);
  padding-block: 1rem;
}

.nav-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

/* símbolo em azul chapado: é o que se lê bem a 34px em fundo branco */
.nav-marca-simbolo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform var(--transicao);
}

.nav-marca:hover .nav-marca-simbolo {
  transform: scale(1.06) rotate(-3deg);
}

.nav-marca .ponto {
  color: var(--azul);
}

/* dois símbolos no HTML: o azul para menu claro, o cromado para menu sobre
   o hero escuro. Só um aparece por vez. */
.simbolo-escuro {
  display: none;
}

/* --------------------------------------------------------------------------
   Menu reativo à seção — a nav assume o tom do bloco sob ela.
   O JS marca .is-escuro quando a barra passa por um bloco escuro (hero, metal
   líquido contínuo, seção escura, rodapé). Transparente no topo, tinge de
   escuro ao rolar; nas seções claras, cai no fundo claro padrão (.is-scrolled).
   O HTML já inicia com .is-escuro (todas as páginas abrem sobre o hero escuro),
   evitando um flash branco antes do JS rodar.
   -------------------------------------------------------------------------- */

/* transparente enquanto está no topo do bloco escuro */
.nav.is-escuro:not(.is-scrolled):not(.is-aberto) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ao rolar sobre um bloco escuro, tinge de escuro translúcido */
.nav.is-escuro.is-scrolled:not(.is-aberto) {
  background: rgba(6, 9, 16, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--branco-15);
}

.nav.is-escuro:not(.is-aberto) .nav-marca {
  color: var(--branco);
}

.nav.is-escuro:not(.is-aberto) .simbolo-claro {
  display: none;
}

.nav.is-escuro:not(.is-aberto) .simbolo-escuro {
  display: block;
}

.nav.is-escuro:not(.is-aberto) .nav-marca .ponto {
  color: var(--prata);
}

.nav.is-escuro:not(.is-aberto) .nav-link {
  color: var(--branco-70);
}

.nav.is-escuro:not(.is-aberto) .nav-link:hover,
.nav.is-escuro:not(.is-aberto) .nav-link[aria-current="page"] {
  color: var(--branco);
}

.nav.is-escuro:not(.is-aberto) .nav-link::after {
  background: var(--prata);
}

.nav.is-escuro:not(.is-aberto) .nav-toggle {
  border-color: var(--branco-15);
}

.nav.is-escuro:not(.is-aberto) .nav-toggle span {
  background: var(--branco);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.94rem;
  font-weight: 500;
}

.nav-link {
  position: relative;
  padding-block: 0.2rem;
  color: var(--preto-70);
  transition: color 0.25s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicao);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--preto);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  padding: 0.62rem 1.35rem;
  background: var(--azul);
  color: var(--branco);
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--azul-30);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--preto-12);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--preto);
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle span:nth-child(1) {
  top: 16px;
}
.nav-toggle span:nth-child(2) {
  top: 24px;
}

.nav.is-aberto .nav-toggle span:nth-child(1) {
  transform: translateX(-50%) translateY(4px) rotate(45deg);
}
.nav.is-aberto .nav-toggle span:nth-child(2) {
  transform: translateX(-50%) translateY(-4px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--branco);
    border-bottom: 1px solid var(--preto-12);
    padding: 1.5rem var(--gutter) 2rem;
    transform: translateY(-120%);
    transition: transform var(--transicao);
  }

  .nav.is-aberto .nav-menu {
    transform: translateY(0);
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    font-size: 1.15rem;
  }
}

/* --------------------------------------------------------------------------
   Revelação no scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visivel {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 8rem 5rem;
  overflow: hidden;
  isolation: isolate; /* contém os fundos de z-index negativo dentro do hero */
  /* base da aurora: navy tão escuro que ainda lê como preto, mas dá
     temperatura aos brilhos por cima (preto puro deixava a aurora suja) */
  background: var(--navy-noite);
  color: var(--branco);
}

/* --------------------------------------------------------------------------
   Fundo de metal líquido — SVG feTurbulence + feDisplacementMap animado.
   Extraído de hero-liquid-metal.html, mantido idêntico. Fica atrás do
   conteúdo (z-index negativo); o overlay garante o contraste do texto.
   -------------------------------------------------------------------------- */

/* AURORA NAVY (23/07/2026) — substituiu o metal líquido cromado.

   O que havia antes: gradiente de 5 paradas em background-size: 400% 400%,
   distorcido por um filtro SVG (feTurbulence + feDisplacementMap) e animado
   pela background-position. Bonito no desktop, impraticável no celular:
   o filtro rasgava o fundo no Safari do iPhone e a animação de
   background-position repintava a tela inteira a cada quadro.

   A aurora resolve os dois problemas de uma vez:
   - dois brilhos radiais sobre uma base navy quase preta, sem filtro nenhum
   - o movimento é `transform` puro, que a GPU compõe sem repintar nada
   - a camada é rasterizada UMA vez e depois só deslocada

   Também é o visual mais calmo que o cliente pediu: o cromado carregava
   demais e brigava com o texto. */
.lm-hero__bg {
  position: absolute;
  /* folga generosa: a deriva move a camada sem nunca revelar a borda,
     e o overflow: hidden do .hero recorta a sobra */
  inset: -25%;
  background: radial-gradient(
      42% 46% at 76% 16%,
      rgba(0, 0, 255, 0.2),
      transparent 68%
    ),
    radial-gradient(
      52% 54% at 14% 84%,
      rgba(16, 48, 85, 0.62),
      transparent 72%
    );
  animation: aurora-deriva 34s ease-in-out infinite alternate;
  z-index: -2;
  pointer-events: none;
}

/* escurecimento para garantir contraste do texto.
   Bem mais leve que o antigo: a base já é escura, e o véu pesado de antes
   existia para domar o cromado claro, que não existe mais. */
.lm-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(4, 8, 16, 0.62) 0%,
    rgba(4, 8, 16, 0.28) 46%,
    rgba(4, 8, 16, 0) 74%
  );
  z-index: -1;
  pointer-events: none;
}

/* Deriva da aurora: só transform, nada de background-position.
   translate3d força camada própria e composição na GPU. */
@keyframes aurora-deriva {
  from {
    transform: translate3d(-2%, -1.5%, 0) scale(1);
  }
  to {
    transform: translate3d(2.5%, 2%, 0) scale(1.09);
  }
}

/* respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .lm-hero__bg {
    animation: none;
  }
}

/* ATENÇÃO: a correção mobile do metal líquido NÃO fica aqui.
   Ela precisa vir DEPOIS da declaração de `.secao-liquid::before`, que está
   mais abaixo no arquivo. Media query não acrescenta especificidade: com a
   mesma especificidade, vence a regra que aparece por último. Uma versão
   anterior desta correção estava neste ponto e por isso só funcionava no
   hero, deixando o filtro ligado nas seções.
   Procure por "Correção mobile do metal líquido" adiante. */

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--branco-15);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--prata);
  margin-bottom: 2.2rem;
}

.hero-selo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
  animation: pulsar 2.2s ease-in-out infinite;
}

@keyframes pulsar {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.hero h1 {
  font-size: clamp(2.9rem, 8vw, 5.8rem);
  max-width: 15ch;
  margin-bottom: 1.9rem;
}

/* Sobre preto, azul puro em texto grande fica ilegível. A palavra de
   destaque vira prata (cromado do logo), sem brilho — limpo. */
.hero h1 em {
  font-style: normal;
  color: var(--prata-claro);
  background: var(--prata-cromo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Quando o título anima palavra por palavra, cada palavra vira um
   <span.palavra> inline-block. O gradiente clipado no <em> fica preso à
   caixa do <em> e desincroniza do movimento (translateY) das palavras —
   a prata parece "se formar" atrasada. Aplicar o cromado em cada palavra
   deixa cada uma autossuficiente e entrando em sincronia com as vizinhas. */
.hero h1 em .palavra {
  background: var(--prata-cromo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em,
  .hero h1 em .palavra {
    background: none;
    color: var(--prata-claro);
    -webkit-text-fill-color: currentColor;
  }
}

.hero-texto {
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  color: var(--branco-70);
  max-width: 52ch;
  margin-bottom: 2.8rem;
}

/* botão secundário sobre o hero escuro */
.hero .btn-secundario {
  color: var(--branco);
  border-color: var(--branco-15);
}

.hero .btn-secundario:hover {
  border-color: var(--prata);
  color: var(--prata-claro);
}

.hero .btn-primario {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 14px 40px rgba(0, 0, 255, 0.55);
}

.hero .btn-primario:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 20px 56px rgba(0, 0, 255, 0.8);
}

.hero .secao-rotulo {
  color: var(--prata);
}

.hero .secao-titulo,
.hero .hero-texto {
  color: inherit;
}

.hero .secao-texto {
  color: var(--branco-70);
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* palavras animadas do título */
.palavra {
  display: inline-block;
  /* Estado de repouso VISÍVEL (opacidade 1 por padrão). O `backwards` esconde
     a palavra só durante o atraso inicial, para a entrada ficar limpa — mas
     depois da animação o repouso é o estilo base, sempre visível. Assim o
     título nunca fica preso transparente, mesmo se a animação for interrompida. */
  animation: subir 0.95s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(0.9em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.9rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform var(--transicao), box-shadow var(--transicao),
    background 0.3s ease, color 0.3s ease;
  will-change: transform;
}

.btn-primario {
  background: var(--azul);
  color: var(--branco);
}

.btn-primario:hover {
  box-shadow: 0 16px 36px var(--azul-30);
}

.btn-secundario {
  background: transparent;
  color: var(--preto);
  border-color: var(--preto-12);
}

.btn-secundario:hover {
  border-color: var(--azul);
  color: var(--azul);
}

.btn .seta {
  transition: transform var(--transicao);
}

.btn:hover .seta {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Faixa deslizante
   -------------------------------------------------------------------------- */

.faixa {
  background: var(--preto);
  color: var(--branco);
  padding-block: 1.15rem;
  overflow: hidden;
  white-space: nowrap;
}

.faixa-trilha {
  display: inline-flex;
  gap: 3rem;
  animation: deslizar 26s linear infinite;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.faixa-trilha span {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  color: var(--prata);
}

.faixa-trilha span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--azul);
}

@keyframes deslizar {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */

.secao {
  padding-block: clamp(5rem, 12vw, 9rem);
}

.secao-escura {
  background: var(--preto);
  color: var(--branco);
}

.secao-rotulo {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 1.2rem;
}

/* em fundo preto o rótulo azul some — vira prata */
.secao-escura .secao-rotulo {
  color: var(--prata);
}

.secao-titulo {
  font-size: clamp(2.35rem, 5.6vw, 4rem);
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.secao-titulo em {
  font-style: normal;
  color: var(--azul);
}

.secao-texto {
  color: var(--preto-70);
  max-width: 54ch;
  font-size: 1.14rem;
  line-height: 1.62;
}

.secao-escura .secao-texto {
  color: var(--branco-70);
}

.secao-cabecalho {
  margin-bottom: 3.6rem;
}

/* --------------------------------------------------------------------------
   Cards de serviço (com inclinação no mouse)
   -------------------------------------------------------------------------- */

.grade-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}

.card {
  position: relative;
  padding: 2.4rem 2rem;
  border: 1px solid var(--preto-12);
  border-radius: 20px;
  background: var(--branco);
  overflow: hidden;
  transition: transform 0.18s ease-out, border-color 0.35s ease,
    box-shadow 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    var(--azul-12),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.card:hover {
  border-color: var(--azul-30);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.07);
}

.card:hover::before {
  opacity: 1;
}

.card-numero {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--azul);
  letter-spacing: 0.1em;
  margin-bottom: 1.4rem;
}

.card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.8rem;
}

.card p {
  color: var(--preto-70);
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   Ícones — traço desenhado ao entrar na tela, sem imagem externa
   -------------------------------------------------------------------------- */

.ico-caixa {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--azul-12);
  color: var(--azul);
  margin-bottom: 1.5rem;
  transition: background 0.35s ease, transform var(--transicao);
}

.secao-escura .ico-caixa {
  background: var(--branco-15);
  color: var(--branco);
}

.ico {
  width: 26px;
  height: 26px;
  overflow: visible;
}

/* o traço fica escondido e é "desenhado" quando o bloco entra na tela */
.ico .traco {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.is-visivel .ico .traco {
  animation: desenharTraco 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.is-visivel .ico .traco:nth-child(2) {
  animation-delay: 0.22s;
}
.is-visivel .ico .traco:nth-child(3) {
  animation-delay: 0.44s;
}
.is-visivel .ico .traco:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes desenharTraco {
  to {
    stroke-dashoffset: 0;
  }
}

/* movimento contínuo e discreto, um por tipo de ícone */
.card:hover .ico-caixa,
.ganho:hover .ico-caixa {
  background: var(--azul);
  color: var(--branco);
  transform: translateY(-3px);
}

.ico-raio {
  animation: piscarRaio 3.4s ease-in-out infinite;
}

@keyframes piscarRaio {
  0%,
  82%,
  100% {
    opacity: 1;
  }
  86% {
    opacity: 0.35;
  }
  90% {
    opacity: 1;
  }
  94% {
    opacity: 0.5;
  }
}

.ico-lupa {
  animation: vasculhar 4.5s ease-in-out infinite;
}

@keyframes vasculhar {
  0%,
  100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(2.5px, -2px);
  }
  60% {
    transform: translate(-2px, 1.5px);
  }
}

.ico-gira {
  animation: girarLento 9s linear infinite;
}

@keyframes girarLento {
  to {
    transform: rotate(360deg);
  }
}

.ico-foguete {
  animation: subirFoguete 3s ease-in-out infinite;
}

@keyframes subirFoguete {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3.5px);
  }
}

.ico-alvo {
  animation: cutucar 3.6s ease-in-out infinite;
}

@keyframes cutucar {
  0%,
  100% {
    transform: translate(0, 0);
  }
  45% {
    transform: translate(2px, 2px);
  }
}

/* --------------------------------------------------------------------------
   Ganhos — o que um bom site muda no negócio
   -------------------------------------------------------------------------- */

.grade-ganhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
}

.ganho h3 {
  font-size: 1.2rem;
  margin-bottom: 0.65rem;
}

.ganho p {
  color: var(--preto-70);
  font-size: 0.97rem;
}

/* a seta de crescimento sobe de leve quando o bloco entra */
.ganho:first-child .ico {
  animation: crescer 3.8s ease-in-out infinite;
}

@keyframes crescer {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(1.5px, -2.5px);
  }
}

/* --------------------------------------------------------------------------
   Quem está por trás — foto dos sócios
   -------------------------------------------------------------------------- */

.pessoas {
  display: grid;
  /* fotos na coluna maior — ganham presença dentro do card */
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* título em coluna: um pouco menor para não abrir buracos na quebra */
.pessoas .secao-titulo {
  font-size: clamp(2rem, 3.8vw, 3rem);
  max-width: 16ch;
}

/* coluna de texto: rótulo/título/parágrafo à esquerda, mas o botão desce e
   fica centralizado, para um fecho mais equilibrado e profissional */
.pessoas-texto {
  display: flex;
  flex-direction: column;
}

.pessoas-texto .btn-secundario {
  align-self: center;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}

/* "Quem faz" — card branco horizontal flutuando sobre o metal animado, para
   quebrar a longa faixa escura sem sair do fluxo contínuo. O conteúdo volta ao
   contexto claro (rótulo azul, textos escuros, botão claro). Escopo em #pessoas
   para a especificidade de id vencer as regras de .secao-escura / .secao-liquid. */
#pessoas .pessoas {
  position: relative;
  overflow: hidden;
  /* aço esfumaçado — mesma placa de metal dos cards de avaliação/sócio, para o
     "Quem faz" pertencer ao sistema de cards em vez de ser um bloco branco solto */
  background: var(--cinza-prata);
  color: var(--preto);
  border: 1px solid var(--preto-12);
  border-radius: 28px;
  padding: clamp(2.2rem, 5vw, 4rem);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.45);
}

/* brilho de canto — o efeito esfumaçado que dá profundidade de metal à placa */
#pessoas .pessoas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 20% 10%,
    rgba(255, 255, 255, 0.5),
    transparent 60%
  );
}

#pessoas .pessoas > * {
  position: relative;
  z-index: 1;
}

#pessoas .secao-rotulo {
  color: var(--preto);
}

#pessoas .pessoas .secao-titulo,
#pessoas .pessoas-texto {
  color: var(--preto);
}

#pessoas .secao-texto {
  color: var(--preto-70);
}

/* botão "Conhecer os sócios": preto sólido com texto branco — mais chamativo e
   sofisticado sobre a placa de aço */
#pessoas .btn-secundario {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
}

#pessoas .btn-secundario:hover {
  /* clareia para um grafite (não azul, que destoaria do aço) + leve elevação */
  background: #2a2f37;
  color: var(--branco);
  border-color: #2a2f37;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

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

  /* no mobile o card respira um pouco menos, para não ocupar a tela toda */
  #pessoas .pessoas {
    padding: clamp(1.6rem, 6vw, 2.4rem);
  }
}

/* duas fotos lado a lado, uma levemente deslocada para dar movimento */
.pessoas-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  align-items: center;
}

.socio-foto {
  position: relative;
  margin: 0;
  /* passe-partout: o respiro da moldura em volta da foto */
  padding: 7px;
  border-radius: 20px;
  aspect-ratio: 4 / 5;
  /* moldura de prata escovado no tom das fotos P&B — harmoniza com o cinza das
     fotos e o aço do card; o bisel (brilho no topo + sombra na base) dá volume 3D */
  background: linear-gradient(155deg, #b3bbc4 0%, #6d757f 52%, #98a1ab 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.22),
    0 26px 55px rgba(0, 0, 0, 0.38);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

/* a segunda desce um pouco, criando um degrau elegante */
.socio-foto-alt {
  transform: translateY(1.8rem);
}

.socio-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* raio interno menor que o da moldura, para a foto assentar dentro dela */
  border-radius: 14px;
  filter: saturate(1.05) contrast(1.02);
}

.socio-foto:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.26),
    0 34px 66px rgba(0, 0, 0, 0.42);
}

.socio-foto-alt:hover {
  transform: translateY(calc(1.8rem - 4px));
}

/* nome sobre um degradê escuro na base da foto, alinhado dentro da moldura */
.socio-foto figcaption {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  border-radius: 0 0 14px 14px;
  padding: 1.6rem 1rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--branco);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
}

@media (max-width: 480px) {
  .socio-foto figcaption {
    font-size: 0.8rem;
  }
}

/* --------------------------------------------------------------------------
   Números animados
   -------------------------------------------------------------------------- */

.grade-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.4rem;
}

/* cada número num tile quadrado só com a moldura — fundo transparente, deixando
   o metal animado aparecer por dentro. A borda usa a MESMA cor da divisória
   entre os números (--branco-15): um cinza/prata bem leve, sem preenchimento. */
.grade-numeros > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  padding: 1.8rem;
  border: 1px solid var(--branco-15);
  border-radius: 18px;
  background: transparent;
}

@media (max-width: 620px) {
  .grade-numeros > div {
    aspect-ratio: 3 / 2;
  }
}

.numero-valor {
  display: block;
  font-size: clamp(3rem, 7vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.grade-numeros .numero-valor {
  background: var(--prata-cromo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grade-numeros .numero-valor {
    background: none;
    color: var(--branco);
  }
}

.numero-rotulo {
  font-size: 0.92rem;
  color: var(--branco-70);
}

/* --------------------------------------------------------------------------
   Compromissos (home) — substituíram a faixa de números em 23/07/2026.

   Bloco de número animado é convenção de prova social: quem vê espera
   "47 projetos entregues", "12 anos de mercado". Como os contadores só tinham
   "100%", "24h" e "2 sócios" para mostrar, o espaço nobre acabava sublinhando
   justamente o que ainda não existe. Viraram três promessas verificáveis, sem
   contador. A moldura leve sobre o metal continua a mesma, agora em tile de
   texto em vez de tile quadrado.

   O CSS de .grade-numeros / .numero-valor segue no arquivo, sem uso na home.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Fecho de "Exemplos de layout" — placa de aço com a oferta

   O site não tem portfólio de cliente real ainda. Em vez de esconder isso,
   a seção termina oferecendo o que a casa já faz de verdade na prospecção:
   montar uma tela real do negócio do visitante antes de fechar contrato.
   Placa de aço (--cinza-prata) sobre a seção escura, então o texto volta ao
   escuro e o botão primário azul funciona normalmente.
   -------------------------------------------------------------------------- */

.exemplos-oferta {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2.6rem, 6vw, 4rem);
  padding: clamp(1.9rem, 4.5vw, 2.9rem);
  border: 1px solid var(--preto-12);
  border-radius: 22px;
  background: var(--cinza-prata);
  color: var(--preto);
  display: grid;
  gap: 1.6rem;
  align-items: center;
}

.exemplos-oferta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 22% 12%,
    rgba(255, 255, 255, 0.55),
    transparent 58%
  );
}

.exemplos-oferta > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 820px) {
  .exemplos-oferta {
    grid-template-columns: 1fr auto;
    gap: 2.4rem;
  }
}

.exemplos-oferta-texto {
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  line-height: 1.55;
  letter-spacing: -0.012em;
  max-width: 62ch;
}

.exemplos-oferta-texto em {
  font-style: normal;
  font-weight: 700;
  color: var(--azul);
}

.exemplos-oferta .btn {
  white-space: nowrap;
}

.grade-compromissos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
}

.compromisso {
  padding: 2.1rem 1.9rem;
  border: 1px solid var(--branco-15);
  border-radius: 18px;
  background: transparent;
  transition: border-color var(--transicao), transform var(--transicao);
}

.compromisso:hover {
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-3px);
}

.compromisso:hover .ico-caixa {
  background: var(--branco);
  color: var(--preto);
}

.compromisso h3 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
  margin-bottom: 0.6rem;
  color: var(--branco);
}

.compromisso p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--branco-70);
}

/* --------------------------------------------------------------------------
   Dores do cliente
   -------------------------------------------------------------------------- */

.grade-dores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.4rem;
}

.dor {
  padding: 2.2rem 2rem;
  border: 1px solid var(--branco-15);
  border-radius: 20px;
  transition: border-color 0.35s ease, transform var(--transicao);
}

.dor:hover {
  border-color: var(--prata-escuro);
  transform: translateY(-4px);
}

/* a fala do cliente, em prata — é a voz dele, não a nossa */
.dor-fala {
  position: relative;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--branco-15);
  background: var(--prata-cromo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .dor-fala {
    background: none;
    color: var(--branco);
  }
}

.dor-fala::before {
  content: "“";
}

.dor-fala::after {
  content: "”";
}

.dor-resposta {
  color: var(--branco-70);
  font-size: 0.97rem;
}

/* o último bloco fecha o raciocínio e ocupa a largura que sobrar */
.dor-fecho {
  display: grid;
  place-items: center;
  text-align: center;
  border-style: dashed;
  border-color: var(--azul-30);
}

.dor-fecho-texto {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--branco-70);
  max-width: 34ch;
}

.dor-fecho-texto em {
  font-style: normal;
  font-weight: 700;
  color: var(--branco);
}

/* --------------------------------------------------------------------------
   Rampa preto → prata → claro (transição da seção escura para a clara)
   -------------------------------------------------------------------------- */

.rampa-prata {
  height: clamp(140px, 20vw, 240px);
  background: linear-gradient(
    to bottom,
    var(--preto) 0%,
    #171b23 26%,
    #5c6570 58%,
    #b7c0c9 82%,
    #eef1f5 100%
  );
}

/* seção com leve fundo prateado, para o miolo do site não ficar branco chapado */
.secao-prata {
  background: linear-gradient(
    to bottom,
    #eef1f5 0%,
    #f6f8fa 45%,
    var(--branco) 100%
  );
}

/* --------------------------------------------------------------------------
   Seção com fundo de metal líquido ANIMADO (mesmo filtro SVG do hero)
   Fundo e véu via pseudo-elementos — nenhuma mudança no HTML além da classe.
   -------------------------------------------------------------------------- */

.secao-liquid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-noite);
}

/* a aurora — mesmos dois brilhos do hero, um pouco mais contidos, porque a
   seção costuma ser muito mais alta que uma tela */
.secao-liquid::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(
      40% 30% at 80% 12%,
      rgba(0, 0, 255, 0.15),
      transparent 66%
    ),
    radial-gradient(
      48% 36% at 12% 86%,
      rgba(16, 48, 85, 0.5),
      transparent 70%
    );
  animation: aurora-deriva 40s ease-in-out infinite alternate;
  z-index: -2;
  pointer-events: none;
}

/* O véu escuro foi REMOVIDO (23/07/2026).
   Ele existia para domar o cromado claro do metal líquido, que chegava a
   #dbe6f2 e apagava o texto branco. A aurora já nasce escura, então o véu
   só somava uma camada composta a mais para o navegador carregar, de graça.
   `content: none` elimina o pseudo-elemento por completo. */
.secao-liquid::after {
  content: none;
}

.secao-liquid > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .secao-liquid::before {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Correção mobile do metal líquido  (23/07/2026)

   Precisa ficar DEPOIS de `.lm-hero__bg` e de `.secao-liquid::before`: media
   query não soma especificidade, então quem vem por último no arquivo vence.
   A versão anterior estava lá em cima, antes de `.secao-liquid`, e por isso
   só surtia efeito no hero — nas seções o filtro continuava ligado, rasgando
   o fundo no Safari do iPhone.

   Duas coisas são desligadas no celular:

   1. `filter: url(#lmTurbulence)` — o deslocamento (feDisplacementMap, scale
      70, que no celular equivale a ~18% da largura) empurra o gradiente e
      revela a borda; e QUALQUER filter faz iOS Safari e Chrome Android
      rasterizarem o elemento, deixando beirada transparente e rasgos.
   2. `animation: lm-shift` — anima `background-position` sobre um
      `background-size: 400% 400%`. Isso não é composto na GPU: repinta a área
      inteira a cada quadro. Num fundo do tamanho da tela, é a maior fonte de
      queda de FPS do site no celular.

   Sem o filtro e sem a animação sobra um gradiente azul-aço estático, que
   continua bonito e roda liso. O `inset` negativo mantém o metal
   transbordando, e o `overflow: hidden` do pai recorta a sobra — é isso que
   elimina o fio de 1px de subpixel que formava a moldura escura.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  /* A aurora fica PARADA no celular.

     Não é o custo de desenhar: um par de gradientes radiais é barato. É o
     tamanho da camada. Animar `transform` obriga o navegador a promover o
     elemento a camada própria e guardá-la em memória, e `.liquid-continuo`
     tem vários telões de altura. Num iPhone essa textura gigante é o que
     engasga a rolagem.

     Parada, a aurora é só pintura comum, sem camada e sem memória extra. O
     movimento do site continua vindo do conteúdo: reveals, ícones que se
     desenham, faixa deslizante e o card 3D da demo. */
  .lm-hero__bg,
  .secao-liquid::before {
    inset: -12%;
    animation: none;
    transform: none;
    will-change: auto;
  }

  /* desfoque de fundo é caro no iOS enquanto a página rola */
  .nav.is-scrolled,
  .nav.is-escuro.is-scrolled:not(.is-aberto) {
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    backdrop-filter: saturate(150%) blur(8px);
  }
}

/* --------------------------------------------------------------------------
   Variante da seção líquida com IMAGEM DE FUNDO estática (só em "Quem faz").
   Usa a arte prateada CLARA enviada, sem animação nem displacement — parada e
   limpa. Como a arte é clara, esta seção NÃO leva .secao-escura: o texto, o
   botão e o rótulo ficam escuros/azuis para contraste.
   -------------------------------------------------------------------------- */

.secao-liquid-foto::before {
  inset: 0;
  background: #e9edf1 url("quem-faz-bg.jpg") center / cover no-repeat;
  filter: none;
  animation: none;
  transform: none;
}

/* arte clara: véu branco levíssimo só para firmar o texto escuro por cima */
.secao-liquid-foto::after {
  background: linear-gradient(
    180deg,
    rgba(236, 239, 243, 0.34) 0%,
    rgba(236, 239, 243, 0.24) 50%,
    rgba(236, 239, 243, 0.42) 100%
  );
}

/* botão "Conhecer os sócios": fundo preto e texto branco, para destacar sobre
   o prata claro (sobrepõe a regra clara de .secao-liquid .btn-secundario) */
.secao-liquid-foto .btn.btn-secundario {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
}

.secao-liquid-foto .btn.btn-secundario:hover {
  /* no hover clareia para um grafite (não azul, que destoa do prata) */
  background: #40454e;
  color: var(--branco);
  border-color: #40454e;
}

/* rótulo "Quem faz": preto e um pouco maior (pedido do cliente) */
.secao-liquid-foto .secao-rotulo {
  color: var(--preto);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Seção com fundo de metal líquido (cromo) + véu escuro para o texto
   -------------------------------------------------------------------------- */

.secao-metal {
  position: relative;
  overflow: hidden;
  background: #080b12;
}

/* a textura cromada */
.secao-metal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("metal-fundo.jpg") center / cover no-repeat;
}

/* véu escuro azulado: deixa o metal visível, mas o texto branco legível */
.secao-metal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 9, 16, 0.82) 0%,
    rgba(6, 9, 16, 0.74) 45%,
    rgba(6, 9, 16, 0.86) 100%
  );
}

/* o conteúdo fica acima do fundo e do véu */
.secao-metal > .container {
  position: relative;
  z-index: 1;
}

/* etapas sobre o metal: linhas e textos em tom claro */
.secao-metal .etapa,
.secao-liquid .etapa {
  border-color: var(--branco-15);
}

.secao-metal .etapa:last-child,
.secao-liquid .etapa:last-child {
  border-bottom-color: var(--branco-15);
}

.secao-metal .etapa:hover,
.secao-liquid .etapa:hover {
  background: rgba(255, 255, 255, 0.05);
}

.secao-metal .etapa p,
.secao-liquid .etapa p {
  color: var(--branco-70);
}

/* botão secundário legível sobre o metal */
.secao-metal .btn-secundario,
.secao-liquid .btn-secundario {
  color: var(--branco);
  border-color: var(--branco-15);
}

.secao-metal .btn-secundario:hover,
.secao-liquid .btn-secundario:hover {
  border-color: var(--prata);
  color: var(--prata-claro);
}

/* --------------------------------------------------------------------------
   Processo (linha do tempo)
   -------------------------------------------------------------------------- */

.processo {
  display: grid;
  gap: 0;
  counter-reset: etapa;
}

.etapa {
  display: grid;
  grid-template-columns: clamp(90px, 12vw, 160px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  border-top: 1px solid var(--preto-12);
  align-items: start;
  transition: background 0.4s ease, padding-inline 0.4s ease;
}

.etapa:last-child {
  border-bottom: 1px solid var(--preto-12);
}

.etapa:hover {
  background: var(--preto-06);
  padding-inline: 1.4rem;
}

/* número num quadrado só com moldura: fundo transparente deixando o metal
   animado aparecer por dentro; borda no mesmo cinza da divisória entre as
   etapas (--branco-15). */
.etapa-indice {
  display: grid;
  place-items: center;
  width: clamp(72px, 10vw, 116px);
  aspect-ratio: 1;
  border-radius: 18px;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--branco);
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 1px solid var(--branco-15);
  transition: transform var(--transicao), border-color var(--transicao);
}

.etapa:hover .etapa-indice {
  transform: translateY(-3px);
  border-color: var(--prata);
}

.etapa h3 {
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  margin-bottom: 0.9rem;
}

.etapa p {
  color: var(--preto-70);
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  line-height: 1.62;
}

@media (max-width: 620px) {
  .etapa {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .etapa-indice {
    line-height: 1;
  }
}

/* --------------------------------------------------------------------------
   Sócios
   -------------------------------------------------------------------------- */

.grade-socios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
}

.socio {
  position: relative;
  overflow: hidden;
  padding: 2.6rem 2.2rem;
  /* borda preta definida (um tico mais grossa) — dá presença e intenção ao card */
  border: 1.5px solid rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  /* aço esfumaçado claro — mesmo dos cards de avaliação, para saltar sobre o
     fundo escuro da seção. Texto do card é escuro. */
  background: var(--cinza-prata);
  color: var(--preto);
  transition: border-color 0.35s ease, transform var(--transicao),
    box-shadow 0.35s ease;
}

/* brilho de canto — efeito esfumaçado de metal (igual ao card de avaliação) */
.socio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 22% 12%,
    rgba(255, 255, 255, 0.55),
    transparent 58%
  );
}

.socio > * {
  position: relative;
  z-index: 1;
}

.socio:hover {
  /* preto mais forte no hover (sem virar azul, que destoava sobre o aço) */
  border-color: rgba(0, 0, 0, 0.85);
  transform: translateY(-4px);
  /* brilho prateado esfumaçado, visível sobre o fundo escuro */
  box-shadow: 0 26px 55px rgba(138, 146, 155, 0.22);
}

/* --------------------------------------------------------------------------
   "No que acreditamos" — cards prateados sobre a seção de metal líquido.
   A seção é escura (texto branco por padrão); aqui o painel é prata claro,
   então o texto e os ícones do card voltam a ser escuros/azuis.
   -------------------------------------------------------------------------- */

.secao-principios .card {
  /* mesmo aço esfumaçado dos cards de sócio e de avaliação:
     brilho de canto (radial claro) sobre o gradiente --cinza-prata */
  background: radial-gradient(
      120% 90% at 22% 12%,
      rgba(255, 255, 255, 0.55),
      transparent 58%
    ),
    var(--cinza-prata);
  color: var(--preto);
  border-color: rgba(0, 0, 0, 0.5);
}

.secao-principios .card h3 {
  color: var(--preto);
}

.secao-principios .card p {
  color: var(--preto-70);
}

/* a caixa do ícone volta ao azul claro (a regra de seção escura a deixaria
   translúcida branca, some no painel prata) */
.secao-principios .card .ico-caixa {
  background: var(--azul-12);
  color: var(--azul);
}

/* o número deixa de ser um rótulo pequeno e vira um WATERMARK gigante e
   apagado, sangrando no canto direito do card. Vale para "No que acreditamos"
   (sobre) e "O que fazemos" (home, #servicos). O .card já é position:relative
   e overflow:hidden, então o número grande é recortado na borda. */
.secao-principios .card-numero,
#servicos .card-numero {
  position: absolute;
  top: -1rem;
  right: 0.4rem;
  margin: 0;
  font-size: 7.5rem;
  line-height: 1;
  letter-spacing: -0.06em;
  /* azul da marca, nítido mas em watermark — leve o bastante para o texto
     por cima seguir legível */
  color: rgba(0, 0, 255, 0.16);
  z-index: 0;
  pointer-events: none;
  transition: color 0.4s ease;
}

/* no hover o número acende um tiquinho */
.secao-principios .card:hover .card-numero,
#servicos .card:hover .card-numero {
  color: rgba(0, 0, 255, 0.26);
}

/* conteúdo do card acima do watermark */
.secao-principios .card > *:not(.card-numero),
#servicos .card > *:not(.card-numero) {
  position: relative;
  z-index: 1;
}

/* "O que fazemos" (#servicos): agora é seção escura de metal (secao-liquid),
   com os cards no MESMO aço esfumaçado do Sobre ("No que acreditamos") —
   brilho de canto sobre --cinza-prata, texto escuro sobre a placa prateada. */
#servicos .card {
  background: radial-gradient(
      120% 90% at 22% 12%,
      rgba(255, 255, 255, 0.55),
      transparent 58%
    ),
    var(--cinza-prata);
  color: var(--preto);
  border-color: rgba(0, 0, 0, 0.5);
}

#servicos .card h3 {
  color: var(--preto);
}

#servicos .card p {
  color: var(--preto-70);
}

/* a caixa do ícone volta ao azul claro (a regra de seção escura a deixaria
   translúcida branca, some no aço) */
#servicos .card .ico-caixa {
  background: var(--azul-12);
  color: var(--azul);
}

#servicos .card:hover {
  border-color: rgba(0, 0, 0, 0.75);
}

#servicos .secao-rotulo {
  color: var(--prata-escuro);
}

.socio-inicial {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 1.6rem;
}

/* retrato do sócio no card da página Sobre */
.socio-retrato {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 1.8rem;
  filter: saturate(1.05) contrast(1.02);
}

/* card de aço claro: textos escuros */
.socio h3 {
  font-size: 1.45rem;
  margin-bottom: 0.35rem;
  color: var(--preto);
}

.socio-papel {
  font-size: 0.9rem;
  color: var(--azul);
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.socio p {
  color: var(--preto-70);
  font-size: 0.98rem;
  margin-bottom: 1.4rem;
}

.socio-contato {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--azul);
  border-bottom: 1px solid var(--azul-30);
  padding-bottom: 2px;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.socio-contato:hover {
  color: var(--azul);
  border-color: var(--azul);
}

/* --------------------------------------------------------------------------
   Avaliações
   -------------------------------------------------------------------------- */

.grade-avaliacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}

/* some da página enquanto não houver nenhuma avaliação dentro */
.grade-avaliacoes:empty {
  display: none;
}

.avaliacao {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 2.2rem 2rem;
  border: 1px solid var(--preto-12);
  border-radius: 20px;
  /* aço esfumaçado — mesmo prata médio dos thumbnails do mockup */
  background: var(--cinza-prata);
  /* card claro: texto sempre escuro, mesmo quando a seção é escura */
  color: var(--preto);
  transition: border-color 0.35s ease, transform var(--transicao),
    box-shadow 0.35s ease;
}

/* brilho de canto: tira o aspecto chapado e dá o efeito esfumaçado de metal */
.avaliacao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 22% 12%,
    rgba(255, 255, 255, 0.55),
    transparent 58%
  );
}

/* conteúdo acima do brilho */
.avaliacao > * {
  position: relative;
  z-index: 1;
}

.avaliacao:hover {
  border-color: var(--azul-30);
  transform: translateY(-4px);
  /* brilho prateado esfumaçado — visível sobre o fundo escuro da seção */
  box-shadow: 0 26px 55px rgba(138, 146, 155, 0.22);
}

.estrelas {
  display: flex;
  gap: 0.25rem;
}

.estrelas span {
  width: 17px;
  height: 17px;
  background: var(--azul);
  /* estrela de cinco pontas, sem imagem externa */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* selo que marca cada card como exemplo — a página não passa avaliação
   inventada como real; é o formato pronto pra receber as avaliações verdadeiras.
   margin-top:auto empurra o selo pro rodapé do card, alinhado entre os cards */
.avaliacao-selo {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--preto-70);
  border: 1px dashed rgba(0, 0, 0, 0.28);
  border-radius: 100px;
  padding: 0.3rem 0.75rem;
}

.avaliacao blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--preto);
}

.avaliacao blockquote::before {
  content: "“";
}

.avaliacao blockquote::after {
  content: "”";
}

/* agora é o cabeçalho do card: perfil de quem avaliou, acima das estrelas */
.avaliacao-autor {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--preto-12);
}

.avaliacao-inicial {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-weight: 700;
  font-size: 0.9rem;
}

.avaliacao-autor strong {
  display: block;
  font-size: 0.98rem;
}

.avaliacao-autor small {
  display: block;
  font-size: 0.85rem;
  color: var(--preto-70);
}

/* Estado sem avaliações */

.aviso-vazio {
  max-width: 62ch;
  padding: clamp(2rem, 5vw, 3.2rem);
  border: 1px solid var(--preto-12);
  border-radius: 22px;
  background: var(--preto-06);
}

.aviso-vazio h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-bottom: 1.1rem;
  max-width: 24ch;
}

.aviso-vazio p {
  color: var(--preto-70);
  font-size: 1.02rem;
}

.aviso-vazio p + p {
  margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   Formulário de contato
   -------------------------------------------------------------------------- */

.contato-grade {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .contato-grade {
    grid-template-columns: 1fr;
  }
}

.contato-lista {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.contato-lista dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--preto-45);
  margin-bottom: 0.3rem;
}

.contato-lista dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 500;
}

.form {
  display: grid;
  gap: 1.3rem;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--preto-12);
  border-radius: 22px;
  background: var(--branco);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.07);
}

.campo {
  display: grid;
  gap: 0.5rem;
}

.campo label {
  font-size: 0.86rem;
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.9rem 1.05rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--preto);
  background: var(--branco);
  border: 1.5px solid var(--preto-12);
  border-radius: 12px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.campo textarea {
  min-height: 130px;
  resize: vertical;
}

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

/* dropdown: remove a seta NATIVA do navegador (que aparecia "saindo pra fora")
   e desenha uma seta chevron própria, alinhada dentro da caixa */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.9rem;
  cursor: pointer;
  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='%238a929b' stroke-width='2.6' 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 1.1rem center;
  background-size: 16px;
}

.campo select:hover {
  border-color: rgba(0, 0, 0, 0.25);
}

/* no foco a seta acompanha o azul da borda */
.campo select:focus {
  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='%230000ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* IE/Edge antigo: esconde a seta nativa */
.campo select::-ms-expand {
  display: none;
}

/* --------------------------------------------------------------------------
   Dropdown customizado (substitui o <select> nativo, com lista estilizável)
   -------------------------------------------------------------------------- */

.dropdown {
  position: relative;
}

.dropdown-botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.05rem;
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  color: var(--preto);
  background: var(--branco);
  border: 1.5px solid var(--preto-12);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dropdown-botao:hover {
  border-color: rgba(0, 0, 0, 0.25);
}

.dropdown-botao:focus-visible,
.dropdown.is-aberto .dropdown-botao {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px var(--azul-12);
}

.dropdown-seta {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--prata-escuro);
  transition: transform 0.25s ease, color 0.25s ease;
}

.dropdown.is-aberto .dropdown-seta {
  transform: rotate(180deg);
  color: var(--azul);
}

/* a lista flutuante */
.dropdown-lista {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--branco);
  border: 1px solid rgba(0, 0, 255, 0.3);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dropdown.is-aberto .dropdown-lista {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.8rem;
  border-radius: 9px;
  font-size: 0.92rem;
  color: var(--preto);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.dropdown-opcao:not(.is-selecionada):hover,
.dropdown-opcao:focus-visible {
  outline: none;
  background: rgba(0, 0, 255, 0.06);
}

/* item selecionado: realce azul claro + check (como na referência) */
.dropdown-opcao.is-selecionada {
  background: var(--azul-12);
  color: var(--azul);
  font-weight: 600;
}

.dropdown-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.dropdown-opcao.is-selecionada .dropdown-check {
  opacity: 1;
}

.campo-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}

@media (max-width: 560px) {
  .campo-duplo {
    grid-template-columns: 1fr;
  }
}

.form-nota {
  font-size: 0.85rem;
  color: var(--preto-45);
  line-height: 1.5;
}

.form .btn {
  justify-content: center;
  width: 100%;
}

.form-aviso {
  display: none;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--azul);
  border-radius: 12px;
  background: var(--azul-12);
  font-size: 0.92rem;
  font-weight: 500;
}

.form-aviso.is-visivel {
  display: block;
  animation: subir 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --------------------------------------------------------------------------
   Formulário em azul-marinho (navy) — card navy com campos translúcidos e
   texto claro. O azul royal segue só como acento; o botão inverte para branco.
   -------------------------------------------------------------------------- */

.form {
  background: var(--navy);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--branco);
  box-shadow: 0 24px 60px rgba(12, 42, 69, 0.4);
}

.form .campo label {
  color: var(--branco);
}

.form .campo input,
.form .campo textarea,
.form .dropdown-botao {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--branco);
}

.form .dropdown-valor {
  color: var(--branco);
}

.form ::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form .campo input:hover,
.form .campo textarea:hover,
.form .dropdown-botao:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

/* foco: acento azul (claro o bastante para ler sobre o navy) */
.form .campo input:focus,
.form .campo textarea:focus,
.form .dropdown-botao:focus-visible,
.form .dropdown.is-aberto .dropdown-botao {
  border-color: #4d7fff;
  box-shadow: 0 0 0 4px rgba(77, 127, 255, 0.22);
}

.form .dropdown-seta {
  color: rgba(255, 255, 255, 0.6);
}

.form .dropdown.is-aberto .dropdown-seta {
  color: #4d7fff;
}

/* lista do dropdown: popup escuro combinando com o form navy */
.form .dropdown-lista {
  background: var(--navy-claro);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.form .dropdown-opcao {
  color: var(--branco);
}

.form .dropdown-opcao:not(.is-selecionada):hover,
.form .dropdown-opcao:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.form .dropdown-opcao.is-selecionada {
  background: rgba(77, 127, 255, 0.22);
  color: var(--branco);
}

/* botão de envio invertido: branco com texto navy */
.form .btn-primario {
  background: var(--branco);
  color: var(--navy);
  box-shadow: none;
}

.form .btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.form .form-nota {
  color: rgba(255, 255, 255, 0.55);
}

.form .form-aviso {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--branco);
}

/* Rede de segurança do envio: aparece depois do submit com a mensagem
   montada, o atalho de WhatsApp e o botão de copiar. Fica dentro do card
   navy, então herda o contraste claro. */
.form-saida {
  padding: 1.4rem;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  animation: subir 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.form-saida[hidden] {
  display: none;
}

.form-saida-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  color: var(--branco);
}

.form-saida-texto {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1.2rem;
}

.form-saida-acoes {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

@media (min-width: 520px) {
  /* o rótulo do WhatsApp é mais longo: sobra um pouco mais de coluna para
     ele, senão quebra em duas linhas e desalinha o par de botões */
  .form-saida-acoes {
    grid-template-columns: 1.15fr 1fr;
  }
}

.form-saida .btn {
  padding: 0.95rem 1.25rem;
  font-size: 0.93rem;
}

/* o secundário do card navy precisa de borda clara para existir */
.form-saida .btn-secundario {
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--branco);
}

.form-saida .btn-secundario:hover {
  border-color: var(--branco);
  color: var(--branco);
  background: rgba(255, 255, 255, 0.08);
}

.form-saida-corpo {
  width: 100%;
  resize: vertical;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Contato — canais (WhatsApp, email, prazo, atendimento) com ícone da marca
   -------------------------------------------------------------------------- */

.contato-canais {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

/* cada canal é um card flutuante: borda que vira azul e sobe no hover */
.contato-canais li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--preto-12);
  border-radius: 16px;
  /* preenchimento de aço — mesma linguagem de card do site, tira o "branco demais" */
  background: var(--cinza-prata);
  background: var(--branco);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease, box-shadow 0.4s ease;
}

.contato-canais li:hover {
  transform: translateY(-3px);
  border-color: rgba(12, 42, 69, 0.4);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.07);
}

/* ícones do contato em navy (combinando com o formulário), não em azul royal */
.contato-canais .ico-caixa {
  flex-shrink: 0;
  background: rgba(12, 42, 69, 0.1);
  color: var(--navy);
}

/* no hover do card, a caixa do ícone acende em navy sólido */
.contato-canais li:hover .ico-caixa {
  background: var(--navy);
  color: var(--branco);
}

.contato-canal-rotulo {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--preto-70);
  margin-bottom: 0.15rem;
}

/* canais clicáveis (WhatsApp, email) ganham destaque azul */
.contato-canais a {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.25s ease;
}

.contato-canais a:hover {
  color: var(--preto);
}

/* canais informativos (prazo, atendimento) ficam em preto */
.contato-canal-valor {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--preto);
}

/* rótulo "Fale com a gente" em navy (não azul royal), casando com o form */
.contato-lado .secao-rotulo {
  color: var(--navy);
}

/* linha de apoio curta em cada canal — dá corpo à coluna */
.contato-canal-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--preto-70);
}

/* --------------------------------------------------------------------------
   FAQ — acordeão nativo (<details>/<summary>), sem JS.
   O sinal "+" gira 45° virando "×" quando o item abre.
   -------------------------------------------------------------------------- */

.faq {
  max-width: 760px;
  margin: 2.6rem auto 0;
  display: grid;
  gap: 0.9rem;
}

.faq-item {
  border: 1px solid var(--preto-12);
  border-radius: 16px;
  background: var(--branco);
  transition: border-color 0.25s ease;
}

.faq-item:hover {
  border-color: rgba(0, 0, 0, 0.25);
}

.faq-item[open] {
  border-color: rgba(0, 0, 255, 0.3);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--preto);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: none;
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--azul-12);
}

.faq-sinal {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--azul);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item[open] .faq-sinal {
  transform: rotate(45deg);
}

.faq-corpo {
  padding: 0 1.4rem 1.25rem;
  color: rgba(0, 0, 0, 0.7);
  font-size: 1rem;
  line-height: 1.6;
}

.faq-corpo p {
  margin: 0;
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-sinal {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */

.cta-final {
  text-align: center;
}

.cta-final .secao-titulo {
  max-width: none;
  margin-inline: auto;
  margin-bottom: 2rem;
}

/* Em fundo preto o botão continua azul com texto branco. O texto branco
   sobre o azul tem contraste de sobra; o que faltava era o azul se
   destacar do preto — resolvido com contorno claro e brilho. */
.secao-escura .btn-primario {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 14px 40px rgba(0, 0, 255, 0.55);
}

.secao-escura .btn-primario:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 20px 56px rgba(0, 0, 255, 0.8);
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  padding-block: 4.5rem;
  /* fundo preto: fecha o site no escuro, fluindo do bloco de metal acima */
  background: var(--preto);
  font-size: 0.9rem;
  color: var(--branco-70);
}

.rodape-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

/* bordão da marca — maior e no cromado prata (assinatura premium em fundo
   escuro). O degradê é recortado no texto, por isso inline-block hugueia a caixa */
.rodape-assinatura {
  display: inline-block;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  background: var(--prata-cromo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Lockup do rodapé — símbolo cromado + nome grande.
   O rodapé é preto, então vale a regra do menu escuro: símbolo cromado
   (logo-marca.png) e o ponto da marca em prata, nunca em azul (azul royal
   sobre preto é ilegível). */
.rodape-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  color: var(--branco);
  text-decoration: none;
}

.rodape-simbolo {
  width: clamp(58px, 8vw, 88px);
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform var(--transicao);
}

.rodape-lockup:hover .rodape-simbolo {
  transform: scale(1.05) rotate(-3deg);
}

.rodape-nome {
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

.rodape-nome .ponto {
  color: var(--prata);
}

.rodape-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rodape-links a:hover {
  color: var(--branco);
}

/* --------------------------------------------------------------------------
   Barra de progresso de leitura
   -------------------------------------------------------------------------- */

.progresso {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 101;
}

/* --------------------------------------------------------------------------
   Manifesto — palavras que acendem conforme a página rola
   -------------------------------------------------------------------------- */

.manifesto {
  padding-block: clamp(6rem, 16vw, 12rem);
}

.manifesto-texto {
  font-size: clamp(1.8rem, 5.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.035em;
  max-width: 22ch;
}

.manifesto-texto .p {
  color: var(--preto-12);
  transition: color 0.25s ease;
}

.manifesto-texto .p.on {
  color: var(--preto);
}

.manifesto-texto .p.dest.on {
  color: var(--azul);
}

/* --------------------------------------------------------------------------
   Demonstração — navegador que troca de dispositivo
   -------------------------------------------------------------------------- */

.demo {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* título em coluna estreita: menor, para não quebrar deixando buraco */
.demo .secao-titulo {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  max-width: 15ch;
}

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

.demo-controles {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--branco-15);
  border-radius: 100px;
  margin-top: 2rem;
}

.demo-btn {
  padding: 0.55rem 1.15rem;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--branco-70);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.demo-btn.is-ativo {
  background: var(--azul);
  color: var(--branco);
}

.demo-palco {
  display: grid;
  place-items: center;
  min-height: 440px;
  /* Profundidade para o reveal 3D — a tela entra tombada, se endireita no
     meio do percurso e volta a tombar ao sair (iniciarReveal3d no script.js).

     A perspectiva é curta de propósito: nos modos Tablet e Celular o card
     fica bem mais estreito (400px e 250px de max-width), e com perspectiva
     longa o mesmo ângulo quase não se percebe num card pequeno. */
  perspective: 1150px;
}

.demo-palco .navegador {
  /* origem no centro: o tombamento precisa ser simétrico, porque agora ele
     acontece para os dois lados (para trás ao entrar, para frente ao sair) */
  transform-origin: 50% 50%;
  will-change: transform;
  transition: max-width var(--transicao);
}

/* sem movimento: a tela nasce reta, sem rotação nenhuma */
@media (prefers-reduced-motion: reduce) {
  .demo-palco .navegador {
    transform: none !important;
    will-change: auto;
  }
}

.navegador {
  width: 100%;
  max-width: 620px;
  /* moldura de aço esfumaçado (mesmo tom dos cards de sócio/avaliação):
     brilho de canto sobre --cinza-prata. A tela branca fica por dentro,
     como um aparelho de metal exibindo o site. */
  background: radial-gradient(
      120% 90% at 22% 12%,
      rgba(255, 255, 255, 0.55),
      transparent 58%
    ),
    var(--cinza-prata);
  padding: 12px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition: max-width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.navegador[data-modo="tablet"] {
  max-width: 400px;
}

.navegador[data-modo="celular"] {
  max-width: 250px;
}

.navegador-barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: var(--preto-06);
  border-bottom: 1px solid var(--preto-12);
  /* topo da "tela" branca por dentro da moldura de aço */
  border-radius: 10px 10px 0 0;
}

.navegador-bolinha {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--preto-12);
}

.navegador-url {
  flex: 1;
  margin-left: 0.5rem;
  padding: 0.28rem 0.7rem;
  background: var(--branco);
  border-radius: 100px;
  font-size: 0.7rem;
  color: var(--preto-45);
  border: 1px solid var(--preto-12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navegador-tela {
  padding: clamp(1.2rem, 3vw, 2.2rem);
  color: var(--preto);
  min-height: 300px;
  /* fundo branco explícito: agora que a moldura é prata, a "tela" precisa
     manter o branco por conta própria */
  background: var(--branco);
  border-radius: 0 0 10px 10px;
}

.navegador-tela .n-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 0.7rem;
}

.navegador-tela .n-titulo {
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 0.7rem;
}

.navegador-tela .n-linha {
  height: 7px;
  border-radius: 4px;
  background: var(--preto-06);
  margin-bottom: 0.5rem;
}

.navegador-tela .n-linha.curta {
  width: 55%;
}

.navegador-tela .n-botao {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  background: var(--azul);
  color: var(--branco);
  font-size: 0.72rem;
  font-weight: 600;
}

.navegador-tela .n-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.navegador[data-modo="celular"] .n-grade {
  grid-template-columns: 1fr;
}

.navegador-tela .n-bloco {
  height: 54px;
  border-radius: 8px;
  border: 1px solid var(--preto-12);
}

/* --------------------------------------------------------------------------
   Exemplos de layout — três mockups CODADOS (HTML/CSS), não imagens.
   Reaproveita o componente .navegador. Tudo na paleta da marca.
   -------------------------------------------------------------------------- */

/* "Exemplos de layout" + "Como trabalhamos" = um bloco escuro contínuo:
   o respiro entre eles é reduzido para lerem como uma seção só */
#exemplos {
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

#processo {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

/* palavra de destaque do título de exemplos num azul mais apagado, menos
   chamativo sobre o fundo escuro (só aqui — não mexe no azul da marca) */
#exemplos .secao-titulo em {
  color: #7c8ac9;
}

.exemplos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: start;
}

.exemplo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* no grid o mockup ocupa a coluna toda. Sombra funda + fio claro de contorno
   para saltar sobre o fundo escuro animado da seção. */
.exemplo .navegador {
  max-width: none;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.exemplo:hover .navegador {
  transform: translateY(-5px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.exemplo .navegador-tela {
  min-height: 240px;
}

/* barra de endereço em "modo código": fundo preto + fonte monoespaçada, para
   reforçar que é um HTML/mini-site codado. (Exceção pontual à fonte única
   Inter — só nesta barrinha de exemplo, mimetizando um terminal/navegador.) */
.exemplo .navegador-url {
  background: var(--preto);
  color: var(--prata-claro);
  border-color: var(--branco-15);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
    Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0;
}

/* os três pontinhos do navegador em preto (sobre a barra clara) */
.exemplo .navegador-bolinha {
  background: var(--preto);
}

/* fundo (tela) de cada mockup diferente: 1 branco (padrão), 2 cinza escuro,
   3 preto (.navegador-tela--dark). No tema cinza o texto vira claro. */
.navegador-tela--cinza {
  /* aço escovado escuro: degradê metálico na paleta de prata, com bandas
     mais claras simulando reflexo — mantém texto branco legível */
  background: linear-gradient(
    150deg,
    #2a2f37 0%,
    #464e59 24%,
    #21252c 48%,
    #3d444f 72%,
    #262b32 100%
  );
  color: var(--branco);
}

.navegador-tela--cinza .n-eyebrow {
  color: var(--prata);
}

.navegador-tela--cinza .n-titulo {
  color: var(--branco);
}

.navegador-tela--cinza .n-foto {
  border-color: var(--branco-15);
}

/* nome (eyebrow) do mockup institucional em cinza prata, não azul */
.exemplo:first-child .n-eyebrow {
  color: var(--prata-escuro);
}

.exemplo figcaption {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--branco-70);
  text-align: center;
}

/* variante portfólio: grade de "fotos" prateadas (thumbnails) */
.n-galeria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
}

.n-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--preto-12);
  overflow: hidden;
  background: var(--cinza-prata);
}

/* brilho de canto para o thumbnail não ficar chapado (lê como "foto") */
.n-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 25% 15%,
    rgba(255, 255, 255, 0.5),
    transparent 55%
  );
}

/* cada quadrinho vira um "projeto" diferente — só com a paleta da marca */
.n-foto:nth-child(2) {
  background: radial-gradient(
    120% 120% at 30% 22%,
    rgba(0, 0, 255, 0.7),
    rgba(0, 0, 255, 0.15) 45%,
    #05070d 78%
  );
  border-color: var(--branco-15);
}

.n-foto:nth-child(3) {
  background: linear-gradient(155deg, #05070d, #171b23);
  border-color: var(--branco-15);
}

.n-foto:nth-child(4) {
  background: linear-gradient(155deg, #e6ebf1, #c3ccd6 55%, #f2f5f8);
}

/* mesmos "thumbnails" variados nos 3 blocos do mockup institucional
   (só o primeiro exemplo — não mexe no "Veja funcionando" nem no dark) */
.exemplo:first-child .n-bloco {
  position: relative;
  overflow: hidden;
  background: var(--cinza-prata);
}

.exemplo:first-child .n-bloco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 25% 15%,
    rgba(255, 255, 255, 0.5),
    transparent 55%
  );
}

.exemplo:first-child .n-bloco:nth-child(2) {
  background: radial-gradient(
    120% 120% at 30% 22%,
    rgba(0, 0, 255, 0.7),
    rgba(0, 0, 255, 0.15) 45%,
    #05070d 78%
  );
  border-color: var(--branco-15);
}

.exemplo:first-child .n-bloco:nth-child(3) {
  background: linear-gradient(155deg, #05070d, #171b23);
  border-color: var(--branco-15);
}

/* variante dark: tela preta, texto claro, destaque em prata */
.navegador-tela--dark {
  background: var(--preto);
  color: var(--branco);
}

.navegador-tela--dark .n-eyebrow {
  color: var(--prata);
}

.navegador-tela--dark .n-linha {
  background: var(--branco-15);
}

/* blocos do mockup dark: fills claros que se destacam no preto —
   prata, branco e azul ("roxinho"); nada de preto, que sumiria no fundo */
.navegador-tela--dark .n-bloco {
  position: relative;
  overflow: hidden;
  border-color: var(--branco-15);
  background: var(--cinza-prata);
}

.navegador-tela--dark .n-bloco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 25% 15%,
    rgba(255, 255, 255, 0.5),
    transparent 55%
  );
}

/* quadradinho do meio do landing: um rosé, para variar (cor de "cliente
   diferente" — fora da paleta da marca de propósito, só neste mockup) */
.navegador-tela--dark .n-bloco:nth-child(2) {
  background: radial-gradient(
    120% 120% at 30% 22%,
    rgba(255, 170, 205, 0.92),
    rgba(228, 120, 170, 0.4) 45%,
    #2a1020 82%
  );
}

.navegador-tela--dark .n-bloco:nth-child(3) {
  background: radial-gradient(
    120% 120% at 30% 22%,
    rgba(0, 0, 255, 0.9),
    rgba(0, 0, 255, 0.3) 45%,
    #0a1130 82%
  );
}

/* --------------------------------------------------------------------------
   Botão flutuante de WhatsApp
   -------------------------------------------------------------------------- */

.whatsapp {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem 0.85rem 1.05rem;
  background: var(--azul);
  color: var(--branco);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 14px 34px rgba(0, 0, 255, 0.28);
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.whatsapp.is-visivel {
  opacity: 1;
  transform: none;
}

.whatsapp:hover {
  box-shadow: 0 20px 46px rgba(0, 0, 255, 0.42);
  transform: translateY(-3px);
}

.whatsapp svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: currentColor;
}

/* pulso suave para chamar atenção sem ser agressivo */
.whatsapp::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  border: 1.5px solid var(--branco);
  opacity: 0;
  animation: pulsoWhats 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes pulsoWhats {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

/* no celular vira só o ícone, para não cobrir conteúdo */
@media (max-width: 620px) {
  .whatsapp {
    padding: 0.9rem;
    border-radius: 50%;
  }

  .whatsapp span {
    display: none;
  }

  .whatsapp::before {
    left: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   Acessibilidade
   -------------------------------------------------------------------------- */

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.8rem 1.2rem;
  background: var(--azul);
  color: var(--branco);
  border-radius: 0 0 8px 0;
}

.pular-para-conteudo:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }

  .palavra {
    opacity: 1;
    transform: none;
  }
}