/* ==========================================================================
   Logo — o nome é a peça central
   ========================================================================== */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-weight: 400;
  line-height: 1;
}

/* >= 768px (botões lado a lado): o "Ou ligue" passa para uma linha própria,
   centrada por baixo dos dois botões */
@media (min-width: 768px) {
  .hero__actions .hero__book {
    display: contents;
  }

  .hero__actions .hero__call {
    order: 3;
    flex-basis: 100%;
    text-align: center;
  }
}

/* Desktop e tablet horizontal (>= 1024px): o bloco da marca tem a largura do
   nome e o texto e os botões ficam centrados por baixo de DIANNE */
@media (min-width: 1024px) {
  .hero__brand {
    width: fit-content;
    text-align: center;
  }

  .hero__lead {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }
}

/* Mobile e tablet vertical: logótipo, introdução e botões centrados no ecrã */
@media (max-width: 1023.98px) {
  .logo {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  .hero__lead {
    margin-inline: auto;
    text-align: center;
  }

  .hero__actions {
    justify-content: center;
  }
}

.logo__name {
  display: flex;
  overflow: hidden;
  padding-top: 0.06em;
  font-family: var(--font-display);
  font-size: var(--fs-logo);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
}

.logo__name > span {
  display: inline-block;
}

/* a letra A em itálico */
.logo__name > .is-italic {
  font-style: italic;
}

.logo__tagline {
  /* a largura do logótipo é sempre a do nome: a tagline nunca a alarga */
  width: 0;
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 1.1em;
  margin-top: 0.9em;
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 2.6vw, 1.125rem);
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* compensa o tracking final para centrar opticamente */
.logo__tagline span {
  margin-right: -0.5em;
}

/* linhas douradas de cada lado */
.logo__tagline::before,
.logo__tagline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-gold);
}

.hero__lead {
  max-width: 26rem;
  margin-top: var(--space-m);
  color: var(--color-ink-soft);
  font-size: 1.0625em;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .logo__tagline {
    font-size: clamp(1rem, 1.25vw, 1.375rem);
  }

  .hero__lead {
    margin-top: var(--space-l);
    font-size: 1.125em;
  }
}

/* Mobile (< 768px): conteúdo do hero mais compacto para a foto ganhar espaço */
@media (max-width: 767.98px) {
  .logo__tagline {
    margin-top: 0.5em;
  }

  .hero__lead {
    max-width: 19rem;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .hero__actions {
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .hero__actions .btn {
    min-height: 2.75rem;
    padding: 0.6em 1.4em;
    font-size: 0.9375rem;
  }

  .hero__book {
    gap: 0.4rem;
  }

  .hero__call {
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   Coreografia de entrada (só com JS; sem JS tudo aparece de imediato)
   ========================================================================== */
/*
   Linha temporal (ms):
   0     foto abre como uma cortina e afasta-se (zoom out de 150% para 100%)
   350   letras de DIANNE sobem a direito da base, 65ms entre si
   850   linhas douradas desenham-se do centro para fora
   900   MASSAGENS aparece a subir (sem mudar de largura, para não mexer no nome)
   1050  texto revela-se de baixo para cima
   1200+ botões entram um a um (WhatsApp, telefone, Ver menu)
   Só "backwards": no fim a animação larga o elemento, e os hovers/:active
   voltam a mandar no transform.
*/
@keyframes curtain {
  from {
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes settle {
  from {
    transform: scale(1.5);
  }
}

@keyframes rise {
  from {
    transform: translate3d(0, 110%, 0);
  }
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }
}

@keyframes mask-up {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 1.5rem, 0);
  }
}

@keyframes pop-up {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0) scale(0.96);
  }
}

/* usado pela revelação de outros elementos */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }
}

.js .hero__media {
  will-change: transform;
  animation: curtain 1.2s var(--ease-out-expo) backwards;
}

/* mesmo zoom de entrada da foto (150% → 100%), a partir do canto esquerdo */
.js .hero__leaves {
  will-change: translate;
  transform-origin: 0 50%;
  animation: settle 2s var(--ease-out-expo) backwards;
}

