/* Modelo KRIA — motel · "A sala escura" (estilo autoral, direção dark-room)
   Escrito para 360 px e ampliado em 560, 900 e 1100 px. Um fundo só, vinho quase preto, do topo ao rodapé, e
   nele as coisas acesas: a foto alta do início com o nome atravessando o canto, a foto da suíte que acende
   na lista, um verbo por tela na chegada, o quadro das datas visto de perto, o cardápio impresso, o número
   em letra de vitrine e o cartão de papel da reserva. Uma família só (Newsreader, serifa leve), em peso fino
   nos tamanhos grandes. O batom aparece só nos botões de ação. Sem etiquetas acima de títulos, numeração,
   linhas finas, sombras em repouso, gradientes ou vidro. As cores mudam pelo "cores" do site.json. */

/* Fonte servida pelo próprio site (subconjunto latino do Google Fonts, licença SIL OFL), variável: peso 300 a
   500 e tamanho óptico (a letra afina sozinha nos tamanhos grandes). */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('../fonts/newsreader.woff2') format('woff2'); }

:root {
  --c-fundo: #170D11;
  --c-superficie: #24151B;
  --c-tinta: #F4EEED;
  --c-suave: #C9B6AE;
  --c-destaque: #EF5A63;
  --c-destaque-tinta: #170D11;
  --c-papel: #EDE5E4;
  --c-papel-tinta: #170D11;
  --c-papel-suave: #5E464D;

  --f: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* os tamanhos da página: o nome e o número são ajustados à largura (pelo número de letras) */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
  --step-lead: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);
  --step-head: clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);
  --step-frase: clamp(2.75rem, 7vw, 7rem);
  --step-display: clamp(4.5rem, 12vw, 12.5rem);

  --topo: 64px;
  --margem: clamp(16px, 2.5vw, 32px);
  --secao: clamp(96px, 13vw, 200px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 8px);
  /* o WhatsApp flutuante não cobre o item que recebe o foco perto da borda de baixo */
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  accent-color: var(--c-destaque);
  scrollbar-color: var(--c-suave) var(--c-fundo);
  background: var(--c-fundo);
}
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-tinta);
  font: 400 var(--step-body)/1.55 var(--f);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
a, button, summary, label, select { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 400; color: inherit; }
p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button, select { font: inherit; color: inherit; }
::selection { background: var(--c-tinta); color: var(--c-fundo); }

/* Foco em anel duplo, visível no fundo escuro, nas fotos e no papel */
:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); border-radius: 2px; } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
.cartao :focus-visible { outline-color: var(--c-papel-tinta); box-shadow: 0 0 0 3px var(--c-papel); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* taste-skill-ignore: tira o anel do ponto de partida do Tab */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: texto só para leitor de tela, não é linha */
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; background: var(--c-tinta); color: var(--c-fundo);
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* botões: cheios e de canto reto, a forma única da página */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 0;
  font: 500 var(--step-body)/1.2 var(--f); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease;
}
.btn:active { transform: scale(0.98); }
.btn--destaque { background: var(--c-destaque); color: var(--c-destaque-tinta); }
.btn--contorno { background: var(--c-tinta); color: var(--c-fundo); }
.btn--pequeno { min-height: 44px; padding: 0 18px; }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.24em;
}
.nota { max-width: 52ch; margin-top: 32px; color: var(--c-suave); }

/* ---------- faixa do modelo de demonstração ---------- */
body:has(> .faixa-demo) { --faixa: 52px; }
.faixa-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  padding: 4px var(--margem);
  background: var(--c-tinta); color: var(--c-fundo);
  font-size: 1rem; line-height: 1.4;
}
.faixa-demo span { padding-block: 8px; }
.faixa-demo a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; text-underline-offset: 4px; }

