/* ===========================
   PÁGINA INICIAL - LIONWATT
   =========================== */

/* ---------------------------------------------------
   HERO (banner principal)
   --------------------------------------------------- */

/* Hero: fundo em degradê + espaço por causa do header fixo */
.lw-hero {
  position: relative;
  min-height: 100vh;
  padding: 90px 0 90px;                           /* topo | laterais | baixo */
  background: linear-gradient(to bottom, #ffffff 20%, #2e68be, #011238);
  color: #ffffff;
  overflow: hidden;
}

/* Textura de fundo por cima do degradê */
.lw-hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: url("../images/bg-textura-azul.png");
  background-size: cover;
  opacity: 0.18;
  pointer-events: none;                           /* não atrapalha clique */
}

/* Brilho / luz laranja no canto superior direito */
.lw-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right,
                               rgba(252, 173, 11, 0.12),
                               transparent 60%);
}

/* Conteúdo do hero acima da textura/overlay */
.lw-hero .container {
  position: relative;
  z-index: 2;
}

/* Alinha texto (esquerda) e card (direita) verticalmente */
.lw-hero-row {
  display: flex;
  align-items: center;
}

/* ---------------------------------------------------
   TEXTO DO HERO (lado esquerdo)
   --------------------------------------------------- */

/* Título principal */
.lw-hero-text h1 {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Destaque em laranja nos spans do título */
.lw-hero-text h1 span {
  color: var(--lw-accent);
}

/* Mini legenda "Eletricista em Matão e região" */
.lw-hero-label {
  margin-top: 15px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 12px;
  opacity: 0.85;
  color: #030303;
  margin-bottom: 8px;
}

/* Parágrafo principal abaixo do título */
.lw-hero-sub {
  margin-top: 15px;
  font-size: 15px;
  max-width: 480px;
  opacity: 0.95;
  color: #1d1d1f;
}

/* Lista dos 3 benefícios (motores, câmeras, alarmes) */
.lw-hero-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
}

.lw-hero-list li {
  font-size: 14px;
  margin-bottom: 6px;
  color: #1d1d1f;
}

.lw-hero-list i {
  color: var(--lw-accent);
  margin-right: 6px;
}

/* Botão "Quero meu orçamento com 15% OFF" */
.lw-hero-cta .btn {
  border-radius: 999px;
  padding: 10px 26px;
  font-weight: 600;
}

/* Texto pequeno logo abaixo do botão */
.lw-hero-cta-note {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  margin-top: 10px;
  color: #e5e7eb;
}

/* ---------------------------------------------------
   CARTÃO DO FORMULÁRIO (lado direito)
   --------------------------------------------------- */

/* Card azul escuro do formulário */
.lw-hero-card {
  background: linear-gradient(180deg,
                              rgba(3, 21, 54, 0.98),
                              rgba(2, 10, 32, 0.98));
  border-radius: 22px;
  padding: 26px 22px 22px;
  box-shadow: var(--lw-shadow-soft);
}

/* Título do card */
.lw-hero-card h2 {
  font-size: 20px;
  margin-bottom: 6px;
  color: #ffffff;
}

/* Subtítulo "Preencha seu nome e WhatsApp..." */
.lw-hero-card-sub {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 18px;
  color: #e5e7eb;
}

/* Botão "Solicitar um orçamento" */
.lw-hero-btn {
  margin-top: 4px;
  border-radius: 12px !important;
  width: 100%;
  font-weight: 600;
}

/* Texto de rodapé do card (Matão, PIX, garantia) */
.lw-hero-card-foot {
  font-size: 12px;
  margin-top: 14px;
  opacity: 0.9;
  color: #e5e7eb;
}

/* ===================================================
   SEÇÃO SERVIÇOS
   - Aqui controlamos o LAYOUT (grid)
   - O visual do card está em components.css (.lw-service-card)
   =================================================== */

/* Espaço da seção de serviços + fundo branco */
#servicos.lw-section {
  background: #ffffff;
  padding: 80px 0;                               /* espaço em cima e embaixo */
}

/* GRID DA SEÇÃO DE SERVIÇOS
   HTML esperado:
   <div class="row lw-services-grid">
     <div class="col-md-3 col-sm-6"> ... </div>
   </div>
*/
.lw-services-grid {
  margin-top: 24px;                              /* espaço entre título e cards */
}

