/* ==========================================================================
   PLENUS — wordmark (substitui a logo com circuito por enquanto)
   Header tem fundo claro; rodapé já é escuro (#0B0A33) desde o original.
   ========================================================================== */
.plenus-wordmark {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: #262626;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.plenus-wordmark .dot {
  color: #3534ff;
}
.plenus-wordmark--footer {
  color: #ffffff !important;
  font-size: 30px;
  margin-bottom: 24px;
}

/* ==========================================================================
   Carrossel de marcas — faixa contínua (marquee) em CSS puro, sem JS.
   Mobile: 2 linhas, sentidos opostos. Desktop/tablet: 1 linha só, mais alta.
   Antes disso era um swiper JS com "centered:true", que deixava um vazio à
   esquerda no primeiro carregamento (só preenchia do meio pra direita) e
   avançava aos saltos — o marquee sempre começa cheio e roda suave, direto.
   Os slides de cada faixa já vêm duplicados 1x no HTML pra dar loop perfeito
   (translateX de 0 a -50% = exatamente 1 volta completa, sem emenda visível).
   ========================================================================== */
.mobile-brand-marquee,
.desktop-brand-marquee {
  display: none;
}
/* entra pela direita, sai pela esquerda */
@keyframes marquee-from-right {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* entra pela esquerda, sai pela direita */
@keyframes marquee-from-left {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 767px) {
  .mobile-brand-marquee {
    display: block;
    /* .brand-area-main-wrapper (do tema original) é display:flex — sem
       isso, o item flex nunca encolhe abaixo da largura de conteúdo do
       .marquee-track (que é width:max-content, bem largo de propósito
       pro loop), e o overflow:hidden do .marquee-row abaixo não tem
       efeito nenhum: a página inteira fica larga e "arrasta" de lado
       no mobile. min-width:0 é o que libera o flex item a encolher. */
    min-width: 0;
  }
  .marquee-row {
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px;
  }
  .marquee-row:last-child {
    margin-bottom: 0;
  }
  .marquee-row .marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 28px;
  }
  .marquee-row .marquee-track img {
    height: 42px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .marquee-row--left .marquee-track {
    animation: marquee-from-right 32s linear infinite;
  }
  .marquee-row--right .marquee-track {
    animation: marquee-from-left 32s linear infinite;
  }
}

/* ==========================================================================
   3 linhas de logos (desktop) — SEM animação própria: as faixas ficam
   paradas e só andam enquanto a página está sendo rolada. Quem move é o
   JS (script inline no fim do index.html), escrevendo translateX direto
   no .marquee-track a cada evento de scroll — a distância percorrida é
   proporcional ao quanto a página rolou, e cada linha tem seu próprio
   multiplicador (a do meio anda mais, e ao contrário das outras duas,
   pra dar o efeito de esteiras cruzando com profundidade).
   Por isso nenhuma regra de animation aqui: com animation-name ligado, a
   faixa continuaria deslizando sozinha com a página parada, que é
   justamente o que não se quer.
   ========================================================================== */
@media (min-width: 768px) {
  .desktop-brand-marquee {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
  }
  .marquee-line {
    overflow: hidden;
    width: 100%;
  }
  .marquee-line .marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 60px;
    will-change: transform;
  }
  .marquee-line .marquee-track img {
    height: 52px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Ícones de seta injetados (SVGInject troca <img> por <svg> inline — as
   regras de tamanho que miravam "img" não valem mais pro elemento "svg")
   ========================================================================== */
.btn-arrow svg,
.rts-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   Botão "Falar no WhatsApp" não pode quebrar linha (o header não tem altura
   pra isso — o max-width:max-content original não segura quando o pai aperta)
   ========================================================================== */
.rts-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.button-area-right-header {
  flex-shrink: 0;
}
.whatsapp-icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  object-fit: cover;
}

/* ==========================================================================
   Menu principal — com "Ponto & Acesso" adicionado, 9 itens não cabem mais
   no gap de 40px do tema original. Reduz gap e fonte pra caber numa linha.
   ========================================================================== */
@media (min-width: 992px) {
  .nav-area ul {
    gap: 22px !important;
  }
  .nav-area ul li a.nav-link {
    font-size: 14.5px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Destaque pro card "Ponto & Acesso" no grid de serviços
   ========================================================================== */
.single-solution-highlight {
  position: relative;
  background: linear-gradient(180deg, rgba(53, 52, 255, 0.05), transparent 60%);
}
.single-solution-highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
}
.highlight-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ==========================================================================
   Página Parceiros — cards grandes de Ponto & Acesso
   (mesma mecânica de entrada + flutuação usada no /parceiros original,
   só que aplicada via classe genérica .reveal-float-item)
   ========================================================================== */
.reveal-float-item {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform, opacity;
}
.reveal-float-item.reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-float-item.floating {
  animation: rts-float 4s ease-in-out infinite;
}
@keyframes rts-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.015); }
}

