/* ============================================================================
   PMS HOTEL — montra.css (redesenho de 07/10/2026)
   ----------------------------------------------------------------------------
   A montra pública do produto (`app/index.php`, servida em `/` e `/planos`).
   Substitui a secção 15 de `sitio.css` e a mistura de «vidro» sobre marinho que
   deixava cartões brancos com texto claro. Decisão e razões:
   `docs/design/AUDITORIA-UX.md` e `docs/design/REFERENCIAS.md`.

   Direcção: «um dia no hotel». A página conta o dia do check-in ao fecho do dia,
   com o ecrã real do produto em cada momento. Faixas marinho (herói, pedido de
   demonstração, rodapé) alternam com faixas claras; cada faixa tem a sua tinta.
   A ousadia está num sítio só — a escala e o peso da tipografia — e o resto
   fica quieto: um raio, uma sombra (só nas molduras dos ecrãs), um realce.

   Zero cores literais: tudo sai dos `--montra-*` de `tokens.css`.
   Sem JavaScript, sem fontes de ícones: marcas desenhadas em CSS.
   Depende de `fontes.css`, `tokens.css` e `base.css`.
   ============================================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

@media (min-width: 900px) {
  html { scroll-padding-top: 88px; }
}

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

.m-pagina {
  margin: 0;
  background: var(--montra-papel);
  color: var(--montra-tinta);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  overflow-x: clip;
  /* a tinta do anel de foco muda com a faixa (ver .m-escuro) */
  --m-foco: var(--montra-tinta);
}

.m-pagina :focus-visible {
  outline: 3px solid var(--m-foco);
  outline-offset: 3px;
}

.m-escuro { --m-foco: var(--montra-realce); }

.m-pagina a { color: inherit; }

/* ---- estrutura ----------------------------------------------------------- */

.m-faixa {
  width: 100%;
  max-width: var(--montra-medida);
  margin-inline: auto;
  padding-inline: var(--gutter-telemovel);
}

@media (min-width: 640px) {
  .m-faixa { padding-inline: var(--gutter); }
}

.m-seccao { padding-block: 36px; }
.m-seccao--cinza { background: var(--montra-papel-2); }

@media (min-width: 900px) {
  .m-seccao { padding-block: 52px; }
}

.m-escuro {
  background: var(--montra-marinho);
  color: var(--montra-sobre);
}

/* ---- tipografia ---------------------------------------------------------- */

.m-pagina h1,
.m-pagina h2,
.m-pagina h3 {
  font-family: var(--fonte-titulo);
  color: inherit;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.m-h1 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  font-weight: 800;
  line-height: 1.04;
}

.m-h2 {
  font-size: clamp(1.625rem, 1.15rem + 1.7vw, 2.5rem);
  font-weight: 750;
  line-height: 1.12;
}

.m-h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

.m-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--montra-tinta-2); max-width: 60ch; }
.m-escuro .m-lead { color: var(--montra-sobre-2); }
.m-texto { color: var(--montra-tinta-2); }
.m-escuro .m-texto { color: var(--montra-sobre-2); }
.m-muda { color: var(--montra-tinta-muda); font-size: 0.9375rem; }
.m-escuro .m-muda { color: var(--montra-sobre-muda); }

/* O «quando» de cada momento do dia: texto normal, cor do realce escuro. */
.m-quando {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--montra-realce-escuro);
}

.m-escuro .m-quando { color: var(--montra-realce); }

.m-cabecalho-seccao { max-width: 720px; margin-bottom: 22px; }
.m-h2 + .m-lead { margin-top: 12px; }
.m-cabecalho-seccao .m-lead { margin-top: 16px; }

/* ---- telemóvel: texto mais compacto ----------------------------------------
   A 343 px de coluna cada linha a mais pesa; 15 px continua legível (≥ 14 px
   do §5.2) e a página perde alguns ecrãs de rolagem. */
