/* ============================================================
   DBACOMP Solutions — folha de estilo única
   Paleta herdada do site anterior: vermelho de marca sobre
   grafite e cinzas neutros.
   ============================================================ */

:root {
  /* Marca */
  --vermelho:        #ec2227;
  --vermelho-vivo:   #fb5e63;
  --vermelho-fundo:  #ab0f14;

  /* Neutros */
  --grafite:         #17181c;
  --grafite-claro:   #22242a;
  --grafite-borda:   #33363f;
  --tinta:           #2b2c30;
  --tinta-suave:     #5f6167;
  --linha:           #e3e4e7;
  --papel:           #ffffff;
  --papel-frio:      #f5f6f8;

  --raio:            14px;
  --raio-p:          8px;
  --sombra:          0 1px 2px rgba(23,24,28,.06), 0 8px 24px rgba(23,24,28,.07);
  --sombra-alta:     0 2px 4px rgba(23,24,28,.08), 0 18px 44px rgba(23,24,28,.13);
  --transicao:       .22s cubic-bezier(.4,0,.2,1);

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

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

html { scroll-behavior: smooth; scroll-padding-top: 5.75rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Escala da página em telas grandes. Como praticamente tudo é rem, mexer só
   aqui aumenta texto, respiros, ícones e a largura da coluna de uma vez —
   sem mudar quantos caracteres cabem por linha. */
@media (min-width: 1400px) { html { font-size: 106.25%; } }   /* ~17px */
@media (min-width: 1750px) { html { font-size: 112.5%; } }    /* ~18px */
@media (min-width: 2100px) { html { font-size: 118.75%; } }   /* ~19px */

body {
  margin: 0;
  font-family: var(--fonte);
  /* 1rem, não 16px. O resto da folha usa rem em 201 lugares; fixar o corpo em
     pixel fazia o texto que herda daqui NÃO acompanhar quando o navegador está
     com outro tamanho de fonte padrão — daí parágrafos grandes dentro de caixas
     que encolheram. Assim a página inteira escala junto. */
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  /* Rede de segurança: palavra longa demais para a coluna quebra em vez de
     empurrar a página inteira. Só age quando de fato ia estourar. */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.envolve { width: min(73.75rem, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .envolve { width: min(73.75rem, 100% - 2rem); } }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--vermelho); color: #fff; padding: .8rem 1.2rem;
}
.pular:focus { left: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--vermelho-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------- Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primario { background: var(--vermelho); color: #fff; }
.btn--primario:hover { background: var(--vermelho-fundo); }

.btn--fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--fantasma:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.contato .btn--fantasma, .hero .btn--fantasma { color: #fff; }
.cartao-contato .btn--fantasma { border-color: rgba(255,255,255,.35); }

.btn--grande { padding: .95rem 1.9rem; font-size: 1rem; }

/* Botão de WhatsApp. O glifo vai em branco: verde sobre o vermelho da marca
   vibra e suja a leitura — a forma sozinha já identifica o canal. */
.btn__zap {
  width: 19px; height: 19px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn--pequeno { padding: .5rem 1.1rem; font-size: .84rem; }

.btn--copiar {
  background: transparent; color: var(--tinta-suave);
  border: 1px solid var(--linha); padding: .3rem .8rem;
  font-size: .78rem; border-radius: var(--raio-p);
}
.btn--copiar:hover { color: var(--vermelho); border-color: var(--vermelho); transform: none; }

/* ---------------------------------------------------------- Cabeçalho */
.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(23,24,28,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background var(--transicao), padding var(--transicao);
}
.cabecalho__int {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.625rem;
}
.cabecalho.encolhido { background: rgba(23,24,28,.96); }
.cabecalho.encolhido .cabecalho__int { min-height: 3.875rem; }

.marca { flex: none; }
.marca img { width: 11.875rem; transition: width var(--transicao); }
.cabecalho.encolhido .marca img { width: 10.3rem; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav > a {
  position: relative;
  color: rgba(255,255,255,.86);
  text-decoration: none; font-size: .89rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .35rem 0; white-space: nowrap;
  transition: color var(--transicao);
}
.nav > a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 0; background: var(--vermelho);
  transition: width var(--transicao);
}
.nav > a:hover, .nav > a.ativo { color: #fff; }
.nav > a:hover::after, .nav > a.ativo::after { width: 100%; }

.nav__restrita {
  display: flex; align-items: center; gap: .6rem;
  padding-left: 1.4rem; margin-left: .3rem;
  border-left: 1px solid rgba(255,255,255,.16);
}
.nav__rotulo {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.42); white-space: nowrap;
}
.nav__externo {
  font-size: .76rem; font-weight: 600; text-decoration: none;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  padding: .28rem .75rem;
  transition: all var(--transicao);
}
.nav__externo:hover { color: #fff; border-color: var(--vermelho); background: var(--vermelho); }

.cabecalho__cta { flex: none; }

.hamburguer {
  display: none; flex: none;
  width: 44px; height: 40px; padding: 9px 8px;
  background: none; border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--raio-p); cursor: pointer;
}
.hamburguer span {
  display: block; height: 2px; background: #fff; border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
.hamburguer span + span { margin-top: 5px; }
.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); }

/* ---------------------------------------------------------- Hero */
/* A primeira tela precisa dizer o que a DBACOMP faz, não só quem ela é.
   Por isso os seis destaques moram aqui dentro, ao lado do texto, e a seção
   ocupa a altura da janela com o conteúdo centrado — em tela grande ele fica
   no meio em vez de despencar para baixo. */
.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: stretch;
  /* Ocupa a tela, mas não além de ~52rem: em monitor muito alto, esticar mais
     só produzia faixa vazia. Parando antes, a seção seguinte aparece por baixo
     e o visitante vê que há mais página. */
  min-height: min(100vh, 52rem);
  min-height: min(100svh, 52rem);
  /* O recuo do topo inclui os 74px do cabeçalho fixo, que cobre a área.
     Aumentá-lo desce o bloco principal e, de quebra, encurta a sobra que vai
     para o vão do meio — os indicadores ficam menos soltos. */
  /* O recuo de baixo abre espaço para o galo de rolagem que já existe na
     fotografia de fundo aparecer embaixo dos indicadores. */
  padding: 8rem 0 5.5rem;
  color: #fff; overflow: hidden;
}
.hero__fundo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(23,24,28,.96) 12%, rgba(23,24,28,.80) 52%, rgba(171,15,20,.55) 100%),
    url("../img/fundoTopo.jpg") center/cover no-repeat;
}
.hero__fundo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 12% 10%, rgba(236,34,39,.22), transparent 62%);
}
/* Coluna: a grade fica no topo e os indicadores colam no rodapé da primeira
   tela. Em monitor alto a sobra cresce ENTRE os dois, em vez de virar recuo
   morto acima do título. */
