/* ============================================================================
   PMS HOTEL — montra-monte.css (MONTRA.5, 08/10/2026)
   ----------------------------------------------------------------------------
   O configurador «Monte o seu Kandalu» (`/monte-o-seu`).

   A ideia: o fim do dia de um hotel é a conta. O preço é desenhado como um FOLIO:
   papel quente sobre a faixa clara, linhas com pontos até ao valor, total com
   regra dupla e um carimbo «Estimativa» sempre à vista. Cada escolha do visitante
   acrescenta uma linha à conta, e o número grande muda em directo.

   Zero cores literais (tudo de `--montra-*`, incluindo `--montra-folio`).
   Sem imagens, sem fontes de ícones. O movimento só explica (linha nova que entra,
   total que muda) e desliga-se com `prefers-reduced-motion` (regra global da montra).
   Depende de `tokens.css`, `base.css` e `montra.css`.
   ============================================================================ */

/* ---- abertura -------------------------------------------------------------- */

.m-monte-heroi { padding-block: 8px 36px; }
.m-monte-heroi .m-h1 { max-width: 24ch; font-size: clamp(2.125rem, 1.2rem + 3vw, 3.5rem); }
.m-monte-heroi .m-lead { margin-top: 16px; }
.m-monte-heroi .m-migalhas a,
.m-monte-heroi .m-migalhas span { color: var(--montra-sobre-2); }

.m-monte-heroi__atalhos-titulo { margin: 24px 0 8px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--montra-sobre-muda); }

.m-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.m-pagina a.m-atalho {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--montra-sobre-muda);
  border-radius: 999px;
  color: var(--montra-sobre);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--duracao-rapida) var(--curva-saida), border-color var(--duracao-rapida) var(--curva-saida);
}

.m-pagina a.m-atalho:hover { background: var(--montra-marinho-2); border-color: var(--montra-realce); }

/* ---- a grelha: escolhas à esquerda, a conta à direita ----------------------- */

.m-monte { padding-block: 28px 44px; }
.m-monte__grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }

@media (min-width: 960px) {
  .m-monte { padding-block: 44px 64px; }
  .m-monte__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
}

@media (min-width: 960px) and (min-height: 820px) {
  .m-monte__conta { position: sticky; top: 92px; }
}

/* ---- passos ----------------------------------------------------------------- */

.m-passo { margin: 0 0 32px; padding: 0; border: 0; min-inline-size: 0; }

.m-passo__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.m-passo__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--montra-marinho);
  color: var(--montra-sobre);
  font-size: 0.9375rem;
  font-weight: 800;
}

.m-passo__nota { margin: 0 0 12px; font-size: 0.9375rem; color: var(--montra-tinta-2); }

/* ---- cartões que se escolhem (rádio e caixa) -------------------------------- */

.m-opcoes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.m-opcoes--tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-opcoes--curtas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }

.m-opcao,
.m-escolha { position: relative; }

.m-opcao input,
.m-escolha > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.m-opcao label,
.m-escolha > label,
.m-escolha__cartao {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 14px 52px 14px 16px;
  background: var(--montra-papel);
  border: 2px solid var(--montra-campo-borda);
  border-radius: var(--montra-raio);
  transition: border-color var(--duracao-rapida) var(--curva-saida), background-color var(--duracao-rapida) var(--curva-saida);
  position: relative;
}

.m-opcao input:hover + label,
.m-escolha > input:hover + label { border-color: var(--montra-tinta); }

.m-opcao input:checked + label,
.m-escolha > input:checked + label {
  border-color: var(--montra-marinho);
  background: var(--montra-papel);
  box-shadow: inset 0 0 0 1px var(--montra-marinho);
}

/* O indicador: círculo vazio ou com visto — o estado nunca depende só da cor. */
.m-opcao label::after,
.m-escolha > label::after,
.m-escolha--incluido .m-escolha__cartao::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--montra-campo-borda);
  background: var(--montra-papel);
}

.m-opcao label::after { border-radius: 50%; }
.m-escolha > label::after,
.m-escolha--incluido .m-escolha__cartao::after { border-radius: 6px; }

.m-opcao input:checked + label::after,
.m-escolha > input:checked + label::after,
.m-escolha--incluido .m-escolha__cartao::after {
  border-color: var(--montra-marinho);
  background: var(--montra-marinho);
}

/* O visto: dois lados de um rectângulo rodado. */
.m-opcao input:checked + label::before,
.m-escolha > input:checked + label::before,
.m-escolha--incluido .m-escolha__cartao::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 19px;
  right: 23px;
  width: 6px;
  height: 11px;
  border-right: 3px solid var(--montra-sobre);
  border-bottom: 3px solid var(--montra-sobre);
  transform: rotate(45deg);
}

