/* ==========================================================================
   WebdbSolution — folha de estilo principal
   Paleta derivada do azul do logotipo: #0F60C4
   Mobile first. Nada de dourado, nada de serifa editorial.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Azuis da marca */
  --azul:        #0F60C4;
  --azul-vivo:   #2B7BE0;
  --azul-claro:  #5B9BEC;
  --azul-fundo:  #0A4590;
  --azul-glow:   rgba(43, 123, 224, .45);

  /* Tintas escuras — azuladas, nunca preto puro */
  --tinta:       #050B16;
  --tinta-2:     #08111F;
  --tinta-3:     #0D1A2D;
  --tinta-card:  #101F36;

  /* Neutros */
  --grafite:     #343A42;
  --cinza:       #6B7891;
  --cinza-claro: #9AA7BC;
  --nuvem:       #F4F7FC;
  --nuvem-2:     #E9EFF8;
  --branco:      #FFFFFF;

  /* Linhas e véus */
  --linha-escura: rgba(91, 155, 236, .14);
  --linha-clara:  rgba(15, 96, 196, .14);

  /* Tipografia */
  --ff-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --ff-texto:   'Inter', system-ui, -apple-system, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Forma */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 100px;

  /* Ritmo */
  --gutter: 20px;
  --max: 1240px;
  --secao-y: clamp(60px, 7.5vw, 104px);

  /* Movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .5s;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* o header fixo não cobre mais os títulos */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ff-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grafite);
  background: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 6.2vw, 4.1rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4.4vw, 3.05rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
p  { margin: 0; text-wrap: pretty; }

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

::selection { background: var(--azul); color: #fff; }

/* --- Utilitários -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao-y); position: relative; }

.secao--escura {
  background: var(--tinta);
  color: var(--nuvem);
}
.secao--escura h1, .secao--escura h2, .secao--escura h3 { color: var(--branco); }

.secao--clara { background: var(--nuvem); }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--azul);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* Etiqueta de seção — o traço + caixa alta espaçada */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 18px;
}
.etiqueta::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.secao--escura .etiqueta { color: var(--azul-claro); }

/* Palavra em destaque dentro dos títulos */
.realce { color: var(--azul); }
.secao--escura .realce { color: var(--azul-claro); }

.intro {
  max-width: 54ch;
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  color: var(--cinza);
  margin-top: 20px;
}
.secao--escura .intro { color: var(--cinza-claro); }

.cabecalho-secao { max-width: 62ch; margin-bottom: clamp(40px, 6vw, 64px); }

/* Cabeçalho em duas colunas: título à esquerda, apoio à direita.
   Aproveita a largura em vez de empilhar texto sob um título grande. */
.cabecalho-secao--duplo { max-width: none; }
.cabecalho-secao--duplo .intro { max-width: 46ch; }
.intro p + p { margin-top: 14px; }

/* Quando o texto de apoio tem vários parágrafos, alinhar pelo topo e
   descer até a altura do título — alinhar pela base jogaria o título
   lá para baixo. */
.cabecalho-secao--duplo--topo .intro { margin-top: 20px; }

/* --- Botões ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  font-family: var(--ff-texto);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn .seta { transition: transform var(--dur) var(--ease); flex: none; }
.btn:hover .seta { transform: translateX(5px); }

.btn--primario {
  background: var(--azul);
  color: #fff;
  box-shadow: 0 10px 28px -12px var(--azul-glow);
}
.btn--primario:hover {
  background: var(--azul-vivo);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px var(--azul-glow);
}

.btn--contorno {
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, .04);
}
.btn--contorno:hover {
  border-color: var(--azul-claro);
  background: rgba(43, 123, 224, .14);
  transform: translateY(-2px);
}

.btn--contorno-escuro {
  border: 1px solid var(--linha-clara);
  color: var(--azul);
  background: transparent;
}
.btn--contorno-escuro:hover {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
  transform: translateY(-2px);
}

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

/* Link com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--azul);
}
.link-seta .seta { transition: transform var(--dur) var(--ease); }
.link-seta:hover .seta { transform: translateX(5px); }
.secao--escura .link-seta { color: var(--azul-claro); }

/* --- Padrões técnicos de fundo ------------------------------------------ */
.malha {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--linha-escura) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha-escura) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity: .55;
}