@media (max-width: 639px) {
  .m-pagina { font-size: 0.9375rem; line-height: 1.5; }
  .m-lead { font-size: 1rem; line-height: 1.5; }
  .m-h2 { font-size: 1.5rem; }
  .m-momento__itens li:nth-child(n+4) { display: none; }
  .m-seccao { padding-block: 36px; }
  .m-cabecalho-seccao { margin-bottom: 20px; }
  .m-heroi .m-botao--contorno-escuro { display: none; }
  .m-demo__pontos li:nth-child(3) { display: none; }
  .m-heroi { padding-block: 28px 36px; }
  .m-momentos { gap: 36px; }
  .m-rodape__marca p { display: none; }
  .m-heroi__texto .m-lead { margin-top: 12px; }
  .m-heroi__botoes { margin-top: 20px; }
  .m-prova { margin-top: 20px; padding-top: 16px; }
  .m-prova li:nth-child(n+3) { display: none; }
  .m-cta { padding-block: 28px; }
}

/* ---- botões -------------------------------------------------------------- */

.m-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--montra-raio);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-saida),
              border-color var(--duracao-rapida) var(--curva-saida);
}

.m-pagina a.m-botao--principal,
.m-pagina button.m-botao--principal {
  background: var(--montra-realce);
  color: var(--montra-realce-tinta);
}

.m-pagina a.m-botao--principal:hover,
.m-pagina button.m-botao--principal:hover { background: var(--montra-realce-hover); }

.m-pagina a.m-botao--escuro {
  background: var(--montra-marinho);
  color: var(--montra-sobre);
}

.m-pagina a.m-botao--escuro:hover,
.m-pagina button.m-botao--escuro:hover { background: var(--montra-marinho-2); }

.m-pagina button.m-botao--escuro {
  background: var(--montra-marinho);
  color: var(--montra-sobre);
}

.m-pagina a.m-botao--contorno {
  border-color: var(--montra-tinta);
  color: var(--montra-tinta);
}

.m-pagina a.m-botao--contorno:hover { background: var(--montra-papel-2); }

.m-pagina .m-escuro a.m-botao--contorno,
.m-pagina a.m-botao--contorno-escuro {
  border-color: var(--montra-sobre-muda);
  color: var(--montra-sobre);
}

.m-pagina a.m-botao--contorno-escuro:hover { background: var(--montra-marinho-2); }

.m-botao--largo { width: 100%; }
.m-botao--pequeno { min-height: 44px; padding: 8px 16px; font-size: 0.9375rem; }

/* ---- cabeçalho ----------------------------------------------------------- */

.m-topo {
  background: var(--montra-papel);
  border-bottom: 1px solid var(--montra-linha);
  position: relative;
  z-index: var(--z-topo);
}

@media (min-width: 900px) {
  .m-topo { position: sticky; top: 0; }
}

.m-topo__linha {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.m-topo__marca { display: inline-flex; align-items: center; margin-right: auto; }
.m-topo__marca img { display: block; height: 28px; width: auto; }

@media (min-width: 900px) {
  .m-topo__linha { min-height: 72px; gap: 16px; }
  .m-topo__marca img { height: 36px; }
}

.m-nav { display: none; }

@media (min-width: 1100px) {
  .m-nav { display: block; }
  .m-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .m-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--montra-raio);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--montra-tinta-2);
    text-decoration: none;
  }
  .m-nav a:hover { background: var(--montra-papel-2); color: var(--montra-tinta); }
}

.m-topo__entrar { display: none; }

@media (min-width: 1100px) {
  .m-topo__entrar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .m-topo__entrar:hover { text-decoration: underline; }
}

/* Menu de telemóvel: `<details>`, abre e fecha sem JavaScript. O painel fica em
   fluxo (empurra a página) e o cabeçalho não é fixo em telemóvel, por isso uma
   âncora escolhida deixa o menu para trás e não tapa o conteúdo. */
.m-menu { display: block; }
.m-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--montra-linha);
  border-radius: var(--montra-raio);
  cursor: pointer;
  list-style: none;
  /* três barras desenhadas com gradientes, na tinta do texto */
  background:
    linear-gradient(var(--montra-tinta), var(--montra-tinta)) center 14px / 20px 2px no-repeat,
    linear-gradient(var(--montra-tinta), var(--montra-tinta)) center 21px / 20px 2px no-repeat,
    linear-gradient(var(--montra-tinta), var(--montra-tinta)) center 28px / 20px 2px no-repeat;
}

.m-menu > summary::-webkit-details-marker { display: none; }
.m-menu[open] > summary { background-color: var(--montra-papel-2); }

