/* ===========================================================
   Estilos próprios (não dependem de build/Node).
   As classes utilitárias vêm do Tailwind via CDN; aqui ficam
   apenas a tipografia base, o fundo decorativo e as animações.
   =========================================================== */

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}

/* Quebra de linha tipográfica mais elegante */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* Fundo sutil do hero com as cores da marca */
.bg-mesh {
  background-color: #e4eae9;
  background-image:
    radial-gradient(1100px 480px at 85% -10%, rgba(199, 180, 156, 0.35), transparent 60%),
    radial-gradient(900px 420px at 0% 0%, rgba(255, 255, 255, 0.9), transparent 55%);
}

/* Sombras da marca (caso o config do CDN não carregue por algum motivo) */
.shadow-soft { box-shadow: 0 10px 30px -12px rgba(61, 52, 48, 0.18); }
.shadow-card { box-shadow: 0 4px 20px -8px rgba(61, 52, 48, 0.15); }

/* Animação de entrada (progressive enhancement) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}