.brilho {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .5;
}

/* Anéis concêntricos — a assinatura do símbolo da marca */
.aneis {
  position: absolute;
  pointer-events: none;
  color: var(--azul-claro);
  opacity: .42;
  filter: drop-shadow(0 0 26px rgba(43, 123, 224, .45));
}
.aneis svg { width: 100%; height: auto; overflow: visible; stroke-width: 1.4; }

/* O "W" do símbolo como marca d'água no miolo dos anéis */
.aneis__w {
  position: absolute;
  top: 50%; left: 50%;
  /* o círculo mais interno dos anéis tem r=118 num viewBox de 400, ou seja
     59% da largura — 52% deixa o W quase encostando nele */
  width: 52%;
  transform: translate(-50%, -50%);
  opacity: .1;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(43, 123, 224, .5));
}
.aneis .anel-gira    { transform-origin: 50% 50%; animation: gira 30s linear infinite; }
.aneis .anel-gira-r  { transform-origin: 50% 50%; animation: gira 22s linear infinite reverse; }

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

/* --- Cabeçalho ---------------------------------------------------------- */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 16px;
  transition: transform .45s var(--ease), background-color .35s ease,
              box-shadow .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.topo.is-fixo {
  background: rgba(5, 11, 22, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linha-escura);
  padding-block: 11px;
}
.topo.is-oculto { transform: translateY(-105%); }

.marca { display: flex; align-items: center; flex: none; }
.marca img { height: 76px; width: auto; transition: height .35s ease; }
.topo.is-fixo .marca img { height: 52px; }

.menu { display: none; }

.menu__link {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  padding-block: 6px;
  transition: color .3s ease;
}
.menu__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--azul-claro);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.menu__link:hover, .menu__link[aria-current="page"] { color: #fff; }
.menu__link:hover::after, .menu__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.topo__acao { display: none; }

/* Botão hambúrguer */
.hamburguer {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  gap: 5px;
  flex: none;
  border-radius: var(--r-sm);
}
.hamburguer span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s ease;
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Painel mobile */
.painel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--tinta);
  padding: 104px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .55s var(--ease), visibility .55s;
  overflow-y: auto;
}
.painel.is-aberto { transform: translateY(0); visibility: visible; }
.painel__link {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  padding-block: 14px;
  border-bottom: 1px solid var(--linha-escura);
}
.painel__link:hover { color: var(--azul-claro); }
.painel .btn { margin-top: 28px; }

/* Barra de progresso de leitura */
.progresso {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--azul), var(--azul-claro));
  z-index: 101;
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 132px 96px;
  background: var(--tinta);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__fundo {
  position: absolute;
  inset: -14% 0 0 0;
  height: 128%;
  z-index: -2;
  will-change: transform;
}
/* a ação (laptop, mãos, documentos) está no terço superior da foto; sem
   deslocar o foco, um hero alto mostraria quase só a mesa vazia */
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 26%; }
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, var(--tinta) 8%, rgba(5, 11, 22, .92) 38%, rgba(5, 11, 22, .55) 70%, rgba(10, 69, 144, .35) 100%),
    linear-gradient(to top, var(--tinta) 2%, transparent 42%);
}
.hero .malha { z-index: -1; opacity: .4; }
.hero .aneis {
  width: min(760px, 92vw);
  right: -6%;
  top: 46%;
  transform: translateY(-50%);
  z-index: -1;
  opacity: .6;
}
.hero__brilho {
  width: 520px; height: 520px;
  background: var(--azul);
  top: 8%; right: 4%;
  opacity: .3;
  z-index: -1;
}