.m-menu__painel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--montra-papel);
  border-bottom: 1px solid var(--montra-linha);
  padding: 8px var(--gutter-telemovel) 16px;
}

.m-menu__painel ul { list-style: none; margin: 0; padding: 0; }
.m-menu__painel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--montra-linha);
}

@media (min-width: 1100px) {
  .m-menu { display: none; }
}

.m-topo .m-botao--pequeno { padding-inline: 12px; white-space: nowrap; font-size: 0.875rem; }

@media (min-width: 900px) {
  .m-topo .m-botao--pequeno { padding-inline: 16px; font-size: 0.9375rem; }
}

/* ---- herói --------------------------------------------------------------- */

.m-heroi {
  position: relative;
  padding-block: 40px 56px;
  overflow: clip;
  background-color: var(--montra-marinho);
  background-size: cover;
  background-position: center;
}

/* Com imagem de fundo do dono, o texto precisa de um véu por baixo. */
.m-heroi--com-fundo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--montra-marinho);
  opacity: 0.82;
}

.m-heroi > * { position: relative; }

.m-heroi__grelha { display: grid; gap: 32px; align-items: center; }
.m-heroi__texto .m-lead { margin-top: 20px; }

.m-heroi__botoes { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }

.m-prova {
  display: grid;
  gap: 8px;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--montra-linha-escura);
  list-style: none;
  font-size: 0.9375rem;
  color: var(--montra-sobre-2);
}

.m-prova li { display: flex; gap: 10px; align-items: baseline; }

.m-prova li::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.8em;
  border-right: 2px solid var(--montra-realce);
  border-bottom: 2px solid var(--montra-realce);
  transform: translateY(-0.08em) rotate(40deg);
  margin-inline: 4px 2px;
}

@media (min-width: 900px) {
  .m-heroi { padding-block: 64px 72px; }
  .m-heroi__grelha { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 48px; }
  .m-heroi__botoes { flex-direction: row; flex-wrap: wrap; }
}

/* ---- molduras dos ecrãs reais --------------------------------------------- */

.m-ecra { margin: 0; }

.m-ecra__moldura {
  overflow: hidden;
  background: var(--montra-marinho-2);
  border: 1px solid var(--montra-linha-escura);
  border-radius: var(--montra-raio-moldura);
  box-shadow: var(--montra-sombra-moldura);
}

/* O ecrã é recortado (sem a lateral do menu) para ler-se mais depressa; a
   imagem tem altura definida pela proporção, por isso nunca fica em branco. */
.m-ecra__moldura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 100% 0;
  background: var(--montra-marinho-2);
}

@media (min-width: 900px) {
  .m-ecra__moldura img { aspect-ratio: 16 / 9; }
}

/* Em telemóvel o ecrã é AMPLIADO e ancorado depois do menu lateral: a 343 px a imagem inteira
   tem letra de 4 px; assim vê-se a área de trabalho (sem o menu lateral) e lê-se. */
@media (max-width: 899px) {
  .m-ecra__moldura { aspect-ratio: 4 / 3; }
  .m-ecra__moldura img {
    width: 160%;
    max-width: none;
    margin-left: -32%;
    aspect-ratio: auto;
    object-fit: initial;
  }
}

.m-ecra__legenda {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--montra-tinta-muda);
}

.m-escuro .m-ecra__legenda { color: var(--montra-sobre-muda); }

/* ---- os momentos do dia --------------------------------------------------- */

.m-momentos { display: grid; gap: 36px; }

.m-momento { display: grid; gap: 24px; align-items: center; }

/* Em telemóvel: o ecrã logo a seguir à ideia, e a lista por baixo. */
@media (max-width: 899px) {
  .m-momento { gap: 0; }
  .m-momento__texto { display: contents; }
  .m-momento__texto > * { order: 1; }
  .m-momento__ecras { order: 2; margin-top: 16px; }
  .m-momento__texto > .m-momento__texto .m-lead { margin-top: 12px; }
.m-momento__itens { order: 3; }
}

.m-momento__texto .m-lead { margin-top: 12px; }
.m-momento__itens { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.9375rem; }
.m-momento__itens li { display: flex; gap: 10px; align-items: baseline; color: var(--montra-tinta-2); }

