/* style.css */
:root {
  /* Paleta de Cores */
  --bg-principal: #F8F6F4;
  --bg-alternado: #F3E8E6;
  --cor-primaria: #8C3A4A;
  --cor-secundaria: #C06C5B;
  --texto-principal: #333333;
  --texto-secundario: #666666;
  --cta-destaque: #D95763;
}

body {
  background-color: var(--bg-principal);
  color: var(--texto-principal);
  font-family: 'Open Sans', sans-serif; /* Sugestão para o corpo */
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif; /* Sugestão para os títulos */
  color: var(--cor-primaria);
}

/* Estilização Base dos Botões */
.btn-cta-principal {
  background-color: var(--cta-destaque);
  color: white;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
}

.btn-cta-principal:hover {
  background-color: #c24551; /* Tom levemente mais escuro pro hover */
  transform: translateY(-2px);
  color: white;
}

.btn-cta-secundario {
  border: 2px solid var(--cor-primaria);
  color: var(--cor-primaria);
  padding: 10px 28px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-cta-secundario:hover {
  background-color: var(--cor-primaria);
  color: white;
}

/* Efeito Blob Orgânico e Animação na Foto da Dobra 1 */
.hero-image-wrapper {
  position: relative;
  display: inline-block;
  padding: 20px;
}

.hero-blob-img {
  width: 100%;
  max-width: 450px;
  height: auto;
  /* Sombra suave com a sua Cor Primária (Marsala) */
  box-shadow: 0 20px 40px rgba(140, 58, 74, 0.15); 
  /* O segredo do blob: bordas irregulares */
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  /* Animação para dar "vida" ao elemento */
  animation: morph 8s ease-in-out infinite;
  object-fit: cover;
}

/* Keyframes para a animação do border-radius */
@keyframes morph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Badge Flutuante "Comunicar é conectar" */
.floating-badge {
  z-index: 2;
  /* Posicionamento para ficar um pouco para fora da imagem no Desktop */
  bottom: 10%;
  left: -10%;
}

/* Microinteração para os Cards da Dobra 2 */
.transition-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.transition-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(140, 58, 74, 0.1) !important;
}

/* Ajuste do badge para telas menores (Mobile) */
@media (max-width: 991px) {
  .floating-badge {
    left: 5%;
    bottom: 0%;
  }
}

/* --- PREPARAÇÃO PARA ANIMAÇÕES JS --- */

/* Elementos ocultos inicialmente para o Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Classe que o JS vai adicionar quando o elemento aparecer na tela */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Botão Flutuante do WhatsApp */
.btn-whatsapp-flutuante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #25D366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-whatsapp-flutuante:hover {
  transform: scale(1.1);
  background-color: #1ebd5a;
  color: white;
}

/* Animação de pulsar do WhatsApp */
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.pulse-animation {
  animation: pulse-green 2.5s infinite;
}