.hero__conteudo { max-width: 820px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .realce {
  color: var(--azul-claro);
  display: inline-block;
}
.hero__texto {
  max-width: 50ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: rgba(234, 241, 252, .76);
  margin-bottom: 36px;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Faixa de números --------------------------------------------------- */
.numeros {
  position: relative;
  z-index: 3;
  background: var(--branco);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -40px rgba(5, 11, 22, .45);
  margin-top: -56px;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
}
.numero { text-align: center; }
.numero__valor {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--azul);
  display: block;
}
.numero__rotulo {
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  color: var(--cinza);
  line-height: 1.4;
}

/* --- Faixa de pilares (invade o hero) ----------------------------------- */
.pilares {
  position: relative;
  z-index: 3;
  background: var(--branco);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -40px rgba(5, 11, 22, .45);
  margin-top: -56px;
  padding: clamp(26px, 3.4vw, 36px) clamp(14px, 2.2vw, 24px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 6px;
}
.pilar {
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  gap: 11px;
  padding-inline: 12px;
  transition: transform .45s var(--ease);
}
.pilar:hover { transform: translateY(-4px); }
.pilar__icone {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(15, 96, 196, .08);
  border: 1px solid var(--linha-clara);
  color: var(--azul);
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .45s var(--ease);
}
.pilar:hover .pilar__icone {
  background: var(--azul);
  color: #fff;
  transform: scale(1.06) rotate(-4deg);
}
.pilar__nome {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .97rem;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.pilar__texto { font-size: .79rem; color: var(--cinza); line-height: 1.45; max-width: 23ch; }

/* --- Bloco dividido (imagem + texto) ------------------------------------ */
.dividido {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
/* o visual não corta — quem corta é a mídia, para o cartão poder invadir */
.dividido__visual { position: relative; }

.dividido__midia {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.dividido__midia img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.1s var(--ease);
}
.dividido:hover .dividido__midia img { transform: scale(1); }
.dividido__midia::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(15, 96, 196, .28), transparent 55%);
  pointer-events: none;
}

/* Cartão que invade a imagem */
.cartao-flutuante {
  position: relative;
  margin: -46px 16px 0 16px;
  background: var(--azul);
  color: #fff;
  border-radius: var(--r-md);
  padding: 22px 24px;
  box-shadow: 0 24px 50px -28px rgba(15, 96, 196, .8);
  z-index: 2;
}
.cartao-flutuante strong {
  font-family: var(--ff-display);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.03em;
  display: block;
  line-height: 1;
}
.cartao-flutuante span {
  font-size: .82rem;
  opacity: .82;
  display: block;
  margin-top: 6px;
}

/* Variante com duas afirmações separadas por um fio */
.cartao-flutuante--duplo { display: grid; gap: 11px; }
.cartao-flutuante--duplo span {
  font-family: var(--ff-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  opacity: 1;
  margin: 0;
}
.cartao-flutuante--duplo span + span {
  border-top: 1px solid rgba(255, 255, 255, .3);
  padding-top: 11px;
}

.corpo-texto { color: var(--cinza); display: grid; gap: 16px; margin-top: 20px; }
.secao--escura .corpo-texto { color: var(--cinza-claro); }
.corpo-texto + .btn, .corpo-texto + .link-seta { margin-top: 30px; }

/* --- Grade de serviços -------------------------------------------------- */
.grade-servicos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.servico {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 26px 26px;
  border-radius: var(--r-md);
  background: var(--tinta-card);
  border: 1px solid var(--linha-escura);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
/* linha de varredura no topo do card */
.servico::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--azul-claro), transparent);
  transform: scaleX(0);
  transition: transform .7s var(--ease);
}
.servico:hover {
  transform: translateY(-5px);
  border-color: rgba(91, 155, 236, .4);
  background: #13263F;
}
.servico:hover::before { transform: scaleX(1); }

.servico__icone {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(43, 123, 224, .14);
  color: var(--azul-claro);
  border: 1px solid var(--linha-escura);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.servico:hover .servico__icone {
  background: var(--azul);
  color: #fff;
  transform: scale(1.06) rotate(-4deg);
}
.servico__num {
  position: absolute;
  top: 24px; right: 26px;
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: rgba(154, 167, 188, .4);
}
.servico h3 { color: #fff; }
.servico p { font-size: .92rem; color: var(--cinza-claro); flex: 1; }
.servico .link-seta { margin-top: 4px; }

/* --- Processo ----------------------------------------------------------- */
.etapas {
  display: grid;
  gap: 2px;
  background: var(--linha-clara);
  border-radius: var(--r-md);
  overflow: hidden;
}
.etapa {
  background: var(--branco);
  padding: 30px 26px;
  position: relative;
  transition: background-color var(--dur) var(--ease);
}
.etapa:hover { background: var(--nuvem); }
.etapa__num {
  font-family: var(--ff-mono);
  font-size: .76rem;
  font-weight: 500;
  color: var(--azul);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 14px;
}
.etapa h3 { font-size: 1.08rem; margin-bottom: 8px; }
.etapa p { font-size: .9rem; color: var(--cinza); }
.etapa::after {
  content: '';
  position: absolute;
  left: 26px; bottom: 0;
  width: 0; height: 2px;
  background: var(--azul);
  transition: width .6s var(--ease);
}
.etapa:hover::after { width: calc(100% - 52px); }

/* --- Equipe ------------------------------------------------------------- */
.grade-equipe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 14px;
}
.pessoa { text-align: center; }
.pessoa__foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--tinta-3);
}
.pessoa__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transform: scale(1.02);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}
/* duotone azul — unifica fotos de origens diferentes */
.pessoa__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(15, 96, 196, .62), rgba(5, 11, 22, .72));
  mix-blend-mode: color;
  transition: opacity .6s var(--ease);
}
.pessoa__foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(5, 11, 22, .5), transparent 55%);
  transition: opacity .6s var(--ease);
}
.pessoa { cursor: pointer; }
.pessoa:hover .pessoa__foto img,
.pessoa:focus .pessoa__foto img,
.pessoa.is-aberta .pessoa__foto img { filter: grayscale(.15) contrast(1.02); transform: scale(1.07); }