.m-momento__itens li::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.8em;
  border-right: 2px solid var(--montra-realce-escuro);
  border-bottom: 2px solid var(--montra-realce-escuro);
  transform: translateY(-0.08em) rotate(40deg);
  margin-inline: 4px 2px;
}

.m-momento__ecras { display: grid; gap: 16px; }

/* Em telemóvel só se mostra o primeiro ecrã de cada momento: o segundo repete a área e custa 300 px de rolagem. */
@media (max-width: 899px) {
  .m-momento__ecras .m-ecra:nth-child(n+2) { display: none; }
}

@media (min-width: 900px) {
  .m-momentos { gap: 44px; }
  /* dois ecrãs no mesmo momento: lado a lado, ampliados e ancorados à direita */
  .m-momento__ecras:has(.m-ecra:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-momento__ecras:has(.m-ecra:nth-child(2)) .m-ecra__moldura { aspect-ratio: 4 / 3; }
  .m-momento__ecras:has(.m-ecra:nth-child(2)) .m-ecra__moldura img {
    width: 135%; max-width: none; margin-left: -27%; aspect-ratio: auto; object-fit: initial;
  }
  .m-momento { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; }
  .m-momento--inverso { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .m-momento--inverso .m-momento__texto { order: 2; }
}

/* ---- as outras áreas: texto em colunas separadas por fios, sem cartões ------ */

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

.m-area { padding: 16px 18px; background: var(--montra-papel); border: 1px solid var(--montra-linha); border-radius: var(--montra-raio); }
.m-area .m-h3 { margin: 0 0 8px; }
.m-area p { margin: 0; color: var(--montra-tinta-2); }
.m-area details { margin-top: 4px; }
.m-area summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 700; color: var(--montra-realce-escuro); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.m-area details p { margin: 0 0 8px; font-size: 0.9375rem; color: var(--montra-tinta-muda); }

.m-etiqueta {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--montra-realce-escuro);
  border-radius: var(--montra-raio);
  color: var(--montra-realce-escuro);
  font-size: 0.8125rem;
  font-weight: 700;
  vertical-align: 2px;
}

@media (min-width: 900px) {
  .m-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
}

/* Recursos escritos pelo dono em /sas: lista simples, sem decoração. */
.m-recursos { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 900px) {
  .m-recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
}

.m-recursos li { border-top: 1px solid var(--montra-linha); padding-top: 20px; }
.m-recursos i { color: var(--montra-realce-escuro); margin-right: 8px; }

/* ---- feito para Angola ---------------------------------------------------- */

.m-angola { display: grid; gap: 32px; }

.m-factos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin: 0; padding: 0; list-style: none; }
.m-facto { padding-block: 16px; border-top: 1px solid var(--montra-linha); font-size: 0.9375rem; }
.m-facto .m-h3 { font-size: 1rem; }
.m-facto h3 { margin: 0 0 4px; }
.m-facto p { margin: 0; color: var(--montra-tinta-2); }

@media (min-width: 900px) {
  .m-angola { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; }
  .m-angola .m-cabecalho-seccao { margin-bottom: 0; position: sticky; top: 112px; }
  .m-factos { column-gap: 40px; }
  .m-facto { font-size: 1rem; }
  .m-facto .m-h3 { font-size: 1.125rem; }
  .m-facto { padding-block: 28px; }
}

/* ---- nuvem ou local ------------------------------------------------------- */

.m-modos { display: grid; gap: 0; border-top: 1px solid var(--montra-tinta); }
.m-modo { padding-block: 20px; border-bottom: 1px solid var(--montra-linha); }
.m-modo .m-lead { font-size: 1rem; margin-top: 8px; }
.m-modo ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.9375rem; }
.m-modo li { display: flex; gap: 10px; align-items: baseline; color: var(--montra-tinta-2); }

.m-modo li::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.8em;
  border-right: 2px solid var(--montra-realce-escuro);
  border-bottom: 2px solid var(--montra-realce-escuro);
  transform: translateY(-0.08em) rotate(40deg);
  margin-inline: 4px 2px;
}

@media (min-width: 900px) {
  .m-modos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .m-modo { padding: 32px 48px 32px 0; border-bottom: 0; }
  .m-modo + .m-modo { padding: 32px 0 32px 48px; border-left: 1px solid var(--montra-linha); }
}