.m-opcao input:focus-visible + label,
.m-escolha > input:focus-visible + label {
  outline: 3px solid var(--montra-tinta);
  outline-offset: 3px;
}

.m-opcao input:disabled { cursor: not-allowed; }
.m-opcao input:disabled + label { border-color: var(--montra-linha); background: var(--montra-papel-2); color: var(--montra-tinta-muda); }
.m-opcao input:disabled + label::after { border-color: var(--montra-linha); }

.m-opcao__nome,
.m-escolha__nome { font-weight: 750; font-size: 1rem; line-height: 1.3; }
.m-opcao__texto,
.m-escolha__texto { font-size: 0.9375rem; line-height: 1.4; color: var(--montra-tinta-2); }

/* ---- números --------------------------------------------------------------- */

.m-numeros { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.m-numero label { display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 700; }
.m-numero__ajuda { margin: 6px 0 0; font-size: 0.875rem; color: var(--montra-tinta-muda); }

.m-numero__caixa { display: flex; align-items: stretch; gap: 8px; }

.m-numero input {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid var(--montra-campo-borda);
  border-radius: var(--montra-raio);
  background: var(--montra-papel);
  color: var(--montra-tinta);
  font-family: inherit;
  font-size: 1.375rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.m-numero__caixa input { text-align: center; }

.m-passo button.m-passo__passo {
  flex: none;
  width: 52px;
  min-height: 52px;
  border: 2px solid var(--montra-campo-borda);
  border-radius: var(--montra-raio);
  background: var(--montra-papel);
  color: var(--montra-tinta);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.m-passo button.m-passo__passo:hover { border-color: var(--montra-tinta); background: var(--montra-papel-2); }

/* ---- módulos --------------------------------------------------------------- */

.m-escolhas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 700px) and (max-width: 959px), (min-width: 1200px) {
  .m-escolhas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.m-escolha > label,
.m-escolha__cartao { height: 100%; align-content: start; }

.m-escolha__preco { margin-top: 4px; font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--montra-tinta); }
.m-escolha__nota { margin-top: 2px; font-size: 0.875rem; font-weight: 700; color: var(--montra-realce-escuro); }

.m-escolha--incluido .m-escolha__cartao { background: var(--montra-ok-fundo); border-color: var(--montra-ok); }
.m-escolha--incluido .m-escolha__preco { color: var(--montra-ok); }
.m-escolha--breve .m-escolha__cartao { border-style: dashed; border-color: var(--montra-linha); background: var(--montra-papel-2); }
.m-escolha--breve .m-escolha__nome,
.m-escolha--breve .m-escolha__texto { color: var(--montra-tinta-muda); }

.m-escolha__nome .m-etiqueta { margin-left: 6px; }

.m-escolha__sub { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; padding-left: 4px; font-size: 0.9375rem; }
.m-escolha__sub input { flex: none; width: 24px; height: 24px; accent-color: var(--montra-marinho); }

/* ---- o folio ---------------------------------------------------------------- */

.m-conta { position: relative; }

.m-folio {
  position: relative;
  margin-bottom: 12px;
  padding: 22px 20px 26px;
  background: var(--montra-folio);
  color: var(--montra-tinta);
  border-radius: 6px 6px 0 0;
  box-shadow: var(--montra-sombra-moldura);
  font-size: 0.9375rem;
  transition: opacity var(--duracao-normal) var(--curva-saida);
}

/* Borda picotada do papel, em baixo. */
.m-folio::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  background:
    linear-gradient(135deg, var(--montra-folio) 6px, transparent 0) 0 0 / 16px 12px repeat-x,
    linear-gradient(225deg, var(--montra-folio) 6px, transparent 0) 0 0 / 16px 12px repeat-x;
}

.m-conta[aria-busy="true"] .m-folio { opacity: 0.55; }

.m-folio__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.m-folio__titulo { margin: 0; font-size: 1.5rem; font-weight: 800; }

.m-folio__selo {
  margin: 0;
  padding: 4px 10px;
  border: 2px dashed var(--montra-realce-escuro);
  border-radius: 4px;
  color: var(--montra-realce-escuro);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.m-folio__quem { margin: 10px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--montra-folio-linha); color: var(--montra-tinta-2); font-weight: 600; }

.m-folio__aviso,
.m-folio__pendente,
.m-folio__sugestao {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 4px solid var(--montra-realce-escuro);
  background: var(--montra-papel);
  list-style: none;
}

.m-folio__sugestao { border-left-color: var(--montra-marinho); }
.m-folio__pendente p,
.m-folio__sugestao p,
.m-folio__aviso li { margin: 0 0 8px; }
.m-folio__aviso li:last-child { margin-bottom: 0; }

.m-folio__vazio { margin: 12px 0 18px; padding: 18px; border: 2px dashed var(--montra-folio-linha); border-radius: 6px; color: var(--montra-tinta-2); text-align: center; }

.m-folio__linhas { margin: 0; padding: 0; list-style: none; }

.m-folio__linhas li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--montra-folio-linha);
}

