/* Roka Digital - https://rokadigital.com.br/contato/ */
/* Landing Page: Gás do Povo v1.0 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  color: #333333;
  background: #fff;
  padding-bottom: 72px; /* espaço para barra mobile */
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

/* === ANIMAÇÃO PULSE NOS BOTÕES CTA === */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 15, 255, 0.6); }
  50% { box-shadow: 0 0 0 15px rgba(0, 255, 255, 0); }
}

.btn-pulse {
  animation: pulse-glow 2s infinite;
}

/* === HOVER SUAVE NOS CARDS === */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* === FAQ ACCORDION SUAVE === */
.faq-answer {
  transition: all 0.3s ease;
}
.faq-answer.open {
  display: block !important;
}
.faq-icon.rotated {
  transform: rotate(180deg);
}

/* === BOTÃO FLUTUANTE WHATSAPP ANIMAÇÃO === */
@keyframes bounce-soft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
#float-whatsapp { animation: bounce-soft 3s infinite; }
#float-whatsapp:hover { animation: none; transform: scale(1.15); }

/* === BARRA MOBILE SOMBRA === */
#mobile-cta-bar { box-shadow: 0 -4px 20px rgba(0,0,0,0.15); }

/* === SCROLLBAR PERSONALIZADA === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #000FFF, #00FFFF); border-radius: 3px; }

/* === BARRA GOV ANIMAÇÃO ===*/
.top-bar { border-bottom: 2px solid #00FFFF; }

/* === SEÇÃO HERO GRADIENT === */
#hero {
  background: linear-gradient(135deg, #000000 0%, #0a0a2e 50%, #001a1a 100%);
}

/* === BOTÕES COM HOVER INVERTIDO === */
.btn-gradient {
  background: linear-gradient(90deg, #000FFF, #00FFFF);
  color: white;
  transition: all 0.3s ease;
}
.btn-gradient:hover {
  background: white;
  color: #000FFF;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.btn-gradient-verde {
  background: linear-gradient(90deg, #00FF00, #00FFFF);
  color: #000000;
  transition: all 0.3s ease;
}
.btn-gradient-verde:hover {
  background: white;
  color: #00FF00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

/* === GLOW EFFECTS === */
.glow-azul {
  box-shadow: 0 0 30px rgba(0, 15, 255, 0.4);
}
.glow-cian {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
}
.glow-verde {
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.4);
}

/* === LINK FOCUS ACCESSIBILITY === */
a:focus-visible {
  outline: 3px solid #000FFF;
  outline-offset: 3px;
  border-radius: 4px;
}

/* === FADE IN ANIMATION === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

/* === SELO BADGE === */
.badge-gov {
  background: linear-gradient(90deg, #000FFF, #00FFFF);
  border: 2px solid #00FF00;
}

/* === RESPONSIVE IMAGES === */
img { max-width: 100%; height: auto; }

/* === PRINT HIDE FLOATS === */
@media print {
  #float-whatsapp, #mobile-cta-bar { display: none !important; }
}