/* ---- planos --------------------------------------------------------------- */

.m-aviso {
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--montra-realce-escuro);
  border-radius: var(--montra-raio);
  background: var(--montra-papel-2);
  font-weight: 600;
}

.m-planos { display: grid; gap: 16px; }

.m-plano {
  display: flex;
  flex-direction: column;
  background: var(--montra-papel);
  border: 1px solid var(--montra-linha);
  border-radius: var(--montra-raio);
}

.m-plano__topo { padding: 24px 24px 20px; border-bottom: 1px solid var(--montra-linha); }
.m-plano__nome { margin: 0 0 12px; }
.m-plano__preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.m-plano__valor { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.m-plano__moeda { font-size: 1.125rem; font-weight: 700; }
.m-plano__periodo { color: var(--montra-tinta-muda); font-size: 0.9375rem; }
.m-plano__consulta { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--montra-tinta-2); }
.m-plano__corpo { flex: 1 1 auto; padding: 20px 24px; }
.m-plano__corpo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.m-plano__corpo li { display: flex; gap: 10px; align-items: baseline; color: var(--montra-tinta-2); }

.m-plano__corpo li::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.8em;
  border-right: 2px solid var(--montra-realce-escuro);
  border-bottom: 2px solid var(--montra-realce-escuro);
  transform: translateY(-0.08em) rotate(40deg);
  margin-inline: 4px 2px;
}

.m-plano__rodape { padding: 0 24px 24px; }

@media (min-width: 640px) {
  .m-planos { grid-template-columns: repeat(auto-fill, minmax(260px, 360px)); }
}

.m-medida {
  display: grid;
  gap: 20px;
  padding: 28px;
  background: var(--montra-papel-2);
  border: 1px solid var(--montra-linha);
  border-radius: var(--montra-raio);
}

.m-medida p { margin: 0; max-width: 56ch; color: var(--montra-tinta-2); font-size: 1.0625rem; }

@media (min-width: 900px) {
  .m-medida { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 40px; gap: 48px; }
}

/* ---- perguntas ------------------------------------------------------------ */

.m-faq-grelha { display: grid; gap: 32px; }

.m-faq { border-top: 1px solid var(--montra-tinta); }
.m-faq details { border-bottom: 1px solid var(--montra-linha); }

.m-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.m-faq summary::-webkit-details-marker { display: none; }

.m-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--montra-tinta);
  border-bottom: 2px solid var(--montra-tinta);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duracao-normal) var(--curva-saida);
}

.m-faq details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.m-faq summary:hover { color: var(--montra-realce-escuro); }
.m-faq__resposta { padding: 0 0 20px; color: var(--montra-tinta-2); max-width: 64ch; }

@media (min-width: 900px) {
  .m-faq-grelha { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; }
  .m-faq-grelha .m-cabecalho-seccao { margin-bottom: 0; }
}

/* ---- pedido de demonstração ----------------------------------------------- */

.m-demo { display: grid; gap: 32px; align-items: start; }

.m-demo__pontos { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--montra-sobre-2); }
.m-demo__pontos li { display: flex; gap: 10px; align-items: baseline; }

.m-demo__pontos li::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.8em;
  border-right: 2px solid var(--montra-realce);
  border-bottom: 2px solid var(--montra-realce);
  transform: translateY(-0.08em) rotate(40deg);
  margin-inline: 4px 2px;
}

.m-demo__pontos a { color: var(--montra-sobre); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.m-formulario {
  padding: 20px;
  background: var(--montra-papel);
  color: var(--montra-tinta);
  border-radius: var(--montra-raio-moldura);
  --m-foco: var(--montra-tinta);
}

.m-formulario__campos { display: grid; gap: 16px; }

.m-campo { display: flex; flex-direction: column; gap: 6px; }
.m-campo__etiqueta { font-size: 0.9375rem; font-weight: 700; }
.m-campo__opcional { font-weight: 500; color: var(--montra-tinta-muda); }
.m-campo__ajuda { font-size: 0.875rem; color: var(--montra-tinta-muda); margin: 0; }

.m-campo input[type="text"],
.m-campo input[type="email"],
.m-campo input[type="tel"],
.m-campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--montra-papel);
  border: 1px solid var(--montra-campo-borda);
  border-radius: var(--montra-raio);
  color: var(--montra-tinta);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
}