/* Cada coluna Bootstrap dentro do grid
   - vira flex para permitir altura igual
   - ganha espaço embaixo para separar as linhas
*/
.lw-services-grid > [class*="col-"] {
  display: flex;                                 /* permite que o card estique */
  margin-bottom: 24px;                           /* espaço vertical entre cards */
}

/* Card ocupa toda a largura/altura da coluna
   (altura fica igual em todas as colunas da linha)
*/
.lw-services-grid .lw-service-card {
  width: 100%;
  height: 100%;
}

/* RESPONSIVO: empilhar cards com bom espaçamento no mobile */
@media (max-width: 767px) {
  #servicos.lw-section {
    padding: 60px 0;
  }

  .lw-services-grid > [class*="col-"] {
    margin-bottom: 18px;                         /* um pouco menos no mobile */
  }
}

/* ===================================================
   SEÇÃO SOBRE
   =================================================== */

#sobre.lw-section {
  background: var(--lw-bg-light);
}

/* Título da seção "Sobre a LionWatt" em azul */
#sobre .sec-heading {
  color: var(--lw-primary);
}

/* Se quiser borda no mapa, é só descomentar:
.abt-img iframe {
  border-radius: 14px;
}
*/

/* ===================================================
   SEÇÃO CONTATO FINAL
   =================================================== */

#contato.lw-section-highlight {
  background: linear-gradient(135deg,
                              var(--lw-primary),
                              #174ca5);
}

/* ===================================================
   AJUSTE DO SCROLL (HEADER FIXO)
   =================================================== */

/* Compensa o header fixo no topo
   para o conteúdo não ficar escondido atrás dele */
body {
  padding-top: 64px;
}

/* Caso queira afastar um pouco a faixa de confiança do hero,
   é só descomentar e ajustar:
.lw-trust-bar {
  margin-top: 10px;
}
*/


/* ===================================================
   SERVIÇOS (GRID CENTRALIZADO + CTA)
   - Corrige o "4 + 2 + 1" e deixa a última linha bonita
   =================================================== */

#servicos .lw-services-grid {
  display: flex;              /* vira grid flex */
  flex-wrap: wrap;
  justify-content: center;    /* centraliza as linhas */
  gap: 18px;                  /* espaço real entre cards (mais moderno) */
  margin-top: 26px;

  /* anula o comportamento padrão do .row */
  margin-left: 0;
  margin-right: 0;
}

/* Colunas viram “blocos” do grid */
#servicos .lw-services-grid > [class*="col-"] {
  padding: 0;                 /* o gap já faz o espaçamento */
  margin: 0;
  display: flex;              /* permite card esticar */
  float: none;
}

/* 4 por linha no desktop */
@media (min-width: 992px) {
  #servicos .lw-services-grid > [class*="col-"] {
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
  }
}

/* 2 por linha no tablet */
@media (min-width: 768px) and (max-width: 991px) {
  #servicos .lw-services-grid > [class*="col-"] {
    flex: 0 0 calc(50% - 18px);
    max-width: calc(50% - 18px);
  }
}

/* 1 por linha no mobile */
@media (max-width: 767px) {
  #servicos .lw-services-grid {
    gap: 14px;
  }
  #servicos .lw-services-grid > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Card: garante altura e “corpo” comercial */
#servicos .lw-service-card {
  width: 100%;
  height: 100%;
  min-height: 310px;          /* ajuda a padronizar com o texto extra */
  padding: 22px 18px;
}

/* Nota comercial (Dica / Plano) */
.lw-service-note {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px dashed rgba(12, 63, 140, 0.18);
  font-size: 12px !important;
  line-height: 1.45;
  color: var(--lw-text-soft);
}

/* Link para planos com destaque */
.lw-link-plan {
  font-weight: 700;
  color: var(--lw-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lw-link-plan:hover {
  color: var(--lw-accent);
}

/* CTA (botão) abaixo dos cards */
.lw-services-cta {
  margin-top: 26px;
}

.lw-btn-planos {
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
}

.lw-services-cta-foot {
  margin-top: 10px;
  font-size: 12px;
  color: var(--lw-text-soft);
}