.hero__int { width: min(73.75rem, 100% - 3rem); display: flex; flex-direction: column; }

.hero__grade {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 3.5rem; align-items: stretch;
  /* flex:1 faz a grade engolir a sobra da janela. A alternativa — margens
     automáticas — transformava a mesma sobra em vão vazio acima do título. */
  flex: 1; margin-bottom: 2.8rem;
}
/* As duas colunas começam no topo da grade. Centralizar aqui era o que
   deixava aquele vão entre o menu e o título: a grade cresce com a janela e o
   texto boiava no meio dela. */
.hero__texto {
  max-width: 34rem;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.hero__destaques { display: flex; flex-direction: column; justify-content: flex-start; }

.hero__sobre {
  display: inline-block; margin: 0 0 1.2rem;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--vermelho-vivo);
  border: 1px solid rgba(251,94,99,.4); border-radius: 999px;
  padding: .36rem .95rem;
}
.hero__titulo {
  margin: 0 0 .9rem;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.06; font-weight: 800; letter-spacing: -.02em;
}
.hero__titulo em { font-style: normal; color: var(--vermelho-vivo); }
.hero__sub {
  margin: 0 0 .9rem;
  font-size: clamp(1rem, 1.5vw, 1.22rem); font-weight: 600;
  color: rgba(255,255,255,.92);
}
.hero__paragrafo {
  margin: 0 0 1.9rem;
  font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.7);
}
/* O bloco encolhe até a largura do botão, e o reforço se centraliza dentro
   dela. Se o texto crescer e passar do botão, é o botão que se centraliza —
   funciona nos dois sentidos sem largura fixa. */