.m-campo textarea { min-height: 88px; resize: vertical; }
.m-campo input::placeholder, .m-campo textarea::placeholder { color: var(--montra-tinta-muda); opacity: 1; }

.m-campo [aria-invalid="true"] { border: 2px solid var(--montra-erro); }
.m-campo__erro { font-size: 0.9375rem; font-weight: 700; color: var(--montra-erro); }

.m-consentimento { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; color: var(--montra-tinta-2); }
.m-consentimento input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--montra-marinho); }
.m-consentimento a { color: var(--montra-tinta); }

.m-formulario__fim { display: grid; gap: 12px; margin-top: 24px; }

.m-alerta {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 2px solid var(--montra-erro);
  border-radius: var(--montra-raio);
  background: var(--montra-erro-fundo);
  color: var(--montra-tinta);
  font-weight: 600;
}

.m-alerta ul { margin: 8px 0 0; padding-left: 20px; font-weight: 500; }
.m-alerta a { color: var(--montra-tinta); font-weight: 700; }
.m-alerta--ok { border-color: var(--montra-ok); background: var(--montra-ok-fundo); }

/* A armadilha para robots: fora do ecrã, fora da tabulação, fora dos leitores. */
.m-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 640px) {
  .m-formulario { padding: 32px; }
  .m-formulario__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-campo--largo { grid-column: 1 / -1; }
  .m-formulario__fim { grid-template-columns: auto 1fr; align-items: center; gap: 20px; }
}

@media (min-width: 900px) {
  .m-demo { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; }
}

/* ---- destaque do dono (rodapé configurável em /sas) ------------------------ */

.m-destaque { padding-block: 40px; border-top: 1px solid var(--montra-linha); }
.m-destaque .m-lead { margin-block: 12px 24px; }

/* ---- rodapé --------------------------------------------------------------- */

.m-rodape {
  padding-block: 40px 24px;
  background: var(--montra-marinho-3);
  color: var(--montra-sobre-2);
  font-size: 0.9375rem;
}

.m-rodape__grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.m-rodape__marca { grid-column: 1 / -1; }
.m-rodape img { display: block; height: 36px; width: auto; }
.m-rodape h2 { margin: 0 0 12px; font-size: 0.9375rem; font-weight: 700; color: var(--montra-sobre); letter-spacing: 0; }
.m-rodape ul { margin: 0; padding: 0; list-style: none; }
.m-rodape li a { display: inline-flex; align-items: center; min-height: 44px; }
.m-rodape a { color: var(--montra-sobre-2); text-underline-offset: 3px; }
.m-rodape a:hover { color: var(--montra-sobre); }
.m-rodape p { margin: 0 0 8px; }
.m-rodape__marca p { margin-top: 16px; max-width: 36ch; color: var(--montra-sobre-muda); }

.m-rodape__fim {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--montra-linha-escura);
  color: var(--montra-sobre-muda);
  font-size: 0.875rem;
  /* o botão flutuante do WhatsApp não tapa o último texto */
  padding-bottom: 56px;
}

.m-rodape__fim a { color: var(--montra-sobre-2); }

@media (min-width: 900px) {
  .m-rodape__grelha { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr); gap: 40px; }
  .m-rodape__marca { grid-column: auto; }
}

/* Ligação flutuante do WhatsApp. */
.m-whatsapp {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-aviso);
  display: inline-flex;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--montra-sombra-moldura);
}

.m-whatsapp img { width: 100%; height: 100%; object-fit: cover; }

@media print {
  .m-whatsapp, .m-menu { display: none !important; }
}

/* ============================================================================
   MONTRA.4 (08/10/2026) — a montra passa a várias páginas.
   Componentes novos: cabeçalho de página com migalhas, razões do Início, resumo
   de planos, cartões de área, página de área, anterior/seguinte, bloco final de
   pedido e tabelas de comparação. Só `--montra-*`; nenhuma cor literal.
   ============================================================================ */

/* ---- ligação de acção («Saber mais») -------------------------------------- */