/* ---------- topo: transparente sobre a foto do início, no fundo escuro depois ---------- */
.topo { position: sticky; top: 0; z-index: 50; transition: background-color 300ms ease; }
.topo--solido, .menu-aberto .topo { background: var(--c-fundo); }
.topo__barra { display: flex; align-items: center; gap: 8px; height: var(--topo); padding-inline: var(--margem); }
.marca { display: flex; align-items: center; min-height: 44px; min-width: 0; margin-right: auto; text-decoration: none; transition: opacity 400ms var(--ease-out); }
.marca img { height: 36px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.marca__nome { font-size: var(--step-lead); font-weight: 300; letter-spacing: -0.02em; text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* o nome do topo some enquanto o nome grande do início está na tela (volta se receber o foco) */
.nome-a-vista .marca:not(:focus-visible) { opacity: 0; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; }
.topo__cta { flex: none; }
.menu-btn {
  flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; margin-right: -10px;
  border: 0; background: none; cursor: pointer;
  font-size: var(--step-body); line-height: 1; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.24em;
}
.menu-btn__fechar, .menu-btn[aria-expanded="true"] .menu-btn__abrir { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__fechar { display: inline; }

/* Sem JavaScript: os links viram uma linha logo abaixo do nome, num topo que não flutua */
html:not(.js) .topo { position: relative; background: var(--c-fundo); }
html:not(.js) .topo__barra { flex-wrap: wrap; height: auto; padding-block: 8px; }
html:not(.js) .menu { order: 3; width: 100%; }
html:not(.js) .menu ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
html:not(.js) .menu a { display: inline-flex; align-items: center; min-height: 44px; }
html:not(.js) .menu-btn, html:not(.js) .menu__acoes { display: none; }

/* Com JavaScript, até 1099 px: menu de tela cheia no fundo escuro */
@media (max-width: 1099px) {
  .js .menu {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column;
    padding: calc(var(--topo-fim, var(--topo)) + 24px) var(--margem) calc(24px + env(safe-area-inset-bottom));
    background: var(--c-fundo);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity 260ms var(--ease-out), visibility 0s 260ms;
  }
  .js.menu-aberto .menu { visibility: visible; opacity: 1; transition: opacity 260ms var(--ease-out); }
  .js .menu li a { display: flex; align-items: center; min-height: 56px; font-size: var(--step-head); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
  .js .menu li, .js .menu__acoes { opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out); }
  .js.menu-aberto .menu li, .js.menu-aberto .menu__acoes { opacity: 1; transform: none; }
  .js.menu-aberto .menu li:nth-child(2) { transition-delay: 40ms; }
  .js.menu-aberto .menu li:nth-child(3) { transition-delay: 80ms; }
  .js.menu-aberto .menu li:nth-child(4) { transition-delay: 120ms; }
  .js.menu-aberto .menu li:nth-child(5) { transition-delay: 160ms; }
  .js.menu-aberto .menu__acoes { transition-delay: 200ms; }
  .menu__acoes { margin-top: auto; padding-top: 40px; }
  .menu__acoes .btn { width: 100%; }
  .js .marca, .js .topo__cta, .js .menu-btn { position: relative; z-index: 46; }
  .menu-aberto .marca { opacity: 1; }
  .menu-aberto, .menu-aberto body { overflow: hidden; }
  .menu-aberto .flutuante { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* ---------- início: a foto alta e o nome que atravessa o canto dela ---------- */
/* com JavaScript, o topo transparente fica por cima da foto (o início sobe a altura do topo) */
.inicio { position: relative; display: grid; padding: 12px 12px clamp(36px, 6vh, 64px); }
.js .inicio { margin-top: calc(-1 * var(--topo)); }
.inicio__quadro { position: relative; height: 40svh; min-height: 220px; overflow: hidden; background: var(--c-superficie); }
.inicio__foto { width: 100%; height: 100%; object-fit: cover; }
.inicio__nome {
  position: relative; z-index: 2;
  margin: -0.34em 0 0; padding-inline: 4px;
  font-size: min(21vw, calc((100vw - 32px) / (var(--letras) * 0.47)));
  font-weight: 300; line-height: 0.9; letter-spacing: -0.045em; text-transform: lowercase;
  white-space: nowrap;
}
.inicio__nome span { display: block; }
.inicio__texto { display: grid; gap: 14px; justify-items: start; padding: 18px 4px 0; }
/* sem foto (prévia de quem ainda não mandou fotos): o nome abre a página, abaixo do topo */
.inicio--sem-foto { padding-top: calc(var(--topo) + 32px); }
html:not(.js) .inicio--sem-foto { padding-top: 32px; }
.inicio--sem-foto .inicio__nome { margin-top: 0; }
.inicio__titulo { max-width: 22ch; font-size: var(--step-lead); line-height: 1.18; letter-spacing: -0.01em; }
.inicio__sub { max-width: 40ch; color: var(--c-suave); }
.selo { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; }
.selo__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--c-destaque); }
.selo--fechado .selo__ponto { background: var(--c-suave); }
.inicio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 4px; }

/* ---------- suítes: a foto presa e a lista com a suíte acesa ---------- */
.suites { position: relative; padding: var(--secao) var(--margem) 0; }
/* no celular a foto fica no fluxo, acima da lista (presa, ela cobriria o título e os nomes ao rolar) */
.suites__fotos { position: relative; height: 38svh; min-height: 220px; margin-inline: calc(-1 * var(--margem)); overflow: hidden; background: var(--c-fundo); }
.suites__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--ease-out), transform 1600ms var(--ease-out); transform: scale(1.04); }
.suites__foto.e-ativa { opacity: 1; transform: none; }
.suites__lado { padding-top: 32px; }
.suites__titulo { font-size: var(--step-head); font-weight: 300; line-height: 1; letter-spacing: -0.025em; }
.periodos { display: grid; gap: 10px; margin-top: 28px; }
.periodos legend { margin-bottom: 10px; color: var(--c-suave); }
.periodos__opcoes, .cartao__periodos { display: flex; flex-wrap: wrap; gap: 6px; }
.periodo { position: relative; cursor: pointer; }
.periodo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.periodo span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--c-superficie); transition: background-color 200ms ease, color 200ms ease; }
.periodo input:checked + span { background: var(--c-tinta); color: var(--c-fundo); }
.periodo input:focus-visible + span { outline: 3px solid var(--c-tinta); outline-offset: 3px; } /* taste-skill-ignore: foco do seletor */
.suites__lista { list-style: none; padding: 0; margin-top: 32px; }
.suite + .suite { margin-top: 2px; }
.suite__cabeca { font-size: inherit; }
.suite__botao {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 56px; padding: 12px 0;
  border: 0; background: none; text-align: left; cursor: pointer;
  color: var(--c-suave); transition: color 300ms ease;
}
.suite.e-ativa .suite__botao, .suite__botao[aria-expanded="true"] { color: var(--c-tinta); }
.suite__nome { font-size: var(--step-lead); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; }
.suite__precos { flex: none; font-variant-numeric: tabular-nums; }
/* o preço do período marcado (sem JavaScript, pelo :has; com ele, pelo data-periodo da seção) */
.suite__preco { display: none; }
.suite__preco:first-child,
.suites:has(.periodo:nth-child(2) > input:checked) .suite__preco:nth-child(2),
.suites:has(.periodo:nth-child(3) > input:checked) .suite__preco:nth-child(3),
.suites:has(.periodo:nth-child(4) > input:checked) .suite__preco:nth-child(4) { display: inline; }
.suites:has(.periodo:not(:first-child) > input:checked) .suite__preco:first-child { display: none; }
.suite__mais { display: grid; gap: 16px; justify-items: start; padding: 4px 0 28px; max-width: 46ch; }
.js .suite__mais { display: none; }
.js .suite__botao[aria-expanded="true"] + .suite__mais, .js .suite__cabeca:has([aria-expanded="true"]) + .suite__mais { display: grid; }
.suite__itens { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.suite__itens li { padding: 6px 12px; background: var(--c-superficie); }
.suite__tabela { display: grid; gap: 4px; width: 100%; }
.suite__tabela div { display: flex; justify-content: space-between; gap: 16px; }
.suite__tabela dd { font-variant-numeric: tabular-nums; }
.suite__tabela dt { color: var(--c-suave); }

/* ---------- chegada: um verbo por tela ---------- */
.chegada { margin-top: var(--secao); }
.chegada__passos { list-style: none; padding: 0; }
/* overflow: clip (e não hidden) recorta a foto sem tirar o verbo do "position: sticky" */
.painel { position: relative; height: 100svh; min-height: 520px; overflow: clip; }
.painel__foto { position: absolute; inset: -6% 0; width: 100%; height: 112%; max-width: none; object-fit: cover; filter: brightness(0.62) contrast(1.05); }
.painel__trilho { position: absolute; inset: 14svh 0; z-index: 1; }
.painel__verbo {
  position: sticky; top: 50%; transform: translateY(-50%);
  padding-inline: var(--margem); text-align: center;
  font-size: var(--step-display); font-weight: 300; line-height: 0.9; letter-spacing: -0.045em;
}
.painel__frase {
  position: absolute; z-index: 1; left: var(--margem); right: var(--margem); bottom: calc(28px + env(safe-area-inset-bottom));
  max-width: 34ch;
}
/* véu neutro e uniforme só no canto da frase (a única exceção da casa para cobrir uma foto) */
.painel__frase::before { content: ""; position: absolute; inset: -16px -20px; z-index: -1; background: rgba(23, 13, 17, 0.62); }

/* ---------- datas especiais: um quadro, três distâncias ---------- */
.datas { padding-block: var(--secao); }
.datas__palco { display: grid; justify-items: center; gap: 16px; padding-inline: var(--margem); text-align: center; }
.datas__metade { font-size: var(--step-frase); font-weight: 300; line-height: 0.95; letter-spacing: -0.035em; }
.datas__quadro { position: relative; z-index: 0; width: min(76vw, 440px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-superficie); }
.datas__quadro img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; transition: transform 900ms var(--ease-out); }
.datas__metade--2 { position: relative; z-index: 1; margin-top: -0.3em; }
.datas__legenda { display: grid; gap: 16px; justify-items: start; width: 100%; max-width: 38ch; margin-top: 24px; text-align: left; }
.datas__pacotes { list-style: none; padding: 0; display: grid; gap: 18px; width: 100%; }
.datas__pacote { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step-lead); font-weight: 300; line-height: 1.2; }
.datas__preco { flex: none; font-variant-numeric: tabular-nums; }
.datas__desc { margin-top: 4px; color: var(--c-suave); }
.datas__aviso { color: var(--c-suave); }
/* as três distâncias (o main.js troca a etapa conforme a rolagem) */
[data-etapa="1"] .datas__quadro img { transform: scale(1.8); transform-origin: 38% 62%; }
[data-etapa="2"] .datas__quadro img { transform: scale(2.6); transform-origin: 70% 30%; }

