/* Corrigir scroll automático no carregamento da página */
html {
    scroll-behavior: auto !important;
}

/* Garantir que a página comece no topo */
html, body {
    scroll-padding-top: 0 !important;
}


    /* Título hero profissional - destaque na primeira palavra */

/* Classe para aplicar na primeira palavra do título */
.hero-highlight {
  background-color: #003d4d;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
}

/* Ajustar o título para não ter quebras ruins */
.zs-banner .zs-banner-content h1 {
  font-size: 48px;
  line-height: 1.4;
  color: #003d4d;
  font-weight: 700;
  display: block;
}

/* Remover qualquer fundo no título geral */
.zohositesheading {
  background: none !important;
}

/* Forçar título em layout horizontal profissional */
.zs-banner .zs-banner-content h1 {
  white-space: nowrap;
  text-align: left;
  max-width: 100%;
}

/* Melhorar espaçamento do texto descritivo */
.zs-banner .zs-banner-content p {
  font-size: 18px;
  line-height: 1.8;
  margin-top: 24px;
  max-width: 600px;
  color: #555;
}

/* Bordas neon nas fotos da seção Sobre - combinando com o escudo */
/* Seleciona todas as imagens na seção Sobre */
#Sobre img {
  border: 6px solid;
       border-color: #00ffff #00ffff #00ffff #00ffff;  border-radius: 12px;
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 1),
    0 0 60px rgba(255, 0, 255, 0.8),
    0 0 90px rgba(0, 255, 255, 0.6),
    inset 0 0 20px rgba(255, 0, 255, 0.3);
  transition: all 0.3s ease;
}}

/* Efeito hover para as fotos */
#Sobre img:hover {
  box-shadow: 
    0 0 50px rgba(0, 255, 255, 1),
    0 0 100px rgba(255, 0, 255, 1),
    0 0 150px rgba(0, 255, 255, 0.8),
    inset 0 0 30px rgba(255, 0, 255, 0.5);  transform: scale(1.02);
}

/* Ocultar as duas fotos menores - manter apenas a foto maior (solo professional) */
#Sobre .zs-tplrow:nth-child(2) .zs-tplcolumn:nth-child(2) img,
#Sobre .zs-tplrow:nth-child(3) .zs-tplcolumn:nth-child(2) img {
  display: none !important;
}

/* Ocultar colunas vazias após remover as imagens */
#Sobre .zs-tplrow:nth-child(2) .zs-tplcolumn:nth-child(2),
#Sobre .zs-tplrow:nth-child(3) .zs-tplcolumn:nth-child(2) {
  display: none !important;
}

/* Alterar cores do tema para combinar com o escudo fluorescente */