.m-ligacao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--montra-realce-escuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m-pagina a.m-ligacao { color: var(--montra-realce-escuro); }
.m-pagina a.m-ligacao:hover { color: var(--montra-tinta); }

/* ---- cabeçalho das páginas interiores ------------------------------------- */

.m-pag-topo {
  padding-block: 8px 24px;
  background: var(--montra-papel-2);
  border-bottom: 1px solid var(--montra-linha);
}

.m-pag-topo .m-h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.m-pag-topo .m-lead { margin-top: 12px; }

@media (min-width: 900px) {
  .m-pag-topo { padding-block: 16px 40px; }
}

.m-migalhas ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.m-migalhas li { display: inline-flex; align-items: center; }

.m-migalhas li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-inline: 10px 8px;
  border-right: 2px solid var(--montra-tinta-muda);
  border-top: 2px solid var(--montra-tinta-muda);
  transform: rotate(45deg);
}

.m-migalhas a,
.m-migalhas [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.m-migalhas a { color: var(--montra-tinta-2); text-underline-offset: 3px; }
.m-migalhas [aria-current] { font-weight: 700; color: var(--montra-tinta); }

/* A entrada do menu onde estamos. */
.m-nav a[aria-current] { color: var(--montra-tinta); background: var(--montra-papel-2); box-shadow: inset 0 -3px 0 var(--montra-realce-escuro); }
.m-menu__painel a[aria-current] { color: var(--montra-realce-escuro); }
.m-topo .m-botao--principal[aria-current] { box-shadow: inset 0 -3px 0 var(--montra-realce-escuro); }

/* ---- Início: as razões ---------------------------------------------------- */

.m-razoes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--montra-tinta); }
.m-razao { position: relative; padding-block: 16px; border-bottom: 1px solid var(--montra-linha); }
/* O título é a ligação e cobre a razão inteira (alvo grande, sem uma segunda ligação por razão). */
.m-razao a { text-decoration: underline; text-underline-offset: 3px; }
.m-razao a::after { content: ""; position: absolute; inset: 0; }
.m-razao:focus-within { outline: 3px solid var(--montra-tinta); outline-offset: -3px; }
.m-razao a:focus-visible { outline: 0; }
.m-razao:hover .m-h3 { color: var(--montra-realce-escuro); }
.m-razao .m-h3 { margin: 0 0 6px; }
.m-razao p { margin: 0; color: var(--montra-tinta-2); max-width: 46ch; }

@media (min-width: 640px) {
  .m-razoes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

@media (min-width: 1100px) {
  .m-razoes { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .m-razao { border-bottom: 0; padding-block: 24px 8px; }
}

/* ---- Início: resumo dos planos -------------------------------------------- */

.m-resumo-planos .m-cabecalho-seccao { margin-bottom: 16px; }

.m-planos-linha { max-width: 640px; margin: 0 0 20px; padding: 0; list-style: none; border-top: 1px solid var(--montra-tinta); }

.m-planos-linha li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--montra-linha);
}

.m-planos-linha__nome { font-weight: 700; }
.m-planos-linha__preco { font-variant-numeric: tabular-nums; color: var(--montra-tinta-2); }

/* ---- bloco final: pedir demonstração -------------------------------------- */