/* ---------- cardápio: preços como num cardápio impresso ---------- */
.cardapio { padding: 0 var(--margem) var(--secao); }
.cardapio__grade { display: grid; gap: 40px; }
.cardapio__titulo { font-size: var(--step-head); font-weight: 300; line-height: 1; letter-spacing: -0.025em; }
.cardapio__texto { max-width: 34ch; margin-top: 16px; color: var(--c-suave); }
.cardapio__midia { width: 60%; aspect-ratio: 4 / 5; margin-top: 32px; overflow: hidden; background: var(--c-fundo); }
.cardapio__midia img, .cardapio__video { width: 100%; height: 100%; object-fit: cover; }
.cardapio__colunas { display: grid; gap: 40px; }
.grupo { break-inside: avoid; }
.grupo__nome { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step-lead); font-weight: 500; line-height: 1.2; }
.grupo__moeda { color: var(--c-suave); font-weight: 400; font-size: var(--step-body); }
.grupo__itens { list-style: none; padding: 0; display: grid; gap: 18px; margin-top: 18px; }
.prato__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.prato__preco { flex: none; font-variant-numeric: tabular-nums; }
.prato__desc { max-width: 36ch; color: var(--c-suave); }

/* sem as seções do meio (prévia só com suítes e dúvidas): o espaço de seção vem por cima */
:is(.inicio, .suites, .chegada) + :is(.cardapio, .duvidas, .onde) { padding-top: var(--secao); }