.pessoa:hover .pessoa__foto::after,
.pessoa:focus .pessoa__foto::after,
.pessoa.is-aberta .pessoa__foto::after { opacity: .25; }

.pessoa h3 { font-size: 1rem; margin-bottom: 2px; }
.pessoa__cargo {
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul);
  display: block;
}
.secao--escura .pessoa__cargo { color: var(--azul-claro); }
.pessoa__cargo--alt { color: var(--cinza); margin-top: 2px; }
.secao--escura .pessoa__cargo--alt { color: var(--cinza-claro); opacity: .75; }

/* A bio vive dentro da foto e só aparece no hover, no foco pelo teclado
   ou no toque — no celular o próprio card alterna com um toque. */
.pessoa__bio {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  margin: 0;
  padding: 15px 14px 14px;
  font-size: .76rem;
  line-height: 1.48;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(5, 11, 22, .97) 25%, rgba(5, 11, 22, .86) 65%, transparent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.pessoa:hover .pessoa__bio,
.pessoa:focus .pessoa__bio,
.pessoa:focus-within .pessoa__bio,
.pessoa.is-aberta .pessoa__bio { opacity: 1; transform: none; }

/* Sinal discreto de que há algo a ver */
.pessoa__mais {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(5, 11, 22, .55);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: opacity .35s ease, transform .45s var(--ease), background-color .35s ease;
}
.pessoa:hover .pessoa__mais,
.pessoa:focus .pessoa__mais,
.pessoa.is-aberta .pessoa__mais {
  background: var(--azul);
  border-color: var(--azul);
  transform: rotate(135deg);
}

/* --- FAQ ---------------------------------------------------------------- */
.faq-lista { display: grid; gap: 10px; max-width: 880px; }
.faq-item {
  border: 1px solid var(--linha-clara);
  border-radius: var(--r-md);
  background: var(--branco);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-item.is-aberto {
  border-color: rgba(15, 96, 196, .32);
  box-shadow: 0 16px 40px -28px rgba(15, 96, 196, .6);
}
.faq-botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  text-align: left;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--tinta);
  transition: color .3s ease;
}
.faq-botao:hover { color: var(--azul); }
.faq-sinal {
  position: relative;
  width: 20px; height: 20px;
  flex: none;
}
.faq-sinal::before, .faq-sinal::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: var(--azul);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease);
}
.faq-sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-aberto .faq-sinal::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.faq-item.is-aberto .faq-resposta { grid-template-rows: 1fr; }
.faq-resposta > div { overflow: hidden; }
.faq-resposta p {
  padding: 0 22px 22px;
  font-size: .94rem;
  color: var(--cinza);
}