.m-cta { padding-block: 32px; }
.m-cta__grelha { display: grid; gap: 20px; align-items: center; }
.m-cta .m-lead { margin-top: 10px; }
.m-cta__accoes { display: grid; gap: 4px; justify-items: start; }
.m-cta__accoes .m-muda { margin: 8px 0 0; }
.m-cta__accoes .m-muda a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 900px) {
  .m-cta { padding-block: 52px; }
  .m-cta__grelha { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
}

/* ---- índice de funcionalidades -------------------------------------------- */

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

.m-cartao-area {
  position: relative;
  padding: 16px 18px;
  background: var(--montra-papel);
  border: 1px solid var(--montra-linha);
  border-radius: var(--montra-raio);
}

.m-cartao-area .m-h3 { margin: 0 0 6px; }
.m-cartao-area p { margin: 0; color: var(--montra-tinta-2); }

/* A ligação do título cobre o cartão inteiro: o alvo é o cartão, não só o texto. */
.m-cartao-area a { text-decoration: underline; text-underline-offset: 3px; }
.m-cartao-area a::after { content: ""; position: absolute; inset: 0; border-radius: var(--montra-raio); }
.m-cartao-area:hover { border-color: var(--montra-tinta); }
.m-cartao-area:focus-within { outline: 3px solid var(--montra-tinta); outline-offset: 2px; }
.m-cartao-area a:focus-visible { outline: 0; }
.m-cartao-area--breve { background: var(--montra-papel-2); }

@media (min-width: 640px) {
  .m-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1100px) {
  .m-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- página de área ------------------------------------------------------- */

.m-area-pag { display: grid; gap: 20px; }
.m-area-pag .m-h2 { font-size: 1.375rem; margin: 24px 0 12px; }
.m-area-pag__texto > .m-h2:first-child { margin-top: 0; }
.m-area-pag .m-texto { margin: -4px 0 12px; }

.m-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.m-lista li { display: flex; gap: 10px; align-items: baseline; color: var(--montra-tinta-2); }

.m-lista li::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.8em;
  border-right: 2px solid var(--montra-realce-escuro);
  border-bottom: 2px solid var(--montra-realce-escuro);
  transform: translateY(-0.08em) rotate(40deg);
  margin-inline: 4px 2px;
}

.m-relacionadas__titulo { margin: 28px 0 0; }
.m-relacionadas { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }

.m-area-pag__ecras { display: grid; gap: 20px; align-content: start; }

/* Em telemóvel o ecrã vem primeiro e só se mostra o primeiro (o segundo custa 300 px de rolagem). */
@media (max-width: 899px) {
  .m-area-pag__ecras { order: -1; }
  .m-area-pag__ecras .m-ecra:nth-child(n+2) { display: none; }
}

@media (min-width: 900px) {
  .m-area-pag--com-ecras { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .m-area-pag:not(.m-area-pag--com-ecras) .m-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .m-area-pag:not(.m-area-pag--com-ecras) { max-width: 920px; }
}

/* ---- área anterior e seguinte --------------------------------------------- */

.m-seccao--folhear { padding-block: 20px; }

.m-folhear { display: flex; flex-wrap: wrap; gap: 12px; }

.m-folhear a {
  flex: 1 1 200px;
  display: grid;
  gap: 2px;
  min-height: 64px;
  align-content: center;
  padding: 10px 16px;
  background: var(--montra-papel);
  border: 1px solid var(--montra-linha);
  border-radius: var(--montra-raio);
  text-decoration: none;
}

.m-folhear a:hover { border-color: var(--montra-tinta); }
.m-folhear__seguinte { text-align: right; margin-left: auto; }
.m-folhear__sentido { font-size: 0.875rem; color: var(--montra-tinta-muda); }
.m-folhear__nome { font-weight: 700; }

/* ---- tabelas de comparação ------------------------------------------------ */

.m-tabela-caixa { width: 100%; overflow-x: auto; }

.m-tabela { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.m-tabela th,
.m-tabela td { padding: 12px 10px; border-bottom: 1px solid var(--montra-linha); text-align: left; vertical-align: top; }
.m-tabela thead th { border-bottom: 2px solid var(--montra-tinta); font-weight: 700; }
.m-tabela tbody th { font-weight: 700; width: 26%; }
.m-tabela td { color: var(--montra-tinta-2); }
.m-tabela--planos th,
.m-tabela--planos td { text-align: center; }
.m-tabela--planos tbody th,
.m-tabela--planos thead th:first-child { text-align: left; width: auto; }

.m-sim {
  display: inline-block;
  width: 0.45em;
  height: 0.8em;
  border-right: 3px solid var(--montra-ok);
  border-bottom: 3px solid var(--montra-ok);
  transform: translateY(-0.08em) rotate(40deg);
}

.m-nao { color: var(--montra-tinta-muda); }

@media (min-width: 640px) {
  .m-tabela { font-size: 1rem; }
  .m-tabela th,
  .m-tabela td { padding: 16px 18px; }
}

.m-nota { margin-top: 16px; max-width: 64ch; }

.m-passos { margin: 8px 0 0; padding-left: 1.25em; display: grid; gap: 8px; color: var(--montra-tinta-2); }
.m-faq-pag { max-width: 860px; }
.m-rodape__contacto { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 639px) { .m-rodape__contacto { font-size: 0.8125rem; } }