.hero__cta { width: fit-content; max-width: 100%; }
.hero__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* Reforço abaixo do botão. Sem link de propósito: a primeira tela tem uma
   ação e só uma — o resto informa, não disputa o clique. */
.hero__reforco {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin: 1.1rem 0 0;
  font-size: .85rem; color: rgba(255,255,255,.58);
}

.hero__pulso {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: #35d07f; box-shadow: 0 0 0 0 rgba(53,208,127,.6);
  animation: pulso 2.4s infinite;
}
@keyframes pulso {
  70%  { box-shadow: 0 0 0 9px rgba(53,208,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); }
}
@media (prefers-reduced-motion: reduce) { .hero__pulso { animation: none; } }

/* --- coluna dos destaques --- */
.hero__chamada {
  margin: 0 0 1rem;
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.5);
}
.hero__chamada strong {
  display: block; margin-top: .2rem;
  font-size: .84rem; font-weight: 800; letter-spacing: .1em;
  color: var(--vermelho-vivo);
}

.grade-destaques {
  flex: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(6.5rem, 1fr);
  gap: .7rem; margin: 0; padding: 0; list-style: none;
  max-height: 23rem;   /* cresce, mas não vira painel */
}
.grade-destaques li { min-width: 0; }
.grade-destaques a {
  /* justify-content: center porque o cartão cresce para preencher a altura da
     grade — sem isto o ícone e o rótulo ficam colados no topo e sobra vazio
     embaixo. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem;
  height: 100%; padding: 1.15rem .7rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--raio);
  text-align: center; text-decoration: none;
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao);
}
.grade-destaques a:hover {
  transform: translateY(-3px);
  background: rgba(236,34,39,.14);
  border-color: rgba(236,34,39,.55);
}
.grade-destaques img { width: 2.875rem; height: 2.875rem; object-fit: contain; }
.grade-destaques span {
  font-size: .68rem; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.88); overflow-wrap: break-word;
}

.hero__todas {
  display: inline-block; margin-top: 1.1rem;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  color: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: color var(--transicao), border-color var(--transicao);
}
.hero__todas:hover { color: #fff; border-color: var(--vermelho); }

.numeros {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem 3.2rem;
  margin: 0; padding: 1.7rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.14);
}
.numeros li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 0;
}
.numeros strong {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800;
  line-height: 1; color: var(--vermelho-vivo);
}
.numeros span {
  margin-top: .3rem; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.6);
}

/* Botão de rolagem, ancorado no rodapé da primeira tela — cai por cima do galo
   que já existe na fotografia, então lê-se como um elemento só. */
.hero__rolar {
  position: absolute; left: 50%; bottom: 1.4rem; z-index: 2;
  display: grid; place-items: center;
  width: 2.875rem; height: 2.875rem; margin-left: -1.4375rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(23,24,28,.35);
  backdrop-filter: blur(4px);
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.hero__rolar span {
  width: 15px; height: 15px;
  border-right: 2px solid rgba(255,255,255,.8);
  border-bottom: 2px solid rgba(255,255,255,.8);
  transform: translateY(-2px) rotate(45deg);
  animation: descer 2.2s ease-in-out infinite;
}
.hero__rolar:hover {
  background: var(--vermelho); border-color: var(--vermelho);
  transform: translateY(3px);
}
@keyframes descer {
  0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .65; }
  50%      { transform: translateY(1px)  rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__rolar span { animation: none; transform: translateY(-1px) rotate(45deg); }
  .hero__rolar:hover { transform: none; }
}

/* ---------------------------------------------------------- Títulos de seção */
.secao__chamada {
  margin: 0 0 .5rem;
  font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--vermelho);
}
.secao__titulo {
  margin: 0 0 2.6rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800; letter-spacing: -.015em; line-height: 1.15;
  color: var(--grafite);
}
.secao__titulo--claro { color: #fff; }
.contato .secao__chamada, .solucoes .secao__chamada { color: var(--vermelho-vivo); }

/* ---------------------------------------------------------- Empresa */
.empresa { padding: 5.5rem 0; background: var(--papel); }
.empresa__grade {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 2.6rem 3.5rem; align-items: start;
}
/* O título ocupa a linha inteira, então as duas colunas começam juntas logo
   abaixo dele. A alternativa era centralizar o quadro da direita, mas aí o
   alinhamento dependeria do tamanho do texto — e o texto é editável. */
.empresa__titulo { grid-column: 1 / -1; margin-bottom: 0; }
.empresa__texto p { margin: 0 0 1.1rem; color: var(--tinta-suave); }
.empresa__texto blockquote {
  margin: 2rem 0 1.5rem; padding: 0 0 0 1.3rem;
  border-left: 3px solid var(--vermelho);
  font-size: 1.08rem; font-weight: 600; line-height: 1.55;
  color: var(--grafite);
}
.empresa__duvida { font-weight: 600; color: var(--grafite) !important; }
.empresa__duvida a { color: var(--vermelho); text-decoration: none; }
.empresa__duvida a:hover { text-decoration: underline; }

.empresa__lado { display: grid; gap: 1rem; }

.cartao-experiencia {
  padding: 2rem; border-radius: var(--raio);
  background: linear-gradient(160deg, var(--grafite) 0%, var(--grafite-claro) 100%);
  color: #fff; box-shadow: var(--sombra);
}
.cartao-experiencia__olho {
  margin: 0 0 1.4rem;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: rgba(255,255,255,.5);
}
.cartao-experiencia__olho em { font-style: normal; color: var(--vermelho-vivo); }
.cartao-experiencia h3 {
  margin: 0; font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.8);
}
.cartao-experiencia__numero { margin: .2rem 0 1rem; font-size: 1.05rem; color: rgba(255,255,255,.7); }
.cartao-experiencia__numero strong {
  font-size: 3.2rem; font-weight: 800; line-height: 1;
  color: var(--vermelho-vivo); margin-right: .4rem;
}
.cartao-experiencia p:last-child { margin: 0; font-size: .93rem; color: rgba(255,255,255,.66); }

.cartao-equipe {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.6rem 2rem; border-radius: var(--raio);
  background: var(--vermelho); color: #fff; text-decoration: none;
  transition: background var(--transicao), transform var(--transicao);
}
.cartao-equipe:hover { background: var(--vermelho-fundo); transform: translateY(-3px); }
.cartao-equipe strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; opacity: .8; }
.cartao-equipe span { font-size: 1.05rem; font-weight: 700; }