/* --- Blog --------------------------------------------------------------- */
.grade-blog { display: grid; gap: 20px; }
.artigo {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--linha-clara);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.artigo:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 54px -32px rgba(5, 11, 22, .4);
}
.artigo__capa { aspect-ratio: 16 / 10; overflow: hidden; }
.artigo__capa img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.artigo:hover .artigo__capa img { transform: scale(1.06); }
.artigo__corpo { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.artigo__tag {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul);
}
/* na listagem o título do card é h2 (o h1 é o da página); aqui o tamanho
   acompanha o cartão, não a hierarquia */
.artigo h2, .artigo h3 { font-size: 1.1rem; line-height: 1.25; }
.artigo p { font-size: .9rem; color: var(--cinza); flex: 1; }

/* --- Instagram ---------------------------------------------------------- */
.insta-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.insta-item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tinta-card);
  border: 1px solid var(--linha-escura);
}
.insta-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.insta-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 11, 22, .76), transparent 55%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.insta-item__marca {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(5, 11, 22, .6);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  backdrop-filter: blur(5px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .4s ease;
}
.insta-item:hover img { transform: scale(1.07); }
.insta-item:hover::after { opacity: 1; }
.insta-item:hover .insta-item__marca {
  opacity: 1;
  transform: none;
  background: var(--azul);
  border-color: var(--azul);
}
.insta-perfil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-weight: 600;
  font-size: .94rem;
  color: var(--azul-claro);
}
.insta-perfil svg { flex: none; }
.insta-perfil:hover { color: #fff; }

/* --- Carrossel (só no celular) ------------------------------------------
   Rolagem nativa com encaixe, sem biblioteca: no toque fica fluido e no
   desktop a mesma marcação volta a ser grade. */
.carrossel-pontos { display: none; }

@media (max-width: 759px) {
  .rolavel {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-bottom: 4px;
    gap: 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .rolavel::-webkit-scrollbar { display: none; }
  .rolavel > * {
    flex: 0 0 min(300px, 78%);
    scroll-snap-align: start;
  }
  /* a equipe cabe mais estreita */
  .grade-equipe.rolavel > * { flex: 0 0 min(210px, 56%); }
  .insta-grade.rolavel > * { flex: 0 0 min(220px, 60%); }

  /* as etapas perdem o fio divisor e viram cartões soltos */
  .etapas.rolavel {
    background: none;
    border-radius: 0;
    overflow-x: auto;
  }
  .etapas.rolavel .etapa {
    border: 1px solid var(--linha-clara);
    border-radius: var(--r-md);
  }

  .carrossel-pontos {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
  }
  .ponto {
    position: relative;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--linha-clara);
    border: 0;
    padding: 0;
    transition: width .35s var(--ease), background-color .35s ease;
  }
  /* o ponto é pequeno de propósito, mas a área de toque não pode ser */
  .ponto::after {
    content: '';
    position: absolute;
    inset: -15px -8px;
  }
  .secao--escura .ponto { background: rgba(91, 155, 236, .28); }
  .ponto.is-ativo { width: 22px; border-radius: 4px; background: var(--azul); }
  .secao--escura .ponto.is-ativo { background: var(--azul-claro); }

  /* dica visual de que dá para arrastar */
  .arrastar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cinza);
    margin-bottom: 16px;
  }
  .secao--escura .arrastar { color: var(--cinza-claro); }
}

@media (min-width: 760px) {
  .arrastar { display: none; }
}

/* --- Chamada final ------------------------------------------------------ */
.chamada {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--tinta);
  color: #fff;
}
.chamada { border-top: 1px solid var(--linha-escura); }
.chamada__fundo { position: absolute; inset: 0; z-index: -2; }
.chamada__fundo img { width: 100%; height: 100%; object-fit: cover; }

/* Véu só na horizontal, sem componente vertical: um degradê de cima para
   baixo criava uma faixa intermediária e a emenda com a seção anterior
   virava três tons em vez de uma troca limpa. */
.chamada__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(5, 11, 22, .97) 0%,
    rgba(5, 11, 22, .94) 52%,
    rgba(5, 11, 22, .82) 80%,
    rgba(10, 69, 144, .45) 100%);
}
.chamada .aneis {
  width: min(560px, 80vw);
  right: -14%; top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  opacity: .24;
}
.chamada__conteudo { max-width: 620px; }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Título à esquerda, apoio e botões à direita — mesmo padrão das outras
   seções, e encurta bastante a altura do bloco. */
