@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap");

:root {
  --cream: #f4efe6;
  --ink: #1c1410;
  --muted: #5c534c;
  --forest: #1f5d46;
  --forest-dark: #164736;
  --whatsapp: #128c7e;
  --clay: #c45c26;
  --line: #e4d9c8;
  --card: #fffaf3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, .font-display {
  font-family: Fraunces, Georgia, serif;
  letter-spacing: -0.03em;
}

.bg-cream { background: var(--cream); }
.bg-card, .bg-card\/60 { background: var(--card); }
.bg-ink { background: var(--ink); color: var(--cream); }
.text-ink { color: var(--ink); }
.text-cream { color: var(--cream); }
.text-muted { color: var(--muted); }
.text-clay { color: var(--clay); }
.text-forest { color: var(--forest); }
.text-white { color: #fff; }
.bg-forest { background: var(--forest); }
.bg-forest-dark { background: var(--forest-dark); }
.bg-whatsapp { background: var(--whatsapp); }
.border-line { border-color: var(--line); }
.border-forest { border-color: var(--forest); }

.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-6xl { max-width: 72rem; }
.max-w-xl { max-width: 36rem; }
.max-w-lg { max-width: 32rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.p-6 { padding: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.flex { display: flex; }
.grid { display: grid; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.rounded-full { border-radius: 999px; }
.h-24 { height: 6rem; }
.w-24 { width: 6rem; }
.object-top { object-position: top; }
.bg-clay { background: var(--clay); }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.border { border-width: 1px; border-style: solid; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-sm { font-size: 0.9rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; line-height: 1.1; }
.uppercase { text-transform: uppercase; }
.leading-7 { line-height: 1.75; }
.leading-8 { line-height: 2; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }
.w-full { width: 100%; }
.min-h-full { min-height: 100%; }
.h-16 { height: 4rem; }
.pb-24 { padding-bottom: 6rem; }
.border-b { border-bottom: 1px solid var(--line); }
.hidden { display: none; }
.inline-flex { display: inline-flex; }
.z-40 { z-index: 40; }
.antialiased { -webkit-font-smoothing: antialiased; }

header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 239, 230, 0.94);
  border-bottom: 1px solid var(--line);
}
header img { width: 40px; height: 40px; object-fit: contain; }

.bg-forest, a.bg-forest, button.bg-forest {
  background: var(--forest);
  color: #fff;
}
a.bg-whatsapp { background: var(--whatsapp); color: #fff; }

.btn-on-dark {
  color: #1c1410 !important;
  background: #f4efe6;
}

.hero-blob { position: relative; isolation: isolate; }
.hero-blob-back {
  position: absolute;
  inset: 8% 4% 2% 8%;
  border-radius: 62% 38% 48% 52% / 42% 58% 42% 58%;
  background: linear-gradient(145deg, #c45c26 0%, #1f5d46 78%);
  transform: rotate(-8deg);
}
.hero-blob-photo {
  position: relative;
  overflow: hidden;
  border-radius: 58% 42% 52% 48% / 38% 52% 48% 62%;
  box-shadow: 0 28px 50px -24px rgba(28, 20, 16, 0.45);
}
.hero-blob-photo img { height: 420px; width: 100%; object-fit: cover; object-position: center 18%; }

footer { border-top: 1px solid var(--line); background: #efe8db; }

@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:text-6xl { font-size: 3.75rem; line-height: 1.05; }
  .sm\:text-5xl { font-size: 3rem; }
  .sm\:h-64 { height: 16rem; }
  .sm\:grid-cols-2 { grid-template-columns: 1fr 1fr; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:block { display: block; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:grid-cols-2 { grid-template-columns: 1fr 1fr; }
  .md\:grid-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .md\:pb-0 { padding-bottom: 0; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-\[1\.1fr_0\.9fr\],
  .lg\:grid-cols-2 { grid-template-columns: 1.1fr 0.9fr; }
  .lg\:grid-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
}
@media (max-width: 767px) {
  header nav { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}