/* ---------- dúvidas: perguntas grandes, respostas ao lado ---------- */
.duvidas { padding: 0 var(--margem) var(--secao); }
.duvidas__tabela { display: grid; gap: 56px; }
.duvidas__titulo, .duvida__pergunta { font-size: var(--step-head); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; }
.duvidas__titulo { color: var(--c-suave); }
.duvida { display: grid; gap: 12px; }
.duvida__resposta { max-width: 42ch; }

/* ---------- onde fica: o número em letra de vitrine ---------- */
.onde { padding: 0 var(--margem) var(--secao); }
.onde__palco { display: grid; gap: clamp(40px, 10vh, 120px); }
.onde__cabeca { display: grid; gap: 10px; max-width: 30ch; }
.onde__titulo { font-size: var(--step-head); font-weight: 300; line-height: 1; letter-spacing: -0.025em; }
.onde__frase { font-size: var(--step-lead); line-height: 1.3; color: var(--c-suave); }
.onde__numero {
  display: block; padding-block: 8px;
  font-size: min(var(--step-display), calc((100vw - 2 * var(--margem)) / (var(--letras) * 0.48)));
  font-weight: 300; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: lining-nums;
  text-decoration: none; transition: color 300ms ease;
}
.onde__mais { display: grid; gap: 32px; margin-top: 56px; }
.onde__info { display: grid; gap: 14px; align-content: start; }
.onde__endereco { font-size: var(--step-lead); line-height: 1.3; }
.onde__rotas { display: flex; flex-wrap: wrap; gap: 0 24px; }
.horarios { list-style: none; padding: 0; display: grid; gap: 4px; max-width: 32ch; }
.horarios li { display: flex; justify-content: space-between; gap: 16px; color: var(--c-suave); }
.horarios li.e-hoje { color: var(--c-tinta); }
.onde__hoje { color: var(--c-suave); }
.onde__mapa { position: relative; aspect-ratio: 4 / 3; background: var(--c-superficie); }
.onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.4) brightness(0.9); }
.onde__mapa--foco { outline: 3px solid var(--c-tinta); outline-offset: 3px; } /* taste-skill-ignore: o contorno do mapa no Tab */
.onde__mapa--reservado { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--c-suave); }