.chamada__grade { display: grid; gap: 26px; }
.chamada__grade .intro { margin-top: 0; }

/* Cartões de contato */
.contatos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(44px, 6vw, 68px);
}
.contato {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--linha-escura);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.contato:hover {
  background: rgba(43, 123, 224, .13);
  border-color: rgba(91, 155, 236, .4);
  transform: translateY(-3px);
}
.contato__icone {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(43, 123, 224, .16);
  color: var(--azul-claro);
}
.contato__rotulo {
  display: block;
  font-family: var(--ff-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cinza-claro);
  margin-bottom: 3px;
}
.contato__valor {
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  overflow-wrap: anywhere;
}
.contato > span:last-child { min-width: 0; }

/* --- Rodapé ------------------------------------------------------------- */
.rodape {
  background: var(--tinta-2);
  color: var(--cinza-claro);
  padding-block: clamp(56px, 7vw, 80px) 0;
  border-top: 1px solid var(--linha-escura);
}
.rodape__grade {
  display: grid;
  gap: 40px;
  padding-bottom: 48px;
}
/* width:auto é obrigatório: sem ele o max-width:100% global espreme a
   largura quando a coluna é estreita e a altura fixa deforma o logotipo */
.rodape__marca img { height: 58px; width: auto; margin-bottom: 22px; }
.rodape__sobre { font-size: .9rem; max-width: 36ch; }

.redes { display: flex; gap: 10px; margin-top: 22px; }
.rede {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--linha-escura);
  color: var(--cinza-claro);
  transition: background-color .35s ease, color .35s ease, transform .35s var(--ease),
              border-color .35s ease;
}
.rede:hover {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  transform: translateY(-3px);
}

.rodape h4 {
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
/* No celular os links do rodapé ganham área de toque de ~40px.
   No desktop voltam a ser compactos — lá o ponteiro é preciso. */
.rodape__lista { display: grid; gap: 2px; font-size: .9rem; }
.rodape__lista a {
  display: inline-block;
  padding-block: 11px;
  transition: color .3s ease, padding-left .3s var(--ease);
}
.rodape__lista a:hover { color: var(--azul-claro); padding-left: 5px; }

.rodape__base {
  border-top: 1px solid var(--linha-escura);
  padding-block: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: .82rem;
}
.rodape__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rodape__legal a { display: inline-block; padding-block: 9px; }
.rodape__legal a:hover { color: var(--azul-claro); }

/* --- Botão flutuante do WhatsApp ---------------------------------------- */
.zap {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #22c35e;
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(34, 195, 94, .6);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.zap:hover { transform: scale(1.08) translateY(-2px); }
.zap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #22c35e;
  animation: pulso 2.6s var(--ease) infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* --- Cookies ------------------------------------------------------------ */
.cookies {
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 95;
  background: rgba(8, 17, 31, .96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--linha-escura);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: none;
  gap: 16px;
  flex-direction: column;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.cookies.is-visivel { display: flex; }
.cookies p { font-size: .84rem; color: var(--cinza-claro); }
.cookies a { color: var(--azul-claro); text-decoration: underline; }
.cookies__acoes { display: flex; gap: 10px; }
.cookies .btn { padding: 11px 20px; font-size: .86rem; }

/* --- Páginas internas --------------------------------------------------- */
.hero-interno {
  position: relative;
  padding-block: 150px clamp(56px, 8vw, 92px);
  background: var(--tinta);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-interno__fundo { position: absolute; inset: 0; z-index: -2; }
.hero-interno__fundo img { width: 100%; height: 100%; object-fit: cover; }
.hero-interno__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--tinta) 14%, rgba(5, 11, 22, .93) 46%, rgba(10, 69, 144, .46) 100%);
}
.hero-interno .aneis {
  width: min(520px, 76vw);
  right: -12%; top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  opacity: .26;
}
.hero-interno__conteudo { max-width: 700px; }
.hero-interno p {
  margin-top: 20px;
  color: rgba(234, 241, 252, .76);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  max-width: 52ch;
}
.hero-interno .btn { margin-top: 32px; }

/* Trilha de navegação */
.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 22px;
}
.trilha a:hover { color: var(--azul-claro); }
.trilha span { opacity: .45; }