/* ---------------------------------------------------------- Parceiros */
/* Faixa de baixa ênfase entre o conteúdo e o rodapé: rótulo pequeno, logotipos
   em escala de cinza que só ganham cor no passar do mouse. */
.faixa-parceiros {
  padding: 2.4rem 0;
  /* Branco puro de propósito: os logotipos têm fundo branco sólido e em
     qualquer cinza apareceriam como retângulos recortados. */
  background: var(--papel);
}
.faixa-parceiros__int {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.2rem 3rem;
}
.faixa-parceiros__titulo {
  margin: 0; flex: none;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em;
  color: #9a9ca3;
}
.faixa-parceiros__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 3rem;
  margin: 0; padding: 0; list-style: none;
}
.faixa-parceiros__lista img {
  max-height: 42px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: transform var(--transicao), filter var(--transicao), opacity var(--transicao);
}

/* Rodízio de ativação: os logotipos acendem um a um, ficam todos acesos por um
   instante e apagam juntos. O "apaga junto" é o motivo de cada posição ter seu
   próprio keyframe — com um só e animation-delay, eles também apagariam em fila.
   Há seis posições preparadas; a partir do sétimo parceiro, acrescente um bloco. */
@keyframes parceiro1 { 0%,  4% { filter: grayscale(1); opacity: .55; }  8%, 82% { filter: none; opacity: 1; } 88%, 100% { filter: grayscale(1); opacity: .55; } }
@keyframes parceiro2 { 0%, 13% { filter: grayscale(1); opacity: .55; } 17%, 82% { filter: none; opacity: 1; } 88%, 100% { filter: grayscale(1); opacity: .55; } }
@keyframes parceiro3 { 0%, 21% { filter: grayscale(1); opacity: .55; } 25%, 82% { filter: none; opacity: 1; } 88%, 100% { filter: grayscale(1); opacity: .55; } }
@keyframes parceiro4 { 0%, 30% { filter: grayscale(1); opacity: .55; } 34%, 82% { filter: none; opacity: 1; } 88%, 100% { filter: grayscale(1); opacity: .55; } }
@keyframes parceiro5 { 0%, 38% { filter: grayscale(1); opacity: .55; } 42%, 82% { filter: none; opacity: 1; } 88%, 100% { filter: grayscale(1); opacity: .55; } }
@keyframes parceiro6 { 0%, 47% { filter: grayscale(1); opacity: .55; } 51%, 82% { filter: none; opacity: 1; } 88%, 100% { filter: grayscale(1); opacity: .55; } }

