/* Heitor Massagens — componentes compartilhados: botões, links, marca, header, cabeçalhos, utilitários e rodapé */

/* ---------- Botão primário: cápsula com seta, elevação que cresce e pressão tátil ---------- */
.btn {
  --mx: 0px;
  --my: 0px;
  --lift: 0px;
  --press: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent-strong);
  color: var(--bg);
  box-shadow: var(--shadow-btn);
  font: 500 var(--small) / 1.2 var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--mx), calc(var(--my) + var(--lift)), 0) scale(var(--press));
  transition:
    transform 500ms var(--ease-out),
    box-shadow 500ms var(--ease-out),
    color var(--dur-fast) ease-out;
}

/* Com o ícone (adicionado pelo JS), o recuo direito acompanha o círculo: raio concêntrico */
.btn:has(.btn__icon) {
  padding: 0.375rem 0.375rem 0.375rem 1.5rem;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 700ms var(--ease-out);
}

@media (hover: hover) {
  .btn:hover {
    --lift: -2px;
    box-shadow: var(--shadow-btn-hover);
  }
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(0);
}

.btn:active {
  --press: 0.96;
  --lift: 0px;
  transition-duration: 140ms;
}

.on-dark .btn::before,
.site-nav .btn::before,
.booking__panel .btn::before {
  background: var(--bg);
}

.on-dark .btn:hover,
.site-nav .btn:hover,
.booking__panel .btn:hover {
  color: var(--ink);
}

/* Rótulo duplicado pelo JS; sem JS o botão segue normal */
.btn__roll {
  position: relative;
  display: block;
  overflow: hidden;
}

.btn__roll > span {
  display: block;
  transition: transform 650ms var(--ease-out);
}

.btn__roll > span + span {
  position: absolute;
  inset: 100% 0 auto;
}

.btn:hover .btn__roll > span,
.btn:focus-visible .btn__roll > span {
  transform: translateY(-100%);
}

/* Círculo com seta: a seta sai pela diagonal e outra entra no lugar */
.btn__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(244, 239, 232, 0.16);
  transition: background-color 500ms var(--ease-out), color 500ms var(--ease-out);
}

.btn__icon svg {
  grid-area: 1 / 1;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 600ms var(--ease-out);
}

.btn__icon svg + svg {
  transform: translate(-150%, 150%);
}

.btn:hover .btn__icon,
.btn:focus-visible .btn__icon {
  background: var(--bg);
  color: var(--ink);
}

.on-dark .btn:hover .btn__icon,
.site-nav .btn:hover .btn__icon,
.booking__panel .btn:hover .btn__icon {
  background: var(--ink);
  color: var(--bg);
}

.btn:hover .btn__icon svg:first-child,
.btn:focus-visible .btn__icon svg:first-child {
  transform: translate(150%, -150%);
}

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

/* Variante clara: para painéis terracota e fundos escuros */
.btn--light {
  background: var(--bg);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(15, 12, 10, 0.2),
    0 10px 24px -10px rgba(15, 12, 10, 0.55);
}

.btn--light .btn__icon {
  background: var(--accent-strong);
  color: var(--bg);
}

/* ---------- Link secundário: traço base + traço que atravessa ---------- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-size: var(--small);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.link::before,
.link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: var(--accent-soft);
}

.link::after {
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 700ms var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Wordmark ---------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.wordmark svg {
  width: auto;
  height: 3rem;
  overflow: visible;
}

/* Traço de 1px sob o "h": se desenha da esquerda na abertura */
.wordmark__line {
  stroke: var(--accent);
}

.js .wordmark__line {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 1200ms var(--ease-in-out) 700ms;
}

.is-ready .site-header .wordmark__line,
.footer__mark.is-visible .wordmark__line {
  transform: none;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--ink);
  transition: color 400ms ease-out;
}

/* Ao rolar, o header vira uma cápsula de vidro flutuante.
   O vidro mora num pseudo-elemento: backdrop-filter no próprio header
   prenderia o menu fixo de tela cheia dentro dele. */
