/*
 * Casa Serena — massoterapia.
 *
 * Argila, pedra e musgo. Marcellus (romana, quase lapidar) e Manrope.
 * Massagem se vende pelo ritmo, então a página é uma descida: blocos de
 * imagem e texto que se alternam, cada um ocupando quase a tela inteira, com
 * a imagem grudada enquanto o texto passa.
 *
 * Assinatura: a jornada de scroll — nenhum outro exemplo usa `position:
 * sticky` como estrutura de leitura.
 */

:root {
  --paper: #f4f0e9;
  --paper-2: #e8e2d6;
  --paper-3: #d9d1c1;
  --ink: #2a2721;
  --ink-soft: #4f4a41;
  --muted: #837c70;
  --accent: #6b7355;
  --accent-soft: #97a07d;
  --line: rgb(42 39 33 / 0.15);

  --scrim: rgb(244 240 233 / 0.96);
  --scrim-mid: rgb(244 240 233 / 0.8);
  --scrim-top: rgb(244 240 233 / 0.76);
  --scrim-flat: rgb(26 24 18 / 0.64);
  --on-media: #f4f0e9;
  --hero-paper: #f4f0e9;
  --hero-ink: #2a2721;
  --hero-ink-soft: #48433a;
  --hero-accent: #566044;

  --display: "Marcellus", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-leading: 1.12;
  --display-tracking: -0.005em;
  --wordmark-tracking: 0.32em;
  --radius: 2px;
  --hero-focus: center 45%;

  --footer-bg: #27251f;
  --footer-ink: rgb(244 240 233 / 0.68);
  --footer-strong: #f4f0e9;
}

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

.hero__media img {
  filter: saturate(0.8) sepia(0.08);
}

/* ─── assinatura: jornada de scroll ──────────────────────────────────────── */

/*
 * Cada etapa é uma dupla imagem/texto. No desktop a imagem fica presa no topo
 * (`sticky`) enquanto o texto rola ao lado — a leitura vira uma descida
 * contínua em vez de uma sequência de caixas.
 *
 * O `sticky` só entra a partir de 900px: em telas curtas ele prenderia a foto
 * cobrindo o texto, que é o oposto do que se quer.
 */
.journey__step {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--line);
}

.journey__media {
  border-radius: var(--radius);
  overflow: hidden;
}

.journey__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.journey__body {
  --flow: var(--space-s);
}

.journey__n {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  color: var(--accent);
}

.journey__title {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1.14;
}

.journey__text {
  color: var(--ink-soft);
  max-width: 48ch;
}

.journey__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line);
}

.journey__price {
  font-family: var(--display);
  font-size: var(--step-2);
}

.journey__time {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 900px) {
  .journey__step {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
    padding-block: var(--space-2xl);
  }

  .journey__step:nth-child(even) .journey__media {
    order: 2;
  }

  .journey__media {
    position: sticky;
    top: var(--space-l);
  }

  .journey__media img {
    aspect-ratio: 3 / 4;
  }

  .journey__body {
    padding-block: var(--space-xl);
  }
}

/* ─── pausa entre blocos ─────────────────────────────────────────────────── */

.breath {
  background: var(--paper-2);
  text-align: center;
}

.breath__inner {
  padding-block: var(--space-2xl);
  display: grid;
  justify-items: center;
  gap: var(--space-s);
}

.breath p {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1.25;
  max-width: 24ch;
}

.breath span {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}