/* Fundo da seção hero - gradiente dark com tons do escudo */
.zs-banner {
  background: linear-gradient(135deg, #0a0015 0%, #1a0033 50%, #0a0015 100%) !important;
}

/* Botão principal - cyan fluorescente */
.zs-banner .zs-btn-primary {
  background: linear-gradient(135deg, #00ffff 0%, #00ccff 100%) !important;
  color: #000000 !important;
  border: 2px solid #00ffff !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5) !important;
  font-weight: 700 !important;
}

.zs-banner .zs-btn-primary:hover {
  background: linear-gradient(135deg, #ff00ff 0%, #cc00ff 100%) !important;
  border-color: #ff00ff !important;
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.7) !important;
  transform: scale(1.05);
}

/* Botão secundário - borda fluorescente */
.zs-banner .zs-btn-secondary {
  background: transparent !important;
  color: #00ffff !important;
  border: 2px solid #00ffff !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3) !important;
  font-weight: 700 !important;
}

.zs-banner .zs-btn-secondary:hover {
  background: rgba(0, 255, 255, 0.1) !important;
  color: #ff00ff !important;
  border-color: #ff00ff !important;
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.5) !important;
  transform: scale(1.05);
}

/* Botões do menu de navegação */
.zs-navbar .zs-nav-link {
  color: #00ffff !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.zs-navbar .zs-nav-link:hover,
.zs-navbar .zs-nav-link.active {
  color: #ff00ff !important;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.6) !important;
}

/* Botão ativo do menu */
.zs-navbar .zs-btn-primary {
  background: linear-gradient(135deg, #00ffff 0%, #00ccff 100%) !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
}

.zs-navbar .zs-btn-primary:hover {
  background: linear-gradient(135deg, #ff00ff 0%, #cc00ff 100%) !important;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.6) !important;
}

/* Seção Sobre - fundo escuro */
#Sobre {
  background: linear-gradient(135deg, #0a0015 0%, #1a0033 50%, #0a0015 100%) !important;
}

/* Ajustar cor do texto na seção Sobre */
#Sobre h2,
#Sobre h3,
#Sobre p {
  color: #ffffff !important;
}

/* Substituir tons esverdeados por tons variados claros de cyan */

/* Fundo geral do site - cyan bem clarinho */
body {
  background-color: #E0FFFF !important;
}

/* Hero section - cyan clarinho */
.zs-banner {
  background: #E0FFFF !important;
}

/* Botão principal - cyan mais escuro */
.zs-btn-primary,
button.zs-btn-primary,
a.zs-btn-primary {
  background: linear-gradient(135deg, #00FFFF 0%, #00DDFF 100%) !important;  color: #FFFFFF !important;
  border: 2px solid #00FFFF !important;  box-shadow: 0 0 20px rgba(0, 206, 209, 0.4) !important;
}

.zs-btn-primary:hover {
  background: linear-gradient(135deg, #00FFFF 0%, #00E5E5 100%) !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.6) !important;
  transform: scale(1.05);
}

/* Forçar botões verdes a serem cyan */
.zs-banner button[class*="btn"],
.zs-banner a[class*="btn"],
button[style*="background"],
a[style*="background"] {
  background-color: #00FFFF !important;  color: #FFFFFF !important;  color: #FFFFFF !important;
  border-color: #00FFFF !important;}

/* ULTRA-ESPECÍFICO: Forçar botão verde a ser CYAN PURO - SEM VERDE! */
a.zs-btn-primary.zs-btn-primary.zs-btn-primary,
button.zs-btn-primary.zs-btn-primary.zs-btn-primary,
.zs-banner > * a[class*="btn"],
.zs-banner > * button[class*="btn"] {
  background-color: #00E5FF !important;  color: #FFFFFF !important;
  border: 2px solid #00E5FF !important;  box-shadow: 0 0 20px rgba(0, 169, 255, 0.5) !important;
}

.zs-banner a.zs-btn-primary:hover,
.zs-banner button.zs-btn-primary:hover {
  background: linear-gradient(135deg, #00BFFF 0%, #00A9FF 100%) !important;
  box-shadow: 0 0 30px rgba(0, 191, 255, 0.7) !important;
}


/* Bordas em degradê azul/cyan para a foto do profissional */
.zsoverlay-image img {
   border-top: 8px solid #00DDFF;
  border-right: 8px solid #0099FF;
  border-bottom: 8px solid #00FFFF;
  border-left: 8px solid #0066FF;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0, 191, 255, 0.8), 0 0 50px rgba(0, 153, 255, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.3);
}
/* ATENÇÃO: Publicar o site para ver as cores corretas! */
/* O editor visual pode não mostrar o CSS personalizado corretamente */

/* Diminuir fonte do email para não quebrar linha */
h3:has(a[href*="@"]),
h3 a[href*="@"] {
  font-size: 18px !important;  word-break: break-word;
}

/* ===== RESPONSIVIDADE MOBILE ===== */
/* Ajustes para dispositivos móveis e tablets */

@media only screen and (max-width: 768px) {
  /* Ajustar título principal para mobile */
  .zs-banner .zs-banner-content h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
          margin-top: 60px !important;
  }
  
  /* Ajustar destaque da primeira palavra no mobile */
  .hero-highlight {
    font-size: 28px !important;
    padding: 6px 12px !important;
    margin-right: 6px !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
  }
  
  /* Ajustar parágrafo descritivo */
  .zs-banner .zs-banner-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-top: 16px !important;
    padding: 0 10px !important;
  }
  
  /* Ajustar botões para mobile */
  .zs-banner .zs-btn-primary,
  button.zs-btn-primary,
  a.zs-btn-primary {
    font-size: 16px !important;
    padding: 12px 24px !important;
    margin: 8px 5px !important;
    display: inline-block !important;
    width: auto !important;
  }
  
  /* Ajustar imagens para mobile */
  .zs-banner img,
  #Sobre img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Reduzir bordas da foto no mobile */
  .zsoverlay-image img {
    border-top-width: 4px !important;
    border-right-width: 4px !important;
    border-bottom-width: 4px !important;
    border-left-width: 4px !important;
  }
}

/* ===== CORRIGIR SCROLL AUTOMÁTICO - MANTER TÍTULO VISÍVEL ===== */

/* Garantir que a página sempre mostre o topo */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Espaço para âncoras */
}

/* Ajustar padding do banner para compensar header fixo */
.zs-banner {
  padding-top: 100px !important;
  scroll-margin-top: 0 !important;
}

/* Ajustar âncora #home para não cortar o título */
#home {
  scroll-margin-top: 0px !important;
  padding-top: 0px !important;
}

/* Garantir que o conteúdo principal comece no topo */
main {
  scroll-margin-top: 0 !important;
}

/* Prevenir scroll automático no mobile */
@media only screen and (max-width: 768px) {
  .zs-banner {
    padding-top: 120px !important;  }
  
  /* Garantir que o título fique completamente visível */
  .zs-banner .zs-banner-content {
    margin-top: 0 !important;
    padding-top: 40px !important;  }
}

/* ===== AJUSTES PARA TABLET ===== */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* Ajustar título para tablet */
  .zs-banner .zs-banner-content h1 {
    font-size: 36px !important;
    line-height: 1.3 !important;
    margin-top: 40px !important;
          display: block !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  /* Garantir que o título não desapareça no tablet */
  .zs-banner .zs-banner-content h1,
  #Group-24 {
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* Ajustar destaque da primeira palavra no tablet */
  .hero-highlight {
    font-size: 36px !important;
    padding: 8px 14px !important;
  }
  

  .zs-banner {
    padding-top: 100px !important;
  }
  
  /* Ajustar conteúdo do banner */
  .zs-banner .zs-banner-content {
    padding-top: 30px !important;
  }
}

/* ===== CENTRALIZAR FOTO NO TABLET E MOBILE ===== */
@media only screen and (max-width: 1024px) {
  /* Centralizar imagem do escudo/foto */
  .zsoverlay-image,
  .zs-banner img,
  img[alt*="Cybersecurity"],
  img[alt*="Shield"],
  img[alt*="Proteção"] {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
  }
  
  /* Garantir que o container da imagem também esteja centralizado */
  .zs-banner .zsoverlay-image,
  a[href*="Lightbox"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  

  /* Centralizar foto pessoal/perfil */
  img[alt*="Best"],
  img[alt*="Customer"],
  .zs-section img,
  section img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: table !important;
    width: auto !important;  }

  /* Centralizar botões no tablet e mobile */
  .zs-banner a,
  .zs-banner .zs-button,
  a[href*="mailto"],
  section a {
margin-left: auto !important;
    margin-right: auto !important;
    display: table !important;
    width: auto !important;  }}
}

/* Alterar borda da imagem para magenta/vermelho */
#Sobre img[alt="Best Customer"] {
    border: 8px solid #D4DBE8 !important; /* Cinza claro azulado */