.js .hero__photo {
  animation: settle 2s var(--ease-out-expo) backwards;
}

.js .logo__name > span {
  animation: rise 1.4s var(--ease-out-expo) backwards;
  animation-delay: calc(350ms + var(--i) * 65ms);
}

.js .logo__tagline::before,
.js .logo__tagline::after {
  animation: draw 1.6s var(--ease-out-expo) 850ms backwards;
}

.js .logo__tagline::before {
  transform-origin: right;
}

.js .logo__tagline::after {
  transform-origin: left;
}

.js .logo__tagline span {
  animation: fade-up 1.2s var(--ease-out-expo) 900ms backwards;
}

.js .hero__lead {
  animation: mask-up 1.2s var(--ease-out-expo) 1050ms backwards;
}

.js .hero__book .btn {
  animation: pop-up 1s var(--ease-out-expo) 1200ms backwards;
}

.js .hero__call {
  animation: pop-up 1s var(--ease-out-expo) 1300ms backwards;
}

.js .hero__actions > .btn {
  animation: pop-up 1s var(--ease-out-expo) 1400ms backwards;
}

/* Revelação ao fazer scroll */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity 1s var(--ease-out-quart),
    transform 1.2s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.25rem;
  padding: 0.8em 1.7em;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-surface);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.5s var(--ease-out-expo),
    border-color 0.5s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}

/* preenchimento dourado que sobe a partir de baixo */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-gold);
  border-radius: inherit;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.6s var(--ease-out-expo);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: none;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-surface);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
}

/* Botões de marcação em verde-oliva escuro (o verde das folhas dos quadros da
   sala), texto creme; no hover enchem a um oliva mais claro */
.btn--book {
  border-color: var(--color-olive-dark);
  background: var(--color-olive-dark);
  color: var(--color-surface);
}

.btn--book::before {
  background: var(--color-olive);
}

.btn--book:hover,
.btn--book:focus-visible {
  border-color: var(--color-olive);
  color: var(--color-surface);
}


.btn--light {
  background: var(--color-night-ink);
  border-color: var(--color-night-ink);
  color: var(--color-night);
}

.btn svg {
  width: 1.45em;
  height: 1.45em;
  flex: none;
  transition: transform 0.6s var(--ease-out-expo);
}

/* Texto que rola: o original sobe e sai, a cópia entra por baixo */
.btn__label {
  position: relative;
  display: inline-grid;
  overflow: hidden;
}

.btn__text {
  grid-area: 1 / 1;
  transition: transform 0.6s var(--ease-out-expo);
}

.btn__text + .btn__text {
  transform: translate3d(0, 105%, 0);
}

.btn:hover .btn__text,
.btn:focus-visible .btn__text {
  transform: translate3d(0, -105%, 0);
}

.btn:hover .btn__text + .btn__text,
.btn:focus-visible .btn__text + .btn__text {
  transform: none;
}

/* a segunda linha entra com um ligeiro atraso, para parecer encadeado */
.btn:hover .btn__text + .btn__text {
  transition-delay: 0.04s;
}

.btn:hover svg {
  transform: rotate(-12deg) scale(1.08);
}

.btn:active {
  transform: scale(0.97);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: var(--space-l);
}

/* WhatsApp com o telefone por baixo */
.hero__book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.hero__call {
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
}

.hero__call a {
  color: var(--color-ink);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   Etiquetas e títulos de secção
   ========================================================================== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-gold);
}

.section-title {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.section-title em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}

/* palavra em itálico mantendo a cor do título */
.section-title i {
  font-style: italic;
}

/* ==========================================================================
   Menu
   ========================================================================== */
/* Etiqueta "Menu" numa bola dourada, rodada, por trás do M do título */
.menu__heading {
  position: relative;
}

.menu__heading .section-title {
  position: relative;
  z-index: 1;
  margin-top: 0;
  /* a bola fica acima do M: só a parte de baixo passa por trás da letra,
     o texto "Menu" fica sempre à vista */
  padding-top: calc(clamp(4.25rem, 16vw, 5.75rem) * 0.72);
}

