body {
  background:
    radial-gradient(circle at top left, rgba(232, 190, 106, 0.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(197, 109, 58, 0.18), transparent 26%),
    #f8f4ec;
  overflow-x: hidden;
}

.pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

.nav-link {
  color: rgba(20, 33, 29, 0.72);
  font-size: 1.08rem;
  transition: color 180ms ease;
}

.nav-link:hover,
.nav-link.active {
  color: #17352b;
}

.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto -4rem -4rem auto;
  width: 14rem;
  height: 14rem;
  border-radius: 9999px;
  background: rgba(232, 190, 106, 0.15);
  filter: blur(30px);
}

.gallery-tile {
  overflow: hidden;
}

.gallery-tile img {
  transition: transform 220ms ease;
}

.gallery-tile:hover img {
  transform: scale(1.04);
}

.gallery-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-card {
  overflow: hidden;
  position: relative;
}

.showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 33, 29, 0.08), transparent 45%);
  pointer-events: none;
}

@media (max-width: 767px) {
  body {
    background:
      radial-gradient(circle at top left, rgba(232, 190, 106, 0.18), transparent 34%),
      radial-gradient(circle at bottom right, rgba(197, 109, 58, 0.14), transparent 30%),
      #f8f4ec;
  }

  header,
  main,
  footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  header [data-mobile-header] {
    padding: 1.25rem !important;
    border-radius: 1.5rem !important;
  }

  header [data-mobile-header] > div:first-child a {
    display: block;
    font-size: 2rem !important;
    line-height: 1.05 !important;
  }

  header [data-mobile-header] > div:first-child p {
    margin-top: 0.35rem;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  .mobile-menu-panel {
    margin-top: 1rem;
    border-top: 1px solid rgba(20, 33, 29, 0.12);
    padding-top: 1rem;
  }

  .mobile-menu-panel nav a {
    display: block;
    border-radius: 9999px;
    background: rgba(23, 53, 43, 0.05);
    padding: 0.85rem 1rem;
    font-size: 1.14rem;
    line-height: 1.3;
  }

  .mobile-whatsapp {
    margin-top: 1rem;
  }

  main section {
    margin-top: 0 !important;
  }

  .page-hero,
  .hero-shell,
  .gallery-tile,
  .showcase-card,
  main section > div[class*="rounded-["],
  main section a[class*="rounded-["],
  main section article[class*="rounded-["] {
    border-radius: 1.5rem !important;
  }

  .page-hero,
  .hero-shell,
  main section > div[class*="bg-"],
  main section > a[class*="bg-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .page-hero h1,
  .hero-shell h1 {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }

  .page-hero h2,
  .hero-shell h2,
  main h2[class*="text-3xl"] {
    line-height: 1.15 !important;
  }

  .page-hero p,
  .hero-shell p {
    max-width: none;
  }

  .hero-image {
    height: 17.5rem !important;
    border-radius: 1.5rem !important;
  }

  .gallery-photo {
    height: 15rem !important;
  }

  .showcase-video {
    height: 15.5rem !important;
    object-fit: cover;
  }

  .showcase-card .p-6,
  .gallery-tile .p-6,
  main .p-8,
  main .p-10 {
    padding: 1.25rem !important;
  }

  .page-hero::after {
    inset: auto -3rem -3rem auto;
    width: 10rem;
    height: 10rem;
  }
}