.site-header__inner::before {
  content: '';
  position: absolute;
  inset: 0.5rem calc(var(--gutter) - 0.875rem);
  z-index: -1;
  border: 1px solid rgba(217, 196, 176, 0.6);
  border-radius: var(--radius);
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--shadow-md);
  transition:
    opacity 450ms var(--ease-out),
    transform 650ms var(--ease-out);
}

.js .site-header[data-over-hero='true'] .site-header__inner::before {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
}

.js .site-header[data-over-hero='true'] {
  color: var(--bg);
}

.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  height: var(--header-h);
}

/* Entrada do header depois da cortina do hero */
.js .site-header__inner > * {
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
}

.js .site-header__inner > :nth-child(2) { transition-delay: 80ms; }
.js .site-header__inner > :nth-child(3) { transition-delay: 160ms; }
.js .site-header__inner > :nth-child(4) { transition-delay: 240ms; }

.is-ready .site-header__inner > * {
  opacity: 1;
  transform: none;
}

/* O botão do header usa o próprio transform para o efeito magnético */
.is-ready .site-header__inner > .btn {
  transform: translate3d(var(--mx), calc(var(--my) + var(--lift)), 0) scale(var(--press));
}

.site-header .btn {
  min-height: 44px;
  padding-inline: 1.25rem;
}

.site-header .btn:has(.btn__icon) {
  padding: 0.25rem 0.25rem 0.25rem 1.125rem;
  gap: 0.625rem;
}

.site-header .btn__icon {
  width: 2.25rem;
  height: 2.25rem;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  font: 500 var(--small) / 1 var(--font-body);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}

/* Navegação: menu de tela cheia abaixo de 960px */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 2.5rem;
  background: var(--bg-deep);
  color: var(--bg);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 700ms var(--ease-in-out),
    visibility 0s linear 700ms;
  overflow-y: auto;
}

.site-nav:target,
.site-nav.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--ease-in-out);
}

.site-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.site-nav__list {
  display: grid;
  gap: 0.25rem;
  margin-block: auto;
  padding-block: 2rem;
  counter-reset: nav;
}

.site-nav__list li {
  overflow: hidden;
}

.site-nav__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 12vw, 4rem);
  line-height: 1.2;
  text-decoration: none;
  counter-increment: nav;
}

.site-nav__list a::before {
  content: '0' counter(nav);
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
}

.site-nav__list a:hover {
  color: var(--accent-soft);
}

.js .site-nav__list a {
  transform: translateY(105%);
  transition: transform 900ms var(--ease-out);
}

.js .site-nav.is-open .site-nav__list a {
  transform: none;
}

.js .site-nav.is-open li:nth-child(1) a { transition-delay: 250ms; }
.js .site-nav.is-open li:nth-child(2) a { transition-delay: 320ms; }
.js .site-nav.is-open li:nth-child(3) a { transition-delay: 390ms; }
.js .site-nav.is-open li:nth-child(4) a { transition-delay: 460ms; }

.site-nav__cta {
  align-self: start;
}

.site-nav__info {
  margin-top: 1.5rem;
  color: var(--accent-soft);
  font-size: var(--small);
}

@media (min-width: 960px) {
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
  }

  .menu-toggle,
  .site-nav__top,
  .site-nav__cta,
  .site-nav__info {
    display: none;
  }

  .site-nav {
    position: static;
    display: block;
    padding: 0;
    background: none;
    color: inherit;
    visibility: visible;
    clip-path: none;
    transition: none;
    overflow: visible;
  }

  .site-nav__list {
    display: flex;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
  }

  .site-nav__list li {
    overflow: visible;
  }

  .js .site-nav__list a {
    transform: none;
  }

  .site-nav__list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
  }

  .site-nav__list a::before {
    content: none;
  }

  .site-nav__list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 600ms var(--ease-out);
  }

  .site-nav__list a:hover {
    color: inherit;
  }

  .site-nav__list a:hover::after,
  .site-nav__list a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .site-header .btn {
    justify-self: end;
    padding-inline: 2rem;
  }
}

.menu-open {
  overflow: hidden;
}

