/* css/style.css - Otimizado e Corrigido */

/* =========================================
   1. CONFIGURAÇÕES BASE E OTIMIZAÇÃO
   ========================================= */

/* Prevenção de CLS (Cumulative Layout Shift) */
img {
  content-visibility: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Otimização de Fontes */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
}

/* Otimização de Scroll */
html { 
  scroll-behavior: smooth; 
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
:target { scroll-margin-top: 100px; }

body { font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; }

/* =========================================
   2. VARIÁVEIS (Design System)
   ========================================= */
:root {
  --background: 0 0% 100%;
  --foreground: 215 25% 15%;
  --primary: 215 60% 25%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 20% 96%;
  --secondary-foreground: 215 25% 15%;
  --muted: 210 20% 96%;
  --muted-foreground: 215 15% 45%;
  --border: 210 20% 90%;
  --ring: 215 60% 25%;
  
  /* Cores CMYK */
  --cyan: 195 90% 45%;
  --magenta: 330 85% 55%;
  --yellow: 45 100% 55%;
  --green: 145 65% 45%;
  --orange: 25 95% 55%;
  
  /* WhatsApp */
  --whatsapp: 142 70% 45%;
  --whatsapp-hover: 142 70% 38%;

  /* Gradients & Sombras */
  --gradient-cmyk: linear-gradient(135deg, hsl(var(--cyan)) 0%, hsl(var(--magenta)) 50%, hsl(var(--yellow)) 100%);
  --gradient-hero: linear-gradient(135deg, hsl(215 60% 20%) 0%, hsl(215 60% 30%) 100%);
  --shadow-whatsapp: 0 8px 24px -4px hsl(142 70% 45% / 0.4);
}

/* =========================================
   3. CONTAINMENT (Performance)
   ========================================= */
section {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

section:first-of-type, section.gradient-hero-bg {
  content-visibility: visible;
  contain-intrinsic-size: auto;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* =========================================
   4. COMPONENTES VISUAIS
   ========================================= */
.color-bar { height: 0.5rem; width: 100%; background: var(--gradient-cmyk); }
.gradient-hero-bg { background: var(--gradient-hero); }
.gradient-accent-bg {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%) !important;
  color: #ffffff !important;
}

/* WhatsApp Button */
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 1rem 1.5rem; font-weight: 600; border-radius: 0.75rem;
  transition: all 0.3s ease; background-color: hsl(var(--whatsapp)); color: white;
  box-shadow: var(--shadow-whatsapp);
}
.btn-whatsapp:hover {
  background-color: hsl(var(--whatsapp-hover)); transform: translateY(-2px);
}

.btn-whatsapp-floating {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 9999px;
  background-color: hsl(var(--whatsapp)); box-shadow: var(--shadow-whatsapp);
  animation: pulse-whatsapp 2s infinite; transition: transform 0.3s ease;
}
.btn-whatsapp-floating:hover { transform: scale(1.1); }

@keyframes pulse-whatsapp {
  0%, 100% { box-shadow: 0 0 0 0 hsl(142 70% 45% / 0.5); }
  50% { box-shadow: 0 0 0 16px hsl(142 70% 45% / 0); }
}

/* Animações */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
.animate-fade-in { animation: fadeIn 1s ease-out forwards; opacity: 0; }

/* Overrides Globais */
section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
@media (min-width: 768px) { section { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; } }
#segmentos { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Cores de Texto e Ícones */
.text-pink { color: #ec4899 !important; }
.text-red { color: #ef4444 !important; }
.text-purple { color: #a855f7 !important; }
.text-blue { color: #3b82f6 !important; }
.text-green { color: #22c55e !important; }
.text-orange { color: #f97316 !important; }
.text-cyan { color: #06b6d4 !important; }
.text-yellow { color: #eab308 !important; }
/* =========================================
   5. CALCULADORA & FAQ (CORREÇÕES VISUAIS)
   ========================================= 
*/

/* Botão Selecionado (Pai) */
.calc-option.bg-primary {
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Força TODOS os elementos filhos (título, descrição, etc) a ficarem brancos */
.calc-option.bg-primary * {
  color: #ffffff !important;
  border-color: #ffffff !important;
  opacity: 1 !important;
}

/* FAQ */
#faq .faq-open { border-color: hsl(var(--primary)) !important; background-color: #ffffff !important; }
#faq .faq-open .faq-icon { transform: rotate(180deg); color: hsl(var(--primary)) !important; }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
.faq-open .faq-content { max-height: 2000px !important; }

/* =========================================
   5. CORREÇÕES CRÍTICAS (Restaurado)
   ========================================= */
/* Garante que o fundo do cabeçalho e botões apareçam */
.bg-whatsapp { background-color: hsl(var(--whatsapp)) !important; }
.text-white { color: #ffffff !important; }