/* ============================================================
   Farmácias Desconto Fácil — style.css
   Cores principais: Verde, Vermelho, Branco, Cinza Escuro
   ============================================================ */

/* ── Reset e base ─────────────────────────────────────────── */
body {
  font-family: 'Inter', sans-serif;
}

/* Smooth scrolling — definido aqui (não duplicar via JS) */
html {
  scroll-behavior: smooth;
}

/* ── Paleta de marca ──────────────────────────────────────── */
.brand-green {
  background-color: #16a34a; /* green-600 */
}

.brand-green-text {
  color: #16a34a;
}

.brand-red {
  background-color: #dc2626; /* red-600 */
}

.brand-red-text {
  color: #dc2626;
}

.whatsapp-green {
  background-color: #25D366;
}

.whatsapp-green-text {
  color: #25D366;
}

/* ── Botão CTA ────────────────────────────────────────────── */
.cta-button {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ── Imagens com fade-in ──────────────────────────────────── */
img {
  transition: opacity 0.3s ease-in-out;
}

/* ── Header com transição suave ───────────────────────────── */
header {
  transition: transform 0.3s ease;
}

/* ── Responsividade do hero ───────────────────────────────── */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1.125rem;
  }
}

/* ── Scrollbar personalizada ──────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #16a34a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #15803d;
}