/* ============================================
   PROJETOS BOMBEIROS - CSS PRINCIPAL
   VERSÃO: 2
   Última atualização: 08/02/2026

   IMPORTANTE: Atualize no HTML:
   style.css?v=14 → style.css?v=15 (ou maior)
   ============================================ */

/* =========================
   TEMA (PADRÃO NOVO)
   ========================= */
:root{
  --bg:#F4F8F6;
  --surface:#FFFFFF;
  --border:#CFE3DD;
  --primary:#7FB3A8;
  --primary-hover:#6AA095;
  --text:#2F3E3B;
  --muted:#7A8F8A;
  --tag-bg:rgba(127,179,168,0.12);
  --urgent:#E11919;
}

/* =========================
   RESET
   ========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

button.card-button.card-button--urgent{}

/* =========================
   BASE
   ========================= */
body{
  font-family:'Inter',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Seleção de texto (remove qualquer “vermelho” ao selecionar) */
::selection{
  background:rgba(127,179,168,0.30);
  color:var(--text);
}

/* ============================================
   BOTÃO FLUTUANTE ADMIN
   ============================================ */
.btn-admin-float{
  position:fixed;
  bottom:100px;
  right:30px;
  width:60px;
  height:60px;
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  border-radius:50%;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px rgba(127,179,168,0.40);
  cursor:pointer;
  z-index:9999;
  transition:all 0.3s ease;
  text-decoration:none;
}
.btn-admin-float:hover{
  transform:scale(1.1);
  box-shadow:0 12px 30px rgba(127,179,168,0.50);
}
.btn-admin-float span{font-size:28px;}

/* ============================================
   BADGES / URGENTE
   (mantém urgente em vermelho; resto segue tema)
   ============================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.topic-card__badge{
  top:16px;
  right:16px;
  z-index:10;
}

.badge--urgent{
  background:rgba(225,25,25,0.10);
  border:1px solid rgba(225,25,25,0.30);
  color:var(--urgent);
  animation:pulse-urgent 2s ease-in-out infinite;
  box-shadow:0 0 20px rgba(225,25,25,0.18);
}

.badge__icon{
  width:14px;
  height:14px;
  color:var(--urgent);
}

@keyframes pulse-urgent{
  0%,100%{
    opacity:1;
    box-shadow:0 0 18px rgba(225,25,25,0.22);
    border-color:rgba(225,25,25,0.35);
  }
  50%{
    opacity:0.80;
    box-shadow:0 0 26px rgba(225,25,25,0.12);
    border-color:rgba(225,25,25,0.22);
  }
}

.card-button--urgent{
  background:var(--primary);
  color:#FFFFFF;
}

.topic-card__title{
  color:var(--text);
}

.emoji-icon{
  font-size:48px;
}

/* ============================================
   HEADER
   ============================================ */
.header{
  background:rgba(244,248,246,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:20px 0;
  position:sticky;
  top:0;
  z-index:1000;
}

.header-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  display:flex;
  align-items:center;
}

/* ============================================
   LOGO (ALTERE O TAMANHO AQUI)
   ============================================ */
.logo-img{
  height:120px;
  width:auto;
  max-width:480px;
  object-fit:contain;
  display:block;
  transition:transform 0.3s ease;
}
.logo-img:hover{transform:scale(1.05);}

/* ============================================
   NAVEGAÇÃO
   ============================================ */
.nav{
  display:flex;
  gap:16px;
}

.btn-cta-header{
  padding:12px 24px;
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  border:none;
  border-radius:999px;
  color:#FFFFFF;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 10px 25px rgba(127,179,168,0.30);
  animation:pulse 2s ease-in-out infinite;
}

.btn-cta-header:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(127,179,168,0.40);
}

@keyframes pulse{
  0%,100%{box-shadow:0 10px 25px rgba(127,179,168,0.30);}
  50%{box-shadow:0 10px 34px rgba(127,179,168,0.42);}
}

/* ============================================
   HERO
   ============================================ */
.hero{
  padding:120px 24px 80px;
  text-align:center;
}

