/*
 * Modelo 02 — Nude Atelier
 * Minimalismo luxuoso: muito espaço em branco, fotografia ampla, quase nenhuma caixa.
 * Assinatura: capa dividida com a foto inteira ao lado do texto, títulos em caixa-alta de
 * espaçamento largo, serviços em lista com filetes e rodapé centralizado.
 */
:root {
  --text-hero: clamp(2.25rem, 1.2rem + 4.2vw, 4.75rem);
  --text-title: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
  --leading-tight: 1.08;
  --leading-title: 1.18;
  --radius: 0;
  --radius-card: 0;
  --radius-media: 0;
  --shape-about: 0;
}

.section-title,
.hero__title {
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.hero__title em {
  font-style: normal;
  color: var(--color-secondary);
}

.eyebrow {
  color: var(--color-muted);
}

.btn--primary:hover {
  background: var(--color-text);
  color: var(--color-background);
}

/* ---------- Cabeçalho: continua o fundo da capa, sem linha ---------- */
.site-header {
  background: var(--base-surface);
  border-bottom: 0;
}

.site-logo__name {
  letter-spacing: 0.2em;
}

/* ---------- Capa ---------- */
.hero__text {
  color: var(--color-muted);
}

@media (min-width: 900px) {
  .hero[data-variant='split'] {
    --hero-min: min(calc(100svh - var(--header-height)), 780px);
  }

  /* Transição suave entre o fundo e a foto, como papel sob luz lateral. */
  .hero[data-variant='split'] .hero__media::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 16%;
    background: linear-gradient(90deg, var(--color-background), transparent);
    pointer-events: none;
  }
}

/* ---------- Serviços em lista: nome em caixa-alta, discreto ---------- */
.services[data-variant='rows'] .service__name {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.services[data-variant='rows'] .services__list,
.services[data-variant='rows'] .service {
  border-color: color-mix(in srgb, var(--color-text) 22%, transparent);
}

/* ---------- Depoimentos: texto em fonte de leitura ---------- */
.quote blockquote::before {
  color: var(--color-secondary);
}

.testimonials[data-variant='minimal'] .quote blockquote p {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-style: normal;
  color: var(--color-muted);
}

@media (min-width: 900px) {
  .testimonials[data-variant='minimal'] .quote:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

.benefits__list li {
  border-top-color: var(--color-text);
}

/* ---------- Mapa em tom de papel ---------- */
.location__map iframe {
  filter: grayscale(1) sepia(0.18) contrast(0.92);
}

/* ---------- Chamada final: o botão inverte sobre a faixa ---------- */
.cta[data-tone='band']:not(.cta--media) .btn--primary {
  background: var(--color-text);
  color: var(--color-background);
}