.eyebrow--badge {
  position: absolute;
  top: 0;
  left: -0.5rem;
  display: grid;
  place-items: center;
  width: clamp(4.25rem, 16vw, 5.75rem);
  aspect-ratio: 1;
  background: var(--color-gold);
  color: var(--color-surface);
  font-size: clamp(0.8125rem, 2.8vw, 1rem);
  transform: rotate(-3deg);
  /* formato de selo: círculo com 14 ondas no rebordo */
  clip-path: polygon(100.00% 50.00%, 99.52% 52.22%, 98.25% 54.34%, 96.63% 56.32%, 95.19% 58.20%, 94.36% 60.12%, 94.27% 62.22%, 94.75% 64.54%, 95.36% 67.02%, 95.58% 69.48%, 95.05% 71.69%, 93.65% 73.49%, 91.59% 74.85%, 89.27% 75.92%, 87.16% 77.00%, 85.57% 78.37%, 84.59% 80.22%, 84.01% 82.52%, 83.48% 85.02%, 82.61% 87.33%, 81.17% 89.09%, 79.14% 90.10%, 76.69% 90.43%, 74.13% 90.39%, 71.76% 90.45%, 69.74% 90.99%, 68.05% 92.23%, 66.53% 94.05%, 64.97% 96.07%, 63.19% 97.78%, 61.13% 98.75%, 58.85% 98.77%, 56.50% 98.01%, 54.22% 96.87%, 52.06% 95.88%, 50.00% 95.50%, 47.94% 95.88%, 45.78% 96.87%, 43.50% 98.01%, 41.15% 98.77%, 38.87% 98.75%, 36.81% 97.78%, 35.03% 96.07%, 33.47% 94.05%, 31.95% 92.23%, 30.26% 90.99%, 28.24% 90.45%, 25.87% 90.39%, 23.31% 90.43%, 20.86% 90.10%, 18.83% 89.09%, 17.39% 87.33%, 16.52% 85.02%, 15.99% 82.52%, 15.41% 80.22%, 14.43% 78.37%, 12.84% 77.00%, 10.73% 75.92%, 8.41% 74.85%, 6.35% 73.49%, 4.95% 71.69%, 4.42% 69.48%, 4.64% 67.02%, 5.25% 64.54%, 5.73% 62.22%, 5.64% 60.12%, 4.81% 58.20%, 3.37% 56.32%, 1.75% 54.34%, 0.48% 52.22%, 0.00% 50.00%, 0.48% 47.78%, 1.75% 45.66%, 3.37% 43.68%, 4.81% 41.80%, 5.64% 39.88%, 5.73% 37.78%, 5.25% 35.46%, 4.64% 32.98%, 4.42% 30.52%, 4.95% 28.31%, 6.35% 26.51%, 8.41% 25.15%, 10.73% 24.08%, 12.84% 23.00%, 14.43% 21.63%, 15.41% 19.78%, 15.99% 17.48%, 16.52% 14.98%, 17.39% 12.67%, 18.83% 10.91%, 20.86% 9.90%, 23.31% 9.57%, 25.87% 9.61%, 28.24% 9.55%, 30.26% 9.01%, 31.95% 7.77%, 33.47% 5.95%, 35.03% 3.93%, 36.81% 2.22%, 38.87% 1.25%, 41.15% 1.23%, 43.50% 1.99%, 45.78% 3.13%, 47.94% 4.12%, 50.00% 4.50%, 52.06% 4.12%, 54.22% 3.13%, 56.50% 1.99%, 58.85% 1.23%, 61.13% 1.25%, 63.19% 2.22%, 64.97% 3.93%, 66.53% 5.95%, 68.05% 7.77%, 69.74% 9.01%, 71.76% 9.55%, 74.13% 9.61%, 76.69% 9.57%, 79.14% 9.90%, 81.17% 10.91%, 82.61% 12.67%, 83.48% 14.98%, 84.01% 17.48%, 84.59% 19.78%, 85.57% 21.63%, 87.16% 23.00%, 89.27% 24.08%, 91.59% 25.15%, 93.65% 26.51%, 95.05% 28.31%, 95.58% 30.52%, 95.36% 32.98%, 94.75% 35.46%, 94.27% 37.78%, 94.36% 39.88%, 95.19% 41.80%, 96.63% 43.68%, 98.25% 45.66%, 99.52% 47.78%);
}

