/* Weekend Festival 2027 · hospedagem.css
   Estilos só desta página. Tokens e componentes vêm de /assets/css/base.css (não edite a base aqui).
   Contrato: pesquisa/11-contrato-front.md. Dono: página hospedagem.
   Tema: claro, com contenção (13 §6.1). O Next Level é a forma de viver o festival de dentro: pink-claro,
   com a praia e as dúvidas em azul-claro (pesquisa/15 §01), fotos grandes e um campo de cor cheia só
   (a faixa rosa do seletor). Pink-forte como cor de ação, de ícone e de produto; o fim em grafite.
   Texto pink pequeno só em pink-escuro.
   Ordem (13 §3): herói · o que entra · faixa da turma · piscina, Lagoa e praia · vitrine das suítes ·
   #quartos · como reservar (com a diária extra) · dúvidas · final em grafite. */

/* ---------------------------------------------------------------- 1 · herói (09 §12.1, 13 §6.4) */
.hosp-heroi .heroi__frase { display: block; max-width: 13ch; }
/* "O Weekend Festival" numa linha só (Weekend Festival no HTML, revisão de 21/10: em 4 linhas, o
   "Festival" ficava sozinho). A frase encolhe com a coluna do texto: 11cqi deixa "O Weekend Festival",
   cerca de 8,9 em, em até 98% da coluna, e nunca passa do --t-h1. Fica em 3 linhas: "O Weekend Festival /
   com a chave / do quarto." */
.hosp-heroi .heroi__texto { container-type: inline-size; }
@supports (font-size: 1cqi) {
  .hosp-heroi .heroi__frase { max-width: none; font-size: min(var(--t-h1), 11cqi); }
}
.hosp-heroi .heroi__lead { max-width: 36ch; }
/* a dúvida é link com seta em todas as larguras (13 §6.2); o botão pink é a ação da página */
.hosp-heroi .heroi__acoes { margin-top: 4px; column-gap: 28px; }
.hosp-heroi .heroi__duvida { font-size: 1.0625rem; }
/* a linha de preço, embaixo, em Jost 500 15 px na cor secundária */
.hosp-heroi__preco .preco-linha {
  font-size: var(--t-legenda);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--texto-2);
  text-wrap: pretty;
}
.hosp-heroi__preco .preco-linha b { color: var(--texto); font-weight: 600; }
@media (max-width: 979px) {
  .hosp-heroi .heroi__texto { gap: 14px; padding-bottom: 36px; }
  .hosp-heroi .heroi__acoes { row-gap: 4px; }
  .hosp-heroi .heroi__duvida { justify-self: start; }
}
@media (min-width: 980px) {
  .hosp-heroi { padding-bottom: 8px; }
  /* quando o texto é mais alto que a janela ele encosta no topo, e a etiqueta girada -8° sobe
     cerca de 32 px na ponta (largura × sen 8°): batia no fio da nav a 1024 e a 1440x900 */
  .hosp-heroi .heroi__texto { padding-top: 40px; padding-bottom: 24px; }
  .hosp-heroi .heroi__acoes { margin-top: 12px; }
}

/* entrada: a etiqueta carimba (de -16° e 1,06 para -8° e 1), lead e ações sobem. Só CSS, só com .anima
   (JS ligado, movimento permitido, sem pausa); o H1 e o pôster aparecem na hora (LCP). */
@keyframes hosp-carimbo {
  from { opacity: 0; rotate: -16deg; scale: 1.06; }
  to { opacity: 1; rotate: var(--inclina-marca); scale: 1; }
}
@keyframes hosp-sobe {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: none; }
}
.anima .hosp-heroi .heroi__titulo .etiqueta { animation: hosp-carimbo 420ms var(--ease-expo) 300ms both; }
.anima .hosp-heroi .heroi__lead { animation: hosp-sobe 600ms var(--ease-expo) 60ms both; }
.anima .hosp-heroi .heroi__acoes { animation: hosp-sobe 600ms var(--ease-expo) 120ms both; }
.anima .hosp-heroi .hosp-heroi__preco { animation: hosp-sobe 600ms var(--ease-expo) 180ms both; }