.hero-title{
  font-size:56px;
  font-weight:800;
  color:var(--text);
  margin-bottom:24px;
  line-height:1.2;
}

.hero-subtitle{
  font-size:20px;
  color:var(--muted);
  margin-bottom:60px;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}

.hero-cta-text{
  font-size:28px;
  font-weight:800;
  margin-bottom:40px;
  color:var(--primary);
}

/* EFEITO DESKTOP (mantém “destaque”, mas padronizado e SEM vermelho/laranja) */
@media (min-width:1024px){
  .hero-cta-text{
    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    background-size:200% 200%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:gradientShift 3s ease infinite;
    filter:drop-shadow(0 0 18px rgba(127,179,168,0.22));
  }
  @keyframes gradientShift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
  }
}

/* ============================================
   CARDS
   ============================================ */
.cards-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px 80px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:32px;
}

.card{
  background:linear-gradient(145deg,var(--surface),var(--tag-bg));
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  text-decoration:none;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
  color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary-hover));
  transform:scaleX(0);
  transition:transform 0.3s ease;
}

.card:hover::before{transform:scaleX(1);}

.card:hover{
  border-color:var(--primary);
  box-shadow:0 16px 50px rgba(127,179,168,0.18);
  transform:translateY(-8px);
}

.card-icon{
  font-size:48px;
  margin-bottom:20px;
}

.card-title{
  font-size:24px;
  font-weight:800;
  color:var(--text);
  margin-bottom:12px;
}

.card-description{
  font-size:16px;
  color:var(--muted);
  line-height:1.6;
}

/* ============================================
   WHATSAPP FLUTUANTE
   ============================================ */
.whatsapp-float{
  position:fixed;
  bottom:30px;
  right:30px;
  width:60px;
  height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px rgba(37,211,102,0.30);
  cursor:pointer;
  z-index:9998;
  transition:all 0.3s ease;
  text-decoration:none;
}

.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 12px 30px rgba(37,211,102,0.50);
}

.whatsapp-float svg{
  width:32px;
  height:32px;
  fill:#FFFFFF;
}

/* ============================================
   RESPONSIVO - MOBILE
   ============================================ */
@media (max-width:768px){
  .logo-img{
    height:60px;
    max-width:240px;
  }

  .hero-title{font-size:36px;}
  .hero-subtitle{margin-bottom:0px;}
  .hero-cta-text{font-size:22px;}

  .cards-container{grid-template-columns:1fr;}
}

@media (max-width:480px){
  .logo-img{
    height:50px;
    max-width:200px;
  }
}

/* --- ANIMAÇÃO (mantida, mas padronizada no tema) --- */
@keyframes pulse-glow{
  0%{box-shadow:0 0 0 0 rgba(127,179,168,0.70);}
  70%{box-shadow:0 0 0 10px rgba(127,179,168,0);}
  100%{box-shadow:0 0 0 0 rgba(127,179,168,0);}
}

/* --- REGRAS EXCLUSIVAS PARA TABLET E CELULAR --- */
@media screen and (max-width:1024px){
  body{
    background-color:var(--bg) !important;
  }

  header{
    height:auto !important;
    padding:10px 15px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  header img, .logo{
    max-height:40px !important;
    width:auto !important;
    max-width:150px !important;
    margin:0 !important;
  }

  header h1, header p{
    font-size:14px !important;
    margin-left:10px !important;
  }

  /* Botões mobile (padronizados no verde) */
  .btn-mobile-magic, button, input[type="submit"], .btn-destaque{
    background:linear-gradient(45deg,var(--primary),var(--primary-hover)) !important;
    color:#fff !important;
    border:none !important;
    border-radius:50px !important;
    padding:15px 30px !important;
    font-size:16px !important;
    font-weight:bold !important;
    text-transform:uppercase !important;
    width:85% !important;
    margin:20px auto !important;
    display:block !important;
    box-shadow:0 4px 15px rgba(127,179,168,0.35) !important;
    animation:pulse-glow 2s infinite;
  }
}

/* ============================================
   FIM DO CSS
   ============================================ */