.parceiro-brand-card {
  height: 100%;
  padding: 48px 36px;
  border-radius: 16px;
  background: #f8f9fb;
  border: 1px solid #ececf3;
  border-top: 3px solid var(--color-primary);
  text-align: center;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.parceiro-brand-card:hover {
  box-shadow: 0 20px 45px rgba(53, 52, 255, 0.14);
  border-color: var(--color-primary);
}
.parceiro-brand-card .icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(53, 52, 255, 0.08);
}
.parceiro-brand-card .icon img {
  width: 30px;
  height: 30px;
}
.parceiro-brand-card .title {
  font-size: 26px;
  margin-bottom: 14px;
}
.parceiro-brand-card .disc {
  color: var(--color-body);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   Hero da home — título/frase resumidos no celular
   O <h1> de verdade continua sendo o desktop (pra não duplicar heading pro
   SEO); a versão mobile é um <p class="title"> que herda a mesma tipografia
   via classe, só trocando o texto por algo mais curto pra tela pequena.
   ========================================================================== */
.hero-title-mobile,
.hero-desc-mobile {
  display: none;
}
@media only screen and (max-width: 767px) {
  .hero-title-desktop,
  .hero-desc-desktop {
    display: none;
  }
  .hero-title-mobile,
  .hero-desc-mobile {
    display: block;
  }
}

/* ==========================================================================
   Fotos do hero no mobile — efeito de pin + sobreposição (gsap-animations.js)
   no lugar do parallax do desktop (a lib jarallax não roda no mobile, ver
   <script> de inicialização no index.html). Sem ela, a imagem dentro do
   card não teria seu tamanho ajustado automaticamente — essas regras
   garantem que o card sempre fica preenchido, com ou sem JS rodando.
   ========================================================================== */
.hero-mobile-crosshair {
  display: none;
}
@media (max-width: 767px) {
  /* as margens negativas (mt--120/mt_sm--70) criam o "degrau" entre as
     duas fotos no desktop, onde elas ficam lado a lado. Empilhadas no
     mobile, essa mesma margem negativa puxa a primeira foto pra cima
     por baixo do texto — zera aqui. Altura fixa (220px) cortava demais
     as fotos, que são retrato — aspect-ratio mantém a proporção vertical
     e mostra a pessoa inteira, não só o torso. */
  .right-clippath-wrapper .left-image {
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .right-clippath-wrapper .left-image + .left-image {
    margin-top: 16px;
  }
  .right-clippath-wrapper .left-image .jarallax-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* as duas cruzes originais (.shape-image) são posicionadas fora da tela
     de propósito pro efeito de desktop (right: 0/left: -190px numa faixa
     bem larga) — no mobile isso só aparece cortado/vazando. Escondidas
     aqui, e a decoração abaixo (maior, no fluxo normal) entra no lugar. */
  .right-clippath-wrapper .shape-image {
    display: none;
  }
  .hero-mobile-crosshair {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px;
  }
  .hero-mobile-crosshair img {
    width: 140px;
    height: auto;
    opacity: 0.9;
  }
}

/* ==========================================================================
   Cards "Infraestrutura de TI" x "Ponto & Acesso" (seção de pricing) — a
   linha usa gutter zero (g-0) então os dois cards ficavam grudados, e como
   as listas têm tamanhos diferentes, os botões "Falar no WhatsApp" ficavam
   em alturas diferentes. Afasta os cards e alinha os botões no rodapé dos
   dois, não importa quanto texto cada um tem.
   ========================================================================== */
.single-pricing-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 14px;
  border-radius: 12px;
}
.single-pricing-area .body {
  margin-top: auto;
  padding-top: 24px;
}
@media (max-width: 767px) {
  .single-pricing-area {
    margin: 0 0 24px 0;
  }
}

/* ==========================================================================
   Foto do banner nas páginas de serviço (Suporte de TI, Servidores & VPS,
   Backup, Firewall, Antivírus, E-mail) — sem nenhum object-fit definido,
   a imagem ficava no tamanho natural dela dentro do espaço de 500px,
   sobrando fundo escuro ao redor (parecia uma "moldura", mas não era
   proposital — é só a falta de regra). Preenche o espaço todo, sem
   nenhuma decoração extra, diferente do tratamento dado às fotos da hero.
   ========================================================================== */
.thumbnail-bannr-service-right {
  overflow: hidden;
  border-radius: 12px;
}
.thumbnail-bannr-service-right .jarallax-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  /* o container original vira height:auto no tablet/mobile — sem altura
     definida, o height:100% da imagem não teria de onde puxar medida. */
  .thumbnail-bannr-service-right {
    height: 280px;
  }
}