@media (min-width: 1024px) {
  .eyebrow--badge {
    left: -2rem;
  }
}

.menu__intro {
  display: grid;
  gap: var(--space-m);
}

.menu__note {
  max-width: 26rem;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}





/* 3. Tablet Landscape e Desktop (>= 1024px): introdução fixa à esquerda, lista à direita */
@media (min-width: 1024px) {
  .menu__layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-xl);
    align-items: start;
  }

  /* A coluna cabe sempre no ecrã (com folga em baixo para a barra de
     marcação flutuante): as fotos ocupam a altura que sobra e deixam de
     crescer a partir de 960px de altura de ecrã */
  .menu__intro {
    position: sticky;
    top: var(--space-l);
    display: flex;
    flex-direction: column;
    height: calc(min(100svh, 960px) - var(--space-l) - 6.5rem);
  }
}

/* Tablet Landscape (1024–1439px): as fotos deixam de crescer a partir de 900px
   de altura de ecrã */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .menu__intro {
    height: calc(min(100svh, 900px) - var(--space-l) - 6.5rem);
  }
}

/* Fotos da sala, lado a lado; a segunda desce um pouco para dar ritmo */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  margin-top: var(--space-s);
  padding-bottom: var(--space-m);
}

.gallery__item {
  overflow: hidden;
  border-radius: var(--radius);
  /* --offset: desfasamento fixo; --parallax-y: subida controlada pelo scroll */
  transform: translate3d(0, calc(var(--offset, 0px) + var(--parallax-y, 0px)), 0);
}

.js .gallery__item {
  will-change: transform;
}

.gallery__item:nth-child(2) {
  --offset: var(--space-m);
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
}

@media (hover: hover) {
  .gallery__item:hover img {
    transform: scale(1.04);
  }
}

@media (min-width: 768px) {
  .gallery {
    max-width: 30rem;
    gap: var(--space-m);
  }
}

/* Só no telemóvel (< 768px): fotos antes do título */
@media (max-width: 767.98px) {
  .gallery {
    order: -1;
    margin-top: 0;
    margin-bottom: var(--space-l);
  }
}