/* Lista de entregas */
.entregas { display: grid; gap: 12px; margin-top: 8px; }
.entrega {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--branco);
  border: 1px solid var(--linha-clara);
  font-size: .94rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.entrega:hover {
  transform: translateX(5px);
  border-color: rgba(15, 96, 196, .3);
  box-shadow: 0 16px 36px -28px rgba(15, 96, 196, .6);
}
.entrega__marca {
  width: 24px; height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15, 96, 196, .1);
  color: var(--azul);
  margin-top: 1px;
}

/* Caixa "para quem é indicado" */
.caixa-destaque {
  border-left: 3px solid var(--azul);
  background: linear-gradient(100deg, rgba(15, 96, 196, .06), transparent 70%);
  padding: 26px 28px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.caixa-destaque h3 { margin-bottom: 10px; }
.caixa-destaque p { color: var(--cinza); }

/* Cartão de conversão na lateral */
.cartao-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--tinta);
  color: var(--cinza-claro);
  border-radius: var(--r-lg);
  padding: 32px 28px;
}
.cartao-cta h3 { color: #fff; margin-bottom: 12px; }
.cartao-cta > p { font-size: .92rem; margin-bottom: 24px; }
.cartao-cta .aneis {
  width: 340px;
  right: -42%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  opacity: .3;
}
.cartao-cta__dados { margin-top: 26px; display: grid; gap: 1px; }
.cartao-cta__linha {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  padding-block: 13px;
  border-top: 1px solid var(--linha-escura);
  transition: color .3s ease;
}
.cartao-cta__linha:hover { color: #fff; }
.cartao-cta__linha svg { color: var(--azul-claro); flex: none; }

/* Outros serviços */
.outros { display: grid; gap: 12px; }
.outro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--linha-escura);
  background: var(--tinta-card);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.outro:hover {
  background: #13263F;
  border-color: rgba(91, 155, 236, .4);
  transform: translateX(5px);
}
.outro span { font-family: var(--ff-display); font-weight: 600; color: #fff; }
.outro .seta { color: var(--azul-claro); flex: none; transition: transform var(--dur) var(--ease); }
.outro:hover .seta { transform: translateX(5px); }

/* Corpo de artigo */
.artigo-corpo { max-width: 72ch; }
.artigo-corpo h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: 44px 0 14px; }
.artigo-corpo p { margin-bottom: 18px; color: var(--grafite); }
.artigo-corpo > p:first-child {
  font-size: 1.12rem;
  color: var(--tinta-3);
  line-height: 1.6;
}
.artigo-corpo ol { counter-reset: passo; display: grid; gap: 26px; margin: 28px 0; }
.artigo-corpo ol > li { counter-increment: passo; position: relative; padding-left: 52px; }
.artigo-corpo ol > li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15, 96, 196, .1);
  color: var(--azul);
  font-family: var(--ff-mono);
  font-size: .86rem;
  font-weight: 500;
}
.artigo-corpo ol h3 { margin-bottom: 8px; }
.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-top: 22px;
}

/* --- Animação de entrada -------------------------------------------------
   A revelação é CSS puro, acionada por uma classe. Só esconde quando o JS
   está presente (html.js), então sem JavaScript o conteúdo aparece normal —
   nada que o cliente precise ler depende de animação para existir. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.js .reveal-img {
  opacity: 0;
  clip-path: inset(0 0 14% 0);
  transform: scale(1.04);
  transition: opacity 1.1s var(--ease), clip-path 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .reveal.is-vista,
.js .reveal-img.is-vista {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Entrada do hero — também em CSS, pelo mesmo motivo: é o conteúdo mais
   importante da página e não pode depender de o GSAP carregar e rodar. */
.js [data-hero-item] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-hero-item].is-vista { opacity: 1; transform: none; }

/* --- Hero no celular -----------------------------------------------------
   O recorte vertical joga a parte clara da foto (a tela do notebook) bem
   atrás do texto. Aqui o véu vira vertical e bem mais fechado, e a imagem
   desloca para o lado escuro. */
