:root {
  --ink: #243126;
  --ink-soft: #667061;
  --paper: #f5efe3;
  --surface: #fffaf0;
  --surface-muted: #dfe7d1;
  --charcoal: #263528;
  --accent: #d16a50;
  --accent-strong: #35624f;
  --accent-warm: #c7923f;
  --accent-gold: #c7923f;
  --line: rgba(36, 49, 38, 0.16);
  --line-strong: rgba(36, 49, 38, 0.32);
  --shadow: 0 26px 80px rgba(50, 48, 38, 0.15);
}

body {
  background:
    linear-gradient(90deg, rgba(53, 98, 79, 0.09) 0 50%, rgba(209, 106, 80, 0.1) 50% 100%),
    repeating-linear-gradient(0deg, rgba(36, 49, 38, 0.03) 0 1px, transparent 1px 34px),
    var(--paper);
}

body::before {
  background:
    linear-gradient(132deg, transparent 0 18%, rgba(199, 146, 63, 0.16) 18% 31%, transparent 31% 100%),
    linear-gradient(38deg, transparent 0 62%, rgba(53, 98, 79, 0.13) 62% 72%, transparent 72% 100%);
}

.site-header {
  background: rgba(255, 250, 240, 0.92);
  border-bottom: 1px solid rgba(36, 49, 38, 0.12);
  box-shadow: 0 18px 52px rgba(36, 49, 38, 0.08);
}

.brand-logo {
  filter: drop-shadow(0 10px 18px rgba(36, 49, 38, 0.08));
}

.header-cta,
.button-primary,
.hero-whatsapp {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
}

.main-nav a::after {
  background: var(--accent);
}

.hero {
  min-height: calc(100svh - 40px);
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.52fr);
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.94) 0 50%, rgba(223, 231, 209, 0.72) 50% 100%);
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.98) 0%, rgba(255, 250, 240, 0.88) 48%, rgba(255, 250, 240, 0.1) 70%),
    linear-gradient(135deg, rgba(209, 106, 80, 0.12), transparent 52%);
}

.hero::after {
  inset: 108px 28px 52px 52%;
  border: 1px solid rgba(36, 49, 38, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, transparent 0 56%, rgba(255, 250, 240, 0.26) 56% 100%),
    repeating-linear-gradient(90deg, rgba(255, 250, 240, 0.14) 0 1px, transparent 1px 42px);
  box-shadow: 0 34px 90px rgba(36, 49, 38, 0.18);
}

.hero-media {
  inset: 108px 28px 52px 52%;
  z-index: -1;
  border-radius: 8px;
  transform: rotate(1.5deg);
}

.hero-media img {
  filter: saturate(1.04) contrast(1.08) brightness(0.98);
  object-position: center center;
}

.hero h1 {
  max-width: 690px;
  color: var(--ink);
  font-size: 4.65rem;
}

.hero-content > p:not(.hero-place) {
  color: var(--ink-soft);
}

.hero-place,
.section-number {
  color: var(--accent);
}

.button-secondary {
  color: var(--accent-strong);
  background: rgba(53, 98, 79, 0.08);
  border-color: rgba(53, 98, 79, 0.28);
}

.hero-card {
  align-self: center;
  background: rgba(255, 250, 240, 0.76);
  border: 1px solid rgba(36, 49, 38, 0.12);
  box-shadow: 0 18px 60px rgba(36, 49, 38, 0.12);
  transform: rotate(-1.5deg);
  backdrop-filter: blur(18px);
}

.intro-band {
  background: var(--surface);
}

.intro-band div:nth-child(2) {
  background: rgba(223, 231, 209, 0.58);
}

.service-card {
  background: var(--surface);
}

.service-card:nth-child(odd) {
  transform: translateY(14px);
}

.service-card:hover {
  transform: translateY(6px);
}

.service-card.featured {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(209, 106, 80, 0.16), transparent 48%),
    var(--surface-muted);
  border-color: rgba(53, 98, 79, 0.22);
}

.featured .icon-shell {
  color: var(--accent-strong);
  background: rgba(255, 250, 240, 0.68);
  border-color: rgba(53, 98, 79, 0.18);
}

.featured p {
  color: var(--ink-soft);
}

.featured span {
  color: var(--accent-strong);
}

.vibe {
  background: #e8dcc8;
}

.vibe-gallery {
  grid-template-columns: 0.9fr 1.15fr;
}

.vibe-shot {
  border: 10px solid var(--surface);
  box-shadow: 0 24px 68px rgba(36, 49, 38, 0.18);
}

.vibe-shot.wide {
  transform: rotate(-1deg);
}

.vibe-shot:nth-child(2) {
  transform: rotate(1.4deg);
}

.vibe-shot img,
.design-card img {
  filter: saturate(1.02) contrast(1.05);
}

.memory-card img {
  filter: saturate(0.94) contrast(1.04);
}

.tribute,
.booking {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(53, 98, 79, 0.1), transparent 46%),
    linear-gradient(180deg, rgba(255, 250, 240, 0.92), rgba(223, 231, 209, 0.56)),
    var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.tribute-copy .section-number,
.booking-copy .section-number,
.contact-list dt {
  color: var(--accent);
}

.tribute-copy p,
.booking-copy p,
.contact-list dd {
  color: var(--ink-soft);
}

.text-link {
  color: var(--accent-strong);
}

.contact-list div {
  border-top-color: rgba(36, 49, 38, 0.16);
}

.map-card {
  border-color: var(--line);
  box-shadow: 0 22px 58px rgba(36, 49, 38, 0.12);
}

.design-sale {
  background:
    linear-gradient(90deg, rgba(223, 231, 209, 0.82), rgba(255, 250, 240, 0.92)),
    var(--surface);
}

.design-card figcaption,
.memory-card figcaption {
  background: rgba(255, 250, 240, 0.92);
}

.pricing {
  background: #f1e7d5;
}

.map-link {
  color: var(--surface);
  background: var(--accent-strong);
}

.site-footer {
  color: var(--ink-soft);
  background: var(--surface);
  border-top-color: var(--line);
}

.site-footer span {
  color: var(--ink);
}

@media (max-width: 940px) {
  .hero,
  .vibe-gallery {
    grid-template-columns: 1fr;
  }

  .hero-media,
  .hero::after {
    inset: 90px 18px 42% 18px;
    opacity: 0.46;
    transform: none;
  }

  .hero h1 {
    font-size: 3.45rem;
  }

  .hero-card {
    transform: none;
  }
}

@media (max-width: 680px) {
  .hero h1 {
    font-size: 2.54rem;
  }

  .service-card:nth-child(odd) {
    transform: none;
  }
}