/* ---------------------------------------------------------------- 2 · o que entra (09 §12.2, 13 §6.4) */
/* linhas em Jost 400 20 px, 16 px entre elas, ícone de 20 px em pink-forte; sem fio entre as linhas */
.hosp-inclui { padding-top: clamp(64px, 8vw, 128px); }
.hosp-inclui__grade { display: grid; gap: var(--respiro-cab); }
.hosp-inclui__lista { display: grid; gap: 16px; }
.hosp-inclui__lista li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}
.hosp-inclui__lista .i { width: 20px; height: 20px; margin-top: 0.2em; color: var(--wk-pink-forte); }
.hosp-fora {
  align-self: start;
  padding: 24px 24px 18px;
  border-radius: var(--r-midia);
  /* a caixa "Não entra" na alternada (azul-claro sobre a página rosa) */
  background: var(--fundo-alterno);
}
.hosp-fora__titulo { margin-bottom: 8px; }
.hosp-fora__lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.hosp-fora__lista .i { width: 18px; height: 18px; margin-top: 0.2em; color: var(--wk-grafite-2); }
.hosp-fora__lista .link { font-weight: 600; }
/* link dentro do texto (exceção do WCAG 2.5.8), com o alvo esticado na vertical */
.hosp-fora__diaria { padding-block: 10px; }
.hosp-inclui__cruzado { justify-self: start; }
@media (min-width: 980px) {
  .hosp-inclui__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    row-gap: var(--respiro-cab);
  }
  .hosp-inclui__titulo { grid-column: 1 / 8; }
  .hosp-inclui__lista { grid-column: 1 / 8; grid-row: 2; gap: 18px; }
  .hosp-fora { grid-column: 9 / 13; grid-row: 2; padding: 28px 32px 22px; }
  .hosp-inclui__cruzado { grid-column: 1 / 8; grid-row: 3; margin-top: -16px; }
}

/* festas do pacote (pesquisa/15 §04): a conta na linha e a 5ª festa embaixo, menor */
.hosp-inclui__festas { display: block; }
.hosp-inclui__extra { display: block; margin-top: 4px; font-size: var(--t-legenda); font-weight: 500; line-height: 1.4; color: var(--texto-2); }

/* FAQ "Quais festas estão no pacote?": a programação das 5 festas, uma por linha */
.faq-festas { display: grid; border-top: 1px solid var(--divisa); }
.faq-festas__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding-block: 10px;
  border-bottom: 1px solid var(--divisa);
}
.faq-festas__quando { font-size: var(--t-legenda); font-weight: 500; color: var(--texto-2); }
.faq-festas__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--f-voz); font-size: 1.1875rem; font-weight: 700; line-height: 1.2; color: var(--texto); }
.faq-festas__nome .festa-idade { min-height: 24px; font-size: 0.8125rem; }
.faq-festas__local { font-size: var(--t-legenda); color: var(--texto-2); }
/* o destaque da tabela da cliente (o selo do Chile na SELVA, "a festa mais quente" na HEAT), como na agenda
   da home e na pulseira de /ingressos */
.faq-festas__destaque { font-size: var(--t-legenda); font-weight: 600; color: var(--texto); }
@media (min-width: 768px) {
  .faq-festas__item { grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 13rem); column-gap: 16px; align-items: baseline; }
  .faq-festas__quando { grid-column: 1; grid-row: 1; }
  .faq-festas__nome { grid-column: 2; grid-row: 1; }
  .faq-festas__local { grid-column: 3; grid-row: 1; text-align: right; }
  .faq-festas__destaque { grid-column: 2; grid-row: 2; }
}

/* ---------------------------------------------------------------- 3 · faixa "Vem com a turma." (13 §3.2) */
/* .faixa-foto da base: sangrada, sem raio, legenda embaixo e à direita. O texto vem embaixo, no
   miolo, nas colunas 1 a 7. */
.hosp-turma { padding-bottom: var(--secao-curta); }
/* desktop: a foto 2:1 inteira sempre que a tela deixa. Com os 60svh da base (540 px em 1440x900) o
   topo do guarda-sol cortava e o rapaz em pé parava na coxa, com a sunga na borda de baixo. Aqui a
   altura acompanha a largura (2:1) até 82svh, e o corte que sobra sai de baixo (areia). */