.m-folio__rotulo { font-weight: 700; }
.m-folio__rotulo small { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 500; color: var(--montra-tinta-muda); }

.m-folio__preco { display: inline-flex; flex-direction: column; align-items: flex-end; text-align: right; }
.m-folio__valor { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-folio__valor--incluido { color: var(--montra-ok); }
.m-folio__sufixo { font-size: 0.875rem; font-weight: 600; color: var(--montra-tinta-muda); }

.m-hipotese {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--montra-realce-escuro);
  border-radius: 4px;
  color: var(--montra-realce-escuro);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.m-folio__total { margin-top: 14px; padding-top: 12px; border-top: 4px double var(--montra-tinta); }
.m-folio__total-rotulo { margin: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--montra-tinta-2); }

.m-folio__total-valor {
  margin: 2px 0 4px;
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.m-folio__total-periodo { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--montra-tinta-2); }
.m-folio__kz,
.m-folio__nota { margin: 0 0 8px; font-size: 0.875rem; color: var(--montra-tinta-2); }

.m-folio__secundarios { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.m-folio__secundarios li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 4px; }
.m-folio__secundarios strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-folio__poupa { background: var(--montra-ok-fundo); color: var(--montra-tinta); }
.m-folio__poupa strong { color: var(--montra-ok); }

.m-folio__sub { margin: 18px 0 6px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--montra-tinta-2); }
.m-folio__lista { margin: 0; padding-left: 18px; color: var(--montra-tinta-2); }
.m-folio__lista li { margin-bottom: 4px; }
.m-folio__lista--nao { color: var(--montra-tinta); }

.m-folio__mais { margin-top: 14px; }
.m-folio__mais summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--montra-realce-escuro); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.m-folio__mais .m-folio__lista { margin-top: 4px; }

.m-folio__partilha { margin: 18px 0; }
.m-folio__partilha label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 700; }
.m-folio__partilha-linha { display: flex; gap: 8px; }

.m-folio__partilha-linha input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--montra-campo-borda);
  border-radius: var(--montra-raio);
  background: var(--montra-papel);
  color: var(--montra-tinta);
  font-family: inherit;
  font-size: 0.8125rem;
}

.m-folio .m-ligacao { font-weight: 700; }

/* O movimento que explica: a linha nova entra; o total que mudou dá um toque. */
@keyframes m-linha-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes m-total-toque { 0% { opacity: 0.35; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

.m-folio__linhas li.m-nova { animation: m-linha-entra 240ms var(--curva-saida); }
.m-folio__total-valor.m-mudou { animation: m-total-toque 220ms var(--curva-saida); }

/* ---- barra do total, só em telemóvel ---------------------------------------- */

.m-barra { display: none; }

@media (max-width: 959px) {
  .m-pagina--monte { padding-bottom: 76px; }

  .m-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-lateral);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--gutter-telemovel);
    background: var(--montra-marinho);
    color: var(--montra-sobre);
    border-top: 1px solid var(--montra-linha-escura);
  }

  .m-pedido-visivel .m-barra { display: none; }
  .m-barra__valor { margin: 0; font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .m-barra__valor span { font-size: 0.8125rem; font-weight: 600; color: var(--montra-sobre-2); }
}

/* ---- pedido: resumo da selecção --------------------------------------------- */

.m-selecao-resumo {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--montra-sobre-muda);
  border-left: 4px solid var(--montra-realce);
  border-radius: var(--montra-raio);
  color: var(--montra-sobre-2);
}

.m-selecao-resumo p { margin: 0 0 6px; }
.m-selecao-resumo__titulo { font-weight: 800; color: var(--montra-sobre); }
.m-pagina .m-selecao-resumo a { color: var(--montra-sobre); font-weight: 700; }

/* O botão do WhatsApp não tapa a barra do total. */
@media (max-width: 959px) {
  .m-pagina--monte .m-whatsapp { bottom: 92px; }
}

/* A caixa «chave própria» e o seu texto são um só alvo, com 44 px de altura. */
.m-escolha__sub label { display: flex; align-items: center; flex: 1; min-height: 44px; cursor: pointer; }

/* Em telemóvel estreito os quatro tipos de negócio ficam numa coluna: texto à vontade e alvo inteiro. */
@media (max-width: 519px) {
  .m-opcoes--tipos { grid-template-columns: minmax(0, 1fr); }
  .m-opcoes--curtas { grid-template-columns: minmax(0, 1fr); }
}