/* ---------- reserva: o cartão de papel sobre a mesa escura ---------- */
.reserva { overflow: clip; padding: var(--secao) var(--margem) 0; }
.reserva__grade { display: grid; gap: 40px; }
.reserva__lado { display: grid; gap: 32px; align-content: start; }
.reserva__texto { max-width: 30ch; font-size: var(--step-lead); line-height: 1.3; }
.reserva__foto { width: min(70%, 420px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-fundo); }
.reserva__foto img { width: 100%; height: 100%; object-fit: cover; }
.cartao {
  display: grid; gap: 22px; width: min(100%, 640px); margin: 0 auto -60px;
  padding: 32px 24px 92px;
  background: var(--c-papel); color: var(--c-papel-tinta);
  transform: rotate(-1deg); transform-origin: 50% 0;
}
.cartao__titulo { font-size: var(--step-head); font-weight: 300; line-height: 1; letter-spacing: -0.025em; text-align: center; }
.cartao__aviso { text-align: center; color: var(--c-papel-suave); }
.cartao__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo > span, .campo > legend { color: var(--c-papel-suave); }
.campo > legend { margin-bottom: 6px; }
.campo select {
  width: 100%; min-height: 48px; padding: 0 40px 0 12px;
  border: 2px solid var(--c-papel-tinta); border-radius: 0; background-color: var(--c-papel); color: var(--c-papel-tinta);
  font-size: max(16px, var(--step-body));
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23170D11' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.periodo--papel span { background: rgba(23, 13, 17, 0.08); }
.periodo--papel input:checked + span { background: var(--c-papel-tinta); color: var(--c-papel); }
.periodo--papel input:focus-visible + span { outline-color: var(--c-papel-tinta); }
.cartao__resumo { min-height: 3em; text-align: center; font-size: var(--step-lead); font-weight: 300; line-height: 1.3; }
.cartao__acao {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 8px 16px;
  border: 0; background: var(--c-papel-tinta); color: var(--c-papel);
  font-weight: 500; text-align: center; cursor: pointer; transition: background-color 220ms ease, color 220ms ease;
}
.cartao__acao:active { transform: scale(0.99); }
.cartao__simples { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; color: var(--c-papel-suave); text-underline-offset: 0.24em; }

/* ---------- rodapé: a última foto, com o nome de ponta a ponta ---------- */
.rodape { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 88svh; padding: 32px var(--margem) calc(32px + env(safe-area-inset-bottom)); overflow: clip; isolation: isolate; }
.rodape__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(0.5) contrast(1.05); }
.rodape__topo { display: grid; gap: 28px; }
.rodape ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.rodape__topo a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 0.24em; }
.rodape__links a { text-decoration: none; }
.rodape__base { display: grid; gap: 16px; }
.rodape__nome {
  font-size: min(20vw, calc((100vw - 2 * var(--margem)) / (var(--letras) * 0.47)));
  font-weight: 300; line-height: 0.9; letter-spacing: -0.045em; text-transform: lowercase; white-space: nowrap;
  transform-origin: 0 100%;
}
.rodape__legal { display: grid; gap: 4px; font-size: var(--step-small); }
.rodape__legal a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 0.24em; }
.rodape__creditos summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.24em; }
.rodape__creditos ul { gap: 0; padding-bottom: 8px; }
.rodape__creditos li a { min-height: 0; padding-block: 12px; }
/* a licença ("CC0") é curta: a área de toque ganha largura sem mudar o texto */
.rodape__creditos .credito__licenca { display: inline-block; min-width: 44px; text-align: center; }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 300ms;
}
.flutuante svg { width: 28px; height: 28px; fill: currentColor; }
.flutuante--visivel { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
html:not(.js) .flutuante { opacity: 1; visibility: visible; transform: none; }

/* ---------- página 404 ---------- */
.perdido { display: grid; gap: 24px; justify-items: start; align-content: center; min-height: calc(100svh - var(--topo) - 92px); padding: 48px var(--margem); }
.perdido__titulo { max-width: 13ch; font-size: var(--step-frase); font-weight: 300; line-height: 0.98; letter-spacing: -0.035em; }
.perdido__texto { max-width: 46ch; color: var(--c-suave); }
.perdido__rodape { padding: 24px var(--margem); font-size: var(--step-small); }
.perdido__rodape a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- até 899 px: no celular o nome vem logo depois da foto, encostado na borda de baixo dela; o
   texto e os botões, depois ---------- */
@media (max-width: 899.98px) {
  .inicio__quadro { order: 1; }
  .inicio__nome { order: 2; }
  .inicio__texto { order: 3; }
}

/* ---------- 560 px ---------- */
@media (min-width: 560px) {
  .inicio__quadro { height: 46svh; }
  .cartao { padding: 40px 40px 100px; }
  .cardapio__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .rodape__topo { grid-template-columns: 1fr 1fr; }
  .rodape__contatos { justify-items: end; text-align: right; }
}

/* ---------- 900 px: a sala escura no computador ---------- */
@media (min-width: 900px) {
  /* início: a foto alta ocupa a metade esquerda, a frase fica no meio da direita e o nome atravessa o canto */
  .inicio { display: block; height: max(620px, calc(100svh - var(--faixa, 0px))); padding: 0; }
  .js .inicio { margin-top: calc(-1 * var(--topo)); }
  .inicio__quadro { position: absolute; left: 20px; top: 20px; bottom: 20px; width: calc(47vw - 20px); height: auto; }
  .inicio__texto { position: absolute; left: calc(47vw + 6vw); right: var(--margem); top: 27%; max-width: 30rem; padding: 0; gap: 18px; }
  .inicio__titulo { max-width: 20ch; }
  .inicio__nome {
    position: absolute; right: var(--margem); bottom: 40px; margin: 0; padding: 0;
    font-size: min(var(--step-display), calc(70vw / (var(--letras) * 0.46)));
    text-align: right;
  }

  .suites { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: start; padding-bottom: 0; }
  .suites__fotos { grid-column: 1 / span 5; position: sticky; top: 12vh; height: auto; width: auto; aspect-ratio: 4 / 5; margin: 0; max-height: 80vh; }
  .suites__lado { grid-column: 7 / span 5; padding-top: 0; }
  .suites--sem-fotos .suites__lado { grid-column: 3 / span 8; }
  .inicio--sem-foto .inicio__texto { left: var(--margem); top: calc(var(--topo) + 12%); }
  .suite__botao { min-height: 64px; }

  .datas__palco { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 4vw; }
  .datas__metade { grid-column: 1 / -1; }
  .datas__quadro { grid-column: 2; grid-row: 2; width: 26vw; }
  /* o fim da frase fica sob o quadro, alinhado à borda direita dele; a legenda desce ao lado sem encostar */
  .datas__metade--2 { grid-column: 1 / 3; grid-row: 3; justify-self: end; text-align: right; }
  .datas__legenda { grid-column: 3; grid-row: 2 / span 2; align-self: start; margin-top: 0; }

  .cardapio__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: start; }
  .cardapio__cabeca { grid-column: 1 / span 3; position: sticky; top: calc(var(--topo) + 24px); }
  .cardapio__midia { width: 100%; }
  .cardapio__colunas { grid-column: 5 / -1; column-gap: 64px; row-gap: 48px; }

  .duvidas__tabela { gap: 80px; }
  .duvidas__tabela, .duvida { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); }
  .duvidas__titulo { grid-column: 1 / span 6; }
  .duvida { grid-column: 1 / -1; align-items: baseline; }
  .duvida__pergunta { grid-column: 1 / span 6; }
  .duvida__resposta { grid-column: 8 / -1; }

  .onde__palco { gap: clamp(48px, 8vh, 96px); }
  .onde__mais { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); margin-top: 96px; align-items: start; }
  .onde__info { grid-column: 1 / span 4; }
  .onde__mapa { grid-column: 6 / -1; aspect-ratio: 16 / 9; }

  .reserva { min-height: 80svh; }
  .reserva__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: end; }
  .reserva__lado { grid-column: 1 / span 4; align-self: start; padding-top: 24px; }
  .reserva__foto { width: 100%; }
  .cartao { grid-column: 6 / -1; width: 100%; max-width: 700px; justify-self: end; padding: 48px 48px 108px; transform: rotate(-2deg); }

  .rodape { min-height: 100svh; }
  .rodape__topo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); }
  .rodape__links { grid-column: 1 / span 3; }
  .rodape__contatos { grid-column: 10 / -1; }
  .rodape__legal { grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: start; column-gap: 32px; }
  .rodape__creditos { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- 1100 px: menu em linha ---------- */
@media (min-width: 1100px) {
  .menu { display: flex; align-items: center; margin-right: 24px; }
  .menu ul { display: flex; gap: 4px 28px; }
  .menu li a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.06em; text-underline-offset: 0.3em;
    transition: text-decoration-color 200ms ease;
  }
  .menu__acoes, .menu-btn { display: none; }
}