@media (min-width: 768px) {
  .hosp-turma__foto img { height: clamp(420px, min(50vw, 82svh), 900px); object-position: 50% 12%; }
}
.hosp-turma__cab { margin: clamp(32px, 4vw, 56px) 0 0; }
.hosp-turma__link { justify-self: start; margin-top: -4px; }

/* ---------------------------------------------------------------- 4 · piscina, Lagoa e praia (13 §3.3) */
/* .mosaico da base, sem trilho: no desktop B 1:1 · C 4:3 · E 4:3 (336 · 448 · 448 em 1280);
   no celular C em largura total e B e E lado a lado (.mosaico__item--abre). A seção é .secao--curta. */
.hosp-complexo { padding-top: 0; }
.hosp-complexo .cab, .hosp-passos__cab { max-width: none; }
.hosp-complexo .cab h2, .hosp-passos__cab h2 { max-width: 24ch; }

/* ---------------------------------------------------------------- 5 · vitrine "Suítes e varandas." (13 §3.4) */
/* Celular: H2 e lead, a janela 4:5 em largura total, a lista embaixo. Desktop: janela 4:5 nas colunas
   1 a 5, texto e lista nas 7 a 12. A lista não tem caixa: linhas de 88 px separadas por um fio. */
.hosp-vitrine { padding-top: var(--secao-curta); }
.hosp-vitrine__grade { display: grid; grid-template-columns: minmax(0, 1fr); }
.hosp-vitrine__midia { margin: 0 0 clamp(32px, 6vw, 48px); }
.hosp-vitrine__midia .janela { aspect-ratio: 4 / 5; border-radius: var(--r-midia); }
/* tablet: a janela 4:5 na largura toda passava de 860 px de altura. Até 480 px de largura o 864x1080 fica
   nítido também em tela 2x */
@media (min-width: 640px) and (max-width: 979px) {
  .hosp-vitrine__midia { max-width: 480px; }
}
/* a linha muda de forma pela largura da própria lista (a coluna 7 a 12 tem 450 px em 1024 e 628 em 1440) */
.hosp-vitrine__lista { min-width: 0; container-type: inline-size; }
.vitrine { border-top: 1px solid var(--wk-linha); }
.vitrine__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4px;
  min-height: 88px;
  padding-block: 20px 8px;
  border-bottom: 1px solid var(--wk-linha);
}
.vitrine__nome { font-size: 1.5rem; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.vitrine__meta { font-size: var(--t-legenda); font-weight: 400; line-height: 1.4; color: var(--texto-2); }
/* celular: o preço e, embaixo, o link (igual em toda linha, com ou sem "desde") */
.vitrine__fim {
  display: grid;
  justify-items: start;
  margin-top: 8px;
}
.vitrine__preco {
  font-size: var(--t-legenda);
  font-weight: 500;
  line-height: 1.2;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vitrine__preco b { font-size: 1.375rem; font-weight: 600; color: var(--texto); letter-spacing: -0.005em; }
.vitrine__preco--equipe { font-size: 1rem; font-weight: 600; color: var(--texto); }
.vitrine__ver { white-space: nowrap; }
/* categoria esgotada na própria lista (15 §02): nome em grafite-2 (7,45:1), a etiqueta "Esgotado" no
   lugar do preço e o aviso no lugar de "Ver este quarto" */
.vitrine__item--esgotado .vitrine__nome { color: var(--texto-2); }
.vitrine__item--esgotado .vitrine__preco { white-space: normal; }
.vitrine__avisar { font-size: var(--t-legenda); white-space: nowrap; }
.vitrine__nota { margin-top: 12px; max-width: 52ch; font-weight: 400; }
@container (min-width: 540px) {
  /* nome e meta à esquerda; preço e "Ver este quarto" à direita, um embaixo do outro. Sem suporte a
     container query, fica a forma empilhada do celular */
  .vitrine__item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nome fim"
      "meta fim";
    column-gap: 32px;
    row-gap: 2px;
    align-items: center;
    padding-block: 18px 12px;
  }
  .vitrine__nome { grid-area: nome; align-self: end; }
  .vitrine__meta { grid-area: meta; align-self: start; }
  .vitrine__fim { grid-area: fim; display: grid; justify-items: end; row-gap: 0; margin-top: 0; text-align: right; }
  .vitrine__ver { margin-bottom: -6px; }
}
@media (min-width: 980px) {
  .hosp-vitrine__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--vao);
  }
  .hosp-vitrine__midia { grid-column: 1 / 6; grid-row: 1 / 3; margin: 0; align-self: start; }
  .hosp-vitrine__cab { grid-column: 7 / 13; grid-row: 1; align-self: end; }
  .hosp-vitrine__lista { grid-column: 7 / 13; grid-row: 2; align-self: start; }
}