.faixa-parceiros__lista li:nth-child(1) img { animation: parceiro1 7s infinite; }
.faixa-parceiros__lista li:nth-child(2) img { animation: parceiro2 7s infinite; }
.faixa-parceiros__lista li:nth-child(3) img { animation: parceiro3 7s infinite; }
.faixa-parceiros__lista li:nth-child(4) img { animation: parceiro4 7s infinite; }
.faixa-parceiros__lista li:nth-child(5) img { animation: parceiro5 7s infinite; }
.faixa-parceiros__lista li:nth-child(6) img { animation: parceiro6 7s infinite; }

/* O mouse manda: pausa o rodízio naquele logotipo, acende e aproxima 10%. */
.faixa-parceiros__lista li:hover img {
  animation: none;
  filter: none; opacity: 1;
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .faixa-parceiros__lista img { animation: none; }
  .faixa-parceiros__lista li:hover img { transform: none; }
}

/* ---------------------------------------------------------- Soluções */
.solucoes {
  position: relative; isolation: isolate;
  padding: 5.5rem 0; color: #fff;
  background: var(--grafite);
}
.solucoes::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .13;
  background: url("../img/fundoServicos.jpg") center/cover no-repeat;
}

.grade-solucoes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.1rem;
}
.cartao-solucao {
  display: flex; flex-direction: column;
  padding: 1.7rem; border-radius: var(--raio);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--grafite-borda);
  scroll-margin-top: 100px;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.cartao-solucao:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(236,34,39,.45);
  transform: translateY(-3px);
}
.cartao-solucao:target { border-color: var(--vermelho); background: rgba(236,34,39,.09); }

.cartao-solucao header { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.cartao-solucao header img {
  width: 2.75rem; height: 2.75rem; flex: none; object-fit: contain;
  padding: 7px; border-radius: 10px;
  background: rgba(255,255,255,.08);
}
.cartao-solucao h3 {
  margin: 0; min-width: 0;
  font-size: 1.06rem; font-weight: 700; line-height: 1.3;
}

.cartao-solucao__itens { margin: 0; padding: 0; list-style: none; flex: 1; }
.cartao-solucao__itens li {
  position: relative; padding-left: 1.5rem; margin-bottom: .55rem;
  font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.7);
}
.cartao-solucao__itens li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vermelho);
}