/* ---------- interação no computador ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--destaque:hover { background: var(--c-tinta); color: var(--c-fundo); }
  .btn--contorno:hover { background: var(--c-destaque); color: var(--c-destaque-tinta); }
  .menu li a:hover, .rodape__links a:hover { text-decoration: underline; text-decoration-color: currentColor; }
  .link:hover, .menu-btn:hover { text-decoration-thickness: 0.12em; }
  .suite__botao:hover { color: var(--c-tinta); }
  .periodo:hover span { background: var(--c-suave); color: var(--c-fundo); }
  .periodo--papel:hover span { background: rgba(23, 13, 17, 0.2); color: var(--c-papel-tinta); }
  .periodo input:checked + span:hover { background: var(--c-tinta); color: var(--c-fundo); }
  .periodo--papel input:checked + span:hover { background: var(--c-papel-tinta); color: var(--c-papel); }
  .onde__numero:hover { color: var(--c-destaque); }
  .cartao__acao:hover { background: var(--c-destaque); color: var(--c-destaque-tinta); }
  .cartao__simples:hover { color: var(--c-papel-tinta); }
}

/* ---------- movimento (só com a classe .movimento, que respeita "reduzir movimento") ----------
   A foto do início assenta devagar (aparece já no primeiro quadro) e o nome só desliza: nada do topo começa
   escondido. O resto é feito pelo GSAP no main.js, com opacidade e deslocamento (o conteúdo nunca sai da
   ordem do Tab). */
