/* ============================================================
   HSOLAR — Override "Clean" (estilo Solarz-like)
   Carregado APÓS styles.css. Não editar styles.css.
   Achata o tema: tira fundos escuros, calmar cores, sombras
   sutis, sem animações, mais ar.
   ============================================================ */

/* -------- 1. Animações: AOS reativado (slide ao rolar). Spin do menu segue off. -------- */
.animate-spin { animation: none !important; }

/* -------- 2. Hero / banner: sem fundo, sem mídia escura -------- */
.banner-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  min-height: auto !important;
  align-items: center !important;
  padding: 140px 0 90px !important;
  display: flex !important;
}
.banner-section > img[src*="hero.svg"] { display: none !important; }
/* Neutraliza o overlay invisível ::before do template (servia ao vídeo antigo). */
/* Como tem z-index:1 e position:absolute cobrindo a section, estava interceptando cliques nos CTAs. */
.banner-section::before { content: none !important; display: none !important; }
.hero-cta, .hero-cta-secondary { position: relative; z-index: 2; }
.banner-section p,
.banner-section .text-white { color: #1F2A2E !important; }
.banner-section .text-opacity-70 { --bs-text-opacity: 1 !important; }
.banner-section .text-primary { color: #1565C0 !important; }
.banner-section h1 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #1F2A2E;
  margin-bottom: 1rem;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1565C0;
  margin-bottom: 1.25rem;
}
.hero-mockup {
  filter: drop-shadow(0 14px 40px rgba(21, 101, 192, 0.18));
  border-radius: 14px;
}

/* -------- 3. Seções: fora a alternância dark; tudo branco/cinza-claro -------- */
section.bg-dark, .services.bg-dark { background-color: #FFFFFF !important; }
section.bg-dark *,
section.bg-dark .text-white,
.services.bg-dark .text-white { color: #1F2A2E !important; }
section.bg-dark .text-opacity-70,
.services.bg-dark .text-white-50 { --bs-text-opacity: 1 !important; }
section.bg-dark hr.bg-white { background-color: #E6ECF1 !important; }
.bg-light-gray { background-color: #F8FAFB !important; }

/* Tabs/listas escuras dentro de #fourth */
.services .nav-tabs,
.services .nav-item,
.services .border-top,
.services .border-white { border-color: #E6ECF1 !important; }
.services .nav-link,
.services label { color: #1F2A2E !important; }

/* -------- 4. Cards: tudo branco com sombra sutil, sem alternância colorida -------- */
.card {
  background-color: #FFFFFF !important;
  border: 1px solid #ECEFF3 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(28, 42, 51, 0.04) !important;
}
.card.bg-primary,
.card.bg-dark { background-color: #FFFFFF !important; }
.card .text-white { color: #1F2A2E !important; }
.card .text-opacity-70 { --bs-text-opacity: 1 !important; }
.card.bg-dark h4,
.card.bg-dark p,
.card.bg-primary h4,
.card.bg-primary p { color: #1F2A2E !important; }
/* Hover sutil */
#third .card,
#fifth .card,
#chamados .card,
#appcliente .card { transition: box-shadow .2s, transform .2s; }
#third .card:hover,
#fifth .card:hover,
#chamados .card:hover,
#appcliente .card:hover {
  box-shadow: 0 8px 28px rgba(28, 42, 51, 0.08) !important;
  transform: translateY(-2px);
}

/* Preservar amber em elementos pequenos (check, scroll-top, ícone de botão) */
.round-32.bg-primary,
.round-52.bg-primary,
.btn .btn-icon.bg-white { background-color: #FFB81C !important; color: #1F2A2E !important; }
.card .round-32.bg-primary iconify-icon { color: #1F2A2E !important; }
.get-template .bg-primary,
#scrollToTopBtn { background-color: #FFB81C !important; }

/* -------- 5. Cabeçalho de cada seção: badge discreto, sem ornamentação pesada -------- */
.round-36,
section.bg-dark .round-36,
section .round-36.text-dark {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background-color: #1565C0 !important;
  color: #FFFFFF !important;
}
.round-36 + hr.border-line {
  border: none !important;
  background-color: #DDE3EA !important;
  height: 1px !important;
  opacity: 1 !important;
  margin: 0 !important;
  flex: 1 1 auto;
}
/* Badge-label: virou eyebrow discreto em vez de pílula */
.badge.text-bg-dark,
.badge.text-dark.bg-white,
.badge.bg-white.text-dark {
  background-color: transparent !important;
  color: #6B8294 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}

/* -------- 6. Tipografia: mais ar, h2 menos pesado -------- */
h2 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #1F2A2E !important;
}
p, .fs-5 { line-height: 1.65 !important; }
.fs-5 { font-size: 1.05rem !important; }

/* Títulos nunca quebram no meio da palavra */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
}
/* Em viewports mais estreitos, reduz font de h3/h4 dentro de cards para "parametrizáveis" e similares caberem */
@media (max-width: 1199.98px) {
  .card h3 { font-size: 1.5rem !important; }
  .card h4 { font-size: 1.2rem !important; }
}
@media (max-width: 575.98px) {
  .card h3 { font-size: 1.3rem !important; }
  .card h4 { font-size: 1.1rem !important; }
}

/* -------- 7. Esconder decorações de fundo -------- */
.stats-facts > .position-absolute,
img[src*="customer-satisfaction-bg"],
img[src*="stats-facts-bg"] { display: none !important; }

/* -------- 8. Espaçamento mais generoso entre seções -------- */
section { padding-top: 80px !important; padding-bottom: 80px !important; }
@media (max-width: 991.98px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .banner-section { padding: 110px 0 60px !important; }
}

/* -------- 9. Header: fixo branco sempre, mais leve -------- */
.header { background-color: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(8px); }
.header.fixed-header { background-color: #FFFFFF !important; box-shadow: 0 2px 14px rgba(28, 42, 51, 0.06) !important; }
.header .logo .logo-white { display: none !important; }
.header .logo .logo-dark  { display: block !important; }
/* Hamburger: só o ícone azul, sem borda nem fundo */
.header .toggle-menu,
.header.fixed-header .toggle-menu {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.header .toggle-menu .menu-icon,
.header.fixed-header .toggle-menu .menu-icon { color: #1565C0 !important; }
/* Remove a barra azul de 4px no topo da página */
.header { border-top: 0 !important; }

/* -------- 10. Footer mais limpo -------- */
#footer { background-color: #F8FAFB !important; }

/* -------- 11. CTAs do contato/orçamento: botões coesos -------- */
.btn .btn-text { color: #1F2A2E !important; font-weight: 700; }
/* No hover/foco/active, o fundo escurece (regra do template) — texto vira branco */
.btn:hover .btn-text,
.btn:focus .btn-text,
.btn:active .btn-text,
.btn.active .btn-text,
.btn.show .btn-text { color: #FFFFFF !important; }
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #FFB81C;
  color: #1F2A2E !important;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(255, 184, 28, 0.35);
  transition: transform .15s, box-shadow .2s;
}
.hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255, 184, 28, 0.45);
  color: #1F2A2E !important;
}
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1565C0 !important;
  font-weight: 700;
  padding: 14px 22px;
  text-decoration: none;
}
.hero-cta-secondary:hover { text-decoration: underline; }

/* -------- 12. Aviso legal mais legível -------- */
.services > .container p[style*="font-size: 12px"] { color: #6B8294 !important; }

/* -------- 12b. meet-team-img: mostrar SVG inteiro (sem recorte das laterais) -------- */
/* Template original forçava aspect portrait 5:6 com ::before + object-fit:cover. */
/* Nossos SVGs são landscape — então usamos o aspect natural da imagem. */
.meet-team-img::before { display: none !important; }
.meet-team-img > img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}
.meet-team-img { border-radius: 12px; }

/* -------- 13. Owl carousel: removendo brilho/escuro em portfolio-img -------- */
.portfolio-img { border-radius: 14px; overflow: hidden; box-shadow: 0 6px 22px rgba(28, 42, 51, 0.06); }
.portfolio-img img { border-radius: 14px; }

/* -------- 14. Accordion FAQ: cleaner -------- */
.faq-section .accordion-button { font-weight: 700; color: #1F2A2E; }
.faq-section .accordion-item { border-color: #ECEFF3 !important; border-radius: 12px !important; margin-bottom: 8px; overflow: hidden; }
.faq-section .accordion-body {
  color: #4B5C68;
  padding: 1.5rem 1.75rem 1.75rem !important;
  line-height: 1.65;
}
.faq-section .accordion-button {
  padding: 1.25rem 1.5rem !important;
}