/* ======================================================================
   LAYOUT GERAL - LIONWATT
   ----------------------------------------------------------------------
   Este arquivo controla:
   - HEADER (topo fixo)
   - MENU / NAVEGAÇÃO
   - BOTÃO DO WHATSAPP NO TOPO
   - PADRÃO DAS SEÇÕES (fundo claro/escuro/destaque)
   - TÍTULOS E SUBTÍTULOS DE SEÇÃO
   - FOOTER (rodapé)
   - FAIXA DE CONFIANÇA (barra logo abaixo do hero)
   - BADGES / CHIPS
   - BOTÃO FLUTUANTE DO WHATSAPP
   ====================================================================== */


/* ======================================================================
   HEADER FIXO NO TOPO
   ====================================================================== */

.lw-header {
  /* Fixa o header no topo da página */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  /* Mantém o header acima de tudo que está na tela */
  z-index: 50;

  /* Espaçamento interno (altura do header) */
  padding: 14px 0;

  /* Fundo escuro com leve transparência e blur para efeito moderno */
  background: rgba(3, 16, 40, 0.96);
  backdrop-filter: blur(12px);

  /* Linha bem suave na parte de baixo do header */
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

/* Conteúdo interno do header:
   - logo à esquerda
   - menu no centro/direita
   - botão WhatsApp à direita */
.lw-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ======================================================================
   LOGO LIONWATT
   ====================================================================== */

.lw-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Bolinha com ícone de raio (ou logo) */
.lw-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Parte do texto "Watt" em destaque (amarelo) */
.lw-logo-text span {
  color: var(--lw-accent);
}


/* ======================================================================
   NAVEGAÇÃO DO TOPO (MENU)
   ====================================================================== */

.lw-nav a {
  margin: 0 10px;           /* Espaçamento horizontal entre os links */
  color: #e5e7eb;           /* Cor clara padrão para o menu */
  font-size: 14px;
}

.lw-nav a:hover {
  color: var(--lw-accent);  /* Amarelo de destaque no hover */
}


/* ======================================================================
   BOTÃO DO WHATSAPP NO HEADER
   ====================================================================== */

.lw-nav-whats {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;

  /* Borda amarela para chamar atenção */
  border: 1px solid rgba(252, 173, 11, 0.8);

  /* Fundo azul levemente transparente */
  background: rgba(12, 63, 140, 0.2);

  font-size: 12px;
}

.lw-nav-whats i {
  font-size: 16px;
}


/* ======================================================================
   SEÇÕES PADRÃO (BLOCOS PRINCIPAIS)
   ====================================================================== */

/* Classe base que define o espaçamento vertical das seções */
.lw-section {
  padding: 70px 0;     /* 70px em cima e 70px embaixo */
}

/* Seção com fundo branco */
.lw-section-light {
  background: #ffffff;
  color: var(--lw-text-main);
}

/* Seção com fundo cinza claro */
.lw-section-muted {
  background: var(--lw-bg-light);
  color: var(--lw-text-main);
}

/* Seção com fundo escuro */
.lw-section-dark {
  background: #020817;
  color: #e5e7eb;
}

/* Seção em destaque (azul degradê) – usada no call final de contato */
.lw-section-highlight {
  background: linear-gradient(135deg, var(--lw-primary-soft), var(--lw-primary-dark));
  color: #ffffff;
}


/* ======================================================================
   TÍTULOS E SUBTÍTULOS DE SEÇÃO
   ====================================================================== */

/* Título principal da seção (ex.: "Serviços que a LionWatt oferece") */
.sec-heading {
  font-size: 26px;
  margin-bottom: 10px;
}

/* Centraliza o título */
.sec-heading-center {
  text-align: center;
}

/* Versão branca do título (usada em fundo escuro) */
.sec-heading-white {
  color: #ffffff;
}

/* Subtítulo de seção (texto logo abaixo do título) */
.sec-subtitle {
  font-size: 14px;
  max-width: 560px;        /* Limita largura para não ficar muito comprido */
  margin: 0 auto 30px;     /* Centraliza e deixa 30px embaixo */
  opacity: 0.9;
  text-align: center;
}

/* Subtítulo em branco para usar em fundo escuro ou azul */
.sec-subtitle-white {
  color: #e5f0ff;
}


/* ======================================================================
   GRID DA SEÇÃO "SERVIÇOS"
   ====================================================================== */
/* Esses estilos garantem que as colunas dos serviços
   estiquem na vertical, permitindo que os cards (.lw-service-card)
   usem height: 100% e fiquem todos com a MESMA ALTURA. */
.lw-services-grid .col-md-3,
.lw-services-grid .col-sm-6 {
  display: flex;            /* Faz a coluna virar um flex container */
  align-items: stretch;     /* Estica o conteúdo (card) na altura total */
}

/* ======================================================================
   FOOTER (RODAPÉ)
   ====================================================================== */

.lw-footer {
  background: #020617;   /* Fundo bem escuro */
  color: #9ca3af;        /* Texto cinza claro */
  padding: 18px 0 28px;  /* Espaço interno do rodapé */
  position: relative;
  font-size: 12px;
}

/* Parágrafos dentro do footer */
.lw-footer p {
  margin: 0;
}

/* Link "Área interna" no rodapé */
.lw-footer .login-link {
  color: var(--lw-accent);
}

/* Helpers para personalizar cores de texto no footer
   - Use no HTML assim:
   <p class="lw-footer-text-strong">...</p>
   <p class="lw-footer-text-soft">...</p>
*/
.lw-footer-text-strong {
  color: #e5e7eb;   /* texto mais forte / mais branco */
}

.lw-footer-text-soft {
  color: #9ca3af;   /* texto padrão já usado no footer */
}


/* ======================================================================
   BOTÃO "VOLTAR AO TOPO" (atualmente desativado no HTML)
   ====================================================================== */

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  border-radius: 999px;

  background: var(--lw-accent);   /* bolinha amarela */
  display: flex;
  align-items: center;
  justify-content: center;

  color: #111827;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.5);
}


/* ======================================================================
   FAIXA DE CONFIANÇA (LOGO ABAIXO DO HERO)
   ====================================================================== */

.lw-trust-bar {
  position: relative;
  z-index: 2;

  /* Espaçamento interno da barra */
  padding: 16px 0;

  /* Fundo escuro levemente transparente */
  background: rgba(3, 7, 18, 0.88);

  /* Linhas bem suaves em cima e embaixo */
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);

  color: #e5e7eb;
}

/* Ícones da barra (relógio, escudo, cartão) */
.lw-trust-bar i {
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
  color: var(--lw-accent);
}

/* Texto abaixo de cada ícone */
.lw-trust-bar span {
  font-size: 13px;
}


/* ======================================================================
   BADGES / CHIPS (ETIQUETAS DE DESTAQUE)
   ====================================================================== */

.lw-badge-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}

/* Cada badge individual */
.lw-badge {
  background: rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e5e7eb;
}

.lw-badge i {
  font-size: 14px;
}


/* ================================
   BOTÃO FLUTUANTE WHATSAPP
   ================================ */

.lw-whats-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  background: #25D366;       /* Verde oficial do WhatsApp */
  color: #ffffff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  text-decoration: none;
  z-index: 9999;             /* Nunca fica atrás de nada */
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Efeito de destaque no hover */
.lw-whats-float:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 26px rgba(0,0,0,0.45);
}


/* ======================================================================
   FIM DO LAYOUT.GERAL
   ====================================================================== */