/* ===========================
   COMPONENTES REUTILIZÁVEIS
   LIONWATT
   =========================== */

/* ---------------------------
   CARTÃO GENÉRICO (.lw-card)
   Usado como base para blocos
   reaproveitáveis no site
   --------------------------- */
.lw-card {
  background-color: var(--lw-bg-card);            /* Fundo branco padrão de card */
  border-radius: 16px;                            /* Cantos arredondados */
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); /* Sombra suave */
  padding: 20px;                                  /* Espaçamento interno */
}

/* =========================================================
   CARTÃO DE SERVIÇO (.lw-service-card)
   - Usado na seção "Serviços que a LionWatt oferece"
   - AQUI fica todo o VISUAL do card
   - O layout do grid (linhas/colunas) está em index.css
   ========================================================= */
.lw-service-card {
  background: #ffffff;                            /* Fundo branco limpo */
  border-radius: 16px;                            /* Mesmo raio do restante do site */
  padding: 22px 18px;                             /* Espaço interno */
  text-align: left;                               /* Texto alinhado à esquerda */
  margin-bottom: 22px;                            /* Espaço entre cards no mobile */
  border: 1px solid rgba(148, 163, 184, 0.14);    /* Borda suave */
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); /* Sombra leve */

  /* 🔹 Base de altura para todos os cards (padroniza tamanho) */
  min-height: 280px;                              /* Ajuste se quiser: 260 / 300 etc. */

  /* Organização interna do conteúdo */
  display: flex;
  flex-direction: column;                         /* Ícone → título → texto em coluna */
  justify-content: flex-start;                    /* Começa pelo topo */

  /* Animação suave para o hover */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

/* Efeito quando passa o mouse nos cards de serviço */
.lw-service-card:hover {
  /* Sobe levemente o card (efeito de “flutuar”) */
  transform: translateY(-6px);

  /* Sombra mais forte + leve contorno amarelo (cor da marca) */
  box-shadow:
    0 0 0 1px rgba(252, 173, 11, 0.4),           /* contorno amarelo suave */
    0 18px 40px rgba(15, 23, 42, 0.20);          /* sombra mais forte embaixo */

  /* Borda puxa para o amarelo da marca */
  border-color: rgba(252, 173, 11, 0.8);

  /* Fundo fica um pouco mais “quente” (quase branco) */
  background-color: #fffaf0;                     /* branco com toque de amarelo */
}

/* Ícone do card de serviço (engrenagem, câmera, sino, raio etc.) */
.lw-service-card i {
  font-size: 24px;
  color: var(--lw-primary);                       /* Azul padrão LionWatt */
  margin-bottom: 10px;
}

/* Título do serviço */
.lw-service-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--lw-text-main);
}

/* Texto/descritivo do serviço */
.lw-service-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lw-text-soft);
  margin: 0;                                      /* Evita variações de altura por margin */
}

/* ---------------------------
   FORMULÁRIO DO HERO
   (bloco "Solicite um orçamento agora")
   --------------------------- */

/* Cada grupo de campo (nome, celular) ocupa 100% e tem espaço embaixo */
.hero-form .form-group {
  width: 100%;
  margin-bottom: 10px;
}

/* Estilo dos inputs do formulário do hero */
.hero-form .form-control {
  width: 100%;
  border-radius: 12px;
  border: none;                                   /* Bordas removidas, usamos sombra */
  padding-left: 34px;                             /* Espaço para o ícone à direita */
  height: 42px;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.6);
  background-color: #ffffff;
  color: var(--lw-text-main);                     /* Cor do texto digitado */
}

/* Wrapper que permite colocar ícone dentro do input */
.inner-addon {
  position: relative;
}

/* Ícone dentro do input (usuário / telefone) */
.inner-addon i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;                                 /* Cinza suave para ícone */
}

/* ---------------------------
   BOTÃO FULL-WIDTH
   Usado no botão "Solicitar um orçamento"
   --------------------------- */
.btn-full {
  width: 100%;                                    /* Ocupa toda a largura do container */
}

/* ---------------------------
   TEXTO DA SEÇÃO "SOBRE"
   --------------------------- */
.about-text {
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.95;
}

/* ---------------------------
   CONTATO FINAL (CALL TO ACTION)
   Botões da faixa azul "Precisa de ajuda..."
   --------------------------- */
.lw-contact-actions .btn {
  border-radius: 999px;                           /* Formato pílula */
  padding: 10px 26px;
}

.lw-contact-info {
  margin-top: 12px;
  font-size: 13px;
}

/* ---------------------------
   PEQUENOS ÍCONES CIRCULARES
   (se quiser usar ícones em círculo)
   --------------------------- */
.lw-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 63, 140, 0.08);
  color: var(--lw-primary);
}
/* =========================================================
   CARDS DE PLANOS DE MANUTENÇÃO
   - Usados na seção #planos
   - 3 cards: Essencial, Plus (destacado) e Premium
   ========================================================= */

/* Card base de plano (normal) */
.lw-plano-card {
  background: #ffffff;                          /* fundo branco */
  border-radius: 18px;                          /* cantos arredondados */
  padding: 22px 20px 20px;                      /* espaço interno */
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.30);  /* borda suave azulada */
  display: flex;
  flex-direction: column;                       /* header → lista → footer */
  position: relative;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

/* Hover padrão: levanta um pouco o card */
.lw-plano-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