.movimento .inicio__foto { animation: assentar 2200ms var(--ease-out) backwards; }
.movimento .inicio__nome { animation: deslizar 1400ms var(--ease-out) 150ms backwards; }
.movimento .inicio__titulo { animation: deslizar 1100ms var(--ease-out) 250ms backwards; }
.movimento .inicio__sub, .movimento .inicio .selo, .movimento .inicio__acoes { animation: subir 1000ms var(--ease-out) backwards; }
.movimento .inicio__sub { animation-delay: 380ms; }
.movimento .inicio .selo { animation-delay: 460ms; }
.movimento .inicio__acoes { animation-delay: 540ms; }
.movimento .inicio__acoes:focus-within { animation: none; }
@keyframes assentar { from { transform: scale(1.1); } }
@keyframes deslizar { from { transform: translateY(0.22em); } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }

/* palavras divididas pelo main.js: cada uma sobe de dentro de uma máscara */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.palavra__in { display: inline-block; }

/* datas fixas: o quadro fica preso no meio da tela durante pouco mais de uma tela de rolagem (só com o GSAP
   rodando); a foto muda de distância duas vezes nesse caminho */
.datas--fixo { padding-block: 0; }
.datas--fixo .datas__trilho { height: 230vh; }
.datas--fixo .datas__palco { position: sticky; top: 0; min-height: 100svh; align-content: center; padding-block: calc(var(--topo) + 16px) 24px; }
.datas--fixo .datas__metade--2, .datas--fixo .datas__legenda { transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
.datas--fixo[data-etapa="0"] .datas__metade--2 { opacity: 0; transform: translateY(0.3em); }
.datas--fixo:not([data-etapa="2"]) .datas__legenda:not(:focus-within) { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}