/* ==========================================================================
   As 3 fotos de serviço da home ("Suporte no dia a dia" e as duas seguintes,
   fora do hero principal) tiveram a classe jarallax/jara-mask-1 removida —
   agora são fotos normais, que rolam com a página. Sem a lib jarallax
   tratando mais essas imagens, precisam do mesmo object-fit manual pra não
   sobrar fundo escuro ao redor (igual ao ajuste das páginas de serviço).
   ========================================================================== */
.service-list-between .right-area-thumbnail {
  overflow: hidden;
  border-radius: 12px;
}
.service-list-between .right-area-thumbnail img,
.service-list-between .right-area-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Terceiro vídeo (servidores em rack) — pedido do usuário: no mobile fica
   empilhado no hero, embaixo dos outros 2; no desktop fica só na seção
   "Infraestrutura gerenciada", no lugar da foto estática. Mostra só uma
   cópia de cada vez por breakpoint (a outra fica display:none, então o
   navegador não perde tempo/dado baixando a que não vai aparecer).
   ========================================================================== */
.hero-video-mobile-only {
  display: none;
}
.infra-thumb-desktop {
  display: none;
}
@media (max-width: 767px) {
  .hero-video-mobile-only {
    display: block;
  }
}
@media (min-width: 768px) {
  .infra-thumb-mobile {
    display: none;
  }
  .infra-thumb-desktop {
    display: block;
  }
}

/* ==========================================================================
   Showcase das marcas (Secullum/Henry/TopData) na seção "E O PONTO &
   ACESSO?" da home — antes era uma foto de banco genérica sem relação com
   as marcas de verdade; agora mostra as 3 logos reais, com link pra página
   dedicada. Fundo branco nos cards é necessário: a logo da Henry é texto
   preto sólido, ficaria invisível no fundo escuro do site.
   ========================================================================== */
.brand-showcase-thumbnail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: auto !important;
}
.brand-showcase-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brand-showcase-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}
/* Todas as logos ocupam a MESMA caixa (220x64), com object-fit:contain
   centralizando cada uma dentro dela sem distorcer nem cortar. Antes era
   só max-height:60px, e como os arquivos têm proporções bem diferentes
   (Henry e TopData são 16:9 com bastante margem vazia em volta da marca,
   Control iD é 800x163 quase sem margem), cada logo saía de um tamanho:
   as 16:9 batiam no limite de altura e apareciam pequenas, a Control iD
   esticava até a largura toda do card. Fixar a caixa padroniza o conjunto. */
.brand-showcase-card img {
  width: 220px !important;
  height: 64px !important;
  max-width: 100%;
  object-fit: contain !important;
}
.brand-showcase-link {
  align-self: flex-start;
  color: #f4f5f7;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #4038ff;
  padding-bottom: 2px;
}
.brand-showcase-link:hover {
  color: #4038ff;
}

/* ==========================================================================
   Mini-grid das 3 marcas dentro do card "Ponto & Acesso" dos 6 cards de
   serviço da home — mesmas logos do showcase acima, só que compactas pra
   caber no espaço do card. Fundo branco necessário: a logo da Henry é
   texto preto sólido.
   ========================================================================== */
.solution-brand-mini-grid {
  display: flex;
  gap: 8px;
  margin: 16px 0 20px;
}
.solution-brand-mini-grid img {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 6px;
  height: 52px;
  object-fit: contain;
}

/* ==========================================================================
   Seção "Empresas que confiam na Plenus" — fundo branco a pedido do
   usuário. O body do site é escuro (dark-theme.css), então sem isso a
   seção herdava o fundo escuro; texto e ícone do título ajustados aqui
   pra continuar legíveis sobre o branco.
   ========================================================================== */