/* ---------------------------------------------------------------- 6 · Racha o quarto (09 §10) */
/* A faixa pink-forte (maré rosa) leva H2, lead, chips e o link "Vai sozinho"; no desktop, a amostra
   viva da conta à direita. O trilho de chips fica no fluxo e nunca muda de geometria (CLS); o
   compacto que gruda embaixo da nav é a camada .hosp-atalho, criada pelo hospedagem.js. */
.quartos__faixa-in { display: grid; gap: 32px; padding-block: 12px 32px; }
.quartos__escolha { display: grid; gap: 10px; min-width: 0; }
.quartos__faixa h2 { color: var(--wk-branco); max-width: 15ch; }
.quartos__lead { color: var(--wk-branco); max-width: 34ch; }
.quartos__escolha .ocupa-trilho {
  position: static;
  z-index: auto;
  margin: 14px 0 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.quartos__sozinho { margin-top: 6px; }
.quartos__sozinho .link { text-wrap: pretty; }
@media (min-width: 768px) {
  /* os números numa fileira regular: cada chip com a mesma largura e o "desde" em duas linhas
     embaixo do quadrado ("desde" / "R$ 2.599"), para o "Ainda não sei" caber na mesma fileira */
  .quartos__escolha .ocupa { gap: 16px 12px; }
  .quartos__escolha .ocupa__chip:not(.ocupa__chip--todos) { width: 76px; }
  .quartos__escolha .ocupa__desde { white-space: normal; max-width: 76px; line-height: 1.25; text-align: center; }
}
@media (min-width: 980px) {
  .quartos__faixa-in {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: center;
    padding-block: 20px 48px;
  }
  .quartos__escolha { gap: 12px; }
  .quartos__escolha .ocupa-trilho { margin-top: 20px; }
  .quartos__sozinho { margin-top: 10px; }
}
@media (min-width: 980px) and (max-width: 1279px) {
  .quartos__faixa-in { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 32px; }
}

/* a amostra da conta (desktop): uma por ocupação, a do chip marcado aparece (CSS, sem JS também);
   "Ainda não sei" e navegador sem :has() ficam com a de 4 pessoas */
.quartos__amostra { display: none; }
@media (min-width: 980px) {
  .quartos__amostra {
    display: grid;
    align-self: center;
    min-width: 0;
    --texto: var(--wk-branco);
    --texto-2: var(--wk-branco);
  }
  .amostra { display: none; gap: 14px; justify-items: start; min-width: 0; }
  .amostra[data-amostra="4"] { display: grid; }
  .quartos:has(input[name="pessoas"]:not([value="todos"]):not([value="4"]):checked) .amostra[data-amostra="4"] { display: none; }
  .quartos:has(input[name="pessoas"][value="2"]:checked) .amostra[data-amostra="2"],
  .quartos:has(input[name="pessoas"][value="3"]:checked) .amostra[data-amostra="3"],
  .quartos:has(input[name="pessoas"][value="5"]:checked) .amostra[data-amostra="5"],
  .quartos:has(input[name="pessoas"][value="6"]:checked) .amostra[data-amostra="6"] { display: grid; }
  .amostra__titulo { font-size: var(--t-legenda); font-weight: 600; line-height: 1.3; }
  /* sobre o pink-forte as etiquetas invertem: branco com texto pink-forte (4,58:1) */
  .quartos__amostra .etiqueta--pink,
  .quartos__amostra .etiqueta--pink-g { --et-fundo: var(--wk-branco); --et-texto: var(--wk-pink-forte); }
  .quartos__amostra .conta__nota { color: var(--wk-branco); }
}

/* marco do trilho compacto (o hospedagem.js cria): a zona do topo do documento até o pé do trilho
   original. Não ocupa espaço nem aparece. */
.hosp-zona { position: absolute; top: 0; left: 0; width: 1px; pointer-events: none; visibility: hidden; }

/* trilho compacto que gruda: camada fixa à parte (o original não muda de tamanho, então não há
   deslocamento de layout). Entra por baixo da nav com translate; com movimento reduzido, seco. */
.quartos .hosp-atalho {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  margin: 0;
  display: none;
}
.quartos .hosp-atalho.is-preso { display: block; }
@keyframes hosp-atalho-entra {
  from { translate: 0 -100%; }
  to { translate: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-pausado) .quartos .hosp-atalho.is-preso { animation: hosp-atalho-entra 220ms var(--ease-out) both; }
}

/* sem JS os chips filtram pelo CSS (o JS cuida da animação e do aviso para leitor de tela) */
html:not(.js) .quartos:has(input[name="pessoas"][value="2"]:checked) .grupo:not([data-grupo="2"]),
html:not(.js) .quartos:has(input[name="pessoas"][value="3"]:checked) .grupo:not([data-grupo="3"]),
html:not(.js) .quartos:has(input[name="pessoas"][value="4"]:checked) .grupo:not([data-grupo="4"]),
html:not(.js) .quartos:has(input[name="pessoas"][value="5"]:checked) .grupo:not([data-grupo="5"]),
html:not(.js) .quartos:has(input[name="pessoas"][value="6"]:checked) .grupo:not([data-grupo="6"]) { display: none; }
/* sem JS a caixa da diária não muda a mensagem: some, e fica o botão "Pedir diária extra no WhatsApp" */
html:not(.js) .quarto__diaria { display: none; }

/* a lista: no pink-claro da página, rodando até 960 px; no desktop largo, título do grupo à esquerda (3 de 12) */
.quartos__lista { padding-block: 40px 16px; }
.grupo + .grupo { margin-top: 44px; }
.grupo__cab { display: grid; gap: 6px; margin-bottom: 16px; }
.grupo__desde { font-size: 1rem; font-weight: 500; color: var(--texto-2); }
.grupo__desde b { color: var(--texto); font-weight: 700; }
.grupo__nota { font-size: var(--t-legenda); font-weight: 500; line-height: 1.4; color: var(--texto-2); max-width: 40ch; }
.grupo__lista { display: grid; gap: 12px; }
@media (max-width: 1179px) {
  .quartos__lista { max-width: calc(960px + 2 * var(--margem)); }
}
@media (min-width: 1180px) {
  .quartos__lista {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--vao);
    padding-top: 56px;
  }
  .grupo { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; column-gap: var(--vao); }
  .grupo + .grupo { margin-top: 48px; }
  /* o título acompanha a lista do grupo (nav + trilho compacto de 56 px + respiro) */
  .grupo__cab {
    position: sticky;
    top: calc(var(--nav-h) + 56px + 28px);
    align-self: start;
    margin-bottom: 0;
    padding-top: 18px;
  }
  .quartos__nota { grid-column: 2; }
}