.cartao-solucao__mais { margin-top: 1.1rem; border-top: 1px solid var(--grafite-borda); padding-top: .9rem; }
.cartao-solucao__mais summary {
  cursor: pointer; list-style: none;
  font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--vermelho-vivo);
  display: flex; align-items: center; gap: .5rem;
}
.cartao-solucao__mais summary::-webkit-details-marker { display: none; }
.cartao-solucao__mais summary::after {
  content: "+"; font-size: 1.15rem; line-height: 1; transition: transform var(--transicao);
}
.cartao-solucao__mais[open] summary::after { content: "−"; }
.cartao-solucao__detalhe { padding-top: .9rem; }
.cartao-solucao__detalhe p {
  margin: 0 0 .8rem; font-size: .89rem; line-height: 1.62; color: rgba(255,255,255,.66);
}
.cartao-solucao__detalhe p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Carreira */
.carreira { padding: 5.5rem 0; background: var(--papel-frio); }
.carreira__grade {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 2.6rem 3.5rem; align-items: stretch;
}
.carreira__titulo { grid-column: 1 / -1; margin-bottom: 0; }
.carreira p { color: var(--tinta-suave); }
/* Sem isto o primeiro parágrafo herda a margem padrão do navegador e o texto
   nasce ~16px abaixo do quadro de vagas. A seção Empresa já tinha a regra. */
.carreira__texto p { margin: 0 0 1.1rem; }
.carreira__instrucao { margin-top: 1rem; }

.caixa-email {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem;
  margin-top: 1.8rem; padding: 1.5rem 1.7rem;
  background: var(--papel); border: 1px solid var(--linha);
  border-left: 4px solid var(--vermelho); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.caixa-email__rotulo {
  width: 100%;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinta-suave);
}
.caixa-email__end {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem); font-weight: 700;
  color: var(--grafite); text-decoration: none;
  border-bottom: 2px solid rgba(236,34,39,.35);
}
.caixa-email__end:hover { color: var(--vermelho); border-color: var(--vermelho); }

.vagas {
  display: flex; flex-direction: column;
  padding: 1.9rem; border-radius: var(--raio);
  background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra);
}
.vagas h3 {
  margin: 0 0 1.2rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--linha);
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--grafite);
}
/* flex:1 + minmax faz os lugares crescerem para ocupar a sobra do quadro.
   Assim o quadro nunca é o mais alto da linha — quem manda na altura é a
   coluna de texto, e a caixa do e-mail volta a ficar logo abaixo do texto. */
.vagas__lista {
  flex: 1; display: grid; grid-auto-rows: minmax(56px, 1fr); gap: .8rem;
  margin: 0; padding: 0; list-style: none;
}

.vaga {
  padding: 1rem 1.15rem;
  background: var(--papel-frio);
  border: 1px solid var(--linha); border-radius: 10px;
}
.vaga h4 { margin: 0; font-size: .98rem; line-height: 1.3; color: var(--grafite); }
.vaga__local {
  margin: .2rem 0 0; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--vermelho);
}
.vaga__link {
  display: inline-block; margin-top: .55rem;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  color: var(--grafite);
  border-bottom: 1px solid rgba(236,34,39,.35);
}
.vaga__link:hover { color: var(--vermelho); border-color: var(--vermelho); }

/* Lugar reservado. Traço pontilhado em vez de cheio: lê-se como "espaço à
   espera de vaga", não como um cartão morto. */
.vaga--vazia {
  display: grid; place-items: center; text-align: center;
  background: transparent; border-style: dashed; border-color: #d8dadf;
}
.vaga--vazia span {
  font-size: .78rem; line-height: 1.45;
  text-transform: uppercase; letter-spacing: .08em;
  color: #a9abb2;
}