@media (min-width: 1024px) {
  .gallery {
    flex: 1 1 0;
    min-height: 8rem;
    max-width: none;
    grid-template-rows: minmax(0, 1fr);
    padding-bottom: var(--space-l);
  }

  .gallery__item {
    min-height: 0;
  }

  .gallery__item:nth-child(2) {
    --offset: var(--space-l);
  }

  .gallery__item img {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   Lista de tratamentos
   ========================================================================== */
/* a lista estende-se 1rem para cada lado e cada linha tem 1rem de padding:
   o texto fica no mesmo sítio, mas o fundo do hover e os preços cabem dentro */
.treatments {
  margin-inline: -1rem;
  margin-top: var(--space-l);
  border-top: 1px solid var(--color-line);
  counter-reset: treatment;
}

@media (min-width: 1024px) {
  .treatments {
    margin-top: 0;
  }
}

.treatment {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.6rem 0;
  padding: 1.6rem 1rem;
  border-bottom: 1px solid var(--color-line);
  counter-increment: treatment;
}

.treatment::before {
  content: counter(treatment, decimal-leading-zero);
  padding-top: 0.55em;
  color: var(--color-gold);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* linha dourada que se desenha ao passar o rato */
.treatment::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out-expo);
}

@media (hover: hover) {
  .treatment:hover::after {
    transform: scaleX(1);
  }
}

.treatment__body {
  grid-column: 2;
}

/* A Instrument Serif só tem peso 400: um contorno fino dá-lhe mais corpo */
.treatment__name,
.price__value,
.book-bar__selection {
  -webkit-text-stroke: 0.022em currentColor;
}

.treatment__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

/* Mobile (< 768px): nomes dos tratamentos um pouco maiores */
@media (max-width: 767.98px) {
  .treatment__name {
    font-size: clamp(1.875rem, 8vw, 2.125rem);
  }
}

.treatment__desc {
  max-width: 30rem;
  margin-top: 0.4em;
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.treatment__prices {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0;
  list-style: none;
}

.price {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-left: 0;
  padding: 0.45rem 0.85rem 0.5rem;
  /* contorno fino dourado claro, sempre visível */
  border: 1px solid var(--color-gold-soft);
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  outline: 1.5px solid transparent;
  outline-offset: 0;
  transition:
    background-color 0.5s var(--ease-out-expo),
    border-color 0.5s var(--ease-out-expo),
    color 0.5s var(--ease-out-expo),
    outline-color 0.5s var(--ease-out-expo),
    outline-offset 0.5s var(--ease-out-expo);
}

/* hover: fundo com a cor do body e contorno mais escuro */
.price:hover {
  border-color: var(--color-gold);
  background: var(--color-bg);
  /* +1px por dentro: contorno mais grosso sem mexer no tamanho do cartão */
  box-shadow: inset 0 0 0 1px var(--color-gold);
}

/* escolhido: fundo ligeiramente mais escuro e segundo contorno dourado à volta */
.price[aria-pressed="true"] {
  border-color: var(--color-gold-soft);
  background: rgb(168 122 46 / 0.1);
  color: var(--color-ink);
  outline: 1.5px solid var(--color-gold);
  outline-offset: 4px;
}

.price[aria-pressed="true"] .price__time {
  color: var(--color-surface);
}

/* duração numa pequena caixa castanha, sempre antes do preço, partida em
   duas linhas ("60" / "MIN") */
.price__time {
  order: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* +6px em baixo para compensar o recorte em ziguezague */
  padding: 0.35rem 0.5rem calc(0.25rem + 6px);
  /* rebordo inferior em ziguezague (5 bicos), como um talão rasgado */
  clip-path: polygon(
    0 0, 100% 0,
    100% 100%, 90% calc(100% - 6px),
    80% 100%, 70% calc(100% - 6px),
    60% 100%, 50% calc(100% - 6px),
    40% 100%, 30% calc(100% - 6px),
    20% 100%, 10% calc(100% - 6px),
    0 100%
  );
  border-radius: 4px;
  background: var(--color-gold);
  color: var(--color-surface);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* número grande, "MIN" pequeno por baixo */
.price__num {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
}

.price__unit {
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.price__value {
  font-family: var(--font-display);
  font-size: var(--fs-price);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

/* 2. Tablet Portrait (>= 768px): preços alinhados em colunas à direita */
@media (min-width: 768px) {
  .treatment {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 0;
    padding-block: 1.9rem;
  }

  /* espaço entre o texto do tratamento e os preços */
  .treatment__body {
    padding-right: var(--space-l);
  }

  .treatment__prices {
    grid-column: 3;
    display: grid;
    grid-template-columns: repeat(2, 10rem);
    justify-items: end;
  }

  .treatment__prices {
    margin-right: 0;
  }

  .treatment__prices li {
    width: 100%;
  }

  .price {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
}

/* Tablet vertical (768–1023px): introdução do menu centrada no ecrã */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .menu__intro {
    justify-items: center;
    text-align: center;
  }

  .menu__heading {
    width: fit-content;
  }

  .menu__note {
    margin-inline: auto;
  }

  .gallery {
    width: 100%;
    margin-inline: auto;
  }
}

/* 4. Desktop (>= 1440px): duração e preço lado a lado, numa cápsula */
@media (min-width: 1440px) {
  .price {
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
  }

  .treatment__prices {
    grid-template-columns: repeat(2, 8.25rem);
    column-gap: 1.25rem;
    justify-items: start;
    margin-right: 0;
  }

  /* a cápsula ajusta-se ao conteúdo e encosta à esquerda da coluna */
  .treatment__prices li,
  .price {
    width: auto;
  }
}

/* 3. Tablet Landscape (1024–1439px): a lista é mais estreita ao lado da
   introdução, por isso os preços passam para baixo do nome */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .treatment {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .treatment__prices {
    grid-column: 2;
    display: flex;
    margin-right: 0;
  }

  .treatment__prices li {
    width: auto;
  }

  .price {
    width: auto;
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* ==========================================================================
   Ritual — capítulo escuro, fecho com marcação
   ========================================================================== */
.ritual {
  position: relative;
  overflow: hidden;
  background: var(--color-night);
  color: var(--color-night-ink);
}

/* brilho quente, como a luz do candeeiro da sala */
/* Brilho quente fixo no topo, ao centro, como uma luz por cima do título */
.ritual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle min(30rem, 70vw) at 50% 0%,
    rgb(216 168 92 / 0.22) 0%,
    transparent 62%
  );
  pointer-events: none;
}

/* o brilho "respira": cresce e encolhe devagar (só sem movimento reduzido) */
@keyframes glow-breathe {
  from {
    opacity: 0.7;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1.25);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ritual::before {
    transform-origin: 50% 0;
    animation: glow-breathe 5s ease-in-out infinite alternate;
  }
}

.site-footer .container {
  position: relative;
}

.ritual .container {
  position: relative;
}

/* Rebordo em ziguezague discreto (como o talão da duração): dentes creme
   do menu a apontar para baixo sobre o ritual. */
.paper-edge {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
  width: 100%;
  pointer-events: none;
}

.paper-edge span {
  --tooth: 10px;
  display: block;
  height: calc(var(--tooth) / 2 + 1px);
  background: var(--color-bg);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
    50% / var(--tooth) 100%;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
    50% / var(--tooth) 100%;
}

.ritual .eyebrow {
  color: var(--color-gold-soft);
}

/* duas linhas fixas: cada <span> é uma linha */
.ritual__statement span {
  display: block;
  white-space: nowrap;
}

.ritual__statement {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.ritual__statement em {
  color: var(--color-gold-soft);
}

.ritual__cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: var(--space-l);
}

/* conteúdo do ritual centrado */
.ritual .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   Contactos (footer)
   ========================================================================== */
.contact {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.5s var(--ease-out-expo);
}

/* texto pequeno de apoio por baixo do contacto (ex.: "Ver localização") */
.contact__hint {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-gold-soft);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a.contact:hover {
  color: var(--color-gold-soft);
}

.contact svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--color-gold-soft);
}

/* ==========================================================================
   Barra de marcação
   Só aparece quando há um tratamento escolhido (tratamento, × e botão).
   Mobile: fixa em baixo. >= 768px: cápsula flutuante centrada.
   ========================================================================== */
.book-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem var(--container-gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgb(251 247 240 / 0.9);
  border-top: 1px solid var(--color-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.8s var(--ease-out-expo);
}

.book-bar:not(.has-selection) {
  transform: translate3d(0, 110%, 0);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.8s var(--ease-out-expo), visibility 0s 0.8s;
}

.book-bar__selection {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
}

.book-bar__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
}

.book-bar__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1.5px solid rgb(29 26 23 / 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition:
    color 0.4s var(--ease-out-expo),
    border-color 0.4s var(--ease-out-expo),
    background-color 0.4s var(--ease-out-expo);
}

.book-bar__clear:hover {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-surface);
}

.book-bar__clear svg {
  width: 0.875rem;
  height: 0.875rem;
}

.book-bar .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .book-bar {
    inset: auto auto 1.5rem 50%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-m);
    width: min(44rem, calc(100% - 2 * var(--container-gutter)));
    padding: 0.6rem 0.6rem 0.6rem 1.75rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    box-shadow: 0 1.25rem 3rem rgb(29 26 23 / 0.16);
    transform: translate3d(-50%, 0, 0);
  }

  .book-bar:not(.has-selection) {
    transform: translate3d(-50%, calc(100% + 2rem), 0);
  }

  .book-bar__summary {
    justify-content: flex-start;
  }

  .book-bar__selection {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .book-bar .btn {
    width: auto;
  }
}

/* ==========================================================================
   Indicador de resolução (só em desenvolvimento)
   ========================================================================== */
.viewport-indicator {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgb(29 26 23 / 0.85);
  color: var(--color-surface);
  font: 500 0.75rem/1.2 var(--font-body);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}