/* a linha do quarto: a linha inteira é o alvo; sem borda, separada por 12 px; pink-claro-2 ao passar o mouse */
.quarto { border-radius: var(--r-midia); transition: background-color 180ms var(--ease-out); }
/* realce sobre o pink-claro (só texto grafite, grafite-2 e teal dentro: 11,40, 5,48 e 7,69) */
.quarto[open], .quarto.is-alvo { background: var(--wk-pink-claro-2); }
.quarto__linha {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 28px;
  grid-template-areas:
    "foto nome seta"
    "foto meta seta"
    "foto preco seta";
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  align-content: center;
  min-height: 96px;
  padding: 12px 10px;
  border-radius: var(--r-midia);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
/* dentro do grupo, o "Para N pessoas" saiu da linha: sem cômodos nem diferenciais, nome e preço juntos */
details.quarto > .quarto__linha:not(:has(.quarto__meta)) {
  grid-template-areas:
    "foto nome seta"
    "foto preco seta";
}
.quarto__linha::-webkit-details-marker { display: none; }
.quarto__linha::marker { content: ""; }
.quarto__linha:focus-visible { outline-offset: -3px; }
.quarto__foto {
  grid-area: foto;
  align-self: start;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--wk-pink-claro-2);
}
.quarto__nome {
  grid-area: nome;
  align-self: end;
  font-family: var(--f-voz);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.quarto__nome .etiqueta { margin-left: 6px; vertical-align: 0.1em; }
.quarto__meta { grid-area: meta; font-size: var(--t-legenda); font-weight: 500; line-height: 1.35; color: var(--texto-2); }
.quarto__preco {
  grid-area: preco;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  margin-top: 2px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.quarto__preco b { font-size: var(--t-preco-lista); font-weight: 600; }
.quarto__preco small { font-size: var(--t-legenda); font-weight: 500; color: var(--texto-2); }
.quarto__preco--equipe small { font-size: 1rem; font-weight: 600; color: var(--texto); }
.quarto__seta { grid-area: seta; justify-self: end; width: 24px; height: 24px; transition: rotate 200ms var(--ease-out); }
.quarto[open] .quarto__seta { rotate: 45deg; }
.js .quarto:not(.is-aberto) .quarto__seta { rotate: 0deg; }
@media (hover: hover) and (pointer: fine) {
  details.quarto:not([open]) > .quarto__linha:hover { background: var(--wk-pink-claro-2); }
}
@media (min-width: 768px) {
  .quarto__linha {
    grid-template-columns: 120px minmax(0, 1fr) minmax(150px, 200px) 40px;
    grid-template-areas:
      "foto nome preco seta"
      "foto meta preco seta";
    column-gap: 20px;
    row-gap: 4px;
    min-height: 110px;
  }
  /* sem a linha de cômodos e diferenciais, o nome fica no meio da linha */
  details.quarto > .quarto__linha:not(:has(.quarto__meta)) { grid-template-areas: "foto nome preco seta"; }
  details.quarto > .quarto__linha:not(:has(.quarto__meta)) .quarto__nome { align-self: center; }
  .quarto__foto { align-self: center; width: 120px; height: 90px; }
  .quarto__meta { align-self: start; }
  .quarto__preco { flex-direction: column; align-items: flex-end; justify-self: end; text-align: right; margin-top: 0; }
  .quarto__preco b { font-size: var(--t-preco-lista); }
}

/* a linha aberta: pink-claro-2, raio 20. Celular: a conta logo abaixo da linha, a foto numa faixa de
   140 px e o resto. Desktop: foto numa coluna de 280 px à esquerda, conta e ações à direita. */
.quarto__aberto { display: grid; gap: 22px; padding: 6px 10px 24px; }
.quarto__fotos { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.quarto__fig {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: 12px;
  scroll-snap-align: start;
}
.quarto__fig img {
  width: auto;
  height: 140px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: var(--fundo-pagina);
}
.quarto__fig .legenda { margin: 0; max-width: 13ch; }
/* abaixo de 390 px os 187 px da foto e a legenda ao lado passavam da faixa (a legenda saía cortada
   à direita a 320): a foto encolhe em 4:3 e a legenda continua ao lado, inteira */
@media (max-width: 389px) {
  .quarto__fig { flex: 0 0 100%; min-width: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .quarto__fig img { width: 100%; height: auto; }
}
.quarto__corpo { display: grid; justify-items: start; gap: 22px; min-width: 0; }
@media (min-width: 768px) {
  .quarto__aberto {
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "fotos conta"
      "fotos corpo";
    gap: 24px 32px;
    padding: 8px 24px 28px;
    align-items: start;
  }
  .quarto__aberto > .conta { grid-area: conta; }
  .quarto__fotos { grid-area: fotos; }
  .quarto__corpo { grid-area: corpo; }
  .quarto__fig { flex: 0 0 100%; display: block; }
  .quarto__fig img { width: 100%; height: auto; }
  .quarto__fig .legenda { margin-top: 8px; max-width: none; }
}

/* a conta (09 §10.1): começa como uma etiqueta grande e se parte. Total em Baloo 800 de 28 a 32 px,
   "O quarto sai" em 15 px; a linha de leitura liga o total às partes; partes em 20 px com o rótulo
   em 15 px. Estado final no CSS (as rotações vêm da base); o hospedagem.js só anima a divisão. */
.conta { padding-top: 6px; gap: 12px; }
.conta__total { align-items: baseline; flex-wrap: wrap; column-gap: 10px; row-gap: 0; min-height: 56px; padding: 10px 18px 6px; font-size: var(--t-legenda); }
.conta__rotulo { letter-spacing: 0.04em; }
.conta__total b {
  margin-left: 0;
  font-size: clamp(1.75rem, 1.55rem + 0.6vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.conta--sem-valor .conta__total { font-size: 1.0625rem; align-items: center; }
.conta__leitura { font-size: var(--t-legenda); font-weight: 600; line-height: 1.35; color: var(--texto); }
.conta__leitura b { font-weight: 700; font-variant-numeric: tabular-nums; }
.conta__partes { gap: 16px 10px; }
.quarto__pagto { max-width: 52ch; font-weight: 500; line-height: 1.45; }
.quarto__diaria { display: grid; gap: 0; }
.quarto__diaria legend {
  padding: 0;
  margin-bottom: 4px;
  font-family: var(--f-voz);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}
.quarto__diaria .nota { margin-top: 2px; }
.previa {
  display: grid;
  gap: 10px;
  width: 100%;
  font-size: var(--t-legenda);
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto-2);
}
.previa q {
  display: block;
  max-width: 56ch;
  padding: 14px 16px;
  border: 1px solid rgb(38 36 31 / .16);
  border-radius: 14px 14px 14px 4px;
  background: var(--fundo-alterno);
  color: var(--wk-grafite);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  quotes: none;
  overflow-wrap: anywhere;
}
.previa q::before, .previa q::after { content: none; }
/* os dois botões crescem juntos: numa linha, ocupam a largura; quebrados, ficam um embaixo do outro
   com a mesma largura (no desktop o texto do botão não quebra) */
.quarto__acoes { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; padding-top: 2px; }
.quarto__acoes .btn { flex: 1 1 auto; }
@media (max-width: 479px) {
  /* a 390 o "Reservar meu quarto no WhatsApp" cabe numa linha; a 320, duas linhas equilibradas */
  .quarto__acoes .btn { padding-inline: 14px; gap: 8px; text-wrap: balance; line-height: 1.15; }
}

/* ocupação inteira esgotada (09 §10.5) */
.grupo__vazio { display: grid; justify-items: start; gap: 16px; padding: 20px; border-radius: var(--r-midia); background: var(--wk-pink-claro-2); }
.grupo__vazio p { max-width: 52ch; font-weight: 500; }

/* esgotado no próprio grupo (15 §02): a mesma linha, apagada. Foto em cinza e mais fraca, nome em
   grafite-2 (7,45:1), a etiqueta "Esgotado" (contorno grafite) no lugar do preço e o preço da tabela
   riscado embaixo. Sem seta e sem abrir: não é um <details>. Um fio separa os livres dos esgotados. */
.grupo__lista > li:not(:has(.quarto--esgotado)) + li:has(.quarto--esgotado) { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--divisa); }
.quarto--esgotado .quarto__linha {
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "foto nome"
    "foto meta"
    "foto preco"
    "foto avisar";
  cursor: default;
}
.quarto--esgotado .quarto__nome { color: var(--texto-2); }
/* o cinza é do estado, não da foto: se a mídia passar a gravar o recorte colorido, o esgotado continua
   cinza e o quarto que volta para a lista (produção sem status confirmado) aparece em cor. Apagada só
   por filtro, sem transparência: em qualquer fundo de página (branco, pink-claro) ela fica cinza */
.quarto--esgotado .quarto__foto { filter: grayscale(1) contrast(0.7) brightness(1.15); }
/* celular: etiqueta e preço riscado na mesma linha (a linha não cresce à toa); desktop: um embaixo do outro */
.quarto__preco--esgotado { align-items: center; column-gap: 10px; row-gap: 6px; margin-top: 6px; }
.quarto__antes { font-size: var(--t-legenda); font-weight: 500; color: var(--texto-2); white-space: nowrap; }
.quarto__antes s { text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; }
.quarto__avisar { grid-area: avisar; justify-self: start; font-size: var(--t-legenda); }
@media (min-width: 768px) {
  .quarto--esgotado .quarto__linha {
    grid-template-columns: 120px minmax(0, 1fr) minmax(150px, 200px) 40px;
    grid-template-areas:
      "foto nome preco ."
      "foto meta preco ."
      "foto avisar preco .";
  }
  .quarto__preco--esgotado { flex-direction: column; align-items: flex-end; justify-self: end; margin-top: 0; }
}
.quartos__nota { margin-top: 24px; max-width: 60ch; }

/* ---------------------------------------------------------------- 7 · como reservar e pagar (09 §12.5, 13 §6.4) */
.hosp-passos__lista > li { font-size: 1.125rem; font-weight: 500; line-height: 1.45; max-width: 32ch; }
/* a diária extra numa linha só, no fim da seção (saiu a faixa à parte) */
.hosp-passos__diaria {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--divisa);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.hosp-passos__diaria-texto { max-width: 62ch; font-size: 1.0625rem; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
.hosp-passos__diaria-texto strong { color: var(--texto); font-weight: 600; }
.hosp-passos__diaria-texto b { color: var(--texto); font-weight: 600; }
.hosp-passos__quem { margin-top: 28px; max-width: 62ch; }
.hosp-passos__cnpj { white-space: nowrap; }
@media (min-width: 980px) {
  .hosp-passos__lista > li { padding-right: 8px; }
  .hosp-passos__diaria-texto { max-width: none; }
  .hosp-passos__diaria {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    column-gap: 32px;
  }
}

/* ---------------------------------------------------------------- 8 · dúvidas da hospedagem (09 §12.8) */
.hosp-faq__grade { display: grid; gap: 40px; }
.hosp-faq__intro { display: grid; justify-items: start; gap: 16px; }
.hosp-faq__intro h2 { max-width: 12ch; }
.hosp-faq__lead { color: var(--texto-2); font-weight: 500; }
/* cada grupo: o H3 e, à direita, o WhatsApp do tema só com o ícone (o nome vem no aria-label);
   o botão grande "Tirar dúvida no WhatsApp" fica um só, na coluna da esquerda */
.hosp-faq__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.hosp-faq__cab h3 { margin: 0; }
.hosp-faq__wa.btn { flex: none; width: 44px; min-height: 44px; padding: 0; gap: 0; }
.hosp-faq__wa .i { width: 22px; height: 22px; margin: 0; }
.hosp-faq__politica ul { padding-left: 1.1em; list-style: disc; }
.hosp-faq__politica li + li { margin-top: 6px; }
.hosp-faq__politica > * + * { margin-top: 0.75em; }
@media (max-width: 479px) {
  .hosp-faq__intro .btn, .hosp-final__acoes .btn { padding-inline: 20px; text-wrap: balance; line-height: 1.15; }
}
@media (min-width: 980px) {
  .hosp-faq__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--vao); }
  .hosp-faq__intro { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
}

/* ---------------------------------------------------------------- 9 · final em grafite (13 §6.1 e §6.4) */
/* A página termina no escuro: H2 branco, a linha do pacote em cinza-noite, o botão pink-forte (cor do
   destino), a dúvida em contorno branco e o link do Party Pass em azul, embaixo. */
.hosp-final__in { display: grid; gap: 40px; }
.hosp-final__texto { display: grid; gap: 20px; }
.hosp-final__texto h2 { max-width: 14ch; }
.hosp-final__preco { max-width: 40ch; font-size: var(--t-lead); line-height: 1.45; color: var(--texto-2); text-wrap: pretty; }
.hosp-final__preco b { color: var(--texto); font-weight: 600; }
.hosp-final__acoes { display: grid; justify-items: start; gap: 16px; }
.hosp-final__pp { font-size: 1.0625rem; }
@media (min-width: 980px) {
  .hosp-final__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    align-items: end;
  }
  .hosp-final__texto { grid-column: 1 / 8; }
  .hosp-final__acoes { grid-column: 9 / 13; justify-items: stretch; }
  .hosp-final__acoes .acoes { display: grid; gap: 12px; }
  .hosp-final__pp { justify-self: start; }
}

/* ---------------------------------------------------------------- movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .quarto, .quarto__seta { transition: none; }
}