/* Card do meio (PLANO PLUS) em destaque */
.lw-plano-card-featured {
  border-color: var(--lw-accent);               /* borda amarela */
  box-shadow:
    0 0 0 1px rgba(252, 173, 11, 0.55),
    0 20px 46px rgba(15, 23, 42, 0.30);
  transform: translateY(-8px);                  /* sobe um pouco por padrão */
}

/* No hover do destaque, sobe mais um pouco */
.lw-plano-card-featured:hover {
  transform: translateY(-12px);
}

/* Selo "Mais escolhido" no plano Plus */
.lw-plano-selo {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(252, 173, 11, 0.15);
  color: var(--lw-primary-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Cabeçalho do plano: nome + preço + legenda */
.lw-plano-header {
  margin-bottom: 14px;
}

.lw-plano-nome {
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--lw-text-main);
}

.lw-plano-preco {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--lw-primary);
}

.lw-plano-legenda {
  font-size: 12px;
  margin: 0;
  color: var(--lw-text-soft);
}

/* Lista de benefícios do plano */
.lw-plano-lista {
  list-style: none;
  padding: 0;
  margin: 10px 0 16px;
  font-size: 13px;
  color: var(--lw-text-soft);
}

.lw-plano-lista li {
  margin-bottom: 6px;
}

/* Rodapé do cartão (botão) */
.lw-plano-footer {
  margin-top: auto;              /* empurra o botão para o final do card */
}


/* ==============================
   PREÇOS (ÂNCORA + DESCONTO)
   ============================== */
.lw-plano-precos{
  margin: 6px 0 10px;
  display: grid;
  gap: 4px;
}

.lw-plano-preco-old{
  font-size: 12px;
  color: var(--lw-text-soft);
  text-decoration: line-through;
  opacity: 0.9;
}

.lw-plano-preco-now{
  font-size: 22px;
  font-weight: 800;
  color: var(--lw-primary);
  line-height: 1.1;
}

.lw-plano-preco-now span{
  font-size: 13px;
  font-weight: 600;
  color: var(--lw-text-soft);
  margin-left: 6px;
}

.lw-plano-preco-off{
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: rgba(252, 173, 11, 0.18);
  color: var(--lw-primary-dark);
  border: 1px solid rgba(252, 173, 11, 0.55);
}

/* ==============================
   LISTA COM CHECK (BENEFÍCIOS)
   ============================== */
.lw-plano-lista{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 16px;
}

.lw-plano-lista li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  color: var(--lw-text-soft);
  font-size: 13px;
  line-height: 1.45;
}

.lw-plano-lista li i{
  margin-top: 2px;
  font-size: 14px;
  color: var(--lw-accent);
}


/* =========================================================
   DESCRIÇÃO DOS PLANOS (1 EMBAIXO DO OUTRO)
   - NÃO interfere na seção "Serviços"
   ========================================================= */
.lw-descplanos-row > [class*="col-"]{
  margin-bottom: 18px;
}

.lw-descplano-card{
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  position: relative;
}

.lw-descplano-card:hover{
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  border-color: rgba(252, 173, 11, 0.45);
}

.lw-descplano-card-featured{
  border-color: rgba(252, 173, 11, 0.75);
  box-shadow:
    0 0 0 1px rgba(252, 173, 11, 0.35),
    0 20px 46px rgba(15, 23, 42, 0.14);
}

.lw-descplano-selo{
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(252, 173, 11, 0.18);
  color: var(--lw-primary-dark);
  font-weight: 800;
  letter-spacing: 0.4px;
}

.lw-descplano-top{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.lw-descplano-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 63, 140, 0.08);
  color: var(--lw-primary);
  flex: 0 0 44px;
}

.lw-descplano-icon i{
  font-size: 20px;
}

.lw-descplano-head h3{
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--lw-text-main);
}

.lw-descplano-sub{
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--lw-text-soft);
}

.lw-descplano-chip{
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(12, 63, 140, 0.08);
  color: var(--lw-primary-dark);
  border: 1px solid rgba(12, 63, 140, 0.18);
}

.lw-descplano-text{
  font-size: 13px;
  color: var(--lw-text-soft);
  margin: 0 0 12px;
  line-height: 1.55;
}

/* Lista própria (não mexe na lw-plano-lista) */
.lw-descplano-lista{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 12px;
}

.lw-descplano-lista li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  color: var(--lw-text-soft);
  font-size: 13px;
  line-height: 1.45;
}

.lw-descplano-lista li i{
  margin-top: 2px;
  font-size: 14px;
  color: var(--lw-accent);
}

.lw-descplano-ideal{
  margin: 0;
  font-size: 13px;
  color: var(--lw-text-soft);
}

.lw-descplano-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.lw-descplano-actions .btn{
  border-radius: 12px;
}

/* Mobile: botões ocupam largura toda */
@media (max-width: 767px){
  .lw-descplano-actions .btn{
    width: 100%;
  }
}

/* ==============================
   SERVIÇOS (AQUECIMENTO PARA PLANOS)
   ============================== */

/* Dá um respiro melhor nos parágrafos dos cards */
.lw-service-card p {
  margin-bottom: 0;
}

/* Deixa o <strong> mais “vivo” sem mudar layout */
.lw-service-card p strong {
  color: var(--lw-primary);
  font-weight: 700;
}