/*
 * Pele Viva — estética facial e limpeza de pele.
 *
 * Marfim e verde-sálvia, Cormorant Garamond em corpo grande e Jost no texto.
 * Arquitetura oposta à da Nôa: nada de grade editorial em duas colunas — aqui
 * tudo é centrado, com muito respiro e uma coluna estreita de leitura. A
 * assinatura é o "cardápio" de protocolos, sem miniatura e sem filete pesado,
 * e a faixa de silêncio com uma frase só.
 */

:root {
  --paper: #f8f6f0;
  --paper-2: #eef1e9;
  --paper-3: #dfe5d8;
  --ink: #232a24;
  --ink-soft: #4b544a;
  --muted: #7d8a7c;
  --accent: #5f7355;
  --accent-soft: #93a889;
  --line: rgb(35 42 36 / 0.13);

  --scrim: rgb(248 246 240 / 0.96);
  --scrim-mid: rgb(248 246 240 / 0.82);
  --scrim-top: rgb(248 246 240 / 0.78);
  --scrim-flat: rgb(20 26 20 / 0.6);
  --on-media: #f8f6f0;
  --hero-paper: #f8f6f0;
  --hero-ink: #202721;
  --hero-ink-soft: #3f4a40;
  --hero-accent: #4f6847;

  --display: "Cormorant Garamond", Garamond, Georgia, serif;
  --body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 300;
  --display-leading: 1.08;
  --display-tracking: -0.012em;
  --wordmark-tracking: 0.34em;
  --radius: 0px;
  --btn-radius: 0px;
  --hero-focus: center 42%;

  --footer-bg: #202721;
  --footer-ink: rgb(248 246 240 / 0.68);
  --footer-strong: #f8f6f0;
}

/* Cormorant tem eixo fino: em corpo grande ela pede peso 300 e muito ar. */
.display {
  font-weight: 300;
}

.hero__title {
  max-width: 15ch;
}

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

/* ─── tudo centrado ──────────────────────────────────────────────────────── */

.hero {
  align-items: center;
  text-align: center;
}

/*
 * Grade leve na foto do hero: a cena tem um objeto verde-limão saturado que
 * briga com a paleta sálvia. Dessaturar um pouco alinha a foto à marca em vez
 * de deixar a marca refém do que estava em cima da bancada no dia.
 */
.hero__media img {
  filter: saturate(0.62) contrast(1.03);
}

/*
 * Texto centrado cai no meio da foto, onde o degradê de baixo não chega. Por
 * isso este hero ganha um véu radial no centro além das duas faixas do kit —
 * sem ele o subtítulo some sobre as áreas claras da imagem.
 */
.hero__scrim {
  background:
    radial-gradient(ellipse 78% 62% at 50% 52%, rgb(248 246 240 / 0.9) 0%, rgb(248 246 240 / 0.08) 100%),
    linear-gradient(to top, var(--scrim) 0%, var(--scrim-mid) 58%, transparent 100%),
    linear-gradient(to bottom, var(--scrim-top) 0%, transparent 30%);
}

.hero__inner {
  display: grid;
  justify-items: center;
  padding-block: var(--space-3xl);
}

.hero__title,
.hero__sub {
  margin-inline: auto;
}

.hero__actions {
  justify-content: center;
}

.section__head--center {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-m);
}

.section__head--center .section__title {
  max-width: 20ch;
}

.section__head--center .lede {
  max-width: 52ch;
}

/* ─── cardápio de protocolos ─────────────────────────────────────────────── */

/*
 * Sem miniatura e sem número: a lista é lida como um menu, e o preço fica
 * alinhado à direita por um filete pontilhado que guia o olho na linha.
 */
.menu {
  max-width: 46rem;
  margin-inline: auto;
}

.menu__item {
  padding-block: var(--space-m);
  border-block-end: 1px solid var(--line);
}

.menu__line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.menu__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.15;
}

.menu__dots {
  flex: 1;
  height: 1px;
  margin-block-end: 0.35rem;
  background-image: radial-gradient(circle, var(--muted) 0.8px, transparent 0.9px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  opacity: 0.6;
}

.menu__price {
  font-family: var(--display);
  font-size: var(--step-1);
  white-space: nowrap;
}

.menu__text {
  margin-block-start: 0.5rem;
  max-width: 54ch;
  color: var(--ink-soft);
  font-weight: 300;
}

.menu__time {
  display: block;
  margin-block-start: 0.35rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── faixa de silêncio ──────────────────────────────────────────────────── */

/*
 * Uma imagem larga, uma frase e nada mais. Existe para dar respiro entre duas
 * seções densas — é o oposto de "aproveitar o espaço".
 */
.silence {
  position: relative;
  isolation: isolate;
  color: var(--on-media);
  text-align: center;
  overflow: hidden;
}

.silence img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.silence::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(20 26 20 / 0.45);
}

.silence__inner {
  padding-block: var(--space-3xl);
  display: grid;
  justify-items: center;
}

.silence p {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-4);
  line-height: 1.2;
  max-width: 20ch;
}

/* ─── depoimento único e grande ──────────────────────────────────────────── */

/*
 * `justify-items: center` encolheria a figura até a largura do conteúdo e o
 * texto sairia com uma palavra por linha. O centro aqui vem de `text-align` e
 * da margem automática, com a coluna mantendo a largura toda.
 */
.quotes__track--single {
  display: block;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.quotes__track--single .quote__text {
  font-size: var(--step-3);
  font-style: italic;
}

/* ─── ajustes finos ──────────────────────────────────────────────────────── */

.faq {
  --flow: 0;
}

.visit {
  text-align: start;
}