/* As vagas além das duas primeiras. <details> nativo: abre sem JavaScript e
   sem tirar da tela o cartão que a pessoa está lendo. */
.vagas__mais { margin-top: .8rem; }
.vagas__mais summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--vermelho);
}
.vagas__mais summary::-webkit-details-marker { display: none; }
.vagas__mais summary::after { content: "+"; font-size: 1.05rem; line-height: 1; }
.vagas__mais[open] summary::after { content: "−"; }
.vagas__lista--extra { margin-top: .8rem; }

.vagas__nota {
  margin: .9rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--linha);
  font-size: .84rem;
}

/* ---------------------------------------------------------- Contato */
.contato {
  position: relative; isolation: isolate;
  padding: 5.5rem 0; color: #fff;
  background: var(--grafite);
}
.contato::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background: url("../img/fundoContato.jpg") center/cover no-repeat;
}
.contato__grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
}
.cartao-contato {
  padding: 1.8rem; border-radius: var(--raio);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--grafite-borda);
}
.cartao-contato h3 {
  margin: 0 0 1.2rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--grafite-borda);
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--vermelho-vivo);
}
.cartao-contato address { font-style: normal; color: rgba(255,255,255,.76); line-height: 1.8; }
.cartao-contato .btn--fantasma { margin-top: 1.2rem; }

.lista-fones, .lista-emails { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.lista-fones li, .lista-emails li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.lista-fones a:first-child, .lista-emails a:first-child {
  font-size: 1.02rem; font-weight: 700; color: #fff; text-decoration: none;
  transition: color var(--transicao);
}
.lista-fones a:first-child:hover, .lista-emails a:first-child:hover { color: var(--vermelho-vivo); }
.lista-emails a:first-child { font-size: .95rem; word-break: break-all; }
.lista-fones span, .lista-emails span {
  width: 100%; order: 3;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.45);
}
.zap {
  font-size: .76rem; font-weight: 700; text-decoration: none;
  color: #25d366; white-space: nowrap;
}
.zap:hover { text-decoration: underline; }
.cartao-contato .btn--copiar { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.2); }
.cartao-contato .btn--copiar:hover { color: #fff; border-color: var(--vermelho-vivo); }

.horario {
  margin: 1.5rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--grafite-borda);
  font-size: .9rem; color: rgba(255,255,255,.66);
}
.horario strong { color: rgba(255,255,255,.85); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }

.mapa {
  margin-top: 1.1rem; border-radius: var(--raio); overflow: hidden;
  border: 1px solid var(--grafite-borda);
  line-height: 0;
}
.mapa iframe { width: 100%; height: 380px; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ---------------------------------------------------------- Rodapé */
.rodape { background: #101116; color: rgba(255,255,255,.6); padding: 1.6rem 0; }
.rodape__base {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
}
.rodape__base p { margin: 0; font-size: .78rem; color: rgba(255,255,255,.38); }

.rodape__redes { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.rodape__redes a {
  font-size: .78rem; text-decoration: none;
  color: rgba(255,255,255,.5);
  transition: color var(--transicao);
}
.rodape__redes a:hover { color: var(--vermelho-vivo); }

/* ---------------------------------------------------------- Aviso de cópia */
.aviso-copia {
  position: fixed; left: 50%; bottom: 2rem; z-index: 300;
  transform: translate(-50%, 1.5rem);
  padding: .7rem 1.4rem; border-radius: 999px;
  background: var(--grafite); color: #fff;
  font-size: .85rem; font-weight: 600;
  box-shadow: var(--sombra-alta);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transicao), transform var(--transicao);
}
.aviso-copia.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------- Revelação */
[data-revelar] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-revelar].revelado { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; transition: none; }
  .btn:hover, .grade-destaques a:hover, .cartao-solucao:hover, .cartao-equipe:hover { transform: none; }
}

/* ---------------------------------------------------------- Responsivo */
@media (max-width: 1080px) {
  .nav__restrita { display: none; }
  .nav { gap: 1.2rem; }
}

