/* Importação da Fonte Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

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

body {
  font-family: 'Poppins', sans-serif;
  color: #f5f5f5;
  line-height: 1.6;
  background-color: #000;
  overflow-x: hidden;
  padding-bottom: 110px; /* espaço para o botão flutuante */
}

/* Containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Títulos */
h1, h2 {
  font-weight: 700;
  margin-bottom: 20px;
  color: #f1c40f;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
h1 { font-size: 2.8rem; line-height: 1.2; }
h2 { font-size: 2rem; }

p { color: #ddd; margin-bottom: 25px; }
img { max-width: 100%; display: block; border-radius: 10px; }

/* --- BOTÕES GERAIS --- */
.btn, .btnP {
  display: inline-block;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  line-height: 1.3;
  text-align: center;
}

/* Botão principal (desktop) */
.btn {
  background-color: #25D366;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}
.btn:hover {
  background-color: #1eb954;
  transform: translateY(-2px);
}

/* Botão secundário */
.btnP {
  background: transparent;
  border: 2px solid #25D366;
  color: #25D366;
}
.btnP:hover {
  background: #25D366;
  color: #fff;
}

/* --- BOTÃO FLUTUANTE --- */
.btn.fixed-whatsapp {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background-color: #25D366;
  color: #fff;
  font-weight: 600;
  font-size: clamp(0.85rem, 2.6vw, 0.95rem);
  text-align: center;
  padding: 14px 40px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(37,211,102,0.35);
  transition: all 0.3s ease;
  min-width: 240px;
  max-width: 90%;
  line-height: 1.3;
  white-space: normal;
}
.btn.fixed-whatsapp:hover {
  background-color: #1eb954;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.45);
}

/* --- MOBILE --- */
@media (max-width: 768px) {

  /* Mostrar botão flutuante no mobile */
  .btn.fixed-whatsapp {
    display: inline-block !important;
  }

  /* Esconder botões fixos de desktop */
  .hero .btn:not(.fixed-whatsapp),
  .main-cta .btn,
  .hero .btnP,
  .main-cta .btnP {
    display: none !important;
  }
}

/* --- DESKTOP --- */
@media (min-width: 769px) {
  /* Esconde o botão flutuante */
  .btn.fixed-whatsapp {
    display: none !important;
  }

  /* Exibe os botões padrão */
  .hero .btn:not(.fixed-whatsapp),
  .main-cta .btn,
  .hero .btnP,
  .main-cta .btnP {
    display: inline-block;
  }
}

/* --- HERO --- */
.hero {
  text-align: center;
  padding: 20px 20px 60px;
  background: linear-gradient(180deg, #000 0%, #111 100%);
}
.hero img {
  margin: 20px auto;
  max-height: 380px;
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.5);
}

/* --- SEÇÕES --- */
.about-crucifix { background-color:#111; padding:60px 0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.about-text h2 { color:#f1c40f; }
.differences { background:#0d0d0d; padding:60px 0; }
.differences h2 { text-align:center; color:#f1c40f; }
.differences-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px 40px; margin-top:30px; }
.difference-item { display:flex; gap:12px; color:#eee; }
.difference-item .icon { font-size:1.8rem; color:#25D366; }

.gallery { padding:60px 0; }
.gallery h2 { text-align:center; margin-bottom:40px; color:#f1c40f; }
.gallery .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }

.testimonials { background:#111; padding:60px 0; }
.testimonials h2 { text-align:center; color:#f1c40f; }
.testimonials-grid { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }

.main-cta { background:#0d0d0d; text-align:center; padding:80px 20px; }
.main-cta h2 { color:#f1c40f; }

.benefits-icons { background:#111; padding:40px 0; }
.icons-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; font-size:0.95rem; color:#25D366; text-align:center; }

/* --- RESPONSIVIDADE EXTRA --- */
@media (max-width: 992px) {
  .about-grid { grid-template-columns:1fr; text-align:center; }
}
@media (max-width: 600px) {
  h1 { font-size:2.2rem; }
  h2 { font-size:1.6rem; }
  .container { padding:30px 15px; }
}