.rts-brand-area-start {
  background-color: #ffffff;
  padding-top: 60px;
}
.rts-brand-area-start p {
  color: #262626 !important;
}

/* ==========================================================================
   Página Sobre — as 2 fotos de pessoas usadas no vídeo do hero da home,
   aqui como fotos estáticas, lado a lado, no lugar do placeholder de
   "foto da equipe/sede".
   ========================================================================== */
.sobre-team-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 100%;
}
.sobre-team-photos img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 12px;
}
.sobre-team-photos img:nth-child(2) {
  margin-top: 32px;
}
@media (max-width: 767px) {
  .sobre-team-photos img {
    min-height: 200px;
  }
  .sobre-team-photos img:nth-child(2) {
    margin-top: 0;
  }
}

/* ==========================================================================
   Seções Secullum/Henry/TopData (home) — no mobile, a pedido do usuário,
   fica só a logo da marca e a foto do produto, sem o parágrafo de
   descrição nem a lista de bullets entre os dois (esse texto continua
   normalmente no desktop).
   ========================================================================== */
@media (max-width: 767px) {
  #secullum p.disc,
  #secullum ul.list-unstyled,
  #henry p.disc,
  #henry ul.list-unstyled,
  #topdata p.disc,
  #topdata ul.list-unstyled {
    display: none;
  }
  /* a logo da marca (Secullum/Henry/TopData) ficava alinhada à esquerda
     no mobile (img é width:100% até 260px, mas sem margin:auto o bloco
     cola na borda esquerda da coluna) — centraliza. */
  #secullum .col-lg-6 > img,
  #henry .col-lg-6 > img,
  #topdata .col-lg-6 > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Seção "E O PONTO & ACESSO?" (home) — a fileira de 4 cards com ícone +
   texto (Reconhecimento facial / Controle de acesso / Relatórios /
   Instalação e suporte), embaixo das logos, já é redundante com o
   parágrafo de intro logo acima dela. A pedido do usuário, some no
   mobile pra encurtar a página; fica normal no desktop.
   .bg-gradient-5-bold é único nessa seção — não afeta as outras fileiras
   de cards (mesmo padrão .row.g-5.mt--50) usadas nas seções de Suporte
   de TI/Servidores.
   ========================================================================== */
@media (max-width: 767px) {
  .bg-gradient-5-bold .row.g-5.mt--50,
  #suporte-ti-features-row,
  #infra-gerenciada-features-row {
    display: none;
  }
}

/* ==========================================================================
   Footer — no mobile, os 6 blocos (Marca, Serviços, Ponto & Acesso, Empresa,
   Recursos, Carreira) usam col-auto (largura pelo conteúdo, sem quebra
   previsível) e cada link tem 12px de margem — o footer inteiro vira uma
   coluna gigante de texto. Os estilos originais são inline (style=""), por
   isso os !important abaixo — é a única forma de vencer um inline sem
   reescrever o HTML inteiro. Vira grid de 2 colunas (marca ocupa a linha
   inteira) e aperta os espaçamentos, sem tirar nenhum link.
   ========================================================================== */
@media (max-width: 767px) {
  .rts-footer-area .container {
    padding: 36px 0 16px 0 !important;
  }
  .rts-footer-area .row.justify-content-between > .col-auto {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .rts-footer-area .row.justify-content-between > .col-auto:first-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .footer-nav-section h6 {
    margin-bottom: 12px !important;
  }
  .footer-nav-section ul li {
    margin-bottom: 8px !important;
  }
  .footer-brand-section .contact-info p,
  .footer-brand-section > p {
    margin: 6px 0 !important;
  }
  .footer-cta-section {
    padding: 24px 0 !important;
  }
  .footer-cta-section h3 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
}

/* ==========================================================================
   Seção "large-video-area" (texto que trava/revela + CTA "Fale com a gente
   agora") — pedido do usuário:
   1) o bloco de texto+botão ficava centralizado verticalmente no trecho
      fixo (100vh), sobrando bastante vazio embaixo do botão — sobe pra
      perto do topo em vez de centralizar.
   2) replicar a "grade" decorativa (.shape-top, canto esquerdo) também do
      lado direito, um pouco maior. O efeito de "subir enquanto rola" já
      é de graça: .shape-top é position:absolute dentro do
      .reveal-pin-area, que é bem alto (220vh) mas fica com o conteúdo
      fixo (position:sticky) — então, conforme o scroll avança pelos
      220vh, a forma (parada no documento) atravessa a tela de baixo pra
      cima por trás do texto fixo. .shape-bottom já existe no HTML com
      esse mesmo propósito, só que estava em bottom:0 (só aparecia quase
      no fim do scroll) e com z-index:-1 (escondida). Reposicionada pra
      nascer numa altura parecida com a do shape-top, só que do lado
      direito e um pouco maior.
   ========================================================================== */
.reveal-pin-sticky {
  justify-content: flex-start;
  padding-top: 14vh;
}
.alrge-video-area .shape-bottom {
  left: auto;
  right: 0;
  top: 32%;
  bottom: auto;
  z-index: 1;
  width: 360px;
}
.alrge-video-area .shape-bottom img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1199px) {
  .alrge-video-area .shape-bottom {
    display: none;
  }
}