@media (max-width: 759px) {
  .hero {
    min-height: 84svh;
    padding-block: 104px 52px;
    align-items: flex-end;
  }
  /* 76px é a altura do desktop; no celular o logotipo tomaria meia tela */
  .marca img { height: 56px; }
  .topo.is-fixo .marca img { height: 44px; }

  .hero__fundo img { object-position: 66% 24%; }
  .hero__veu {
    background:
      linear-gradient(180deg, rgba(5, 11, 22, .97) 0%, rgba(5, 11, 22, .86) 42%, rgba(5, 11, 22, .93) 100%),
      linear-gradient(to top, var(--tinta) 3%, transparent 46%);
  }
  .hero .malha { opacity: .28; }
  .hero .aneis { opacity: .34; right: -38%; }
  .hero__brilho { opacity: .22; }

  .hero h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hero__texto { font-size: 1rem; margin-bottom: 30px; }
  .hero__acoes { flex-direction: column; align-items: stretch; gap: 11px; }
  .hero__acoes .btn { width: 100%; }

  .numeros { margin-top: -38px; gap: 22px 16px; }
  .pilares { margin-top: -38px; gap: 26px 4px; }
  .numero__rotulo { font-size: .76rem; }
}

/* --- Breakpoints -------------------------------------------------------- */
@media (min-width: 560px) {
  .cookies { flex-direction: row; align-items: center; justify-content: space-between; }
  .cookies p { flex: 1; }
  .grade-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insta-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  :root { --gutter: 32px; }
  .numeros { grid-template-columns: repeat(4, 1fr); margin-top: -64px; }
  .pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: -64px; gap: 0; }
  .pilar + .pilar { border-left: 1px solid var(--linha-clara); }
  .grade-servicos { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .etapas { grid-template-columns: repeat(2, 1fr); }
  .grade-equipe { grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
  .hero__rolar { display: flex; }
  .outros { grid-template-columns: repeat(2, 1fr); }
  .rodape__base { flex-direction: row; align-items: center; justify-content: space-between; }
  .rodape__lista { gap: 11px; }
  .rodape__lista a, .rodape__legal a { padding-block: 0; }
  .zap { right: 26px; bottom: 26px; width: 58px; height: 58px; }
}

@media (min-width: 1000px) {
  .menu {
    display: flex;
    align-items: center;
    gap: 34px;
  }
  .hamburguer { display: none; }
  .topo__acao { display: inline-flex; }

  .dividido { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 86px); }
  .dividido--invertido .dividido__visual { order: 2; }
  .dividido__midia { aspect-ratio: 5 / 6; }
  .dividido--largo { grid-template-columns: 1.05fr .95fr; }

  .cartao-flutuante {
    position: absolute;
    right: -34px;
    bottom: 38px;
    margin: 0;
    max-width: 230px;
  }
  .dividido--invertido .cartao-flutuante { right: auto; left: -34px; }

  .grade-servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grade-equipe { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grade-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insta-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }

  .cabecalho-secao--duplo {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(40px, 5vw, 76px);
    align-items: end;
  }
  .cabecalho-secao--duplo .intro { margin-top: 0; padding-bottom: 7px; font-size: .97rem; }

  .cabecalho-secao--duplo--topo { align-items: start; }
  .cabecalho-secao--duplo--topo .intro { margin-top: 40px; padding-bottom: 0; }

  .chamada__grade {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(40px, 5vw, 76px);
    align-items: start;
  }
  .chamada__grade > div:last-child { padding-top: 40px; }

  /* o e-mail é o mais longo: ganha a linha inteira em vez de quebrar no meio */
  .contatos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contato--largo { grid-column: 1 / -1; }

  /* com 8 serviços, 4 colunas fecham duas linhas certinhas (3 deixaria
     a última com dois cards soltos) */
  @media (min-width: 1180px) {
    .grade-servicos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .faq-botao { font-size: 1.06rem; padding: 24px 26px; }
  .faq-resposta p { padding: 0 26px 26px; font-size: .96rem; }

  .pagina-servico { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(48px, 6vw, 80px); align-items: start; }
  .pagina-servico__lateral { position: sticky; top: 112px; }
}

/* --- Impressão e acessibilidade ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal, .js .reveal-img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .aneis .anel-gira, .aneis .anel-gira-r { animation: none; }
}