/* ---------- Cabeçalho de seção ---------- */
.section-head {
  position: relative;
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.section-head__intro {
  max-width: 34ch;
  color: var(--ink-soft);
}

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    column-gap: 4rem;
  }

  .section-head > .overline {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .section-head > h2 {
    grid-column: 1;
  }

  .section-head__intro {
    grid-column: 2;
    justify-self: end;
    padding-bottom: 0.5rem;
  }
}

/* Arco da marca, desenhado em grande escala atrás do título */
.brand-arc {
  position: absolute;
  top: calc(var(--space-section) * -0.35);
  right: calc(var(--gutter) * -1);
  z-index: -1;
  width: min(56vw, 640px);
  height: auto;
  pointer-events: none;
  color: var(--accent-soft);
}

.brand-arc path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.js .brand-arc[data-reveal] {
  transform: none;
  filter: none;
  opacity: 1;
}

.js .brand-arc path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2800ms var(--ease-in-out) 200ms;
}

.js .brand-arc.is-visible path {
  stroke-dashoffset: 0;
}

.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  margin-top: clamp(4rem, 8vw, 7rem);
}

/* ---------- Utilitários compartilhados pelas seções ---------- */
.section--raised {
  background: var(--bg-raised);
}

.on-dark {
  color: var(--bg);
  background: var(--bg-deep);
  isolation: isolate;
  overflow: clip;
}

.on-dark .overline {
  color: var(--accent-soft);
}

.on-dark .link::before {
  background: rgba(217, 196, 176, 0.45);
}

/* Figura com placa deslocada atrás: profundidade sem moldura */
.plated {
  position: relative;
}

.plated__plate {
  position: absolute;
  inset: 10% -7% -6% 14%;
  z-index: -1;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-raised);
  transform: translate3d(0, var(--py, 0px), 0);
}

.plated__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  box-shadow: var(--shadow-lg);
}

/* Contorno interno de 1px: a borda da foto não se dissolve no papel */
.plated__frame::after,
.media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hairline);
  pointer-events: none;
}

/* Cartão flutuante que se sobrepõe à borda de uma foto */
.float-card {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(217, 196, 176, 0.7);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

.float-card__label {
  font-size: var(--overline);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.float-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.float-card__text {
  font-size: var(--small);
  color: var(--ink-soft);
}

.js .float-card[data-reveal]:not(.is-visible) {
  transform: translateY(18px) scale(0.96);
}

.media-inner {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
  will-change: transform;
}

.media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Rodapé: compacto, em três colunas, com espaço para o painel que desce sobre ele ---------- */
.site-footer {
  position: relative;
  padding-top: calc(clamp(4rem, 9vw, 7rem) + clamp(3.5rem, 7vw, 5rem));
  padding-bottom: 1.5rem;
  font-size: var(--small);
}

.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer__brand {
  display: grid;
  align-content: start;
  gap: 1rem;
  max-width: 22rem;
}

.footer__mark {
  justify-self: start;
  color: var(--bg);
}

.footer__mark svg {
  width: auto;
  height: 3.5rem;
}

.js .footer__mark[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

.footer__about {
  color: rgba(244, 239, 232, 0.78);
}

.footer__col {
  display: grid;
  align-content: start;
  gap: 0.125rem;
}

.footer__col h2 {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--overline);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.footer__col a {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  color: rgba(244, 239, 232, 0.86);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
  transition: color var(--dur-fast) ease-out, text-decoration-color var(--dur-fast) ease-out;
}

.footer__col a:hover {
  color: var(--bg);
  text-decoration-color: rgba(217, 196, 176, 0.6);
}

.footer__col p {
  color: rgba(244, 239, 232, 0.72);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(217, 196, 176, 0.18);
  color: rgba(244, 239, 232, 0.72);
}

.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgba(217, 196, 176, 0.25);
  border-radius: var(--radius);
  color: rgba(244, 239, 232, 0.86);
  text-decoration: none;
  transition: border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}

.footer__top-link::after {
  content: '↑';
  transition: transform 500ms var(--ease-out);
}

.footer__top-link:hover {
  border-color: rgba(217, 196, 176, 0.6);
  color: var(--bg);
}

.footer__top-link:hover::after {
  transform: translateY(-3px);
}

@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-inner,
  .plated__plate {
    transform: none !important;
  }
}