/* ==========================================================================
   Hover no dropdown "Serviços" do header (mega menu) — mesmo padrão do
   card "Ponto & Acesso" da seção de soluções (.single-solution-style-one):
   fundo vira gradiente azul e uma "grade" decorativa aparece no canto
   com um leve deslize. Feito só em CSS (::after), sem duplicar HTML nos
   9 itens x cada uma das ~20 páginas que repetem esse mesmo menu — esse
   arquivo já é carregado em todas. .with-megamenu está tanto no header
   normal quanto no header--sticky, então cobre os dois de graça.
   ========================================================================== */
.with-megamenu .submenu .single-menu .single-service-area-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding: 14px 16px !important;
  transition: background 0.3s ease;
}
.with-megamenu .submenu .single-menu .single-service-area-wrapper::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 164px;
  height: 164px;
  background: url("../images/service/icons/01.png") no-repeat center / contain;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.with-megamenu .submenu .single-menu .single-service-area-wrapper:hover {
  background: linear-gradient(135deg, #3534ff 0%, #2a29d9 100%) !important;
}
.with-megamenu .submenu .single-menu .single-service-area-wrapper:hover::after {
  opacity: 0.5;
  transform: translateX(0);
}
.with-megamenu .submenu .single-menu .single-service-area-wrapper:hover .info .title,
.with-megamenu .submenu .single-menu .single-service-area-wrapper:hover .info p {
  color: #fff !important;
}
.with-megamenu .submenu .single-menu .single-service-area-wrapper:hover img {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Seção "Equipe especializada" (home) — duas fotos (as mesmas do hero e
   da página Sobre: hero-suporte-servidor.jpg / hero-equipe-monitor.png)
   lado a lado, dentro de losangos inclinados — mesmo clip-path usado nas
   fotos do hero (.right-clippath-wrapper .left-image), só que numa classe
   própria pra não herdar nada do comportamento do hero.
   Jarallax de verdade: a biblioteca (static/js/vendor/jarallax.js) já é
   inicializada pra QUALQUER .jarallax da página no script no fim do
   index.html — essas duas fotos entram de graça, sem precisar de JS novo.
   Igual ao hero, esse init só roda no desktop/tablet (>767px) — no
   mobile as fotos ficam paradas, com o object-fit:cover garantindo o
   enquadramento mesmo sem o efeito de profundidade.
   Continuam lado a lado em qualquer largura de tela (nunca vira coluna),
   diferente do hero no mobile — de propósito, o pedido foi sem o efeito
   de "passar por cima do texto" (aquele é feito em cima das classes
   .right-clippath-wrapper/.banner-wrapper-one especificamente, no
   gsap-animations.js — como essa seção usa classes novas, não é afetada).
   ========================================================================== */
.equipe-photos-wrapper {
  display: flex;
  gap: 14px;
}
.equipe-photo {
  flex: 1;
  min-width: 0;
  height: 460px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 3.69%, 100% 0%, 100% 96.31%, 0% 100%, 0% 3.69%);
}
.equipe-photo .jarallax-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  .equipe-photo {
    height: 360px;
  }
}
@media (max-width: 767px) {
  .equipe-photo {
    height: 220px;
  }
}