@media (max-width: 1024px) {
  /* O botão "Fale conosco" repete o item "Contato" que está logo ao lado.
     Tirando ele, o menu horizontal inteiro continua cabendo numa janela
     ~170px mais estreita — vale mais que o botão. */
  .cabecalho__cta { display: none; }
}

/* Layout de conteúdo em coluna única. Separado do menu de propósito: a hora de
   empilhar os textos não é a mesma de trocar o menu por hambúrguer. */
@media (max-width: 900px) {
  .empresa__grade, .carreira__grade { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

  /* Em flex, quatro indicadores quebram como [3,1] ou [1,2,1] conforme o
     comprimento dos rótulos. Grade 2x2 dá o mesmo resultado sempre. */
  .numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 1.5rem; }

  /* Em coluna única a altura da janela deixa de ser uma meta: forçar 100vh
     só criaria vão vazio entre o texto e os destaques. */
  .hero { min-height: 0; padding: 7rem 0 3.5rem; }
  .hero__grade { margin-top: 0; margin-bottom: 2.4rem; }

  /* Em tela de toque rolar é o gesto óbvio e o mesmo destino está no menu.
     Manter o botão só custaria espaço vertical — e ele encavalaria nos
     indicadores, já que aqui o hero não tem mais altura de tela cheia. */
  .hero__rolar { display: none; }
  .hero__grade { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; flex: none; }
  .hero__texto { display: block; }
  .grade-destaques { flex: none; grid-auto-rows: auto; }
  .hero__texto { max-width: none; }
  .grade-destaques { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Só aqui o menu horizontal realmente deixa de caber (logo + 5 itens exigem
   ~746px). Acima disso o hambúrguer escondia um menu que cabia. */
@media (max-width: 780px) {
  html { scroll-padding-top: 76px; }
  .hamburguer { display: block; margin-left: auto; }

  .nav {
    position: fixed; inset: 4.625rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0;
    background: rgba(23,24,28,.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    /* Fechado o painel não tem altura NENHUMA — nem a do próprio padding,
       senão o primeiro link aparece espiando por baixo do cabeçalho. */
    max-height: 0; padding: 0 1.5rem; overflow: hidden;
    transition: max-height var(--transicao), padding var(--transicao);
  }
  .cabecalho.encolhido .nav { top: 3.875rem; }
  .nav.aberto {
    max-height: 80vh; overflow-y: auto;
    padding: .6rem 1.5rem 1.6rem;
    border-bottom-color: rgba(255,255,255,.1);
  }
  .nav > a { padding: .9rem 0; white-space: normal; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav > a::after { display: none; }
  .nav__restrita {
    display: flex; flex-wrap: wrap; padding: 1.2rem 0 0; margin: 0;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.07);
  }
  .nav__rotulo { width: 100%; }
}

@media (max-width: 560px) {
  .empresa, .solucoes, .carreira, .contato { padding-block: 3.5rem; }
  /* minmax(0,…) permite a coluna ficar menor que a palavra mais longa;
     sem isso, "MONITORAMENTO" estica a grade e a página ganha rolagem lateral. */
  .grade-destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-solucoes { grid-template-columns: minmax(0, 1fr); }
  .hero__cta { width: 100%; }
  .hero__acoes .btn { width: 100%; }
  .mapa iframe { height: 300px; }
}

@media (max-width: 380px) {
  .grade-destaques { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: 1fr; }
  .envolve { width: min(73.75rem, 100% - 1.6rem); }
}

/* ---------------------------------------------------------- Impressão */
@media print {
  .cabecalho, .hamburguer, .mapa, .aviso-copia, .btn--copiar { display: none !important; }
  body { color: #000; }
  .hero, .solucoes, .contato { background: #fff !important; color: #000; }
  .hero__fundo, .solucoes::before, .contato::before { display: none; }
  [data-revelar] { opacity: 1; transform: none; }
}