/* ============================================
   Desafio de 30 Dias de Inteligência Financeira Bíblica
   Estilos da Landing Page
   ============================================ */

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1A1A1A;
  line-height: 1.7;
  background: #E8DCC0;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  background: #FFFFFF;
}

p { margin: 0; }
strong { font-weight: 700; }
em { font-style: italic; }
.serif { font-family: 'Lora', Georgia, serif; }

/* ============ ANIMAÇÕES ============ */
@keyframes fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ DIAGNÓSTICO INTERATIVO ============ */
.diag-item:hover {
  background: #F5F5F5 !important;
  border-color: #C9C9C9 !important;
}

.diag-item.checked {
  background: #F4FAE8 !important;
  border-left-color: #2C5A1F !important;
  border-color: #B8D690 !important;
}

.diag-item.checked .diag-box {
  background: #2C5A1F !important;
  border-color: #2C5A1F !important;
}

.diag-item.checked .diag-tick {
  display: inline-block !important;
}

/* ============ RESPONSIVO MOBILE ============ */
@media (max-width: 600px) {
  h1 { font-size: 38px !important; }
  .hero-deck { font-size: 19px !important; }
  .section { padding-left: 24px !important; padding-right: 24px !important; }
  .display-30 { font-size: 26px !important; }
  .display-32 { font-size: 28px !important; }
  .display-34 { font-size: 30px !important; }
  .calendar-grid { grid-template-columns: repeat(15, 1fr) !important; }
  .icons-grid { grid-template-columns: repeat(5, 1fr) !important; }
  .bonus-mockup { flex-direction: column !important; gap: 18px !important; }
  .product-mockup { flex-direction: column !important; gap: 12px !important; }
  .product-mockup .divider { display: none !important; }
  .badge-row { flex-direction: column !important; }
}