/* ==========================================================================
   Título "Reconhecimento facial e controle de acesso" (seção "E O PONTO
   & ACESSO?") — o tema aplica word-break:break-word em todos os h1-h6
   (útil pra não estourar títulos longos), mas isso deixa a lib quebrar
   "Reconhecimento" no meio da palavra em telas estreitas. Volta ao
   comportamento normal (só quebra em espaço) só pra esse título — a
   regra global continua intacta pro resto do site.
   ========================================================================== */
@media (max-width: 767px) {
  .bg-gradient-5-bold .service-list-between .left .title {
    word-break: normal;
    overflow-wrap: normal;
  }
}
@media (max-width: 375px) {
  .bg-gradient-5-bold .service-list-between .left .title {
    font-size: 36px;
  }
}

/* ==========================================================================
   Seção "Equipe especializada" — resumida no mobile: título curto (sem o
   complemento "todos os dias na sua empresa") e sem o parágrafo de
   descrição, ficando só eyebrow + título + botão + fotos. Desktop
   continua com a versão completa.
   ========================================================================== */
.equipe-title-mobile {
  display: none;
}
@media (max-width: 767px) {
  .equipe-title-desktop {
    display: none;
  }
  .equipe-title-mobile {
    display: block;
  }
  .equipe-desc {
    display: none;
  }
}

/* ==========================================================================
   Títulos "Suporte no dia a dia", "Infraestrutura gerenciada" e
   "Reconhecimento facial e controle de acesso" (os 3 usam a mesma classe
   .service-list-between .left .title) — mais espaço entre as linhas
   quando o título quebra em mais de uma linha.
   ========================================================================== */
.service-list-between .left .title {
  line-height: 1.6;
}

/* ==========================================================================
   Cards de blog/notícias (.blog-post-item) — título e subtítulo sempre
   brancos (o tema deixava o subtítulo cinza, e o título virava azul só
   no :hover — que no touch nem sempre "solta" direito). E a borda
   animada em LED, que só acontecia no :hover (sem efeito nenhum ao
   toque), fica sempre ligada no mobile.
   ========================================================================== */
/* especificidade dobrada (.blog-post-item.blog-post-item) de propósito:
   a regra original do :hover tem a mesma força (classe+pseudo-classe+
   classe, !important) e vem DEPOIS no HTML (está num <style> inline no
   fim do <head>, depois deste arquivo) — em empate, quem vem depois
   ganha. Repetir a classe aumenta a especificidade sem depender de
   ordem, então essa regra vence não importa em qual página rode
   (index.html, noticias/index.html, ou a página do artigo). */
.blog-post-item.blog-post-item .card-title,
.blog-post-item.blog-post-item:hover .card-title {
  color: #ffffff !important;
}
.blog-post-item.blog-post-item .card-text {
  color: #ffffff !important;
}
@media (max-width: 767px) {
  /* !important porque a regra base (sem :hover) tem a mesma
     especificidade e vem depois no HTML — sem isso, ela venceria e
     a "borda ligada" nunca apareceria. */
  .blog-post-item .card::before {
    left: 100% !important;
  }
  .blog-post-item .card::after {
    top: 100% !important;
  }
  .blog-post-item .card .card-border-bottom {
    right: 100% !important;
  }
  .blog-post-item .card .card-border-left {
    bottom: 100% !important;
  }
}

/* ==========================================================================
   Rodapé enxuto (footer-enxuto) — substitui o bloco antigo de 6 colunas, que
   ficava numa faixa azul (#0B0A33) própria acima da barra do WhatsApp e
   ocupava quase uma tela inteira. Agora são 3 colunas na MESMA faixa escura
   do copyright, logo abaixo da barra do WhatsApp.
   As páginas usam .container do tema, que no mobile fica sem padding lateral
   (o conteúdo colava na borda esquerda da tela) — as regras abaixo só
   devolvem esse respiro e apertam os espaçamentos em tela pequena.
   ========================================================================== */
@media (max-width: 767px) {
  /* .container.footer-enxuto: repetir as duas classes sobe a especificidade
     acima da regra .container do tema, que também usa !important — sem isso
     o padding lateral não pega e o texto cola na borda esquerda da tela. */
  .container.footer-enxuto,
  .footer-copyright > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .container.footer-enxuto {
    padding-top: 32px !important;
  }
  .footer-enxuto .logo img {
    max-width: 130px !important;
  }
  .footer-enxuto h6 {
    margin-bottom: 12px !important;
  }
  .footer-enxuto ul li {
    margin-bottom: 7px !important;
  }
}